@itwin/itwinui-react 1.34.2 → 1.37.0

package/cjs/core/SkipToContentLink/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkipToContentLink = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var SkipToContentLink_1 = require("./SkipToContentLink");
+Object.defineProperty(exports, "SkipToContentLink", { enumerable: true, get: function () { return SkipToContentLink_1.SkipToContentLink; } });
+exports.default = './SkipToContentLink';

package/cjs/core/Surface/Surface.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/surface.css';
+export declare type SurfaceProps = {
+    /**
+     * Sets the elevation of the surface
+     * @default 0
+     */
+    elevation?: 0 | 1 | 2 | 3 | 4 | 5;
+    /**
+     * Content in the surface.
+     */
+    children: React.ReactNode;
+} & Omit<CommonProps, 'title'>;
+/**
+ * The Surface container allows content to appear elevated through the use of a drop shadow
+ * @example
+ * <Surface>Surface Content</Surface>
+ * <Surface elevation={2}>Surface Content</Surface>
+ */
+export declare const Surface: React.ForwardRefExoticComponent<{
+    /**
+     * Sets the elevation of the surface
+     * @default 0
+     */
+    elevation?: 0 | 1 | 2 | 3 | 4 | 5 | undefined;
+    /**
+     * Content in the surface.
+     */
+    children: React.ReactNode;
+} & Omit<CommonProps, "title"> & React.RefAttributes<HTMLDivElement>>;
+export default Surface;

package/cjs/core/Surface/Surface.js

@@ -0,0 +1,70 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Surface = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var utils_1 = require("../utils");
+require("@itwin/itwinui-css/css/surface.css");
+/**
+ * Helper function that returns one of the preset surface elevation values.
+ */
+var getSurfaceElevationValue = function (elevation) {
+    switch (elevation) {
+        case 1:
+            return '0 1px 5px rgba(0, 0, 0, 0.25)';
+        case 2:
+            return '0 1px 10px rgba(0, 0, 0, 0.25)';
+        case 3:
+            return '0 3px 14px rgba(0, 0, 0, 0.25)';
+        case 4:
+            return '0 6px 30px rgba(0, 0, 0, 0.25)';
+        case 5:
+            return '0 9px 46px rgba(0, 0, 0, 0.25)';
+        default:
+            return 'none';
+    }
+};
+/**
+ * The Surface container allows content to appear elevated through the use of a drop shadow
+ * @example
+ * <Surface>Surface Content</Surface>
+ * <Surface elevation={2}>Surface Content</Surface>
+ */
+exports.Surface = react_1.default.forwardRef(function (props, ref) {
+    var _a, _b, _c;
+    var _d = props.elevation, elevation = _d === void 0 ? 0 : _d, className = props.className, style = props.style, children = props.children, rest = __rest(props, ["elevation", "className", "style", "children"]);
+    (0, utils_1.useTheme)();
+    var _style = ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-surface-elevation: " + getSurfaceElevationValue(elevation)))
+        ? __assign({ '--iui-surface-elevation': getSurfaceElevationValue(elevation) }, style) : __assign({ boxShadow: getSurfaceElevationValue(elevation) }, style);
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-surface', className), style: _style, ref: ref }, rest), children));
+});
+exports.default = exports.Surface;

package/cjs/core/Surface/index.d.ts

@@ -0,0 +1,4 @@
+export { Surface } from './Surface';
+export type { SurfaceProps } from './Surface';
+declare const _default: "./Surface";
+export default _default;

package/cjs/core/Surface/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Surface = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var Surface_1 = require("./Surface");
+Object.defineProperty(exports, "Surface", { enumerable: true, get: function () { return Surface_1.Surface; } });
+exports.default = './Surface';

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

@@ -3,6 +3,7 @@ import { CellProps, TableOptions, Row, TableState } from 'react-table';
 import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/table.css';
 import { TableFilterValue } from './filters';
