@itwin/itwinui-react 3.16.1 → 5.0.0-alpha.1

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

@@ -1,80 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type CarouselProps = {
-    /**
-     * Index of the currently shown slide.
-     * Can be used to set the default index or control the active slide programmatically.
-     * @default 0
-     */
-    activeSlideIndex?: number;
-    /**
-     * Callback fired when the current slide changes.
-     */
-    onSlideChange?: (index: number) => void;
-};
-/**
- * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
- * shown below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides; this navigation
- * section must be present _before_ the slides in DOM order, even though it is visually shown below the slides.
- *
- * The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device.
- *
- * This component uses a composition approach so it should be used with the provided subcomponents.
- *
- * @example
- * <Carousel>
- *   <Carousel.Navigation />
- *   <Carousel.Slider>
- *     <Carousel.Slide>...</Carousel.Slide>
- *     <Carousel.Slide>...</Carousel.Slide>
- *     <Carousel.Slide>...</Carousel.Slide>
- *   </Carousel.Slider>
- * </Carousel>
- */
-export declare const Carousel: PolymorphicForwardRefComponent<"section", CarouselProps> & {
-    Slider: PolymorphicForwardRefComponent<"div", {}>;
-    Slide: PolymorphicForwardRefComponent<"div", {
-        index?: number;
-    }>;
-    /**
-     * Contains the dots and previous/next buttons for navigating the slides. Must be present _before_ the slides in DOM.
-     */
-    Navigation: 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" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
-            isActive?: boolean;
-            label?: React.ReactNode;
-            labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
-            iconProps?: React.ComponentProps<"span">;
-            title?: string;
-        } & 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" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
-            isActive?: boolean;
-            label?: React.ReactNode;
-            labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
-            iconProps?: React.ComponentProps<"span">;
-            title?: string;
-        } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
-            as?: "button" | undefined;
-        }>;
-    };
-    /**
-     * Contains the dots for activating the slides. Must be present _before_ the slides in DOM.
-     */
-    DotsList: PolymorphicForwardRefComponent<"div", {
-        length?: number;
-        currentIndex?: number;
-        onSlideChange?: (index: number) => void;
-    }>;
-    Dot: PolymorphicForwardRefComponent<"button", {
-        isActive?: boolean;
-        isSmall?: boolean;
-        isSmaller?: boolean;
-    }>;
-};
-export {};

package/esm/core/Carousel/Carousel.js

@@ -1,71 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { useMergedRefs, Box, useLatestRef, useId } from '../../utils/index.js';
-import { CarouselContext } from './CarouselContext.js';
-import { CarouselSlider } from './CarouselSlider.js';
-import { CarouselSlide } from './CarouselSlide.js';
-import { CarouselDotsList } from './CarouselDotsList.js';
-import { CarouselDot } from './CarouselDot.js';
-import { CarouselNavigation } from './CarouselNavigation.js';
-let CarouselComponent = React.forwardRef((props, ref) => {
-  let idPrefix = useId();
-  let {
-    activeSlideIndex: userActiveIndex = 0,
-    onSlideChange,
-    className,
-    children,
-    id = idPrefix,
-    ...rest
-  } = props;
-  let isManuallyUpdating = React.useRef(false);
-  let carouselRef = React.useRef(null);
-  let refs = useMergedRefs(carouselRef, ref);
-  let [currentIndex, setCurrentIndex] = React.useState(userActiveIndex);
-  let scrollToSlide = React.useRef(() => {});
-  let justMounted = React.useRef(true);
-  React.useEffect(() => {
-    setCurrentIndex(userActiveIndex);
-    scrollToSlide.current(userActiveIndex, {
-      instant: justMounted.current,
-    });
-    justMounted.current = false;
-  }, [userActiveIndex]);
-  let [slideCount, setSlideCount] = React.useState(0);
-  let userOnSlideChange = useLatestRef(onSlideChange);
-  React.useEffect(() => {
-    userOnSlideChange.current?.(currentIndex);
-  }, [userOnSlideChange, currentIndex]);
-  return React.createElement(
-    Box,
-    {
-      as: 'section',
-      'aria-roledescription': 'carousel',
-      ref: refs,
-      className: cx('iui-carousel', className),
-      ...rest,
-      id: id,
-    },
-    React.createElement(
-      CarouselContext.Provider,
-      {
-        value: {
-          currentIndex,
-          setCurrentIndex,
-          slideCount,
-          setSlideCount,
-          idPrefix: id,
-          isManuallyUpdating,
-          scrollToSlide,
-        },
-      },
-      children,
-    ),
-  );
-});
-export const Carousel = Object.assign(CarouselComponent, {
-  Slider: CarouselSlider,
-  Slide: CarouselSlide,
-  Navigation: CarouselNavigation,
-  DotsList: CarouselDotsList,
-  Dot: CarouselDot,
-});

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

