@itwin/itwinui-react 1.36.0 → 1.37.2

package/esm/core/Footer/Footer.js

@@ -64,7 +64,7 @@ export var Footer = function (props) {
     var defaultElements = [
         {
             key: 'copyright',
-            title: "\u00A9 " + new Date().getFullYear() + " Bentley Systems, Incorporated",
+            title: "\u00A9 ".concat(new Date().getFullYear(), " Bentley Systems, Incorporated"),
         },
         {
             key: 'termsOfService',
@@ -101,7 +101,7 @@ export var Footer = function (props) {
     }
     return (React.createElement("footer", __assign({ className: cx('iui-legal-footer', className) }, rest),
         React.createElement("ul", null, elements.map(function (element, index) {
-            return (React.createElement("li", { key: element.key || element.title + "-" + index },
+            return (React.createElement("li", { key: element.key || "".concat(element.title, "-").concat(index) },
                 index > 0 && React.createElement("span", { className: 'iui-separator' }),
                 element.url ? (React.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title)));
         }))));

package/esm/core/Header/HeaderBreadcrumbs.js

@@ -52,7 +52,7 @@ export var HeaderBreadcrumbs = function (props) {
     useTheme();
     return (React.createElement("nav", __assign({ "aria-label": 'breadcrumbs' }, rest), items.reduce(function (previous, current, index) { return __spreadArray(__spreadArray([], previous, true), [
         current,
-        index !== items.length - 1 && (React.createElement(SvgChevronRight, { key: "chevron" + index, "aria-hidden": true, className: 'iui-chevron' })),
+        index !== items.length - 1 && (React.createElement(SvgChevronRight, { key: "chevron".concat(index), "aria-hidden": true, className: 'iui-chevron' })),
     ], false); }, [])));
 };
 export default HeaderBreadcrumbs;

package/esm/core/Header/HeaderButton.js

@@ -55,6 +55,7 @@ export var HeaderButton = React.forwardRef(function (props, ref) {
             : undefined, styleType: 'borderless', className: cx({
             'iui-header-button': !isSplitButton(props),
             'iui-header-split-button': isSplitButton(props),
+            'iui-header-dropdown-button': !isSplitButton(props) && isDropdownButton(props),
             'iui-active': isActive,
         }, className), 'aria-current': isActive ? 'location' : undefined, children: (React.createElement(React.Fragment, null,
             React.createElement("div", null, name),

package/esm/core/InformationPanel/InformationPanel.js

@@ -76,10 +76,10 @@ export var InformationPanel = React.forwardRef(function (props, ref) {
         }
         var _a = infoPanelRef.current.getBoundingClientRect(), right = _a.right, bottom = _a.bottom;
         if (orientation === 'vertical') {
-            infoPanelRef.current.style.width = right - e.clientX + "px";
+            infoPanelRef.current.style.width = "".concat(right - e.clientX, "px");
         }
         else {
-            infoPanelRef.current.style.height = bottom - e.clientY + "px";
+            infoPanelRef.current.style.height = "".concat(bottom - e.clientY, "px");
         }
     }, [orientation]);
     return (React.createElement("div", __assign({ className: cx('iui-information-panel', {

package/esm/core/Input/Input.js

@@ -46,6 +46,6 @@ export var Input = React.forwardRef(function (props, ref) {
             inputRef.current.focus();
         }
     }, [setFocus]);
-    return (React.createElement("input", __assign({ className: cx('iui-input', (_a = {}, _a["iui-" + size] = !!size, _a), className), ref: refs }, rest)));
+    return (React.createElement("input", __assign({ className: cx('iui-input', (_a = {}, _a["iui-".concat(size)] = !!size, _a), className), ref: refs }, rest)));
 });
 export default Input;

package/esm/core/ProgressIndicators/ProgressLinear/ProgressLinear.d.ts

@@ -15,7 +15,7 @@ export declare type ProgressLinearProps = {
     /**
      * Labels array. One label will be centered, two will be put to the sides.
      */
-    labels?: React.ReactNodeArray;
+    labels?: React.ReactNode[];
     /**
      * Apply animation to the value change, if determinate.
      * @default false

package/esm/core/ProgressIndicators/ProgressLinear/ProgressLinear.js

@@ -49,13 +49,13 @@ export var ProgressLinear = function (props) {
     useTheme();
     var boundedValue = Math.min(100, Math.max(0, value));
     return (React.createElement("div", __assign({ className: cx('iui-progress-indicator-linear', (_a = {},
-            _a["iui-" + status] = !!status,
+            _a["iui-".concat(status)] = !!status,
             _a), className), style: style }, rest),
         React.createElement("div", { className: 'iui-track' },
             React.createElement("div", { className: cx('iui-fill', {
                     'iui-determinate': !indeterminate && isAnimated,
                     'iui-indeterminate': indeterminate,
-                }), style: { width: indeterminate ? '100%' : boundedValue + "%" } })),
+                }), style: { width: indeterminate ? '100%' : "".concat(boundedValue, "%") } })),
         labels.length > 0 && (React.createElement("div", { className: 'iui-label' }, labels.map(function (label, index) { return (React.createElement("span", { key: index }, label)); })))));
 };
 export default ProgressLinear;

package/esm/core/ProgressIndicators/ProgressRadial/ProgressRadial.js

@@ -63,8 +63,8 @@ export var ProgressRadial = function (props) {
                 'iui-determinate': !indeterminate,
                 'iui-indeterminate': indeterminate
             },
-            _a["iui-" + size] = !!size,
-            _a["iui-" + status] = !!status,
+            _a["iui-".concat(size)] = !!size,
+            _a["iui-".concat(status)] = !!status,
             _a), className), style: style }, rest),
         React.createElement("svg", { className: 'iui-radial', viewBox: '0 0 32 32', "aria-hidden": 'true' },
             React.createElement("circle", { className: 'iui-track', cx: '16', cy: '16', r: '14' }),

package/esm/core/Radio/Radio.js

@@ -50,7 +50,7 @@ export var Radio = React.forwardRef(function (props, ref) {
         }
     }, [setFocus]);
     var radio = (React.createElement("input", __assign({ className: cx('iui-radio', className && (_a = {}, _a[className] = !label, _a), checkmarkClassName), style: __assign(__assign({}, (!label && style)), checkmarkStyle), disabled: disabled, type: 'radio', ref: refs }, rest)));
-    return !label ? (radio) : (React.createElement("label", { className: cx('iui-radio-wrapper', (_b = { 'iui-disabled': disabled }, _b["iui-" + status] = !!status, _b), className), style: style },
+    return !label ? (radio) : (React.createElement("label", { className: cx('iui-radio-wrapper', (_b = { 'iui-disabled': disabled }, _b["iui-".concat(status)] = !!status, _b), className), style: style },
         radio,
         label && React.createElement("span", { className: 'iui-radio-label' }, label)));
 });

package/esm/core/Select/Select.js

@@ -127,7 +127,7 @@ export var Select = function (props) {
         return options.map(function (option, index) {
             var isSelected = value === option.value;
             var menuItem = itemRenderer ? (itemRenderer(option, { close: close, isSelected: isSelected })) : (React.createElement(MenuItem, null, option.label));
-            return React.cloneElement(menuItem, __assign(__assign({ key: option.label + "-" + index, isSelected: isSelected, onClick: function () {
+            return React.cloneElement(menuItem, __assign(__assign({ key: "".concat(option.label, "-").concat(index), isSelected: isSelected, onClick: function () {
                     !option.disabled && (onChange === null || onChange === void 0 ? void 0 : onChange(option.value));
                     close();
                 }, ref: function (el) { return isSelected && (el === null || el === void 0 ? void 0 : el.scrollIntoView()); }, role: 'option' }, option), menuItem.props));
@@ -140,7 +140,7 @@ export var Select = function (props) {
         return options.find(function (option) { return option.value === value; });
     }, [options, value]);
     return (React.createElement("div", __assign({ className: cx('iui-input-with-icon', className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
-        React.createElement(DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: cx('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(" + minWidth * 2 + "px, 90vw)", maxHeight: "300px" }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen, onClickOutside: function (_, _a) {
+        React.createElement(DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: cx('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"), maxHeight: "300px" }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen, onClickOutside: function (_, _a) {
                 var _b;
                 var target = _a.target;
                 if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {
@@ -151,7 +151,7 @@ export var Select = function (props) {
                         'iui-placeholder': !selectedItem && !!placeholder,
                         'iui-disabled': disabled
                     },
-                    _a["iui-" + size] = !!size,
+                    _a["iui-".concat(size)] = !!size,
                     _a)), onClick: function () { return !disabled && toggle(); }, onKeyDown: function (e) { return !disabled && onKeyDown(e, toggle); }, tabIndex: !disabled ? 0 : undefined },
                 !selectedItem && React.createElement("span", { className: 'iui-content' }, placeholder),
                 selectedItem &&

package/esm/core/SkipToContentLink/SkipToContentLink.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/skip-to-content.css';
+export declare type SkipToContentLinkProps = {
+    /**
+     * The id of the main content that the link directs to. Don't forget the #!
+     */
+    href: string;
+    /**
+     * Localize 'Skip to main content' label.
+     * @default 'Skip to main content'
+     */
+    children?: React.ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<'a'>, 'href'>;
+/**
+ * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
+ * Provides a shortcut to the main content of the page without navigating through the header, etc.
+ * Should be placed just inside the body. Set `href` to the id of your main content component. Don't forget the `#`!
+ * @example
+ * <body><SkipToContentLink href='#main-content-id' /> ... </body>
+ * <body><SkipToContentLink href='#main-content-id'>{localizedLabel}</SkipToContentLink> ... </body>
+ */
+export declare const SkipToContentLink: React.ForwardRefExoticComponent<{
+    /**
+     * The id of the main content that the link directs to. Don't forget the #!
+     */
+    href: string;
+    /**
+     * Localize 'Skip to main content' label.
+     * @default 'Skip to main content'
+     */
+    children?: React.ReactNode;
+} & Omit<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>>, "href"> & React.RefAttributes<HTMLAnchorElement>>;
+export default SkipToContentLink;

package/esm/core/SkipToContentLink/SkipToContentLink.js

@@ -0,0 +1,44 @@
+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;
+};
+/*---------------------------------------------------------------------------------------------
+ * 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 cx from 'classnames';
+import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/skip-to-content.css';
+/**
+ * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
+ * Provides a shortcut to the main content of the page without navigating through the header, etc.
+ * Should be placed just inside the body. Set `href` to the id of your main content component. Don't forget the `#`!
+ * @example
+ * <body><SkipToContentLink href='#main-content-id' /> ... </body>
+ * <body><SkipToContentLink href='#main-content-id'>{localizedLabel}</SkipToContentLink> ... </body>
+ */
+export var SkipToContentLink = React.forwardRef(function (props, ref) {
+    var _a = props.children, children = _a === void 0 ? 'Skip to main content' : _a, className = props.className, rest = __rest(props, ["children", "className"]);
+    useTheme();
+    return (React.createElement("a", __assign({ ref: ref, className: cx('iui-skip-to-content-link', className) }, rest), children));
+});
+export default SkipToContentLink;

package/esm/core/SkipToContentLink/index.d.ts

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

package/esm/core/SkipToContentLink/index.js

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { SkipToContentLink } from './SkipToContentLink';
+export default './SkipToContentLink';

package/esm/core/Slider/Slider.js

@@ -74,7 +74,7 @@ var focusThumb = function (sliderContainer, activeIndex) {
     var doc = sliderContainer.ownerDocument;
     if (!sliderContainer.contains(doc.activeElement) ||
         Number((_a = doc.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-index')) !== activeIndex) {
-        var thumbToFocus = sliderContainer.querySelector("[data-index=\"" + activeIndex + "\"]");
+        var thumbToFocus = sliderContainer.querySelector("[data-index=\"".concat(activeIndex, "\"]"));
         thumbToFocus && thumbToFocus.focus();
     }
 };

package/esm/core/Slider/Thumb.js

@@ -67,5 +67,5 @@ export var Thumb = function (props) {
     var leftPercent = (100.0 * (value - sliderMin)) / (sliderMax - sliderMin);
     var _c = thumbProps || {}, style = _c.style, className = _c.className, rest = __rest(_c, ["style", "className"]);
     return (React.createElement(Tooltip, __assign({ visible: isActive || hasFocus || isHovered, placement: 'top' }, tooltipProps),
-        React.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), { left: leftPercent + "%" }), className: cx('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: handleOnKeyDown, onFocus: function () { return setHasFocus(true); }, onBlur: function () { return setHasFocus(false); }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }))));
+        React.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), { left: "".concat(leftPercent, "%") }), className: cx('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: handleOnKeyDown, onFocus: function () { return setHasFocus(true); }, onBlur: function () { return setHasFocus(false); }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }))));
 };

package/esm/core/Slider/Track.js

@@ -49,6 +49,6 @@ export var Track = function (props) {
             var leftPercent = (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin);
             var rightPercent = (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin);
             rightPercent = 100.0 - rightPercent;
-            return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement("div", { className: 'iui-slider-track', style: { left: leftPercent + "%", right: rightPercent + "%" } })) : null));
+            return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement("div", { className: 'iui-slider-track', style: { left: "".concat(leftPercent, "%"), right: "".concat(rightPercent, "%") } })) : null));
         })));
 };

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

@@ -0,0 +1,64 @@
+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;
+};
+/*---------------------------------------------------------------------------------------------
+ * 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 cx from 'classnames';
+import { useTheme, getWindow } from '../utils';
+import '@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>
+ */
+export var Surface = React.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"]);
+    useTheme();
+    var _style = ((_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, "--iui-surface-elevation: ".concat(getSurfaceElevationValue(elevation))))
+        ? __assign({ '--iui-surface-elevation': getSurfaceElevationValue(elevation) }, style) : __assign({ boxShadow: getSurfaceElevationValue(elevation) }, style);
+    return (React.createElement("div", __assign({ className: cx('iui-surface', className), style: _style, ref: ref }, rest), children));
+});
+export default Surface;

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

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { Surface } from './Surface';
+export default './Surface';

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

