@itwin/itwinui-react 1.36.0 → 1.37.2

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

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

package/cjs/core/Surface/Surface.js

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

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

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

package/cjs/core/Surface/index.js

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

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

@@ -64,6 +64,12 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
      * Handler for when a row is clicked. Must be memoized.
      */
     onRowClick?: (event: React.MouseEvent, row: Row<T>) => void;
+    /**
+     * Modify the selection mode of the table.
+     * The column with checkboxes will not be present with 'single' selection mode.
+     * @default 'multi'
+     */
+    selectionMode?: 'multi' | 'single';
     /**
      * Flag whether table columns can be sortable.
      * @default false

package/cjs/core/Table/Table.js

@@ -49,6 +49,16 @@ var columns_1 = require("./columns");
 var singleRowSelectedAction = 'singleRowSelected';
 exports.tableResizeStartAction = 'tableResizeStart';
 var tableResizeEndAction = 'tableResizeEnd';
+var flattenColumns = function (columns) {
+    var flatColumns = [];
+    columns.forEach(function (column) {
+        flatColumns.push(column);
+        if (column.columns) {
+            flatColumns.push.apply(flatColumns, flattenColumns(column.columns));
+        }
+    });
+    return flatColumns;
+};
 /**
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).
  * @example
@@ -93,8 +103,7 @@ var tableResizeEndAction = 'tableResizeEnd';
  */
 var Table = function (props) {
     var _a;
-    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"]);
+    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.selectionMode, selectionMode = _d === void 0 ? 'multi' : _d, _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", "selectionMode", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
     (0, utils_1.useTheme)();
     var _q = react_1.default.useState(), ownerDocument = _q[0], setOwnerDocument = _q[1];
     var defaultColumn = react_1.default.useMemo(function () { return ({
@@ -109,7 +118,10 @@ 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 hasManualSelectionColumn = react_1.default.useMemo(function () {
+        var flatColumns = flattenColumns(columns);
+        return flatColumns.some(function (column) { return column.id === columns_1.SELECTION_CELL_ID; });
+    }, [columns]);
     var tableStateReducer = react_1.default.useCallback(function (newState, action, previousState, instance) {
         switch (action.type) {
             case react_table_1.actions.toggleSortBy:
@@ -165,7 +177,7 @@ var Table = function (props) {
             return getSubRows ? getSubRows(item, index) : item.subRows;
         });
     }, [data, getSubRows]);
-    var instance = (0, react_table_1.useTable)(__assign(__assign({ manualPagination: !paginatorRenderer, paginateExpandedRows: false }, props), { columns: columns, defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes, selectSubRows: selectSubRows, data: data, getSubRows: getSubRows, initialState: __assign({ pageSize: pageSize }, props.initialState) }), react_table_1.useFlexLayout, (0, hooks_1.useResizeColumns)(ownerDocument), react_table_1.useFilters, (0, hooks_1.useSubRowFiltering)(hasAnySubRows), react_table_1.useSortBy, react_table_1.useExpanded, react_table_1.usePagination, react_table_1.useRowSelect, hooks_1.useSubRowSelection, (0, hooks_1.useExpanderCell)(subComponent, expanderCell, isRowDisabled), (0, hooks_1.useSelectionCell)(isSelectable, isRowDisabled), react_table_1.useColumnOrder, (0, hooks_1.useColumnDragAndDrop)(enableColumnReordering));
+    var instance = (0, react_table_1.useTable)(__assign(__assign({ manualPagination: !paginatorRenderer, paginateExpandedRows: false }, props), { columns: columns, defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes, selectSubRows: selectSubRows, data: data, getSubRows: getSubRows, initialState: __assign({ pageSize: pageSize }, props.initialState) }), react_table_1.useFlexLayout, (0, hooks_1.useResizeColumns)(ownerDocument), react_table_1.useFilters, (0, hooks_1.useSubRowFiltering)(hasAnySubRows), react_table_1.useSortBy, react_table_1.useExpanded, react_table_1.usePagination, react_table_1.useRowSelect, hooks_1.useSubRowSelection, (0, hooks_1.useExpanderCell)(subComponent, expanderCell, isRowDisabled), (0, hooks_1.useSelectionCell)(isSelectable, selectionMode, isRowDisabled), react_table_1.useColumnOrder, (0, hooks_1.useColumnDragAndDrop)(enableColumnReordering));
     var getTableProps = instance.getTableProps, rows = instance.rows, headerGroups = instance.headerGroups, getTableBodyProps = instance.getTableBodyProps, prepareRow = instance.prepareRow, state = instance.state, allColumns = instance.allColumns, filteredFlatRows = instance.filteredFlatRows, dispatch = instance.dispatch, page = instance.page, gotoPage = instance.gotoPage, setPageSize = instance.setPageSize, flatHeaders = instance.flatHeaders;
     var ariaDataAttributes = Object.entries(rest).reduce(function (result, _a) {
         var key = _a[0], value = _a[1];
@@ -177,8 +189,14 @@ var Table = function (props) {
     var areFiltersSet = allColumns.some(function (column) { return !!column.filterValue; });
     var onRowClickHandler = react_1.default.useCallback(function (event, row) {
         var isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
-        if (isSelectable && !isDisabled && selectRowOnClick) {
-            if (!row.isSelected && !event.ctrlKey) {
+        if (!isDisabled) {
+            onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row);
+        }
+        if (isSelectable &&
+            !isDisabled &&
+            selectRowOnClick &&
+            !event.isDefaultPrevented()) {
+            if (!row.isSelected && (selectionMode === 'single' || !event.ctrlKey)) {
                 dispatch({
                     type: singleRowSelectedAction,
                     id: row.id,
@@ -188,10 +206,14 @@ var Table = function (props) {
                 row.toggleRowSelected(!row.isSelected);
             }
         }
-        if (!isDisabled) {
-            onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row);
-        }
-    }, [isRowDisabled, isSelectable, selectRowOnClick, dispatch, onRowClick]);
+    }, [
+        isRowDisabled,
+        isSelectable,
+        selectRowOnClick,
+        selectionMode,
+        dispatch,
+        onRowClick,
+    ]);
     react_1.default.useEffect(function () {
         setPageSize(pageSize);
     }, [pageSize, setPageSize]);
@@ -272,7 +294,7 @@ var Table = function (props) {
                     resizeRef(element);
                 }
             }, id: id }, getTableProps({
-            className: (0, classnames_1.default)('iui-table', (_a = {}, _a["iui-" + density] = density !== 'default', _a), className),
+            className: (0, classnames_1.default)('iui-table', (_a = {}, _a["iui-".concat(density)] = density !== 'default', _a), className),
             style: style,
         }), ariaDataAttributes),
             react_1.default.createElement("div", { className: 'iui-table-header', ref: headerRef }, headerGroups.slice(1).map(function (headerGroup) {
@@ -289,7 +311,7 @@ var Table = function (props) {
                         } }),
                         column.render('Header'),
                         (data.length !== 0 || areFiltersSet) && (react_1.default.createElement(filters_1.FilterToggle, { column: column, ownerDocument: ownerDocument })),
-                        data.length !== 0 && column.canSort && (react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (react_1.default.createElement(SortUp_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (react_1.default.createElement(SortDown_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
+                        data.length !== 0 && column.canSort && (react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (react_1.default.createElement(SortDown_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (react_1.default.createElement(SortUp_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
                         isResizable &&
                             column.isResizerVisible &&
                             index !== headerGroup.headers.length - 1 && (react_1.default.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),

package/cjs/core/Table/TablePaginator.js

@@ -40,15 +40,15 @@ var ProgressIndicators_1 = require("../ProgressIndicators");
 var Menu_1 = require("../Menu");
 var utils_1 = require("../utils");
 var defaultLocalization = {
-    pageSizeLabel: function (size) { return size + " per page"; },
+    pageSizeLabel: function (size) { return "".concat(size, " per page"); },
     rangeLabel: function (startIndex, endIndex, totalRows, isLoading) {
         return isLoading
-            ? startIndex + "-" + endIndex + "\u2026"
-            : startIndex + "-" + endIndex + " of " + totalRows;
+            ? "".concat(startIndex, "-").concat(endIndex, "\u2026")
+            : "".concat(startIndex, "-").concat(endIndex, " of ").concat(totalRows);
     },
     previousPage: 'Previous page',
     nextPage: 'Next page',
-    goToPageLabel: function (page) { return "Go to page " + page; },
+    goToPageLabel: function (page) { return "Go to page ".concat(page); },
     rowsPerPageLabel: 'Rows per page',
 };
 /**
@@ -72,12 +72,12 @@ var TablePaginator = function (props) {
     var needFocus = react_1.default.useRef(false);
     var isMounted = react_1.default.useRef(false);
     react_1.default.useEffect(function () {
-        var _a, _b, _c;
+        var _a, _b;
         // Checking `isMounted.current` prevents from focusing on initial load.
         // Checking `needFocus.current` prevents from focusing page when clicked on previous/next page.
         if (isMounted.current && needFocus.current) {
             var buttonToFocus = Array.from((_b = (_a = pageListRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.iui-paginator-page-button')) !== null && _b !== void 0 ? _b : []).find(function (el) { var _a; return ((_a = el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === (focusedIndex + 1).toString(); });
-            (_c = buttonToFocus) === null || _c === void 0 ? void 0 : _c.focus();
+            buttonToFocus === null || buttonToFocus === void 0 ? void 0 : buttonToFocus.focus();
             needFocus.current = false;
         }
         isMounted.current = true;

package/cjs/core/Table/TableRowMemoized.js

@@ -37,7 +37,7 @@ var TableRow = function (props) {
         isLast && ((_b = onBottomReached.current) === null || _b === void 0 ? void 0 : _b.call(onBottomReached));
     }, [isLast, onBottomReached, onRowInViewport, row.original]);
     var rowRef = (0, utils_1.useIntersection)(onIntersect, {
-        rootMargin: intersectionMargin + "px",
+        rootMargin: "".concat(intersectionMargin, "px"),
     });
     var userRowProps = rowProps === null || rowProps === void 0 ? void 0 : rowProps(row);
     var mergedProps = __assign(__assign(__assign({}, row.getRowProps({ style: { flex: "0 0 auto", minWidth: '100%' } })), userRowProps), {

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

@@ -42,7 +42,8 @@ var react_1 = __importDefault(require("react"));
  * }
  */
 var EditableCell = function (props) {
-    var cellElementProps = props.cellElementProps, cellProps = props.cellProps, onCellEdit = props.onCellEdit, children = props.children, rest = __rest(props, ["cellElementProps", "cellProps", "onCellEdit", "children"]);
+    var cellElementProps = props.cellElementProps, cellProps = props.cellProps, onCellEdit = props.onCellEdit, children = props.children, isDisabled = props.isDisabled, rest = __rest(props, ["cellElementProps", "cellProps", "onCellEdit", "children", "isDisabled"]);
+    isDisabled; // To omit and prevent eslint error.
     var sanitizeString = function (text) {
         return text.replace(/(\r\n|\n|\r)+/gm, ' ');
     };

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

@@ -78,8 +78,8 @@ var ActionColumn = function (_a) {
                         // 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(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-".concat(column.id) }), onClick: onClick, disabled: column.disableToggleVisibility },
+                        react_1.default.createElement("div", { id: "iui-column-".concat(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); } },

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

@@ -1,2 +1,2 @@
 import { Hooks } from 'react-table';
-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

@@ -11,12 +11,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSelectionCell = void 0;
 var columns_1 = require("../columns");
-var useSelectionCell = function (isSelectable, isRowDisabled) { return function (hooks) {
+var useSelectionCell = function (isSelectable, selectionMode, isRowDisabled) { return function (hooks) {
     if (!isSelectable) {
         return;
     }
     hooks.allColumns.push(function (columns) {
-        return columns.find(function (c) { return c.id === columns_1.SELECTION_CELL_ID; })
+        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);
     });

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) + " " + Number(column.width) + " " + 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

package/cjs/core/Tile/Tile.js

@@ -57,14 +57,19 @@ var Buttons_1 = require("../Buttons");
  * />
  */
 var Tile = function (props) {
-    var className = props.className, name = props.name, description = props.description, metadata = props.metadata, thumbnail = props.thumbnail, buttons = props.buttons, leftIcon = props.leftIcon, rightIcon = props.rightIcon, badge = props.badge, isNew = props.isNew, isSelected = props.isSelected, moreOptions = props.moreOptions, _a = props.variant, variant = _a === void 0 ? 'default' : _a, children = props.children, rest = __rest(props, ["className", "name", "description", "metadata", "thumbnail", "buttons", "leftIcon", "rightIcon", "badge", "isNew", "isSelected", "moreOptions", "variant", "children"]);
+    var className = props.className, name = props.name, description = props.description, metadata = props.metadata, thumbnail = props.thumbnail, buttons = props.buttons, leftIcon = props.leftIcon, rightIcon = props.rightIcon, badge = props.badge, isNew = props.isNew, isSelected = props.isSelected, moreOptions = props.moreOptions, _a = props.variant, variant = _a === void 0 ? 'default' : _a, children = props.children, isActionable = props.isActionable, rest = __rest(props, ["className", "name", "description", "metadata", "thumbnail", "buttons", "leftIcon", "rightIcon", "badge", "isNew", "isSelected", "moreOptions", "variant", "children", "isActionable"]);
     (0, utils_1.useTheme)();
     var _b = react_1.default.useState(false), isMenuVisible = _b[0], setIsMenuVisible = _b[1];
     var showMenu = react_1.default.useCallback(function () { return setIsMenuVisible(true); }, []);
     var hideMenu = react_1.default.useCallback(function () { return setIsMenuVisible(false); }, []);
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-tile', { 'iui-folder': variant === 'folder' }, { 'iui-new': isNew }, { 'iui-selected': isSelected }, className) }, rest),
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-tile', {
+            'iui-folder': variant === 'folder',
+            'iui-new': isNew,
+            'iui-selected': isSelected,
+            'iui-actionable': isActionable,
+        }, className), tabIndex: isActionable ? 0 : undefined }, rest),
         thumbnail && (react_1.default.createElement("div", { className: 'iui-tile-thumbnail' },
-            typeof thumbnail === 'string' ? (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: "url(" + thumbnail + ")" } })) : thumbnail && thumbnail.type === 'img' ? (react_1.default.cloneElement(thumbnail, {
+            typeof thumbnail === 'string' ? (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: "url(".concat(thumbnail, ")") } })) : thumbnail && thumbnail.type === 'img' ? (react_1.default.cloneElement(thumbnail, {
                 className: 'iui-tile-thumbnail-picture',
             })) : react_1.default.isValidElement(thumbnail) ? (react_1.default.cloneElement(thumbnail, {
                 className: (0, classnames_1.default)('iui-thumbnail-icon', thumbnail.props.className),

package/cjs/core/Toast/Toast.js

@@ -123,7 +123,7 @@ var Toast = function (props) {
         }, onExiting: function (node) {
             var _a = calculateOutAnimation(node), translateX = _a.translateX, translateY = _a.translateY;
             node.style.transform = animateOutTo
-                ? "scale(0.9) translate(" + translateX + "px," + translateY + "px)"
+                ? "scale(0.9) translate(".concat(translateX, "px,").concat(translateY, "px)")
                 : "scale(0.9)";
             node.style.opacity = '0';
             node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
@@ -140,7 +140,7 @@ exports.Toast = Toast;
 var ToastPresentation = function (props) {
     var content = props.content, category = props.category, _a = props.type, type = _a === void 0 ? 'temporary' : _a, link = props.link, hasCloseButton = props.hasCloseButton, onClose = props.onClose, className = props.className, rest = __rest(props, ["content", "category", "type", "link", "hasCloseButton", "onClose", "className"]);
     var StatusIcon = utils_1.StatusIconMap[category];
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)("iui-toast iui-" + category, className) }, rest),
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)("iui-toast iui-".concat(category), className) }, rest),
         react_1.default.createElement("div", { className: 'iui-status-area' }, react_1.default.createElement(StatusIcon, { className: 'iui-icon' })),
         react_1.default.createElement("div", { className: 'iui-message' }, content),
         link && (react_1.default.createElement("a", { className: 'iui-toast-anchor', onClick: link.onClick }, link.title)),

package/cjs/core/Toast/ToastWrapper.js

@@ -26,7 +26,7 @@ var Toast_1 = __importDefault(require("./Toast"));
 var ToastWrapper = function (props) {
     var toasts = props.toasts, _a = props.placement, placement = _a === void 0 ? 'top' : _a;
     var placementPosition = placement.startsWith('top') ? 'top' : 'bottom';
-    return (react_1.default.createElement("span", { className: (0, classnames_1.default)("iui-toast-wrapper", "iui-placement-" + placement) }, toasts.map(function (toastProps) {
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)("iui-toast-wrapper", "iui-placement-".concat(placement)) }, toasts.map(function (toastProps) {
         return (react_1.default.createElement(Toast_1.default, __assign({ key: toastProps.id, placementPosition: placementPosition }, toastProps)));
     })));
 };

package/cjs/core/Tree/TreeNode.js

@@ -63,7 +63,7 @@ var TreeNode = function (props) {
     var nodeRef = react_1.default.useRef(null);
     var styleDepth = react_1.default.useMemo(function () {
         var _a, _b, _c;
-        return ((_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, "--level: " + nodeDepth))
+        return ((_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, "--level: ".concat(nodeDepth)))
             ? { '--level': nodeDepth }
             : { marginLeft: nodeDepth ? nodeDepth * 28 : 0 };
     }, [nodeDepth]);
@@ -79,7 +79,7 @@ var TreeNode = function (props) {
                         break;
                     }
                     if (parentNodeId) {
-                        var parentNode = (_b = nodeRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.querySelector("#" + parentNodeId);
+                        var parentNode = (_b = nodeRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.querySelector("#".concat(parentNodeId));
                         parentNode === null || parentNode === void 0 ? void 0 : parentNode.focus();
                         break;
                     }

package/cjs/core/Typography/Text/Text.js

@@ -49,7 +49,7 @@ exports.Text = react_1.default.forwardRef(function (props, ref) {
     var _b = props.variant, variant = _b === void 0 ? 'body' : _b, _c = props.as, Element = _c === void 0 ? 'div' : _c, className = props.className, _d = props.isMuted, isMuted = _d === void 0 ? false : _d, _e = props.isSkeleton, isSkeleton = _e === void 0 ? false : _e, rest = __rest(props, ["variant", "as", "className", "isMuted", "isSkeleton"]);
     (0, utils_1.useTheme)();
     return (react_1.default.createElement(Element, __assign({ className: (0, classnames_1.default)((_a = {},
-            _a["iui-text-" + variant] = variant !== 'body',
+            _a["iui-text-".concat(variant)] = variant !== 'body',
             _a['iui-text-block'] = variant === 'body',
             _a['iui-text-muted'] = isMuted,
             _a['iui-skeleton'] = isSkeleton,

package/cjs/core/UserIcon/UserIcon.js

@@ -60,10 +60,10 @@ var UserIcon = function (props) {
     var _c = props.size, size = _c === void 0 ? 'small' : _c, status = props.status, abbreviation = props.abbreviation, image = props.image, _d = props.backgroundColor, backgroundColor = _d === void 0 ? 'white' : _d, title = props.title, translatedStatusTitles = props.translatedStatusTitles, className = props.className, style = props.style, rest = __rest(props, ["size", "status", "abbreviation", "image", "backgroundColor", "title", "translatedStatusTitles", "className", "style"]);
     (0, utils_1.useTheme)();
     var statusTitles = __assign(__assign({}, exports.defaultStatusTitles), translatedStatusTitles);
-    return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)('iui-user-icon', (_a = {}, _a["iui-" + size] = size !== 'medium', _a), className), title: title, style: style }, rest), image !== null && image !== void 0 ? image : (react_1.default.createElement("abbr", { className: 'iui-initials', style: { backgroundColor: backgroundColor } }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
+    return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)('iui-user-icon', (_a = {}, _a["iui-".concat(size)] = size !== 'medium', _a), className), title: title, style: style }, rest), image !== null && image !== void 0 ? image : (react_1.default.createElement("abbr", { className: 'iui-initials', style: { backgroundColor: backgroundColor } }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
         react_1.default.createElement("span", { className: 'iui-stroke' }),
         status && (react_1.default.createElement("span", { title: statusTitles[status], className: (0, classnames_1.default)('iui-status', (_b = {},
-                _b["iui-" + status] = !!status,
+                _b["iui-".concat(status)] = !!status,
                 _b)), "aria-label": statusTitles[status] }))));
 };
 exports.UserIcon = UserIcon;

package/cjs/core/UserIconGroup/UserIconGroup.js

@@ -84,10 +84,10 @@ var UserIconGroup = function (props) {
             childrenArray.length <= maxIcons + 1 && getUserIconList(maxIcons + 1),
             childrenArray.length > maxIcons + 1 && (react_1.default.createElement(react_1.default.Fragment, null,
                 getUserIconList(maxIcons),
-                react_1.default.createElement("div", __assign({}, countIconProps, { className: (0, classnames_1.default)('iui-user-icon', (_a = {}, _a["iui-" + iconSize] = iconSize !== 'medium', _a), 'iui-user-icon-count', countIconProps === null || countIconProps === void 0 ? void 0 : countIconProps.className) }),
+                react_1.default.createElement("div", __assign({}, countIconProps, { className: (0, classnames_1.default)('iui-user-icon', (_a = {}, _a["iui-".concat(iconSize)] = iconSize !== 'medium', _a), 'iui-user-icon-count', countIconProps === null || countIconProps === void 0 ? void 0 : countIconProps.className) }),
                     react_1.default.createElement("abbr", { className: 'iui-initials' }, childrenLength <= maxLength
-                        ? "" + (childrenLength - maxIcons)
-                        : maxLength + "+"),
+                        ? "".concat(childrenLength - maxIcons)
+                        : "".concat(maxLength, "+")),
                     react_1.default.createElement("span", { className: 'iui-stroke' })))))));
 };
 exports.UserIconGroup = UserIconGroup;

package/cjs/core/Wizard/Step.js

@@ -54,7 +54,7 @@ var Step = function (props) {
     var stepShape = (react_1.default.createElement("li", __assign({ className: (0, classnames_1.default)('iui-wizard-step', {
             'iui-current': isActive,
             'iui-clickable': isClickable,
-        }, className), style: __assign({ width: type === 'default' ? 100 / totalSteps + "%" : undefined }, style), onClick: onCompletedClick, onKeyDown: onKeyDown, "aria-current": isActive ? 'step' : undefined, tabIndex: isClickable ? 0 : undefined }, rest),
+        }, className), style: __assign({ width: type === 'default' ? "".concat(100 / totalSteps, "%") : undefined }, style), onClick: onCompletedClick, onKeyDown: onKeyDown, "aria-current": isActive ? 'step' : undefined, tabIndex: isClickable ? 0 : undefined }, rest),
         react_1.default.createElement("div", { className: 'iui-wizard-track-content' },
             react_1.default.createElement("span", { className: 'iui-wizard-circle' }, type === 'workflow' ? title : index + 1)),
         type === 'default' && (react_1.default.createElement("span", { className: 'iui-wizard-step-name' }, title))));

package/cjs/core/Wizard/Wizard.js

@@ -37,7 +37,7 @@ require("@itwin/itwinui-css/css/wizard.css");
 var Step_1 = require("./Step");
 var defaultWizardLocalization = {
     stepsCountLabel: function (currentStep, totalSteps) {
-        return "Step " + currentStep + " of " + totalSteps + ":";
+        return "Step ".concat(currentStep, " of ").concat(totalSteps, ":");
     },
 };
 /**