diff --git a/CHANGELOG.md b/CHANGELOG.md index 72ce5c755ec..a9b38924f97 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,10 @@ - Fixed non-searchable `EuiSelectable`s not selecting items with the Enter & Space keys ([#5693](https://github.com/elastic/eui/pull/5693)) +**Breaking changes** + +- Removed the `'all'` option in `EuiTablePagination.itemsPerPage` and `itemsPerPageOptions` in `EuiBasicTable` and `EuiDataGrid` due to Typescript issues. Use `0` instead to represent a "Show all" option ([#5699](https://github.com/elastic/eui/issues/5699)) + ## [`50.0.0`](https://github.com/elastic/eui/tree/v50.0.0) - Updated `EuiComboBox` to WAI-ARIA 1.2 pattern and improved keyboard navigation ([#5636](https://github.com/elastic/eui/pull/5636)) diff --git a/src-docs/src/views/datagrid/in_memory_pagination.js b/src-docs/src/views/datagrid/in_memory_pagination.js index f901bcdd4fe..016d66863ea 100644 --- a/src-docs/src/views/datagrid/in_memory_pagination.js +++ b/src-docs/src/views/datagrid/in_memory_pagination.js @@ -117,7 +117,7 @@ export default () => { sorting={{ columns: sortingColumns, onSort }} pagination={{ ...pagination, - pageSizeOptions: [10, 50, 'all'], + pageSizeOptions: [10, 50, 100], onChangeItemsPerPage: onChangeItemsPerPage, onChangePage: onChangePage, }} diff --git a/src-docs/src/views/pagination/paginated_table.js b/src-docs/src/views/pagination/paginated_table.js index 408dc416603..8d0920071e7 100644 --- a/src-docs/src/views/pagination/paginated_table.js +++ b/src-docs/src/views/pagination/paginated_table.js @@ -56,12 +56,12 @@ export default () => { const totalItemCount = raw_data.length; const startIndex = pageIndex * pageSize; const pageOfItems = - pageSize === 'all' - ? raw_data - : raw_data.slice( + pageSize > 0 + ? raw_data.slice( startIndex, Math.min(startIndex + pageSize, totalItemCount) - ); + ) + : raw_data; const columns = [ { @@ -93,11 +93,11 @@ export default () => { pageIndex, pageSize, totalItemCount, - pageSizeOptions: [10, 'all'], + pageSizeOptions: [10, 0], }; const resultsCount = - pageSize === 'all' ? ( + pageSize === 0 ? ( All ) : ( <> diff --git a/src-docs/src/views/pagination/pagination_example.js b/src-docs/src/views/pagination/pagination_example.js index 69d0cedd296..4ab5753b754 100644 --- a/src-docs/src/views/pagination/pagination_example.js +++ b/src-docs/src/views/pagination/pagination_example.js @@ -238,7 +238,7 @@ export const PaginationExample = { tables - . If you pass {"'all'"} in as one of the{' '} + . If you pass 0 in as one of the{' '} itemsPerPageOptions, it will create a "Show all" option and hide the pagination.

diff --git a/src-docs/src/views/pagination/table_pagination.tsx b/src-docs/src/views/pagination/table_pagination.tsx index 4ae75bd63fb..dbcbe981c0b 100644 --- a/src-docs/src/views/pagination/table_pagination.tsx +++ b/src-docs/src/views/pagination/table_pagination.tsx @@ -5,14 +5,12 @@ import { EuiTablePagination } from '../../../../src'; export default () => { const totalEntries = 1250; const [activePage, setActivePage] = useState(0); - const [rowSize, setRowSize] = useState(50); + const [rowSize, setRowSize] = useState(50); const [pageCount, setPageCount] = useState(Math.ceil(totalEntries / 50)); const goToPage = (pageNumber: number) => setActivePage(pageNumber); - const changeItemsPerPage = (pageSize: number | 'all') => { - const pageCount = - pageSize === 'all' ? 1 : Math.ceil(totalEntries / pageSize); - setPageCount(pageCount); + const changeItemsPerPage = (pageSize: number) => { + setPageCount(Math.ceil(totalEntries / pageSize)); setRowSize(pageSize); setActivePage(0); }; @@ -25,7 +23,7 @@ export default () => { onChangePage={goToPage} itemsPerPage={rowSize} onChangeItemsPerPage={changeItemsPerPage} - itemsPerPageOptions={[10, 20, 'all']} + itemsPerPageOptions={[10, 20, 0]} /> ); }; diff --git a/src-docs/src/views/tables/data_store.js b/src-docs/src/views/tables/data_store.js index 43c4a3ba2b1..a9d1b73082a 100644 --- a/src-docs/src/views/tables/data_store.js +++ b/src-docs/src/views/tables/data_store.js @@ -112,7 +112,7 @@ export const createDataStore = () => { let pageOfItems; - if ((!pageIndex && !pageSize) || pageSize === 'all') { + if (!pageIndex && !pageSize) { pageOfItems = items; } else { const startIndex = pageIndex * pageSize; diff --git a/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination.js b/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination.js index 217516603d4..ddc7156d395 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination.js +++ b/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination.js @@ -115,7 +115,7 @@ export const Table = () => { columns={columns} pagination={{ ...pagination, - pageSizeOptions: [10, 20, 'all'], + pageSizeOptions: [10, 20, 0], }} sorting={sorting} /> diff --git a/src-docs/src/views/tables/paginated/paginated.js b/src-docs/src/views/tables/paginated/paginated.js index c514f791227..2b1e128bb71 100644 --- a/src-docs/src/views/tables/paginated/paginated.js +++ b/src-docs/src/views/tables/paginated/paginated.js @@ -134,12 +134,12 @@ export const Table = () => { pageIndex, pageSize, totalItemCount, - pageSizeOptions: [10, 'all'], + pageSizeOptions: [10, 0], showPerPageOptions, }; const resultsCount = - pageSize === 'all' ? ( + pageSize === 0 ? ( All ) : ( <> diff --git a/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap b/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap index 130d4fc3e97..6163b2665d5 100644 --- a/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap @@ -55,12 +55,12 @@ exports[`PaginationBar render - show all pageSize 1`] = ` { ], pagination: { pageIndex: 0, - pageSize: 'all', - pageSizeOptions: [1, 5, 'all'], + pageSize: 0, + pageSizeOptions: [1, 5, 0], totalItemCount: 2, }, onChange: () => {}, diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx index efd47f674c1..bf3061ae5d7 100644 --- a/src/components/basic_table/basic_table.tsx +++ b/src/components/basic_table/basic_table.tsx @@ -165,7 +165,7 @@ export interface Criteria { */ page?: { index: number; - size: number | 'all'; + size: number; }; /** * If the shown items are sorted, this describes the sort criteria @@ -182,7 +182,7 @@ export interface CriteriaWithPagination extends Criteria { */ page: { index: number; - size: number | 'all'; + size: number; }; } @@ -459,7 +459,7 @@ export class EuiBasicTable extends Component< this.changeSelection([]); } - onPageSizeChange(size: number | 'all') { + onPageSizeChange(size: number) { this.clearSelection(); const currentCriteria = this.buildCriteria(this.props); const criteria: CriteriaWithPagination = { @@ -660,10 +660,9 @@ export class EuiBasicTable extends Component< const itemCount = items.length; const totalItemCount = pagination ? pagination.totalItemCount : itemCount; const page = pagination ? pagination.pageIndex + 1 : 1; - const pageCount = - typeof pagination?.pageSize === 'number' - ? Math.ceil(pagination.totalItemCount / pagination.pageSize) - : 1; + const pageCount = pagination?.pageSize + ? Math.ceil(pagination.totalItemCount / pagination.pageSize) + : 1; let captionElement; if (tableCaption) { @@ -949,8 +948,7 @@ export class EuiBasicTable extends Component< const rows = items.map((item: T, index: number) => { // if there's pagination the item's index must be adjusted to the where it is in the whole dataset const tableItemIndex = - hasPagination(this.props) && - typeof this.props.pagination.pageSize === 'number' + hasPagination(this.props) && this.props.pagination.pageSize > 0 ? this.props.pagination.pageIndex * this.props.pagination.pageSize + index : index; diff --git a/src/components/basic_table/in_memory_table.test.tsx b/src/components/basic_table/in_memory_table.test.tsx index 70a8dc2641c..0830df32c7a 100644 --- a/src/components/basic_table/in_memory_table.test.tsx +++ b/src/components/basic_table/in_memory_table.test.tsx @@ -240,8 +240,8 @@ describe('EuiInMemoryTable', () => { }, ], pagination: { - initialPageSize: 'all', - pageSizeOptions: [1, 2, 3, 'all'], + initialPageSize: 0, + pageSizeOptions: [1, 2, 3, 0], }, }; const component = render(); diff --git a/src/components/basic_table/in_memory_table.tsx b/src/components/basic_table/in_memory_table.tsx index 49ca5c4c498..a0da84671f8 100644 --- a/src/components/basic_table/in_memory_table.tsx +++ b/src/components/basic_table/in_memory_table.tsx @@ -48,11 +48,11 @@ function isEuiSearchBarProps( export type Search = boolean | EuiSearchBarProps; interface PaginationOptions extends EuiTablePaginationProps { - pageSizeOptions?: Array; + pageSizeOptions?: number[]; initialPageIndex?: number; - initialPageSize?: number | 'all'; + initialPageSize?: number; pageIndex?: number; - pageSize?: number | 'all'; + pageSize?: number; } type Pagination = boolean | PaginationOptions; @@ -114,8 +114,8 @@ interface State { search?: Search; query: Query | null; pageIndex: number; - pageSize?: number | 'all'; - pageSizeOptions?: Array; + pageSize?: number; + pageSizeOptions?: number[]; sortName: ReactNode; sortDirection?: Direction; allowNeutralSort: boolean; @@ -161,15 +161,15 @@ const getInitialPagination = (pagination: Pagination | undefined) => { const initialPageIndex = pagination === true ? 0 - : pagination.pageIndex || pagination.initialPageIndex || 0; + : pagination.pageIndex ?? pagination.initialPageIndex ?? 0; const initialPageSize = pagination === true ? defaultPageSize - : pagination.pageSize || pagination.initialPageSize || defaultPageSize; + : pagination.pageSize ?? pagination.initialPageSize ?? defaultPageSize; if ( showPerPageOptions && - initialPageSize && + initialPageSize != null && (!pageSizeOptions || !pageSizeOptions.includes(initialPageSize)) ) { throw new Error( @@ -389,7 +389,7 @@ export class EuiInMemoryTable extends Component< onTableChange = ({ page, sort }: Criteria) => { let { index: pageIndex, size: pageSize } = (page || {}) as { index: number; - size: number | 'all'; + size: number; }; // don't apply pagination changes that are otherwise controlled @@ -583,7 +583,7 @@ export class EuiInMemoryTable extends Component< : matchingItems; const visibleItems = - typeof pageSize === 'number' && this.props.pagination + pageSize && this.props.pagination ? (() => { const startIndex = pageIndex * pageSize; return sortedItems.slice( @@ -640,7 +640,7 @@ export class EuiInMemoryTable extends Component< ? undefined : { pageIndex, - pageSize: pageSize || 1, + pageSize: pageSize ?? 1, pageSizeOptions, totalItemCount, showPerPageOptions, diff --git a/src/components/basic_table/pagination_bar.test.tsx b/src/components/basic_table/pagination_bar.test.tsx index 3e39ae01e49..5d64fcea1f7 100644 --- a/src/components/basic_table/pagination_bar.test.tsx +++ b/src/components/basic_table/pagination_bar.test.tsx @@ -70,8 +70,8 @@ describe('PaginationBar', () => { ...requiredProps, pagination: { pageIndex: 0, - pageSize: 'all' as const, - pageSizeOptions: [1, 5, 'all' as const], + pageSize: 0, + pageSizeOptions: [1, 5, 0], totalItemCount: 5, }, onPageSizeChange: () => {}, diff --git a/src/components/basic_table/pagination_bar.tsx b/src/components/basic_table/pagination_bar.tsx index 5c4972e80da..377eafe595b 100644 --- a/src/components/basic_table/pagination_bar.tsx +++ b/src/components/basic_table/pagination_bar.tsx @@ -21,18 +21,18 @@ export interface Pagination { pageIndex: number; /** * The maximum number of items that can be shown in a single page. - * Pass `'all'` to display the selected "Show all" option and hide the pagination. + * Pass `0` to display the selected "Show all" option and hide the pagination. */ - pageSize: number | 'all'; + pageSize: number; /** * The total number of items the page is "sliced" of */ totalItemCount: number; /** * Configures the page size dropdown options. - * Pass `'all'` as one of the options to create a "Show all" option. + * Pass `0` as one of the options to create a "Show all" option. */ - pageSizeOptions?: Array; + pageSizeOptions?: number[]; /** * Hides the page size dropdown */ @@ -64,10 +64,9 @@ export const PaginationBar = ({ const pageSizeOptions = pagination.pageSizeOptions ? pagination.pageSizeOptions : defaults.pageSizeOptions; - const pageCount = - pagination.pageSize === 'all' - ? 1 - : Math.ceil(pagination.totalItemCount / pagination.pageSize); + const pageCount = pagination.pageSize + ? Math.ceil(pagination.totalItemCount / pagination.pageSize) + : 1; useEffect(() => { if (pageCount < pagination.pageIndex + 1) { diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index 83b6ba54035..bdc4ac6e9a0 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -345,10 +345,9 @@ export const EuiDataGrid = forwardRef( const ariaLabelledById = useGeneratedHtmlId(); const ariaPage = pagination ? pagination.pageIndex + 1 : 1; - const ariaPageCount = - typeof pagination?.pageSize === 'number' - ? Math.ceil(rowCount / pagination.pageSize) - : 1; + const ariaPageCount = pagination?.pageSize + ? Math.ceil(rowCount / pagination.pageSize) + : 1; const ariaLabel = useEuiI18n( 'euiDataGrid.ariaLabel', '{label}; Page {page} of {pageCount}.', @@ -410,10 +409,11 @@ export const EuiDataGrid = forwardRef( renderCellValue={renderCellValue} columns={columns} rowCount={ - inMemory.level === 'enhancements' && // if `inMemory.level === enhancements` then we can only be sure the pagination's pageSize is available in memory - typeof pagination?.pageSize === 'number' // If pageSize is set to 'all' instead of a number, then all rows are being displayed - ? pagination?.pageSize || rowCount - : rowCount // otherwise, all of the data is present and usable + inMemory.level === 'enhancements' + ? // if `inMemory.level === enhancements` then we can only be sure the pagination's pageSize is available in memory + pagination?.pageSize || rowCount + : // otherwise, all of the data is present and usable + rowCount } onCellRender={onCellRender} /> diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts index da8614e9998..fc09d3e50d3 100644 --- a/src/components/datagrid/data_grid_types.ts +++ b/src/components/datagrid/data_grid_types.ts @@ -772,19 +772,19 @@ export interface EuiDataGridPaginationProps { pageIndex: number; /** * How many rows should initially be shown per page. - * Pass `'all'` to display the selected "Show all" option and hide the pagination. + * Pass `0` to display the selected "Show all" option and hide the pagination. */ - pageSize: number | 'all'; + pageSize: number; /** * An array of page sizes the user can select from. - * Pass `'all'` as one of the options to create a "Show all" option. + * Pass `0` as one of the options to create a "Show all" option. * Leave this prop undefined or use an empty array to hide "Rows per page" select button. */ - pageSizeOptions?: Array; + pageSizeOptions?: number[]; /** * A callback for when the user changes the page size selection */ - onChangeItemsPerPage: (itemsPerPage: number | 'all') => void; + onChangeItemsPerPage: (itemsPerPage: number) => void; /** * A callback for when the current page index changes */ diff --git a/src/components/datagrid/utils/data_grid_pagination.test.tsx b/src/components/datagrid/utils/data_grid_pagination.test.tsx index 6a312453dac..e84c6ca7349 100644 --- a/src/components/datagrid/utils/data_grid_pagination.test.tsx +++ b/src/components/datagrid/utils/data_grid_pagination.test.tsx @@ -101,12 +101,12 @@ describe('EuiDataGridPaginationRenderer', () => { `); }); - it('handles the "all" page size option', () => { + it('handles the "show all" page size option', () => { const component = shallow( ); expect(component).toMatchInlineSnapshot(` @@ -117,12 +117,12 @@ describe('EuiDataGridPaginationRenderer', () => { activePage={0} aria-controls="data-grid-id" aria-label="Pagination for preceding grid" - itemsPerPage="all" + itemsPerPage={0} itemsPerPageOptions={ Array [ 10, 25, - "all", + 0, ] } onChangeItemsPerPage={[MockFunction]} diff --git a/src/components/datagrid/utils/data_grid_pagination.tsx b/src/components/datagrid/utils/data_grid_pagination.tsx index 3e4e960a2db..dea8dd5424e 100644 --- a/src/components/datagrid/utils/data_grid_pagination.tsx +++ b/src/components/datagrid/utils/data_grid_pagination.tsx @@ -42,17 +42,9 @@ export const EuiDataGridPaginationRenderer = ({ [setFocusedCell, _onChangePage] ); - const pageCount = - typeof pageSize === 'number' ? Math.ceil(rowCount / pageSize) : 1; + const pageCount = pageSize ? Math.ceil(rowCount / pageSize) : 1; const minSizeOption = - pageSizeOptions?.length && - [...pageSizeOptions].reduce((a, b) => { - // Account for 'all' strings - if (typeof b !== 'number') return a; - if (typeof a !== 'number') return b; - // Find the smallest number - return Math.min(a, b); - }); + pageSizeOptions && [...pageSizeOptions].sort((a, b) => a - b)[0]; if (rowCount < (minSizeOption || pageSize)) { /** diff --git a/src/components/datagrid/utils/focus.ts b/src/components/datagrid/utils/focus.ts index 1bcfdc023d9..06c3145e343 100644 --- a/src/components/datagrid/utils/focus.ts +++ b/src/components/datagrid/utils/focus.ts @@ -215,9 +215,10 @@ export const createKeyDownHandler = ({ setFocusedCell([x + 1, y]); } } else if (key === keys.PAGE_DOWN) { - if (pagination && pagination.pageSize !== 'all') { + if (pagination && pagination.pageSize > 0) { event.preventDefault(); - const pageCount = Math.ceil(rowCount / pagination.pageSize); + const pageSize = pagination.pageSize; + const pageCount = Math.ceil(rowCount / pageSize); const pageIndex = pagination.pageIndex; if (pageIndex < pageCount - 1) { pagination.onChangePage(pageIndex + 1); @@ -225,7 +226,7 @@ export const createKeyDownHandler = ({ setFocusedCell([focusedCell[0], 0]); } } else if (key === keys.PAGE_UP) { - if (pagination && pagination.pageSize !== 'all') { + if (pagination && pagination.pageSize > 0) { event.preventDefault(); const pageIndex = pagination.pageIndex; if (pageIndex > 0) { diff --git a/src/components/datagrid/utils/grid_height_width.ts b/src/components/datagrid/utils/grid_height_width.ts index a1ede181602..02458020d3f 100644 --- a/src/components/datagrid/utils/grid_height_width.ts +++ b/src/components/datagrid/utils/grid_height_width.ts @@ -10,7 +10,6 @@ import { useEffect, useState, useContext, MutableRefObject } from 'react'; import { IS_JEST_ENVIRONMENT } from '../../../utils'; import { useUpdateEffect, useForceRender } from '../../../services'; import { useResizeObserver } from '../../observer/resize_observer'; -import { EuiTablePaginationProps } from '../../table/table_pagination'; import { EuiDataGridRowHeightsOptions } from '../data_grid_types'; import { RowHeightUtils } from './row_heights'; import { DataGridSortingContext } from './sorting'; @@ -163,7 +162,7 @@ export const useUnconstrainedHeight = ({ export const useVirtualizeContainerWidth = ( virtualizeContainer: HTMLDivElement | null, gridWidth: number, - pageSize: EuiTablePaginationProps['itemsPerPage'] + pageSize: number | undefined ) => { const [virtualizeContainerWidth, setVirtualizeContainerWidth] = useState(0); useResizeObserver(virtualizeContainer); diff --git a/src/components/datagrid/utils/ref.ts b/src/components/datagrid/utils/ref.ts index 34f3ee0ebfa..5c4d6a0085e 100644 --- a/src/components/datagrid/utils/ref.ts +++ b/src/components/datagrid/utils/ref.ts @@ -135,7 +135,7 @@ export const useSortPageCheck = ( : rowIndex; // Account for pagination - if (pagination && pagination.pageSize !== 'all') { + if (pagination && pagination.pageSize > 0) { const pageIndex = Math.floor(visibleRowIndex / pagination.pageSize); // If the targeted row is on a different page than the current page, // we should automatically navigate the user to the correct page diff --git a/src/components/datagrid/utils/row_count.ts b/src/components/datagrid/utils/row_count.ts index c32bc6062e2..7db5ea90834 100644 --- a/src/components/datagrid/utils/row_count.ts +++ b/src/components/datagrid/utils/row_count.ts @@ -16,12 +16,12 @@ export const computeVisibleRows = ({ rowCount: EuiDataGridProps['rowCount']; }): EuiDataGridVisibleRows => { const startRow = - pagination && pagination.pageSize !== 'all' + pagination && pagination.pageSize > 0 ? pagination.pageIndex * pagination.pageSize : 0; let endRow = - pagination && pagination.pageSize !== 'all' + pagination && pagination.pageSize > 0 ? (pagination.pageIndex + 1) * pagination.pageSize : rowCount; endRow = Math.min(endRow, rowCount); diff --git a/src/components/table/table_pagination/table_pagination.test.tsx b/src/components/table/table_pagination/table_pagination.test.tsx index 3326f98d8c5..26e5821960f 100644 --- a/src/components/table/table_pagination/table_pagination.test.tsx +++ b/src/components/table/table_pagination/table_pagination.test.tsx @@ -43,8 +43,8 @@ describe('EuiTablePagination', () => { ); diff --git a/src/components/table/table_pagination/table_pagination.tsx b/src/components/table/table_pagination/table_pagination.tsx index c14398dbba7..3c94efc0cce 100644 --- a/src/components/table/table_pagination/table_pagination.tsx +++ b/src/components/table/table_pagination/table_pagination.tsx @@ -21,7 +21,7 @@ import { EuiPopover } from '../../popover'; import { EuiI18n } from '../../i18n'; export type PageChangeHandler = EuiPaginationProps['onPageClick']; -export type ItemsPerPageChangeHandler = (pageSize: number | 'all') => void; +export type ItemsPerPageChangeHandler = (pageSize: number) => void; export interface EuiTablePaginationProps extends Omit { @@ -31,14 +31,14 @@ export interface EuiTablePaginationProps showPerPageOptions?: boolean; /** * Current selection for "Rows per page". - * Pass `'all'` to display the selected "Show all" option and hide the pagination. + * Pass `0` to display the selected "Show all" option and hide the pagination. */ - itemsPerPage?: number | 'all'; + itemsPerPage?: number; /** * Custom array of options for "Rows per page". - * Pass `'all'` as one of the options to create a "Show all" option. + * Pass `0` as one of the options to create a "Show all" option. */ - itemsPerPageOptions?: Array; + itemsPerPageOptions?: number[]; /** * Click handler that passes back selected `pageSize` number */ @@ -80,7 +80,7 @@ export const EuiTablePagination: FunctionComponent = ({ data-test-subj="tablePaginationPopoverButton" onClick={togglePopover} > - {itemsPerPage === 'all' ? ( + {itemsPerPage === 0 ? ( = ({ }} data-test-subj={`tablePagination-${itemsPerPageOption}-rows`} > - {itemsPerPageOption === 'all' ? ( + {itemsPerPageOption === 0 ? ( = ({ - {itemsPerPage !== 'all' && ( + {itemsPerPage > 0 && (