@itwin/itwinui-react 3.13.4 → 3.14.0

package/DEV-esm/core/Table/TableCell.js

@@ -5,53 +5,89 @@ 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)=>{
-    let { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, density } = props;
-    let hasSubRowExpander = cellIndex === cell.row.cells.findIndex((c)=>c.column.id !== SELECTION_CELL_ID);
-    let 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),
-            ...tableHasSubRows && hasSubRowExpander && getSubRowStyle({
-                density,
-                depth: cell.row.depth + (cell.row.canExpand ? 0 : 1)
-            }),
-            ...getStickyStyle(cell.column, tableInstance.visibleColumns)
-        }
-    });
-    let cellProps = {
-        ...tableInstance,
-        cell,
-        row: cell.row,
-        value: cell.value,
-        column: cell.column
-    };
-    let cellContent = React.createElement(React.Fragment, null, tableHasSubRows && hasSubRowExpander && cell.row.canExpand && React.createElement(SubRowExpander, {
+export const TableCell = (props) => {
+  let {
+    cell,
+    cellIndex,
+    isDisabled,
+    tableHasSubRows,
+    tableInstance,
+    expanderCell,
+    density,
+  } = props;
+  let hasSubRowExpander =
+    cellIndex ===
+    cell.row.cells.findIndex((c) => c.column.id !== SELECTION_CELL_ID);
+  let 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),
+      ...(tableHasSubRows &&
+        hasSubRowExpander &&
+        getSubRowStyle({
+          density,
+          depth: cell.row.depth + (cell.row.canExpand ? 0 : 1),
+        })),
+      ...getStickyStyle(cell.column, tableInstance.visibleColumns),
+    },
+  });
+  let cellProps = {
+    ...tableInstance,
+    cell,
+    row: cell.row,
+    value: cell.value,
+    column: cell.column,
+  };
+  let cellContent = React.createElement(
+    React.Fragment,
+    null,
+    tableHasSubRows &&
+      hasSubRowExpander &&
+      cell.row.canExpand &&
+      React.createElement(SubRowExpander, {
         cell: cell,
         isDisabled: isDisabled,
         cellProps: cellProps,
         expanderCell: expanderCell,
         density: density,
-        slot: "start"
-    }), cell.render('Cell'));
-    let cellRendererProps = {
-        cellElementProps,
-        cellProps,
-        children: React.createElement(React.Fragment, null, cellContent, 'left' === cell.column.sticky && tableInstance.state.sticky.isScrolledToRight && React.createElement(Box, {
-            className: "iui-table-cell-shadow-right",
-            slot: "shadows"
-        }), 'right' === cell.column.sticky && tableInstance.state.sticky.isScrolledToLeft && React.createElement(Box, {
-            className: "iui-table-cell-shadow-left",
-            slot: "shadows"
-        }))
-    };
-    return React.createElement(React.Fragment, null, cell.column.cellRenderer ? cell.column.cellRenderer({
-        ...cellRendererProps,
-        isDisabled: ()=>isDisabled
-    }) : React.createElement(DefaultCell, {
-        ...cellRendererProps,
-        isDisabled: ()=>isDisabled
-    }));
+        slot: 'start',
+      }),
+    cell.render('Cell'),
+  );
+  let cellRendererProps = {
+    cellElementProps,
+    cellProps,
+    children: React.createElement(
+      React.Fragment,
+      null,
+      cellContent,
+      'left' === cell.column.sticky &&
+        tableInstance.state.sticky.isScrolledToRight &&
+        React.createElement(Box, {
+          className: 'iui-table-cell-shadow-right',
+          slot: 'shadows',
+        }),
+      'right' === cell.column.sticky &&
+        tableInstance.state.sticky.isScrolledToLeft &&
+        React.createElement(Box, {
+          className: 'iui-table-cell-shadow-left',
+          slot: 'shadows',
+        }),
+    ),
+  };
+  return React.createElement(
+    React.Fragment,
+    null,
+    cell.column.cellRenderer
+      ? cell.column.cellRenderer({
+          ...cellRendererProps,
+          isDisabled: () => isDisabled,
+        })
+      : React.createElement(DefaultCell, {
+          ...cellRendererProps,
+          isDisabled: () => isDisabled,
+        }),
+  );
 };

