@itwin/itwinui-react 1.35.0 → 1.37.1

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,10 +140,10 @@ 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-anchor', onClick: link.onClick }, link.title)),
+        link && (react_1.default.createElement("a", { className: 'iui-toast-anchor', onClick: link.onClick }, link.title)),
         (type === 'persisting' || hasCloseButton) && (react_1.default.createElement(Buttons_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
             react_1.default.createElement(CloseSmall_1.default, null)))));
 };

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/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/cjs/core/Typography/Anchor/Anchor.js

@@ -33,6 +33,7 @@ exports.Anchor = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../../utils");
+require("@itwin/itwinui-css/css/anchor.css");
 exports.Anchor = react_1.default.forwardRef(function (_a, ref) {
     var className = _a.className, rest = __rest(_a, ["className"]);
     (0, utils_1.useTheme)();

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, ":");
     },
 };
 /**

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

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Alert = void 0;
-exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.StatusMessage = exports.Slider = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = void 0;
-exports.MiddleTextTruncation = void 0;
+exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = void 0;
+exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -104,10 +104,14 @@ Object.defineProperty(exports, "SideNavigation", { enumerable: true, get: functi
 Object.defineProperty(exports, "SidenavButton", { enumerable: true, get: function () { return SideNavigation_1.SidenavButton; } });
 Object.defineProperty(exports, "SidenavSubmenu", { enumerable: true, get: function () { return SideNavigation_1.SidenavSubmenu; } });
 Object.defineProperty(exports, "SidenavSubmenuHeader", { enumerable: true, get: function () { return SideNavigation_1.SidenavSubmenuHeader; } });
+var SkipToContentLink_1 = require("./SkipToContentLink");
+Object.defineProperty(exports, "SkipToContentLink", { enumerable: true, get: function () { return SkipToContentLink_1.SkipToContentLink; } });
 var Slider_1 = require("./Slider");
 Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
 var StatusMessage_1 = require("./StatusMessage");
 Object.defineProperty(exports, "StatusMessage", { enumerable: true, get: function () { return StatusMessage_1.StatusMessage; } });
+var Surface_1 = require("./Surface");
+Object.defineProperty(exports, "Surface", { enumerable: true, get: function () { return Surface_1.Surface; } });
 var Table_1 = require("./Table");
 Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return Table_1.Table; } });
 Object.defineProperty(exports, "tableFilters", { enumerable: true, get: function () { return Table_1.tableFilters; } });
@@ -115,6 +119,9 @@ Object.defineProperty(exports, "FilterButtonBar", { enumerable: true, get: funct
 Object.defineProperty(exports, "DefaultCell", { enumerable: true, get: function () { return Table_1.DefaultCell; } });
 Object.defineProperty(exports, "EditableCell", { enumerable: true, get: function () { return Table_1.EditableCell; } });
 Object.defineProperty(exports, "TablePaginator", { enumerable: true, get: function () { return Table_1.TablePaginator; } });
+Object.defineProperty(exports, "ActionColumn", { enumerable: true, get: function () { return Table_1.ActionColumn; } });
+Object.defineProperty(exports, "ExpanderColumn", { enumerable: true, get: function () { return Table_1.ExpanderColumn; } });
+Object.defineProperty(exports, "SelectionColumn", { enumerable: true, get: function () { return Table_1.SelectionColumn; } });
 var Tag_1 = require("./Tag");
 Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
 Object.defineProperty(exports, "TagContainer", { enumerable: true, get: function () { return Tag_1.TagContainer; } });

package/cjs/core/utils/color/ColorValue.js

@@ -334,9 +334,9 @@ var ColorValue = /** @class */ (function () {
             if (value < 0) {
                 value = 0xffffffff + value + 1;
             }
-            return "#" + ("00000000" + value.toString(16)).slice(-8);
+            return "#".concat("00000000".concat(value.toString(16)).slice(-8));
         }
-        return "#" + ("000000" + this.getRgb().toString(16)).slice(-6);
+        return "#".concat("000000".concat(this.getRgb().toString(16)).slice(-6));
     };
     /**
      * Compute the 0xTTBBGGRR color corresponding to the specified hue, saturation, lightness values.
@@ -496,34 +496,34 @@ var ColorValue = /** @class */ (function () {
     ColorValue.prototype.toRgbString = function (includeAlpha) {
         var _a;
         var rgb = this.toRgbColor();
-        var rgbString = rgb.r + ", " + rgb.g + ", " + rgb.b;
+        var rgbString = "".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b);
         if (includeAlpha) {
             var alpha = (_a = rgb.a) !== null && _a !== void 0 ? _a : 1;
-            return "rgba(" + rgbString + ", " + ColorValue.getFormattedColorNumber(alpha, 2) + ")";
+            return "rgba(".concat(rgbString, ", ").concat(ColorValue.getFormattedColorNumber(alpha, 2), ")");
         }
-        return "rgb(" + rgbString + ")";
+        return "rgb(".concat(rgbString, ")");
     };
     /** Convert this ColorValue to a string in the form "hsl(h,s,l) or hsla(h,s,l,a)" - i.e hsl(120,50%,50%). */
     ColorValue.prototype.toHslString = function (includeAlpha) {
         var _a, _b;
         var hsl = this.toHslColor();
-        var hslString = ColorValue.getFormattedColorNumber((_a = this._hue) !== null && _a !== void 0 ? _a : hsl.h) + ", " + ColorValue.getFormattedColorNumber(hsl.s) + "%, " + ColorValue.getFormattedColorNumber(hsl.l) + "%";
+        var hslString = "".concat(ColorValue.getFormattedColorNumber((_a = this._hue) !== null && _a !== void 0 ? _a : hsl.h), ", ").concat(ColorValue.getFormattedColorNumber(hsl.s), "%, ").concat(ColorValue.getFormattedColorNumber(hsl.l), "%");
         if (includeAlpha) {
             var alpha = (_b = hsl.a) !== null && _b !== void 0 ? _b : 1;
-            return "hsla(" + hslString + ", " + ColorValue.getFormattedColorNumber(alpha, 2) + ")";
+            return "hsla(".concat(hslString, ", ").concat(ColorValue.getFormattedColorNumber(alpha, 2), ")");
         }
-        return "hsl(" + hslString + ")";
+        return "hsl(".concat(hslString, ")");
     };
     /** Convert this ColorValue to a string in the form "hsv(h,s,v) or hsva(h,s,v,a)" - i.e hsv(120,50%,50%). */
     ColorValue.prototype.toHsvString = function (includeAlpha) {
         var _a, _b;
         var hsv = this.toHsvColor();
-        var hsvString = ((_a = this._hue) !== null && _a !== void 0 ? _a : hsv.h) + ", " + hsv.s + "%, " + hsv.v + "%";
+        var hsvString = "".concat((_a = this._hue) !== null && _a !== void 0 ? _a : hsv.h, ", ").concat(hsv.s, "%, ").concat(hsv.v, "%");
         if (includeAlpha) {
             var alpha = (_b = hsv.a) !== null && _b !== void 0 ? _b : 1;
-            return "hsva(" + hsvString + ", " + ColorValue.getFormattedColorNumber(alpha, 2) + ")";
+            return "hsva(".concat(hsvString, ", ").concat(ColorValue.getFormattedColorNumber(alpha, 2), ")");
         }
-        return "hsv(" + hsvString + ")";
+        return "hsv(".concat(hsvString, ")");
     };
     return ColorValue;
 }());