@@ -1,35 +0,0 @@
-import * as React from 'react';
-export declare const CarouselContext: React.Context<{
-    /**
-     * Stateful index of currently active slide.
-     */
-    currentIndex: number;
-    /**
-     * State updater for currentIndex.
-     */
-    setCurrentIndex: (index: number | ((old: number) => void)) => void;
-    /**
-     * Number of slides in the carousel. Gets set in `CarouselSlider` for reading in `CarouselDotsList`.
-     */
-    slideCount: number;
-    /**
-     * State updater for slideCount.
-     */
-    setSlideCount: (length: number | ((old: number) => void)) => void;
-    /**
-     * Prefix used for setting id for internal carousel components.
-     */
-    idPrefix: string;
-    /**
-     * Ref object used for preventing intersection observer callback from interfering with manual slide updates.
-     *
-     * Should be set to true when updating slides using any manual actions (e.g. clicking buttons), and should be set to false when the slide update completes.
-     */
-    isManuallyUpdating: React.MutableRefObject<boolean>;
-    /**
-     * Function that scrolls to the current slide. Should be called on all managed events (clicks and keydowns).
-     */
-    scrollToSlide: React.MutableRefObject<(slideIndex: number, options?: {
-        instant?: boolean;
-    }) => void>;
-} | undefined>;

package/esm/core/Carousel/CarouselContext.js

@@ -1,2 +0,0 @@
-import * as React from 'react';
-export const CarouselContext = React.createContext(void 0);

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

@@ -1,15 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-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.  */
-    isSmall?: boolean;
-    /** Should be set to true for dots that are at the edge of truncation. The dot size becomes even smaller.  */
-    isSmaller?: boolean;
-};
-/**
- * `CarouselDot` is the actual "dot" component used to activate a slide on clicking.
- * It should be used as a child of `CarouselDotsList`.
- */
-export declare const CarouselDot: PolymorphicForwardRefComponent<"button", CarouselDotProps>;
-export {};