+export declare const tableResizeStartAction = "tableResizeStart";
 export declare type TablePaginatorRendererProps = {
     /**
      * The zero-based index of the current page.
@@ -63,6 +64,12 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
      * Handler for when a row is clicked. Must be memoized.
      */
     onRowClick?: (event: React.MouseEvent, row: Row<T>) => void;
+    /**
+     * Modify the selection mode of the table.
+     * The column with checkboxes will not be present with 'single' selection mode.
+     * @default 'multi'
+     */
+    selectionMode?: 'multi' | 'single';
     /**
      * Flag whether table columns can be sortable.
      * @default false

package/cjs/core/Table/Table.js

@@ -25,7 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Table = void 0;
+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.
@@ -44,11 +44,10 @@ var filters_1 = require("./filters");
 var customFilterFunctions_1 = require("./filters/customFilterFunctions");
 var hooks_1 = require("./hooks");
 var actionHandlers_1 = require("./actionHandlers");
-var selectHandler_1 = require("./actionHandlers/selectHandler");
-var resizeHandler_1 = require("./actionHandlers/resizeHandler");
 var VirtualScroll_1 = __importDefault(require("../utils/components/VirtualScroll"));
+var columns_1 = require("./columns");
 var singleRowSelectedAction = 'singleRowSelected';
-var tableResizeStartAction = 'tableResizeStart';
+exports.tableResizeStartAction = 'tableResizeStart';
 var tableResizeEndAction = 'tableResizeEnd';
 /**
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).
@@ -94,9 +93,10 @@ var tableResizeEndAction = 'tableResizeEnd';
  */
 var Table = function (props) {
     var _a;
-    var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _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, 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.styleType, styleType = _l === void 0 ? 'default' : _l, _m = props.enableVirtualization, enableVirtualization = _m === void 0 ? false : _m, _o = props.enableColumnReordering, enableColumnReordering = _o === void 0 ? false : _o, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
+    var _b;
+    var data = props.data, columns = props.columns, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _d = props.isSelectable, isSelectable = _d === void 0 ? false : _d, onSelect = props.onSelect, onRowClick = props.onRowClick, _e = props.selectionMode, selectionMode = _e === void 0 ? 'multi' : _e, _f = props.isSortable, isSortable = _f === void 0 ? false : _f, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _g = props.intersectionMargin, intersectionMargin = _g === void 0 ? 300 : _g, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _h = props.density, density = _h === void 0 ? 'default' : _h, _j = props.selectSubRows, selectSubRows = _j === void 0 ? true : _j, getSubRows = props.getSubRows, _k = props.selectRowOnClick, selectRowOnClick = _k === void 0 ? true : _k, paginatorRenderer = props.paginatorRenderer, _l = props.pageSize, pageSize = _l === void 0 ? 25 : _l, _m = props.isResizable, isResizable = _m === void 0 ? false : _m, _o = props.styleType, styleType = _o === void 0 ? 'default' : _o, _p = props.enableVirtualization, enableVirtualization = _p === void 0 ? false : _p, _q = props.enableColumnReordering, enableColumnReordering = _q === void 0 ? false : _q, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "selectionMode", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
     (0, utils_1.useTheme)();
-    var _p = react_1.default.useState(), ownerDocument = _p[0], setOwnerDocument = _p[1];
+    var _r = react_1.default.useState(), ownerDocument = _r[0], setOwnerDocument = _r[1];
     var defaultColumn = react_1.default.useMemo(function () { return ({
         maxWidth: 0,
         minWidth: 0,
@@ -109,6 +109,7 @@ var Table = function (props) {
         onBottomReachedRef.current = onBottomReached;
         onRowInViewportRef.current = onRowInViewport;
     }, [onBottomReached, onRowInViewport]);
+    var hasManualSelectionColumn = (_b = columns[0]) === null || _b === void 0 ? void 0 : _b.columns.some(function (column) { return column.id === columns_1.SELECTION_CELL_ID; });
     var tableStateReducer = react_1.default.useCallback(function (newState, action, previousState, instance) {
         switch (action.type) {
             case react_table_1.actions.toggleSortBy:
@@ -122,21 +123,25 @@ var Table = function (props) {
                 (0, actionHandlers_1.onExpandHandler)(newState, instance, onExpand);
                 break;
             case singleRowSelectedAction: {
-                newState = (0, selectHandler_1.onSingleSelectHandler)(newState, action, instance, onSelect, isRowDisabled);
+                newState = (0, actionHandlers_1.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 react_table_1.actions.toggleRowSelected:
             case react_table_1.actions.toggleAllRowsSelected:
             case react_table_1.actions.toggleAllPageRowsSelected: {
-                (0, actionHandlers_1.onSelectHandler)(newState, instance, onSelect, isRowDisabled);
+                (0, actionHandlers_1.onSelectHandler)(newState, instance, onSelect, 
+                // If it has manual selection column, then we can't check whether row is disabled
+                hasManualSelectionColumn ? undefined : isRowDisabled);
                 break;
             }
-            case tableResizeStartAction: {
-                newState = (0, resizeHandler_1.onTableResizeStart)(newState);
+            case exports.tableResizeStartAction: {
+                newState = (0, actionHandlers_1.onTableResizeStart)(newState);
                 break;
             }
             case tableResizeEndAction: {
-                newState = (0, resizeHandler_1.onTableResizeEnd)(newState, action);
+                newState = (0, actionHandlers_1.onTableResizeEnd)(newState, action);
                 break;
             }
             default:
@@ -145,14 +150,22 @@ var Table = function (props) {
         return stateReducer
             ? stateReducer(newState, action, previousState, instance)
             : newState;
-    }, [isRowDisabled, onExpand, onFilter, onSelect, onSort, stateReducer]);
+    }, [
+        hasManualSelectionColumn,
+        isRowDisabled,
+        onExpand,
+        onFilter,
+        onSelect,
+        onSort,
+        stateReducer,
+    ]);
     var filterTypes = react_1.default.useMemo(function () { return (__assign(__assign({}, customFilterFunctions_1.customFilterFunctions), filterFunctions)); }, [filterFunctions]);
     var hasAnySubRows = react_1.default.useMemo(function () {
         return data.some(function (item, index) {
             return getSubRows ? getSubRows(item, index) : item.subRows;
         });
     }, [data, getSubRows]);
-    var instance = (0, react_table_1.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) }), react_table_1.useFlexLayout, (0, hooks_1.useResizeColumns)(ownerDocument), react_table_1.useFilters, (0, hooks_1.useSubRowFiltering)(hasAnySubRows), 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, isRowDisabled), react_table_1.useColumnOrder, (0, hooks_1.useColumnDragAndDrop)(enableColumnReordering));
+    var instance = (0, react_table_1.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) }), react_table_1.useFlexLayout, (0, hooks_1.useResizeColumns)(ownerDocument), react_table_1.useFilters, (0, hooks_1.useSubRowFiltering)(hasAnySubRows), 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), react_table_1.useColumnOrder, (0, hooks_1.useColumnDragAndDrop)(enableColumnReordering));
     var getTableProps = instance.getTableProps, rows = instance.rows, headerGroups = instance.headerGroups, getTableBodyProps = instance.getTableBodyProps, prepareRow = instance.prepareRow, state = instance.state, allColumns = instance.allColumns, filteredFlatRows = instance.filteredFlatRows, dispatch = instance.dispatch, page = instance.page, gotoPage = instance.gotoPage, setPageSize = instance.setPageSize, flatHeaders = instance.flatHeaders;
     var ariaDataAttributes = Object.entries(rest).reduce(function (result, _a) {
         var key = _a[0], value = _a[1];
@@ -164,8 +177,14 @@ var Table = function (props) {
     var areFiltersSet = allColumns.some(function (column) { return !!column.filterValue; });
     var onRowClickHandler = react_1.default.useCallback(function (event, row) {
         var isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
-        if (isSelectable && !isDisabled && selectRowOnClick) {
-            if (!row.isSelected && !event.ctrlKey) {
+        if (!isDisabled) {
+            onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row);
+        }
+        if (isSelectable &&
+            !isDisabled &&
+            selectRowOnClick &&
+            !event.isDefaultPrevented()) {
+            if (!row.isSelected && (selectionMode === 'single' || !event.ctrlKey)) {
                 dispatch({
                     type: singleRowSelectedAction,
                     id: row.id,
@@ -175,10 +194,14 @@ var Table = function (props) {
                 row.toggleRowSelected(!row.isSelected);
             }
         }
-        if (!isDisabled) {
-            onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row);
-        }
-    }, [isRowDisabled, isSelectable, selectRowOnClick, dispatch, onRowClick]);
+    }, [
+        isRowDisabled,
+        isSelectable,
+        selectRowOnClick,
+        selectionMode,
+        dispatch,
+        onRowClick,
+    ]);
     react_1.default.useEffect(function () {
         setPageSize(pageSize);
     }, [pageSize, setPageSize]);
@@ -217,7 +240,7 @@ var Table = function (props) {
         if (Object.keys(state.columnResizing.columnWidths).length === 0) {
             return;
         }
-        dispatch({ type: tableResizeStartAction });
+        dispatch({ type: exports.tableResizeStartAction });
     }, [dispatch, state.columnResizing.columnWidths, flatHeaders]);
     var resizeRef = (0, utils_1.useResizeObserver)(onTableResize)[0];
     // Flexbox handles columns resize so we take new column widths before browser repaints.
@@ -234,11 +257,12 @@ var Table = function (props) {
     });
     var headerRef = react_1.default.useRef(null);
     var bodyRef = react_1.default.useRef(null);
-    var getPreparedRow = react_1.default.useCallback(function (row) {
+    var getPreparedRow = react_1.default.useCallback(function (index) {
+        var row = page[index];
         prepareRow(row);
-        return (react_1.default.createElement(TableRowMemoized_1.TableRowMemoized, { row: row, rowProps: rowProps, isLast: row.index === data.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 }));
+        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 }));
     }, [
-        data.length,
+        page,
         expanderCell,
         hasAnySubRows,
         instance,
@@ -250,7 +274,7 @@ var Table = function (props) {
         state,
         subComponent,
     ]);
-    var virtualizedItemRenderer = react_1.default.useCallback(function (index) { return getPreparedRow(page[index]); }, [getPreparedRow, page]);
+    var virtualizedItemRenderer = react_1.default.useCallback(function (index) { return getPreparedRow(index); }, [getPreparedRow]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", __assign({ ref: function (element) {
                 setOwnerDocument(element === null || element === void 0 ? void 0 : element.ownerDocument);
@@ -274,8 +298,8 @@ var Table = function (props) {
                             }
                         } }),
                         column.render('Header'),
-                        !isLoading && (data.length != 0 || areFiltersSet) && (react_1.default.createElement(filters_1.FilterToggle, { column: column, ownerDocument: ownerDocument })),
-                        !isLoading && data.length != 0 && column.canSort && (react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (react_1.default.createElement(SortUp_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (react_1.default.createElement(SortDown_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
+                        (data.length !== 0 || areFiltersSet) && (react_1.default.createElement(filters_1.FilterToggle, { column: column, ownerDocument: ownerDocument })),
+                        data.length !== 0 && column.canSort && (react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (react_1.default.createElement(SortUp_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (react_1.default.createElement(SortDown_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
                         isResizable &&
                             column.isResizerVisible &&
                             index !== headerGroup.headers.length - 1 && (react_1.default.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),
@@ -293,7 +317,7 @@ var Table = function (props) {
                         headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
                     }
                 }, tabIndex: -1 }),
-                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 })) : (page.map(function (row) { return getPreparedRow(row); })))),
+                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 })) : (page.map(function (_, index) { return 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-row' },

package/cjs/core/Table/TableCell.js

@@ -23,12 +23,12 @@ var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("./utils");
 var SubRowExpander_1 = require("./SubRowExpander");
-var hooks_1 = require("./hooks");
+var columns_1 = require("./columns");
 var cells_1 = require("./cells");
 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 !== hooks_1.SELECTION_CELL_ID; });
+        cell.row.cells.findIndex(function (c) { return c.column.id !== columns_1.SELECTION_CELL_ID; });
     var getSubRowStyle = function () {
         if (!tableHasSubRows || !hasSubRowExpander) {
             return undefined;
@@ -52,7 +52,7 @@ var TableCell = function (props) {
         cellProps: cellProps,
         children: cellContent,
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer(cellRendererProps)) : (react_1.default.createElement(cells_1.DefaultCell, __assign({}, cellRendererProps)))));
+    return (react_1.default.createElement(react_1.default.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer(__assign(__assign({}, cellRendererProps), { isDisabled: function () { return isDisabled; } }))) : (react_1.default.createElement(cells_1.DefaultCell, __assign({}, cellRendererProps, { isDisabled: function () { return isDisabled; } })))));
 };
 exports.TableCell = TableCell;
 exports.default = exports.TableCell;

