@itwin/itwinui-react 1.35.0 → 1.36.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.36.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.35.0...v1.36.0) (2022-04-15)
+
+### What's new
+
+* **Table:** Added `ColumnManager` for hiding columns ([#564](https://www.github.com/iTwin/iTwinUI-react/issues/564)) ([71cf927](https://www.github.com/iTwin/iTwinUI-react/commit/71cf9278d1e75dc426f24976a497d40b18da3c87))
+  - `ActionColumn` was added to use with `ColumnManager`. It can be used for fixed width columns (i.e. column with menu).
+* **Table:** Default columns customization ([#599](https://www.github.com/iTwin/iTwinUI-react/issues/599)) ([e665821](https://www.github.com/iTwin/iTwinUI-react/commit/e665821b66972136873797058da6cd4036f4dd2d))
+  - `ExpanderColumn` and `SelectionColumn` were added for custom implementation of expansion and selection.
+
+### Fixes
+
+* **Menu:** Fixed keyboard navigation when `MenuItem` contains selectable children ([#625](https://www.github.com/iTwin/iTwinUI-react/issues/625)) ([082e384](https://www.github.com/iTwin/iTwinUI-react/commit/082e384ed5ccc1fb2ded9ccc69bca06be6e3f29b))
+* **Popover:** Stop propagation of click in `Popover` ([#619](https://www.github.com/iTwin/iTwinUI-react/issues/619)) ([298cbf3](https://www.github.com/iTwin/iTwinUI-react/commit/298cbf3aba050763b481252ba76f5c945b5c2e17))
+
 ## [1.35.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.34.2...v1.35.0) (2022-04-05)
 
 ### What's new

package/cjs/core/ColorPicker/ColorSwatch.d.ts

@@ -17,5 +17,5 @@ export declare type ColorSwatchProps = {
  * <ColorSwatch color='#23450b' onClick={onClick}/>
  * <ColorSwatch color={{ r: 255, g: 255, b: 0 }} onClick={onClick}/>
  */
-export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "aria-disabled" | "role" | "children" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "onFocus" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "isActive"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "aria-disabled" | "role" | "children" | "className" | "onClick" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "onFocus" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "isActive"> & React.RefAttributes<HTMLDivElement>>;
 export default ColorSwatch;

package/cjs/core/Menu/Menu.js

@@ -46,9 +46,14 @@ exports.Menu = react_1.default.forwardRef(function (props, ref) {
     react_1.default.useEffect(function () {
         setFocusedIndex(null);
     }, [children]);
+    var getFocusableNodes = react_1.default.useCallback(function () {
+        var focusableItems = (0, utils_1.getFocusableElements)(menuRef.current);
+        // Filter out focusable elements that are inside each menu item, e.g. checkbox, anchor
+        return focusableItems.filter(function (i) { return !focusableItems.some(function (p) { return p.contains(i.parentElement); }); });
+    }, []);
     react_1.default.useEffect(function () {
         var _a;
-        var items = (0, utils_1.getFocusableElements)(menuRef.current);
+        var items = getFocusableNodes();
         if (focusedIndex != null) {
             (_a = items === null || items === void 0 ? void 0 : items[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
             return;
@@ -57,9 +62,9 @@ exports.Menu = react_1.default.forwardRef(function (props, ref) {
         if (setFocus) {
             setFocusedIndex(selectedIndex > -1 ? selectedIndex : 0);
         }
-    }, [setFocus, focusedIndex]);
+    }, [setFocus, focusedIndex, getFocusableNodes]);
     var onKeyDown = function (event) {
-        var items = (0, utils_1.getFocusableElements)(menuRef.current);
+        var items = getFocusableNodes();
         if (!(items === null || items === void 0 ? void 0 : items.length)) {
             return;
         }

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.

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.isSortable, isSortable = _e === void 0 ? false : _e, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _f = props.intersectionMargin, intersectionMargin = _f === void 0 ? 300 : _f, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _g = props.density, density = _g === void 0 ? 'default' : _g, _h = props.selectSubRows, selectSubRows = _h === void 0 ? true : _h, getSubRows = props.getSubRows, _j = props.selectRowOnClick, selectRowOnClick = _j === void 0 ? true : _j, paginatorRenderer = props.paginatorRenderer, _k = props.pageSize, pageSize = _k === void 0 ? 25 : _k, _l = props.isResizable, isResizable = _l === void 0 ? false : _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", "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 _q = react_1.default.useState(), ownerDocument = _q[0], setOwnerDocument = _q[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,7 +150,15 @@ 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) {
@@ -217,7 +230,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.

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;

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { CellProps, CellRendererProps, Row } from 'react-table';
+export declare const EXPANDER_CELL_ID = "iui-table-expander";
+/**
+ * Expander column that adds sub-content expander column to the Table.
+ * It is recommended to use it as the first column or after selection column.
+ * @example
+ * const subComponent = useCallback(
+ *   (row: Row) => (
+ *     <div style={{ padding: 16 }}>
+ *       <Leading>Extra information</Leading>
+ *       <pre>
+ *         <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
+ *       </pre>
+ *     </div>
+ *   ),
+ *   [],
+ * );
+ * const isExpanderDisabled = useCallback((rowData) => {
+ *   return rowData.name === 'Name2';
+ * }, []);
+ * const columns = useMemo(() => [
+ *   Header: 'Table',
+ *   columns: [
+ *     ExpanderColumn({ subComponent, isDisabled: isExpanderDisabled }),
+ *     // Rest of your columns
+ *   ],
+ * ], [isExpanderDisabled, subComponent]);
+ */
+export declare const ExpanderColumn: <T extends Record<string, unknown>>(props?: {
+    /** Function that returns expanded content. If row doesn't have it, then should return `false`/`null`. */
+    subComponent?: ((row: Row<T>) => React.ReactNode) | undefined;
+    /** Function that returns whether expander is disabled */
+    isDisabled?: ((rowData: T) => boolean) | undefined;
+}) => {
+    id: string;
+    disableResizing: boolean;
+    disableGroupBy: boolean;
+    disableReordering: boolean;
+    minWidth: number;
+    width: number;
+    maxWidth: number;
+    columnClassName: string;
+    cellClassName: string;
+    Cell: (props: CellProps<T, any>) => JSX.Element | null;
+    cellRenderer: (props: CellRendererProps<T>) => JSX.Element;
+};

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

@@ -0,0 +1,81 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpanderColumn = exports.EXPANDER_CELL_ID = 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 ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
+var Buttons_1 = require("../../Buttons");
+var cells_1 = require("../cells");
+exports.EXPANDER_CELL_ID = 'iui-table-expander';
+/**
+ * Expander column that adds sub-content expander column to the Table.
+ * It is recommended to use it as the first column or after selection column.
+ * @example
+ * const subComponent = useCallback(
+ *   (row: Row) => (
+ *     <div style={{ padding: 16 }}>
+ *       <Leading>Extra information</Leading>
+ *       <pre>
+ *         <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
+ *       </pre>
+ *     </div>
+ *   ),
+ *   [],
+ * );
+ * const isExpanderDisabled = useCallback((rowData) => {
+ *   return rowData.name === 'Name2';
+ * }, []);
+ * const columns = useMemo(() => [
+ *   Header: 'Table',
+ *   columns: [
+ *     ExpanderColumn({ subComponent, isDisabled: isExpanderDisabled }),
+ *     // Rest of your columns
+ *   ],
+ * ], [isExpanderDisabled, subComponent]);
+ */
+var ExpanderColumn = function (props) {
+    if (props === void 0) { props = {}; }
+    var subComponent = props.subComponent, isDisabled = props.isDisabled;
+    return {
+        id: exports.EXPANDER_CELL_ID,
+        disableResizing: true,
+        disableGroupBy: true,
+        disableReordering: true,
+        minWidth: 48,
+        width: 48,
+        maxWidth: 48,
+        columnClassName: 'iui-slot',
+        cellClassName: 'iui-slot',
+        Cell: function (props) {
+            var row = props.row;
+            if (!(subComponent === null || subComponent === void 0 ? void 0 : subComponent(row))) {
+                return null;
+            }
+            else {
+                return (react_1.default.createElement(Buttons_1.IconButton, { className: 'iui-row-expander', styleType: 'borderless', size: 'small', onClick: function (e) {
+                        e.stopPropagation();
+                        row.toggleRowExpanded();
+                    }, disabled: isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(props.row.original) }, react_1.default.createElement(ChevronRight_1.default, null)));
+            }
+        },
+        cellRenderer: function (props) { return (react_1.default.createElement(cells_1.DefaultCell, __assign({}, props, { isDisabled: function (rowData) { return !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)); } }))); },
+    };
+};
+exports.ExpanderColumn = ExpanderColumn;

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

@@ -0,0 +1,3 @@
+export { ActionColumn } from './actionColumn';
+export { SELECTION_CELL_ID, SelectionColumn } from './selectionColumn';
+export { EXPANDER_CELL_ID, ExpanderColumn } from './expanderColumn';

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpanderColumn = exports.EXPANDER_CELL_ID = exports.SelectionColumn = exports.SELECTION_CELL_ID = 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 actionColumn_1 = require("./actionColumn");
+Object.defineProperty(exports, "ActionColumn", { enumerable: true, get: function () { return actionColumn_1.ActionColumn; } });
+var selectionColumn_1 = require("./selectionColumn");
+Object.defineProperty(exports, "SELECTION_CELL_ID", { enumerable: true, get: function () { return selectionColumn_1.SELECTION_CELL_ID; } });
+Object.defineProperty(exports, "SelectionColumn", { enumerable: true, get: function () { return selectionColumn_1.SelectionColumn; } });
+var expanderColumn_1 = require("./expanderColumn");
+Object.defineProperty(exports, "EXPANDER_CELL_ID", { enumerable: true, get: function () { return expanderColumn_1.EXPANDER_CELL_ID; } });
+Object.defineProperty(exports, "ExpanderColumn", { enumerable: true, get: function () { return expanderColumn_1.ExpanderColumn; } });