@itwin/itwinui-react 1.35.0 → 1.37.1

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; } });

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

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { CellProps, CellRendererProps, HeaderProps } from 'react-table';
+export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
+/**
+ * Selection column that adds selection checkbox column to the Table.
+ * It is recommended to use it as the first column.
+ * @example
+ * const isCheckboxDisabled = useCallback((rowData) => {
+ *   return rowData.name === 'Name1';
+ * }, []);
+ * const columns = useMemo(() => [
+ *   Header: 'Table',
+ *   columns: [
+ *     SelectionColumn({ isDisabled: isCheckboxDisabled }),
+ *     // Rest of your columns
+ *    ],
+ * ], [isCheckboxDisabled]);
+ */
+export declare const SelectionColumn: <T extends Record<string, unknown>>(props?: {
+    /** Function that returns whether row checkbox should be disabled. */
+    isDisabled?: ((rowData: T) => boolean) | undefined;
+}) => {
+    id: string;
+    disableResizing: boolean;
+    disableGroupBy: boolean;
+    disableReordering: boolean;
+    minWidth: number;
+    width: number;
+    maxWidth: number;
+    columnClassName: string;
+    cellClassName: string;
+    Header: ({ getToggleAllRowsSelectedProps, rows, initialRows, state, }: HeaderProps<T>) => JSX.Element;
+    Cell: ({ row }: CellProps<T, any>) => JSX.Element;
+    cellRenderer: (props: CellRendererProps<T>) => JSX.Element;
+};

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

@@ -0,0 +1,67 @@
+"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.SelectionColumn = exports.SELECTION_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 Checkbox_1 = require("../../Checkbox");
+var cells_1 = require("../cells");
+exports.SELECTION_CELL_ID = 'iui-table-checkbox-selector';
+/**
+ * Selection column that adds selection checkbox column to the Table.
+ * It is recommended to use it as the first column.
+ * @example
+ * const isCheckboxDisabled = useCallback((rowData) => {
+ *   return rowData.name === 'Name1';
+ * }, []);
+ * const columns = useMemo(() => [
+ *   Header: 'Table',
+ *   columns: [
+ *     SelectionColumn({ isDisabled: isCheckboxDisabled }),
+ *     // Rest of your columns
+ *    ],
+ * ], [isCheckboxDisabled]);
+ */
+var SelectionColumn = function (props) {
+    if (props === void 0) { props = {}; }
+    var isDisabled = props.isDisabled;
+    return {
+        id: exports.SELECTION_CELL_ID,
+        disableResizing: true,
+        disableGroupBy: true,
+        disableReordering: true,
+        minWidth: 48,
+        width: 48,
+        maxWidth: 48,
+        columnClassName: 'iui-slot',
+        cellClassName: 'iui-slot',
+        Header: function (_a) {
+            var getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, rows = _a.rows, initialRows = _a.initialRows, state = _a.state;
+            var disabled = rows.every(function (row) { return isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original); });
+            var checked = initialRows.every(function (row) { return state.selectedRowIds[row.id] || (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original)); });
+            return (react_1.default.createElement(Checkbox_1.Checkbox, __assign({}, getToggleAllRowsSelectedProps(), { style: {}, checked: checked && !disabled, indeterminate: !checked && Object.keys(state.selectedRowIds).length > 0, disabled: disabled })));
+        },
+        Cell: function (_a) {
+            var row = _a.row;
+            return (react_1.default.createElement(Checkbox_1.Checkbox, __assign({}, row.getToggleRowSelectedProps(), { style: {}, disabled: isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original), onClick: function (e) { return e.stopPropagation(); } })));
+        },
+        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.SelectionColumn = SelectionColumn;

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

@@ -1,5 +1,5 @@
-export { EXPANDER_CELL_ID, useExpanderCell } from './useExpanderCell';
-export { SELECTION_CELL_ID, useSelectionCell } from './useSelectionCell';
+export { useExpanderCell } from './useExpanderCell';
+export { useSelectionCell } from './useSelectionCell';
 export { useSubRowFiltering } from './useSubRowFiltering';
 export { useSubRowSelection } from './useSubRowSelection';
 export { useResizeColumns } from './useResizeColumns';

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

