@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/cjs/core/Buttons/IdeasButton/IdeasButton.js

@@ -1,43 +1,33 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.IdeasButton = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const index_js_1 = require("../../utils/index.js");
-const index_js_2 = require("../Button/index.js");
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../../utils/index.js');
+const index_js_2 = require('../Button/index.js');
 /**
  * Ideas button
  * @example
  * <IdeasButton />
  */
 exports.IdeasButton = React.forwardRef((props, ref) => {
-    const { feedbackLabel = 'Feedback', onClick, ...rest } = props;
-    return (React.createElement(index_js_2.Button, { ref: ref, "data-iui-variant": 'idea', onClick: onClick, startIcon: React.createElement(index_js_1.SvgSmileyHappy, { "aria-hidden": true }), ...rest }, feedbackLabel));
+  const { feedbackLabel = 'Feedback', onClick, ...rest } = props;
+  return React.createElement(
+    index_js_2.Button,
+    {
+      ref: ref,
+      'data-iui-variant': 'idea',
+      onClick: onClick,
+      startIcon: React.createElement(index_js_1.SvgSmileyHappy, {
+        'aria-hidden': true,
+      }),
+      ...rest,
+    },
+    feedbackLabel,
+  );
 });
 exports.default = exports.IdeasButton;

package/cjs/core/Buttons/IdeasButton/index.js

@@ -1,10 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 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 IdeasButton_js_1 = require("./IdeasButton.js");
-Object.defineProperty(exports, "IdeasButton", { enumerable: true, get: function () { return IdeasButton_js_1.IdeasButton; } });
+var IdeasButton_js_1 = require('./IdeasButton.js');
+Object.defineProperty(exports, 'IdeasButton', {
+  enumerable: true,
+  get: function () {
+    return IdeasButton_js_1.IdeasButton;
+  },
+});
 exports.default = './IdeasButton';

