@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/Carousel/CarouselDotsList.js

@@ -1,118 +1,154 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 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
- * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need
- * any props or `children`.
- *
- * The props can be specified if this component is being used outside `Carousel`. `children` can be specified
- * to override the individual dots that are shown.
- *
- * @example
- * <Carousel>
- *   // ...
- *   <Carousel.DotsList />
- * </Carousel>
- *
- * @example
- * <Carousel.DotsList
- *   length={10}
- *   maxCount={3}
- *   currentIndex={current}
- *   onSlideChange={(i) => setCurrent(i)}
- * />
- */
 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);
-        }
-        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] = 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 + 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 = 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);
+      }
+      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] = 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 + 1}`,
+          isActive: index === currentIndex,
+          onClick: () => handleSlideChange(index),
+          isSmall: isSecondSmallDot,
+          isSmaller: isFirstSmallDot || isClipped,
+          id: idPrefix && `${idPrefix}--dot-${index}`,
         });
-        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(Box, { className: cx('iui-carousel-navigation-dots', className), role: 'tablist', "aria-label": 'Slides', ref: refs, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, tabIndex: -1, ...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]);
+  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(
+      Box,
+      {
+        className: cx('iui-carousel-navigation-dots', className),
+        role: 'tablist',
+        'aria-label': 'Slides',
+        ref: refs,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        tabIndex: -1,
+        ...rest,
+      },
+      children ?? dots,
+    ),
+  );
 });

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

@@ -10,126 +10,20 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
     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" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
-        isActive?: boolean | undefined;
+        isActive?: boolean;
         label?: React.ReactNode;
-        labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-        }, "as" | "children" | "content" | "portal" | keyof {
-            placement?: import("@floating-ui/utils").Placement | undefined;
-            visible?: boolean | undefined;
-            onVisibleChange?: ((visible: boolean) => void) | undefined;
-            autoUpdateOptions?: {
-                ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined;
-                elementResize?: boolean | undefined;
-                animationFrame?: boolean | undefined;
-                layoutShift?: boolean | undefined;
-            } | undefined;
-            middleware?: {
-                offset?: number | undefined;
-                flip?: boolean | undefined;
-                shift?: boolean | undefined;
-                size?: boolean | undefined;
-                autoPlacement?: boolean | undefined;
-                hide?: boolean | undefined;
-                inline?: boolean | undefined;
-            } | undefined;
-            reference?: HTMLElement | null | undefined;
-            ariaStrategy?: "label" | "description" | "none" | undefined;
-            id?: string | undefined;
-        }> & {
-            content: React.ReactNode;
-            children?: React.ReactNode;
-        } & import("../../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/utils").Placement | undefined;
-            visible?: boolean | undefined;
-            onVisibleChange?: ((visible: boolean) => void) | undefined;
-            autoUpdateOptions?: {
-                ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined;
-                elementResize?: boolean | undefined;
-                animationFrame?: boolean | undefined;
-                layoutShift?: boolean | undefined;
-            } | undefined;
-            middleware?: {
-                offset?: number | undefined;
-                flip?: boolean | undefined;
-                shift?: boolean | undefined;
-                size?: boolean | undefined;
-                autoPlacement?: boolean | undefined;
-                hide?: boolean | undefined;
-                inline?: boolean | undefined;
-            } | undefined;
-            reference?: HTMLElement | null | undefined;
-            ariaStrategy?: "label" | "description" | "none" | undefined;
-            id?: string | undefined;
-        } & {
-            as?: "div" | undefined;
-        }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
-        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+        labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
+        iconProps?: React.ComponentProps<"span">;
     } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
     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" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
-        isActive?: boolean | undefined;
+        isActive?: boolean;
         label?: React.ReactNode;
-        labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-        }, "as" | "children" | "content" | "portal" | keyof {
-            placement?: import("@floating-ui/utils").Placement | undefined;
-            visible?: boolean | undefined;
-            onVisibleChange?: ((visible: boolean) => void) | undefined;
-            autoUpdateOptions?: {
-                ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined;
-                elementResize?: boolean | undefined;
-                animationFrame?: boolean | undefined;
-                layoutShift?: boolean | undefined;
-            } | undefined;
-            middleware?: {
-                offset?: number | undefined;
-                flip?: boolean | undefined;
-                shift?: boolean | undefined;
-                size?: boolean | undefined;
-                autoPlacement?: boolean | undefined;
-                hide?: boolean | undefined;
-                inline?: boolean | undefined;
-            } | undefined;
-            reference?: HTMLElement | null | undefined;
-            ariaStrategy?: "label" | "description" | "none" | undefined;
-            id?: string | undefined;
-        }> & {
-            content: React.ReactNode;
-            children?: React.ReactNode;
-        } & import("../../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/utils").Placement | undefined;
-            visible?: boolean | undefined;
-            onVisibleChange?: ((visible: boolean) => void) | undefined;
-            autoUpdateOptions?: {
-                ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined;
-                elementResize?: boolean | undefined;
-                animationFrame?: boolean | undefined;
-                layoutShift?: boolean | undefined;
-            } | undefined;
-            middleware?: {
-                offset?: number | undefined;
-                flip?: boolean | undefined;
-                shift?: boolean | undefined;
-                size?: boolean | undefined;
-                autoPlacement?: boolean | undefined;
-                hide?: boolean | undefined;
-                inline?: boolean | undefined;
-            } | undefined;
-            reference?: HTMLElement | null | undefined;
-            ariaStrategy?: "label" | "description" | "none" | undefined;
-            id?: string | undefined;
-        } & {
-            as?: "div" | undefined;
-        }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
-        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+        labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
+        iconProps?: React.ComponentProps<"span">;
     } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;

package/esm/core/Carousel/CarouselNavigation.js

@@ -1,7 +1,3 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
@@ -9,51 +5,91 @@ import { IconButton } from '../Buttons/IconButton.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, { 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,
+    {
+      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, scrollToSlide } = context;
-    return (React.createElement(IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "aria-label": 'Previous', 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, scrollToSlide } = context;
+  return React.createElement(
+    IconButton,
+    {
+      styleType: 'borderless',
+      size: 'small',
+      tabIndex: -1,
+      'aria-label': 'Previous',
+      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, scrollToSlide } = context;
-    return (React.createElement(IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "aria-label": 'Next', 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, scrollToSlide } = context;
+  return React.createElement(
+    IconButton,
+    {
+      styleType: 'borderless',
+      size: 'small',
+      tabIndex: -1,
+      'aria-label': 'Next',
+      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`
- * shown on the left and right, and the `CarouselDotsList` component shown in the middle.
- *
- * `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.js

@@ -1,36 +1,48 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box, mergeEventHandlers, useIntersection, useMergedRefs, } from '../../utils/index.js';
+import {
+  Box,
+  mergeEventHandlers,
+  useIntersection,
+  useMergedRefs,
+} from '../../utils/index.js';
 import { CarouselContext } from './CarouselContext.js';
-/**
- * `CarouselSlide` is used for the actual slide content. The content can be specified through `children`.
- *
- * It is recommended that the slide content bring its own dimensions (esp. height) and that
- * 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, currentIndex, setCurrentIndex } = context;
+  const updateActiveIndexOnScroll = React.useCallback(() => {
+    if (!isManuallyUpdating.current) {
+      setCurrentIndex(index);
     }
-    const { isManuallyUpdating, currentIndex, 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,
+    {
+      className: cx('iui-carousel-slider-item', className),
+      role: 'tabpanel',
+      'aria-roledescription': 'slide',
+      tabIndex: index === currentIndex ? 0 : undefined,
+      ref: refs,
+      inert: index !== currentIndex ? '' : undefined,
+      ...rest,
+      onKeyDown: mergeEventHandlers(props.onKeyDown, (event) => {
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+          event.preventDefault();
         }
-    }, [index, isManuallyUpdating, setCurrentIndex]);
-    const intersectionRef = useIntersection(updateActiveIndexOnScroll, { threshold: 0.5 }, false);
-    const refs = useMergedRefs(intersectionRef, ref);
-    return (React.createElement(Box, { className: cx('iui-carousel-slider-item', className), role: 'tabpanel', "aria-roledescription": 'slide', tabIndex: index === currentIndex ? 0 : undefined, ref: refs, inert: index !== currentIndex ? '' : undefined, ...rest, onKeyDown: mergeEventHandlers(props.onKeyDown, (event) => {
-            // prevent default browser scrolling on arrow keys because focus will get lost when slide switches
-            if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-                event.preventDefault();
-            }
-        }) }, children));
+      }),
+    },
+    children,
+  );
 });

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

@@ -2,4 +2,4 @@ import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */
-export declare const CarouselSlider: PolymorphicForwardRefComponent<"div", {}>;
+export declare const CarouselSlider: PolymorphicForwardRefComponent<"div">;