@itwin/itwinui-react 3.0.0-dev.3 → 3.0.0-dev.5

package/esm/core/Carousel/Carousel.js

@@ -12,71 +12,98 @@ import { CarouselDotsList } from './CarouselDotsList.js';
 import { CarouselDot } from './CarouselDot.js';
 import { CarouselNavigation } from './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-${getRandomValue(10)}`);
-    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(() => {
-        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 = React.useRef(onSlideChange);
-    React.useEffect(() => {
-        userOnSlideChange.current?.(currentIndex);
-    }, [currentIndex]);
-    return (React.createElement(Box, { as: '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,
-                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-${getRandomValue(10)}`,
+  );
+  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(() => {
+    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 = React.useRef(onSlideChange);
+  React.useEffect(() => {
+    userOnSlideChange.current?.(currentIndex);
+  }, [currentIndex]);
+  return React.createElement(
+    Box,
+    {
+      as: '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,
+          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
@@ -97,10 +124,10 @@ const CarouselComponent = React.forwardRef((props, ref) => {
  * </Carousel>
  */
 export const Carousel = Object.assign(CarouselComponent, {
-    Slider: CarouselSlider,
-    Slide: CarouselSlide,
-    Navigation: CarouselNavigation,
-    DotsList: CarouselDotsList,
-    Dot: CarouselDot,
+  Slider: CarouselSlider,
+  Slide: CarouselSlide,
+  Navigation: CarouselNavigation,
+  DotsList: CarouselDotsList,
+  Dot: CarouselDot,
 });
 export default Carousel;

package/esm/core/Carousel/CarouselDot.d.ts

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type CarouselDotProps = {
+type CarouselDotProps = {
     /** Is this dot currently active? */
     isActive?: boolean;
     /** Should be set to true for dots that are one spot from the edge of truncation. The dot size becomes small.  */

package/esm/core/Carousel/CarouselDot.js

@@ -10,10 +10,23 @@ import { Box } from '../utils/index.js';
  * It should be used as a child of `CarouselDotsList`.
  */
 export const CarouselDot = React.forwardRef((props, ref) => {
-    const { isActive, isSmaller, isSmall, className, ...rest } = props;
-    return (React.createElement(Box, { as: '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 }));
+  const { isActive, isSmaller, isSmall, className, ...rest } = props;
+  return React.createElement(Box, {
+    as: '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,
+  });
 });

package/esm/core/Carousel/CarouselDotsList.d.ts

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type CarouselDotsListProps = {
+type CarouselDotsListProps = {
     /** Number of total dots/slides in the carousel. Will be inferred from Carousel context or children. Otherwise, it is required to be passed. */
     length?: number;
     /** Index of currently active dot. Will be inferred from Carousel context, or else default to 0. */

package/esm/core/Carousel/CarouselDotsList.js

@@ -5,7 +5,13 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
-import { getBoundedValue, getWindow, useMergedRefs, useResizeObserver, Box, } from '../utils/index.js';
+import {
+  getBoundedValue,
+  getWindow,
+  useMergedRefs,
+  useResizeObserver,
+  Box,
+} from '../utils/index.js';
 import { CarouselDot } from './CarouselDot.js';
 /**
  * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to
@@ -30,67 +36,121 @@ import { CarouselDot } from './CarouselDot.js';
  * />
  */
 export const CarouselDotsList = React.forwardRef((props, ref) => {
-    const { currentIndex: userCurrentIndex, length, className, onSlideChange, children, ...rest } = props;
-    const context = React.useContext(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);
-        }
-        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] = 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 = 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((_, 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, { 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,
-        firstVisibleDotIndex,
-        lastVisibleDotIndex,
-        currentIndex,
-        idPrefix,
-        handleSlideChange,
-    ]);
-    React.useEffect(() => {
-        const firstDot = listRef.current?.children[firstVisibleDotIndex];
-        if (!listRef.current || !firstDot) {
-            return;
-        }
-        const motionOk = 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);
+  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);
+      }
+      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] = 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 = 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((_, 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, {
+          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}`,
         });
-        if (justMounted.current) {
-            justMounted.current = false;
-        }
-    }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Box, { className: cx('iui-carousel-navigation-dots', className), role: 'tablist', "aria-label": 'Slides', ref: refs, ...rest }, children ?? dots)));
+      });
+  }, [
+    slideCount,
+    firstVisibleDotIndex,
+    lastVisibleDotIndex,
+    currentIndex,
+    idPrefix,
+    handleSlideChange,
+  ]);
+  React.useEffect(() => {
+    const firstDot = listRef.current?.children[firstVisibleDotIndex];
+    if (!listRef.current || !firstDot) {
+      return;
+    }
+    const motionOk = 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]);
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      Box,
+      {
+        className: cx('iui-carousel-navigation-dots', className),
+        role: 'tablist',
+        'aria-label': 'Slides',
+        ref: refs,
+        ...rest,
+      },
+      children ?? dots,
+    ),
+  );
 });

