@itwin/itwinui-react 1.37.0 → 1.37.3

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' },

package/esm/core/Footer/Footer.js

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

package/esm/core/Header/HeaderBreadcrumbs.js

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

package/esm/core/InformationPanel/InformationPanel.js

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

package/esm/core/Input/Input.js

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

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

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

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

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

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

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

package/esm/core/Radio/Radio.js

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

package/esm/core/Select/Select.js

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

package/esm/core/Slider/Slider.js

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

package/esm/core/Slider/Thumb.js

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

package/esm/core/Slider/Track.js

@@ -23,10 +23,18 @@ function shouldDisplaySegment(segmentIndex, mode) {
 }
 function generateSegments(values, min, max) {
     var segments = [];
+    var newValues = __spreadArray([], values, true);
+    newValues.sort(function (a, b) { return a - b; });
+    if (0 === newValues.length ||
+        newValues[0] < min ||
+        newValues[newValues.length - 1] > max ||
+        min === max) {
+        return [];
+    }
     var lastValue = min;
-    for (var i = 0; i < values.length; i++) {
-        segments.push({ left: lastValue, right: values[i] });
-        lastValue = values[i];
+    for (var i = 0; i < newValues.length; i++) {
+        segments.push({ left: lastValue, right: newValues[i] });
+        lastValue = newValues[i];
     }
     segments.push({ left: lastValue, right: max });
     return segments;
@@ -37,18 +45,21 @@ function generateSegments(values, min, max) {
  */
 export var Track = function (props) {
     var trackDisplayMode = props.trackDisplayMode, sliderMin = props.sliderMin, sliderMax = props.sliderMax, values = props.values;
-    var _a = React.useState(__spreadArray([], values, true).sort(function (a, b) { return a - b; })), currentValues = _a[0], setCurrentValues = _a[1];
+    var _a = React.useState(function () {
+        return generateSegments(values, sliderMin, sliderMax);
+    }), segments = _a[0], setSegments = _a[1];
     React.useEffect(function () {
-        var newValues = __spreadArray([], values, true);
-        newValues.sort(function (a, b) { return a - b; });
-        setCurrentValues(newValues);
-    }, [values]);
-    var segments = React.useMemo(function () { return generateSegments(currentValues, sliderMin, sliderMax); }, [currentValues, sliderMin, sliderMax]);
+        setSegments(generateSegments(values, sliderMin, sliderMax));
+    }, [values, sliderMin, sliderMax]);
     return (React.createElement(React.Fragment, null, 'none' !== trackDisplayMode &&
         segments.map(function (segment, index) {
-            var leftPercent = (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin);
-            var rightPercent = (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin);
-            rightPercent = 100.0 - rightPercent;
-            return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement("div", { className: 'iui-slider-track', style: { left: leftPercent + "%", right: rightPercent + "%" } })) : null));
+            var leftPercent = segment.left >= sliderMin && sliderMax !== sliderMin
+                ? (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin)
+                : 0;
+            var rightPercent = segment.right >= sliderMin && sliderMax !== sliderMin
+                ? 100.0 -
+                    (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin)
+                : 100;
+            return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement("div", { className: 'iui-slider-track', style: { left: "".concat(leftPercent, "%"), right: "".concat(rightPercent, "%") } })) : null));
         })));
 };

package/esm/core/Surface/Surface.js

@@ -57,7 +57,7 @@ export var Surface = React.forwardRef(function (props, ref) {
     var _a, _b, _c;
     var _d = props.elevation, elevation = _d === void 0 ? 0 : _d, className = props.className, style = props.style, children = props.children, rest = __rest(props, ["elevation", "className", "style", "children"]);
     useTheme();
-    var _style = ((_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-surface-elevation: " + getSurfaceElevationValue(elevation)))
+    var _style = ((_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-surface-elevation: ".concat(getSurfaceElevationValue(elevation))))
         ? __assign({ '--iui-surface-elevation': getSurfaceElevationValue(elevation) }, style) : __assign({ boxShadow: getSurfaceElevationValue(elevation) }, style);
     return (React.createElement("div", __assign({ className: cx('iui-surface', className), style: _style, ref: ref }, rest), children));
 });