package/cjs/core/Buttons/SplitButton/SplitButton.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import type { ButtonProps } from '../Button/Button.js';
-import type { Placement } from 'tippy.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
-export declare type SplitButtonProps = ButtonProps & {
+import { IconButton } from '../IconButton/index.js';
+import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
+import type { Placement } from '@floating-ui/react';
+export type SplitButtonProps = ButtonProps & {
     /**
      * Items in the dropdown menu.
      * Pass a function that takes the `close` argument (to close the menu),
@@ -19,7 +19,15 @@ export declare type SplitButtonProps = ButtonProps & {
      * Content of primary button.
      */
     children: React.ReactNode;
-};
+    /**
+     * Passes props to SplitButton wrapper.
+     */
+    wrapperProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props to SplitButton menu button.
+     */
+    menuButtonProps?: Omit<React.ComponentProps<typeof IconButton>, 'label' | 'size'>;
+} & Pick<PortalProps, 'portal'>;
 /**
  * Split button component with a DropdownMenu.
  *

package/cjs/core/Buttons/SplitButton/SplitButton.js

@@ -1,43 +1,17 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.SplitButton = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../Button/index.js");
-const index_js_2 = require("../IconButton/index.js");
-const index_js_3 = require("../../DropdownMenu/index.js");
-const index_js_4 = require("../../utils/index.js");
-require("@itwin/itwinui-css/css/button.css");
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../Button/index.js');
+const index_js_2 = require('../IconButton/index.js');
+const index_js_3 = require('../../utils/index.js');
+const Menu_js_1 = require('../../Menu/Menu.js');
 /**
  * Split button component with a DropdownMenu.
  *
@@ -53,20 +27,98 @@ require("@itwin/itwinui-css/css/button.css");
  * <SplitButton onClick={onClick} menuItems={menuItems} styleType='high-visibility'>High visibility</SplitButton>
  */
 exports.SplitButton = React.forwardRef((props, forwardedRef) => {
-    const { onClick, menuItems, className, menuPlacement = 'bottom-end', styleType = 'default', size, children, style, title, ...rest } = props;
-    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);
-        }
-    }, [children, size]);
-    return (React.createElement(index_js_4.Box, { className: (0, classnames_1.default)(className, 'iui-button-split', {
-            'iui-disabled': props.disabled,
-        }), style: style, title: title, ref: ref },
-        React.createElement(index_js_1.Button, { styleType: styleType, size: size, onClick: onClick, ref: forwardedRef, ...rest }, children),
-        React.createElement(index_js_3.DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: React.useCallback(() => setIsMenuOpen(true), []), onHide: React.useCallback(() => setIsMenuOpen(false), []) },
-            React.createElement(index_js_2.IconButton, { styleType: styleType, size: size, disabled: props.disabled }, isMenuOpen ? React.createElement(index_js_4.SvgCaretUpSmall, null) : React.createElement(index_js_4.SvgCaretDownSmall, null)))));
+  const {
+    onClick,
+    menuItems,
+    className,
+    menuPlacement = 'bottom-end',
+    styleType = 'default',
+    size,
+    children,
+    wrapperProps,
+    menuButtonProps,
+    portal = true,
+    ...rest
+  } = props;
+  const buttonRef = React.useRef(null);
+  const [visible, setVisible] = React.useState(false);
+  const close = React.useCallback(() => {
+    setVisible(false);
+    buttonRef.current?.focus({ preventScroll: true });
+  }, []);
+  const menuContent = React.useMemo(() => {
+    if (typeof menuItems === 'function') {
+      return menuItems(close);
+    }
+    return menuItems;
+  }, [menuItems, close]);
+  const popover = (0, index_js_3.usePopover)({
+    visible,
+    onVisibleChange: (open) => (open ? setVisible(true) : close()),
+    placement: menuPlacement,
+    matchWidth: true,
+  });
+  const labelId = (0, index_js_3.useId)();
+  return React.createElement(
+    index_js_3.Box,
+    {
+      ...wrapperProps,
+      ref: popover.refs.setPositionReference,
+      className: (0, classnames_1.default)(
+        'iui-button-split',
+        {
+          'iui-disabled': props.disabled,
+        },
+        wrapperProps?.className,
+      ),
+    },
+    React.createElement(
+      index_js_1.Button,
+      {
+        className: className,
+        styleType: styleType,
+        size: size,
+        onClick: onClick,
+        ref: (0, index_js_3.useMergedRefs)(buttonRef, forwardedRef),
+        ...rest,
+        labelProps: { id: labelId, ...props.labelProps },
+      },
+      children,
+    ),
+    React.createElement(
+      index_js_2.IconButton,
+      {
+        styleType: styleType,
+        size: size,
+        disabled: props.disabled,
+        'aria-labelledby': props.labelProps?.id || labelId,
+        'aria-expanded': popover.open,
+        ref: popover.refs.setReference,
+        ...popover.getReferenceProps(menuButtonProps),
+      },
+      visible
+        ? React.createElement(index_js_3.SvgCaretUpSmall, null)
+        : React.createElement(index_js_3.SvgCaretDownSmall, null),
+    ),
+    popover.open &&
+      React.createElement(
+        index_js_3.Portal,
+        { portal: portal },
+        React.createElement(
+          Menu_js_1.Menu,
+          {
+            ...popover.getFloatingProps({
+              onKeyDown: ({ key }) => {
+                if (key === 'Tab') {
+                  close();
+                }
+              },
+            }),
+            ref: popover.refs.setFloating,
+          },
+          menuContent,
+        ),
+      ),
+  );
 });
 exports.default = exports.SplitButton;

package/cjs/core/Buttons/SplitButton/index.js

@@ -1,10 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 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 SplitButton_js_1 = require("./SplitButton.js");
-Object.defineProperty(exports, "SplitButton", { enumerable: true, get: function () { return SplitButton_js_1.SplitButton; } });
+var SplitButton_js_1 = require('./SplitButton.js');
+Object.defineProperty(exports, 'SplitButton', {
+  enumerable: true,
+  get: function () {
+    return SplitButton_js_1.SplitButton;
+  },
+});
 exports.default = './SplitButton';

package/cjs/core/Buttons/index.js

