@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/esm/core/Table/TableCell.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { Cell, CellProps, TableInstance } from 'react-table';
-export declare type TableCellProps<T extends Record<string, unknown>> = {
+export type TableCellProps<T extends Record<string, unknown>> = {
     cell: Cell<T>;
     cellIndex: number;
     isDisabled: boolean;
@@ -9,5 +9,5 @@ export declare type TableCellProps<T extends Record<string, unknown>> = {
     expanderCell?: (cellProps: CellProps<T>) => React.ReactNode;
     density?: 'default' | 'condensed' | 'extra-condensed';
 };
-export declare const TableCell: <T extends Record<string, unknown>>(props: TableCellProps<T>) => JSX.Element;
+export declare const TableCell: <T extends Record<string, unknown>>(props: TableCellProps<T>) => React.JSX.Element;
 export default TableCell;

package/esm/core/Table/TableCell.js

@@ -8,61 +8,96 @@ import { getCellStyle, getStickyStyle } from './utils.js';
 import { SubRowExpander } from './SubRowExpander.js';
 import { SELECTION_CELL_ID } from './columns/index.js';
 import { DefaultCell } from './cells/index.js';
+import { Box } from '../utils/index.js';
 export const TableCell = (props) => {
-    const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, density, } = props;
-    const hasSubRowExpander = cellIndex ===
-        cell.row.cells.findIndex((c) => c.column.id !== SELECTION_CELL_ID);
-    const getSubRowStyle = () => {
-        if (!tableHasSubRows || !hasSubRowExpander) {
-            return undefined;
-        }
-        // If it doesn't have sub-rows then shift by another level to align with expandable rows on the same depth
-        const dynamicMargin = cell.row.depth + (cell.row.canExpand ? 0 : 1);
-        let cellPadding = 16;
-        let expanderMargin = 8;
-        if (density === 'condensed') {
-            cellPadding = 12;
-            expanderMargin = 4;
-        }
-        else if (density === 'extra-condensed') {
-            cellPadding = 8;
-            expanderMargin = 4;
-        }
-        const multiplier = 26 + expanderMargin; // 26 = expander width
-        return {
-            paddingLeft: cellPadding + dynamicMargin * multiplier,
-        };
+  const {
+    cell,
+    cellIndex,
+    isDisabled,
+    tableHasSubRows,
+    tableInstance,
+    expanderCell,
+    density,
+  } = props;
+  const hasSubRowExpander =
+    cellIndex ===
+    cell.row.cells.findIndex((c) => c.column.id !== SELECTION_CELL_ID);
+  const getSubRowStyle = () => {
+    if (!tableHasSubRows || !hasSubRowExpander) {
+      return undefined;
+    }
+    // If it doesn't have sub-rows then shift by another level to align with expandable rows on the same depth
+    const dynamicMargin = cell.row.depth + (cell.row.canExpand ? 0 : 1);
+    let cellPadding = 16;
+    let expanderMargin = 8;
+    if (density === 'condensed') {
+      cellPadding = 12;
+      expanderMargin = 4;
+    } else if (density === 'extra-condensed') {
+      cellPadding = 8;
+      expanderMargin = 4;
+    }
+    const multiplier = 26 + expanderMargin; // 26 = expander width
+    return {
+      paddingInlineStart: cellPadding + dynamicMargin * multiplier,
     };
-    const cellElementProps = cell.getCellProps({
-        className: cx('iui-table-cell', cell.column.cellClassName, {
-            'iui-table-cell-sticky': !!cell.column.sticky,
+  };
+  const cellElementProps = cell.getCellProps({
+    className: cx('iui-table-cell', cell.column.cellClassName, {
+      'iui-table-cell-sticky': !!cell.column.sticky,
+    }),
+    style: {
+      ...getCellStyle(cell.column, !!tableInstance.state.isTableResizing),
+      ...getSubRowStyle(),
+      ...getStickyStyle(cell.column, tableInstance.visibleColumns),
+    },
+  });
+  const cellProps = {
+    ...tableInstance,
+    ...{ cell, row: cell.row, value: cell.value, column: cell.column },
+  };
+  const cellContent = React.createElement(
+    React.Fragment,
+    null,
+    tableHasSubRows &&
+      hasSubRowExpander &&
+      cell.row.canExpand &&
+      React.createElement(SubRowExpander, {
+        cell: cell,
+        isDisabled: isDisabled,
+        cellProps: cellProps,
+        expanderCell: expanderCell,
+        density: density,
+      }),
+    cell.render('Cell'),
+  );
+  const cellRendererProps = {
+    cellElementProps,
+    cellProps,
+    children: React.createElement(
+      React.Fragment,
+      null,
+      cellContent,
+      cell.column.sticky === 'left' &&
+        tableInstance.state.sticky.isScrolledToRight &&
+        React.createElement(Box, { className: 'iui-table-cell-shadow-right' }),
+      cell.column.sticky === 'right' &&
+        tableInstance.state.sticky.isScrolledToLeft &&
+        React.createElement(Box, { className: 'iui-table-cell-shadow-left' }),
+    ),
+  };
+  return React.createElement(
+    React.Fragment,
+    null,
+    cell.column.cellRenderer
+      ? cell.column.cellRenderer({
+          ...cellRendererProps,
+          isDisabled: () => isDisabled,
+        })
+      : React.createElement(DefaultCell, {
+          ...cellRendererProps,
+          isDisabled: () => isDisabled,
         }),
-        style: {
-            ...getCellStyle(cell.column, !!tableInstance.state.isTableResizing),
-            ...getSubRowStyle(),
-            ...getStickyStyle(cell.column, tableInstance.visibleColumns),
-        },
-    });
-    const cellProps = {
-        ...tableInstance,
-        ...{ cell, row: cell.row, value: cell.value, column: cell.column },
-    };
-    const cellContent = (React.createElement(React.Fragment, null,
-        tableHasSubRows && hasSubRowExpander && cell.row.canExpand && (React.createElement(SubRowExpander, { cell: cell, isDisabled: isDisabled, cellProps: cellProps, expanderCell: expanderCell, density: density })),
-        cell.render('Cell')));
-    const cellRendererProps = {
-        cellElementProps,
-        cellProps,
-        children: (React.createElement(React.Fragment, null,
-            cellContent,
-            cell.column.sticky === 'left' &&
-                tableInstance.state.sticky.isScrolledToRight && (React.createElement("div", { className: 'iui-table-cell-shadow-right' })),
-            cell.column.sticky === 'right' &&
-                tableInstance.state.sticky.isScrolledToLeft && (React.createElement("div", { className: 'iui-table-cell-shadow-left' })))),
-    };
-    return (React.createElement(React.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer({
-        ...cellRendererProps,
-        isDisabled: () => isDisabled,
-    })) : (React.createElement(DefaultCell, { ...cellRendererProps, isDisabled: () => isDisabled }))));
+  );
 };
 export default TableCell;

package/esm/core/Table/TablePaginator.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import '@itwin/itwinui-css/css/table.css';
+import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
 import type { TablePaginatorRendererProps } from './Table.js';
-export declare type TablePaginatorProps = {
+export type TablePaginatorProps = {
     /**
      * Control whether focusing tabs (using arrow keys) should automatically select them.
      * Use 'manual' if tab panel content is not preloaded.
@@ -73,5 +72,5 @@ export declare type TablePaginatorProps = {
  *   paginatorRenderer={(props) => <TablePaginator {...props} />}
  * />
  */
-export declare const TablePaginator: (props: TablePaginatorProps) => JSX.Element | null;
+export declare const TablePaginator: (props: TablePaginatorProps) => React.JSX.Element | null;
 export default TablePaginator;

package/esm/core/Table/TablePaginator.js

@@ -4,21 +4,33 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/table.css';
 import { IconButton, Button, DropdownButton } from '../Buttons/index.js';
 import { ProgressRadial } from '../ProgressIndicators/index.js';
 import { MenuItem } from '../Menu/index.js';
-import { getBoundedValue, useGlobals, useOverflow, useContainerWidth, SvgChevronLeft, SvgChevronRight, } from '../utils/index.js';
+import {
+  getBoundedValue,
+  useGlobals,
+  useOverflow,
+  useContainerWidth,
+  SvgChevronLeft,
+  SvgChevronRight,
+  Box,
+  ButtonBase,
+} from '../utils/index.js';
 const defaultLocalization = {
-    pageSizeLabel: (size) => `${size} per page`,
-    rangeLabel: (startIndex, endIndex, totalRows, isLoading) => isLoading
-        ? `${startIndex}-${endIndex}…`
-        : `${startIndex}-${endIndex} of ${totalRows}`,
-    previousPage: 'Previous page',
-    nextPage: 'Next page',
-    goToPageLabel: (page) => `Go to page ${page}`,
-    rowsPerPageLabel: 'Rows per page',
-    rowsSelectedLabel: (totalSelectedRowsCount) => `${totalSelectedRowsCount} ${totalSelectedRowsCount === 1 ? 'row' : 'rows'} selected`,
+  pageSizeLabel: (size) => `${size} per page`,
+  rangeLabel: (startIndex, endIndex, totalRows, isLoading) =>
+    isLoading
+      ? `${startIndex}-${endIndex}…`
+      : `${startIndex}-${endIndex} of ${totalRows}`,
+  previousPage: 'Previous page',
+  nextPage: 'Next page',
+  goToPageLabel: (page) => `Go to page ${page}`,
+  rowsPerPageLabel: 'Rows per page',
+  rowsSelectedLabel: (totalSelectedRowsCount) =>
+    `${totalSelectedRowsCount} ${
+      totalSelectedRowsCount === 1 ? 'row' : 'rows'
+    } selected`,
 };
 /**
  * Table paginator component. Recommended to pass to the `Table` as `paginatorRenderer` prop.
@@ -30,128 +42,295 @@ const defaultLocalization = {
  * />
  */
 export const TablePaginator = (props) => {
-    const { currentPage, totalRowsCount, pageSize, onPageChange, totalSelectedRowsCount = 0, focusActivationMode = 'manual', isLoading = false, size = 'default', pageSizeList, onPageSizeChange, localization: userLocalization, className, ...rest } = props;
-    useGlobals();
-    const localization = React.useMemo(() => ({ ...defaultLocalization, ...userLocalization }), [userLocalization]);
-    const pageListRef = React.useRef(null);
-    const [focusedIndex, setFocusedIndex] = React.useState(currentPage);
-    React.useEffect(() => {
-        setFocusedIndex(currentPage);
-    }, [currentPage]);
-    const needFocus = React.useRef(false);
-    const isMounted = React.useRef(false);
-    React.useEffect(() => {
-        var _a, _b;
-        // Checking `isMounted.current` prevents from focusing on initial load.
-        // Checking `needFocus.current` prevents from focusing page when clicked on previous/next page.
-        if (isMounted.current && needFocus.current) {
-            const buttonToFocus = Array.from((_b = (_a = pageListRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.iui-table-paginator-page-button')) !== null && _b !== void 0 ? _b : []).find((el) => { var _a; return ((_a = el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === (focusedIndex + 1).toString(); });
-            buttonToFocus === null || buttonToFocus === void 0 ? void 0 : buttonToFocus.focus();
-            needFocus.current = false;
-        }
-        isMounted.current = true;
-    }, [focusedIndex]);
-    const buttonSize = size != 'default' ? 'small' : undefined;
-    const pageButton = React.useCallback((index, tabIndex = index === focusedIndex ? 0 : -1) => (React.createElement("button", { key: index, type: 'button', className: cx('iui-table-paginator-page-button', {
+  const {
+    currentPage,
+    totalRowsCount,
+    pageSize,
+    onPageChange,
+    totalSelectedRowsCount = 0,
+    focusActivationMode = 'manual',
+    isLoading = false,
+    size = 'default',
+    pageSizeList,
+    onPageSizeChange,
+    localization: userLocalization,
+    className,
+    ...rest
+  } = props;
+  useGlobals();
+  const localization = React.useMemo(
+    () => ({ ...defaultLocalization, ...userLocalization }),
+    [userLocalization],
+  );
+  const pageListRef = React.useRef(null);
+  const [focusedIndex, setFocusedIndex] = React.useState(currentPage);
+  React.useEffect(() => {
+    setFocusedIndex(currentPage);
+  }, [currentPage]);
+  const needFocus = React.useRef(false);
+  const isMounted = React.useRef(false);
+  React.useEffect(() => {
+    // Checking `isMounted.current` prevents from focusing on initial load.
+    // Checking `needFocus.current` prevents from focusing page when clicked on previous/next page.
+    if (isMounted.current && needFocus.current) {
+      const buttonToFocus = Array.from(
+        pageListRef.current?.querySelectorAll(
+          '.iui-table-paginator-page-button',
+        ) ?? [],
+      ).find((el) => el.textContent?.trim() === (focusedIndex + 1).toString());
+      buttonToFocus?.focus();
+      needFocus.current = false;
+    }
+    isMounted.current = true;
+  }, [focusedIndex]);
+  const buttonSize = size != 'default' ? 'small' : undefined;
+  const pageButton = React.useCallback(
+    (index, tabIndex = index === focusedIndex ? 0 : -1) =>
+      React.createElement(
+        ButtonBase,
+        {
+          key: index,
+          className: cx('iui-table-paginator-page-button', {
             'iui-table-paginator-page-button-small': buttonSize === 'small',
-        }), "data-iui-active": index === currentPage, onClick: () => onPageChange(index), "aria-current": index === currentPage, "aria-label": localization.goToPageLabel(index + 1), tabIndex: tabIndex }, index + 1)), [focusedIndex, currentPage, localization, buttonSize, onPageChange]);
-    const totalPagesCount = Math.ceil(totalRowsCount / pageSize);
-    const pageList = React.useMemo(() => new Array(totalPagesCount)
+          }),
+          'data-iui-active': index === currentPage,
+          onClick: () => onPageChange(index),
+          'aria-current': index === currentPage,
+          'aria-label': localization.goToPageLabel(index + 1),
+          tabIndex: tabIndex,
+        },
+        index + 1,
+      ),
+    [focusedIndex, currentPage, localization, buttonSize, onPageChange],
+  );
+  const totalPagesCount = Math.ceil(totalRowsCount / pageSize);
+  const pageList = React.useMemo(
+    () =>
+      new Array(totalPagesCount)
         .fill(null)
-        .map((_, index) => pageButton(index)), [pageButton, totalPagesCount]);
-    const [overflowRef, visibleCount] = useOverflow(pageList);
-    const [paginatorResizeRef, paginatorWidth] = useContainerWidth();
-    const onKeyDown = (event) => {
-        // alt + arrow keys are used by browser/assistive technologies
-        if (event.altKey) {
-            return;
+        .map((_, index) => pageButton(index)),
+    [pageButton, totalPagesCount],
+  );
+  const [overflowRef, visibleCount] = useOverflow(pageList);
+  const [paginatorResizeRef, paginatorWidth] = useContainerWidth();
+  const onKeyDown = (event) => {
+    // alt + arrow keys are used by browser/assistive technologies
+    if (event.altKey) {
+      return;
+    }
+    const focusPage = (delta) => {
+      const newFocusedIndex = getBoundedValue(
+        focusedIndex + delta,
+        0,
+        totalPagesCount - 1,
+      );
+      needFocus.current = true;
+      if (focusActivationMode === 'auto') {
+        onPageChange(newFocusedIndex);
+      } else {
+        setFocusedIndex(newFocusedIndex);
+      }
+    };
+    switch (event.key) {
+      case 'ArrowRight': {
+        focusPage(+1);
+        event.preventDefault();
+        break;
+      }
+      case 'ArrowLeft': {
+        focusPage(-1);
+        event.preventDefault();
+        break;
+      }
+      case 'Enter':
+      case ' ':
+      case 'Spacebar': {
+        if (focusActivationMode === 'manual') {
+          onPageChange(focusedIndex);
         }
-        const focusPage = (delta) => {
-            const newFocusedIndex = getBoundedValue(focusedIndex + delta, 0, totalPagesCount - 1);
-            needFocus.current = true;
-            if (focusActivationMode === 'auto') {
-                onPageChange(newFocusedIndex);
-            }
-            else {
-                setFocusedIndex(newFocusedIndex);
-            }
-        };
-        switch (event.key) {
-            case 'ArrowRight': {
-                focusPage(+1);
-                event.preventDefault();
-                break;
-            }
-            case 'ArrowLeft': {
-                focusPage(-1);
-                event.preventDefault();
-                break;
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  const halfVisibleCount = Math.floor(visibleCount / 2);
+  let startPage = focusedIndex - halfVisibleCount;
+  let endPage = focusedIndex + halfVisibleCount + 1;
+  if (startPage < 0) {
+    endPage = Math.min(totalPagesCount, endPage + Math.abs(startPage)); // If no room at the beginning, show extra pages at the end
+    startPage = 0;
+  }
+  if (endPage > totalPagesCount) {
+    startPage = Math.max(0, startPage - (endPage - totalPagesCount)); // If no room at the end, show extra pages at the beginning
+    endPage = totalPagesCount;
+  }
+  const hasNoRows = totalPagesCount === 0;
+  const showPagesList = totalPagesCount > 1 || isLoading;
+  const showPageSizeList =
+    pageSizeList && !!onPageSizeChange && !!totalRowsCount;
+  const ellipsis = React.createElement(
+    Box,
+    {
+      as: 'span',
+      className: cx('iui-table-paginator-ellipsis', {
+        'iui-table-paginator-ellipsis-small': size === 'small',
+      }),
+    },
+    '\u2026',
+  );
+  const noRowsContent = React.createElement(
+    React.Fragment,
+    null,
+    isLoading
+      ? React.createElement(ProgressRadial, {
+          indeterminate: true,
+          size: 'small',
+        })
+      : React.createElement(
+          Button,
+          { styleType: 'borderless', disabled: true, size: buttonSize },
+          '1',
+        ),
+  );
+  if (!showPagesList && !showPageSizeList) {
+    return null;
+  }
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-table-paginator', className),
+      ref: paginatorResizeRef,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      { className: 'iui-left' },
+      totalSelectedRowsCount > 0 &&
+        React.createElement(
+          'span',
+          null,
+          localization.rowsSelectedLabel(totalSelectedRowsCount),
+        ),
+    ),
+    showPagesList &&
+      React.createElement(
+        Box,
+        { className: 'iui-center', ref: overflowRef },
+        React.createElement(
+          IconButton,
+          {
+            styleType: 'borderless',
+            disabled: currentPage === 0,
+            onClick: () => onPageChange(currentPage - 1),
+            size: buttonSize,
+            'aria-label': localization.previousPage,
+          },
+          React.createElement(SvgChevronLeft, null),
+        ),
+        React.createElement(
+          Box,
+          {
+            as: 'span',
+            className: 'iui-table-paginator-pages-group',
+            onKeyDown: onKeyDown,
+            ref: pageListRef,
+          },
+          (() => {
+            if (hasNoRows) {
+              return noRowsContent;
             }
-            case 'Enter':
-            case ' ':
-            case 'Spacebar': {
-                if (focusActivationMode === 'manual') {
-                    onPageChange(focusedIndex);
-                }
-                break;
+            if (visibleCount === 1) {
+              return pageButton(focusedIndex);
             }
-            default:
-                break;
-        }
-    };
-    const halfVisibleCount = Math.floor(visibleCount / 2);
-    let startPage = focusedIndex - halfVisibleCount;
-    let endPage = focusedIndex + halfVisibleCount + 1;
-    if (startPage < 0) {
-        endPage = Math.min(totalPagesCount, endPage + Math.abs(startPage)); // If no room at the beginning, show extra pages at the end
-        startPage = 0;
-    }
-    if (endPage > totalPagesCount) {
-        startPage = Math.max(0, startPage - (endPage - totalPagesCount)); // If no room at the end, show extra pages at the beginning
-        endPage = totalPagesCount;
-    }
-    const hasNoRows = totalPagesCount === 0;
-    const showPagesList = totalPagesCount > 1 || isLoading;
-    const showPageSizeList = pageSizeList && !!onPageSizeChange && !!totalRowsCount;
-    const ellipsis = (React.createElement("span", { className: cx('iui-table-paginator-ellipsis', {
-            'iui-table-paginator-ellipsis-small': size === 'small',
-        }) }, "\u2026"));
-    const noRowsContent = (React.createElement(React.Fragment, null, isLoading ? (React.createElement(ProgressRadial, { indeterminate: true, size: 'small' })) : (React.createElement(Button, { styleType: 'borderless', disabled: true, size: buttonSize }, "1"))));
-    if (!showPagesList && !showPageSizeList) {
-        return null;
-    }
-    return (React.createElement("div", { className: cx('iui-table-paginator', className), ref: paginatorResizeRef, ...rest },
-        React.createElement("div", { className: 'iui-left' }, totalSelectedRowsCount > 0 && (React.createElement("span", null, localization.rowsSelectedLabel(totalSelectedRowsCount)))),
-        showPagesList && (React.createElement("div", { className: 'iui-center', ref: overflowRef },
-            React.createElement(IconButton, { styleType: 'borderless', disabled: currentPage === 0, onClick: () => onPageChange(currentPage - 1), size: buttonSize, "aria-label": localization.previousPage },
-                React.createElement(SvgChevronLeft, null)),
-            React.createElement("span", { className: 'iui-table-paginator-pages-group', onKeyDown: onKeyDown, ref: pageListRef }, (() => {
-                if (hasNoRows) {
-                    return noRowsContent;
-                }
-                if (visibleCount === 1) {
-                    return pageButton(focusedIndex);
-                }
-                return (React.createElement(React.Fragment, null,
-                    startPage !== 0 && (React.createElement(React.Fragment, null,
-                        pageButton(0, 0),
-                        ellipsis)),
-                    pageList.slice(startPage, endPage),
-                    endPage !== totalPagesCount && !isLoading && (React.createElement(React.Fragment, null,
-                        ellipsis,
-                        pageButton(totalPagesCount - 1, 0))),
-                    isLoading && (React.createElement(React.Fragment, null,
-                        ellipsis,
-                        React.createElement(ProgressRadial, { indeterminate: true, size: 'small' })))));
-            })()),
-            React.createElement(IconButton, { styleType: 'borderless', disabled: currentPage === totalPagesCount - 1 || hasNoRows, onClick: () => onPageChange(currentPage + 1), size: buttonSize, "aria-label": localization.nextPage },
-                React.createElement(SvgChevronRight, null)))),
-        React.createElement("div", { className: 'iui-right' }, showPageSizeList && (React.createElement(React.Fragment, null,
-            localization.rowsPerPageLabel !== null &&
-                paginatorWidth >= 1024 && (React.createElement("span", { className: 'iui-table-paginator-page-size-label' }, localization.rowsPerPageLabel)),
-            React.createElement(DropdownButton, { styleType: 'borderless', size: buttonSize, menuItems: (close) => pageSizeList.map((size) => (React.createElement(MenuItem, { key: size, isSelected: size === pageSize, onClick: () => {
+            return React.createElement(
+              React.Fragment,
+              null,
+              startPage !== 0 &&
+                React.createElement(
+                  React.Fragment,
+                  null,
+                  pageButton(0, 0),
+                  ellipsis,
+                ),
+              pageList.slice(startPage, endPage),
+              endPage !== totalPagesCount &&
+                !isLoading &&
+                React.createElement(
+                  React.Fragment,
+                  null,
+                  ellipsis,
+                  pageButton(totalPagesCount - 1, 0),
+                ),
+              isLoading &&
+                React.createElement(
+                  React.Fragment,
+                  null,
+                  ellipsis,
+                  React.createElement(ProgressRadial, {
+                    indeterminate: true,
+                    size: 'small',
+                  }),
+                ),
+            );
+          })(),
+        ),
+        React.createElement(
+          IconButton,
+          {
+            styleType: 'borderless',
+            disabled: currentPage === totalPagesCount - 1 || hasNoRows,
+            onClick: () => onPageChange(currentPage + 1),
+            size: buttonSize,
+            'aria-label': localization.nextPage,
+          },
+          React.createElement(SvgChevronRight, null),
+        ),
+      ),
+    React.createElement(
+      Box,
+      { className: 'iui-right' },
+      showPageSizeList &&
+        React.createElement(
+          React.Fragment,
+          null,
+          localization.rowsPerPageLabel !== null &&
+            paginatorWidth >= 1024 &&
+            React.createElement(
+              Box,
+              { as: 'span', className: 'iui-table-paginator-page-size-label' },
+              localization.rowsPerPageLabel,
+            ),
+          React.createElement(
+            DropdownButton,
+            {
+              styleType: 'borderless',
+              size: buttonSize,
+              menuItems: (close) =>
+                pageSizeList.map((size) =>
+                  React.createElement(
+                    MenuItem,
+                    {
+                      key: size,
+                      isSelected: size === pageSize,
+                      onClick: () => {
                         close();
                         onPageSizeChange(size);
-                    } }, localization.pageSizeLabel(size)))) }, localization.rangeLabel(currentPage * pageSize + 1, Math.min(totalRowsCount, (currentPage + 1) * pageSize), totalRowsCount, isLoading)))))));
+                      },
+                    },
+                    localization.pageSizeLabel(size),
+                  ),
+                ),
+            },
+            localization.rangeLabel(
+              currentPage * pageSize + 1,
+              Math.min(totalRowsCount, (currentPage + 1) * pageSize),
+              totalRowsCount,
+              isLoading,
+            ),
+          ),
+        ),
+    ),
+  );
 };
 export default TablePaginator;