@itwin/itwinui-react 3.0.4 → 3.0.6

package/esm/core/Table/TableCell.js

@@ -10,94 +10,60 @@ 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 {
-      paddingInlineStart: 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,
-    }),
-    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,
+    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 }))));
 };
 export default TableCell;

package/esm/core/Table/TablePaginator.js

@@ -9,30 +9,17 @@ import { Button } from '../Buttons/Button.js';
 import { DropdownButton } from '../Buttons/DropdownButton.js';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import { MenuItem } from '../Menu/MenuItem.js';
-import {
-  getBoundedValue,
-  useGlobals,
-  useOverflow,
-  useContainerWidth,
-  SvgChevronLeft,
-  SvgChevronRight,
-  Box,
-  ButtonBase,
-} 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.
@@ -44,295 +31,127 @@ 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(() => {
-    // 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', {
+    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;
-    }
-    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);
+        .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;
         }
-        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;
+        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;
             }
-            if (visibleCount === 1) {
-              return pageButton(focusedIndex);
+            case 'ArrowLeft': {
+                focusPage(-1);
+                event.preventDefault();
+                break;
             }
-            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: () => {
+            case 'Enter':
+            case ' ':
+            case 'Spacebar': {
+                if (focusActivationMode === 'manual') {
+                    onPageChange(focusedIndex);
+                }
+                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;
+                }
+                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(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;