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

package/cjs/core/Table/TablePaginator.js

@@ -1,53 +1,31 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.TablePaginator = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/table.css");
-const index_js_1 = require("../Buttons/index.js");
-const index_js_2 = require("../ProgressIndicators/index.js");
-const index_js_3 = require("../Menu/index.js");
-const index_js_4 = require("../utils/index.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../Buttons/index.js');
+const index_js_2 = require('../ProgressIndicators/index.js');
+const index_js_3 = require('../Menu/index.js');
+const index_js_4 = require('../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.
@@ -59,129 +37,300 @@ const defaultLocalization = {
  * />
  */
 const TablePaginator = (props) => {
-    const { currentPage, totalRowsCount, pageSize, onPageChange, totalSelectedRowsCount = 0, focusActivationMode = 'manual', isLoading = false, size = 'default', pageSizeList, onPageSizeChange, localization: userLocalization, className, ...rest } = props;
-    (0, index_js_4.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: (0, classnames_1.default)('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)
+  const {
+    currentPage,
+    totalRowsCount,
+    pageSize,
+    onPageChange,
+    totalSelectedRowsCount = 0,
+    focusActivationMode = 'manual',
+    isLoading = false,
+    size = 'default',
+    pageSizeList,
+    onPageSizeChange,
+    localization: userLocalization,
+    className,
+    ...rest
+  } = props;
+  (0, index_js_4.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(
+        index_js_4.ButtonBase,
+        {
+          key: index,
+          className: (0, classnames_1.default)(
+            '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)
         .fill(null)
-        .map((_, index) => pageButton(index)), [pageButton, totalPagesCount]);
-    const [overflowRef, visibleCount] = (0, index_js_4.useOverflow)(pageList);
-    const [paginatorResizeRef, paginatorWidth] = (0, index_js_4.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] = (0, index_js_4.useOverflow)(pageList);
+  const [paginatorResizeRef, paginatorWidth] = (0,
+  index_js_4.useContainerWidth)();
+  const onKeyDown = (event) => {
+    // alt + arrow keys are used by browser/assistive technologies
+    if (event.altKey) {
+      return;
+    }
+    const focusPage = (delta) => {
+      const newFocusedIndex = (0, index_js_4.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 = (0, index_js_4.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(
+    index_js_4.Box,
+    {
+      as: 'span',
+      className: (0, classnames_1.default)('iui-table-paginator-ellipsis', {
+        'iui-table-paginator-ellipsis-small': size === 'small',
+      }),
+    },
+    '\u2026',
+  );
+  const noRowsContent = React.createElement(
+    React.Fragment,
+    null,
+    isLoading
+      ? React.createElement(index_js_2.ProgressRadial, {
+          indeterminate: true,
+          size: 'small',
+        })
+      : React.createElement(
+          index_js_1.Button,
+          { styleType: 'borderless', disabled: true, size: buttonSize },
+          '1',
+        ),
+  );
+  if (!showPagesList && !showPageSizeList) {
+    return null;
+  }
+  return React.createElement(
+    index_js_4.Box,
+    {
+      className: (0, classnames_1.default)('iui-table-paginator', className),
+      ref: paginatorResizeRef,
+      ...rest,
+    },
+    React.createElement(
+      index_js_4.Box,
+      { className: 'iui-left' },
+      totalSelectedRowsCount > 0 &&
+        React.createElement(
+          'span',
+          null,
+          localization.rowsSelectedLabel(totalSelectedRowsCount),
+        ),
+    ),
+    showPagesList &&
+      React.createElement(
+        index_js_4.Box,
+        { className: 'iui-center', ref: overflowRef },
+        React.createElement(
+          index_js_1.IconButton,
+          {
+            styleType: 'borderless',
+            disabled: currentPage === 0,
+            onClick: () => onPageChange(currentPage - 1),
+            size: buttonSize,
+            'aria-label': localization.previousPage,
+          },
+          React.createElement(index_js_4.SvgChevronLeft, null),
+        ),
+        React.createElement(
+          index_js_4.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: (0, classnames_1.default)('iui-table-paginator-ellipsis', {
-            'iui-table-paginator-ellipsis-small': size === 'small',
-        }) }, "\u2026"));
-    const noRowsContent = (React.createElement(React.Fragment, null, isLoading ? (React.createElement(index_js_2.ProgressRadial, { indeterminate: true, size: 'small' })) : (React.createElement(index_js_1.Button, { styleType: 'borderless', disabled: true, size: buttonSize }, "1"))));
-    if (!showPagesList && !showPageSizeList) {
-        return null;
-    }
-    return (React.createElement("div", { className: (0, classnames_1.default)('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(index_js_1.IconButton, { styleType: 'borderless', disabled: currentPage === 0, onClick: () => onPageChange(currentPage - 1), size: buttonSize, "aria-label": localization.previousPage },
-                React.createElement(index_js_4.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(index_js_2.ProgressRadial, { indeterminate: true, size: 'small' })))));
-            })()),
-            React.createElement(index_js_1.IconButton, { styleType: 'borderless', disabled: currentPage === totalPagesCount - 1 || hasNoRows, onClick: () => onPageChange(currentPage + 1), size: buttonSize, "aria-label": localization.nextPage },
-                React.createElement(index_js_4.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(index_js_1.DropdownButton, { styleType: 'borderless', size: buttonSize, menuItems: (close) => pageSizeList.map((size) => (React.createElement(index_js_3.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(index_js_2.ProgressRadial, {
+                    indeterminate: true,
+                    size: 'small',
+                  }),
+                ),
+            );
+          })(),
+        ),
+        React.createElement(
+          index_js_1.IconButton,
+          {
+            styleType: 'borderless',
+            disabled: currentPage === totalPagesCount - 1 || hasNoRows,
+            onClick: () => onPageChange(currentPage + 1),
+            size: buttonSize,
+            'aria-label': localization.nextPage,
+          },
+          React.createElement(index_js_4.SvgChevronRight, null),
+        ),
+      ),
+    React.createElement(
+      index_js_4.Box,
+      { className: 'iui-right' },
+      showPageSizeList &&
+        React.createElement(
+          React.Fragment,
+          null,
+          localization.rowsPerPageLabel !== null &&
+            paginatorWidth >= 1024 &&
+            React.createElement(
+              index_js_4.Box,
+              { as: 'span', className: 'iui-table-paginator-page-size-label' },
+              localization.rowsPerPageLabel,
+            ),
+          React.createElement(
+            index_js_1.DropdownButton,
+            {
+              styleType: 'borderless',
+              size: buttonSize,
+              menuItems: (close) =>
+                pageSizeList.map((size) =>
+                  React.createElement(
+                    index_js_3.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,
+            ),
+          ),
+        ),
+    ),
+  );
 };
 exports.TablePaginator = TablePaginator;
 exports.default = exports.TablePaginator;

package/cjs/core/Table/TableRowMemoized.d.ts

@@ -22,11 +22,11 @@ export declare const TableRow: <T extends Record<string, unknown>>(props: {
     isDisabled: boolean;
     tableHasSubRows: boolean;
     tableInstance: TableInstance<T>;
-    expanderCell?: ((cellProps: CellProps<T, any>) => React.ReactNode) | undefined;
+    expanderCell?: ((cellProps: CellProps<T>) => React.ReactNode) | undefined;
     bodyRef: HTMLDivElement | null;
     tableRowRef?: React.Ref<HTMLDivElement> | undefined;
     density?: "default" | "condensed" | "extra-condensed" | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export declare const TableRowMemoized: <T extends Record<string, unknown>>(props: {
     row: Row<T>;
     rowProps?: ((row: Row<T>) => React.ComponentPropsWithRef<'div'> & {
@@ -43,8 +43,8 @@ export declare const TableRowMemoized: <T extends Record<string, unknown>>(props
     isDisabled: boolean;
     tableHasSubRows: boolean;
     tableInstance: TableInstance<T>;
-    expanderCell?: ((cellProps: CellProps<T, any>) => React.ReactNode) | undefined;
+    expanderCell?: ((cellProps: CellProps<T>) => React.ReactNode) | undefined;
     bodyRef: HTMLDivElement | null;
     tableRowRef?: React.Ref<HTMLDivElement> | undefined;
     density?: "default" | "condensed" | "extra-condensed" | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;