@@ -1,15 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useColumnDragAndDrop = exports.useResizeColumns = exports.useSubRowSelection = exports.useSubRowFiltering = exports.useSelectionCell = exports.SELECTION_CELL_ID = exports.useExpanderCell = exports.EXPANDER_CELL_ID = void 0;
+exports.useColumnDragAndDrop = exports.useResizeColumns = exports.useSubRowSelection = exports.useSubRowFiltering = exports.useSelectionCell = exports.useExpanderCell = 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 useExpanderCell_1 = require("./useExpanderCell");
-Object.defineProperty(exports, "EXPANDER_CELL_ID", { enumerable: true, get: function () { return useExpanderCell_1.EXPANDER_CELL_ID; } });
 Object.defineProperty(exports, "useExpanderCell", { enumerable: true, get: function () { return useExpanderCell_1.useExpanderCell; } });
 var useSelectionCell_1 = require("./useSelectionCell");
-Object.defineProperty(exports, "SELECTION_CELL_ID", { enumerable: true, get: function () { return useSelectionCell_1.SELECTION_CELL_ID; } });
 Object.defineProperty(exports, "useSelectionCell", { enumerable: true, get: function () { return useSelectionCell_1.useSelectionCell; } });
 var useSubRowFiltering_1 = require("./useSubRowFiltering");
 Object.defineProperty(exports, "useSubRowFiltering", { enumerable: true, get: function () { return useSubRowFiltering_1.useSubRowFiltering; } });

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

@@ -1,4 +1,3 @@
 import React from 'react';
 import { CellProps, Hooks, Row } from 'react-table';
-export declare const EXPANDER_CELL_ID = "iui-table-expander";
 export declare const useExpanderCell: <T extends Record<string, unknown>>(subComponent?: ((row: Row<T>) => React.ReactNode) | undefined, expanderCell?: ((cellProps: CellProps<T, any>) => React.ReactNode) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => (hooks: Hooks<T>) => void;

package/cjs/core/Table/hooks/useExpanderCell.js

@@ -1,4 +1,15 @@
 "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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -8,50 +19,25 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useExpanderCell = 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 ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
-var react_1 = __importDefault(require("react"));
-var Buttons_1 = require("../../Buttons");
-exports.EXPANDER_CELL_ID = 'iui-table-expander';
+exports.useExpanderCell = void 0;
+var columns_1 = require("../columns");
 var useExpanderCell = function (subComponent, expanderCell, isRowDisabled) { return function (hooks) {
     if (!subComponent) {
         return;
     }
-    hooks.allColumns.push(function (columns) { return __spreadArray([
-        {
-            id: exports.EXPANDER_CELL_ID,
-            disableResizing: true,
-            disableGroupBy: true,
-            minWidth: 48,
-            width: 48,
-            maxWidth: 48,
-            columnClassName: 'iui-slot',
-            cellClassName: 'iui-slot',
-            disableReordering: true,
-            Cell: function (props) {
-                var row = props.row;
-                if (!subComponent(row)) {
-                    return null;
-                }
-                else if (expanderCell) {
-                    return expanderCell(props);
-                }
-                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: isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(props.row.original) }, react_1.default.createElement(ChevronRight_1.default, null)));
-                }
-            },
+    hooks.allColumns.push(function (columns) {
+        var hasExpanderColumn = columns.find(function (c) { return c.id === columns_1.EXPANDER_CELL_ID; });
+        if (hasExpanderColumn) {
+            return columns;
         }
-    ], columns, true); });
+        var expanderColumn = (0, columns_1.ExpanderColumn)({
+            subComponent: subComponent,
+            isDisabled: isRowDisabled,
+        });
+        return __spreadArray([
+            __assign(__assign({}, expanderColumn), { Cell: expanderCell !== null && expanderCell !== void 0 ? expanderCell : expanderColumn.Cell })
+        ], columns, true);
+    });
 }; };
 exports.useExpanderCell = useExpanderCell;