@@ -43,6 +43,16 @@ import { SELECTION_CELL_ID } from './columns';
 var singleRowSelectedAction = 'singleRowSelected';
 export var 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
@@ -87,8 +97,7 @@ var tableResizeEndAction = 'tableResizeEnd';
  */
 export 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"]);
     useTheme();
     var _q = React.useState(), ownerDocument = _q[0], setOwnerDocument = _q[1];
     var defaultColumn = React.useMemo(function () { return ({
@@ -103,7 +112,10 @@ export 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 === SELECTION_CELL_ID; });
+    var hasManualSelectionColumn = React.useMemo(function () {
+        var flatColumns = flattenColumns(columns);
+        return flatColumns.some(function (column) { return column.id === SELECTION_CELL_ID; });
+    }, [columns]);
     var tableStateReducer = React.useCallback(function (newState, action, previousState, instance) {
         switch (action.type) {
             case TableActions.toggleSortBy:
@@ -159,7 +171,7 @@ export var Table = function (props) {
             return getSubRows ? getSubRows(item, index) : item.subRows;
         });
     }, [data, getSubRows]);
-    var instance = 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) }), useFlexLayout, useResizeColumns(ownerDocument), useFilters, useSubRowFiltering(hasAnySubRows), useSortBy, useExpanded, usePagination, useRowSelect, useSubRowSelection, useExpanderCell(subComponent, expanderCell, isRowDisabled), useSelectionCell(isSelectable, isRowDisabled), useColumnOrder, useColumnDragAndDrop(enableColumnReordering));
+    var instance = 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) }), useFlexLayout, useResizeColumns(ownerDocument), useFilters, useSubRowFiltering(hasAnySubRows), useSortBy, useExpanded, usePagination, useRowSelect, useSubRowSelection, useExpanderCell(subComponent, expanderCell, isRowDisabled), useSelectionCell(isSelectable, selectionMode, isRowDisabled), useColumnOrder, 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];
@@ -171,8 +183,14 @@ export var Table = function (props) {
     var areFiltersSet = allColumns.some(function (column) { return !!column.filterValue; });
     var onRowClickHandler = React.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,
@@ -182,10 +200,14 @@ export 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.useEffect(function () {
         setPageSize(pageSize);
     }, [pageSize, setPageSize]);
@@ -266,7 +288,7 @@ export var Table = function (props) {
                     resizeRef(element);
                 }
             }, id: id }, getTableProps({
-            className: cx('iui-table', (_a = {}, _a["iui-" + density] = density !== 'default', _a), className),
+            className: cx('iui-table', (_a = {}, _a["iui-".concat(density)] = density !== 'default', _a), className),
             style: style,
         }), ariaDataAttributes),
             React.createElement("div", { className: 'iui-table-header', ref: headerRef }, headerGroups.slice(1).map(function (headerGroup) {
@@ -283,7 +305,7 @@ export var Table = function (props) {
                         } }),
                         column.render('Header'),
                         (data.length !== 0 || areFiltersSet) && (React.createElement(FilterToggle, { column: column, ownerDocument: ownerDocument })),
-                        data.length !== 0 && column.canSort && (React.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (React.createElement(SvgSortUp, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (React.createElement(SvgSortDown, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
+                        data.length !== 0 && column.canSort && (React.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (React.createElement(SvgSortDown, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (React.createElement(SvgSortUp, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
                         isResizable &&
                             column.isResizerVisible &&
                             index !== headerGroup.headers.length - 1 && (React.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),

package/esm/core/Table/TablePaginator.js

@@ -34,15 +34,15 @@ import { ProgressRadial } from '../ProgressIndicators';
 import { MenuItem } from '../Menu';
 import { getBoundedValue, useTheme, useOverflow, useContainerWidth, } from '../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',
 };
 /**
@@ -66,12 +66,12 @@ export var TablePaginator = function (props) {
     var needFocus = React.useRef(false);
     var isMounted = React.useRef(false);
     React.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/esm/core/Table/TableRowMemoized.js

@@ -31,7 +31,7 @@ export var TableRow = function (props) {
         isLast && ((_b = onBottomReached.current) === null || _b === void 0 ? void 0 : _b.call(onBottomReached));
     }, [isLast, onBottomReached, onRowInViewport, row.original]);
     var rowRef = 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/esm/core/Table/cells/EditableCell.js

@@ -36,7 +36,8 @@ import React from 'react';
  * }
  */
 export 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/esm/core/Table/columns/actionColumn.js

@@ -72,8 +72,8 @@ export var ActionColumn = function (_a) {
                         // 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(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-".concat(column.id) }), onClick: onClick, disabled: column.disableToggleVisibility },
+                        React.createElement("div", { id: "iui-column-".concat(column.id) }, column.render('Header'))));
                 });
             };
             return (React.createElement(DropdownMenu, { menuItems: headerCheckBoxes, onHide: function () { return setIsOpen(false); }, onShow: function () { return setIsOpen(true); } },

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

@@ -8,12 +8,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { SelectionColumn, SELECTION_CELL_ID } from '../columns';
-export var useSelectionCell = function (isSelectable, isRowDisabled) { return function (hooks) {
+export 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 === SELECTION_CELL_ID; })
+        return selectionMode === 'single' ||
+            columns.find(function (c) { return c.id === SELECTION_CELL_ID; })
             ? columns
             : __spreadArray([SelectionColumn({ isDisabled: isRowDisabled })], columns, true);
     });