@itwin/itwinui-react 2.10.0 → 2.11.0

package/cjs/core/Table/SubRowExpander.js

@@ -1,6 +1,26 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubRowExpander = void 0;
@@ -8,17 +28,17 @@ exports.SubRowExpander = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("../utils");
-const Buttons_1 = require("../Buttons");
+const React = __importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const index_js_2 = require("../Buttons/index.js");
 const SubRowExpander = (props) => {
     const { cell, isDisabled, cellProps, expanderCell, density } = props;
-    return (react_1.default.createElement(react_1.default.Fragment, null, expanderCell ? (expanderCell(cellProps)) : (react_1.default.createElement(Buttons_1.IconButton, { style: {
+    return (React.createElement(React.Fragment, null, expanderCell ? (expanderCell(cellProps)) : (React.createElement(index_js_2.IconButton, { style: {
             marginRight: density === 'default' || density === undefined ? 8 : 4,
         }, className: 'iui-table-row-expander', styleType: 'borderless', size: 'small', onClick: (e) => {
             e.stopPropagation();
             cell.row.toggleRowExpanded();
-        }, disabled: isDisabled }, react_1.default.createElement(utils_1.SvgChevronRight, { style: {
+        }, disabled: isDisabled }, React.createElement(index_js_1.SvgChevronRight, { style: {
             transform: cell.row.isExpanded ? 'rotate(90deg)' : undefined,
         } })))));
 };

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

@@ -1,8 +1,8 @@
-import React from 'react';
-import { CellProps, TableOptions, Row, TableState } from 'react-table';
-import { CommonProps } from '../utils';
+import * as React from 'react';
+import type { CellProps, TableOptions, Row, TableState } from 'react-table';
+import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/table.css';
-import { TableFilterValue } from './filters';
+import type { TableFilterValue } from './filters/index.js';
 export declare const tableResizeStartAction = "tableResizeStart";
 export declare type TablePaginatorRendererProps = {
     /**

package/cjs/core/Table/Table.js

@@ -1,4 +1,27 @@
 "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 };
 };
@@ -8,20 +31,20 @@ exports.Table = exports.tableResizeStartAction = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const react_1 = __importDefault(require("react"));
+const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const react_table_1 = require("react-table");
-const ProgressIndicators_1 = require("../ProgressIndicators");
-const utils_1 = require("../utils");
+const index_js_1 = require("../ProgressIndicators/index.js");
+const index_js_2 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/table.css");
-const utils_2 = require("./utils");
-const TableRowMemoized_1 = require("./TableRowMemoized");
-const filters_1 = require("./filters");
-const customFilterFunctions_1 = require("./filters/customFilterFunctions");
-const hooks_1 = require("./hooks");
-const actionHandlers_1 = require("./actionHandlers");
-const VirtualScroll_1 = __importDefault(require("../utils/components/VirtualScroll"));
-const columns_1 = require("./columns");
+const utils_js_1 = require("./utils.js");
+const TableRowMemoized_js_1 = require("./TableRowMemoized.js");
+const index_js_3 = require("./filters/index.js");
+const customFilterFunctions_js_1 = require("./filters/customFilterFunctions.js");
+const index_js_4 = require("./hooks/index.js");
+const index_js_5 = require("./actionHandlers/index.js");
+const VirtualScroll_js_1 = __importDefault(require("../utils/components/VirtualScroll.js"));
+const index_js_6 = require("./columns/index.js");
 const singleRowSelectedAction = 'singleRowSelected';
 const shiftRowSelectedAction = 'shiftRowSelected';
 exports.tableResizeStartAction = 'tableResizeStart';
@@ -82,37 +105,37 @@ const flattenColumns = (columns) => {
  */
 const Table = (props) => {
     const { data, columns, isLoading = false, emptyTableContent, className, style, id, isSelectable = false, onSelect, onRowClick, selectionMode = 'multi', isSortable = false, onSort, stateReducer, onBottomReached, onRowInViewport, intersectionMargin = 300, subComponent, onExpand, onFilter, globalFilterValue, emptyFilteredTableContent, filterTypes: filterFunctions, expanderCell, isRowDisabled, rowProps, density = 'default', selectSubRows = true, getSubRows, selectRowOnClick = true, paginatorRenderer, pageSize = 25, isResizable = false, columnResizeMode = 'fit', styleType = 'default', enableVirtualization = false, enableColumnReordering = false, ...rest } = props;
-    (0, utils_1.useTheme)();
-    const ownerDocument = react_1.default.useRef();
-    const defaultColumn = react_1.default.useMemo(() => ({
+    (0, index_js_2.useTheme)();
+    const ownerDocument = React.useRef();
+    const defaultColumn = React.useMemo(() => ({
         maxWidth: 0,
         minWidth: 0,
         width: 0,
     }), []);
     // useRef prevents from rerendering when one of these callbacks changes
-    const onBottomReachedRef = react_1.default.useRef(onBottomReached);
-    const onRowInViewportRef = react_1.default.useRef(onRowInViewport);
-    react_1.default.useEffect(() => {
+    const onBottomReachedRef = React.useRef(onBottomReached);
+    const onRowInViewportRef = React.useRef(onRowInViewport);
+    React.useEffect(() => {
         onBottomReachedRef.current = onBottomReached;
         onRowInViewportRef.current = onRowInViewport;
     }, [onBottomReached, onRowInViewport]);
-    const hasManualSelectionColumn = react_1.default.useMemo(() => {
+    const hasManualSelectionColumn = React.useMemo(() => {
         const flatColumns = flattenColumns(columns);
-        return flatColumns.some((column) => column.id === columns_1.SELECTION_CELL_ID);
+        return flatColumns.some((column) => column.id === index_js_6.SELECTION_CELL_ID);
     }, [columns]);
-    const disableUserSelect = react_1.default.useCallback((e) => {
+    const disableUserSelect = React.useCallback((e) => {
         if (e.key === 'Shift') {
             ownerDocument.current &&
                 (ownerDocument.current.documentElement.style.userSelect = 'none');
         }
     }, []);
-    const enableUserSelect = react_1.default.useCallback((e) => {
+    const enableUserSelect = React.useCallback((e) => {
         if (e.key === 'Shift') {
             ownerDocument.current &&
                 (ownerDocument.current.documentElement.style.userSelect = '');
         }
     }, []);
-    react_1.default.useEffect(() => {
+    React.useEffect(() => {
         if (!isSelectable || selectionMode !== 'multi') {
             return;
         }
@@ -130,28 +153,28 @@ const Table = (props) => {
         disableUserSelect,
         enableUserSelect,
     ]);
-    const previousFilter = react_1.default.useRef([]);
-    const currentFilter = react_1.default.useRef(previousFilter.current);
-    const tableStateReducer = react_1.default.useCallback((newState, action, previousState, instance) => {
+    const previousFilter = React.useRef([]);
+    const currentFilter = React.useRef(previousFilter.current);
+    const tableStateReducer = React.useCallback((newState, action, previousState, instance) => {
         switch (action.type) {
             case react_table_1.actions.toggleSortBy:
                 onSort === null || onSort === void 0 ? void 0 : onSort(newState);
                 break;
             case react_table_1.actions.setFilter:
-                currentFilter.current = (0, actionHandlers_1.onFilterHandler)(newState, action, previousState, currentFilter.current, instance);
+                currentFilter.current = (0, index_js_5.onFilterHandler)(newState, action, previousState, currentFilter.current, instance);
                 break;
             case react_table_1.actions.toggleRowExpanded:
             case react_table_1.actions.toggleAllRowsExpanded:
-                (0, actionHandlers_1.onExpandHandler)(newState, instance, onExpand);
+                (0, index_js_5.onExpandHandler)(newState, instance, onExpand);
                 break;
             case singleRowSelectedAction: {
-                newState = (0, actionHandlers_1.onSingleSelectHandler)(newState, action, instance, onSelect, 
+                newState = (0, index_js_5.onSingleSelectHandler)(newState, action, instance, onSelect, 
                 // If it has manual selection column, then we can't check whether row is disabled
                 hasManualSelectionColumn ? undefined : isRowDisabled);
                 break;
             }
             case shiftRowSelectedAction: {
-                newState = (0, actionHandlers_1.onShiftSelectHandler)(newState, action, instance, onSelect, 
+                newState = (0, index_js_5.onShiftSelectHandler)(newState, action, instance, onSelect, 
                 // If it has manual selection column, then we can't check whether row is disabled
                 hasManualSelectionColumn ? undefined : isRowDisabled);
                 break;
@@ -159,17 +182,17 @@ const Table = (props) => {
             case react_table_1.actions.toggleRowSelected:
             case react_table_1.actions.toggleAllRowsSelected:
             case react_table_1.actions.toggleAllPageRowsSelected: {
-                (0, actionHandlers_1.onToggleHandler)(newState, action, instance, onSelect, 
+                (0, index_js_5.onToggleHandler)(newState, action, instance, onSelect, 
                 // If it has manual selection column, then we can't check whether row is disabled
                 hasManualSelectionColumn ? undefined : isRowDisabled);
                 break;
             }
             case exports.tableResizeStartAction: {
-                newState = (0, actionHandlers_1.onTableResizeStart)(newState);
+                newState = (0, index_js_5.onTableResizeStart)(newState);
                 break;
             }
             case tableResizeEndAction: {
-                newState = (0, actionHandlers_1.onTableResizeEnd)(newState, action);
+                newState = (0, index_js_5.onTableResizeEnd)(newState, action);
                 break;
             }
             default:
@@ -186,8 +209,8 @@ const Table = (props) => {
         onSort,
         stateReducer,
     ]);
-    const filterTypes = react_1.default.useMemo(() => ({ ...customFilterFunctions_1.customFilterFunctions, ...filterFunctions }), [filterFunctions]);
-    const hasAnySubRows = react_1.default.useMemo(() => {
+    const filterTypes = React.useMemo(() => ({ ...customFilterFunctions_js_1.customFilterFunctions, ...filterFunctions }), [filterFunctions]);
+    const hasAnySubRows = React.useMemo(() => {
         return data.some((item, index) => getSubRows ? getSubRows(item, index) : item.subRows);
     }, [data, getSubRows]);
     const instance = (0, react_table_1.useTable)({
@@ -204,7 +227,7 @@ const Table = (props) => {
         getSubRows,
         initialState: { pageSize, ...props.initialState },
         columnResizeMode,
-    }, react_table_1.useFlexLayout, (0, hooks_1.useResizeColumns)(ownerDocument), react_table_1.useFilters, (0, hooks_1.useSubRowFiltering)(hasAnySubRows), react_table_1.useGlobalFilter, react_table_1.useSortBy, react_table_1.useExpanded, react_table_1.usePagination, react_table_1.useRowSelect, hooks_1.useSubRowSelection, (0, hooks_1.useExpanderCell)(subComponent, expanderCell, isRowDisabled), (0, hooks_1.useSelectionCell)(isSelectable, selectionMode, isRowDisabled, density), react_table_1.useColumnOrder, (0, hooks_1.useColumnDragAndDrop)(enableColumnReordering), hooks_1.useStickyColumns);
+    }, react_table_1.useFlexLayout, (0, index_js_4.useResizeColumns)(ownerDocument), react_table_1.useFilters, (0, index_js_4.useSubRowFiltering)(hasAnySubRows), react_table_1.useGlobalFilter, react_table_1.useSortBy, react_table_1.useExpanded, react_table_1.usePagination, react_table_1.useRowSelect, index_js_4.useSubRowSelection, (0, index_js_4.useExpanderCell)(subComponent, expanderCell, isRowDisabled), (0, index_js_4.useSelectionCell)(isSelectable, selectionMode, isRowDisabled, density), react_table_1.useColumnOrder, (0, index_js_4.useColumnDragAndDrop)(enableColumnReordering), index_js_4.useStickyColumns);
     const { getTableProps, rows, headerGroups: _headerGroups, getTableBodyProps, prepareRow, state, allColumns, dispatch, page, gotoPage, setPageSize, flatHeaders, visibleColumns, setGlobalFilter, } = instance;
     let headerGroups = _headerGroups;
     if (columns.length === 1 && 'columns' in columns[0]) {
@@ -223,7 +246,7 @@ const Table = (props) => {
     const areFiltersSet = allColumns.some((column) => column.filterValue != null && column.filterValue !== '') || !!globalFilterValue;
     const showFilterButton = (column) => (data.length !== 0 || areFiltersSet) && column.canFilter;
     const showSortButton = (column) => data.length !== 0 && column.canSort;
-    const onRowClickHandler = react_1.default.useCallback((event, row) => {
+    const onRowClickHandler = React.useCallback((event, row) => {
         const isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
         const ctrlPressed = event.ctrlKey || event.metaKey;
         if (!isDisabled) {
@@ -259,29 +282,29 @@ const Table = (props) => {
         dispatch,
         onRowClick,
     ]);
-    react_1.default.useEffect(() => {
+    React.useEffect(() => {
         setGlobalFilter(globalFilterValue);
     }, [globalFilterValue, setGlobalFilter]);
-    react_1.default.useEffect(() => {
+    React.useEffect(() => {
         setPageSize(pageSize);
     }, [pageSize, setPageSize]);
-    react_1.default.useEffect(() => {
+    React.useEffect(() => {
         if (previousFilter.current !== currentFilter.current) {
             previousFilter.current = currentFilter.current;
             onFilter === null || onFilter === void 0 ? void 0 : onFilter(currentFilter.current, state, instance.filteredRows);
         }
     }, [state, instance.filteredRows, onFilter]);
-    const lastPassedColumns = react_1.default.useRef([]);
+    const lastPassedColumns = React.useRef([]);
     // Reset the column order whenever new columns are passed
     // This is to avoid the old columnOrder from affecting the new columns' columnOrder
-    react_1.default.useEffect(() => {
+    React.useEffect(() => {
         // Check if columns have changed (by value)
         if (JSON.stringify(lastPassedColumns.current) !== JSON.stringify(columns)) {
             instance.setColumnOrder([]);
         }
         lastPassedColumns.current = columns;
     }, [columns, instance]);
-    const paginatorRendererProps = react_1.default.useMemo(() => ({
+    const paginatorRendererProps = React.useMemo(() => ({
         currentPage: state.pageIndex,
         pageSize: state.pageSize,
         totalRowsCount: rows.length,
@@ -301,10 +324,10 @@ const Table = (props) => {
         instance.selectedFlatRows,
         selectionMode,
     ]);
-    const { scrollToIndex, tableRowRef } = (0, hooks_1.useScrollToRow)({ ...props, page });
-    const columnRefs = react_1.default.useRef({});
-    const previousTableWidth = react_1.default.useRef(0);
-    const onTableResize = react_1.default.useCallback(({ width }) => {
+    const { scrollToIndex, tableRowRef } = (0, index_js_4.useScrollToRow)({ ...props, page });
+    const columnRefs = React.useRef({});
+    const previousTableWidth = React.useRef(0);
+    const onTableResize = React.useCallback(({ width }) => {
         instance.tableWidth = width;
         if (width === previousTableWidth.current) {
             return;
@@ -323,9 +346,9 @@ const Table = (props) => {
         }
         dispatch({ type: exports.tableResizeStartAction });
     }, [dispatch, state.columnResizing.columnWidths, flatHeaders, instance]);
-    const [resizeRef] = (0, utils_1.useResizeObserver)(onTableResize);
+    const [resizeRef] = (0, index_js_2.useResizeObserver)(onTableResize);
     // Flexbox handles columns resize so we take new column widths before browser repaints.
-    (0, utils_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_2.useIsomorphicLayoutEffect)(() => {
         if (state.isTableResizing) {
             const newColumnWidths = {};
             flatHeaders.forEach((column) => {
@@ -337,12 +360,12 @@ const Table = (props) => {
             dispatch({ type: tableResizeEndAction, columnWidths: newColumnWidths });
         }
     });
-    const headerRef = react_1.default.useRef(null);
-    const bodyRef = react_1.default.useRef(null);
-    const getPreparedRow = react_1.default.useCallback((index) => {
+    const headerRef = React.useRef(null);
+    const bodyRef = React.useRef(null);
+    const getPreparedRow = React.useCallback((index) => {
         const row = page[index];
         prepareRow(row);
-        return (react_1.default.createElement(TableRowMemoized_1.TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell, bodyRef: bodyRef.current, tableRowRef: enableVirtualization ? undefined : tableRowRef(row), density: density }));
+        return (React.createElement(TableRowMemoized_js_1.TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell, bodyRef: bodyRef.current, tableRowRef: enableVirtualization ? undefined : tableRowRef(row), density: density }));
     }, [
         page,
         prepareRow,
@@ -359,7 +382,7 @@ const Table = (props) => {
         tableRowRef,
         density,
     ]);
-    const virtualizedItemRenderer = react_1.default.useCallback((index) => getPreparedRow(index), [getPreparedRow]);
+    const virtualizedItemRenderer = React.useCallback((index) => getPreparedRow(index), [getPreparedRow]);
     const updateStickyState = () => {
         if (!bodyRef.current || flatHeaders.every((header) => !header.sticky)) {
             return;
@@ -379,14 +402,14 @@ const Table = (props) => {
             dispatch({ type: react_table_1.actions.setScrolledLeft, value: false });
         }
     };
-    react_1.default.useEffect(() => {
+    React.useEffect(() => {
         updateStickyState();
         // Call only on init
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    const isHeaderDirectClick = react_1.default.useRef(false);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { ref: (element) => {
+    const isHeaderDirectClick = React.useRef(false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: (element) => {
                 ownerDocument.current = element === null || element === void 0 ? void 0 : element.ownerDocument;
                 if (isResizable) {
                     resizeRef(element);
@@ -405,14 +428,14 @@ const Table = (props) => {
                 const headerGroupProps = headerGroup.getHeaderGroupProps({
                     className: 'iui-table-row',
                 });
-                return (react_1.default.createElement("div", { className: 'iui-table-header-wrapper', ref: headerRef, onScroll: () => {
+                return (React.createElement("div", { className: 'iui-table-header-wrapper', ref: headerRef, onScroll: () => {
                         if (headerRef.current && bodyRef.current) {
                             bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
                             updateStickyState();
                         }
                     }, key: headerGroupProps.key },
-                    react_1.default.createElement("div", { className: 'iui-table-header' },
-                        react_1.default.createElement("div", { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
+                    React.createElement("div", { className: 'iui-table-header' },
+                        React.createElement("div", { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
                             const { onClick, ...restSortProps } = column.getSortByToggleProps();
                             const columnProps = column.getHeaderProps({
                                 ...restSortProps,
@@ -422,12 +445,12 @@ const Table = (props) => {
                                     'iui-table-cell-sticky': !!column.sticky,
                                 }, column.columnClassName),
                                 style: {
-                                    ...(0, utils_2.getCellStyle)(column, !!state.isTableResizing),
-                                    ...(0, utils_2.getStickyStyle)(column, visibleColumns),
+                                    ...(0, utils_js_1.getCellStyle)(column, !!state.isTableResizing),
+                                    ...(0, utils_js_1.getStickyStyle)(column, visibleColumns),
                                     flexWrap: 'unset',
                                 },
                             });
-                            return (react_1.default.createElement("div", { ...columnProps, ...column.getDragAndDropProps(), key: columnProps.key, title: undefined, ref: (el) => {
+                            return (React.createElement("div", { ...columnProps, ...column.getDragAndDropProps(), key: columnProps.key, title: undefined, ref: (el) => {
                                     if (el) {
                                         columnRefs.current[column.id] = el;
                                         column.resizeWidth =
@@ -448,24 +471,24 @@ const Table = (props) => {
                                 } },
                                 column.render('Header'),
                                 (showFilterButton(column) ||
-                                    showSortButton(column)) && (react_1.default.createElement("div", { className: 'iui-table-header-actions-container' },
-                                    showFilterButton(column) && (react_1.default.createElement(filters_1.FilterToggle, { column: column })),
-                                    showSortButton(column) && (react_1.default.createElement("div", { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
-                                        (!column.isSorted && column.sortDescFirst) ? (react_1.default.createElement(utils_1.SvgSortDown, { className: 'iui-table-sort', "aria-hidden": true })) : (react_1.default.createElement(utils_1.SvgSortUp, { className: 'iui-table-sort', "aria-hidden": true })))))),
+                                    showSortButton(column)) && (React.createElement("div", { className: 'iui-table-header-actions-container' },
+                                    showFilterButton(column) && (React.createElement(index_js_3.FilterToggle, { column: column })),
+                                    showSortButton(column) && (React.createElement("div", { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
+                                        (!column.isSorted && column.sortDescFirst) ? (React.createElement(index_js_2.SvgSortDown, { className: 'iui-table-sort', "aria-hidden": true })) : (React.createElement(index_js_2.SvgSortUp, { className: 'iui-table-sort', "aria-hidden": true })))))),
                                 isResizable &&
                                     column.isResizerVisible &&
                                     (index !== headerGroup.headers.length - 1 ||
-                                        columnResizeMode === 'expand') && (react_1.default.createElement("div", { ...column.getResizerProps(), className: 'iui-table-resizer' },
-                                    react_1.default.createElement("div", { className: 'iui-table-resizer-bar' }))),
+                                        columnResizeMode === 'expand') && (React.createElement("div", { ...column.getResizerProps(), className: 'iui-table-resizer' },
+                                    React.createElement("div", { className: 'iui-table-resizer-bar' }))),
                                 enableColumnReordering &&
-                                    !column.disableReordering && (react_1.default.createElement("div", { className: 'iui-table-reorder-bar' })),
+                                    !column.disableReordering && (React.createElement("div", { className: 'iui-table-reorder-bar' })),
                                 column.sticky === 'left' &&
-                                    state.sticky.isScrolledToRight && (react_1.default.createElement("div", { className: 'iui-table-cell-shadow-right' })),
+                                    state.sticky.isScrolledToRight && (React.createElement("div", { className: 'iui-table-cell-shadow-right' })),
                                 column.sticky === 'right' &&
-                                    state.sticky.isScrolledToLeft && (react_1.default.createElement("div", { className: 'iui-table-cell-shadow-left' }))));
+                                    state.sticky.isScrolledToLeft && (React.createElement("div", { className: 'iui-table-cell-shadow-left' }))));
                         })))));
             }),
-            react_1.default.createElement("div", { ...getTableBodyProps({
+            React.createElement("div", { ...getTableBodyProps({
                     className: (0, classnames_1.default)('iui-table-body', {
                         'iui-zebra-striping': styleType === 'zebra-rows',
                     }),
@@ -476,18 +499,18 @@ const Table = (props) => {
                         updateStickyState();
                     }
                 }, tabIndex: -1, "aria-multiselectable": (isSelectable && selectionMode === 'multi') || undefined },
-                data.length !== 0 && (react_1.default.createElement(react_1.default.Fragment, null, enableVirtualization ? (react_1.default.createElement(VirtualScroll_1.default, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer, scrollToIndex: scrollToIndex })) : (page.map((_, index) => getPreparedRow(index))))),
-                isLoading && data.length === 0 && (react_1.default.createElement("div", { className: 'iui-table-empty' },
-                    react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { indeterminate: true }))),
-                isLoading && data.length !== 0 && (react_1.default.createElement("div", { className: 'iui-table-row' },
-                    react_1.default.createElement("div", { className: 'iui-table-cell', style: { justifyContent: 'center' } },
-                        react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { indeterminate: true, size: 'small', style: { float: 'none', marginLeft: 0 } })))),
-                !isLoading && data.length === 0 && !areFiltersSet && (react_1.default.createElement("div", { className: 'iui-table-empty' },
-                    react_1.default.createElement("div", null, emptyTableContent))),
+                data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll_js_1.default, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer, scrollToIndex: scrollToIndex })) : (page.map((_, index) => getPreparedRow(index))))),
+                isLoading && data.length === 0 && (React.createElement("div", { className: 'iui-table-empty' },
+                    React.createElement(index_js_1.ProgressRadial, { indeterminate: true }))),
+                isLoading && data.length !== 0 && (React.createElement("div", { className: 'iui-table-row' },
+                    React.createElement("div", { className: 'iui-table-cell', style: { justifyContent: 'center' } },
+                        React.createElement(index_js_1.ProgressRadial, { indeterminate: true, size: 'small', style: { float: 'none', marginLeft: 0 } })))),
+                !isLoading && data.length === 0 && !areFiltersSet && (React.createElement("div", { className: 'iui-table-empty' },
+                    React.createElement("div", null, emptyTableContent))),
                 !isLoading &&
                     (data.length === 0 || rows.length === 0) &&
-                    areFiltersSet && (react_1.default.createElement("div", { className: 'iui-table-empty' },
-                    react_1.default.createElement("div", null, emptyFilteredTableContent)))), paginatorRenderer === null || paginatorRenderer === void 0 ? void 0 :
+                    areFiltersSet && (React.createElement("div", { className: 'iui-table-empty' },
+                    React.createElement("div", null, emptyFilteredTableContent)))), paginatorRenderer === null || paginatorRenderer === void 0 ? void 0 :
             paginatorRenderer(paginatorRendererProps))));
 };
 exports.Table = Table;

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Cell, CellProps, TableInstance } from 'react-table';
+import * as React from 'react';
+import type { Cell, CellProps, TableInstance } from 'react-table';
 export declare type TableCellProps<T extends Record<string, unknown>> = {
     cell: Cell<T>;
     cellIndex: number;

package/cjs/core/Table/TableCell.js

@@ -1,4 +1,27 @@
 "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 };
 };
@@ -8,16 +31,16 @@ exports.TableCell = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const react_1 = __importDefault(require("react"));
+const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const utils_1 = require("./utils");
-const SubRowExpander_1 = require("./SubRowExpander");
-const columns_1 = require("./columns");
-const cells_1 = require("./cells");
+const utils_js_1 = require("./utils.js");
+const SubRowExpander_js_1 = require("./SubRowExpander.js");
+const index_js_1 = require("./columns/index.js");
+const index_js_2 = require("./cells/index.js");
 const TableCell = (props) => {
     const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, density, } = props;
     const hasSubRowExpander = cellIndex ===
-        cell.row.cells.findIndex((c) => c.column.id !== columns_1.SELECTION_CELL_ID);
+        cell.row.cells.findIndex((c) => c.column.id !== index_js_1.SELECTION_CELL_ID);
     const getSubRowStyle = () => {
         if (!tableHasSubRows || !hasSubRowExpander) {
             return undefined;
@@ -44,32 +67,32 @@ const TableCell = (props) => {
             'iui-table-cell-sticky': !!cell.column.sticky,
         }),
         style: {
-            ...(0, utils_1.getCellStyle)(cell.column, !!tableInstance.state.isTableResizing),
+            ...(0, utils_js_1.getCellStyle)(cell.column, !!tableInstance.state.isTableResizing),
             ...getSubRowStyle(),
-            ...(0, utils_1.getStickyStyle)(cell.column, tableInstance.visibleColumns),
+            ...(0, utils_js_1.getStickyStyle)(cell.column, tableInstance.visibleColumns),
         },
     });
     const cellProps = {
         ...tableInstance,
         ...{ cell, row: cell.row, value: cell.value, column: cell.column },
     };
-    const cellContent = (react_1.default.createElement(react_1.default.Fragment, null,
-        tableHasSubRows && hasSubRowExpander && cell.row.canExpand && (react_1.default.createElement(SubRowExpander_1.SubRowExpander, { cell: cell, isDisabled: isDisabled, cellProps: cellProps, expanderCell: expanderCell, density: density })),
+    const cellContent = (React.createElement(React.Fragment, null,
+        tableHasSubRows && hasSubRowExpander && cell.row.canExpand && (React.createElement(SubRowExpander_js_1.SubRowExpander, { cell: cell, isDisabled: isDisabled, cellProps: cellProps, expanderCell: expanderCell, density: density })),
         cell.render('Cell')));
     const cellRendererProps = {
         cellElementProps,
         cellProps,
-        children: (react_1.default.createElement(react_1.default.Fragment, null,
+        children: (React.createElement(React.Fragment, null,
             cellContent,
             cell.column.sticky === 'left' &&
-                tableInstance.state.sticky.isScrolledToRight && (react_1.default.createElement("div", { className: 'iui-table-cell-shadow-right' })),
+                tableInstance.state.sticky.isScrolledToRight && (React.createElement("div", { className: 'iui-table-cell-shadow-right' })),
             cell.column.sticky === 'right' &&
-                tableInstance.state.sticky.isScrolledToLeft && (react_1.default.createElement("div", { className: 'iui-table-cell-shadow-left' })))),
+                tableInstance.state.sticky.isScrolledToLeft && (React.createElement("div", { className: 'iui-table-cell-shadow-left' })))),
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer({
+    return (React.createElement(React.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer({
         ...cellRendererProps,
         isDisabled: () => isDisabled,
-    })) : (react_1.default.createElement(cells_1.DefaultCell, { ...cellRendererProps, isDisabled: () => isDisabled }))));
+    })) : (React.createElement(index_js_2.DefaultCell, { ...cellRendererProps, isDisabled: () => isDisabled }))));
 };
 exports.TableCell = TableCell;
 exports.default = exports.TableCell;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import '@itwin/itwinui-css/css/table.css';
-import { CommonProps } from '../utils';
-import { TablePaginatorRendererProps } from './Table';
+import type { CommonProps } from '../utils/index.js';
+import type { TablePaginatorRendererProps } from './Table.js';
 export declare type TablePaginatorProps = {
     /**
      * Control whether focusing tabs (using arrow keys) should automatically select them.