package/esm/core/Carousel/CarouselNavigation.d.ts

@@ -7,7 +7,7 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
  * `children` can be specified to override what is shown in this navigation section.
  */
 export declare const CarouselNavigation: 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" | "styleType" | "isActive"> & {
         isActive?: boolean | undefined;
@@ -15,7 +15,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"nav", {
     } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
         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" | "styleType" | "isActive"> & {
         isActive?: boolean | undefined;

package/esm/core/Carousel/CarouselNavigation.js

@@ -9,43 +9,96 @@ import { IconButton } from '../Buttons/index.js';
 import { CarouselDotsList } from './CarouselDotsList.js';
 import { Box, SvgChevronLeft, SvgChevronRight } from '../utils/index.js';
 const CarouselNavigationComponent = React.forwardRef((props, ref) => {
-    const { className, children, ...rest } = props;
-    return (React.createElement(Box, { as: 'nav', className: cx('iui-carousel-navigation', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,
-        React.createElement(Box, { className: 'iui-carousel-navigation-left' },
-            React.createElement(PreviousButton, null)),
+  const { className, children, ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      as: 'nav',
+      className: cx('iui-carousel-navigation', className),
+      ref: ref,
+      ...rest,
+    },
+    children ??
+      React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(
+          Box,
+          { className: 'iui-carousel-navigation-left' },
+          React.createElement(PreviousButton, null),
+        ),
         React.createElement(CarouselDotsList, null),
-        React.createElement(Box, { className: 'iui-carousel-navigation-right' },
-            React.createElement(NextButton, null))))));
+        React.createElement(
+          Box,
+          { className: 'iui-carousel-navigation-right' },
+          React.createElement(NextButton, null),
+        ),
+      ),
+  );
 });
 /** Button for switching to previous slide */
 const PreviousButton = React.forwardRef((props, ref) => {
-    const context = React.useContext(CarouselContext);
-    if (!context) {
-        throw new Error('CarouselNavigation should be used inside Carousel');
-    }
-    const { slideCount, currentIndex, setCurrentIndex, keysPressed, scrollToSlide, } = context;
-    return (React.createElement(IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowLeft'] || undefined, ref: ref, ...props, onClick: (e) => {
-            const prevIndex = (slideCount + currentIndex - 1) % slideCount;
-            setCurrentIndex(prevIndex);
-            scrollToSlide.current(prevIndex, { instant: e.detail > 3 });
-            props?.onClick?.(e);
-        } },
-        React.createElement(SvgChevronLeft, null)));
+  const context = React.useContext(CarouselContext);
+  if (!context) {
+    throw new Error('CarouselNavigation should be used inside Carousel');
+  }
+  const {
+    slideCount,
+    currentIndex,
+    setCurrentIndex,
+    keysPressed,
+    scrollToSlide,
+  } = context;
+  return React.createElement(
+    IconButton,
+    {
+      styleType: 'borderless',
+      size: 'small',
+      tabIndex: -1,
+      'data-pressed': keysPressed['ArrowLeft'] || undefined,
+      ref: ref,
+      ...props,
+      onClick: (e) => {
+        const prevIndex = (slideCount + currentIndex - 1) % slideCount;
+        setCurrentIndex(prevIndex);
+        scrollToSlide.current(prevIndex, { instant: e.detail > 3 });
+        props?.onClick?.(e);
+      },
+    },
+    React.createElement(SvgChevronLeft, null),
+  );
 });
 /** Button for switching to next slide */
 const NextButton = React.forwardRef((props, ref) => {
-    const context = React.useContext(CarouselContext);
-    if (!context) {
-        throw new Error('CarouselNavigation should be used inside Carousel');
-    }
-    const { slideCount, currentIndex, setCurrentIndex, keysPressed, scrollToSlide, } = context;
-    return (React.createElement(IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowRight'] || undefined, ref: ref, ...props, onClick: (e) => {
-            const nextIndex = (slideCount + currentIndex + 1) % slideCount;
-            setCurrentIndex(nextIndex);
-            scrollToSlide.current(nextIndex, { instant: e.detail > 3 });
-            props?.onClick?.(e);
-        } },
-        React.createElement(SvgChevronRight, null)));
+  const context = React.useContext(CarouselContext);
+  if (!context) {
+    throw new Error('CarouselNavigation should be used inside Carousel');
+  }
+  const {
+    slideCount,
+    currentIndex,
+    setCurrentIndex,
+    keysPressed,
+    scrollToSlide,
+  } = context;
+  return React.createElement(
+    IconButton,
+    {
+      styleType: 'borderless',
+      size: 'small',
+      tabIndex: -1,
+      'data-pressed': keysPressed['ArrowRight'] || undefined,
+      ref: ref,
+      ...props,
+      onClick: (e) => {
+        const nextIndex = (slideCount + currentIndex + 1) % slideCount;
+        setCurrentIndex(nextIndex);
+        scrollToSlide.current(nextIndex, { instant: e.detail > 3 });
+        props?.onClick?.(e);
+      },
+    },
+    React.createElement(SvgChevronRight, null),
+  );
 });
 /**
  * The `CarouselNavigation` component by default consists of the `PreviousButton` and `NextButton`
@@ -54,6 +107,6 @@ const NextButton = React.forwardRef((props, ref) => {
  * `children` can be specified to override what is shown in this navigation section.
  */
 export const CarouselNavigation = Object.assign(CarouselNavigationComponent, {
-    PreviousButton,
-    NextButton,
+  PreviousButton,
+  NextButton,
 });