package/esm/core/Carousel/CarouselDot.js

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { ButtonBase } from '../../utils/index.js';
-export const CarouselDot = React.forwardRef((props, ref) => {
-  let { isActive, isSmaller, isSmall, className, ...rest } = props;
-  return React.createElement(ButtonBase, {
-    role: 'tab',
-    tabIndex: isActive ? 0 : -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,33 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-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. */
-    currentIndex?: number;
-    /** Callback fired when any of the dots are clicked. */
-    onSlideChange?: (index: number) => void;
-};
-/**
- * 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 declare const CarouselDotsList: PolymorphicForwardRefComponent<"div", CarouselDotsListProps>;
-export {};

package/esm/core/Carousel/CarouselDotsList.js

@@ -1,150 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { CarouselContext } from './CarouselContext.js';
-import {
-  getBoundedValue,
-  useMediaQuery,
-  useMergedRefs,
-  useResizeObserver,
-  Box,
-} from '../../utils/index.js';
-import { CarouselDot } from './CarouselDot.js';
-export const CarouselDotsList = React.forwardRef((props, ref) => {
-  let {
-    currentIndex: userCurrentIndex,
-    length,
-    className,
-    onSlideChange,
-    children,
-    ...rest
-  } = props;
-  let context = React.useContext(CarouselContext);
-  let slideCount =
-    length ?? context?.slideCount ?? React.Children.count(children);
-  let currentIndex = userCurrentIndex ?? context?.currentIndex ?? 0;
-  let idPrefix = props.id ?? context?.idPrefix;
-  let handleSlideChange = React.useCallback(
-    (index) => {
-      if (context) {
-        context.setCurrentIndex(index);
-        context.scrollToSlide.current(index);
-      }
-      listRef.current?.children[index]?.focus();
-      onSlideChange?.(index);
-    },
-    [context, onSlideChange],
-  );
-  let justMounted = React.useRef(true);
-  let [visibleCount, setVisibleCount] = React.useState(slideCount);
-  let listRef = React.useRef(null);
-  let [width, setWidth] = React.useState();
-  let [resizeRef, resizeObserver] = useResizeObserver(({ width }) => {
-    if (!listRef.current) return;
-    setWidth(width);
-    let dotWidth = listRef.current.children[0].offsetWidth;
-    setVisibleCount(Math.floor(width / dotWidth));
-  });
-  React.useEffect(() => resizeObserver?.disconnect(), [resizeObserver]);
-  let refs = useMergedRefs(ref, resizeRef, listRef);
-  let firstVisibleDotIndex = React.useMemo(
-    () =>
-      getBoundedValue(
-        currentIndex - Math.ceil(visibleCount / 2) + 1,
-        0,
-        slideCount - visibleCount,
-      ),
-    [currentIndex, slideCount, visibleCount],
-  );
-  let lastVisibleDotIndex = React.useMemo(
-    () =>
-      getBoundedValue(
-        currentIndex + Math.floor(visibleCount / 2),
-        visibleCount - 1,
-        slideCount - 1,
-      ),
-    [currentIndex, slideCount, visibleCount],
-  );
-  let dots = React.useMemo(
-    () =>
-      Array(slideCount)
-        .fill(null)
-        .map((_, index) => {
-          let isFirstSmallDot =
-            (index === firstVisibleDotIndex && 0 !== index) ||
-            (index === lastVisibleDotIndex && index !== slideCount - 1);
-          let isSecondSmallDot =
-            (index === firstVisibleDotIndex + 1 && 1 !== index) ||
-            (index === lastVisibleDotIndex - 1 && index !== slideCount - 2);
-          let 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,
-    ],
-  );
-  let motionOk = useMediaQuery('(prefers-reduced-motion: no-preference)');
-  React.useEffect(() => {
-    let firstDot = listRef.current?.children[firstVisibleDotIndex];
-    if (!listRef.current || !firstDot) return;
-    listRef.current.scrollTo({
-      left: firstDot.offsetLeft - listRef.current.offsetLeft,
-      behavior: motionOk && !justMounted.current ? 'smooth' : 'auto',
-    });
-    if (justMounted.current) justMounted.current = false;
-  }, [
-    currentIndex,
-    firstVisibleDotIndex,
-    motionOk,
-    slideCount,
-    visibleCount,
-    width,
-  ]);
-  let handleKeyDown = (event) => {
-    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
-      return;
-    let key = event.key;
-    if ('ArrowLeft' === key || 'ArrowRight' === key) event.preventDefault();
-  };
-  let 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

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-/**
- * 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 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" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
-        isActive?: boolean;
-        label?: React.ReactNode;
-        labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
-        iconProps?: React.ComponentProps<"span">;
-        title?: string;
-    } & 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" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
-        isActive?: boolean;
-        label?: React.ReactNode;
-        labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
-        iconProps?: React.ComponentProps<"span">;
-        title?: string;
-    } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
-        as?: "button" | undefined;
-    }>;
-};

package/esm/core/Carousel/CarouselNavigation.js

@@ -1,93 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { CarouselContext } from './CarouselContext.js';
-import { IconButton } from '../Buttons/IconButton.js';
-import { CarouselDotsList } from './CarouselDotsList.js';
-import { Box, SvgChevronLeft, SvgChevronRight } from '../../utils/index.js';
-let CarouselNavigationComponent = React.forwardRef((props, ref) => {
-  let { 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),
-        ),
-      ),
-  );
-});
-let PreviousButton = React.forwardRef((props, ref) => {
-  let context = React.useContext(CarouselContext);
-  if (!context)
-    throw new Error('CarouselNavigation should be used inside Carousel');
-  let { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
-  return React.createElement(
-    IconButton,
-    {
-      styleType: 'borderless',
-      size: 'small',
-      tabIndex: -1,
-      'aria-label': 'Previous',
-      ref: ref,
-      ...props,
-      onClick: (e) => {
-        let prevIndex = (slideCount + currentIndex - 1) % slideCount;
-        setCurrentIndex(prevIndex);
-        scrollToSlide.current(prevIndex, {
-          instant: e.detail > 3,
-        });
-        props?.onClick?.(e);
-      },
-    },
-    React.createElement(SvgChevronLeft, null),
-  );
-});
-let NextButton = React.forwardRef((props, ref) => {
-  let context = React.useContext(CarouselContext);
-  if (!context)
-    throw new Error('CarouselNavigation should be used inside Carousel');
-  let { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
-  return React.createElement(
-    IconButton,
-    {
-      styleType: 'borderless',
-      size: 'small',
-      tabIndex: -1,
-      'aria-label': 'Next',
-      ref: ref,
-      ...props,
-      onClick: (e) => {
-        let nextIndex = (slideCount + currentIndex + 1) % slideCount;
-        setCurrentIndex(nextIndex);
-        scrollToSlide.current(nextIndex, {
-          instant: e.detail > 3,
-        });
-        props?.onClick?.(e);
-      },
-    },
-    React.createElement(SvgChevronRight, null),
-  );
-});
-export const CarouselNavigation = Object.assign(CarouselNavigationComponent, {
-  PreviousButton,
-  NextButton,
-});

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

@@ -1,16 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type CarouselSlideProps = {
-    /**
-     * Index of the current slide.
-     * Does not need to be manually specified because it will be set in parent (`CarouselSlider`).
-     */
-    index?: number;
-};
-/**
- * `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 declare const CarouselSlide: PolymorphicForwardRefComponent<"div", CarouselSlideProps>;
-export {};

package/esm/core/Carousel/CarouselSlide.js

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import {
-  Box,
-  mergeEventHandlers,
-  useIntersection,
-  useMergedRefs,
-} from '../../utils/index.js';
-import { CarouselContext } from './CarouselContext.js';
-export const CarouselSlide = React.forwardRef((props, ref) => {
-  let { index, className, children, ...rest } = props;
-  let context = React.useContext(CarouselContext);
-  if (!context || null == index)
-    throw new Error('CarouselSlide must be used within Carousel');
-  let { isManuallyUpdating, currentIndex, setCurrentIndex } = context;
-  let updateActiveIndexOnScroll = React.useCallback(() => {
-    if (!isManuallyUpdating.current) setCurrentIndex(index);
-  }, [index, isManuallyUpdating, setCurrentIndex]);
-  let intersectionRef = useIntersection(
-    updateActiveIndexOnScroll,
-    {
-      threshold: 0.5,
-    },
-    false,
-  );
-  let refs = useMergedRefs(intersectionRef, ref);
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-carousel-slider-item', className),
-      role: 'tabpanel',
-      'aria-roledescription': 'slide',
-      tabIndex: index === currentIndex ? 0 : void 0,
-      ref: refs,
-      inert: index !== currentIndex ? '' : void 0,
-      ...rest,
-      onKeyDown: mergeEventHandlers(props.onKeyDown, (event) => {
-        if ('ArrowLeft' === event.key || 'ArrowRight' === event.key)
-          event.preventDefault();
-      }),
-    },
-    children,
-  );
-});

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

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

package/esm/core/Carousel/CarouselSlider.js

@@ -1,62 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { CarouselContext } from './CarouselContext.js';
-import {
-  getWindow,
-  useMergedRefs,
-  useLayoutEffect,
-  Box,
-  useMediaQuery,
-} from '../../utils/index.js';
-export const CarouselSlider = React.forwardRef((props, ref) => {
-  let { children, className, ...rest } = props;
-  let context = React.useContext(CarouselContext);
-  if (!context) throw new Error('CarouselSlider must be used within Carousel');
-  let { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating } = context;
-  let items = React.useMemo(
-    () =>
-      React.Children.map(children, (child, index) =>
-        React.isValidElement(child)
-          ? React.cloneElement(child, {
-              id: `${idPrefix}--slide-${index}`,
-              'aria-labelledby': `${idPrefix}--dot-${index}`,
-              index,
-            })
-          : child,
-      ) ?? [],
-    [children, idPrefix],
-  );
-  useLayoutEffect(() => {
-    setSlideCount(items.length);
-  }, [items.length, setSlideCount]);
-  let sliderRef = React.useRef(null);
-  let refs = useMergedRefs(sliderRef, ref);
-  let motionOk = useMediaQuery('(prefers-reduced-motion: no-preference)');
-  scrollToSlide.current = (slideIndex, { instant } = {}) => {
-    isManuallyUpdating.current = true;
-    let slideToShow = sliderRef.current?.children.item(slideIndex);
-    if (!sliderRef.current || !slideToShow) return;
-    sliderRef.current.scrollTo({
-      left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
-      behavior: instant || !motionOk ? 'instant' : 'smooth',
-    });
-  };
-  let scrollTimeout = React.useRef();
-  let handleOnScroll = React.useCallback(() => {
-    if (scrollTimeout.current) getWindow()?.clearTimeout(scrollTimeout.current);
-    scrollTimeout.current = getWindow()?.setTimeout(() => {
-      isManuallyUpdating.current = false;
-    }, 100);
-  }, [isManuallyUpdating]);
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-carousel-slider', className),
-      ref: refs,
-      onScroll: handleOnScroll,
-      tabIndex: -1,
-      ...rest,
-    },
-    items,
-  );
-});