@itwin/itwinui-react 2.0.0-dev.2 → 2.0.0-dev.4

package/esm/core/Table/TablePaginator.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -31,16 +9,14 @@ import { IconButton, Button, DropdownButton } from '../Buttons';
 import { ProgressRadial } from '../ProgressIndicators';
 import { MenuItem } from '../Menu';
 import { getBoundedValue, useTheme, useOverflow, useContainerWidth, SvgChevronLeft, SvgChevronRight, } from '../utils';
-var defaultLocalization = {
-    pageSizeLabel: function (size) { return "".concat(size, " per page"); },
-    rangeLabel: function (startIndex, endIndex, totalRows, isLoading) {
-        return isLoading
-            ? "".concat(startIndex, "-").concat(endIndex, "\u2026")
-            : "".concat(startIndex, "-").concat(endIndex, " of ").concat(totalRows);
-    },
+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: function (page) { return "Go to page ".concat(page); },
+    goToPageLabel: (page) => `Go to page ${page}`,
     rowsPerPageLabel: 'Rows per page',
 };
 /**
@@ -52,50 +28,45 @@ var defaultLocalization = {
  *   paginatorRenderer={(props) => <TablePaginator {...props} />}
  * />
  */
-export var TablePaginator = function (props) {
-    var currentPage = props.currentPage, totalRowsCount = props.totalRowsCount, pageSize = props.pageSize, onPageChange = props.onPageChange, _a = props.totalSelectedRowsCount, totalSelectedRowsCount = _a === void 0 ? 0 : _a, _b = props.focusActivationMode, focusActivationMode = _b === void 0 ? 'manual' : _b, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, _d = props.size, size = _d === void 0 ? 'default' : _d, pageSizeList = props.pageSizeList, onPageSizeChange = props.onPageSizeChange, userLocalization = props.localization, className = props.className, rest = __rest(props, ["currentPage", "totalRowsCount", "pageSize", "onPageChange", "totalSelectedRowsCount", "focusActivationMode", "isLoading", "size", "pageSizeList", "onPageSizeChange", "localization", "className"]);
+export const TablePaginator = (props) => {
+    const { currentPage, totalRowsCount, pageSize, onPageChange, totalSelectedRowsCount = 0, focusActivationMode = 'manual', isLoading = false, size = 'default', pageSizeList, onPageSizeChange, localization: userLocalization, className, ...rest } = props;
     useTheme();
-    var localization = React.useMemo(function () { return (__assign(__assign({}, defaultLocalization), userLocalization)); }, [userLocalization]);
-    var pageListRef = React.useRef(null);
-    var _e = React.useState(currentPage), focusedIndex = _e[0], setFocusedIndex = _e[1];
-    React.useEffect(function () {
+    const localization = React.useMemo(() => ({ ...defaultLocalization, ...userLocalization }), [userLocalization]);
+    const pageListRef = React.useRef(null);
+    const [focusedIndex, setFocusedIndex] = React.useState(currentPage);
+    React.useEffect(() => {
         setFocusedIndex(currentPage);
     }, [currentPage]);
-    var needFocus = React.useRef(false);
-    var isMounted = React.useRef(false);
-    React.useEffect(function () {
+    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) {
-            var 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(function (el) { var _a; return ((_a = el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === (focusedIndex + 1).toString(); });
+            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]);
-    var buttonSize = size != 'default' ? 'small' : undefined;
-    var pageButton = React.useCallback(function (index, tabIndex) {
-        if (tabIndex === void 0) { tabIndex = index === focusedIndex ? 0 : -1; }
-        return (React.createElement("button", { key: index, className: cx('iui-table-paginator-page-button', {
-                'iui-table-paginator-page-button-small': buttonSize === 'small',
-            }), "data-iui-active": index === currentPage, onClick: function () { return onPageChange(index); }, "aria-current": index === currentPage, "aria-label": localization.goToPageLabel(index + 1), tabIndex: tabIndex }, index + 1));
-    }, [focusedIndex, currentPage, localization, buttonSize, onPageChange]);
-    var totalPagesCount = Math.ceil(totalRowsCount / pageSize);
-    var pageList = React.useMemo(function () {
-        return new Array(totalPagesCount)
-            .fill(null)
-            .map(function (_, index) { return pageButton(index); });
-    }, [pageButton, totalPagesCount]);
-    var _f = useOverflow(pageList), overflowRef = _f[0], visibleCount = _f[1];
-    var _g = useContainerWidth(), paginatorResizeRef = _g[0], paginatorWidth = _g[1];
-    var onKeyDown = function (event) {
+    const buttonSize = size != 'default' ? 'small' : undefined;
+    const pageButton = React.useCallback((index, tabIndex = index === focusedIndex ? 0 : -1) => (React.createElement("button", { 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)
+        .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;
         }
-        var focusPage = function (delta) {
-            var newFocusedIndex = getBoundedValue(focusedIndex + delta, 0, totalPagesCount - 1);
+        const focusPage = (delta) => {
+            const newFocusedIndex = getBoundedValue(focusedIndex + delta, 0, totalPagesCount - 1);
             needFocus.current = true;
             if (focusActivationMode === 'auto') {
                 onPageChange(newFocusedIndex);
@@ -127,9 +98,9 @@ export var TablePaginator = function (props) {
                 break;
         }
     };
-    var halfVisibleCount = Math.floor(visibleCount / 2);
-    var startPage = focusedIndex - halfVisibleCount;
-    var endPage = focusedIndex + halfVisibleCount + 1;
+    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;
@@ -138,22 +109,22 @@ export var TablePaginator = function (props) {
         startPage = Math.max(0, startPage - (endPage - totalPagesCount)); // If no room at the end, show extra pages at the beginning
         endPage = totalPagesCount;
     }
-    var hasNoRows = totalPagesCount === 0;
-    var showPagesList = totalPagesCount > 1 || isLoading;
-    var showPageSizeList = pageSizeList && !!onPageSizeChange && !!totalRowsCount;
-    var ellipsis = (React.createElement("span", { className: cx('iui-table-paginator-ellipsis', {
+    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"));
-    var noRowsContent = (React.createElement(React.Fragment, null, isLoading ? (React.createElement(ProgressRadial, { indeterminate: true, size: 'small' })) : (React.createElement(Button, { styleType: 'borderless', disabled: true, size: buttonSize }, "1"))));
+    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", __assign({ className: cx('iui-table-paginator', className), ref: paginatorResizeRef }, rest),
-        React.createElement("div", { className: 'iui-left' }, totalSelectedRowsCount > 0 && (React.createElement("span", null, "".concat(totalSelectedRowsCount, " ").concat(totalSelectedRowsCount === 1 ? 'row' : 'rows', " selected")))),
+    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, `${totalSelectedRowsCount} ${totalSelectedRowsCount === 1 ? 'row' : 'rows'} selected`))),
         showPagesList && (React.createElement("div", { className: 'iui-center', ref: overflowRef },
-            React.createElement(IconButton, { styleType: 'borderless', disabled: currentPage === 0, onClick: function () { return onPageChange(currentPage - 1); }, size: buttonSize, "aria-label": localization.previousPage },
+            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 }, (function () {
+            React.createElement("span", { className: 'iui-table-paginator-pages-group', onKeyDown: onKeyDown, ref: pageListRef }, (() => {
                 if (hasNoRows) {
                     return noRowsContent;
                 }
@@ -172,16 +143,14 @@ export var TablePaginator = function (props) {
                         ellipsis,
                         React.createElement(ProgressRadial, { indeterminate: true, size: 'small' })))));
             })()),
-            React.createElement(IconButton, { styleType: 'borderless', disabled: currentPage === totalPagesCount - 1 || hasNoRows, onClick: function () { return onPageChange(currentPage + 1); }, size: buttonSize, "aria-label": localization.nextPage },
+            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: function (close) {
-                    return pageSizeList.map(function (size) { return (React.createElement(MenuItem, { key: size, isSelected: size === pageSize, onClick: function () {
-                            close();
-                            onPageSizeChange(size);
-                        } }, localization.pageSizeLabel(size))); });
-                } }, localization.rangeLabel(currentPage * pageSize + 1, Math.min(totalRowsCount, (currentPage + 1) * pageSize), totalRowsCount, isLoading)))))));
+            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)))))));
 };
 export default TablePaginator;

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

