@itwin/itwinui-react 1.34.2 → 1.37.0

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

@@ -25,6 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
+import cx from 'classnames';
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.
@@ -39,7 +40,9 @@ import React from 'react';
 export 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.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.createElement("div", __assign({}, cellElementProps, rest, { className: cx(cellElementClassName, className, {
+            'iui-disabled': isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(cellProps.row.original),
+        }), style: __assign(__assign({}, cellElementStyle), style) }), children));
 };
 export default DefaultCell;

package/esm/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/esm/core/Table/columns/actionColumn.js

@@ -0,0 +1,84 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { Checkbox } from '../../Checkbox';
+import SvgColumnManager from '@itwin/itwinui-icons-react/cjs/icons/ColumnManager';
+import { DropdownMenu } from '../../DropdownMenu';
+import { IconButton } from '../../Buttons/IconButton';
+import { MenuItem } from '../../Menu';
+import { tableResizeStartAction } from '../Table';
+import { SELECTION_CELL_ID } from './selectionColumn';
+import { EXPANDER_CELL_ID } from './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>
+ *   ),
+ * },
+ */
+export 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.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+            if (!columnManager) {
+                return null;
+            }
+            var defaultColumnIds = [
+                SELECTION_CELL_ID,
+                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: tableResizeStartAction });
+                    };
+                    return (React.createElement(MenuItem, { key: column.id, icon: React.createElement(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.createElement("div", { id: "iui-column-" + column.id }, column.render('Header'))));
+                });
+            };
+            return (React.createElement(DropdownMenu, { menuItems: headerCheckBoxes, onHide: function () { return setIsOpen(false); }, onShow: function () { return setIsOpen(true); } },
+                React.createElement(IconButton, { styleType: 'borderless', isActive: isOpen },
+                    React.createElement(SvgColumnManager, null))));
+        },
+    };
+};

package/esm/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/esm/core/Table/columns/expanderColumn.js

@@ -0,0 +1,74 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
+import { IconButton } from '../../Buttons';
+import { DefaultCell } from '../cells';
+export var 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 var ExpanderColumn = function (props) {
+    if (props === void 0) { props = {}; }
+    var subComponent = props.subComponent, isDisabled = props.isDisabled;
+    return {
+        id: 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.createElement(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.createElement(SvgChevronRight, null)));
+            }
+        },
+        cellRenderer: function (props) { return (React.createElement(DefaultCell, __assign({}, props, { isDisabled: function (rowData) { return !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)); } }))); },
+    };
+};

package/esm/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/esm/core/Table/columns/index.js

@@ -0,0 +1,7 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { ActionColumn } from './actionColumn';
+export { SELECTION_CELL_ID, SelectionColumn } from './selectionColumn';
+export { EXPANDER_CELL_ID, ExpanderColumn } from './expanderColumn';

package/esm/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/esm/core/Table/columns/selectionColumn.js

@@ -0,0 +1,60 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { Checkbox } from '../../Checkbox';
+import { DefaultCell } from '../cells';
+export var 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 var SelectionColumn = function (props) {
+    if (props === void 0) { props = {}; }
+    var isDisabled = props.isDisabled;
+    return {
+        id: 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.createElement(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.createElement(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.createElement(DefaultCell, __assign({}, props, { isDisabled: function (rowData) { return !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)); } }))); },
+    };
+};

package/esm/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/esm/core/Table/hooks/index.js

@@ -2,8 +2,8 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-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/esm/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/esm/core/Table/hooks/useExpanderCell.js

@@ -1,3 +1,14 @@
+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)) {
@@ -7,44 +18,22 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
-import React from 'react';
-import { IconButton } from '../../Buttons';
-export var EXPANDER_CELL_ID = 'iui-table-expander';
+import { ExpanderColumn, EXPANDER_CELL_ID } from '../columns';
 export var useExpanderCell = function (subComponent, expanderCell, isRowDisabled) { return function (hooks) {
     if (!subComponent) {
         return;
     }
-    hooks.allColumns.push(function (columns) { return __spreadArray([
-        {
-            id: 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.createElement(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.createElement(SvgChevronRight, null)));
-                }
-            },
+    hooks.allColumns.push(function (columns) {
+        var hasExpanderColumn = columns.find(function (c) { return c.id === EXPANDER_CELL_ID; });
+        if (hasExpanderColumn) {
+            return columns;
         }
-    ], columns, true); });
+        var expanderColumn = ExpanderColumn({
+            subComponent: subComponent,
+            isDisabled: isRowDisabled,
+        });
+        return __spreadArray([
+            __assign(__assign({}, expanderColumn), { Cell: expanderCell !== null && expanderCell !== void 0 ? expanderCell : expanderColumn.Cell })
+        ], columns, true);
+    });
 }; };

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

@@ -225,7 +225,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()
@@ -233,7 +236,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/esm/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/esm/core/Table/hooks/useSelectionCell.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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)) {
@@ -18,46 +7,15 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-import React from 'react';
-import { Checkbox } from '../../Checkbox';
-export var SELECTION_CELL_ID = 'iui-table-checkbox-selector';
-export var useSelectionCell = function (isSelectable, isRowDisabled) { return function (hooks) {
+import { SelectionColumn, SELECTION_CELL_ID } from '../columns';
+export var useSelectionCell = function (isSelectable, selectionMode, isRowDisabled) { return function (hooks) {
     if (!isSelectable) {
         return;
     }
-    hooks.allColumns.push(function (columns) { return __spreadArray([
-        {
-            id: 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.createElement(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.createElement(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 === SELECTION_CELL_ID; })
+            ? columns
+            : __spreadArray([SelectionColumn({ isDisabled: isRowDisabled })], columns, true);
     });
 }; };

package/esm/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/esm/core/Table/index.js

@@ -6,4 +6,5 @@ export { Table } from './Table';
 export { BaseFilter, FilterButtonBar, tableFilters } from './filters';
 export { DefaultCell, EditableCell } from './cells';
 export { TablePaginator } from './TablePaginator';
+export { ActionColumn, ExpanderColumn, SelectionColumn } from './columns';
 export default './Table';

package/esm/core/Table/utils.js

@@ -6,7 +6,7 @@ export var getCellStyle = function (column, isTableResizing) {
         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 = Number(column.width) + " " + Number(column.width) + " " + width;
         }
         else {
             style.flex = "0 0 " + width;

package/esm/core/Tag/Tag.js

@@ -39,9 +39,12 @@ import { IconButton } from '../Buttons';
 export 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"]);
     useTheme();
-    return (React.createElement("span", __assign({ className: cx('iui-tag', { 'iui-basic': variant === 'basic' }, className) }, rest),
-        React.createElement("span", { className: 'iui-label' }, children),
-        onRemove && (React.createElement(IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag' },
+    return (React.createElement("span", __assign({ className: cx({
+            'iui-tag-basic': variant === 'basic',
+            'iui-tag': variant === 'default',
+        }, className) }, rest),
+        variant === 'default' ? (React.createElement("span", { className: 'iui-tag-label' }, children)) : (children),
+        onRemove && (React.createElement(IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag', className: 'iui-tag-button' },
             React.createElement(SvgCloseSmall, { "aria-hidden": true })))));
 };
 export default Tag;

package/esm/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