package/esm/core/Carousel/CarouselSlide.d.ts

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type CarouselSlideProps = {
+type CarouselSlideProps = {
     /**
      * Index of the current slide.
      * Does not need to be manually specified because it will be set in parent (`CarouselSlider`).

package/esm/core/Carousel/CarouselSlide.js

@@ -13,19 +13,34 @@ import { CarouselContext } from './CarouselContext.js';
  * the dimensions should be the same for all slides.
  */
 export const CarouselSlide = React.forwardRef((props, ref) => {
-    const { index, className, children, ...rest } = props;
-    const context = React.useContext(CarouselContext);
-    if (!context || index == null) {
-        throw new Error('CarouselSlide must be used within Carousel');
+  const { index, className, children, ...rest } = props;
+  const context = React.useContext(CarouselContext);
+  if (!context || index == null) {
+    throw new Error('CarouselSlide must be used within Carousel');
+  }
+  const { isManuallyUpdating, setCurrentIndex } = context;
+  const updateActiveIndexOnScroll = React.useCallback(() => {
+    // only update index if scroll was triggered by browser
+    if (!isManuallyUpdating.current) {
+      setCurrentIndex(index);
     }
-    const { isManuallyUpdating, setCurrentIndex } = context;
-    const updateActiveIndexOnScroll = React.useCallback(() => {
-        // only update index if scroll was triggered by browser
-        if (!isManuallyUpdating.current) {
-            setCurrentIndex(index);
-        }
-    }, [index, isManuallyUpdating, setCurrentIndex]);
-    const intersectionRef = useIntersection(updateActiveIndexOnScroll, { threshold: 0.5 }, false);
-    const refs = useMergedRefs(intersectionRef, ref);
-    return (React.createElement(Box, { as: 'li', className: cx('iui-carousel-slider-item', className), role: 'tabpanel', "aria-roledescription": 'slide', ref: refs, ...rest }, children));
+  }, [index, isManuallyUpdating, setCurrentIndex]);
+  const intersectionRef = useIntersection(
+    updateActiveIndexOnScroll,
+    { threshold: 0.5 },
+    false,
+  );
+  const refs = useMergedRefs(intersectionRef, ref);
+  return React.createElement(
+    Box,
+    {
+      as: 'li',
+      className: cx('iui-carousel-slider-item', className),
+      role: 'tabpanel',
+      'aria-roledescription': 'slide',
+      ref: refs,
+      ...rest,
+    },
+    children,
+  );
 });