@itwin/itwinui-react 3.0.4 → 3.0.5

package/cjs/core/Buttons/SplitButton.js

@@ -1,18 +1,18 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.SplitButton = void 0;
-const tslib_1 = require('tslib');
+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 = tslib_1.__importDefault(require('classnames'));
-const React = tslib_1.__importStar(require('react'));
-const Button_js_1 = require('./Button.js');
-const IconButton_js_1 = require('./IconButton.js');
-const index_js_1 = require('../utils/index.js');
-const Menu_js_1 = require('../Menu/Menu.js');
-const Popover_js_1 = require('../Popover/Popover.js');
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const React = tslib_1.__importStar(require("react"));
+const Button_js_1 = require("./Button.js");
+const IconButton_js_1 = require("./IconButton.js");
+const index_js_1 = require("../utils/index.js");
+const Menu_js_1 = require("../Menu/Menu.js");
+const Popover_js_1 = require("../Popover/Popover.js");
 /**
  * Split button component with a DropdownMenu.
  *
@@ -28,98 +28,38 @@ const Popover_js_1 = require('../Popover/Popover.js');
  * <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,
-    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, Popover_js_1.usePopover)({
-    visible,
-    onVisibleChange: (open) => (open ? setVisible(true) : close()),
-    placement: menuPlacement,
-    matchWidth: true,
-  });
-  const labelId = (0, index_js_1.useId)();
-  return React.createElement(
-    index_js_1.Box,
-    {
-      ...wrapperProps,
-      ref: popover.refs.setPositionReference,
-      className: (0, classnames_1.default)(
-        'iui-button-split',
-        {
-          'iui-disabled': props.disabled,
-        },
-        wrapperProps?.className,
-      ),
-    },
-    React.createElement(
-      Button_js_1.Button,
-      {
-        className: className,
-        styleType: styleType,
-        size: size,
-        onClick: onClick,
-        ref: (0, index_js_1.useMergedRefs)(buttonRef, forwardedRef),
-        ...rest,
-        labelProps: { id: labelId, ...props.labelProps },
-      },
-      children,
-    ),
-    React.createElement(
-      IconButton_js_1.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_1.SvgCaretUpSmall, null)
-        : React.createElement(index_js_1.SvgCaretDownSmall, null),
-    ),
-    popover.open &&
-      React.createElement(
-        index_js_1.Portal,
-        { portal: portal },
-        React.createElement(
-          Menu_js_1.Menu,
-          {
-            ...popover.getFloatingProps({
-              onKeyDown: ({ key }) => {
-                if (key === 'Tab') {
-                  close();
-                }
-              },
-            }),
-            ref: popover.refs.setFloating,
-          },
-          menuContent,
-        ),
-      ),
-  );
+    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, Popover_js_1.usePopover)({
+        visible,
+        onVisibleChange: (open) => (open ? setVisible(true) : close()),
+        placement: menuPlacement,
+        matchWidth: true,
+    });
+    const labelId = (0, index_js_1.useId)();
+    return (React.createElement(index_js_1.Box, { ...wrapperProps, ref: popover.refs.setPositionReference, className: (0, classnames_1.default)('iui-button-split', {
+            'iui-disabled': props.disabled,
+        }, wrapperProps?.className) },
+        React.createElement(Button_js_1.Button, { className: className, styleType: styleType, size: size, onClick: onClick, ref: (0, index_js_1.useMergedRefs)(buttonRef, forwardedRef), ...rest, labelProps: { id: labelId, ...props.labelProps } }, children),
+        React.createElement(IconButton_js_1.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_1.SvgCaretUpSmall, null) : React.createElement(index_js_1.SvgCaretDownSmall, null)),
+        popover.open && (React.createElement(index_js_1.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/Carousel/Carousel.js

@@ -1,76 +1,52 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Carousel = void 0;
-const tslib_1 = require('tslib');
+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 = 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 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(
-    () => 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,
-    });
-    justMounted.current = false;
-  }, [userActiveIndex]);
-  const [slideCount, setSlideCount] = React.useState(0);
-  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',
-      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,
-          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,
+        });
+        justMounted.current = false;
+    }, [userActiveIndex]);
+    const [slideCount, setSlideCount] = React.useState(0);
+    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', 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,
+                idPrefix: id,
+                isManuallyUpdating,
+                scrollToSlide,
+            } }, children)));
 });
 /**
  * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
@@ -92,16 +68,16 @@ const CarouselComponent = React.forwardRef((props, ref) => {
  * </Carousel>
  */
 exports.Carousel = Object.assign(CarouselComponent, {
-  Slider: CarouselSlider_js_1.CarouselSlider,
-  Slide: CarouselSlide_js_1.CarouselSlide,
-  /**
-   * Contains the dots and previous/next buttons for navigating the slides. Must be present _before_ the slides in DOM.
-   */
-  Navigation: CarouselNavigation_js_1.CarouselNavigation,
-  /**
-   * Contains the dots for activating the slides. Must be present _before_ the slides in DOM.
-   */
-  DotsList: CarouselDotsList_js_1.CarouselDotsList,
-  Dot: CarouselDot_js_1.CarouselDot,
+    Slider: CarouselSlider_js_1.CarouselSlider,
+    Slide: CarouselSlide_js_1.CarouselSlide,
+    /**
+     * Contains the dots and previous/next buttons for navigating the slides. Must be present _before_ the slides in DOM.
+     */
+    Navigation: CarouselNavigation_js_1.CarouselNavigation,
+    /**
+     * Contains the dots for activating the slides. Must be present _before_ the slides in DOM.
+     */
+    DotsList: CarouselDotsList_js_1.CarouselDotsList,
+    Dot: CarouselDot_js_1.CarouselDot,
 });
 exports.default = exports.Carousel;