package/DEV-esm/core/Table/TablePaginator.js

@@ -5,172 +5,316 @@ 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 } from '../../utils/index.js';
+import {
+  getBoundedValue,
+  useGlobals,
+  useOverflow,
+  useContainerWidth,
+  SvgChevronLeft,
+  SvgChevronRight,
+  Box,
+} from '../../utils/index.js';
 let 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} ${1 === totalSelectedRowsCount ? '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} ${
+      1 === totalSelectedRowsCount ? 'row' : 'rows'
+    } selected`,
 };
-export const TablePaginator = (props)=>{
-    let { currentPage, totalRowsCount, pageSize, onPageChange, totalSelectedRowsCount = 0, focusActivationMode = 'manual', isLoading = false, size = 'default', pageSizeList, onPageSizeChange, localization: userLocalization, className, ...rest } = props;
-    useGlobals();
-    let localization = React.useMemo(()=>({
-            ...defaultLocalization,
-            ...userLocalization
-        }), [
-        userLocalization
-    ]);
-    let pageListRef = React.useRef(null);
-    let [focusedIndex, setFocusedIndex] = React.useState(currentPage);
-    React.useEffect(()=>{
-        setFocusedIndex(currentPage);
-    }, [
-        currentPage
-    ]);
-    let needFocus = React.useRef(false);
-    let isMounted = React.useRef(false);
-    React.useEffect(()=>{
-        if (isMounted.current && needFocus.current) {
-            let 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
-    ]);
-    let buttonSize = 'default' != size ? 'small' : void 0;
-    let pageButton = React.useCallback((index, tabIndex = index === focusedIndex ? 0 : -1)=>React.createElement(Button, {
-            key: index,
-            className: "iui-table-paginator-page-button",
-            styleType: "borderless",
-            size: buttonSize,
-            "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
-    ]);
-    let totalPagesCount = Math.ceil(totalRowsCount / pageSize);
-    let pageList = React.useMemo(()=>new Array(totalPagesCount).fill(null).map((_, index)=>pageButton(index)), [
-        pageButton,
-        totalPagesCount
-    ]);
-    let [overflowRef, visibleCount] = useOverflow(pageList);
-    let [paginatorResizeRef, paginatorWidth] = useContainerWidth();
-    let onKeyDown = (event)=>{
-        if (event.altKey) return;
-        let focusPage = (delta)=>{
-            let newFocusedIndex = getBoundedValue(focusedIndex + delta, 0, totalPagesCount - 1);
-            needFocus.current = true;
-            if ('auto' === focusActivationMode) 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 ('manual' === focusActivationMode) onPageChange(focusedIndex);
-                break;
-            default:
-                break;
-        }
-    };
-    let 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));
-        startPage = 0;
+export const TablePaginator = (props) => {
+  let {
+    currentPage,
+    totalRowsCount,
+    pageSize,
+    onPageChange,
+    totalSelectedRowsCount = 0,
+    focusActivationMode = 'manual',
+    isLoading = false,
+    size = 'default',
+    pageSizeList,
+    onPageSizeChange,
+    localization: userLocalization,
+    className,
+    ...rest
+  } = props;
+  useGlobals();
+  let localization = React.useMemo(
+    () => ({
+      ...defaultLocalization,
+      ...userLocalization,
+    }),
+    [userLocalization],
+  );
+  let pageListRef = React.useRef(null);
+  let [focusedIndex, setFocusedIndex] = React.useState(currentPage);
+  React.useEffect(() => {
+    setFocusedIndex(currentPage);
+  }, [currentPage]);
+  let needFocus = React.useRef(false);
+  let isMounted = React.useRef(false);
+  React.useEffect(() => {
+    if (isMounted.current && needFocus.current) {
+      let buttonToFocus = Array.from(
+        pageListRef.current?.querySelectorAll(
+          '.iui-table-paginator-page-button',
+        ) ?? [],
+      ).find((el) => el.textContent?.trim() === (focusedIndex + 1).toString());
+      buttonToFocus?.focus();
+      needFocus.current = false;
     }
-    if (endPage > totalPagesCount) {
-        startPage = Math.max(0, startPage - (endPage - totalPagesCount));
-        endPage = totalPagesCount;
+    isMounted.current = true;
+  }, [focusedIndex]);
+  let buttonSize = 'default' != size ? 'small' : void 0;
+  let pageButton = React.useCallback(
+    (index, tabIndex = index === focusedIndex ? 0 : -1) =>
+      React.createElement(
+        Button,
+        {
+          key: index,
+          className: 'iui-table-paginator-page-button',
+          styleType: 'borderless',
+          size: buttonSize,
+          '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],
+  );
+  let totalPagesCount = Math.ceil(totalRowsCount / pageSize);
+  let pageList = React.useMemo(
+    () =>
+      new Array(totalPagesCount)
+        .fill(null)
+        .map((_, index) => pageButton(index)),
+    [pageButton, totalPagesCount],
+  );
+  let [overflowRef, visibleCount] = useOverflow(pageList);
+  let [paginatorResizeRef, paginatorWidth] = useContainerWidth();
+  let onKeyDown = (event) => {
+    if (event.altKey) return;
+    let focusPage = (delta) => {
+      let newFocusedIndex = getBoundedValue(
+        focusedIndex + delta,
+        0,
+        totalPagesCount - 1,
+      );
+      needFocus.current = true;
+      if ('auto' === focusActivationMode) 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 ('manual' === focusActivationMode) onPageChange(focusedIndex);
+        break;
+      default:
+        break;
     }
-    let hasNoRows = 0 === totalPagesCount;
-    let showPagesList = totalPagesCount > 1 || isLoading;
-    let showPageSizeList = pageSizeList && !!onPageSizeChange && !!totalRowsCount;
-    let ellipsis = React.createElement(Box, {
-        as: "span",
-        className: cx('iui-table-paginator-ellipsis', {
-            'iui-table-paginator-ellipsis-small': 'small' === size
+  };
+  let 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));
+    startPage = 0;
+  }
+  if (endPage > totalPagesCount) {
+    startPage = Math.max(0, startPage - (endPage - totalPagesCount));
+    endPage = totalPagesCount;
+  }
+  let hasNoRows = 0 === totalPagesCount;
+  let showPagesList = totalPagesCount > 1 || isLoading;
+  let showPageSizeList = pageSizeList && !!onPageSizeChange && !!totalRowsCount;
+  let ellipsis = React.createElement(
+    Box,
+    {
+      as: 'span',
+      className: cx('iui-table-paginator-ellipsis', {
+        'iui-table-paginator-ellipsis-small': 'small' === size,
+      }),
+    },
+    '…',
+  );
+  let noRowsContent = React.createElement(
+    React.Fragment,
+    null,
+    isLoading
+      ? React.createElement(ProgressRadial, {
+          indeterminate: true,
+          size: 'small',
         })
-    }, "…");
-    let 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: 0 === currentPage,
-        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 (1 === visibleCount) return pageButton(focusedIndex);
-        return React.createElement(React.Fragment, null, 0 !== startPage && 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, null !== localization.rowsPerPageLabel && 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: ()=>{
+      : 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: 0 === currentPage,
+            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 (1 === visibleCount) return pageButton(focusedIndex);
+            return React.createElement(
+              React.Fragment,
+              null,
+              0 !== startPage &&
+                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,
+          null !== localization.rowsPerPageLabel &&
+            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,
+            ),
+          ),
+        ),
+    ),
+  );
 };