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

package/esm/core/ButtonGroup/ButtonGroup.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.
@@ -56,17 +34,17 @@ import '@itwin/itwinui-css/css/button.css';
  *   {buttons}
  * </ButtonGroup>
  */
-export var ButtonGroup = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, overflowButton = props.overflowButton, _a = props.overflowPlacement, overflowPlacement = _a === void 0 ? 'end' : _a, _b = props.orientation, orientation = _b === void 0 ? 'horizontal' : _b, rest = __rest(props, ["children", "className", "overflowButton", "overflowPlacement", "orientation"]);
-    var items = React.useMemo(function () { var _a; return (_a = React.Children.map(children, function (child) { return React.createElement("div", null, child); })) !== null && _a !== void 0 ? _a : []; }, [children]);
+export const ButtonGroup = React.forwardRef((props, ref) => {
+    const { children, className, overflowButton, overflowPlacement = 'end', orientation = 'horizontal', ...rest } = props;
+    const items = React.useMemo(() => { var _a; return (_a = React.Children.map(children, (child) => React.createElement("div", null, child))) !== null && _a !== void 0 ? _a : []; }, [children]);
     useTheme();
-    var _c = useOverflow(items, !overflowButton, orientation), overflowRef = _c[0], visibleCount = _c[1];
-    var refs = useMergedRefs(overflowRef, ref);
-    return (React.createElement("div", __assign({ className: cx({
+    const [overflowRef, visibleCount] = useOverflow(items, !overflowButton, orientation);
+    const refs = useMergedRefs(overflowRef, ref);
+    return (React.createElement("div", { className: cx({
             'iui-button-group': orientation === 'horizontal',
             'iui-button-group-vertical': orientation === 'vertical',
             'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
-        }, className), "aria-orientation": orientation, ref: refs }, rest),
+        }, className), "aria-orientation": orientation, ref: refs, ...rest },
         React.createElement(React.Fragment, null,
             visibleCount < items.length &&
                 overflowButton &&

package/esm/core/Buttons/Button/Button.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.
@@ -37,10 +15,10 @@ import '@itwin/itwinui-css/css/button.css';
  * <Button size='small' styleType='cta'>This is a small call to action button</Button>
  * <Button startIcon={<SvgAdd />}>New</Button>
  */
-export var Button = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, size = props.size, style = props.style, _a = props.styleType, styleType = _a === void 0 ? 'default' : _a, _b = props.type, type = _b === void 0 ? 'button' : _b, startIcon = props.startIcon, endIcon = props.endIcon, _c = props.as, Element = _c === void 0 ? 'button' : _c, rest = __rest(props, ["children", "className", "size", "style", "styleType", "type", "startIcon", "endIcon", "as"]);
+export const Button = React.forwardRef((props, ref) => {
+    const { children, className, size, style, styleType = 'default', type = 'button', startIcon, endIcon, as: Element = 'button', ...rest } = props;
     useTheme();
-    return (React.createElement(Element, __assign({ ref: ref, className: cx('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, style: style, type: type }, rest),
+    return (React.createElement(Element, { ref: ref, className: cx('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, style: style, type: type, ...rest },
         startIcon && (React.createElement("span", { className: 'iui-button-icon', "aria-hidden": true }, startIcon)),
         children && React.createElement("span", null, children),
         endIcon && (React.createElement("span", { className: 'iui-button-icon', "aria-hidden": true }, endIcon))));

package/esm/core/Buttons/DropdownButton/DropdownButton.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.
@@ -39,19 +17,19 @@ import '@itwin/itwinui-css/css/button.css';
  * ];
  * <DropdownButton menuItems={menuItems}>Default</DropdownButton>
  */
-export var DropdownButton = React.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"]);
+export const DropdownButton = React.forwardRef((props, ref) => {
+    const { menuItems, className, size, styleType, children, ...rest } = props;
     useTheme();
-    var _a = React.useState(false), isMenuOpen = _a[0], setIsMenuOpen = _a[1];
-    var _b = React.useState(0), menuWidth = _b[0], setMenuWidth = _b[1];
-    var buttonRef = React.useRef(null);
-    var refs = useMergedRefs(ref, buttonRef);
-    React.useEffect(function () {
+    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+    const [menuWidth, setMenuWidth] = React.useState(0);
+    const buttonRef = React.useRef(null);
+    const refs = useMergedRefs(ref, buttonRef);
+    React.useEffect(() => {
         if (buttonRef.current) {
             setMenuWidth(buttonRef.current.offsetWidth);
         }
     }, [children, size, styleType]);
-    return (React.createElement(DropdownMenu, { menuItems: menuItems, style: { minWidth: menuWidth }, onShow: function () { return setIsMenuOpen(true); }, onHide: function () { return setIsMenuOpen(false); } },
-        React.createElement(Button, __assign({ className: cx('iui-button-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (React.createElement(SvgCaretUpSmall, { "aria-hidden": true })) : (React.createElement(SvgCaretDownSmall, { "aria-hidden": true })), ref: refs, "aria-label": 'Dropdown' }, rest), children)));
+    return (React.createElement(DropdownMenu, { menuItems: menuItems, style: { minWidth: menuWidth }, onShow: () => setIsMenuOpen(true), onHide: () => setIsMenuOpen(false) },
+        React.createElement(Button, { className: cx('iui-button-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (React.createElement(SvgCaretUpSmall, { "aria-hidden": true })) : (React.createElement(SvgCaretDownSmall, { "aria-hidden": true })), ref: refs, "aria-label": 'Dropdown', ...rest }, children)));
 });
 export default DropdownButton;

package/esm/core/Buttons/IconButton/IconButton.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.
@@ -34,10 +12,10 @@ import '@itwin/itwinui-css/css/button.css';
  * <IconButton><SvgAdd /></IconButton>
  * <IconButton styleType='borderless'><SvgAdd /></IconButton>
  */
-export var IconButton = React.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"]);
+export const IconButton = React.forwardRef((props, ref) => {
+    const { isActive, children, styleType = 'default', size, type = 'button', className, as: Element = 'button', ...rest } = props;
     useTheme();
-    return (React.createElement(Element, __assign({ ref: ref, className: cx('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, "data-iui-active": isActive, type: type }, rest),
+    return (React.createElement(Element, { ref: ref, className: cx('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, "data-iui-active": isActive, type: type, ...rest },
         React.createElement("span", { className: 'iui-button-icon', "aria-hidden": true }, children)));
 });
 export default IconButton;

package/esm/core/Buttons/IdeasButton/IdeasButton.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,9 +10,9 @@ import { Button } from '../Button';
  * @example
  * <IdeasButton />
  */
-export var IdeasButton = React.forwardRef(function (props, ref) {
-    var _a = props.feedbackLabel, feedbackLabel = _a === void 0 ? 'Feedback' : _a, onClick = props.onClick, rest = __rest(props, ["feedbackLabel", "onClick"]);
+export const IdeasButton = React.forwardRef((props, ref) => {
+    const { feedbackLabel = 'Feedback', onClick, ...rest } = props;
     useTheme();
-    return (React.createElement(Button, __assign({ ref: ref, "data-iui-variant": 'idea', onClick: onClick, startIcon: React.createElement(SvgSmileyHappy, { "aria-hidden": true }) }, rest), feedbackLabel));
+    return (React.createElement(Button, { ref: ref, "data-iui-variant": 'idea', onClick: onClick, startIcon: React.createElement(SvgSmileyHappy, { "aria-hidden": true }), ...rest }, feedbackLabel));
 });
 export default IdeasButton;

package/esm/core/Buttons/SplitButton/SplitButton.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.
@@ -45,13 +23,13 @@ import '@itwin/itwinui-css/css/button.css';
  * <SplitButton onClick={onClick} menuItems={menuItems}>Default</SplitButton>
  * <SplitButton onClick={onClick} menuItems={menuItems} styleType='high-visibility'>High visibility</SplitButton>
  */
-export var SplitButton = React.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"]);
+export const SplitButton = React.forwardRef((props, forwardedRef) => {
+    const { onClick, menuItems, className, menuPlacement = 'bottom-end', styleType = 'default', size, children, style, title, ...rest } = props;
     useTheme();
-    var _c = React.useState(false), isMenuOpen = _c[0], setIsMenuOpen = _c[1];
-    var _d = React.useState(0), menuWidth = _d[0], setMenuWidth = _d[1];
-    var ref = React.useRef(null);
-    React.useEffect(function () {
+    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+    const [menuWidth, setMenuWidth] = React.useState(0);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
         if (ref.current) {
             setMenuWidth(ref.current.offsetWidth);
         }
@@ -59,8 +37,8 @@ export var SplitButton = React.forwardRef(function (props, forwardedRef) {
     return (React.createElement("span", { className: cx(className, 'iui-button-split', {
             'iui-disabled': props.disabled,
         }), style: style, title: title, ref: ref },
-        React.createElement(Button, __assign({ styleType: styleType, size: size, onClick: onClick, ref: forwardedRef }, rest), children),
-        React.createElement(DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: React.useCallback(function () { return setIsMenuOpen(true); }, []), onHide: React.useCallback(function () { return setIsMenuOpen(false); }, []) },
+        React.createElement(Button, { styleType: styleType, size: size, onClick: onClick, ref: forwardedRef, ...rest }, children),
+        React.createElement(DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: React.useCallback(() => setIsMenuOpen(true), []), onHide: React.useCallback(() => setIsMenuOpen(false), []) },
             React.createElement(IconButton, { styleType: styleType, size: size, disabled: props.disabled }, isMenuOpen ? React.createElement(SvgCaretUpSmall, null) : React.createElement(SvgCaretDownSmall, null)))));
 });
 export default SplitButton;

package/esm/core/Carousel/Carousel.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.
@@ -52,18 +30,18 @@ import { CarouselNavigation } from './CarouselNavigation';
  *   <Carousel.Navigation />
  * </Carousel>
  */
-export var Carousel = Object.assign(React.forwardRef(function (props, ref) {
-    var _a = props.activeSlideIndex, userActiveIndex = _a === void 0 ? 0 : _a, onSlideChange = props.onSlideChange, className = props.className, children = props.children, rest = __rest(props, ["activeSlideIndex", "onSlideChange", "className", "children"]);
+export const Carousel = Object.assign(React.forwardRef((props, ref) => {
+    const { activeSlideIndex: userActiveIndex = 0, onSlideChange, className, children, ...rest } = props;
     // Generate a stateful random id if not specified
-    var id = React.useState(function () { var _a; return (_a = props.id) !== null && _a !== void 0 ? _a : "iui-carousel-".concat(getRandomValue(10)); })[0];
+    const [id] = React.useState(() => { var _a; return (_a = props.id) !== null && _a !== void 0 ? _a : `iui-carousel-${getRandomValue(10)}`; });
     useTheme();
-    var isManuallyUpdating = React.useRef(false);
-    var carouselRef = React.useRef(null);
-    var refs = useMergedRefs(carouselRef, ref);
-    var _b = React.useState(userActiveIndex), currentIndex = _b[0], setCurrentIndex = _b[1];
-    var scrollToSlide = React.useRef(function () { }); // stub function populated in CarouselSlider
-    var justMounted = React.useRef(true);
-    React.useEffect(function () {
+    const isManuallyUpdating = React.useRef(false);
+    const carouselRef = React.useRef(null);
+    const refs = useMergedRefs(carouselRef, ref);
+    const [currentIndex, setCurrentIndex] = React.useState(userActiveIndex);
+    const scrollToSlide = React.useRef(() => { }); // stub function populated in CarouselSlider
+    const justMounted = React.useRef(true);
+    React.useEffect(() => {
         var _a;
         setCurrentIndex(userActiveIndex);
         scrollToSlide.current(userActiveIndex, {
@@ -76,52 +54,49 @@ export var Carousel = Object.assign(React.forwardRef(function (props, ref) {
         }
         justMounted.current = false;
     }, [userActiveIndex]);
-    var _c = React.useState(0), slideCount = _c[0], setSlideCount = _c[1];
-    var _d = React.useState({}), keysPressed = _d[0], setKeysPressed = _d[1];
-    var handleKeyDown = function (event) {
+    const [slideCount, setSlideCount] = React.useState(0);
+    const [keysPressed, setKeysPressed] = React.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.useRef(onSlideChange);
-    React.useEffect(function () {
+    const userOnSlideChange = React.useRef(onSlideChange);
+    React.useEffect(() => {
         var _a;
         (_a = userOnSlideChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnSlideChange, currentIndex);
     }, [currentIndex]);
-    return (React.createElement("section", __assign({ "aria-roledescription": 'carousel', tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: refs, className: cx('iui-carousel', className) }, rest, { id: id }),
+    return (React.createElement("section", { "aria-roledescription": 'carousel', tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: refs, className: cx('iui-carousel', className), ...rest, id: id },
         React.createElement(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,

package/esm/core/Carousel/CarouselContext.js

@@ -3,4 +3,4 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-export var CarouselContext = React.createContext(undefined);
+export const CarouselContext = React.createContext(undefined);

package/esm/core/Carousel/CarouselDot.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.
@@ -30,11 +8,11 @@ import cx from 'classnames';
  * `CarouselDot` is the actual "dot" component used to activate a slide on clicking.
  * It should be used as a child of `CarouselDotsList`.
  */
-export var CarouselDot = React.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.createElement("button", __assign({ type: 'button', role: 'tab', tabIndex: -1, className: cx('iui-carousel-navigation-dot', {
+export const CarouselDot = React.forwardRef((props, ref) => {
+    const { isActive, isSmaller, isSmall, className, ...rest } = props;
+    return (React.createElement("button", { type: 'button', role: 'tab', tabIndex: -1, className: cx('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/esm/core/Carousel/CarouselDotsList.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.
@@ -52,52 +30,47 @@ import '@itwin/itwinui-css/css/carousel.css';
  *   onSlideChange={(i) => setCurrent(i)}
  * />
  */
-export var CarouselDotsList = React.forwardRef(function (props, ref) {
+export const CarouselDotsList = React.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;
     useTheme();
-    var context = React.useContext(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.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.useCallback(function (index) {
+    const context = React.useContext(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.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.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.useRef(true);
-    var _d = React.useState(slideCount), visibleCount = _d[0], setVisibleCount = _d[1];
-    var listRef = React.useRef(null);
-    var _e = React.useState(), width = _e[0], setWidth = _e[1];
-    var _f = useResizeObserver(function (_a) {
-        var width = _a.width;
+    const justMounted = React.useRef(true);
+    const [visibleCount, setVisibleCount] = React.useState(slideCount);
+    const listRef = React.useRef(null);
+    const [width, setWidth] = React.useState();
+    const [resizeRef, resizeObserver] = 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.useEffect(function () { return resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect(); }, [resizeObserver]);
-    var refs = useMergedRefs(ref, resizeRef, listRef);
-    var firstVisibleDotIndex = React.useMemo(function () {
-        return getBoundedValue(currentIndex - Math.ceil(visibleCount / 2) + 1, 0, slideCount - visibleCount);
-    }, [currentIndex, slideCount, visibleCount]);
-    var lastVisibleDotIndex = React.useMemo(function () {
-        return getBoundedValue(currentIndex + Math.floor(visibleCount / 2), visibleCount - 1, slideCount - 1);
-    }, [currentIndex, slideCount, visibleCount]);
-    var dots = React.useMemo(function () {
+    });
+    React.useEffect(() => resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect(), [resizeObserver]);
+    const refs = useMergedRefs(ref, resizeRef, listRef);
+    const firstVisibleDotIndex = React.useMemo(() => getBoundedValue(currentIndex - Math.ceil(visibleCount / 2) + 1, 0, slideCount - visibleCount), [currentIndex, slideCount, visibleCount]);
+    const lastVisibleDotIndex = React.useMemo(() => getBoundedValue(currentIndex + Math.floor(visibleCount / 2), visibleCount - 1, slideCount - 1), [currentIndex, slideCount, visibleCount]);
+    const dots = React.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.createElement(CarouselDot, { key: index, "aria-label": "Slide ".concat(index), isActive: index === currentIndex, onClick: function () { return handleSlideChange(index); }, isSmall: isSecondSmallDot, isSmaller: isFirstSmallDot || isClipped, id: idPrefix && "".concat(idPrefix, "--dot-").concat(index), "aria-controls": idPrefix && "".concat(idPrefix, "--slide-").concat(index) }));
+            const isClipped = index < firstVisibleDotIndex || index > lastVisibleDotIndex;
+            return (React.createElement(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,
@@ -107,13 +80,13 @@ export var CarouselDotsList = React.forwardRef(function (props, ref) {
         idPrefix,
         handleSlideChange,
     ]);
-    React.useEffect(function () {
+    React.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 = 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 = 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',
@@ -123,5 +96,5 @@ export var CarouselDotsList = React.forwardRef(function (props, ref) {
         }
     }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", __assign({ className: cx('iui-carousel-navigation-dots', className), role: 'tablist', "aria-label": 'Slides', ref: refs }, rest), children !== null && children !== void 0 ? children : dots)));
+        React.createElement("div", { className: cx('iui-carousel-navigation-dots', className), role: 'tablist', "aria-label": 'Slides', ref: refs, ...rest }, children !== null && children !== void 0 ? children : dots)));
 });