package/cjs/core/Table/TableRowMemoized.js

@@ -57,7 +57,9 @@ var TableRow = function (props) {
             return (react_1.default.createElement(TableCell_1.TableCell, { key: cell.getCellProps().key, cell: cell, cellIndex: index, isDisabled: isDisabled, tableHasSubRows: tableHasSubRows, tableInstance: tableInstance, expanderCell: expanderCell }));
         })),
         subComponent && (react_1.default.createElement(utils_1.WithCSSTransition, { in: row.isExpanded },
-            react_1.default.createElement("div", { className: 'iui-row iui-expanded-content' }, subComponent(row))))));
+            react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-row', 'iui-expanded-content', {
+                    'iui-disabled': isDisabled,
+                }) }, subComponent(row))))));
 };
 exports.TableRow = TableRow;
 var hasAnySelectedSubRow = function (row, selectedRowIds) {
@@ -69,14 +71,17 @@ var hasAnySelectedSubRow = function (row, selectedRowIds) {
     });
 };
 exports.TableRowMemoized = react_1.default.memo(exports.TableRow, function (prevProp, nextProp) {
-    var _a, _b, _c, _d;
+    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; })) &&
         prevProp.onRowInViewport === nextProp.onRowInViewport &&
         prevProp.onBottomReached === nextProp.onBottomReached &&
         prevProp.onClick === nextProp.onClick &&
         prevProp.row.original === nextProp.row.original &&