package/cjs/core/utils/color/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/cjs/core/utils/components/FocusTrap.js

@@ -25,23 +25,21 @@ var FocusTrap = function (props) {
         return [firstElement, lastElement];
     };
     var onFirstFocus = function (event) {
-        var _a, _b;
-        var _c = getFirstLastFocusables(), firstElement = _c[0], lastElement = _c[1];
+        var _a = getFirstLastFocusables(), firstElement = _a[0], lastElement = _a[1];
         if (event.relatedTarget === firstElement) {
-            (_a = lastElement) === null || _a === void 0 ? void 0 : _a.focus();
+            lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
         }
         else {
-            (_b = firstElement) === null || _b === void 0 ? void 0 : _b.focus();
+            firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
         }
     };
     var onLastFocus = function (event) {
-        var _a, _b;
-        var _c = getFirstLastFocusables(), firstElement = _c[0], lastElement = _c[1];
+        var _a = getFirstLastFocusables(), firstElement = _a[0], lastElement = _a[1];
         if (event.relatedTarget === lastElement) {
-            (_a = firstElement) === null || _a === void 0 ? void 0 : _a.focus();
+            firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
         }
         else {
-            (_b = lastElement) === null || _b === void 0 ? void 0 : _b.focus();
+            lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
         }
     };
     return (react_1.default.createElement("div", null,

package/cjs/core/utils/components/InputContainer.js

@@ -43,7 +43,7 @@ var InputContainer = function (props) {
     return (react_1.default.createElement(Element, __assign({ className: (0, classnames_1.default)('iui-input-container', (_a = {
                 'iui-disabled': disabled
             },
-            _a["iui-" + status] = !!status,
+            _a["iui-".concat(status)] = !!status,
             _a['iui-inline-label'] = isLabelInline,
             _a['iui-inline-icon'] = isIconInline,
             _a['iui-with-message'] = (!!message || !!icon || !!statusMessage) && !isLabelInline,

package/cjs/core/utils/components/MiddleTextTruncation.js

@@ -44,7 +44,7 @@ var MiddleTextTruncation = function (props) {
     var _b = (0, useOverflow_1.useOverflow)(text), ref = _b[0], visibleCount = _b[1];
     var truncatedText = react_1.default.useMemo(function () {
         if (visibleCount < text.length) {
-            return "" + text.substr(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length) + ELLIPSIS_CHAR + text.substr(text.length - endCharsCount);
+            return "".concat(text.substr(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)).concat(ELLIPSIS_CHAR).concat(text.substr(text.length - endCharsCount));
         }
         else {
             return text;

package/cjs/core/utils/components/Popover.js

@@ -78,7 +78,19 @@ exports.Popover = react_1.default.forwardRef(function (props, ref) {
         };
     }
     else {
-        computedProps.content = mounted ? props.content : '';
+        // Fixing issue where elements below Popover gets click events.
+        // Tippy uses react Portal, which propagates events by react tree, not dom tree.
+        // Read more: https://reactjs.org/docs/portals.html#event-bubbling-through-portals
+        var clonedContent = react_1.default.isValidElement(props.content)
+            ? react_1.default.cloneElement(props.content, {
+                onClick: function (e) {
+                    var _a, _b;
+                    e.stopPropagation();
+                    (_b = (_a = props.content.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                },
+            })
+            : props.content;
+        computedProps.content = mounted ? clonedContent : '';
     }
     return react_1.default.createElement(react_2.default, __assign({}, computedProps, { ref: refs }));
 });

package/cjs/core/utils/components/VirtualScroll.js

@@ -137,7 +137,7 @@ exports.VirtualScroll = react_1.default.forwardRef(function (_a, ref) {
         if (!parentRef.current) {
             return;
         }
-        parentRef.current.style.transform = "translateY(" + getTranslateValue(childHeight.current, startIndex) + "px)";
+        parentRef.current.style.transform = "translateY(".concat(getTranslateValue(childHeight.current, startIndex), "px)");
     }, [bufferSize, itemsLength]);
     var removeScrollListener = react_1.default.useCallback(function () {
         var _a, _b;

package/cjs/core/utils/components/WithCSSTransition.js

@@ -37,17 +37,17 @@ var WithCSSTransition = function (props) {
     var expandedSize = react_1.default.useRef(0);
     var dimensionCamelCase = dimension === 'height' ? 'Height' : 'Width';
     return (react_1.default.createElement(react_transition_group_1.CSSTransition, __assign({ in: visible, timeout: 200, unmountOnExit: true, onEnter: function (node) {
-            node.style["min" + dimensionCamelCase] = 'initial';
+            node.style["min".concat(dimensionCamelCase)] = 'initial';
             node.style[dimension] = '0px';
         }, onEntering: function (node) {
-            node.style[dimension] = expandedSize.current + "px";
+            node.style[dimension] = "".concat(expandedSize.current, "px");
         }, onEntered: function (node) {
-            node.style["min" + dimensionCamelCase] = '';
+            node.style["min".concat(dimensionCamelCase)] = '';
             node.style[dimension] = '';
         }, onExit: function (node) {
-            node.style[dimension] = expandedSize.current + "px";
+            node.style[dimension] = "".concat(expandedSize.current, "px");
         }, onExiting: function (node) {
-            node.style["min" + dimensionCamelCase] = 'initial';
+            node.style["min".concat(dimensionCamelCase)] = 'initial';
             node.style[dimension] = '0px';
         }, classNames: 'iui' }, rest), react_1.default.cloneElement(children, {
         ref: function (el) {

package/cjs/core/utils/components/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/cjs/core/utils/functions/focusable.js

@@ -28,7 +28,7 @@ var getFocusableElements = function (container) {
     if (!container) {
         return [];
     }
-    var elements = container.querySelectorAll(tabbableElementsSelector + ", [tabindex=\"-1\"]");
+    var elements = container.querySelectorAll("".concat(tabbableElementsSelector, ", [tabindex=\"-1\"]"));
     return Array.from(elements).filter(function (el) {
         return !el.hasAttribute('disabled') &&
             !el.classList.contains('iui-disabled') &&

package/cjs/core/utils/functions/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

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

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/cjs/core/utils/hooks/useOverflow.js

@@ -67,15 +67,15 @@ var useOverflow = function (items, disabled, orientation) {
             return;
         }
         var dimension = orientation === 'horizontal' ? 'Width' : 'Height';
-        var availableSize = containerRef.current["offset" + dimension];
-        var requiredSize = containerRef.current["scroll" + dimension];
+        var availableSize = containerRef.current["offset".concat(dimension)];
+        var requiredSize = containerRef.current["scroll".concat(dimension)];
         if (availableSize < requiredSize) {
             var avgItemSize = requiredSize / visibleCount;
             var visibleItems = Math.floor(availableSize / avgItemSize);
             setVisibleCount(visibleItems);
         }
         else if (needsFullRerender.current) {
-            var childrenSize = Array.from(containerRef.current.children).reduce(function (sum, child) { return sum + child["offset" + dimension]; }, 0);
+            var childrenSize = Array.from(containerRef.current.children).reduce(function (sum, child) { return sum + child["offset".concat(dimension)]; }, 0);
             var avgItemSize = childrenSize / visibleCount;
             var visibleItems = Math.floor(availableSize / avgItemSize);
             // Doubling the visible items to overflow the container. Just to be safe.

package/cjs/core/utils/hooks/useTheme.js

@@ -82,5 +82,5 @@ var applyTheme = function (theme, _a) {
     if (currentTheme) {
         classList.remove(currentTheme);
     }
-    classList.add("iui-theme-" + theme + (highContrast ? '-hc' : ''));
+    classList.add("iui-theme-".concat(theme).concat(highContrast ? '-hc' : ''));
 };

package/cjs/core/utils/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/cjs/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/cjs/types/react-table-config.d.ts

@@ -2,9 +2,22 @@
 declare module 'react-table' {
     type FieldType = 'text' | 'number' | 'date' | string;
     type CellRendererProps<D extends object = {}> = {
+        /**
+         * Cell HTML props passed from the Table.
+         */
         cellElementProps: TableCellProps;
+        /**
+         * Table specific cell props like `column`, `row`.
+         */
         cellProps: CellProps<D>;
+        /**
+         * Cell's content.
+         */
         children: React.ReactNode;
+        /**
+         * Function that returns whether the cell is disabled.
+         */
+        isDisabled?: (rowData: D) => boolean;
     };
     interface TableOptions<D extends object = {}> extends Omit<UseTableOptions<D>, 'data'>, UseRowSelectOptions<D>, UseExpandedOptions<D>, UseFiltersOptions<D>, UsePaginationOptions<D>, Omit<UseResizeColumnsOptions<D>, 'disableResizing'>, UseSortByOptions<D> {
         /**
@@ -73,6 +86,11 @@ declare module 'react-table' {
          * @default false
          */
         disableReordering?: boolean;
+        /**
+         * If true, column's visibility cannot be toggled.
+         * @default false
+         */
+        disableToggleVisibility?: boolean;
     }
     interface ColumnInstance<D extends object = {}> extends UseFiltersColumnProps<D>, UseGroupByColumnProps<D>, UseResizeColumnsColumnProps<D>, UseSortByColumnProps<D> {
         originalWidth: number;

package/esm/core/Alert/Alert.js

@@ -43,7 +43,7 @@ export var Alert = function (props) {
     var children = props.children, className = props.className, _a = props.type, type = _a === void 0 ? 'informational' : _a, clickableText = props.clickableText, clickableTextProps = props.clickableTextProps, onClick = props.onClick, onClose = props.onClose, style = props.style, _b = props.isSticky, isSticky = _b === void 0 ? false : _b, rest = __rest(props, ["children", "className", "type", "clickableText", "clickableTextProps", "onClick", "onClose", "style", "isSticky"]);
     useTheme();
     var StatusIcon = StatusIconMap[type];
-    return (React.createElement("div", __assign({ className: cx('iui-alert', "iui-" + type, { 'iui-sticky': isSticky }, className), style: style }, rest),
+    return (React.createElement("div", __assign({ className: cx('iui-alert', "iui-".concat(type), { 'iui-sticky': isSticky }, className), style: style }, rest),
         React.createElement(StatusIcon, { className: 'iui-alert-icon' }),
         React.createElement("span", { className: 'iui-alert-message' },
             children,

package/esm/core/Badge/Badge.js

@@ -60,7 +60,7 @@ export var Badge = function (props) {
     var backgroundColor = props.backgroundColor, style = props.style, className = props.className, children = props.children, rest = __rest(props, ["backgroundColor", "style", "className", "children"]);
     useTheme();
     var _style = backgroundColor &&
-        ((_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-badge-background-color: " + backgroundColor))
+        ((_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-badge-background-color: ".concat(backgroundColor)))
         ? __assign({ '--iui-badge-background-color': getBadgeColorValue(backgroundColor) }, style) : __assign({ backgroundColor: getBadgeColorValue(backgroundColor) }, style);
     return (React.createElement("span", __assign({ className: cx('iui-badge', className), style: _style }, rest), children));
 };

package/esm/core/Breadcrumbs/Breadcrumbs.d.ts

@@ -10,7 +10,7 @@ export declare type BreadcrumbsProps = {
     /**
      * Breadcrumb items.
      */
-    children: React.ReactNodeArray;
+    children: React.ReactNode[];
     /**
      * Specify a custom separator element to show between breadcrumb items.
      * Defaults to the `SvgChevronRight` icon.
@@ -48,7 +48,7 @@ export declare const Breadcrumbs: React.ForwardRefExoticComponent<{
     /**
      * Breadcrumb items.
      */
-    children: React.ReactNodeArray;
+    children: React.ReactNode[];
     /**
      * Specify a custom separator element to show between breadcrumb items.
      * Defaults to the `SvgChevronRight` icon.

package/esm/core/Buttons/Button/Button.js

@@ -41,8 +41,8 @@ export var Button = React.forwardRef(function (props, ref) {
     var _a;
     var children = props.children, className = props.className, size = props.size, style = props.style, _b = props.styleType, styleType = _b === void 0 ? 'default' : _b, _c = props.type, type = _c === void 0 ? 'button' : _c, startIcon = props.startIcon, endIcon = props.endIcon, _d = props.as, Element = _d === void 0 ? 'button' : _d, rest = __rest(props, ["children", "className", "size", "style", "styleType", "type", "startIcon", "endIcon", "as"]);
     useTheme();
-    return (React.createElement(Element, __assign({ ref: ref, className: cx('iui-button', "iui-" + styleType, (_a = {},
-            _a["iui-" + size] = !!size,
+    return (React.createElement(Element, __assign({ ref: ref, className: cx('iui-button', "iui-".concat(styleType), (_a = {},
+            _a["iui-".concat(size)] = !!size,
             _a), className), style: style, type: type }, rest),
         startIcon &&
             React.cloneElement(startIcon, {