@itwin/itwinui-react 2.0.0-dev.1 → 2.0.0-dev.3

package/cjs/core/Buttons/DropdownButton/DropdownButton.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.DropdownButton = 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 Button_1 = require("../Button");
-var DropdownMenu_1 = require("../../DropdownMenu");
-var utils_1 = require("../../utils");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Button_1 = require("../Button");
+const DropdownMenu_1 = require("../../DropdownMenu");
+const utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/button.css");
 /**
  * Button that opens a DropdownMenu.
@@ -45,19 +23,19 @@ require("@itwin/itwinui-css/css/button.css");
  * ];
  * <DropdownButton menuItems={menuItems}>Default</DropdownButton>
  */
-exports.DropdownButton = react_1.default.forwardRef(function (props, ref) {
-    var menuItems = props.menuItems, className = props.className, size = props.size, styleType = props.styleType, children = props.children, rest = __rest(props, ["menuItems", "className", "size", "styleType", "children"]);
+exports.DropdownButton = react_1.default.forwardRef((props, ref) => {
+    const { menuItems, className, size, styleType, children, ...rest } = props;
     (0, utils_1.useTheme)();
-    var _a = react_1.default.useState(false), isMenuOpen = _a[0], setIsMenuOpen = _a[1];
-    var _b = react_1.default.useState(0), menuWidth = _b[0], setMenuWidth = _b[1];
-    var buttonRef = react_1.default.useRef(null);
-    var refs = (0, utils_1.useMergedRefs)(ref, buttonRef);
-    react_1.default.useEffect(function () {
+    const [isMenuOpen, setIsMenuOpen] = react_1.default.useState(false);
+    const [menuWidth, setMenuWidth] = react_1.default.useState(0);
+    const buttonRef = react_1.default.useRef(null);
+    const refs = (0, utils_1.useMergedRefs)(ref, buttonRef);
+    react_1.default.useEffect(() => {
         if (buttonRef.current) {
             setMenuWidth(buttonRef.current.offsetWidth);
         }
     }, [children, size, styleType]);
-    return (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { menuItems: menuItems, style: { minWidth: menuWidth }, onShow: function () { return setIsMenuOpen(true); }, onHide: function () { return setIsMenuOpen(false); } },
-        react_1.default.createElement(Button_1.Button, __assign({ className: (0, classnames_1.default)('iui-button-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (react_1.default.createElement(utils_1.SvgCaretUpSmall, { "aria-hidden": true })) : (react_1.default.createElement(utils_1.SvgCaretDownSmall, { "aria-hidden": true })), ref: refs, "aria-label": 'Dropdown' }, rest), children)));
+    return (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { menuItems: menuItems, style: { minWidth: menuWidth }, onShow: () => setIsMenuOpen(true), onHide: () => setIsMenuOpen(false) },
+        react_1.default.createElement(Button_1.Button, { className: (0, classnames_1.default)('iui-button-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (react_1.default.createElement(utils_1.SvgCaretUpSmall, { "aria-hidden": true })) : (react_1.default.createElement(utils_1.SvgCaretDownSmall, { "aria-hidden": true })), ref: refs, "aria-label": 'Dropdown', ...rest }, children)));
 });
 exports.default = exports.DropdownButton;

package/cjs/core/Buttons/IconButton/IconButton.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.IconButton = 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/button.css");
 /**
  * Icon button
@@ -40,10 +18,10 @@ require("@itwin/itwinui-css/css/button.css");
  * <IconButton><SvgAdd /></IconButton>
  * <IconButton styleType='borderless'><SvgAdd /></IconButton>
  */
-exports.IconButton = react_1.default.forwardRef(function (props, ref) {
-    var isActive = props.isActive, children = props.children, _a = props.styleType, styleType = _a === void 0 ? 'default' : _a, size = props.size, _b = props.type, type = _b === void 0 ? 'button' : _b, className = props.className, _c = props.as, Element = _c === void 0 ? 'button' : _c, rest = __rest(props, ["isActive", "children", "styleType", "size", "type", "className", "as"]);
+exports.IconButton = react_1.default.forwardRef((props, ref) => {
+    const { isActive, children, styleType = 'default', size, type = 'button', className, as: Element = 'button', ...rest } = props;
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement(Element, __assign({ ref: ref, className: (0, classnames_1.default)('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, "data-iui-active": isActive, type: type }, rest),
+    return (react_1.default.createElement(Element, { ref: ref, className: (0, classnames_1.default)('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, "data-iui-active": isActive, type: type, ...rest },
         react_1.default.createElement("span", { className: 'iui-button-icon', "aria-hidden": true }, children)));
 });
 exports.default = exports.IconButton;

package/cjs/core/Buttons/IdeasButton/IdeasButton.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,17 +8,17 @@ exports.IdeasButton = 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 utils_1 = require("../../utils");
-var Button_1 = require("../Button");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../../utils");
+const Button_1 = require("../Button");
 /**
  * Ideas button
  * @example
  * <IdeasButton />
  */
-exports.IdeasButton = react_1.default.forwardRef(function (props, ref) {
-    var _a = props.feedbackLabel, feedbackLabel = _a === void 0 ? 'Feedback' : _a, onClick = props.onClick, rest = __rest(props, ["feedbackLabel", "onClick"]);
+exports.IdeasButton = react_1.default.forwardRef((props, ref) => {
+    const { feedbackLabel = 'Feedback', onClick, ...rest } = props;
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement(Button_1.Button, __assign({ ref: ref, "data-iui-variant": 'idea', onClick: onClick, startIcon: react_1.default.createElement(utils_1.SvgSmileyHappy, { "aria-hidden": true }) }, rest), feedbackLabel));
+    return (react_1.default.createElement(Button_1.Button, { ref: ref, "data-iui-variant": 'idea', onClick: onClick, startIcon: react_1.default.createElement(utils_1.SvgSmileyHappy, { "aria-hidden": true }), ...rest }, feedbackLabel));
 });
 exports.default = exports.IdeasButton;

package/cjs/core/Buttons/SplitButton/SplitButton.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,12 +8,12 @@ exports.SplitButton = 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 Button_1 = require("../Button");
-var IconButton_1 = require("../IconButton");
-var DropdownMenu_1 = require("../../DropdownMenu");
-var utils_1 = require("../../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const Button_1 = require("../Button");
+const IconButton_1 = require("../IconButton");
+const DropdownMenu_1 = require("../../DropdownMenu");
+const utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/button.css");
 /**
  * Split button component with a DropdownMenu.
@@ -51,13 +29,13 @@ require("@itwin/itwinui-css/css/button.css");
  * <SplitButton onClick={onClick} menuItems={menuItems}>Default</SplitButton>
  * <SplitButton onClick={onClick} menuItems={menuItems} styleType='high-visibility'>High visibility</SplitButton>
  */
-exports.SplitButton = react_1.default.forwardRef(function (props, forwardedRef) {
-    var onClick = props.onClick, menuItems = props.menuItems, className = props.className, _a = props.menuPlacement, menuPlacement = _a === void 0 ? 'bottom-end' : _a, _b = props.styleType, styleType = _b === void 0 ? 'default' : _b, size = props.size, children = props.children, style = props.style, title = props.title, rest = __rest(props, ["onClick", "menuItems", "className", "menuPlacement", "styleType", "size", "children", "style", "title"]);
+exports.SplitButton = react_1.default.forwardRef((props, forwardedRef) => {
+    const { onClick, menuItems, className, menuPlacement = 'bottom-end', styleType = 'default', size, children, style, title, ...rest } = props;
     (0, utils_1.useTheme)();
-    var _c = react_1.default.useState(false), isMenuOpen = _c[0], setIsMenuOpen = _c[1];
-    var _d = react_1.default.useState(0), menuWidth = _d[0], setMenuWidth = _d[1];
-    var ref = react_1.default.useRef(null);
-    react_1.default.useEffect(function () {
+    const [isMenuOpen, setIsMenuOpen] = react_1.default.useState(false);
+    const [menuWidth, setMenuWidth] = react_1.default.useState(0);
+    const ref = react_1.default.useRef(null);
+    react_1.default.useEffect(() => {
         if (ref.current) {
             setMenuWidth(ref.current.offsetWidth);
         }
@@ -65,8 +43,8 @@ exports.SplitButton = react_1.default.forwardRef(function (props, forwardedRef)
     return (react_1.default.createElement("span", { className: (0, classnames_1.default)(className, 'iui-button-split', {
             'iui-disabled': props.disabled,
         }), style: style, title: title, ref: ref },
-        react_1.default.createElement(Button_1.Button, __assign({ styleType: styleType, size: size, onClick: onClick, ref: forwardedRef }, rest), children),
-        react_1.default.createElement(DropdownMenu_1.DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: react_1.default.useCallback(function () { return setIsMenuOpen(true); }, []), onHide: react_1.default.useCallback(function () { return setIsMenuOpen(false); }, []) },
+        react_1.default.createElement(Button_1.Button, { styleType: styleType, size: size, onClick: onClick, ref: forwardedRef, ...rest }, children),
+        react_1.default.createElement(DropdownMenu_1.DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: react_1.default.useCallback(() => setIsMenuOpen(true), []), onHide: react_1.default.useCallback(() => setIsMenuOpen(false), []) },
             react_1.default.createElement(IconButton_1.IconButton, { styleType: styleType, size: size, disabled: props.disabled }, isMenuOpen ? react_1.default.createElement(utils_1.SvgCaretUpSmall, null) : react_1.default.createElement(utils_1.SvgCaretDownSmall, null)))));
 });
 exports.default = exports.SplitButton;

package/cjs/core/Carousel/Carousel.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,16 +8,16 @@ exports.Carousel = 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/carousel.css");
-var CarouselContext_1 = require("./CarouselContext");
-var CarouselSlider_1 = require("./CarouselSlider");
-var CarouselSlide_1 = require("./CarouselSlide");
-var CarouselDotsList_1 = require("./CarouselDotsList");
-var CarouselDot_1 = require("./CarouselDot");
-var CarouselNavigation_1 = require("./CarouselNavigation");
+const CarouselContext_1 = require("./CarouselContext");
+const CarouselSlider_1 = require("./CarouselSlider");
+const CarouselSlide_1 = require("./CarouselSlide");
+const CarouselDotsList_1 = require("./CarouselDotsList");
+const CarouselDot_1 = require("./CarouselDot");
+const CarouselNavigation_1 = require("./CarouselNavigation");
 /**
  * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
  * located below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides.
@@ -58,18 +36,18 @@ var CarouselNavigation_1 = require("./CarouselNavigation");
  *   <Carousel.Navigation />
  * </Carousel>
  */
-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"]);
+exports.Carousel = Object.assign(react_1.default.forwardRef((props, ref) => {
+    const { activeSlideIndex: userActiveIndex = 0, onSlideChange, className, children, ...rest } = props;
     // 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-".concat((0, utils_1.getRandomValue)(10)); })[0];
+    const [id] = react_1.default.useState(() => { var _a; return (_a = props.id) !== null && _a !== void 0 ? _a : `iui-carousel-${(0, utils_1.getRandomValue)(10)}`; });
     (0, utils_1.useTheme)();
-    var isManuallyUpdating = react_1.default.useRef(false);
-    var carouselRef = react_1.default.useRef(null);
-    var refs = (0, utils_1.useMergedRefs)(carouselRef, ref);
-    var _b = react_1.default.useState(userActiveIndex), currentIndex = _b[0], setCurrentIndex = _b[1];
-    var scrollToSlide = react_1.default.useRef(function () { }); // stub function populated in CarouselSlider
-    var justMounted = react_1.default.useRef(true);
-    react_1.default.useEffect(function () {
+    const isManuallyUpdating = react_1.default.useRef(false);
+    const carouselRef = react_1.default.useRef(null);
+    const refs = (0, utils_1.useMergedRefs)(carouselRef, ref);
+    const [currentIndex, setCurrentIndex] = react_1.default.useState(userActiveIndex);
+    const scrollToSlide = react_1.default.useRef(() => { }); // stub function populated in CarouselSlider
+    const justMounted = react_1.default.useRef(true);
+    react_1.default.useEffect(() => {
         var _a;
         setCurrentIndex(userActiveIndex);
         scrollToSlide.current(userActiveIndex, {
@@ -82,52 +60,49 @@ exports.Carousel = Object.assign(react_1.default.forwardRef(function (props, ref
         }
         justMounted.current = false;
     }, [userActiveIndex]);
-    var _c = react_1.default.useState(0), slideCount = _c[0], setSlideCount = _c[1];
-    var _d = react_1.default.useState({}), keysPressed = _d[0], setKeysPressed = _d[1];
-    var handleKeyDown = function (event) {
+    const [slideCount, setSlideCount] = react_1.default.useState(0);
+    const [keysPressed, setKeysPressed] = react_1.default.useState({});
+    const handleKeyDown = (event) => {
         if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
             return;
         }
         if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-            setKeysPressed(function (old) {
-                var _a;
-                return (__assign(__assign({}, old), (_a = {}, _a[event.key] = true, _a)));
-            });
+            setKeysPressed((old) => ({ ...old, [event.key]: true }));
         }
     };
-    var handleKeyUp = function (event) {
+    const handleKeyUp = (event) => {
         switch (event.key) {
             case 'ArrowLeft': {
-                setKeysPressed(function (old) { return (__assign(__assign({}, old), { ArrowLeft: false })); });
-                var prevIndex = (slideCount + currentIndex - 1) % slideCount;
+                setKeysPressed((old) => ({ ...old, ArrowLeft: false }));
+                const prevIndex = (slideCount + currentIndex - 1) % slideCount;
                 scrollToSlide.current(prevIndex);
                 setCurrentIndex(prevIndex);
                 break;
             }
             case 'ArrowRight': {
-                setKeysPressed(function (old) { return (__assign(__assign({}, old), { ArrowRight: false })); });
-                var nextIndex = (slideCount + currentIndex + 1) % slideCount;
+                setKeysPressed((old) => ({ ...old, ArrowRight: false }));
+                const nextIndex = (slideCount + currentIndex + 1) % slideCount;
                 scrollToSlide.current(nextIndex);
                 setCurrentIndex(nextIndex);
                 break;
             }
         }
     };
-    var userOnSlideChange = react_1.default.useRef(onSlideChange);
-    react_1.default.useEffect(function () {
+    const userOnSlideChange = react_1.default.useRef(onSlideChange);
+    react_1.default.useEffect(() => {
         var _a;
         (_a = userOnSlideChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnSlideChange, currentIndex);
     }, [currentIndex]);
-    return (react_1.default.createElement("section", __assign({ "aria-roledescription": 'carousel', tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: refs, className: (0, classnames_1.default)('iui-carousel', className) }, rest, { id: id }),
+    return (react_1.default.createElement("section", { "aria-roledescription": 'carousel', tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: refs, className: (0, classnames_1.default)('iui-carousel', className), ...rest, id: id },
         react_1.default.createElement(CarouselContext_1.CarouselContext.Provider, { value: {
-                currentIndex: currentIndex,
-                setCurrentIndex: setCurrentIndex,
-                slideCount: slideCount,
-                setSlideCount: setSlideCount,
-                keysPressed: keysPressed,
+                currentIndex,
+                setCurrentIndex,
+                slideCount,
+                setSlideCount,
+                keysPressed,
                 idPrefix: id,
-                isManuallyUpdating: isManuallyUpdating,
-                scrollToSlide: scrollToSlide,
+                isManuallyUpdating,
+                scrollToSlide,
             } }, children)));
 }), {
     Slider: CarouselSlider_1.CarouselSlider,

package/cjs/core/Carousel/CarouselContext.js

@@ -8,5 +8,5 @@ exports.CarouselContext = 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"));
+const react_1 = __importDefault(require("react"));
 exports.CarouselContext = react_1.default.createContext(undefined);

package/cjs/core/Carousel/CarouselDot.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,17 +8,17 @@ exports.CarouselDot = 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"));
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 /**
  * `CarouselDot` is the actual "dot" component used to activate a slide on clicking.
  * It should be used as a child of `CarouselDotsList`.
  */
-exports.CarouselDot = react_1.default.forwardRef(function (props, ref) {
-    var isActive = props.isActive, isSmaller = props.isSmaller, isSmall = props.isSmall, className = props.className, rest = __rest(props, ["isActive", "isSmaller", "isSmall", "className"]);
-    return (react_1.default.createElement("button", __assign({ type: 'button', role: 'tab', tabIndex: -1, className: (0, classnames_1.default)('iui-carousel-navigation-dot', {
+exports.CarouselDot = react_1.default.forwardRef((props, ref) => {
+    const { isActive, isSmaller, isSmall, className, ...rest } = props;
+    return (react_1.default.createElement("button", { type: 'button', role: 'tab', tabIndex: -1, className: (0, classnames_1.default)('iui-carousel-navigation-dot', {
             'iui-active': isActive,
             'iui-first': isSmaller,
             'iui-second': isSmall,
-        }, className), "aria-selected": isActive, ref: ref }, rest)));
+        }, className), "aria-selected": isActive, ref: ref, ...rest }));
 });

package/cjs/core/Carousel/CarouselDotsList.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.CarouselDotsList = 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 CarouselContext_1 = require("./CarouselContext");
-var utils_1 = require("../utils");
-var CarouselDot_1 = require("./CarouselDot");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const CarouselContext_1 = require("./CarouselContext");
+const utils_1 = require("../utils");
+const CarouselDot_1 = require("./CarouselDot");
 require("@itwin/itwinui-css/css/carousel.css");
 /**
  * The `CarouselDots` component shows a list of `CarouselDot` components which can be used to
@@ -58,52 +36,47 @@ require("@itwin/itwinui-css/css/carousel.css");
  *   onSlideChange={(i) => setCurrent(i)}
  * />
  */
-exports.CarouselDotsList = react_1.default.forwardRef(function (props, ref) {
+exports.CarouselDotsList = react_1.default.forwardRef((props, ref) => {
     var _a, _b, _c;
-    var userCurrentIndex = props.currentIndex, length = props.length, className = props.className, onSlideChange = props.onSlideChange, children = props.children, rest = __rest(props, ["currentIndex", "length", "className", "onSlideChange", "children"]);
+    const { currentIndex: userCurrentIndex, length, className, onSlideChange, children, ...rest } = props;
     (0, utils_1.useTheme)();
-    var context = react_1.default.useContext(CarouselContext_1.CarouselContext);
-    var slideCount = (_a = length !== null && length !== void 0 ? length : context === null || context === void 0 ? void 0 : context.slideCount) !== null && _a !== void 0 ? _a : react_1.default.Children.count(children);
-    var currentIndex = (_b = userCurrentIndex !== null && userCurrentIndex !== void 0 ? userCurrentIndex : context === null || context === void 0 ? void 0 : context.currentIndex) !== null && _b !== void 0 ? _b : 0;
-    var idPrefix = (_c = props.id) !== null && _c !== void 0 ? _c : context === null || context === void 0 ? void 0 : context.idPrefix;
-    var handleSlideChange = react_1.default.useCallback(function (index) {
+    const context = react_1.default.useContext(CarouselContext_1.CarouselContext);
+    const slideCount = (_a = length !== null && length !== void 0 ? length : context === null || context === void 0 ? void 0 : context.slideCount) !== null && _a !== void 0 ? _a : react_1.default.Children.count(children);
+    const currentIndex = (_b = userCurrentIndex !== null && userCurrentIndex !== void 0 ? userCurrentIndex : context === null || context === void 0 ? void 0 : context.currentIndex) !== null && _b !== void 0 ? _b : 0;
+    const idPrefix = (_c = props.id) !== null && _c !== void 0 ? _c : context === null || context === void 0 ? void 0 : context.idPrefix;
+    const handleSlideChange = react_1.default.useCallback((index) => {
         if (context) {
             context.setCurrentIndex(index);
             context.scrollToSlide.current(index);
         }
         onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(index);
     }, [context, onSlideChange]);
-    var justMounted = react_1.default.useRef(true);
-    var _d = react_1.default.useState(slideCount), visibleCount = _d[0], setVisibleCount = _d[1];
-    var listRef = react_1.default.useRef(null);
-    var _e = react_1.default.useState(), width = _e[0], setWidth = _e[1];
-    var _f = (0, utils_1.useResizeObserver)(function (_a) {
-        var width = _a.width;
+    const justMounted = react_1.default.useRef(true);
+    const [visibleCount, setVisibleCount] = react_1.default.useState(slideCount);
+    const listRef = react_1.default.useRef(null);
+    const [width, setWidth] = react_1.default.useState();
+    const [resizeRef, resizeObserver] = (0, utils_1.useResizeObserver)(({ width }) => {
         if (!listRef.current) {
             return;
         }
         setWidth(width);
-        var dotWidth = listRef.current.children[0].offsetWidth;
+        const dotWidth = listRef.current.children[0].offsetWidth;
         setVisibleCount(Math.floor(width / dotWidth));
-    }), resizeRef = _f[0], resizeObserver = _f[1];
-    react_1.default.useEffect(function () { return resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect(); }, [resizeObserver]);
-    var refs = (0, utils_1.useMergedRefs)(ref, resizeRef, listRef);
-    var firstVisibleDotIndex = react_1.default.useMemo(function () {
-        return (0, utils_1.getBoundedValue)(currentIndex - Math.ceil(visibleCount / 2) + 1, 0, slideCount - visibleCount);
-    }, [currentIndex, slideCount, visibleCount]);
-    var lastVisibleDotIndex = react_1.default.useMemo(function () {
-        return (0, utils_1.getBoundedValue)(currentIndex + Math.floor(visibleCount / 2), visibleCount - 1, slideCount - 1);
-    }, [currentIndex, slideCount, visibleCount]);
-    var dots = react_1.default.useMemo(function () {
+    });
+    react_1.default.useEffect(() => resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect(), [resizeObserver]);
+    const refs = (0, utils_1.useMergedRefs)(ref, resizeRef, listRef);
+    const firstVisibleDotIndex = react_1.default.useMemo(() => (0, utils_1.getBoundedValue)(currentIndex - Math.ceil(visibleCount / 2) + 1, 0, slideCount - visibleCount), [currentIndex, slideCount, visibleCount]);
+    const lastVisibleDotIndex = react_1.default.useMemo(() => (0, utils_1.getBoundedValue)(currentIndex + Math.floor(visibleCount / 2), visibleCount - 1, slideCount - 1), [currentIndex, slideCount, visibleCount]);
+    const dots = react_1.default.useMemo(() => {
         return Array(slideCount)
             .fill(null)
-            .map(function (_, index) {
-            var isFirstSmallDot = (index === firstVisibleDotIndex && index !== 0) ||
+            .map((_, index) => {
+            const isFirstSmallDot = (index === firstVisibleDotIndex && index !== 0) ||
                 (index === lastVisibleDotIndex && index !== slideCount - 1);
-            var isSecondSmallDot = (index === firstVisibleDotIndex + 1 && index !== 1) ||
+            const 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 ".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) }));
+            const isClipped = index < firstVisibleDotIndex || index > lastVisibleDotIndex;
+            return (react_1.default.createElement(CarouselDot_1.CarouselDot, { key: index, "aria-label": `Slide ${index}`, isActive: index === currentIndex, onClick: () => handleSlideChange(index), isSmall: isSecondSmallDot, isSmaller: isFirstSmallDot || isClipped, id: idPrefix && `${idPrefix}--dot-${index}`, "aria-controls": idPrefix && `${idPrefix}--slide-${index}` }));
         });
     }, [
         slideCount,
@@ -113,13 +86,13 @@ exports.CarouselDotsList = react_1.default.forwardRef(function (props, ref) {
         idPrefix,
         handleSlideChange,
     ]);
-    react_1.default.useEffect(function () {
+    react_1.default.useEffect(() => {
         var _a, _b, _c;
-        var firstDot = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children[firstVisibleDotIndex];
+        const firstDot = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children[firstVisibleDotIndex];
         if (!listRef.current || !firstDot) {
             return;
         }
-        var motionOk = (_c = (_b = (0, utils_1.getWindow)()) === null || _b === void 0 ? void 0 : _b.matchMedia('(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches;
+        const motionOk = (_c = (_b = (0, utils_1.getWindow)()) === null || _b === void 0 ? void 0 : _b.matchMedia('(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches;
         listRef.current.scrollTo({
             left: firstDot.offsetLeft - listRef.current.offsetLeft,
             behavior: motionOk && !justMounted.current ? 'smooth' : 'auto',
@@ -129,5 +102,5 @@ exports.CarouselDotsList = react_1.default.forwardRef(function (props, ref) {
         }
     }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-carousel-navigation-dots', className), role: 'tablist', "aria-label": 'Slides', ref: refs }, rest), children !== null && children !== void 0 ? children : dots)));
+        react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-carousel-navigation-dots', className), role: 'tablist', "aria-label": 'Slides', ref: refs, ...rest }, children !== null && children !== void 0 ? children : dots)));
 });