-        ((_a = prevProp.state.selectedRowIds) === null || _a === void 0 ? void 0 : _a[prevProp.row.id]) ===
-            ((_b = nextProp.state.selectedRowIds) === null || _b === void 0 ? void 0 : _b[nextProp.row.id]) &&
+        ((_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);
@@ -84,8 +89,8 @@ exports.TableRowMemoized = react_1.default.memo(exports.TableRow, function (prev
             nextProp.row.subRows.some(function (subRow) {
                 return hasAnySelectedSubRow(subRow, nextProp.state.selectedRowIds);
             }) &&
-        ((_c = prevProp.state.expanded) === null || _c === void 0 ? void 0 : _c[prevProp.row.id]) ===
-            ((_d = nextProp.state.expanded) === null || _d === void 0 ? void 0 : _d[nextProp.row.id]) &&
+        ((_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.isDisabled === nextProp.isDisabled &&
@@ -94,5 +99,5 @@ exports.TableRowMemoized = react_1.default.memo(exports.TableRow, function (prev
         prevProp.tableHasSubRows === nextProp.tableHasSubRows &&
         prevProp.state.columnOrder === nextProp.state.columnOrder &&
         !nextProp.state.columnResizing.isResizingColumn &&
-        !nextProp.state.isTableResizing;
+        prevProp.state.isTableResizing === nextProp.state.isTableResizing;
 });

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

@@ -1,3 +1,4 @@
 export { onExpandHandler } from './expandHandler';
 export { onFilterHandler } from './filterHandler';
-export { onSelectHandler } from './selectHandler';
+export { onSelectHandler, onSingleSelectHandler } from './selectHandler';
+export { onTableResizeStart, onTableResizeEnd } from './resizeHandler';

package/cjs/core/Table/actionHandlers/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.onSelectHandler = exports.onFilterHandler = exports.onExpandHandler = void 0;
+exports.onTableResizeEnd = exports.onTableResizeStart = exports.onSingleSelectHandler = exports.onSelectHandler = exports.onFilterHandler = exports.onExpandHandler = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -11,3 +11,7 @@ var filterHandler_1 = require("./filterHandler");
 Object.defineProperty(exports, "onFilterHandler", { enumerable: true, get: function () { return filterHandler_1.onFilterHandler; } });
 var selectHandler_1 = require("./selectHandler");
 Object.defineProperty(exports, "onSelectHandler", { enumerable: true, get: function () { return selectHandler_1.onSelectHandler; } });
+Object.defineProperty(exports, "onSingleSelectHandler", { enumerable: true, get: function () { return selectHandler_1.onSingleSelectHandler; } });
+var resizeHandler_1 = require("./resizeHandler");
+Object.defineProperty(exports, "onTableResizeStart", { enumerable: true, get: function () { return resizeHandler_1.onTableResizeStart; } });
+Object.defineProperty(exports, "onTableResizeEnd", { enumerable: true, get: function () { return resizeHandler_1.onTableResizeEnd; } });

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

@@ -12,5 +12,5 @@ export declare type DefaultCellProps<T extends Record<string, unknown>> = CellRe
  *   cellRenderer: (props) => <DefaultCell {...props} />,
  * }
  */
-export declare const DefaultCell: <T extends Record<string, unknown>>(props: CellRendererProps<T>) => JSX.Element;
+export declare const DefaultCell: <T extends Record<string, unknown>>(props: DefaultCellProps<T>) => JSX.Element;
 export default DefaultCell;

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

@@ -31,6 +31,7 @@ exports.DefaultCell = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.
@@ -45,8 +46,10 @@ var react_1 = __importDefault(require("react"));
 var DefaultCell = function (props) {
     // Omitting `cellProps`
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var cellElementProps = props.cellElementProps, children = props.children, cellProps = props.cellProps, rest = __rest(props, ["cellElementProps", "children", "cellProps"]);
-    return (react_1.default.createElement("div", __assign({}, cellElementProps, rest), children));
+    var _a = props.cellElementProps, cellElementClassName = _a.className, cellElementStyle = _a.style, cellElementProps = __rest(_a, ["className", "style"]), children = props.children, cellProps = props.cellProps, isDisabled = props.isDisabled, className = props.className, style = props.style, rest = __rest(props, ["cellElementProps", "children", "cellProps", "isDisabled", "className", "style"]);
+    return (react_1.default.createElement("div", __assign({}, cellElementProps, rest, { className: (0, classnames_1.default)(cellElementClassName, className, {
+            'iui-disabled': isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(cellProps.row.original),
+        }), style: __assign(__assign({}, cellElementStyle), style) }), children));
 };
 exports.DefaultCell = DefaultCell;
 exports.default = exports.DefaultCell;

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

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { HeaderProps } from 'react-table';
+/**
+ * Action column that adds column manager to the Table header.
+ * It is recommended to add this column to the end of the Table
+ * and to override its `Cell` prop with your row actions menu.
+ * @example
+ * {
+ *   ...ActionColumn({ columnManager: true }),
+ *   Cell: () => (
+ *     <DropdownMenu menuItems={menuItems}>
+ *       <IconButton
+ *         styleType='borderless'
+ *         onClick={(e) => e.stopPropagation()}
+ *       >
+ *         <SvgMore />
+ *       </IconButton>
+ *     </DropdownMenu>
+ *   ),
+ * },
+ */
+export declare const ActionColumn: <T extends Record<string, unknown>>({ columnManager, }?: {
+    columnManager?: boolean | undefined;
+}) => {
+    id: string;
+    disableResizing: boolean;
+    disableGroupBy: boolean;
+    minWidth: number;
+    width: number;
+    maxWidth: number;
+    columnClassName: string;
+    cellClassName: string;
+    disableReordering: boolean;
+    Header: ({ allColumns, dispatch, state }: HeaderProps<T>) => JSX.Element | null;
+};

package/cjs/core/Table/columns/actionColumn.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionColumn = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var Checkbox_1 = require("../../Checkbox");
+var ColumnManager_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ColumnManager"));
+var DropdownMenu_1 = require("../../DropdownMenu");
+var IconButton_1 = require("../../Buttons/IconButton");
+var Menu_1 = require("../../Menu");
+var Table_1 = require("../Table");
+var selectionColumn_1 = require("./selectionColumn");
+var expanderColumn_1 = require("./expanderColumn");
+var ACTION_CELL_ID = 'iui-table-action';
+/**
+ * Action column that adds column manager to the Table header.
+ * It is recommended to add this column to the end of the Table
+ * and to override its `Cell` prop with your row actions menu.
+ * @example
+ * {
+ *   ...ActionColumn({ columnManager: true }),
+ *   Cell: () => (
+ *     <DropdownMenu menuItems={menuItems}>
+ *       <IconButton
+ *         styleType='borderless'
+ *         onClick={(e) => e.stopPropagation()}
+ *       >
+ *         <SvgMore />
+ *       </IconButton>
+ *     </DropdownMenu>
+ *   ),
+ * },
+ */
+var ActionColumn = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.columnManager, columnManager = _c === void 0 ? false : _c;
+    return {
+        id: ACTION_CELL_ID,
+        disableResizing: true,
+        disableGroupBy: true,
+        minWidth: 48,
+        width: 48,
+        maxWidth: 48,
+        columnClassName: 'iui-slot',
+        cellClassName: 'iui-slot',
+        disableReordering: true,
+        Header: function (_a) {
+            var allColumns = _a.allColumns, dispatch = _a.dispatch, state = _a.state;
+            var _b = react_1.default.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+            if (!columnManager) {
+                return null;
+            }
+            var defaultColumnIds = [
+                selectionColumn_1.SELECTION_CELL_ID,
+                expanderColumn_1.EXPANDER_CELL_ID,
+                ACTION_CELL_ID,
+            ];
+            var headerCheckBoxes = function () {
+                return allColumns
+                    //Filters out any default columns made such as selection and expansion
+                    .filter(function (_a) {
+                    var id = _a.id;
+                    return !defaultColumnIds.includes(id);
+                })
+                    .map(function (column) {
+                    var checked = column.getToggleHiddenProps().checked;
+                    var onClick = function () {
+                        column.toggleHidden(checked);
+                        // If no column was resized then leave table resize handling to the flexbox
+                        if (Object.keys(state.columnResizing.columnWidths).length === 0) {
+                            return;
+                        }
+                        // Triggers an update to resize the widths of all visible columns
+                        dispatch({ type: Table_1.tableResizeStartAction });
+                    };
+                    return (react_1.default.createElement(Menu_1.MenuItem, { key: column.id, icon: react_1.default.createElement(Checkbox_1.Checkbox, { checked: checked, disabled: column.disableToggleVisibility, onClick: function (e) { return e.stopPropagation(); }, onChange: onClick, "aria-labelledby": "iui-column-" + column.id }), onClick: onClick, disabled: column.disableToggleVisibility },
+                        react_1.default.createElement("div", { id: "iui-column-" + column.id }, column.render('Header'))));
+                });
+            };
+            return (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { menuItems: headerCheckBoxes, onHide: function () { return setIsOpen(false); }, onShow: function () { return setIsOpen(true); } },
+                react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', isActive: isOpen },
+                    react_1.default.createElement(ColumnManager_1.default, null))));
+        },
+    };
+};
+exports.ActionColumn = ActionColumn;