@itwin/itwinui-react 3.0.4 → 3.0.5

package/cjs/core/Table/TablePaginator.js

@@ -1,33 +1,29 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.TablePaginator = void 0;
-const tslib_1 = require('tslib');
+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 = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const IconButton_js_1 = require('../Buttons/IconButton.js');
-const Button_js_1 = require('../Buttons/Button.js');
-const DropdownButton_js_1 = require('../Buttons/DropdownButton.js');
-const ProgressRadial_js_1 = require('../ProgressIndicators/ProgressRadial.js');
-const MenuItem_js_1 = require('../Menu/MenuItem.js');
-const index_js_1 = require('../utils/index.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const IconButton_js_1 = require("../Buttons/IconButton.js");
+const Button_js_1 = require("../Buttons/Button.js");
+const DropdownButton_js_1 = require("../Buttons/DropdownButton.js");
+const ProgressRadial_js_1 = require("../ProgressIndicators/ProgressRadial.js");
+const MenuItem_js_1 = require("../Menu/MenuItem.js");
+const index_js_1 = 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.
@@ -39,300 +35,128 @@ 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_1.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_1.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)
+    const { currentPage, totalRowsCount, pageSize, onPageChange, totalSelectedRowsCount = 0, focusActivationMode = 'manual', isLoading = false, size = 'default', pageSizeList, onPageSizeChange, localization: userLocalization, className, ...rest } = props;
+    (0, index_js_1.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_1.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_1.useOverflow)(pageList);
-  const [paginatorResizeRef, paginatorWidth] = (0,
-  index_js_1.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_1.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] = (0, index_js_1.useOverflow)(pageList);
+    const [paginatorResizeRef, paginatorWidth] = (0, index_js_1.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(
-    index_js_1.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(ProgressRadial_js_1.ProgressRadial, {
-          indeterminate: true,
-          size: 'small',
-        })
-      : React.createElement(
-          Button_js_1.Button,
-          { styleType: 'borderless', disabled: true, size: buttonSize },
-          '1',
-        ),
-  );
-  if (!showPagesList && !showPageSizeList) {
-    return null;
-  }
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)('iui-table-paginator', className),
-      ref: paginatorResizeRef,
-      ...rest,
-    },
-    React.createElement(
-      index_js_1.Box,
-      { className: 'iui-left' },
-      totalSelectedRowsCount > 0 &&
-        React.createElement(
-          'span',
-          null,
-          localization.rowsSelectedLabel(totalSelectedRowsCount),
-        ),
-    ),
-    showPagesList &&
-      React.createElement(
-        index_js_1.Box,
-        { className: 'iui-center', ref: overflowRef },
-        React.createElement(
-          IconButton_js_1.IconButton,
-          {
-            styleType: 'borderless',
-            disabled: currentPage === 0,
-            onClick: () => onPageChange(currentPage - 1),
-            size: buttonSize,
-            'aria-label': localization.previousPage,
-          },
-          React.createElement(index_js_1.SvgChevronLeft, null),
-        ),
-        React.createElement(
-          index_js_1.Box,
-          {
-            as: 'span',
-            className: 'iui-table-paginator-pages-group',
-            onKeyDown: onKeyDown,
-            ref: pageListRef,
-          },
-          (() => {
-            if (hasNoRows) {
-              return noRowsContent;
+        const focusPage = (delta) => {
+            const newFocusedIndex = (0, index_js_1.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_js_1.ProgressRadial, {
-                    indeterminate: true,
-                    size: 'small',
-                  }),
-                ),
-            );
-          })(),
-        ),
-        React.createElement(
-          IconButton_js_1.IconButton,
-          {
-            styleType: 'borderless',
-            disabled: currentPage === totalPagesCount - 1 || hasNoRows,
-            onClick: () => onPageChange(currentPage + 1),
-            size: buttonSize,
-            'aria-label': localization.nextPage,
-          },
-          React.createElement(index_js_1.SvgChevronRight, null),
-        ),
-      ),
-    React.createElement(
-      index_js_1.Box,
-      { className: 'iui-right' },
-      showPageSizeList &&
-        React.createElement(
-          React.Fragment,
-          null,
-          localization.rowsPerPageLabel !== null &&
-            paginatorWidth >= 1024 &&
-            React.createElement(
-              index_js_1.Box,
-              { as: 'span', className: 'iui-table-paginator-page-size-label' },
-              localization.rowsPerPageLabel,
-            ),
-          React.createElement(
-            DropdownButton_js_1.DropdownButton,
-            {
-              styleType: 'borderless',
-              size: buttonSize,
-              menuItems: (close) =>
-                pageSizeList.map((size) =>
-                  React.createElement(
-                    MenuItem_js_1.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(index_js_1.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(ProgressRadial_js_1.ProgressRadial, { indeterminate: true, size: 'small' })) : (React.createElement(Button_js_1.Button, { styleType: 'borderless', disabled: true, size: buttonSize }, "1"))));
+    if (!showPagesList && !showPageSizeList) {
+        return null;
+    }
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-table-paginator', className), ref: paginatorResizeRef, ...rest },
+        React.createElement(index_js_1.Box, { className: 'iui-left' }, totalSelectedRowsCount > 0 && (React.createElement("span", null, localization.rowsSelectedLabel(totalSelectedRowsCount)))),
+        showPagesList && (React.createElement(index_js_1.Box, { className: 'iui-center', ref: overflowRef },
+            React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', disabled: currentPage === 0, onClick: () => onPageChange(currentPage - 1), size: buttonSize, "aria-label": localization.previousPage },
+                React.createElement(index_js_1.SvgChevronLeft, null)),
+            React.createElement(index_js_1.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_js_1.ProgressRadial, { indeterminate: true, size: 'small' })))));
+            })()),
+            React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', disabled: currentPage === totalPagesCount - 1 || hasNoRows, onClick: () => onPageChange(currentPage + 1), size: buttonSize, "aria-label": localization.nextPage },
+                React.createElement(index_js_1.SvgChevronRight, null)))),
+        React.createElement(index_js_1.Box, { className: 'iui-right' }, showPageSizeList && (React.createElement(React.Fragment, null,
+            localization.rowsPerPageLabel !== null &&
+                paginatorWidth >= 1024 && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-table-paginator-page-size-label' }, localization.rowsPerPageLabel)),
+            React.createElement(DropdownButton_js_1.DropdownButton, { styleType: 'borderless', size: buttonSize, menuItems: (close) => pageSizeList.map((size) => (React.createElement(MenuItem_js_1.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;