@itwin/itwinui-react 1.36.0 → 1.37.2

package/cjs/core/index.d.ts

@@ -62,10 +62,14 @@ 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 { 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';

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.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.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = 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 = exports.ColorValue = exports.useTheme = exports.getUserColor = 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; } });

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/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/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, {

package/esm/core/Buttons/IconButton/IconButton.js

@@ -38,8 +38,8 @@ export var IconButton = React.forwardRef(function (props, ref) {
     var _a;
     var isActive = props.isActive, children = props.children, _b = props.styleType, styleType = _b === void 0 ? 'default' : _b, size = props.size, _c = props.type, type = _c === void 0 ? 'button' : _c, className = props.className, _d = props.as, Element = _d === void 0 ? 'button' : _d, rest = __rest(props, ["isActive", "children", "styleType", "size", "type", "className", "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['iui-active'] = isActive,
             _a), className), type: type }, rest), React.cloneElement(children, {
         className: cx('iui-button-icon', children.props.className),

package/esm/core/Carousel/Carousel.js

@@ -55,7 +55,7 @@ import { CarouselNavigation } from './CarouselNavigation';
 export var Carousel = Object.assign(React.forwardRef(function (props, ref) {
     var _a = props.activeSlideIndex, userActiveIndex = _a === void 0 ? 0 : _a, onSlideChange = props.onSlideChange, className = props.className, children = props.children, rest = __rest(props, ["activeSlideIndex", "onSlideChange", "className", "children"]);
     // Generate a stateful random id if not specified
-    var id = React.useState(function () { var _a; return (_a = props.id) !== null && _a !== void 0 ? _a : "iui-carousel-" + getRandomValue(10); })[0];
+    var id = React.useState(function () { var _a; return (_a = props.id) !== null && _a !== void 0 ? _a : "iui-carousel-".concat(getRandomValue(10)); })[0];
     useTheme();
     var isManuallyUpdating = React.useRef(false);
     var scrollInstantly = React.useRef(false);

package/esm/core/Carousel/CarouselDotsList.js

@@ -96,7 +96,7 @@ export var CarouselDotsList = React.forwardRef(function (props, ref) {
             var isSecondSmallDot = (index === firstVisibleDotIndex + 1 && index !== 1) ||
                 (index === lastVisibleDotIndex - 1 && index !== slideCount - 2);
             var isClipped = index < firstVisibleDotIndex || index > lastVisibleDotIndex;
-            return (React.createElement(CarouselDot, { key: index, "aria-label": "Slide " + index, isActive: index === currentIndex, onClick: function () { return handleSlideChange(index); }, isSmall: isSecondSmallDot, isSmaller: isFirstSmallDot || isClipped, id: idPrefix && idPrefix + "--dot-" + index, "aria-controls": idPrefix && idPrefix + "--slide-" + index }));
+            return (React.createElement(CarouselDot, { key: index, "aria-label": "Slide ".concat(index), isActive: index === currentIndex, onClick: function () { return handleSlideChange(index); }, isSmall: isSecondSmallDot, isSmaller: isFirstSmallDot || isClipped, id: idPrefix && "".concat(idPrefix, "--dot-").concat(index), "aria-controls": idPrefix && "".concat(idPrefix, "--slide-").concat(index) }));
         });
     }, [
         slideCount,

package/esm/core/Carousel/CarouselSlider.js

@@ -43,7 +43,7 @@ export var CarouselSlider = React.forwardRef(function (props, ref) {
         return (_a = React.Children.map(children, function (child, index) {
             return React.isValidElement(child)
                 ? React.cloneElement(child, {
-                    id: idPrefix + "--slide-" + index,
+                    id: "".concat(idPrefix, "--slide-").concat(index),
                     index: index,
                 })
                 : child;

package/esm/core/Checkbox/Checkbox.js

@@ -69,7 +69,7 @@ export var Checkbox = React.forwardRef(function (props, ref) {
     return !label ? (checkbox) : (React.createElement("label", { className: cx('iui-checkbox-wrapper', (_b = {
                 'iui-disabled': disabled
             },
-            _b["iui-" + status] = !!status,
+            _b["iui-".concat(status)] = !!status,
             _b['iui-loading'] = isLoading,
             _b), className), style: style },
         checkbox,

package/esm/core/ColorPicker/ColorBuilder.js

@@ -63,20 +63,20 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
     ]);
     var _p = React.useState(false), colorDotActive = _p[0], setColorDotActive = _p[1];
     var hueColorString = hueSliderColor.toHexString();
-    var colorSquareStyle = ((_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-color-field-hue: " + hueColorString))
+    var colorSquareStyle = ((_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-color-field-hue: ".concat(hueColorString)))
         ? {
             '--iui-color-field-hue': hueColorString,
             '--iui-color-picker-selected-color': dotColorString,
         }
         : { backgroundColor: hueColorString };
-    var opacitySliderStyle = ((_f = (_e = (_d = getWindow()) === null || _d === void 0 ? void 0 : _d.CSS) === null || _e === void 0 ? void 0 : _e.supports) === null || _f === void 0 ? void 0 : _f.call(_e, "--iui-color-picker-selected-color: " + hueColorString))
+    var opacitySliderStyle = ((_f = (_e = (_d = getWindow()) === null || _d === void 0 ? void 0 : _d.CSS) === null || _e === void 0 ? void 0 : _e.supports) === null || _f === void 0 ? void 0 : _f.call(_e, "--iui-color-picker-selected-color: ".concat(hueColorString)))
         ? { '--iui-color-picker-selected-color': hueColorString }
         : { backgroundColor: hueColorString };
     var squareTop = 100 - hsvColor.v;
     var squareLeft = hsvColor.s;
     var colorDotStyle = ((_j = (_h = (_g = getWindow()) === null || _g === void 0 ? void 0 : _g.CSS) === null || _h === void 0 ? void 0 : _h.supports) === null || _j === void 0 ? void 0 : _j.call(_h, "--iui-color-dot-inset: 0"))
         ? {
-            '--iui-color-dot-inset': squareTop.toString() + "% auto auto " + squareLeft.toString() + "%",
+            '--iui-color-dot-inset': "".concat(squareTop.toString(), "% auto auto ").concat(squareLeft.toString(), "%"),
         }
         : {
             backgroundColor: dotColorString,

package/esm/core/ColorPicker/ColorInputPanel.js

@@ -150,7 +150,7 @@ export var ColorInputPanel = React.forwardRef(function (props, ref) {
         React.createElement(Input, { size: 'small', maxLength: showAlpha ? 9 : 7, minLength: 1, placeholder: 'HEX', value: input[0], onChange: function (event) {
                 var value = event.target.value.startsWith('#')
                     ? event.target.value
-                    : "#" + event.target.value;
+                    : "#".concat(event.target.value);
                 setInput([value]);
             }, onKeyDown: function (event) {
                 if (event.key === 'Enter') {

package/esm/core/ColorPicker/ColorSwatch.d.ts

@@ -17,5 +17,5 @@ export declare type ColorSwatchProps = {
  * <ColorSwatch color='#23450b' onClick={onClick}/>
  * <ColorSwatch color={{ r: 255, g: 255, b: 0 }} onClick={onClick}/>
  */
-export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "aria-disabled" | "role" | "children" | "className" | "onClick" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "onFocus" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "isActive"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "aria-disabled" | "role" | "children" | "className" | "onClick" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "onFocus" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "isActive"> & React.RefAttributes<HTMLDivElement>>;
 export default ColorSwatch;

package/esm/core/ColorPicker/ColorSwatch.js

@@ -45,7 +45,7 @@ export var ColorSwatch = React.forwardRef(function (props, ref) {
     }, [color]);
     var _style = 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, "--iui-color-swatch-background: " + colorString))
+        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, "--iui-color-swatch-background: ".concat(colorString)))
             ? __assign({ '--iui-color-swatch-background': colorString }, style) : __assign({ backgroundColor: colorString }, style);
     }, [colorString, style]);
     return (React.createElement("div", __assign({ className: cx('iui-color-swatch', { 'iui-active': isActive }, className), style: _style, onClick: onClick, tabIndex: isActive ? 0 : -1, "aria-selected": isActive, ref: ref }, rest)));

package/esm/core/ComboBox/ComboBox.js

@@ -51,18 +51,21 @@ export var ComboBox = function (props) {
     // Generate a stateful random id if not specified
     var id = React.useState(function () {
         var _a, _b;
-        return (_b = (_a = props.id) !== null && _a !== void 0 ? _a : ((inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) && inputProps.id + "-cb")) !== null && _b !== void 0 ? _b : "iui-cb-" + getRandomValue(10);
+        return (_b = (_a = props.id) !== null && _a !== void 0 ? _a : ((inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) && "".concat(inputProps.id, "-cb"))) !== null && _b !== void 0 ? _b : "iui-cb-".concat(getRandomValue(10));
     })[0];
     useTheme();
     /** Generates a memoized id for an option, given the index from original list */
     var getOptionId = React.useCallback(function (index) {
         var _a;
-        return (_a = options[index].id) !== null && _a !== void 0 ? _a : id + "-option" + options.findIndex(function (_a) {
+        return (_a = options[index].id) !== null && _a !== void 0 ? _a : "".concat(id, "-option").concat(options.findIndex(function (_a) {
             var value = _a.value;
             return value === options[index].value;
-        });
+        }));
     }, [options, id]);
     var userOnChange = React.useRef(onChange);
+    React.useEffect(function () {
+        userOnChange.current = onChange;
+    }, [onChange]);
     var memoizedItems = React.useMemo(function () {
         return options.map(function (option, index) {
             var label = option.label, value = option.value, rest = __rest(option, ["label", "value"]);
@@ -278,9 +281,9 @@ export var ComboBox = function (props) {
                     if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {
                         setIsOpen(false);
                     }
-                }, animation: 'shift-away', duration: 200 }, dropdownMenuProps, { content: React.createElement(Menu, { id: id + "-list", className: 'iui-scroll', style: {
+                }, animation: 'shift-away', duration: 200 }, dropdownMenuProps, { content: React.createElement(Menu, { id: "".concat(id, "-list"), className: 'iui-scroll', style: {
                         minWidth: minWidth,
-                        maxWidth: "min(" + minWidth * 2 + "px, 90vw)",
+                        maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"),
                         maxHeight: 300,
                     }, setFocus: false, role: 'listbox', ref: menuRef }, menuItems), onHide: function (instance) {
                     var _a;
@@ -296,7 +299,7 @@ export var ComboBox = function (props) {
                 } }),
                 React.createElement(Input, __assign({ ref: inputRef, onKeyDown: onKeyDown, onFocus: function () { return setIsOpen(true); }, value: inputValue, "aria-activedescendant": isOpen && focusedIndex > -1
                         ? getOptionId(focusedIndex)
-                        : undefined, role: 'combobox', "aria-controls": isOpen ? id + "-list" : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off' }, inputProps, { onChange: onInput }))),
+                        : undefined, role: 'combobox', "aria-controls": isOpen ? "".concat(id, "-list") : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off' }, inputProps, { onChange: onInput }))),
             React.createElement("span", { ref: toggleButtonRef, className: cx('iui-end-icon', {
                     'iui-actionable': !(inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled),
                     'iui-disabled': inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled,

package/esm/core/DatePicker/DatePicker.js

@@ -288,9 +288,9 @@ export var DatePicker = function (props) {
                     React.createElement(SvgChevronRightDouble, null)))),
             React.createElement("div", { className: 'iui-calendar-weekdays' }, shortDays.map(function (day, index) { return (React.createElement("div", { key: day, title: longDays[index] }, day)); })),
             React.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map(function (weekDays, weekIndex) {
-                return (React.createElement("div", { key: "week-" + displayedMonthIndex + "-" + weekIndex, className: 'iui-calendar-week' }, weekDays.map(function (weekDay, dayIndex) {
+                return (React.createElement("div", { key: "week-".concat(displayedMonthIndex, "-").concat(weekIndex), className: 'iui-calendar-week' }, weekDays.map(function (weekDay, dayIndex) {
                     var dateValue = weekDay.getDate();
-                    return (React.createElement("div", { key: "day-" + displayedMonthIndex + "-" + dayIndex, className: getDayClass(weekDay), onClick: function () { return onDayClick(weekDay); }, role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, ref: function (element) {
+                    return (React.createElement("div", { key: "day-".concat(displayedMonthIndex, "-").concat(dayIndex), className: getDayClass(weekDay), onClick: function () { return onDayClick(weekDay); }, role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, ref: function (element) {
                             return isSameDay(weekDay, focusedDay) &&
                                 needFocus.current &&
                                 (element === null || element === void 0 ? void 0 : element.focus());

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -71,7 +71,7 @@ export var ExpandableBlock = function (props) {
                 caption && React.createElement("div", { className: 'iui-caption' }, caption)),
             icon &&
                 React.cloneElement(icon, {
-                    className: cx('iui-status-icon', (_a = {}, _a["iui-" + status] = !!status, _a), icon.props.className),
+                    className: cx('iui-status-icon', (_a = {}, _a["iui-".concat(status)] = !!status, _a), icon.props.className),
                 })),
         React.createElement(WithCSSTransition, { in: expanded },
             React.createElement("div", { className: 'iui-expandable-content' },