@itwin/itwinui-react 2.0.0-dev.2 → 2.0.0-dev.4

package/esm/core/Slider/Slider.js

@@ -1,34 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -39,32 +8,32 @@ import { useTheme, getBoundedValue, useEventListener, } from '../utils';
 import '@itwin/itwinui-css/css/slider.css';
 import { Track } from './Track';
 import { Thumb } from './Thumb';
-var getPercentageOfRectangle = function (rect, pointerX, pointerY, orientation) {
+const getPercentageOfRectangle = (rect, pointerX, pointerY, orientation) => {
     if (orientation === 'horizontal') {
-        var position_1 = getBoundedValue(pointerX, rect.left, rect.right);
-        return (position_1 - rect.left) / rect.width;
+        const position = getBoundedValue(pointerX, rect.left, rect.right);
+        return (position - rect.left) / rect.width;
     }
-    var position = getBoundedValue(pointerY, rect.top, rect.bottom);
+    const position = getBoundedValue(pointerY, rect.top, rect.bottom);
     return (rect.bottom - position) / rect.height;
 };
-var getClosestValueIndex = function (values, pointerValue) {
+const getClosestValueIndex = (values, pointerValue) => {
     if (1 === values.length) {
         return 0;
     }
-    var distances = values.map(function (value) { return Math.abs(value - pointerValue); });
-    var smallest = Math.min.apply(Math, distances);
+    const distances = values.map((value) => Math.abs(value - pointerValue));
+    const smallest = Math.min(...distances);
     return distances.indexOf(smallest);
 };
-var getDefaultTrackDisplay = function (trackDisplayMode, values) {
+const getDefaultTrackDisplay = (trackDisplayMode, values) => {
     if ('auto' !== trackDisplayMode) {
         return trackDisplayMode;
     }
     return values.length % 2 ? 'even-segments' : 'odd-segments';
 };
-var roundValueToClosestStep = function (value, step, min) {
+const roundValueToClosestStep = (value, step, min) => {
     return Math.round((value - min) / step) * step + min;
 };
-var formatNumberValue = function (value, step, numDecimals) {
+const formatNumberValue = (value, step, numDecimals) => {
     if (Number.isInteger(step)) {
         return value.toFixed(0);
     }
@@ -73,12 +42,12 @@ var formatNumberValue = function (value, step, numDecimals) {
 /**
  * Focus specified thumb on Slider control
  */
-var focusThumb = function (sliderContainer, activeIndex) {
+const focusThumb = (sliderContainer, activeIndex) => {
     var _a;
-    var doc = sliderContainer.ownerDocument;
+    const 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=\"".concat(activeIndex, "\"]"));
+        const thumbToFocus = sliderContainer.querySelector(`[data-index="${activeIndex}"]`);
         thumbToFocus && thumbToFocus.focus();
     }
 };
@@ -90,57 +59,57 @@ var focusThumb = function (sliderContainer, activeIndex) {
  * <Slider values={[10, 20, 30, 40]} min={0} max={60} setFocus
  *   thumbMode='allow-crossing' />
  */
-export var Slider = React.forwardRef(function (props, ref) {
+export const Slider = React.forwardRef((props, ref) => {
     var _a, _b;
-    var _c = props.min, min = _c === void 0 ? 0 : _c, _d = props.max, max = _d === void 0 ? 100 : _d, values = props.values, _e = props.step, step = _e === void 0 ? 1 : _e, _f = props.setFocus, setFocus = _f === void 0 ? false : _f, tooltipProps = props.tooltipProps, _g = props.disabled, disabled = _g === void 0 ? false : _g, tickLabels = props.tickLabels, minLabel = props.minLabel, maxLabel = props.maxLabel, _h = props.trackDisplayMode, trackDisplayMode = _h === void 0 ? 'auto' : _h, _j = props.thumbMode, thumbMode = _j === void 0 ? 'inhibit-crossing' : _j, onChange = props.onChange, onUpdate = props.onUpdate, thumbProps = props.thumbProps, className = props.className, railContainerProps = props.railContainerProps, _k = props.orientation, orientation = _k === void 0 ? 'horizontal' : _k, rest = __rest(props, ["min", "max", "values", "step", "setFocus", "tooltipProps", "disabled", "tickLabels", "minLabel", "maxLabel", "trackDisplayMode", "thumbMode", "onChange", "onUpdate", "thumbProps", "className", "railContainerProps", "orientation"]);
-    var _l = React.useState(values), currentValues = _l[0], setCurrentValues = _l[1];
-    React.useEffect(function () {
+    const { min = 0, max = 100, values, step = 1, setFocus = false, tooltipProps, disabled = false, tickLabels, minLabel, maxLabel, trackDisplayMode = 'auto', thumbMode = 'inhibit-crossing', onChange, onUpdate, thumbProps, className, railContainerProps, orientation = 'horizontal', ...rest } = props;
+    const [currentValues, setCurrentValues] = React.useState(values);
+    React.useEffect(() => {
         setCurrentValues(values);
     }, [values]);
-    var _m = React.useState(function () { return minLabel !== null && minLabel !== void 0 ? minLabel : min.toString(); }), minValueLabel = _m[0], setMinValueLabel = _m[1];
-    React.useEffect(function () {
+    const [minValueLabel, setMinValueLabel] = React.useState(() => minLabel !== null && minLabel !== void 0 ? minLabel : min.toString());
+    React.useEffect(() => {
         setMinValueLabel(minLabel !== null && minLabel !== void 0 ? minLabel : min.toString());
     }, [minLabel, min]);
-    var _o = React.useState(function () { return maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString(); }), maxValueLabel = _o[0], setMaxValueLabel = _o[1];
-    React.useEffect(function () {
+    const [maxValueLabel, setMaxValueLabel] = React.useState(() => maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString());
+    React.useEffect(() => {
         setMaxValueLabel(maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString());
     }, [maxLabel, max]);
-    var _p = React.useState(function () { return getDefaultTrackDisplay(trackDisplayMode, currentValues); }), trackDisplay = _p[0], setTrackDisplay = _p[1];
-    React.useEffect(function () {
+    const [trackDisplay, setTrackDisplay] = React.useState(() => getDefaultTrackDisplay(trackDisplayMode, currentValues));
+    React.useEffect(() => {
         setTrackDisplay(getDefaultTrackDisplay(trackDisplayMode, currentValues));
     }, [trackDisplayMode, currentValues]);
     useTheme();
-    var containerRef = React.useRef(null);
-    React.useEffect(function () {
+    const containerRef = React.useRef(null);
+    React.useEffect(() => {
         if (containerRef.current && setFocus) {
             focusThumb(containerRef.current, 0);
         }
     }, [setFocus]);
-    var getNumDecimalPlaces = React.useMemo(function () {
-        var stepString = step.toString();
-        var decimalIndex = stepString.indexOf('.');
+    const getNumDecimalPlaces = React.useMemo(() => {
+        const stepString = step.toString();
+        const decimalIndex = stepString.indexOf('.');
         return stepString.length - (decimalIndex + 1);
     }, [step]);
-    var getAllowableThumbRange = React.useCallback(function (index) {
+    const getAllowableThumbRange = React.useCallback((index) => {
         if (thumbMode === 'inhibit-crossing') {
-            var minVal = index === 0 ? min : currentValues[index - 1] + step;
-            var maxVal = index < currentValues.length - 1
+            const minVal = index === 0 ? min : currentValues[index - 1] + step;
+            const maxVal = index < currentValues.length - 1
                 ? currentValues[index + 1] - step
                 : max;
             return [minVal, maxVal];
         }
         return [min, max];
     }, [max, min, step, thumbMode, currentValues]);
-    var _q = React.useState(undefined), activeThumbIndex = _q[0], setActiveThumbIndex = _q[1];
-    var updateThumbValue = React.useCallback(function (event, callbackType) {
+    const [activeThumbIndex, setActiveThumbIndex] = React.useState(undefined);
+    const updateThumbValue = React.useCallback((event, callbackType) => {
         if (containerRef.current && undefined !== activeThumbIndex) {
-            var percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX, event.clientY, orientation);
-            var pointerValue = min + (max - min) * percent;
+            const percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX, event.clientY, orientation);
+            let pointerValue = min + (max - min) * percent;
             pointerValue = roundValueToClosestStep(pointerValue, step, min);
-            var _a = getAllowableThumbRange(activeThumbIndex), minVal = _a[0], maxVal = _a[1];
+            const [minVal, maxVal] = getAllowableThumbRange(activeThumbIndex);
             pointerValue = getBoundedValue(pointerValue, minVal, maxVal);
             if (pointerValue !== currentValues[activeThumbIndex]) {
-                var newValues = __spreadArray([], currentValues, true);
+                const newValues = [...currentValues];
                 newValues[activeThumbIndex] = pointerValue;
                 setCurrentValues(newValues);
                 'onChange' === callbackType
@@ -162,7 +131,7 @@ export var Slider = React.forwardRef(function (props, ref) {
         onChange,
         orientation,
     ]);
-    var handlePointerMove = React.useCallback(function (event) {
+    const handlePointerMove = React.useCallback((event) => {
         if (activeThumbIndex === undefined) {
             return;
         }
@@ -171,7 +140,7 @@ export var Slider = React.forwardRef(function (props, ref) {
         updateThumbValue(event, 'onUpdate');
     }, [activeThumbIndex, updateThumbValue]);
     // function called by Thumb keyboard processing
-    var onThumbValueChanged = React.useCallback(function (index, value, keyboardReleased) {
+    const onThumbValueChanged = React.useCallback((index, value, keyboardReleased) => {
         if (currentValues[index] === value && !keyboardReleased) {
             return;
         }
@@ -179,16 +148,16 @@ export var Slider = React.forwardRef(function (props, ref) {
             onChange === null || onChange === void 0 ? void 0 : onChange(currentValues); // currentValues since key up should not change value but only stop continuous value selection
         }
         else {
-            var newValues = __spreadArray([], currentValues, true); // newValues since key down should change value
+            const newValues = [...currentValues]; // newValues since key down should change value
             newValues[index] = value;
             onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(newValues);
             setCurrentValues(newValues);
         }
     }, [currentValues, onUpdate, onChange]);
-    var onThumbActivated = React.useCallback(function (index) {
+    const onThumbActivated = React.useCallback((index) => {
         setActiveThumbIndex(index);
     }, []);
-    var handlePointerUp = React.useCallback(function (event) {
+    const handlePointerUp = React.useCallback((event) => {
         if (activeThumbIndex === undefined) {
             return;
         }
@@ -197,18 +166,18 @@ export var Slider = React.forwardRef(function (props, ref) {
         event.preventDefault();
         event.stopPropagation();
     }, [activeThumbIndex, updateThumbValue]);
-    var handlePointerDownOnSlider = React.useCallback(function (event) {
+    const handlePointerDownOnSlider = React.useCallback((event) => {
         if (containerRef.current) {
-            var percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX, event.clientY, orientation);
-            var pointerValue = min + (max - min) * percent;
+            const percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX, event.clientY, orientation);
+            let pointerValue = min + (max - min) * percent;
             pointerValue = roundValueToClosestStep(pointerValue, step, min);
-            var closestValueIndex = getClosestValueIndex(currentValues, pointerValue);
-            var _a = getAllowableThumbRange(closestValueIndex), minVal = _a[0], maxVal = _a[1];
+            const closestValueIndex = getClosestValueIndex(currentValues, pointerValue);
+            const [minVal, maxVal] = getAllowableThumbRange(closestValueIndex);
             pointerValue = getBoundedValue(pointerValue, minVal, maxVal);
             if (pointerValue === currentValues[closestValueIndex]) {
                 return;
             }
-            var newValues = __spreadArray([], currentValues, true);
+            const newValues = [...currentValues];
             newValues[closestValueIndex] = pointerValue;
             setCurrentValues(newValues);
             onChange === null || onChange === void 0 ? void 0 : onChange(newValues);
@@ -229,33 +198,36 @@ export var Slider = React.forwardRef(function (props, ref) {
     ]);
     useEventListener('pointermove', handlePointerMove, (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
     useEventListener('pointerup', handlePointerUp, (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
-    var tickMarkArea = React.useMemo(function () {
+    const tickMarkArea = React.useMemo(() => {
         if (!tickLabels) {
             return null;
         }
         if (Array.isArray(tickLabels)) {
-            return (React.createElement("div", { className: 'iui-slider-ticks' }, tickLabels.map(function (label, index) { return (React.createElement("span", { key: index, className: 'iui-slider-tick' }, label)); })));
+            return (React.createElement("div", { className: 'iui-slider-ticks' }, tickLabels.map((label, index) => (React.createElement("span", { key: index, className: 'iui-slider-tick' }, label)))));
         }
         return tickLabels;
     }, [tickLabels]);
-    var generateTooltipProps = React.useCallback(function (index, val) {
-        var outProps = tooltipProps
+    const generateTooltipProps = React.useCallback((index, val) => {
+        const outProps = tooltipProps
             ? tooltipProps(index, val, step)
             : {};
-        return __assign(__assign({}, outProps), { content: outProps.content
+        return {
+            ...outProps,
+            content: outProps.content
                 ? outProps.content
-                : formatNumberValue(val, step, getNumDecimalPlaces) });
+                : formatNumberValue(val, step, getNumDecimalPlaces),
+        };
     }, [getNumDecimalPlaces, step, tooltipProps]);
-    return (React.createElement("div", __assign({ ref: ref, className: cx('iui-slider-component-container', "iui-slider-".concat(orientation), { 'iui-disabled': disabled }, className) }, rest),
+    return (React.createElement("div", { ref: ref, className: cx('iui-slider-component-container', `iui-slider-${orientation}`, { 'iui-disabled': disabled }, className), ...rest },
         minValueLabel && (React.createElement("span", { className: 'iui-slider-min' }, minValueLabel)),
-        React.createElement("div", __assign({ ref: containerRef, className: cx('iui-slider-container', {
+        React.createElement("div", { ref: containerRef, className: cx('iui-slider-container', {
                 'iui-grabbing': undefined !== activeThumbIndex,
-            }), onPointerDown: handlePointerDownOnSlider }, railContainerProps),
+            }), onPointerDown: handlePointerDownOnSlider, ...railContainerProps },
             React.createElement("div", { className: 'iui-slider-rail' }),
-            currentValues.map(function (thumbValue, index) {
+            currentValues.map((thumbValue, index) => {
                 var _a;
-                var _b = getAllowableThumbRange(index), minVal = _b[0], maxVal = _b[1];
-                var thisThumbProps = thumbProps === null || thumbProps === void 0 ? void 0 : thumbProps(index);
+                const [minVal, maxVal] = getAllowableThumbRange(index);
+                const thisThumbProps = thumbProps === null || thumbProps === void 0 ? void 0 : thumbProps(index);
                 return (React.createElement(Thumb, { key: (_a = thisThumbProps === null || thisThumbProps === void 0 ? void 0 : thisThumbProps.id) !== null && _a !== void 0 ? _a : index, index: index, disabled: disabled, isActive: activeThumbIndex === index, onThumbActivated: onThumbActivated, onThumbValueChanged: onThumbValueChanged, minVal: minVal, maxVal: maxVal, value: thumbValue, tooltipProps: generateTooltipProps(index, thumbValue), thumbProps: thisThumbProps, step: step, sliderMin: min, sliderMax: max, orientation: orientation }));
             }),
             React.createElement(Track, { trackDisplayMode: trackDisplay, sliderMin: min, sliderMax: max, values: currentValues, orientation: orientation }),

package/esm/core/Slider/Thumb.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -32,10 +10,10 @@ import { Tooltip } from '../Tooltip';
  * Only one Thumb can be active at a time. A Thumb is made active when the user selects
  * it with pointer. Whenever a Thumb is active, focused, or hovered its tooltip is shown.
  */
-export var Thumb = function (props) {
-    var value = props.value, index = props.index, minVal = props.minVal, maxVal = props.maxVal, step = props.step, sliderMin = props.sliderMin, sliderMax = props.sliderMax, isActive = props.isActive, onThumbActivated = props.onThumbActivated, onThumbValueChanged = props.onThumbValueChanged, tooltipProps = props.tooltipProps, thumbProps = props.thumbProps, disabled = props.disabled, orientation = props.orientation;
-    var thumbRef = React.useRef(null);
-    var handleOnKeyboardEvent = React.useCallback(function (event, keyboardReleased) {
+export const Thumb = (props) => {
+    const { value, index, minVal, maxVal, step, sliderMin, sliderMax, isActive, onThumbActivated, onThumbValueChanged, tooltipProps, thumbProps, disabled, orientation, } = props;
+    const thumbRef = React.useRef(null);
+    const handleOnKeyboardEvent = React.useCallback((event, keyboardReleased) => {
         if (disabled || event.altKey) {
             return;
         }
@@ -59,12 +37,12 @@ export var Thumb = function (props) {
         }
         event.preventDefault();
     }, [disabled, onThumbValueChanged, index, value, step, minVal, maxVal]);
-    var handlePointerDownOnThumb = React.useCallback(function () {
+    const handlePointerDownOnThumb = React.useCallback(() => {
         !disabled && onThumbActivated(index);
     }, [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 adjustedValue = React.useMemo(function () {
+    const [hasFocus, setHasFocus] = React.useState(false);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const adjustedValue = React.useMemo(() => {
         if (value < sliderMin) {
             return sliderMin;
         }
@@ -73,15 +51,18 @@ export var Thumb = function (props) {
         }
         return value;
     }, [sliderMax, sliderMin, value]);
-    var lowPercent = React.useMemo(function () {
+    const lowPercent = React.useMemo(() => {
         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), (orientation === 'horizontal'
-                ? { left: "".concat(lowPercent, "%") }
-                : { bottom: "".concat(lowPercent, "%") })), 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: function (event) { return handleOnKeyboardEvent(event, false); }, onKeyUp: function (event) { return handleOnKeyboardEvent(event, true); }, onFocus: function () { return setHasFocus(true); }, onBlur: function () { return setHasFocus(false); }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }))));
+    const { style, className, ...rest } = thumbProps || {};
+    return (React.createElement(Tooltip, { visible: isActive || hasFocus || isHovered, placement: 'top', ...tooltipProps },
+        React.createElement("div", { ...rest, "data-index": index, ref: thumbRef, style: {
+                ...style,
+                ...(orientation === 'horizontal'
+                    ? { left: `${lowPercent}%` }
+                    : { bottom: `${lowPercent}%` }),
+            }, 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: (event) => handleOnKeyboardEvent(event, false), onKeyUp: (event) => handleOnKeyboardEvent(event, true), onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) })));
 };

package/esm/core/Slider/Track.js

@@ -1,23 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -33,17 +13,17 @@ function shouldDisplaySegment(segmentIndex, mode) {
     return false;
 }
 function generateSegments(values, min, max) {
-    var segments = [];
-    var newValues = __spreadArray([], values, true);
-    newValues.sort(function (a, b) { return a - b; });
+    const segments = [];
+    const newValues = [...values];
+    newValues.sort((a, b) => 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 < newValues.length; i++) {
+    let lastValue = min;
+    for (let i = 0; i < newValues.length; i++) {
         segments.push({ left: lastValue, right: newValues[i] });
         lastValue = newValues[i];
     }
@@ -54,31 +34,31 @@ function generateSegments(values, min, max) {
  * Track displays color segments above Rail. Which, if any, segments that are
  * colorized is based on `trackDisplayMode`.
  */
-export var Track = function (props) {
-    var trackDisplayMode = props.trackDisplayMode, sliderMin = props.sliderMin, sliderMax = props.sliderMax, values = props.values, orientation = props.orientation;
-    var _a = React.useState(function () {
-        return generateSegments(values, sliderMin, sliderMax);
-    }), segments = _a[0], setSegments = _a[1];
-    React.useEffect(function () {
+export const Track = (props) => {
+    const { trackDisplayMode, sliderMin, sliderMax, values, orientation } = props;
+    const [segments, setSegments] = React.useState(() => generateSegments(values, sliderMin, sliderMax));
+    React.useEffect(() => {
         setSegments(generateSegments(values, sliderMin, sliderMax));
     }, [values, sliderMin, sliderMax]);
     return (React.createElement(React.Fragment, null, 'none' !== trackDisplayMode &&
-        segments.map(function (segment, index) {
-            var lowPercent = segment.left >= sliderMin && sliderMax !== sliderMin
+        segments.map((segment, index) => {
+            const lowPercent = segment.left >= sliderMin && sliderMax !== sliderMin
                 ? (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin)
                 : 0;
-            var highPercent = segment.right >= sliderMin && sliderMax !== sliderMin
+            const highPercent = 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: __assign({}, (orientation === 'horizontal'
-                    ? {
-                        left: "".concat(lowPercent, "%"),
-                        right: "".concat(highPercent, "%"),
-                    }
-                    : {
-                        top: "".concat(highPercent, "%"),
-                        bottom: "".concat(lowPercent, "%"),
-                    })) })) : null));
+            return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement("div", { className: 'iui-slider-track', style: {
+                    ...(orientation === 'horizontal'
+                        ? {
+                            left: `${lowPercent}%`,
+                            right: `${highPercent}%`,
+                        }
+                        : {
+                            top: `${highPercent}%`,
+                            bottom: `${lowPercent}%`,
+                        }),
+                } })) : null));
         })));
 };

package/esm/core/StatusMessage/StatusMessage.js

@@ -11,12 +11,11 @@ import cx from 'classnames';
  * <StatusMessage>This is the text</StatusMessage>
  * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
  */
-export var StatusMessage = function (_a) {
-    var userStartIcon = _a.startIcon, children = _a.children, status = _a.status;
+export const StatusMessage = ({ startIcon: userStartIcon, children, status, }) => {
     useTheme();
-    var StartIcon = function () {
+    const StartIcon = () => {
         var _a;
-        var icon = userStartIcon !== null && userStartIcon !== void 0 ? userStartIcon : (status && StatusIconMap[status]());
+        const icon = userStartIcon !== null && userStartIcon !== void 0 ? userStartIcon : (status && StatusIconMap[status]());
         if (!icon) {
             return null;
         }

package/esm/core/Stepper/Stepper.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -28,17 +6,15 @@ import React from 'react';
 import { useTheme } from '../utils';
 import '@itwin/itwinui-css/css/stepper.css';
 import { StepperStep } from './StepperStep';
-var defaultStepperLocalization = {
-    stepsCountLabel: function (currentStep, totalSteps) {
-        return "Step ".concat(currentStep, " of ").concat(totalSteps, ":");
-    },
+const defaultStepperLocalization = {
+    stepsCountLabel: (currentStep, totalSteps) => `Step ${currentStep} of ${totalSteps}:`,
 };
-export var Stepper = React.forwardRef(function (props, ref) {
-    var currentStep = props.currentStep, steps = props.steps, _a = props.type, type = _a === void 0 ? 'default' : _a, _b = props.localization, localization = _b === void 0 ? defaultStepperLocalization : _b, onStepClick = props.onStepClick, rest = __rest(props, ["currentStep", "steps", "type", "localization", "onStepClick"]);
-    var boundedCurrentStep = Math.min(Math.max(0, currentStep !== null && currentStep !== void 0 ? currentStep : 0), steps.length - 1);
+export const Stepper = React.forwardRef((props, ref) => {
+    const { currentStep, steps, type = 'default', localization = defaultStepperLocalization, onStepClick, ...rest } = props;
+    const boundedCurrentStep = Math.min(Math.max(0, currentStep !== null && currentStep !== void 0 ? currentStep : 0), steps.length - 1);
     useTheme();
-    return (React.createElement("div", __assign({ className: 'iui-stepper', ref: ref }, rest),
-        React.createElement("ol", null, steps.map(function (s, index) { return (React.createElement(StepperStep, { key: index, index: index, title: type === 'long' ? '' : s.name, currentStepNumber: boundedCurrentStep, totalSteps: steps.length, type: type, onClick: onStepClick, description: s.description })); })),
+    return (React.createElement("div", { className: 'iui-stepper', ref: ref, ...rest },
+        React.createElement("ol", null, steps.map((s, index) => (React.createElement(StepperStep, { key: index, index: index, title: type === 'long' ? '' : s.name, currentStepNumber: boundedCurrentStep, totalSteps: steps.length, type: type, onClick: onStepClick, description: s.description })))),
         type === 'long' && (React.createElement("div", { className: 'iui-stepper-steps-label' },
             React.createElement("span", { className: 'iui-stepper-steps-label-count' }, localization.stepsCountLabel(boundedCurrentStep + 1, steps.length)),
             steps[boundedCurrentStep].name))));

package/esm/core/Stepper/StepperStep.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -27,17 +5,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { Tooltip } from '../Tooltip';
-export var StepperStep = function (props) {
-    var title = props.title, index = props.index, currentStepNumber = props.currentStepNumber, totalSteps = props.totalSteps, type = props.type, onClick = props.onClick, description = props.description, className = props.className, style = props.style, rest = __rest(props, ["title", "index", "currentStepNumber", "totalSteps", "type", "onClick", "description", "className", "style"]);
-    var isPast = currentStepNumber > index;
-    var isActive = currentStepNumber === index;
-    var isClickable = isPast && !!onClick;
-    var onCompletedClick = function () {
+export const StepperStep = (props) => {
+    const { title, index, currentStepNumber, totalSteps, type, onClick, description, className, style, ...rest } = props;
+    const isPast = currentStepNumber > index;
+    const isActive = currentStepNumber === index;
+    const isClickable = isPast && !!onClick;
+    const onCompletedClick = () => {
         if (isClickable) {
             onClick === null || onClick === void 0 ? void 0 : onClick(index);
         }
     };
-    var onKeyDown = function (e) {
+    const onKeyDown = (e) => {
         if (!isClickable) {
             return;
         }
@@ -45,10 +23,13 @@ export var StepperStep = function (props) {
             onCompletedClick();
         }
     };
-    var stepShape = (React.createElement("li", __assign({ className: cx('iui-stepper-step', {
+    const stepShape = (React.createElement("li", { className: cx('iui-stepper-step', {
             'iui-current': isActive,
             'iui-clickable': isClickable,
-        }, className), style: __assign({ width: type === 'default' ? "".concat(100 / totalSteps, "%") : undefined }, style), onClick: onCompletedClick, onKeyDown: onKeyDown, "aria-current": isActive ? 'step' : undefined, tabIndex: isClickable ? 0 : undefined }, rest),
+        }, className), style: {
+            width: type === 'default' ? `${100 / totalSteps}%` : undefined,
+            ...style,
+        }, onClick: onCompletedClick, onKeyDown: onKeyDown, "aria-current": isActive ? 'step' : undefined, tabIndex: isClickable ? 0 : undefined, ...rest },
         React.createElement("div", { className: 'iui-stepper-track-content' },
             React.createElement("span", { className: 'iui-stepper-circle' }, index + 1)),
         type === 'default' && (React.createElement("span", { className: 'iui-stepper-step-name' }, title))));