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

package/cjs/core/SideNavigation/SideNavigation.js

@@ -1,26 +1,4 @@
 "use strict";
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,11 +8,11 @@ exports.SideNavigation = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var utils_1 = require("../utils");
-var Buttons_1 = require("../Buttons");
-var Tooltip_1 = require("../Tooltip");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../utils");
+const Buttons_1 = require("../Buttons");
+const Tooltip_1 = require("../Tooltip");
 require("@itwin/itwinui-css/css/side-navigation.css");
 /**
  * Left side navigation menu component.
@@ -50,31 +28,27 @@ require("@itwin/itwinui-css/css/side-navigation.css");
  *   ]}
  * />
  */
-var SideNavigation = function (props) {
-    var items = props.items, secondaryItems = props.secondaryItems, _a = props.expanderPlacement, expanderPlacement = _a === void 0 ? 'top' : _a, className = props.className, _b = props.isExpanded, isExpanded = _b === void 0 ? false : _b, onExpanderClick = props.onExpanderClick, submenu = props.submenu, _c = props.isSubmenuOpen, isSubmenuOpen = _c === void 0 ? false : _c, rest = __rest(props, ["items", "secondaryItems", "expanderPlacement", "className", "isExpanded", "onExpanderClick", "submenu", "isSubmenuOpen"]);
+const SideNavigation = (props) => {
+    const { items, secondaryItems, expanderPlacement = 'top', className, isExpanded = false, onExpanderClick, submenu, isSubmenuOpen = false, ...rest } = props;
     (0, utils_1.useTheme)();
-    var _d = react_1.default.useState(isExpanded), _isExpanded = _d[0], _setIsExpanded = _d[1];
-    react_1.default.useEffect(function () {
+    const [_isExpanded, _setIsExpanded] = react_1.default.useState(isExpanded);
+    react_1.default.useEffect(() => {
         _setIsExpanded(isExpanded);
     }, [isExpanded]);
-    var ExpandButton = (react_1.default.createElement(Buttons_1.IconButton, { className: 'iui-sidenav-button iui-expand', onClick: react_1.default.useCallback(function () {
-            _setIsExpanded(function (expanded) { return !expanded; });
+    const ExpandButton = (react_1.default.createElement(Buttons_1.IconButton, { className: 'iui-sidenav-button iui-expand', onClick: react_1.default.useCallback(() => {
+            _setIsExpanded((expanded) => !expanded);
             onExpanderClick === null || onExpanderClick === void 0 ? void 0 : onExpanderClick();
         }, [onExpanderClick]) },
         react_1.default.createElement(utils_1.SvgChevronRight, null)));
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-side-navigation-wrapper', className) }, rest),
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-side-navigation-wrapper', className), ...rest },
         react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-side-navigation', {
                 'iui-expanded': _isExpanded,
                 'iui-collapsed': !_isExpanded,
             }) },
             expanderPlacement === 'top' && ExpandButton,
             react_1.default.createElement("div", { className: 'iui-sidenav-content' },
-                react_1.default.createElement("div", { className: 'iui-top' }, items.map(function (sidenavButton, index) {
-                    return !_isExpanded ? (react_1.default.createElement(Tooltip_1.Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton);
-                })),
-                react_1.default.createElement("div", { className: 'iui-bottom' }, secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.map(function (sidenavButton, index) {
-                    return !_isExpanded ? (react_1.default.createElement(Tooltip_1.Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton);
-                }))),
+                react_1.default.createElement("div", { className: 'iui-top' }, items.map((sidenavButton, index) => !_isExpanded ? (react_1.default.createElement(Tooltip_1.Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton))),
+                react_1.default.createElement("div", { className: 'iui-bottom' }, secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.map((sidenavButton, index) => !_isExpanded ? (react_1.default.createElement(Tooltip_1.Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton)))),
             expanderPlacement === 'bottom' && ExpandButton),
         submenu && (react_1.default.createElement(utils_1.WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu))));
 };

package/cjs/core/SideNavigation/SidenavButton.js

@@ -3,47 +3,25 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidenavButton = void 0;
-var classnames_1 = __importDefault(require("classnames"));
-var react_1 = __importDefault(require("react"));
-var utils_1 = require("../utils");
-var Buttons_1 = require("../Buttons");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
+const Buttons_1 = require("../Buttons");
 require("@itwin/itwinui-css/css/side-navigation.css");
 /**
  * Wrapper around Button to be used as SideNavigation items.
  * Label is hidden when sidenav is collapsed.
  */
-exports.SidenavButton = react_1.default.forwardRef(function (props, ref) {
-    var className = props.className, children = props.children, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.isSubmenuOpen, isSubmenuOpen = _c === void 0 ? false : _c, rest = __rest(props, ["className", "children", "isActive", "disabled", "isSubmenuOpen"]);
+exports.SidenavButton = react_1.default.forwardRef((props, ref) => {
+    const { className, children, isActive = false, disabled = false, isSubmenuOpen = false, ...rest } = props;
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement(Buttons_1.Button, __assign({ className: (0, classnames_1.default)('iui-sidenav-button', {
+    return (react_1.default.createElement(Buttons_1.Button, { className: (0, classnames_1.default)('iui-sidenav-button', {
             'iui-submenu-open': isSubmenuOpen,
-        }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref }, rest), children));
+        }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref, ...rest }, children));
 });
 exports.default = exports.SidenavButton;

package/cjs/core/SideNavigation/SidenavSubmenu.js

@@ -1,26 +1,4 @@
 "use strict";
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,9 +8,9 @@ exports.SidenavSubmenu = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var classnames_1 = __importDefault(require("classnames"));
-var react_1 = __importDefault(require("react"));
-var utils_1 = require("../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/side-navigation.css");
 /**
  * Subcomponent to be used in the `submenu` prop of `SideNavigation`.
@@ -42,10 +20,10 @@ require("@itwin/itwinui-css/css/side-navigation.css");
  *   <div> ... </div>
  * </SidenavSubmenu>
  */
-exports.SidenavSubmenu = react_1.default.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+exports.SidenavSubmenu = react_1.default.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-side-navigation-submenu', className), ref: ref }, rest),
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-side-navigation-submenu', className), ref: ref, ...rest },
         react_1.default.createElement("div", { className: 'iui-side-navigation-submenu-content' }, children)));
 });
 exports.default = exports.SidenavSubmenu;

package/cjs/core/SideNavigation/SidenavSubmenuHeader.js

@@ -1,26 +1,4 @@
 "use strict";
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,9 +8,9 @@ exports.SidenavSubmenuHeader = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var classnames_1 = __importDefault(require("classnames"));
-var react_1 = __importDefault(require("react"));
-var utils_1 = require("../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/side-navigation.css");
 /**
  * Header content for `SidenavSubmenu`. Supports truncated label and actions buttons.
@@ -48,10 +26,10 @@ require("@itwin/itwinui-css/css/side-navigation.css");
  *   <span>Documents</span>
  * </SidenavSubmenuHeader>
  */
-var SidenavSubmenuHeader = function (props) {
-    var children = props.children, actions = props.actions, className = props.className, rest = __rest(props, ["children", "actions", "className"]);
+const SidenavSubmenuHeader = (props) => {
+    const { children, actions, className, ...rest } = props;
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-side-navigation-submenu-header', className) }, rest),
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-side-navigation-submenu-header', className), ...rest },
         react_1.default.createElement("div", { className: 'iui-side-navigation-submenu-header-label' }, children),
         actions && (react_1.default.createElement("div", { className: 'iui-side-navigation-submenu-header-actions' }, actions))));
 };

package/cjs/core/SkipToContentLink/SkipToContentLink.js

@@ -1,26 +1,4 @@
 "use strict";
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,9 +8,9 @@ exports.SkipToContentLink = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var utils_1 = require("../utils");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/skip-to-content.css");
 /**
  * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
@@ -42,9 +20,9 @@ require("@itwin/itwinui-css/css/skip-to-content.css");
  * <body><SkipToContentLink href='#main-content-id' /> ... </body>
  * <body><SkipToContentLink href='#main-content-id'>{localizedLabel}</SkipToContentLink> ... </body>
  */
-exports.SkipToContentLink = react_1.default.forwardRef(function (props, ref) {
-    var _a = props.children, children = _a === void 0 ? 'Skip to main content' : _a, className = props.className, rest = __rest(props, ["children", "className"]);
+exports.SkipToContentLink = react_1.default.forwardRef((props, ref) => {
+    const { children = 'Skip to main content', className, ...rest } = props;
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement("a", __assign({ ref: ref, className: (0, classnames_1.default)('iui-skip-to-content-link', className) }, rest), children));
+    return (react_1.default.createElement("a", { ref: ref, className: (0, classnames_1.default)('iui-skip-to-content-link', className), ...rest }, children));
 });
 exports.default = exports.SkipToContentLink;

package/cjs/core/Slider/Slider.js

@@ -1,35 +1,4 @@
 "use strict";
-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));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -39,38 +8,38 @@ exports.Slider = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var classnames_1 = __importDefault(require("classnames"));
-var react_1 = __importDefault(require("react"));
-var utils_1 = require("../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/slider.css");
-var Track_1 = require("./Track");
-var Thumb_1 = require("./Thumb");
-var getPercentageOfRectangle = function (rect, pointerX, pointerY, orientation) {
+const Track_1 = require("./Track");
+const Thumb_1 = require("./Thumb");
+const getPercentageOfRectangle = (rect, pointerX, pointerY, orientation) => {
     if (orientation === 'horizontal') {
-        var position_1 = (0, utils_1.getBoundedValue)(pointerX, rect.left, rect.right);
-        return (position_1 - rect.left) / rect.width;
+        const position = (0, utils_1.getBoundedValue)(pointerX, rect.left, rect.right);
+        return (position - rect.left) / rect.width;
     }
-    var position = (0, utils_1.getBoundedValue)(pointerY, rect.top, rect.bottom);
+    const position = (0, utils_1.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);
     }
@@ -79,12 +48,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();
     }
 };
@@ -96,57 +65,57 @@ var focusThumb = function (sliderContainer, activeIndex) {
  * <Slider values={[10, 20, 30, 40]} min={0} max={60} setFocus
  *   thumbMode='allow-crossing' />
  */
-exports.Slider = react_1.default.forwardRef(function (props, ref) {
+exports.Slider = react_1.default.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_1.default.useState(values), currentValues = _l[0], setCurrentValues = _l[1];
-    react_1.default.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_1.default.useState(values);
+    react_1.default.useEffect(() => {
         setCurrentValues(values);
     }, [values]);
-    var _m = react_1.default.useState(function () { return minLabel !== null && minLabel !== void 0 ? minLabel : min.toString(); }), minValueLabel = _m[0], setMinValueLabel = _m[1];
-    react_1.default.useEffect(function () {
+    const [minValueLabel, setMinValueLabel] = react_1.default.useState(() => minLabel !== null && minLabel !== void 0 ? minLabel : min.toString());
+    react_1.default.useEffect(() => {
         setMinValueLabel(minLabel !== null && minLabel !== void 0 ? minLabel : min.toString());
     }, [minLabel, min]);
-    var _o = react_1.default.useState(function () { return maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString(); }), maxValueLabel = _o[0], setMaxValueLabel = _o[1];
-    react_1.default.useEffect(function () {
+    const [maxValueLabel, setMaxValueLabel] = react_1.default.useState(() => maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString());
+    react_1.default.useEffect(() => {
         setMaxValueLabel(maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString());
     }, [maxLabel, max]);
-    var _p = react_1.default.useState(function () { return getDefaultTrackDisplay(trackDisplayMode, currentValues); }), trackDisplay = _p[0], setTrackDisplay = _p[1];
-    react_1.default.useEffect(function () {
+    const [trackDisplay, setTrackDisplay] = react_1.default.useState(() => getDefaultTrackDisplay(trackDisplayMode, currentValues));
+    react_1.default.useEffect(() => {
         setTrackDisplay(getDefaultTrackDisplay(trackDisplayMode, currentValues));
     }, [trackDisplayMode, currentValues]);
     (0, utils_1.useTheme)();
-    var containerRef = react_1.default.useRef(null);
-    react_1.default.useEffect(function () {
+    const containerRef = react_1.default.useRef(null);
+    react_1.default.useEffect(() => {
         if (containerRef.current && setFocus) {
             focusThumb(containerRef.current, 0);
         }
     }, [setFocus]);
-    var getNumDecimalPlaces = react_1.default.useMemo(function () {
-        var stepString = step.toString();
-        var decimalIndex = stepString.indexOf('.');
+    const getNumDecimalPlaces = react_1.default.useMemo(() => {
+        const stepString = step.toString();
+        const decimalIndex = stepString.indexOf('.');
         return stepString.length - (decimalIndex + 1);
     }, [step]);
-    var getAllowableThumbRange = react_1.default.useCallback(function (index) {
+    const getAllowableThumbRange = react_1.default.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_1.default.useState(undefined), activeThumbIndex = _q[0], setActiveThumbIndex = _q[1];
-    var updateThumbValue = react_1.default.useCallback(function (event, callbackType) {
+    const [activeThumbIndex, setActiveThumbIndex] = react_1.default.useState(undefined);
+    const updateThumbValue = react_1.default.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 = (0, utils_1.getBoundedValue)(pointerValue, minVal, maxVal);
             if (pointerValue !== currentValues[activeThumbIndex]) {
-                var newValues = __spreadArray([], currentValues, true);
+                const newValues = [...currentValues];
                 newValues[activeThumbIndex] = pointerValue;
                 setCurrentValues(newValues);
                 'onChange' === callbackType
@@ -168,7 +137,7 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
         onChange,
         orientation,
     ]);
-    var handlePointerMove = react_1.default.useCallback(function (event) {
+    const handlePointerMove = react_1.default.useCallback((event) => {
         if (activeThumbIndex === undefined) {
             return;
         }
@@ -177,7 +146,7 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
         updateThumbValue(event, 'onUpdate');
     }, [activeThumbIndex, updateThumbValue]);
     // function called by Thumb keyboard processing
-    var onThumbValueChanged = react_1.default.useCallback(function (index, value, keyboardReleased) {
+    const onThumbValueChanged = react_1.default.useCallback((index, value, keyboardReleased) => {
         if (currentValues[index] === value && !keyboardReleased) {
             return;
         }
@@ -185,16 +154,16 @@ exports.Slider = react_1.default.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_1.default.useCallback(function (index) {
+    const onThumbActivated = react_1.default.useCallback((index) => {
         setActiveThumbIndex(index);
     }, []);
-    var handlePointerUp = react_1.default.useCallback(function (event) {
+    const handlePointerUp = react_1.default.useCallback((event) => {
         if (activeThumbIndex === undefined) {
             return;
         }
@@ -203,18 +172,18 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
         event.preventDefault();
         event.stopPropagation();
     }, [activeThumbIndex, updateThumbValue]);
-    var handlePointerDownOnSlider = react_1.default.useCallback(function (event) {
+    const handlePointerDownOnSlider = react_1.default.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 = (0, utils_1.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);
@@ -235,33 +204,36 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
     ]);
     (0, utils_1.useEventListener)('pointermove', handlePointerMove, (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
     (0, utils_1.useEventListener)('pointerup', handlePointerUp, (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
-    var tickMarkArea = react_1.default.useMemo(function () {
+    const tickMarkArea = react_1.default.useMemo(() => {
         if (!tickLabels) {
             return null;
         }
         if (Array.isArray(tickLabels)) {
-            return (react_1.default.createElement("div", { className: 'iui-slider-ticks' }, tickLabels.map(function (label, index) { return (react_1.default.createElement("span", { key: index, className: 'iui-slider-tick' }, label)); })));
+            return (react_1.default.createElement("div", { className: 'iui-slider-ticks' }, tickLabels.map((label, index) => (react_1.default.createElement("span", { key: index, className: 'iui-slider-tick' }, label)))));
         }
         return tickLabels;
     }, [tickLabels]);
-    var generateTooltipProps = react_1.default.useCallback(function (index, val) {
-        var outProps = tooltipProps
+    const generateTooltipProps = react_1.default.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_1.default.createElement("div", __assign({ ref: ref, className: (0, classnames_1.default)('iui-slider-component-container', "iui-slider-".concat(orientation), { 'iui-disabled': disabled }, className) }, rest),
+    return (react_1.default.createElement("div", { ref: ref, className: (0, classnames_1.default)('iui-slider-component-container', `iui-slider-${orientation}`, { 'iui-disabled': disabled }, className), ...rest },
         minValueLabel && (react_1.default.createElement("span", { className: 'iui-slider-min' }, minValueLabel)),
-        react_1.default.createElement("div", __assign({ ref: containerRef, className: (0, classnames_1.default)('iui-slider-container', {
+        react_1.default.createElement("div", { ref: containerRef, className: (0, classnames_1.default)('iui-slider-container', {
                 'iui-grabbing': undefined !== activeThumbIndex,
-            }), onPointerDown: handlePointerDownOnSlider }, railContainerProps),
+            }), onPointerDown: handlePointerDownOnSlider, ...railContainerProps },
             react_1.default.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_1.default.createElement(Thumb_1.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_1.default.createElement(Track_1.Track, { trackDisplayMode: trackDisplay, sliderMin: min, sliderMax: max, values: currentValues, orientation: orientation }),