package/cjs/core/Carousel/CarouselContext.js

@@ -1,10 +1,10 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.CarouselContext = void 0;
-const tslib_1 = require('tslib');
+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 = tslib_1.__importStar(require('react'));
+const React = tslib_1.__importStar(require("react"));
 exports.CarouselContext = React.createContext(undefined);

package/cjs/core/Carousel/CarouselDot.js

@@ -1,34 +1,23 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.CarouselDot = void 0;
-const tslib_1 = require('tslib');
+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 = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
 /**
  * `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.forwardRef((props, ref) => {
-  const { isActive, isSmaller, isSmall, className, ...rest } = props;
-  return React.createElement(index_js_1.ButtonBase, {
-    role: 'tab',
-    tabIndex: isActive ? 0 : -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,
-  });
+    const { isActive, isSmaller, isSmall, className, ...rest } = props;
+    return (React.createElement(index_js_1.ButtonBase, { role: 'tab', tabIndex: isActive ? 0 : -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 }));
 });

package/cjs/core/Carousel/CarouselDotsList.js

@@ -1,16 +1,16 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.CarouselDotsList = void 0;
-const tslib_1 = require('tslib');
+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 = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const CarouselContext_js_1 = require('./CarouselContext.js');
-const index_js_1 = require('../utils/index.js');
-const CarouselDot_js_1 = require('./CarouselDot.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const CarouselContext_js_1 = require("./CarouselContext.js");
+const index_js_1 = require("../utils/index.js");
+const CarouselDot_js_1 = require("./CarouselDot.js");
 /**
  * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to
  * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need
@@ -34,150 +34,89 @@ const CarouselDot_js_1 = require('./CarouselDot.js');
  * />
  */
 exports.CarouselDotsList = React.forwardRef((props, ref) => {
-  const {
-    currentIndex: userCurrentIndex,
-    length,
-    className,
-    onSlideChange,
-    children,
-    ...rest
-  } = props;
-  const context = React.useContext(CarouselContext_js_1.CarouselContext);
-  const slideCount =
-    length ?? context?.slideCount ?? React.Children.count(children);
-  const currentIndex = userCurrentIndex ?? context?.currentIndex ?? 0;
-  const idPrefix = props.id ?? context?.idPrefix;
-  const handleSlideChange = React.useCallback(
-    (index) => {
-      if (context) {
-        context.setCurrentIndex(index);
-        context.scrollToSlide.current(index);
-      }
-      listRef.current?.children[index]?.focus();
-      onSlideChange?.(index);
-    },
-    [context, onSlideChange],
-  );
-  const justMounted = React.useRef(true);
-  const [visibleCount, setVisibleCount] = React.useState(slideCount);
-  const listRef = React.useRef(null);
-  const [width, setWidth] = React.useState();
-  const [resizeRef, resizeObserver] = (0, index_js_1.useResizeObserver)(
-    ({ width }) => {
-      if (!listRef.current) {
-        return;
-      }
-      setWidth(width);
-      const dotWidth = listRef.current.children[0].offsetWidth;
-      setVisibleCount(Math.floor(width / dotWidth));
-    },
-  );
-  React.useEffect(() => resizeObserver?.disconnect(), [resizeObserver]);
-  const refs = (0, index_js_1.useMergedRefs)(ref, resizeRef, listRef);
-  const firstVisibleDotIndex = React.useMemo(
-    () =>
-      (0, index_js_1.getBoundedValue)(
-        currentIndex - Math.ceil(visibleCount / 2) + 1,
-        0,
-        slideCount - visibleCount,
-      ),
-    [currentIndex, slideCount, visibleCount],
-  );
-  const lastVisibleDotIndex = React.useMemo(
-    () =>
-      (0, index_js_1.getBoundedValue)(
-        currentIndex + Math.floor(visibleCount / 2),
-        visibleCount - 1,
-        slideCount - 1,
-      ),
-    [currentIndex, slideCount, visibleCount],
-  );
-  const dots = React.useMemo(() => {
-    return Array(slideCount)
-      .fill(null)
-      .map((_, index) => {
-        const isFirstSmallDot =
-          (index === firstVisibleDotIndex && index !== 0) ||
-          (index === lastVisibleDotIndex && index !== slideCount - 1);
-        const isSecondSmallDot =
-          (index === firstVisibleDotIndex + 1 && index !== 1) ||
-          (index === lastVisibleDotIndex - 1 && index !== slideCount - 2);
-        const isClipped =
-          index < firstVisibleDotIndex || index > lastVisibleDotIndex;
-        return React.createElement(CarouselDot_js_1.CarouselDot, {
-          key: index,
-          'aria-label': `Slide ${index + 1}`,
-          isActive: index === currentIndex,
-          onClick: () => handleSlideChange(index),
-          isSmall: isSecondSmallDot,
-          isSmaller: isFirstSmallDot || isClipped,
-          id: idPrefix && `${idPrefix}--dot-${index}`,
-        });
-      });
-  }, [
-    slideCount,
-    firstVisibleDotIndex,
-    lastVisibleDotIndex,
-    currentIndex,
-    idPrefix,
-    handleSlideChange,
-  ]);
-  React.useEffect(() => {
-    const firstDot = listRef.current?.children[firstVisibleDotIndex];
-    if (!listRef.current || !firstDot) {
-      return;
-    }
-    const motionOk = (0, index_js_1.getWindow)()?.matchMedia(
-      '(prefers-reduced-motion: no-preference)',
-    )?.matches;
-    listRef.current.scrollTo({
-      left: firstDot.offsetLeft - listRef.current.offsetLeft,
-      behavior: motionOk && !justMounted.current ? 'smooth' : 'auto',
+    const { currentIndex: userCurrentIndex, length, className, onSlideChange, children, ...rest } = props;
+    const context = React.useContext(CarouselContext_js_1.CarouselContext);
+    const slideCount = length ?? context?.slideCount ?? React.Children.count(children);
+    const currentIndex = userCurrentIndex ?? context?.currentIndex ?? 0;
+    const idPrefix = props.id ?? context?.idPrefix;
+    const handleSlideChange = React.useCallback((index) => {
+        if (context) {
+            context.setCurrentIndex(index);
+            context.scrollToSlide.current(index);
+        }
+        listRef.current?.children[index]?.focus();
+        onSlideChange?.(index);
+    }, [context, onSlideChange]);
+    const justMounted = React.useRef(true);
+    const [visibleCount, setVisibleCount] = React.useState(slideCount);
+    const listRef = React.useRef(null);
+    const [width, setWidth] = React.useState();
+    const [resizeRef, resizeObserver] = (0, index_js_1.useResizeObserver)(({ width }) => {
+        if (!listRef.current) {
+            return;
+        }
+        setWidth(width);
+        const dotWidth = listRef.current.children[0].offsetWidth;
+        setVisibleCount(Math.floor(width / dotWidth));
     });
-    if (justMounted.current) {
-      justMounted.current = false;
-    }
-  }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
-  const handleKeyDown = (event) => {
-    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
-      return;
-    }
-    const key = event.key;
-    if (key === 'ArrowLeft' || key === 'ArrowRight') {
-      event.preventDefault();
-    }
-  };
-  const handleKeyUp = (event) => {
-    switch (event.key) {
-      case 'ArrowLeft': {
-        handleSlideChange((slideCount + currentIndex - 1) % slideCount);
-        break;
-      }
-      case 'ArrowRight': {
-        handleSlideChange((slideCount + currentIndex + 1) % slideCount);
-        break;
-      }
-    }
-  };
-  return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(
-      index_js_1.Box,
-      {
-        className: (0, classnames_1.default)(
-          'iui-carousel-navigation-dots',
-          className,
-        ),
-        role: 'tablist',
-        'aria-label': 'Slides',
-        ref: refs,
-        onKeyDown: handleKeyDown,
-        onKeyUp: handleKeyUp,
-        tabIndex: -1,
-        ...rest,
-      },
-      children ?? dots,
-    ),
-  );
+    React.useEffect(() => resizeObserver?.disconnect(), [resizeObserver]);
+    const refs = (0, index_js_1.useMergedRefs)(ref, resizeRef, listRef);
+    const firstVisibleDotIndex = React.useMemo(() => (0, index_js_1.getBoundedValue)(currentIndex - Math.ceil(visibleCount / 2) + 1, 0, slideCount - visibleCount), [currentIndex, slideCount, visibleCount]);
+    const lastVisibleDotIndex = React.useMemo(() => (0, index_js_1.getBoundedValue)(currentIndex + Math.floor(visibleCount / 2), visibleCount - 1, slideCount - 1), [currentIndex, slideCount, visibleCount]);
+    const dots = React.useMemo(() => {
+        return Array(slideCount)
+            .fill(null)
+            .map((_, index) => {
+            const isFirstSmallDot = (index === firstVisibleDotIndex && index !== 0) ||
+                (index === lastVisibleDotIndex && index !== slideCount - 1);
+            const isSecondSmallDot = (index === firstVisibleDotIndex + 1 && index !== 1) ||
+                (index === lastVisibleDotIndex - 1 && index !== slideCount - 2);
+            const isClipped = index < firstVisibleDotIndex || index > lastVisibleDotIndex;
+            return (React.createElement(CarouselDot_js_1.CarouselDot, { key: index, "aria-label": `Slide ${index + 1}`, isActive: index === currentIndex, onClick: () => handleSlideChange(index), isSmall: isSecondSmallDot, isSmaller: isFirstSmallDot || isClipped, id: idPrefix && `${idPrefix}--dot-${index}` }));
+        });
+    }, [
+        slideCount,
+        firstVisibleDotIndex,
+        lastVisibleDotIndex,
+        currentIndex,
+        idPrefix,
+        handleSlideChange,
+    ]);
+    React.useEffect(() => {
+        const firstDot = listRef.current?.children[firstVisibleDotIndex];
+        if (!listRef.current || !firstDot) {
+            return;
+        }
+        const motionOk = (0, index_js_1.getWindow)()?.matchMedia('(prefers-reduced-motion: no-preference)')?.matches;
+        listRef.current.scrollTo({
+            left: firstDot.offsetLeft - listRef.current.offsetLeft,
+            behavior: motionOk && !justMounted.current ? 'smooth' : 'auto',
+        });
+        if (justMounted.current) {
+            justMounted.current = false;
+        }
+    }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
+    const handleKeyDown = (event) => {
+        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+            return;
+        }
+        const key = event.key;
+        if (key === 'ArrowLeft' || key === 'ArrowRight') {
+            event.preventDefault();
+        }
+    };
+    const handleKeyUp = (event) => {
+        switch (event.key) {
+            case 'ArrowLeft': {
+                handleSlideChange((slideCount + currentIndex - 1) % slideCount);
+                break;
+            }
+            case 'ArrowRight': {
+                handleSlideChange((slideCount + currentIndex + 1) % slideCount);
+                break;
+            }
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-carousel-navigation-dots', className), role: 'tablist', "aria-label": 'Slides', ref: refs, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, tabIndex: -1, ...rest }, children ?? dots)));
 });