package/cjs/core/Table/hooks/useResizeColumns.js

@@ -229,7 +229,10 @@ var useInstanceBeforeDimensions = function (instance) {
 };
 var getPreviousResizableHeader = function (headerColumn, instance) {
     var _a;
-    var headersList = ((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders;
+    var headersList = (((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders).filter(function (_a) {
+        var isVisible = _a.isVisible;
+        return isVisible;
+    });
     var headerIndex = headersList.findIndex(function (h) { return h.id === headerColumn.id; });
     return __spreadArray([], headersList, true).slice(0, headerIndex)
         .reverse()
@@ -237,7 +240,10 @@ var getPreviousResizableHeader = function (headerColumn, instance) {
 };
 var getNextResizableHeader = function (headerColumn, instance) {
     var _a;
-    var headersList = ((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders;
+    var headersList = (((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders).filter(function (_a) {
+        var isVisible = _a.isVisible;
+        return isVisible;
+    });
     var headerIndex = headersList.findIndex(function (h) { return h.id === headerColumn.id; });
     return __spreadArray([], headersList, true).slice(headerIndex + 1)
         .find(function (h) { return !h.disableResizing; });

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

@@ -1,3 +1,2 @@
 import { Hooks } from 'react-table';
-export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
-export declare const useSelectionCell: <T extends Record<string, unknown>>(isSelectable: boolean, isRowDisabled?: ((rowData: T) => boolean) | undefined) => (hooks: Hooks<T>) => void;
+export declare const useSelectionCell: <T extends Record<string, unknown>>(isSelectable: boolean, selectionMode: 'multi' | 'single', isRowDisabled?: ((rowData: T) => boolean) | undefined) => (hooks: Hooks<T>) => void;

package/cjs/core/Table/hooks/useSelectionCell.js

@@ -1,15 +1,4 @@
 "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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -19,52 +8,18 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSelectionCell = exports.SELECTION_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 Checkbox_1 = require("../../Checkbox");
-exports.SELECTION_CELL_ID = 'iui-table-checkbox-selector';
-var useSelectionCell = function (isSelectable, isRowDisabled) { return function (hooks) {
+exports.useSelectionCell = void 0;
+var columns_1 = require("../columns");
+var useSelectionCell = function (isSelectable, selectionMode, isRowDisabled) { return function (hooks) {
     if (!isSelectable) {
         return;
     }
-    hooks.allColumns.push(function (columns) { return __spreadArray([
-        {
-            id: exports.SELECTION_CELL_ID,
-            disableResizing: true,
-            disableGroupBy: true,
-            minWidth: 48,
-            width: 48,
-            maxWidth: 48,
-            columnClassName: 'iui-slot',
-            cellClassName: 'iui-slot',
-            disableReordering: true,
-            Header: function (_a) {
-                var getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, rows = _a.rows, initialRows = _a.initialRows, state = _a.state;
-                var disabled = rows.every(function (row) { return isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original); });
-                var checked = initialRows.every(function (row) {
-                    return state.selectedRowIds[row.id] || (isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original));
-                });
-                return (react_1.default.createElement(Checkbox_1.Checkbox, __assign({}, getToggleAllRowsSelectedProps(), { checked: checked && !disabled, indeterminate: !checked && Object.keys(state.selectedRowIds).length > 0, disabled: disabled })));
-            },
-            Cell: function (_a) {
-                var row = _a.row;
-                return (react_1.default.createElement(Checkbox_1.Checkbox, __assign({}, row.getToggleRowSelectedProps(), { disabled: isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original), onClick: function (e) { return e.stopPropagation(); } })));
-            },
-        }
-    ], columns, true); });
-    hooks.useInstanceBeforeDimensions.push(function (_a) {
-        var headerGroups = _a.headerGroups;
-        // Fix the parent group of the selection button to not be resizable
-        var selectionGroupHeader = headerGroups[0].headers[0];
-        selectionGroupHeader.canResize = false;
+    hooks.allColumns.push(function (columns) {
+        return selectionMode === 'single' ||
+            columns.find(function (c) { return c.id === columns_1.SELECTION_CELL_ID; })
+            ? columns
+            : __spreadArray([(0, columns_1.SelectionColumn)({ isDisabled: isRowDisabled })], columns, true);
     });
 }; };
 exports.useSelectionCell = useSelectionCell;

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

@@ -6,5 +6,6 @@ export { DefaultCell, EditableCell } from './cells';
 export type { DefaultCellProps, EditableCellProps } from './cells';
 export { TablePaginator } from './TablePaginator';
 export type { TablePaginatorProps } from './TablePaginator';
+export { ActionColumn, ExpanderColumn, SelectionColumn } from './columns';
 declare const _default: "./Table";
 export default _default;

package/cjs/core/Table/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.tableFilters = exports.FilterButtonBar = exports.BaseFilter = exports.Table = void 0;
+exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.tableFilters = exports.FilterButtonBar = exports.BaseFilter = exports.Table = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -16,4 +16,8 @@ Object.defineProperty(exports, "DefaultCell", { enumerable: true, get: function
 Object.defineProperty(exports, "EditableCell", { enumerable: true, get: function () { return cells_1.EditableCell; } });
 var TablePaginator_1 = require("./TablePaginator");
 Object.defineProperty(exports, "TablePaginator", { enumerable: true, get: function () { return TablePaginator_1.TablePaginator; } });
+var columns_1 = require("./columns");
+Object.defineProperty(exports, "ActionColumn", { enumerable: true, get: function () { return columns_1.ActionColumn; } });
+Object.defineProperty(exports, "ExpanderColumn", { enumerable: true, get: function () { return columns_1.ExpanderColumn; } });
+Object.defineProperty(exports, "SelectionColumn", { enumerable: true, get: function () { return columns_1.SelectionColumn; } });
 exports.default = './Table';

package/cjs/core/Table/utils.js

@@ -5,21 +5,21 @@ var getCellStyle = function (column, isTableResizing) {
     var style = {};
     style.flex = "1 1 145px";
     if (column.width) {
-        var width = typeof column.width === 'string' ? column.width : column.width + "px";
+        var width = typeof column.width === 'string' ? column.width : "".concat(column.width, "px");
         style.width = width;
         // This allows flexbox to handle the width of the column on table resize
         if (isTableResizing && column.canResize) {
-            style.flex = Number(column.width) + " 1 " + width;
+            style.flex = "".concat(Number(column.width), " ").concat(Number(column.width), " ").concat(width);
         }
         else {
-            style.flex = "0 0 " + width;
+            style.flex = "0 0 ".concat(width);
         }
     }
     if (column.maxWidth) {
-        style.maxWidth = column.maxWidth + "px";
+        style.maxWidth = "".concat(column.maxWidth, "px");
     }
     if (column.minWidth) {
-        style.minWidth = column.minWidth + "px";
+        style.minWidth = "".concat(column.minWidth, "px");
     }
     return style;
 };

package/cjs/core/Tabs/Tabs.d.ts

@@ -5,7 +5,7 @@ export declare type TabsProps = {
      * Elements shown for each tab.
      * Recommended to pass an array of `Tab` components.
      */
-    labels: React.ReactNodeArray;
+    labels: React.ReactNode[];
     /**
      * Handler for activating a tab.
      */

package/cjs/core/Tabs/Tabs.js

@@ -83,20 +83,19 @@ var Tabs = function (props) {
             var activeTab = tablistRef.current.children[currentActiveIndex];
             var activeTabRect = activeTab.getBoundingClientRect();
             setStripeProperties(__assign(__assign({}, (orientation === 'horizontal' && {
-                '--stripe-width': activeTabRect.width + "px",
-                '--stripe-left': activeTab.offsetLeft + "px",
+                '--stripe-width': "".concat(activeTabRect.width, "px"),
+                '--stripe-left': "".concat(activeTab.offsetLeft, "px"),
             })), (orientation === 'vertical' && {
-                '--stripe-height': activeTabRect.height + "px",
-                '--stripe-top': activeTab.offsetTop + "px",
+                '--stripe-height': "".concat(activeTabRect.height, "px"),
+                '--stripe-top': "".concat(activeTab.offsetTop, "px"),
             })));
         }
     }, [currentActiveIndex, type, orientation, tabsWidth]);
     var _l = react_1.default.useState(), focusedIndex = _l[0], setFocusedIndex = _l[1];
     react_1.default.useEffect(function () {
-        var _a;
         if (tablistRef.current && focusedIndex !== undefined) {
             var tab = tablistRef.current.querySelectorAll('.iui-tab')[focusedIndex];
-            (_a = tab) === null || _a === void 0 ? void 0 : _a.focus();
+            tab === null || tab === void 0 ? void 0 : tab.focus();
         }
     }, [focusedIndex]);
     var _m = react_1.default.useState(false), hasSublabel = _m[0], setHasSublabel = _m[1]; // used for setting size
@@ -173,8 +172,8 @@ var Tabs = function (props) {
         }
     };
     var isIE = !((_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, '--stripe-width', '100px'));
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tabs-wrapper', "iui-" + orientation, wrapperClassName), style: stripeProperties },
-        react_1.default.createElement("ul", __assign({ className: (0, classnames_1.default)('iui-tabs', "iui-" + type, {
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tabs-wrapper', "iui-".concat(orientation), wrapperClassName), style: stripeProperties },
+        react_1.default.createElement("ul", __assign({ className: (0, classnames_1.default)('iui-tabs', "iui-".concat(type), {
                 'iui-green': color === 'green',
                 'iui-animated': type !== 'default' && !isIE,
                 'iui-not-animated': isIE,

package/cjs/core/Tag/Tag.js

@@ -45,9 +45,12 @@ var Buttons_1 = require("../Buttons");
 var Tag = function (props) {
     var className = props.className, _a = props.variant, variant = _a === void 0 ? 'default' : _a, children = props.children, onRemove = props.onRemove, rest = __rest(props, ["className", "variant", "children", "onRemove"]);
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)('iui-tag', { 'iui-basic': variant === 'basic' }, className) }, rest),
-        react_1.default.createElement("span", { className: 'iui-label' }, children),
-        onRemove && (react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag' },
+    return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)({
+            'iui-tag-basic': variant === 'basic',
+            'iui-tag': variant === 'default',
+        }, className) }, rest),
+        variant === 'default' ? (react_1.default.createElement("span", { className: 'iui-tag-label' }, children)) : (children),
+        onRemove && (react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag', className: 'iui-tag-button' },
             react_1.default.createElement(CloseSmall_1.default, { "aria-hidden": true })))));
 };
 exports.Tag = Tag;

package/cjs/core/Tag/TagContainer.js

@@ -45,7 +45,7 @@ var TagContainer = function (props) {
     var className = props.className, children = props.children, overflow = props.overflow, _b = props.background, background = _b === void 0 ? 'none' : _b, rest = __rest(props, ["className", "children", "overflow", "background"]);
     (0, utils_1.useTheme)();
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-tag-container', (_a = {},
-            _a["iui-" + overflow] = !!overflow,
+            _a["iui-".concat(overflow)] = !!overflow,
             _a['iui-visible'] = background !== 'none',
             _a), className) }, rest), children));
 };

package/cjs/core/Tile/Tile.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/tile.css';
 export declare type TileProps = {
     /**
@@ -80,7 +79,12 @@ export declare type TileProps = {
      * Any custom nodes that will be appended to the tile's main content.
      */
     children?: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
+    /**
+     * Whether the tile is expected to be interactable (i.e. `onClick`).
+     * It becomes focusable and gets on hover styling.
+     */
+    isActionable?: boolean;
+} & React.ComponentPropsWithoutRef<'div'>;
 /**
  * Tile component that displays content and actions in a card-like format.
  * @example