diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index 1ace0094..bede81b4 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { EventHandler, ReactElement, SyntheticEvent } from 'react'; -import { useEffect, useState } from 'react'; +import { useEffect, useId, useState } from 'react'; import { noOp } from '../../utils/noOp'; import { Icon } from '../Icon/Icon'; import { Label } from '../Label/Label'; @@ -8,6 +8,8 @@ import './pagination.less'; import { MIN_PAGE } from './paginationConstants'; export interface PaginationProperties { + /** Identifier of the table this element controls */ + tableId?: string; /** Currently displayed page number */ page: number; /** Total number of available pages */ @@ -79,12 +81,14 @@ const PaginationNavButton = ({ }; interface PaginationInputProperties { + tableId: string; page: number; pageCount: number; onChange: (value: number) => void; } const PaginationInput = ({ + tableId, page, pageCount, onChange @@ -93,17 +97,15 @@ const PaginationInput = ({ onChange(Number.parseInt(event.currentTarget.value, 10)); }; + const inputId = `${tableId}-pagination_current-page`; + return ( -