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

package/esm/core/Table/Table.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.
@@ -38,16 +16,16 @@ import { useExpanderCell, useSelectionCell, useSubRowFiltering, useSubRowSelecti
 import { onExpandHandler, onFilterHandler, onSelectHandler, onShiftSelectHandler, onSingleSelectHandler, onTableResizeEnd, onTableResizeStart, } from './actionHandlers';
 import VirtualScroll from '../utils/components/VirtualScroll';
 import { SELECTION_CELL_ID } from './columns';
-var singleRowSelectedAction = 'singleRowSelected';
-var shiftRowSelectedAction = 'shiftRowSelected';
-export var tableResizeStartAction = 'tableResizeStart';
-var tableResizeEndAction = 'tableResizeEnd';
-var flattenColumns = function (columns) {
-    var flatColumns = [];
-    columns.forEach(function (column) {
+const singleRowSelectedAction = 'singleRowSelected';
+const shiftRowSelectedAction = 'shiftRowSelected';
+export const tableResizeStartAction = 'tableResizeStart';
+const tableResizeEndAction = 'tableResizeEnd';
+const flattenColumns = (columns) => {
+    const flatColumns = [];
+    columns.forEach((column) => {
         flatColumns.push(column);
         if (column.columns) {
-            flatColumns.push.apply(flatColumns, flattenColumns(column.columns));
+            flatColumns.push(...flattenColumns(column.columns));
         }
     });
     return flatColumns;
@@ -56,30 +34,25 @@ var flattenColumns = function (columns) {
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).
  * @example
  * const columns = React.useMemo(() => [
- *  {
- *    Header: 'Header name',
- *    columns: [
- *      {
- *        id: 'name',
- *        Header: 'Name',
- *        accessor: 'name',
- *        width: 90,
- *      },
- *      {
- *        id: 'description',
- *        Header: 'description',
- *        accessor: 'description',
- *        maxWidth: 200,
- *      },
- *      {
- *        id: 'view',
- *        Header: 'view',
- *        Cell: () => {
- *          return <span onClick={onViewClick}>View</span>
- *        },
- *      },
- *    ],
- *  },
+ *   {
+ *     id: 'name',
+ *     Header: 'Name',
+ *     accessor: 'name',
+ *     width: 90,
+ *   },
+ *   {
+ *     id: 'description',
+ *     Header: 'description',
+ *     accessor: 'description',
+ *     maxWidth: 200,
+ *   },
+ *   {
+ *     id: 'view',
+ *     Header: 'view',
+ *     Cell: () => {
+ *       return <span onClick={onViewClick}>View</span>
+ *     },
+ *   },
  * ], [onViewClick])
  * const data = [
  *  { name: 'Name1', description: 'Description1' },
@@ -94,46 +67,46 @@ var flattenColumns = function (columns) {
  *   isSortable={true}
  * />
  */
-export var Table = function (props) {
-    var data = props.data, columns = props.columns, _a = props.isLoading, isLoading = _a === void 0 ? false : _a, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _b = props.isSelectable, isSelectable = _b === void 0 ? false : _b, onSelect = props.onSelect, onRowClick = props.onRowClick, _c = props.selectionMode, selectionMode = _c === void 0 ? 'multi' : _c, _d = props.isSortable, isSortable = _d === void 0 ? false : _d, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _e = props.intersectionMargin, intersectionMargin = _e === void 0 ? 300 : _e, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, globalFilterValue = props.globalFilterValue, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _f = props.density, density = _f === void 0 ? 'default' : _f, _g = props.selectSubRows, selectSubRows = _g === void 0 ? true : _g, getSubRows = props.getSubRows, _h = props.selectRowOnClick, selectRowOnClick = _h === void 0 ? true : _h, paginatorRenderer = props.paginatorRenderer, _j = props.pageSize, pageSize = _j === void 0 ? 25 : _j, _k = props.isResizable, isResizable = _k === void 0 ? false : _k, _l = props.columnResizeMode, columnResizeMode = _l === void 0 ? 'fit' : _l, _m = props.styleType, styleType = _m === void 0 ? 'default' : _m, _o = props.enableVirtualization, enableVirtualization = _o === void 0 ? false : _o, _p = props.enableColumnReordering, enableColumnReordering = _p === void 0 ? false : _p, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "selectionMode", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "globalFilterValue", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "columnResizeMode", "styleType", "enableVirtualization", "enableColumnReordering"]);
+export 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;
     useTheme();
-    var ownerDocument = React.useRef();
-    var defaultColumn = React.useMemo(function () { return ({
+    const ownerDocument = React.useRef();
+    const defaultColumn = React.useMemo(() => ({
         maxWidth: 0,
         minWidth: 0,
         width: 0,
-    }); }, []);
+    }), []);
     // useRef prevents from rerendering when one of these callbacks changes
-    var onBottomReachedRef = React.useRef(onBottomReached);
-    var onRowInViewportRef = React.useRef(onRowInViewport);
-    React.useEffect(function () {
+    const onBottomReachedRef = React.useRef(onBottomReached);
+    const onRowInViewportRef = React.useRef(onRowInViewport);
+    React.useEffect(() => {
         onBottomReachedRef.current = onBottomReached;
         onRowInViewportRef.current = onRowInViewport;
     }, [onBottomReached, onRowInViewport]);
-    var hasManualSelectionColumn = React.useMemo(function () {
-        var flatColumns = flattenColumns(columns);
-        return flatColumns.some(function (column) { return column.id === SELECTION_CELL_ID; });
+    const hasManualSelectionColumn = React.useMemo(() => {
+        const flatColumns = flattenColumns(columns);
+        return flatColumns.some((column) => column.id === SELECTION_CELL_ID);
     }, [columns]);
-    var disableUserSelect = React.useCallback(function (e) {
+    const disableUserSelect = React.useCallback((e) => {
         if (e.key === 'Shift') {
             ownerDocument.current &&
                 (ownerDocument.current.documentElement.style.userSelect = 'none');
         }
     }, []);
-    var enableUserSelect = React.useCallback(function (e) {
+    const enableUserSelect = React.useCallback((e) => {
         if (e.key === 'Shift') {
             ownerDocument.current &&
                 (ownerDocument.current.documentElement.style.userSelect = '');
         }
     }, []);
-    React.useEffect(function () {
+    React.useEffect(() => {
         if (!isSelectable || selectionMode !== 'multi') {
             return;
         }
-        var ownerDoc = ownerDocument.current;
+        const ownerDoc = ownerDocument.current;
         ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.addEventListener('keydown', disableUserSelect);
         ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.addEventListener('keyup', enableUserSelect);
-        return function () {
+        return () => {
             ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.removeEventListener('keydown', disableUserSelect);
             ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.removeEventListener('keyup', enableUserSelect);
         };
@@ -144,7 +117,7 @@ export var Table = function (props) {
         disableUserSelect,
         enableUserSelect,
     ]);
-    var tableStateReducer = React.useCallback(function (newState, action, previousState, instance) {
+    const tableStateReducer = React.useCallback((newState, action, previousState, instance) => {
         switch (action.type) {
             case TableActions.toggleSortBy:
                 onSort === null || onSort === void 0 ? void 0 : onSort(newState);
@@ -199,30 +172,37 @@ export var Table = function (props) {
         onSort,
         stateReducer,
     ]);
-    var filterTypes = React.useMemo(function () { return (__assign(__assign({}, customFilterFunctions), filterFunctions)); }, [filterFunctions]);
-    var hasAnySubRows = React.useMemo(function () {
-        return data.some(function (item, index) {
-            return getSubRows ? getSubRows(item, index) : item.subRows;
-        });
+    const filterTypes = React.useMemo(() => ({ ...customFilterFunctions, ...filterFunctions }), [filterFunctions]);
+    const hasAnySubRows = React.useMemo(() => {
+        return data.some((item, index) => getSubRows ? getSubRows(item, index) : item.subRows);
     }, [data, getSubRows]);
-    var instance = useTable(__assign(__assign({ manualPagination: !paginatorRenderer, paginateExpandedRows: false }, props), { columns: columns, defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes, selectSubRows: selectSubRows, data: data, getSubRows: getSubRows, initialState: __assign({ pageSize: pageSize }, props.initialState), columnResizeMode: columnResizeMode }), useFlexLayout, useResizeColumns(ownerDocument), useFilters, useSubRowFiltering(hasAnySubRows), useGlobalFilter, useSortBy, useExpanded, usePagination, useRowSelect, useSubRowSelection, useExpanderCell(subComponent, expanderCell, isRowDisabled), useSelectionCell(isSelectable, selectionMode, isRowDisabled), useColumnOrder, useColumnDragAndDrop(enableColumnReordering), useStickyColumns);
-    var getTableProps = instance.getTableProps, rows = instance.rows, headerGroups = instance.headerGroups, getTableBodyProps = instance.getTableBodyProps, prepareRow = instance.prepareRow, state = instance.state, allColumns = instance.allColumns, dispatch = instance.dispatch, page = instance.page, gotoPage = instance.gotoPage, setPageSize = instance.setPageSize, flatHeaders = instance.flatHeaders, visibleColumns = instance.visibleColumns, setGlobalFilter = instance.setGlobalFilter;
-    var ariaDataAttributes = Object.entries(rest).reduce(function (result, _a) {
-        var key = _a[0], value = _a[1];
+    const instance = useTable({
+        manualPagination: !paginatorRenderer,
+        paginateExpandedRows: false,
+        ...props,
+        columns,
+        defaultColumn,
+        disableSortBy: !isSortable,
+        stateReducer: tableStateReducer,
+        filterTypes,
+        selectSubRows,
+        data,
+        getSubRows,
+        initialState: { pageSize, ...props.initialState },
+        columnResizeMode,
+    }, useFlexLayout, useResizeColumns(ownerDocument), useFilters, useSubRowFiltering(hasAnySubRows), useGlobalFilter, useSortBy, useExpanded, usePagination, useRowSelect, useSubRowSelection, useExpanderCell(subComponent, expanderCell, isRowDisabled), useSelectionCell(isSelectable, selectionMode, isRowDisabled), useColumnOrder, useColumnDragAndDrop(enableColumnReordering), useStickyColumns);
+    const { getTableProps, rows, headerGroups, getTableBodyProps, prepareRow, state, allColumns, dispatch, page, gotoPage, setPageSize, flatHeaders, visibleColumns, setGlobalFilter, } = instance;
+    const ariaDataAttributes = Object.entries(rest).reduce((result, [key, value]) => {
         if (key.startsWith('data-') || key.startsWith('aria-')) {
             result[key] = value;
         }
         return result;
     }, {});
-    var areFiltersSet = allColumns.some(function (column) { return column.filterValue != null && column.filterValue !== ''; }) || !!globalFilterValue;
-    var showFilterButton = function (column) {
-        return (data.length !== 0 || areFiltersSet) && column.canFilter;
-    };
-    var showSortButton = function (column) {
-        return data.length !== 0 && column.canSort;
-    };
-    var onRowClickHandler = React.useCallback(function (event, row) {
-        var isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
+    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.useCallback((event, row) => {
+        const isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
         if (!isDisabled) {
             onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row);
         }
@@ -255,22 +235,22 @@ export var Table = function (props) {
         dispatch,
         onRowClick,
     ]);
-    React.useEffect(function () {
+    React.useEffect(() => {
         setGlobalFilter(globalFilterValue);
     }, [globalFilterValue, setGlobalFilter]);
-    React.useEffect(function () {
+    React.useEffect(() => {
         setPageSize(pageSize);
     }, [pageSize, setPageSize]);
-    var paginatorRendererProps = React.useMemo(function () { return ({
+    const paginatorRendererProps = React.useMemo(() => ({
         currentPage: state.pageIndex,
         pageSize: state.pageSize,
         totalRowsCount: rows.length,
         size: density !== 'default' ? 'small' : 'default',
-        isLoading: isLoading,
+        isLoading,
         onPageChange: gotoPage,
         onPageSizeChange: setPageSize,
         totalSelectedRowsCount: selectionMode === 'single' ? 0 : instance.selectedFlatRows.length, // 0 when selectionMode = 'single' since totalSelectedRowCount is for multi-selection mode only
-    }); }, [
+    }), [
         density,
         gotoPage,
         isLoading,
@@ -281,18 +261,17 @@ export var Table = function (props) {
         instance.selectedFlatRows,
         selectionMode,
     ]);
-    var _q = useScrollToRow(__assign(__assign({}, props), { page: page })), scrollToIndex = _q.scrollToIndex, tableRowRef = _q.tableRowRef;
-    var columnRefs = React.useRef({});
-    var previousTableWidth = React.useRef(0);
-    var onTableResize = React.useCallback(function (_a) {
-        var width = _a.width;
+    const { scrollToIndex, tableRowRef } = 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;
         }
         previousTableWidth.current = width;
         // Update column widths when table was resized
-        flatHeaders.forEach(function (header) {
+        flatHeaders.forEach((header) => {
             if (columnRefs.current[header.id]) {
                 header.resizeWidth =
                     columnRefs.current[header.id].getBoundingClientRect().width;
@@ -304,24 +283,24 @@ export var Table = function (props) {
         }
         dispatch({ type: tableResizeStartAction });
     }, [dispatch, state.columnResizing.columnWidths, flatHeaders, instance]);
-    var resizeRef = useResizeObserver(onTableResize)[0];
+    const [resizeRef] = useResizeObserver(onTableResize);
     // Flexbox handles columns resize so we take new column widths before browser repaints.
-    React.useLayoutEffect(function () {
+    React.useLayoutEffect(() => {
         if (state.isTableResizing) {
-            var newColumnWidths_1 = {};
-            flatHeaders.forEach(function (column) {
+            const newColumnWidths = {};
+            flatHeaders.forEach((column) => {
                 if (columnRefs.current[column.id]) {
-                    newColumnWidths_1[column.id] =
+                    newColumnWidths[column.id] =
                         columnRefs.current[column.id].getBoundingClientRect().width;
                 }
             });
-            dispatch({ type: tableResizeEndAction, columnWidths: newColumnWidths_1 });
+            dispatch({ type: tableResizeEndAction, columnWidths: newColumnWidths });
         }
     });
-    var headerRef = React.useRef(null);
-    var bodyRef = React.useRef(null);
-    var getPreparedRow = React.useCallback(function (index) {
-        var row = page[index];
+    const headerRef = React.useRef(null);
+    const bodyRef = React.useRef(null);
+    const getPreparedRow = React.useCallback((index) => {
+        const row = page[index];
         prepareRow(row);
         return (React.createElement(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) }));
     }, [
@@ -339,9 +318,9 @@ export var Table = function (props) {
         enableVirtualization,
         tableRowRef,
     ]);
-    var virtualizedItemRenderer = React.useCallback(function (index) { return getPreparedRow(index); }, [getPreparedRow]);
-    var updateStickyState = function () {
-        if (!bodyRef.current || flatHeaders.every(function (header) { return !header.sticky; })) {
+    const virtualizedItemRenderer = React.useCallback((index) => getPreparedRow(index), [getPreparedRow]);
+    const updateStickyState = () => {
+        if (!bodyRef.current || flatHeaders.every((header) => !header.sticky)) {
             return;
         }
         if (bodyRef.current.scrollLeft !== 0) {
@@ -359,89 +338,104 @@ export var Table = function (props) {
             dispatch({ type: TableActions.setScrolledLeft, value: false });
         }
     };
-    React.useEffect(function () {
+    React.useEffect(() => {
         updateStickyState();
         // Call only on init
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var isHeaderDirectClick = React.useRef(false);
+    const isHeaderDirectClick = React.useRef(false);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", __assign({ ref: function (element) {
+        React.createElement("div", { ref: (element) => {
                 ownerDocument.current = element === null || element === void 0 ? void 0 : element.ownerDocument;
                 if (isResizable) {
                     resizeRef(element);
                 }
-            }, id: id }, getTableProps({
-            className: cx('iui-table', className),
-            style: __assign({ minWidth: 0 }, style),
-        }), { "data-iui-size": density === 'default' ? undefined : density }, ariaDataAttributes),
-            React.createElement("div", { className: 'iui-table-header-wrapper', ref: headerRef, onScroll: function () {
-                    if (headerRef.current && bodyRef.current) {
-                        bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
-                        updateStickyState();
-                    }
-                } },
-                React.createElement("div", { className: 'iui-table-header' }, headerGroups.slice(1).map(function (headerGroup) {
-                    var headerGroupProps = headerGroup.getHeaderGroupProps({
-                        className: 'iui-table-row',
-                    });
-                    return (React.createElement("div", __assign({}, headerGroupProps, { key: headerGroupProps.key }), headerGroup.headers.map(function (column, index) {
-                        var _a = column.getSortByToggleProps(), onClick = _a.onClick, restSortProps = __rest(_a, ["onClick"]);
-                        var columnProps = column.getHeaderProps(__assign(__assign({}, restSortProps), { className: cx('iui-table-cell', {
-                                'iui-actionable': column.canSort,
-                                'iui-sorted': column.isSorted,
-                                'iui-table-cell-sticky': !!column.sticky,
-                            }, column.columnClassName), style: __assign(__assign(__assign({}, getCellStyle(column, !!state.isTableResizing)), getStickyStyle(column, visibleColumns)), { flexWrap: 'unset' }) }));
-                        return (React.createElement("div", __assign({}, columnProps, column.getDragAndDropProps(), { key: columnProps.key, title: undefined, ref: function (el) {
-                                if (el) {
-                                    columnRefs.current[column.id] = el;
-                                    column.resizeWidth =
-                                        el.getBoundingClientRect().width;
-                                }
-                            }, onMouseDown: function () {
-                                isHeaderDirectClick.current = true;
-                            }, onClick: function (e) {
-                                // Prevents from triggering sort when resizing and mouse is released in the middle of header
-                                if (isHeaderDirectClick.current) {
-                                    onClick === null || onClick === void 0 ? void 0 : onClick(e);
-                                    isHeaderDirectClick.current = false;
-                                }
-                            }, tabIndex: showSortButton(column) ? 0 : undefined, onKeyDown: function (e) {
-                                if (e.key == 'Enter' && showSortButton(column)) {
-                                    column.toggleSortBy();
-                                }
-                            } }),
-                            column.render('Header'),
-                            (showFilterButton(column) ||
-                                showSortButton(column)) && (React.createElement("div", { className: 'iui-table-header-actions-container' },
-                                showFilterButton(column) && (React.createElement(FilterToggle, { column: column })),
-                                showSortButton(column) && (React.createElement("div", { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
-                                    (!column.isSorted && column.sortDescFirst) ? (React.createElement(SvgSortDown, { className: 'iui-table-sort', "aria-hidden": true })) : (React.createElement(SvgSortUp, { className: 'iui-table-sort', "aria-hidden": true })))))),
-                            isResizable &&
-                                column.isResizerVisible &&
-                                (index !== headerGroup.headers.length - 1 ||
-                                    columnResizeMode === 'expand') && (React.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-table-resizer' }),
-                                React.createElement("div", { className: 'iui-table-resizer-bar' }))),
-                            enableColumnReordering &&
-                                !column.disableReordering && (React.createElement("div", { className: 'iui-table-reorder-bar' })),
-                            column.sticky === 'left' &&
-                                state.sticky.isScrolledToRight && (React.createElement("div", { className: 'iui-table-cell-shadow-right' })),
-                            column.sticky === 'right' &&
-                                state.sticky.isScrolledToLeft && (React.createElement("div", { className: 'iui-table-cell-shadow-left' }))));
-                    })));
-                }))),
-            React.createElement("div", __assign({}, getTableBodyProps({
-                className: cx('iui-table-body', {
-                    'iui-zebra-striping': styleType === 'zebra-rows',
-                }),
-                style: { outline: 0 },
-            }), { ref: bodyRef, onScroll: function () {
+            }, id: id, ...getTableProps({
+                className: cx('iui-table', className),
+                style: {
+                    minWidth: 0,
+                    ...style,
+                },
+            }), "data-iui-size": density === 'default' ? undefined : density, ...ariaDataAttributes },
+            headerGroups.map((headerGroup) => {
+                // There may be a better solution for this, but for now I'm filtering out the placeholder cells using header.id
+                headerGroup.headers = headerGroup.headers.filter((header) => !header.id.includes('iui-table-checkbox-selector_placeholder') &&
+                    !header.id.includes('iui-table-expander_placeholder'));
+                const headerGroupProps = headerGroup.getHeaderGroupProps({
+                    className: 'iui-table-row',
+                });
+                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.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,
+                                className: cx('iui-table-cell', {
+                                    'iui-actionable': column.canSort,
+                                    'iui-sorted': column.isSorted,
+                                    'iui-table-cell-sticky': !!column.sticky,
+                                }, column.columnClassName),
+                                style: {
+                                    ...getCellStyle(column, !!state.isTableResizing),
+                                    ...getStickyStyle(column, visibleColumns),
+                                    flexWrap: 'unset',
+                                },
+                            });
+                            return (React.createElement("div", { ...columnProps, ...column.getDragAndDropProps(), key: columnProps.key, title: undefined, ref: (el) => {
+                                    if (el) {
+                                        columnRefs.current[column.id] = el;
+                                        column.resizeWidth =
+                                            el.getBoundingClientRect().width;
+                                    }
+                                }, onMouseDown: () => {
+                                    isHeaderDirectClick.current = true;
+                                }, onClick: (e) => {
+                                    // Prevents from triggering sort when resizing and mouse is released in the middle of header
+                                    if (isHeaderDirectClick.current) {
+                                        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                                        isHeaderDirectClick.current = false;
+                                    }
+                                }, tabIndex: showSortButton(column) ? 0 : undefined, onKeyDown: (e) => {
+                                    if (e.key == 'Enter' && showSortButton(column)) {
+                                        column.toggleSortBy();
+                                    }
+                                } },
+                                column.render('Header'),
+                                (showFilterButton(column) ||
+                                    showSortButton(column)) && (React.createElement("div", { className: 'iui-table-header-actions-container' },
+                                    showFilterButton(column) && (React.createElement(FilterToggle, { column: column })),
+                                    showSortButton(column) && (React.createElement("div", { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
+                                        (!column.isSorted && column.sortDescFirst) ? (React.createElement(SvgSortDown, { className: 'iui-table-sort', "aria-hidden": true })) : (React.createElement(SvgSortUp, { className: 'iui-table-sort', "aria-hidden": true })))))),
+                                isResizable &&
+                                    column.isResizerVisible &&
+                                    (index !== headerGroup.headers.length - 1 ||
+                                        columnResizeMode === 'expand') && (React.createElement("div", { ...column.getResizerProps(), className: 'iui-table-resizer' },
+                                    React.createElement("div", { className: 'iui-table-resizer-bar' }))),
+                                enableColumnReordering &&
+                                    !column.disableReordering && (React.createElement("div", { className: 'iui-table-reorder-bar' })),
+                                column.sticky === 'left' &&
+                                    state.sticky.isScrolledToRight && (React.createElement("div", { className: 'iui-table-cell-shadow-right' })),
+                                column.sticky === 'right' &&
+                                    state.sticky.isScrolledToLeft && (React.createElement("div", { className: 'iui-table-cell-shadow-left' }))));
+                        })))));
+            }),
+            React.createElement("div", { ...getTableBodyProps({
+                    className: cx('iui-table-body', {
+                        'iui-zebra-striping': styleType === 'zebra-rows',
+                    }),
+                    style: { outline: 0 },
+                }), ref: bodyRef, onScroll: () => {
                     if (headerRef.current && bodyRef.current) {
                         headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
                         updateStickyState();
                     }
-                }, tabIndex: -1, "aria-multiselectable": (isSelectable && selectionMode === 'multi') || undefined }),
-                data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer, scrollToIndex: scrollToIndex })) : (page.map(function (_, index) { return getPreparedRow(index); })))),
+                }, tabIndex: -1, "aria-multiselectable": (isSelectable && selectionMode === 'multi') || undefined },
+                data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll, { 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(ProgressRadial, { indeterminate: true }))),
                 isLoading && data.length !== 0 && (React.createElement("div", { className: 'iui-table-row' },

package/esm/core/Table/TableCell.js

@@ -1,14 +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);
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -19,11 +8,11 @@ import { getCellStyle, getStickyStyle } from './utils';
 import { SubRowExpander } from './SubRowExpander';
 import { SELECTION_CELL_ID } from './columns';
 import { DefaultCell } from './cells';
-export var TableCell = function (props) {
-    var cell = props.cell, cellIndex = props.cellIndex, isDisabled = props.isDisabled, tableHasSubRows = props.tableHasSubRows, tableInstance = props.tableInstance, expanderCell = props.expanderCell;
-    var hasSubRowExpander = cellIndex ===
-        cell.row.cells.findIndex(function (c) { return c.column.id !== SELECTION_CELL_ID; });
-    var getSubRowStyle = function () {
+export const TableCell = (props) => {
+    const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, } = props;
+    const hasSubRowExpander = cellIndex ===
+        cell.row.cells.findIndex((c) => c.column.id !== SELECTION_CELL_ID);
+    const getSubRowStyle = () => {
         if (!tableHasSubRows || !hasSubRowExpander) {
             return undefined;
         }
@@ -33,19 +22,26 @@ export var TableCell = function (props) {
             paddingLeft: 16 + (cell.row.depth + (cell.row.canExpand ? 0 : 1)) * 35,
         };
     };
-    var cellElementProps = cell.getCellProps({
+    const cellElementProps = cell.getCellProps({
         className: cx('iui-table-cell', cell.column.cellClassName, {
             'iui-table-cell-sticky': !!cell.column.sticky,
         }),
-        style: __assign(__assign(__assign({}, getCellStyle(cell.column, !!tableInstance.state.isTableResizing)), getSubRowStyle()), getStickyStyle(cell.column, tableInstance.visibleColumns)),
+        style: {
+            ...getCellStyle(cell.column, !!tableInstance.state.isTableResizing),
+            ...getSubRowStyle(),
+            ...getStickyStyle(cell.column, tableInstance.visibleColumns),
+        },
     });
-    var cellProps = __assign(__assign({}, tableInstance), { cell: cell, row: cell.row, value: cell.value, column: cell.column });
-    var cellContent = (React.createElement(React.Fragment, null,
+    const cellProps = {
+        ...tableInstance,
+        ...{ cell, row: cell.row, value: cell.value, column: cell.column },
+    };
+    const cellContent = (React.createElement(React.Fragment, null,
         tableHasSubRows && hasSubRowExpander && cell.row.canExpand && (React.createElement(SubRowExpander, { cell: cell, isDisabled: isDisabled, cellProps: cellProps, expanderCell: expanderCell })),
         cell.render('Cell')));
-    var cellRendererProps = {
-        cellElementProps: cellElementProps,
-        cellProps: cellProps,
+    const cellRendererProps = {
+        cellElementProps,
+        cellProps,
         children: (React.createElement(React.Fragment, null,
             cellContent,
             cell.column.sticky === 'left' &&
@@ -53,6 +49,9 @@ export var TableCell = function (props) {
             cell.column.sticky === 'right' &&
                 tableInstance.state.sticky.isScrolledToLeft && (React.createElement("div", { className: 'iui-table-cell-shadow-left' })))),
     };
-    return (React.createElement(React.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer(__assign(__assign({}, cellRendererProps), { isDisabled: function () { return isDisabled; } }))) : (React.createElement(DefaultCell, __assign({}, cellRendererProps, { isDisabled: function () { return isDisabled; } })))));
+    return (React.createElement(React.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer({
+        ...cellRendererProps,
+        isDisabled: () => isDisabled,
+    })) : (React.createElement(DefaultCell, { ...cellRendererProps, isDisabled: () => isDisabled }))));
 };
 export default TableCell;