@itwin/itwinui-react 1.35.0 → 1.37.1

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

@@ -2,21 +2,21 @@ export 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/esm/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/esm/core/Tabs/Tabs.js

@@ -77,20 +77,19 @@ export 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.useState(), focusedIndex = _l[0], setFocusedIndex = _l[1];
     React.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.useState(false), hasSublabel = _m[0], setHasSublabel = _m[1]; // used for setting size
@@ -167,8 +166,8 @@ export var Tabs = function (props) {
         }
     };
     var isIE = !((_c = (_b = (_a = 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.createElement("div", { className: cx('iui-tabs-wrapper', "iui-" + orientation, wrapperClassName), style: stripeProperties },
-        React.createElement("ul", __assign({ className: cx('iui-tabs', "iui-" + type, {
+    return (React.createElement("div", { className: cx('iui-tabs-wrapper', "iui-".concat(orientation), wrapperClassName), style: stripeProperties },
+        React.createElement("ul", __assign({ className: cx('iui-tabs', "iui-".concat(type), {
                 'iui-green': color === 'green',
                 'iui-animated': type !== 'default' && !isIE,
                 'iui-not-animated': isIE,

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/Tag/TagContainer.js

@@ -39,7 +39,7 @@ export 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"]);
     useTheme();
     return (React.createElement("div", __assign({ className: cx('iui-tag-container', (_a = {},
-            _a["iui-" + overflow] = !!overflow,
+            _a["iui-".concat(overflow)] = !!overflow,
             _a['iui-visible'] = background !== 'none',
             _a), className) }, rest), children));
 };

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

package/esm/core/Tile/Tile.js

@@ -51,14 +51,19 @@ import { IconButton } from '../Buttons';
  * />
  */
 export 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"]);
     useTheme();
     var _b = React.useState(false), isMenuVisible = _b[0], setIsMenuVisible = _b[1];
     var showMenu = React.useCallback(function () { return setIsMenuVisible(true); }, []);
     var hideMenu = React.useCallback(function () { return setIsMenuVisible(false); }, []);
-    return (React.createElement("div", __assign({ className: cx('iui-tile', { 'iui-folder': variant === 'folder' }, { 'iui-new': isNew }, { 'iui-selected': isSelected }, className) }, rest),
+    return (React.createElement("div", __assign({ className: cx('iui-tile', {
+            'iui-folder': variant === 'folder',
+            'iui-new': isNew,
+            'iui-selected': isSelected,
+            'iui-actionable': isActionable,
+        }, className), tabIndex: isActionable ? 0 : undefined }, rest),
         thumbnail && (React.createElement("div", { className: 'iui-tile-thumbnail' },
-            typeof thumbnail === 'string' ? (React.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: "url(" + thumbnail + ")" } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
+            typeof thumbnail === 'string' ? (React.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: "url(".concat(thumbnail, ")") } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
                 className: 'iui-tile-thumbnail-picture',
             })) : React.isValidElement(thumbnail) ? (React.cloneElement(thumbnail, {
                 className: cx('iui-thumbnail-icon', thumbnail.props.className),

package/esm/core/Toast/Toast.js

@@ -117,7 +117,7 @@ export 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';
@@ -133,10 +133,10 @@ export var Toast = function (props) {
 export 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 = StatusIconMap[category];
-    return (React.createElement("div", __assign({ className: cx("iui-toast iui-" + category, className) }, rest),
+    return (React.createElement("div", __assign({ className: cx("iui-toast iui-".concat(category), className) }, rest),
         React.createElement("div", { className: 'iui-status-area' }, React.createElement(StatusIcon, { className: 'iui-icon' })),
         React.createElement("div", { className: 'iui-message' }, content),
-        link && (React.createElement("a", { className: 'iui-anchor', onClick: link.onClick }, link.title)),
+        link && (React.createElement("a", { className: 'iui-toast-anchor', onClick: link.onClick }, link.title)),
         (type === 'persisting' || hasCloseButton) && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
             React.createElement(SvgCloseSmall, null)))));
 };

package/esm/core/Toast/ToastWrapper.js

@@ -20,7 +20,7 @@ import Toast from './Toast';
 export 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.createElement("span", { className: cx("iui-toast-wrapper", "iui-placement-" + placement) }, toasts.map(function (toastProps) {
+    return (React.createElement("span", { className: cx("iui-toast-wrapper", "iui-placement-".concat(placement)) }, toasts.map(function (toastProps) {
         return (React.createElement(Toast, __assign({ key: toastProps.id, placementPosition: placementPosition }, toastProps)));
     })));
 };

package/esm/core/Tree/TreeNode.js

@@ -57,7 +57,7 @@ export var TreeNode = function (props) {
     var nodeRef = React.useRef(null);
     var styleDepth = React.useMemo(function () {
         var _a, _b, _c;
-        return ((_c = (_b = (_a = 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 = 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]);
@@ -73,7 +73,7 @@ export 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/esm/core/Typography/Anchor/Anchor.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
+import '@itwin/itwinui-css/css/anchor.css';
 export declare const Anchor: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>> & React.RefAttributes<HTMLAnchorElement>>;
 export default Anchor;

package/esm/core/Typography/Anchor/Anchor.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../../utils';
+import '@itwin/itwinui-css/css/anchor.css';
 export var Anchor = React.forwardRef(function (_a, ref) {
     var className = _a.className, rest = __rest(_a, ["className"]);
     useTheme();

package/esm/core/Typography/Text/Text.js

@@ -43,7 +43,7 @@ export var Text = React.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"]);
     useTheme();
     return (React.createElement(Element, __assign({ className: cx((_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/esm/core/UserIcon/UserIcon.js

@@ -54,10 +54,10 @@ export 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"]);
     useTheme();
     var statusTitles = __assign(__assign({}, defaultStatusTitles), translatedStatusTitles);
-    return (React.createElement("span", __assign({ className: cx('iui-user-icon', (_a = {}, _a["iui-" + size] = size !== 'medium', _a), className), title: title, style: style }, rest), image !== null && image !== void 0 ? image : (React.createElement("abbr", { className: 'iui-initials', style: { backgroundColor: backgroundColor } }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
+    return (React.createElement("span", __assign({ className: cx('iui-user-icon', (_a = {}, _a["iui-".concat(size)] = size !== 'medium', _a), className), title: title, style: style }, rest), image !== null && image !== void 0 ? image : (React.createElement("abbr", { className: 'iui-initials', style: { backgroundColor: backgroundColor } }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
         React.createElement("span", { className: 'iui-stroke' }),
         status && (React.createElement("span", { title: statusTitles[status], className: cx('iui-status', (_b = {},
-                _b["iui-" + status] = !!status,
+                _b["iui-".concat(status)] = !!status,
                 _b)), "aria-label": statusTitles[status] }))));
 };
 export default UserIcon;

package/esm/core/UserIconGroup/UserIconGroup.js

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

package/esm/core/Wizard/Step.js

@@ -48,7 +48,7 @@ export var Step = function (props) {
     var stepShape = (React.createElement("li", __assign({ className: cx('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.createElement("div", { className: 'iui-wizard-track-content' },
             React.createElement("span", { className: 'iui-wizard-circle' }, type === 'workflow' ? title : index + 1)),
         type === 'default' && (React.createElement("span", { className: 'iui-wizard-step-name' }, title))));

package/esm/core/Wizard/Wizard.js

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

package/esm/core/index.d.ts

@@ -62,11 +62,15 @@ export { Select } from './Select';
 export type { SelectProps, SelectOption, ItemRendererProps } from './Select';
 export { SideNavigation, SidenavButton, SidenavSubmenu, SidenavSubmenuHeader, } from './SideNavigation';
 export type { SideNavigationProps, SidenavButtonProps, SidenavSubmenuProps, SidenavSubmenuHeaderProps, } from './SideNavigation';
+export { SkipToContentLink } from './SkipToContentLink';
+export type { SkipToContentLinkProps } from './SkipToContentLink';
 export { Slider } from './Slider';
 export type { SliderProps } from './Slider';
 export { StatusMessage } from './StatusMessage';
 export type { StatusMessageProps } from './StatusMessage';
-export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, } from './Table';
+export { Surface } from './Surface';
+export type { SurfaceProps } from './Surface';
+export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, ActionColumn, ExpanderColumn, SelectionColumn, } from './Table';
 export type { TableProps, TableFilterProps, TableFilterValue, DateRangeFilterOptions, FilterButtonBarProps, DefaultCellProps, EditableCellProps, TablePaginatorProps, TablePaginatorRendererProps, } from './Table';
 export { Tag, TagContainer } from './Tag';
 export type { TagProps, TagContainerProps } from './Tag';

package/esm/core/index.js

@@ -34,9 +34,11 @@ export { Radio } from './Radio';
 export { RadioTile, RadioTileGroup } from './RadioTiles';
 export { Select } from './Select';
 export { SideNavigation, SidenavButton, SidenavSubmenu, SidenavSubmenuHeader, } from './SideNavigation';
+export { SkipToContentLink } from './SkipToContentLink';
 export { Slider } from './Slider';
 export { StatusMessage } from './StatusMessage';
-export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, } from './Table';
+export { Surface } from './Surface';
+export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, ActionColumn, ExpanderColumn, SelectionColumn, } from './Table';
 export { Tag, TagContainer } from './Tag';
 export { Textarea } from './Textarea';
 export { Tile } from './Tile';