@@ -1,17 +1,47 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SplitButton = exports.IconButton = exports.IdeasButton = exports.DropdownButton = exports.Button = void 0;
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.SplitButton =
+  exports.IconButton =
+  exports.IdeasButton =
+  exports.DropdownButton =
+  exports.Button =
+    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 index_js_1 = require("./Button/index.js");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return index_js_1.Button; } });
-var index_js_2 = require("./DropdownButton/index.js");
-Object.defineProperty(exports, "DropdownButton", { enumerable: true, get: function () { return index_js_2.DropdownButton; } });
-var index_js_3 = require("./IdeasButton/index.js");
-Object.defineProperty(exports, "IdeasButton", { enumerable: true, get: function () { return index_js_3.IdeasButton; } });
-var index_js_4 = require("./IconButton/index.js");
-Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return index_js_4.IconButton; } });
-var index_js_5 = require("./SplitButton/index.js");
-Object.defineProperty(exports, "SplitButton", { enumerable: true, get: function () { return index_js_5.SplitButton; } });
+var index_js_1 = require('./Button/index.js');
+Object.defineProperty(exports, 'Button', {
+  enumerable: true,
+  get: function () {
+    return index_js_1.Button;
+  },
+});
+var index_js_2 = require('./DropdownButton/index.js');
+Object.defineProperty(exports, 'DropdownButton', {
+  enumerable: true,
+  get: function () {
+    return index_js_2.DropdownButton;
+  },
+});
+var index_js_3 = require('./IdeasButton/index.js');
+Object.defineProperty(exports, 'IdeasButton', {
+  enumerable: true,
+  get: function () {
+    return index_js_3.IdeasButton;
+  },
+});
+var index_js_4 = require('./IconButton/index.js');
+Object.defineProperty(exports, 'IconButton', {
+  enumerable: true,
+  get: function () {
+    return index_js_4.IconButton;
+  },
+});
+var index_js_5 = require('./SplitButton/index.js');
+Object.defineProperty(exports, 'SplitButton', {
+  enumerable: true,
+  get: function () {
+    return index_js_5.SplitButton;
+  },
+});