@@ -8,11 +8,9 @@ import { CellProps, Row, TableInstance, TableState } from 'react-table';
  */
 export declare const TableRow: <T extends Record<string, unknown>>(props: {
     row: Row<T>;
-    rowProps?: ((row: Row<T>) => Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        status?: "positive" | "warning" | "negative" | undefined;
-        isLoading?: boolean | undefined;
+    rowProps?: ((row: Row<T>) => React.ComponentPropsWithRef<'div'> & {
+        status?: 'positive' | 'warning' | 'negative';
+        isLoading?: boolean;
     }) | undefined;
     isLast: boolean;
     onRowInViewport: React.MutableRefObject<((rowData: T) => void) | undefined>;
@@ -30,11 +28,9 @@ export declare const TableRow: <T extends Record<string, unknown>>(props: {
 }) => JSX.Element;
 export declare const TableRowMemoized: <T extends Record<string, unknown>>(props: {
     row: Row<T>;
-    rowProps?: ((row: Row<T>) => Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        status?: "positive" | "warning" | "negative" | undefined;
-        isLoading?: boolean | undefined;
+    rowProps?: ((row: Row<T>) => React.ComponentPropsWithRef<'div'> & {
+        status?: 'positive' | 'warning' | 'negative';
+        isLoading?: boolean;
     }) | undefined;
     isLast: boolean;
     onRowInViewport: React.MutableRefObject<((rowData: T) => void) | undefined>;

package/esm/core/Table/TableRowMemoized.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -34,17 +12,17 @@ import { TableCell } from './TableCell';
  * Although state is not used it is needed for `React.memo` to check state that changes row state e.g. selection.
  * When adding new features check whether it changes state that affects row. If it does then add equality check to `React.memo`.
  */
-export var TableRow = function (props) {
+export const TableRow = (props) => {
     var _a;
-    var row = props.row, rowProps = props.rowProps, isLast = props.isLast, onRowInViewport = props.onRowInViewport, onBottomReached = props.onBottomReached, intersectionMargin = props.intersectionMargin, onClick = props.onClick, subComponent = props.subComponent, isDisabled = props.isDisabled, tableHasSubRows = props.tableHasSubRows, tableInstance = props.tableInstance, expanderCell = props.expanderCell, bodyRef = props.bodyRef, tableRowRef = props.tableRowRef;
-    var onIntersect = React.useCallback(function () {
+    const { row, rowProps, isLast, onRowInViewport, onBottomReached, intersectionMargin, onClick, subComponent, isDisabled, tableHasSubRows, tableInstance, expanderCell, bodyRef, tableRowRef, } = props;
+    const onIntersect = React.useCallback(() => {
         var _a, _b;
         (_a = onRowInViewport.current) === null || _a === void 0 ? void 0 : _a.call(onRowInViewport, row.original);
         isLast && ((_b = onBottomReached.current) === null || _b === void 0 ? void 0 : _b.call(onBottomReached));
     }, [isLast, onBottomReached, onRowInViewport, row.original]);
-    var intersectionRoot = React.useMemo(function () {
+    const intersectionRoot = React.useMemo(() => {
         var _a, _b;
-        var isTableBodyScrollable = ((_a = bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.scrollHeight) !== null && _a !== void 0 ? _a : 0) > ((_b = bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.offsetHeight) !== null && _b !== void 0 ? _b : 0);
+        const isTableBodyScrollable = ((_a = bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.scrollHeight) !== null && _a !== void 0 ? _a : 0) > ((_b = bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.offsetHeight) !== null && _b !== void 0 ? _b : 0);
         // If table body is scrollable, make it the intersection root
         if (isTableBodyScrollable) {
             return bodyRef;
@@ -52,47 +30,49 @@ export var TableRow = function (props) {
         // Otherwise, make the viewport the intersection root
         return undefined;
     }, [bodyRef]);
-    var intersectionRef = useIntersection(onIntersect, {
-        rootMargin: "".concat(intersectionMargin, "px"),
+    const intersectionRef = useIntersection(onIntersect, {
+        rootMargin: `${intersectionMargin}px`,
         root: intersectionRoot,
     });
-    var userRowProps = (_a = rowProps === null || rowProps === void 0 ? void 0 : rowProps(row)) !== null && _a !== void 0 ? _a : {};
-    var status = userRowProps.status, isLoading = userRowProps.isLoading, restUserRowProps = __rest(userRowProps, ["status", "isLoading"]);
-    var mergedProps = __assign(__assign(__assign({}, row.getRowProps({ style: { flex: "0 0 auto", minWidth: '100%' } })), restUserRowProps), {
-        className: cx('iui-table-row', {
-            'iui-table-row-expanded': row.isExpanded && subComponent,
-            'iui-loading': isLoading,
-        }, userRowProps === null || userRowProps === void 0 ? void 0 : userRowProps.className),
-        'aria-selected': row.isSelected || undefined,
-        'aria-disabled': isDisabled || undefined,
-        'data-iui-status': status,
-    });
-    var refs = useMergedRefs(intersectionRef, mergedProps.ref, tableRowRef);
+    const userRowProps = (_a = rowProps === null || rowProps === void 0 ? void 0 : rowProps(row)) !== null && _a !== void 0 ? _a : {};
+    const { status, isLoading, ...restUserRowProps } = userRowProps;
+    const mergedProps = {
+        ...row.getRowProps({ style: { flex: `0 0 auto`, minWidth: '100%' } }),
+        ...restUserRowProps,
+        ...{
+            className: cx('iui-table-row', {
+                'iui-table-row-expanded': row.isExpanded && subComponent,
+                'iui-loading': isLoading,
+            }, userRowProps === null || userRowProps === void 0 ? void 0 : userRowProps.className),
+            'aria-selected': row.isSelected || undefined,
+            'aria-disabled': isDisabled || undefined,
+            'data-iui-status': status,
+        },
+    };
+    const refs = useMergedRefs(intersectionRef, mergedProps.ref, tableRowRef);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", __assign({}, mergedProps, { ref: refs, onClick: function (event) {
+        React.createElement("div", { ...mergedProps, ref: refs, onClick: (event) => {
                 var _a;
                 (_a = mergedProps === null || mergedProps === void 0 ? void 0 : mergedProps.onClick) === null || _a === void 0 ? void 0 : _a.call(mergedProps, event);
                 onClick === null || onClick === void 0 ? void 0 : onClick(event, row);
-            } }), row.cells.map(function (cell, index) {
+            } }, row.cells.map((cell, index) => {
             return (React.createElement(TableCell, { key: cell.getCellProps().key, cell: cell, cellIndex: index, isDisabled: isDisabled, tableHasSubRows: tableHasSubRows, tableInstance: tableInstance, expanderCell: expanderCell }));
         })),
         subComponent && (React.createElement(WithCSSTransition, { in: row.isExpanded },
             React.createElement("div", { className: cx('iui-table-row', 'iui-table-expanded-content'), "aria-disabled": isDisabled }, subComponent(row))))));
 };
-var hasAnySelectedSubRow = function (row, selectedRowIds) {
+const hasAnySelectedSubRow = (row, selectedRowIds) => {
     if (selectedRowIds === null || selectedRowIds === void 0 ? void 0 : selectedRowIds[row.id]) {
         return true;
     }
-    return row.subRows.some(function (subRow) {
-        return hasAnySelectedSubRow(subRow, selectedRowIds);
-    });
+    return row.subRows.some((subRow) => hasAnySelectedSubRow(subRow, selectedRowIds));
 };
-export var TableRowMemoized = React.memo(TableRow, function (prevProp, nextProp) {
+export const TableRowMemoized = React.memo(TableRow, (prevProp, nextProp) => {
     var _a, _b, _c, _d, _e, _f, _g;
     return prevProp.isLast === nextProp.isLast &&
         ((_a = prevProp.state.hiddenColumns) === null || _a === void 0 ? void 0 : _a.length) ===
             ((_b = nextProp.state.hiddenColumns) === null || _b === void 0 ? void 0 : _b.length) &&
-        !!((_c = prevProp.state.hiddenColumns) === null || _c === void 0 ? void 0 : _c.every(function (column, index) { var _a; return ((_a = nextProp.state.hiddenColumns) === null || _a === void 0 ? void 0 : _a[index]) === column; })) &&
+        !!((_c = prevProp.state.hiddenColumns) === null || _c === void 0 ? void 0 : _c.every((column, index) => { var _a; return ((_a = nextProp.state.hiddenColumns) === null || _a === void 0 ? void 0 : _a[index]) === column; })) &&
         prevProp.onRowInViewport === nextProp.onRowInViewport &&
         prevProp.onBottomReached === nextProp.onBottomReached &&
         prevProp.onClick === nextProp.onClick &&
@@ -100,16 +80,12 @@ export var TableRowMemoized = React.memo(TableRow, function (prevProp, nextProp)
         ((_d = prevProp.state.selectedRowIds) === null || _d === void 0 ? void 0 : _d[prevProp.row.id]) ===
             ((_e = nextProp.state.selectedRowIds) === null || _e === void 0 ? void 0 : _e[nextProp.row.id]) &&
         // Check if sub-rows selection has changed and whether to show indeterminate state or not
-        prevProp.row.subRows.some(function (subRow) {
-            return hasAnySelectedSubRow(subRow, prevProp.state.selectedRowIds);
-        }) ===
-            nextProp.row.subRows.some(function (subRow) {
-                return hasAnySelectedSubRow(subRow, nextProp.state.selectedRowIds);
-            }) &&
+        prevProp.row.subRows.some((subRow) => hasAnySelectedSubRow(subRow, prevProp.state.selectedRowIds)) ===
+            nextProp.row.subRows.some((subRow) => hasAnySelectedSubRow(subRow, nextProp.state.selectedRowIds)) &&
         ((_f = prevProp.state.expanded) === null || _f === void 0 ? void 0 : _f[prevProp.row.id]) ===
             ((_g = nextProp.state.expanded) === null || _g === void 0 ? void 0 : _g[nextProp.row.id]) &&
         prevProp.subComponent === nextProp.subComponent &&
-        prevProp.row.cells.every(function (cell, index) { return nextProp.row.cells[index].column === cell.column; }) &&
+        prevProp.row.cells.every((cell, index) => nextProp.row.cells[index].column === cell.column) &&
         prevProp.isDisabled === nextProp.isDisabled &&
         prevProp.rowProps === nextProp.rowProps &&
         prevProp.expanderCell === nextProp.expanderCell &&

package/esm/core/Table/actionHandlers/expandHandler.js

@@ -1,10 +1,10 @@
-export var onExpandHandler = function (newState, instance, onExpand) {
+export const onExpandHandler = (newState, instance, onExpand) => {
     if (!(instance === null || instance === void 0 ? void 0 : instance.preFilteredFlatRows.length)) {
         onExpand === null || onExpand === void 0 ? void 0 : onExpand([], newState);
         return;
     }
-    var expandedData = [];
-    instance.preFilteredFlatRows.forEach(function (row) {
+    const expandedData = [];
+    instance.preFilteredFlatRows.forEach((row) => {
         if (newState.expanded[row.id]) {
             expandedData.push(row.original);
         }

package/esm/core/Table/actionHandlers/filterHandler.js

@@ -1,9 +1,9 @@
-export var onFilterHandler = function (newState, action, previousState, instance, onFilter) {
-    var previousFilter = previousState.filters.find(function (f) { return f.id === action.columnId; });
+export const onFilterHandler = (newState, action, previousState, instance, onFilter) => {
+    const previousFilter = previousState.filters.find((f) => f.id === action.columnId);
     if ((previousFilter === null || previousFilter === void 0 ? void 0 : previousFilter.value) != action.filterValue) {
-        var filters = newState.filters.map(function (f) {
+        const filters = newState.filters.map((f) => {
             var _a, _b;
-            var column = instance === null || instance === void 0 ? void 0 : instance.allColumns.find(function (c) { return c.id === f.id; });
+            const column = instance === null || instance === void 0 ? void 0 : instance.allColumns.find((c) => c.id === f.id);
             return {
                 id: f.id,
                 value: f.value,

package/esm/core/Table/actionHandlers/resizeHandler.js

@@ -1,17 +1,15 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-export var onTableResizeStart = function (state) {
-    return __assign(__assign({}, state), { isTableResizing: true });
+export const onTableResizeStart = (state) => {
+    return { ...state, isTableResizing: true };
 };
-export var onTableResizeEnd = function (state, action) {
-    return __assign(__assign({}, state), { isTableResizing: false, columnResizing: __assign(__assign({}, state.columnResizing), { columnWidths: __assign({}, action.columnWidths) }) });
+export const onTableResizeEnd = (state, action) => {
+    return {
+        ...state,
+        isTableResizing: false,
+        columnResizing: {
+            ...state.columnResizing,
+            columnWidths: {
+                ...action.columnWidths,
+            },
+        },
+    };
 };

package/esm/core/Table/actionHandlers/selectHandler.js

@@ -1,30 +1,19 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 /**
  * Handles selection when clicked on a checkbox.
  */
-export var onSelectHandler = function (newState, instance, onSelect, isRowDisabled) {
+export const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
     if (!(instance === null || instance === void 0 ? void 0 : instance.rows.length)) {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect([], newState);
         return;
     }
-    var newSelectedRowIds = {};
-    var handleRow = function (row) {
+    const newSelectedRowIds = {};
+    const handleRow = (row) => {
         if (isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)) {
             return false;
         }
-        var isAllSubSelected = true;
-        row.initialSubRows.forEach(function (subRow) {
-            var result = handleRow(subRow);
+        let isAllSubSelected = true;
+        row.initialSubRows.forEach((subRow) => {
+            const result = handleRow(subRow);
             if (!result) {
                 isAllSubSelected = false;
             }
@@ -39,25 +28,28 @@ export var onSelectHandler = function (newState, instance, onSelect, isRowDisabl
         }
         return !!newSelectedRowIds[row.id];
     };
-    instance.initialRows.forEach(function (row) { return handleRow(row); });
-    var selectedData = getSelectedData(newSelectedRowIds, instance);
+    instance.initialRows.forEach((row) => handleRow(row));
+    const selectedData = getSelectedData(newSelectedRowIds, instance);
     newState.selectedRowIds = newSelectedRowIds;
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedData, newState);
 };
 /**
  * Handles selection when clicked on a row.
  */
-export var onSingleSelectHandler = function (state, action, instance, onSelect, isRowDisabled) {
-    var _a;
-    var selectedRowIds = (_a = {}, _a[action.id] = true, _a);
+export const onSingleSelectHandler = (state, action, instance, onSelect, isRowDisabled) => {
+    const selectedRowIds = { [action.id]: true };
     if (instance === null || instance === void 0 ? void 0 : instance.selectSubRows) {
-        var handleRow_1 = function (row) {
+        const handleRow = (row) => {
             selectedRowIds[row.id] = true;
-            row.subRows.forEach(function (r) { return handleRow_1(r); });
+            row.subRows.forEach((r) => handleRow(r));
         };
-        handleRow_1(instance.rowsById[action.id]);
+        handleRow(instance.rowsById[action.id]);
     }
-    var newState = __assign(__assign({}, state), { lastSelectedRowId: action.id, selectedRowIds: selectedRowIds });
+    const newState = {
+        ...state,
+        lastSelectedRowId: action.id,
+        selectedRowIds,
+    };
     // Passing to `onSelectHandler` to handle filtered sub-rows
     onSelectHandler(newState, instance, onSelect, isRowDisabled);
     return newState;
@@ -65,43 +57,46 @@ export var onSingleSelectHandler = function (state, action, instance, onSelect,
 /**
  * Handles selection when clicked on a row while shift key is pressed.
  */
-export var onShiftSelectHandler = function (state, action, instance, onSelect, isRowDisabled) {
+export const onShiftSelectHandler = (state, action, instance, onSelect, isRowDisabled) => {
     if (instance == null) {
         return state;
     }
-    var startIndex = Math.max(0, instance.flatRows.findIndex(function (row) { return row.id === state.lastSelectedRowId; }));
-    var endIndex = Math.max(0, instance.flatRows.findIndex(function (row) { return row.id === action.id; }));
+    let startIndex = Math.max(0, instance.flatRows.findIndex((row) => row.id === state.lastSelectedRowId));
+    let endIndex = Math.max(0, instance.flatRows.findIndex((row) => row.id === action.id));
     if (startIndex > endIndex) {
-        var temp = startIndex;
+        const temp = startIndex;
         startIndex = endIndex;
         endIndex = temp;
     }
-    var selectedRowIds = {};
+    const selectedRowIds = {};
     // 1. Select all rows between start and end
     instance.flatRows
         .slice(startIndex, endIndex + 1)
-        .forEach(function (r) { return (selectedRowIds[r.id] = true); });
+        .forEach((r) => (selectedRowIds[r.id] = true));
     // 2. Select all children of the last row (endIndex)
     // Since lastRow's children come after endIndex + 1 (not selected in step 1)
-    var handleRow = function (row) {
+    const handleRow = (row) => {
         selectedRowIds[row.id] = true;
-        row.subRows.forEach(function (r) { return handleRow(r); });
+        row.subRows.forEach((r) => handleRow(r));
     };
     handleRow(instance.flatRows[endIndex]);
-    var newState = __assign(__assign({}, state), { selectedRowIds: selectedRowIds });
+    const newState = {
+        ...state,
+        selectedRowIds,
+    };
     // 3.1 Deselect all selected disabled rows and their children
     // 3.2 Convert all partially selected rows marked with tick mark to horizontal line
     onSelectHandler(newState, instance, onSelect, isRowDisabled);
     return newState;
 };
-var getSelectedData = function (selectedRowIds, instance) {
-    var selectedData = [];
-    var setSelectedData = function (row) {
+const getSelectedData = (selectedRowIds, instance) => {
+    const selectedData = [];
+    const setSelectedData = (row) => {
         if (selectedRowIds[row.id]) {
             selectedData.push(row.original);
         }
-        row.initialSubRows.forEach(function (subRow) { return setSelectedData(subRow); });
+        row.initialSubRows.forEach((subRow) => setSelectedData(subRow));
     };
-    instance === null || instance === void 0 ? void 0 : instance.initialRows.forEach(function (row) { return setSelectedData(row); });
+    instance === null || instance === void 0 ? void 0 : instance.initialRows.forEach((row) => setSelectedData(row));
     return selectedData;
 };

package/esm/core/Table/cells/DefaultCell.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -37,11 +15,11 @@ import cx from 'classnames';
  *   cellRenderer: (props) => <DefaultCell {...props} />,
  * }
  */
-export var DefaultCell = function (props) {
+export const DefaultCell = (props) => {
     // Omitting `cellProps`
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var _a = props.cellElementProps, cellElementClassName = _a.className, cellElementStyle = _a.style, cellElementProps = __rest(_a, ["className", "style"]), children = props.children, startIcon = props.startIcon, endIcon = props.endIcon, cellProps = props.cellProps, isDisabled = props.isDisabled, className = props.className, style = props.style, status = props.status, rest = __rest(props, ["cellElementProps", "children", "startIcon", "endIcon", "cellProps", "isDisabled", "className", "style", "status"]);
-    return (React.createElement("div", __assign({}, cellElementProps, rest, { className: cx(cellElementClassName, className), "aria-disabled": (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(cellProps.row.original)) || undefined, "data-iui-status": status, style: __assign(__assign({}, cellElementStyle), style) }),
+    const { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, children, startIcon, endIcon, cellProps, isDisabled, className, style, status, ...rest } = props;
+    return (React.createElement("div", { ...cellElementProps, ...rest, className: cx(cellElementClassName, className), "aria-disabled": (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(cellProps.row.original)) || undefined, "data-iui-status": status, style: { ...cellElementStyle, ...style } },
         startIcon && (React.createElement("div", { className: 'iui-table-cell-start-icon' }, startIcon)),
         children,
         endIcon && React.createElement("div", { className: 'iui-table-cell-end-icon' }, endIcon)));