@itwin/itwinui-react 1.37.0 → 1.37.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+### [1.37.3](https://www.github.com/iTwin/iTwinUI-react/compare/v1.37.2...v1.37.3) (2022-05-06)
+
+### Fixes
+
+* **Slider:** Skip drawing track if thumb values are out of range ([#652](https://www.github.com/iTwin/iTwinUI-react/issues/652)) ([38d6574](https://www.github.com/iTwin/iTwinUI-react/commit/38d657423d2def7d54b9e195f0c543a35e725d3f))
+
+### [1.37.2](https://www.github.com/iTwin/iTwinUI-react/compare/v1.37.1...v1.37.2) (2022-05-04)
+
+### Fixes
+
+* **Table:** Fix direction of sort icons ([#645](https://www.github.com/iTwin/iTwinUI-react/issues/645)) ([1a0683b](https://www.github.com/iTwin/iTwinUI-react/commit/1a0683b2d8f18b8ec80412e2208fbfa12df88d51))
+* **Table:** Fix error of headless table ([#648](https://www.github.com/iTwin/iTwinUI-react/issues/648)) ([87c6b9e](https://www.github.com/iTwin/iTwinUI-react/commit/87c6b9eb0b8338357aec107af3f7a7539dd0f5a3))
+
+### [1.37.1](https://www.github.com/iTwin/iTwinUI-react/compare/v1.37.0...v1.37.1) (2022-04-22)
+
+### Fixes
+
+* **ComboBox:** Use latest value of `onChange` prop ([#636](https://www.github.com/iTwin/iTwinUI-react/issues/636)) ([a1f705e](https://www.github.com/iTwin/iTwinUI-react/commit/a1f705e05a7608f66e56d3555c679c180fadcae0))
+
 ## [1.37.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.36.0...v1.37.0) (2022-04-21)
 
 ### What's new

package/cjs/core/Alert/Alert.js

@@ -49,7 +49,7 @@ 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"]);
     (0, utils_1.useTheme)();
     var StatusIcon = utils_1.StatusIconMap[type];
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-alert', "iui-" + type, { 'iui-sticky': isSticky }, className), style: style }, rest),
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-alert', "iui-".concat(type), { 'iui-sticky': isSticky }, className), style: style }, rest),
         react_1.default.createElement(StatusIcon, { className: 'iui-alert-icon' }),
         react_1.default.createElement("span", { className: 'iui-alert-message' },
             children,

package/cjs/core/Badge/Badge.js

@@ -66,7 +66,7 @@ var Badge = function (props) {
     var backgroundColor = props.backgroundColor, style = props.style, className = props.className, children = props.children, rest = __rest(props, ["backgroundColor", "style", "className", "children"]);
     (0, utils_1.useTheme)();
     var _style = backgroundColor &&
-        ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-badge-background-color: " + backgroundColor))
+        ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-badge-background-color: ".concat(backgroundColor)))
         ? __assign({ '--iui-badge-background-color': getBadgeColorValue(backgroundColor) }, style) : __assign({ backgroundColor: getBadgeColorValue(backgroundColor) }, style);
     return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)('iui-badge', className), style: _style }, rest), children));
 };

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

@@ -47,8 +47,8 @@ exports.Button = react_1.default.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"]);
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement(Element, __assign({ ref: ref, className: (0, classnames_1.default)('iui-button', "iui-" + styleType, (_a = {},
-            _a["iui-" + size] = !!size,
+    return (react_1.default.createElement(Element, __assign({ ref: ref, className: (0, classnames_1.default)('iui-button', "iui-".concat(styleType), (_a = {},
+            _a["iui-".concat(size)] = !!size,
             _a), className), style: style, type: type }, rest),
         startIcon &&
             react_1.default.cloneElement(startIcon, {

package/cjs/core/Buttons/IconButton/IconButton.js

@@ -44,8 +44,8 @@ exports.IconButton = react_1.default.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"]);
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement(Element, __assign({ ref: ref, className: (0, classnames_1.default)('iui-button', "iui-" + styleType, (_a = {},
-            _a["iui-" + size] = !!size,
+    return (react_1.default.createElement(Element, __assign({ ref: ref, className: (0, classnames_1.default)('iui-button', "iui-".concat(styleType), (_a = {},
+            _a["iui-".concat(size)] = !!size,
             _a['iui-active'] = isActive,
             _a), className), type: type }, rest), react_1.default.cloneElement(children, {
         className: (0, classnames_1.default)('iui-button-icon', children.props.className),

package/cjs/core/Carousel/Carousel.js

@@ -61,7 +61,7 @@ var CarouselNavigation_1 = require("./CarouselNavigation");
 exports.Carousel = Object.assign(react_1.default.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_1.default.useState(function () { var _a; return (_a = props.id) !== null && _a !== void 0 ? _a : "iui-carousel-" + (0, utils_1.getRandomValue)(10); })[0];
+    var id = react_1.default.useState(function () { var _a; return (_a = props.id) !== null && _a !== void 0 ? _a : "iui-carousel-".concat((0, utils_1.getRandomValue)(10)); })[0];
     (0, utils_1.useTheme)();
     var isManuallyUpdating = react_1.default.useRef(false);
     var scrollInstantly = react_1.default.useRef(false);

package/cjs/core/Carousel/CarouselDotsList.js

@@ -102,7 +102,7 @@ exports.CarouselDotsList = react_1.default.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_1.default.createElement(CarouselDot_1.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_1.default.createElement(CarouselDot_1.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/cjs/core/Carousel/CarouselSlider.js

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

package/cjs/core/Checkbox/Checkbox.js

@@ -75,7 +75,7 @@ exports.Checkbox = react_1.default.forwardRef(function (props, ref) {
     return !label ? (checkbox) : (react_1.default.createElement("label", { className: (0, classnames_1.default)('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/cjs/core/ColorPicker/ColorBuilder.js

@@ -69,20 +69,20 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
     ]);
     var _p = react_1.default.useState(false), colorDotActive = _p[0], setColorDotActive = _p[1];
     var hueColorString = hueSliderColor.toHexString();
-    var colorSquareStyle = ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-color-field-hue: " + hueColorString))
+    var colorSquareStyle = ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-color-field-hue: ".concat(hueColorString)))
         ? {
             '--iui-color-field-hue': hueColorString,
             '--iui-color-picker-selected-color': dotColorString,
         }
         : { backgroundColor: hueColorString };
-    var opacitySliderStyle = ((_f = (_e = (_d = (0, utils_1.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 = (0, utils_1.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 = (0, utils_1.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/cjs/core/ColorPicker/ColorInputPanel.js

@@ -156,7 +156,7 @@ exports.ColorInputPanel = react_1.default.forwardRef(function (props, ref) {
         react_1.default.createElement(Input_1.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/cjs/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/cjs/core/ColorPicker/ColorSwatch.js

@@ -51,7 +51,7 @@ exports.ColorSwatch = react_1.default.forwardRef(function (props, ref) {
     }, [color]);
     var _style = react_1.default.useMemo(function () {
         var _a, _b, _c;
-        return ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-color-swatch-background: " + colorString))
+        return ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-color-swatch-background: ".concat(colorString)))
             ? __assign({ '--iui-color-swatch-background': colorString }, style) : __assign({ backgroundColor: colorString }, style);
     }, [colorString, style]);
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-color-swatch', { 'iui-active': isActive }, className), style: _style, onClick: onClick, tabIndex: isActive ? 0 : -1, "aria-selected": isActive, ref: ref }, rest)));

package/cjs/core/ComboBox/ComboBox.js

@@ -57,18 +57,21 @@ var ComboBox = function (props) {
     // Generate a stateful random id if not specified
     var id = react_1.default.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-" + (0, utils_1.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((0, utils_1.getRandomValue)(10));
     })[0];
     (0, utils_1.useTheme)();
     /** Generates a memoized id for an option, given the index from original list */
     var getOptionId = react_1.default.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_1.default.useRef(onChange);
+    react_1.default.useEffect(function () {
+        userOnChange.current = onChange;
+    }, [onChange]);
     var memoizedItems = react_1.default.useMemo(function () {
         return options.map(function (option, index) {
             var label = option.label, value = option.value, rest = __rest(option, ["label", "value"]);
@@ -284,9 +287,9 @@ 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_1.default.createElement(Menu_1.Menu, { id: id + "-list", className: 'iui-scroll', style: {
+                }, animation: 'shift-away', duration: 200 }, dropdownMenuProps, { content: react_1.default.createElement(Menu_1.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;
@@ -302,7 +305,7 @@ var ComboBox = function (props) {
                 } }),
                 react_1.default.createElement(Input_1.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_1.default.createElement("span", { ref: toggleButtonRef, className: (0, classnames_1.default)('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/cjs/core/DatePicker/DatePicker.js

@@ -295,9 +295,9 @@ var DatePicker = function (props) {
                     react_1.default.createElement(ChevronRightDouble_1.default, null)))),
             react_1.default.createElement("div", { className: 'iui-calendar-weekdays' }, shortDays.map(function (day, index) { return (react_1.default.createElement("div", { key: day, title: longDays[index] }, day)); })),
             react_1.default.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map(function (weekDays, weekIndex) {
-                return (react_1.default.createElement("div", { key: "week-" + displayedMonthIndex + "-" + weekIndex, className: 'iui-calendar-week' }, weekDays.map(function (weekDay, dayIndex) {
+                return (react_1.default.createElement("div", { key: "week-".concat(displayedMonthIndex, "-").concat(weekIndex), className: 'iui-calendar-week' }, weekDays.map(function (weekDay, dayIndex) {
                     var dateValue = weekDay.getDate();
-                    return (react_1.default.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_1.default.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/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -77,7 +77,7 @@ var ExpandableBlock = function (props) {
                 caption && react_1.default.createElement("div", { className: 'iui-caption' }, caption)),
             icon &&
                 react_1.default.cloneElement(icon, {
-                    className: (0, classnames_1.default)('iui-status-icon', (_a = {}, _a["iui-" + status] = !!status, _a), icon.props.className),
+                    className: (0, classnames_1.default)('iui-status-icon', (_a = {}, _a["iui-".concat(status)] = !!status, _a), icon.props.className),
                 })),
         react_1.default.createElement(utils_1.WithCSSTransition, { in: expanded },
             react_1.default.createElement("div", { className: 'iui-expandable-content' },

package/cjs/core/Footer/Footer.js

@@ -70,7 +70,7 @@ 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',
@@ -107,7 +107,7 @@ var Footer = function (props) {
     }
     return (react_1.default.createElement("footer", __assign({ className: (0, classnames_1.default)('iui-legal-footer', className) }, rest),
         react_1.default.createElement("ul", null, elements.map(function (element, index) {
-            return (react_1.default.createElement("li", { key: element.key || element.title + "-" + index },
+            return (react_1.default.createElement("li", { key: element.key || "".concat(element.title, "-").concat(index) },
                 index > 0 && react_1.default.createElement("span", { className: 'iui-separator' }),
                 element.url ? (react_1.default.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title)));
         }))));

package/cjs/core/Header/HeaderBreadcrumbs.js

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

package/cjs/core/InformationPanel/InformationPanel.js

@@ -82,10 +82,10 @@ exports.InformationPanel = react_1.default.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_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-information-panel', {

package/cjs/core/Input/Input.js

@@ -52,6 +52,6 @@ exports.Input = react_1.default.forwardRef(function (props, ref) {
             inputRef.current.focus();
         }
     }, [setFocus]);
-    return (react_1.default.createElement("input", __assign({ className: (0, classnames_1.default)('iui-input', (_a = {}, _a["iui-" + size] = !!size, _a), className), ref: refs }, rest)));
+    return (react_1.default.createElement("input", __assign({ className: (0, classnames_1.default)('iui-input', (_a = {}, _a["iui-".concat(size)] = !!size, _a), className), ref: refs }, rest)));
 });
 exports.default = exports.Input;

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

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

package/cjs/core/ProgressIndicators/ProgressRadial/ProgressRadial.js

@@ -69,8 +69,8 @@ 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_1.default.createElement("svg", { className: 'iui-radial', viewBox: '0 0 32 32', "aria-hidden": 'true' },
             react_1.default.createElement("circle", { className: 'iui-track', cx: '16', cy: '16', r: '14' }),

package/cjs/core/Radio/Radio.js

@@ -56,7 +56,7 @@ exports.Radio = react_1.default.forwardRef(function (props, ref) {
         }
     }, [setFocus]);
     var radio = (react_1.default.createElement("input", __assign({ className: (0, classnames_1.default)('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_1.default.createElement("label", { className: (0, classnames_1.default)('iui-radio-wrapper', (_b = { 'iui-disabled': disabled }, _b["iui-" + status] = !!status, _b), className), style: style },
+    return !label ? (radio) : (react_1.default.createElement("label", { className: (0, classnames_1.default)('iui-radio-wrapper', (_b = { 'iui-disabled': disabled }, _b["iui-".concat(status)] = !!status, _b), className), style: style },
         radio,
         label && react_1.default.createElement("span", { className: 'iui-radio-label' }, label)));
 });

package/cjs/core/Select/Select.js

@@ -133,7 +133,7 @@ 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_1.default.createElement(MenuItem_1.MenuItem, null, option.label));
-            return react_1.default.cloneElement(menuItem, __assign(__assign({ key: option.label + "-" + index, isSelected: isSelected, onClick: function () {
+            return react_1.default.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));
@@ -146,7 +146,7 @@ var Select = function (props) {
         return options.find(function (option) { return option.value === value; });
     }, [options, value]);
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-input-with-icon', className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
-        react_1.default.createElement(DropdownMenu_1.DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: (0, classnames_1.default)('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_1.default.createElement(DropdownMenu_1.DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: (0, classnames_1.default)('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))) {
@@ -157,7 +157,7 @@ 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_1.default.createElement("span", { className: 'iui-content' }, placeholder),
                 selectedItem &&

package/cjs/core/Slider/Slider.js

@@ -80,7 +80,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/cjs/core/Slider/Thumb.js

@@ -70,9 +70,23 @@ var Thumb = function (props) {
     }, [disabled, index, onThumbActivated]);
     var _a = react_1.default.useState(false), hasFocus = _a[0], setHasFocus = _a[1];
     var _b = react_1.default.useState(false), isHovered = _b[0], setIsHovered = _b[1];
-    var leftPercent = (100.0 * (value - sliderMin)) / (sliderMax - sliderMin);
+    var adjustedValue = react_1.default.useMemo(function () {
+        if (value < sliderMin) {
+            return sliderMin;
+        }
+        if (value > sliderMax) {
+            return sliderMax;
+        }
+        return value;
+    }, [sliderMax, sliderMin, value]);
+    var leftPercent = react_1.default.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_1.default.createElement(Tooltip_1.Tooltip, __assign({ visible: isActive || hasFocus || isHovered, placement: 'top' }, tooltipProps),
-        react_1.default.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), { left: leftPercent + "%" }), className: (0, classnames_1.default)('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_1.default.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), { left: "".concat(leftPercent, "%") }), className: (0, classnames_1.default)('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); } }))));
 };
 exports.Thumb = Thumb;

package/cjs/core/Slider/Track.js

@@ -29,10 +29,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;
@@ -43,19 +51,22 @@ function generateSegments(values, min, max) {
  */
 var Track = function (props) {
     var trackDisplayMode = props.trackDisplayMode, sliderMin = props.sliderMin, sliderMax = props.sliderMax, values = props.values;
-    var _a = react_1.default.useState(__spreadArray([], values, true).sort(function (a, b) { return a - b; })), currentValues = _a[0], setCurrentValues = _a[1];
+    var _a = react_1.default.useState(function () {
+        return generateSegments(values, sliderMin, sliderMax);
+    }), segments = _a[0], setSegments = _a[1];
     react_1.default.useEffect(function () {
-        var newValues = __spreadArray([], values, true);
-        newValues.sort(function (a, b) { return a - b; });
-        setCurrentValues(newValues);
-    }, [values]);
-    var segments = react_1.default.useMemo(function () { return generateSegments(currentValues, sliderMin, sliderMax); }, [currentValues, sliderMin, sliderMax]);
+        setSegments(generateSegments(values, sliderMin, sliderMax));
+    }, [values, sliderMin, sliderMax]);
     return (react_1.default.createElement(react_1.default.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_1.default.createElement(react_1.default.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (react_1.default.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_1.default.createElement(react_1.default.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (react_1.default.createElement("div", { className: 'iui-slider-track', style: { left: "".concat(leftPercent, "%"), right: "".concat(rightPercent, "%") } })) : null));
         })));
 };
 exports.Track = Track;

package/cjs/core/Surface/Surface.js

@@ -63,7 +63,7 @@ exports.Surface = react_1.default.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"]);
     (0, utils_1.useTheme)();
-    var _style = ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-surface-elevation: " + getSurfaceElevationValue(elevation)))
+    var _style = ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-surface-elevation: ".concat(getSurfaceElevationValue(elevation))))
         ? __assign({ '--iui-surface-elevation': getSurfaceElevationValue(elevation) }, style) : __assign({ boxShadow: getSurfaceElevationValue(elevation) }, style);
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-surface', className), style: _style, ref: ref }, rest), children));
 });