package/cjs/core/Carousel/Carousel.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/carousel.css';
-declare type CarouselProps = {
+type CarouselProps = {
     /**
      * Index of the currently shown slide.
      * Can be used to set the default index or control the active slide programmatically.
@@ -37,20 +36,22 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
         index?: number | undefined;
     }>;
     Navigation: PolymorphicForwardRefComponent<"nav", {}> & {
-        PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+        PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "isActive" | "styleType"> & {
+        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
-        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+            iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;
-        NextButton: PolymorphicForwardRefComponent<"button", Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+        NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "isActive" | "styleType"> & {
+        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
-        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+            iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;
     };

package/cjs/core/Carousel/Carousel.js

@@ -1,114 +1,113 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Carousel = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/carousel.css");
-const CarouselContext_js_1 = require("./CarouselContext.js");
-const CarouselSlider_js_1 = require("./CarouselSlider.js");
-const CarouselSlide_js_1 = require("./CarouselSlide.js");
-const CarouselDotsList_js_1 = require("./CarouselDotsList.js");
-const CarouselDot_js_1 = require("./CarouselDot.js");
-const CarouselNavigation_js_1 = require("./CarouselNavigation.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
+const CarouselContext_js_1 = require('./CarouselContext.js');
+const CarouselSlider_js_1 = require('./CarouselSlider.js');
+const CarouselSlide_js_1 = require('./CarouselSlide.js');
+const CarouselDotsList_js_1 = require('./CarouselDotsList.js');
+const CarouselDot_js_1 = require('./CarouselDot.js');
+const CarouselNavigation_js_1 = require('./CarouselNavigation.js');
 const CarouselComponent = React.forwardRef((props, ref) => {
-    const { activeSlideIndex: userActiveIndex = 0, onSlideChange, className, children, ...rest } = props;
-    // Generate a stateful random id if not specified
-    const [id] = React.useState(() => { var _a; return (_a = props.id) !== null && _a !== void 0 ? _a : `iui-carousel-${(0, index_js_1.getRandomValue)(10)}`; });
-    const isManuallyUpdating = React.useRef(false);
-    const carouselRef = React.useRef(null);
-    const refs = (0, index_js_1.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, {
-            instant: justMounted.current,
-        });
-        // re-focus the carousel for keyboard nav, but not on first mount
-        // because it shows outline and might interfere with other components
-        if (!justMounted.current) {
-            (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
-        }
-        justMounted.current = false;
-    }, [userActiveIndex]);
-    const [slideCount, setSlideCount] = React.useState(0);
-    const [keysPressed, setKeysPressed] = React.useState({});
-    const handleKeyDown = (event) => {
-        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
-            return;
-        }
-        const key = event.key;
-        if (key === 'ArrowLeft' || key === 'ArrowRight') {
-            setKeysPressed((old) => ({ ...old, [key]: true }));
-        }
-    };
-    const handleKeyUp = (event) => {
-        switch (event.key) {
-            case 'ArrowLeft': {
-                setKeysPressed((old) => ({ ...old, ArrowLeft: false }));
-                const prevIndex = (slideCount + currentIndex - 1) % slideCount;
-                scrollToSlide.current(prevIndex);
-                setCurrentIndex(prevIndex);
-                break;
-            }
-            case 'ArrowRight': {
-                setKeysPressed((old) => ({ ...old, ArrowRight: false }));
-                const nextIndex = (slideCount + currentIndex + 1) % slideCount;
-                scrollToSlide.current(nextIndex);
-                setCurrentIndex(nextIndex);
-                break;
-            }
-        }
-    };
-    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(index_js_1.Box, { as: 'section', "aria-roledescription": 'carousel', tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: refs, className: (0, classnames_1.default)('iui-carousel', className), ...rest, id: id },
-        React.createElement(CarouselContext_js_1.CarouselContext.Provider, { value: {
-                currentIndex,
-                setCurrentIndex,
-                slideCount,
-                setSlideCount,
-                keysPressed,
-                idPrefix: id,
-                isManuallyUpdating,
-                scrollToSlide,
-            } }, children)));
+  const {
+    activeSlideIndex: userActiveIndex = 0,
+    onSlideChange,
+    className,
+    children,
+    ...rest
+  } = props;
+  // Generate a stateful random id if not specified
+  const [id] = React.useState(
+    () => props.id ?? `iui-carousel-${(0, index_js_1.getRandomValue)(10)}`,
+  );
+  const isManuallyUpdating = React.useRef(false);
+  const carouselRef = React.useRef(null);
+  const refs = (0, index_js_1.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(() => {
+    setCurrentIndex(userActiveIndex);
+    scrollToSlide.current(userActiveIndex, {
+      instant: justMounted.current,
+    });
+    // re-focus the carousel for keyboard nav, but not on first mount
+    // because it shows outline and might interfere with other components
+    if (!justMounted.current) {
+      carouselRef.current?.focus({ preventScroll: true });
+    }
+    justMounted.current = false;
+  }, [userActiveIndex]);
+  const [slideCount, setSlideCount] = React.useState(0);
+  const [keysPressed, setKeysPressed] = React.useState({});
+  const handleKeyDown = (event) => {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+      return;
+    }
+    const key = event.key;
+    if (key === 'ArrowLeft' || key === 'ArrowRight') {
+      setKeysPressed((old) => ({ ...old, [key]: true }));
+    }
+  };
+  const handleKeyUp = (event) => {
+    switch (event.key) {
+      case 'ArrowLeft': {
+        setKeysPressed((old) => ({ ...old, ArrowLeft: false }));
+        const prevIndex = (slideCount + currentIndex - 1) % slideCount;
+        scrollToSlide.current(prevIndex);
+        setCurrentIndex(prevIndex);
+        break;
+      }
+      case 'ArrowRight': {
+        setKeysPressed((old) => ({ ...old, ArrowRight: false }));
+        const nextIndex = (slideCount + currentIndex + 1) % slideCount;
+        scrollToSlide.current(nextIndex);
+        setCurrentIndex(nextIndex);
+        break;
+      }
+    }
+  };
+  const userOnSlideChange = (0, index_js_1.useLatestRef)(onSlideChange);
+  React.useEffect(() => {
+    userOnSlideChange.current?.(currentIndex);
+  }, [userOnSlideChange, currentIndex]);
+  return React.createElement(
+    index_js_1.Box,
+    {
+      as: 'section',
+      'aria-roledescription': 'carousel',
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      ref: refs,
+      className: (0, classnames_1.default)('iui-carousel', className),
+      ...rest,
+      id: id,
+    },
+    React.createElement(
+      CarouselContext_js_1.CarouselContext.Provider,
+      {
+        value: {
+          currentIndex,
+          setCurrentIndex,
+          slideCount,
+          setSlideCount,
+          keysPressed,
+          idPrefix: id,
+          isManuallyUpdating,
+          scrollToSlide,
+        },
+      },
+      children,
+    ),
+  );
 });
 /**
  * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
@@ -129,10 +128,10 @@ const CarouselComponent = React.forwardRef((props, ref) => {
  * </Carousel>
  */
 exports.Carousel = Object.assign(CarouselComponent, {
-    Slider: CarouselSlider_js_1.CarouselSlider,
-    Slide: CarouselSlide_js_1.CarouselSlide,
-    Navigation: CarouselNavigation_js_1.CarouselNavigation,
-    DotsList: CarouselDotsList_js_1.CarouselDotsList,
-    Dot: CarouselDot_js_1.CarouselDot,
+  Slider: CarouselSlider_js_1.CarouselSlider,
+  Slide: CarouselSlide_js_1.CarouselSlide,
+  Navigation: CarouselNavigation_js_1.CarouselNavigation,
+  DotsList: CarouselDotsList_js_1.CarouselDotsList,
+  Dot: CarouselDot_js_1.CarouselDot,
 });
 exports.default = exports.Carousel;