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

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,69 +36,121 @@ import { CarouselDot } from './CarouselDot.js';
  * />
  */
 export const CarouselDotsList = React.forwardRef((props, ref) => {
-    var _a, _b, _c;
-    const { currentIndex: userCurrentIndex, length, className, onSlideChange, children, ...rest } = props;
-    const context = React.useContext(CarouselContext);
-    const slideCount = (_a = length !== null && length !== void 0 ? length : context === null || context === void 0 ? void 0 : context.slideCount) !== null && _a !== void 0 ? _a : React.Children.count(children);
-    const currentIndex = (_b = userCurrentIndex !== null && userCurrentIndex !== void 0 ? userCurrentIndex : context === null || context === void 0 ? void 0 : context.currentIndex) !== null && _b !== void 0 ? _b : 0;
-    const idPrefix = (_c = props.id) !== null && _c !== void 0 ? _c : context === null || context === void 0 ? void 0 : context.idPrefix;
-    const handleSlideChange = React.useCallback((index) => {
-        if (context) {
-            context.setCurrentIndex(index);
-            context.scrollToSlide.current(index);
-        }
-        onSlideChange === null || onSlideChange === void 0 ? void 0 : 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 === null || resizeObserver === void 0 ? void 0 : 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(() => {
-        var _a, _b, _c;
-        const firstDot = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children[firstVisibleDotIndex];
-        if (!listRef.current || !firstDot) {
-            return;
-        }
-        const motionOk = (_c = (_b = getWindow()) === null || _b === void 0 ? void 0 : _b.matchMedia('(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.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 !== null && children !== void 0 ? 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,20 +7,22 @@ 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" | "isActive" | "styleType"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
-    NextButton: PolymorphicForwardRefComponent<"button", Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+    NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "isActive" | "styleType"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
 };

package/esm/core/Carousel/CarouselNavigation.js

@@ -9,45 +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 !== null && children !== void 0 ? 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) => {
-            var _a;
-            const prevIndex = (slideCount + currentIndex - 1) % slideCount;
-            setCurrentIndex(prevIndex);
-            scrollToSlide.current(prevIndex, { instant: e.detail > 3 });
-            (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, 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) => {
-            var _a;
-            const nextIndex = (slideCount + currentIndex + 1) % slideCount;
-            setCurrentIndex(nextIndex);
-            scrollToSlide.current(nextIndex, { instant: e.detail > 3 });
-            (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, 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`
@@ -56,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,
+  );
 });

package/esm/core/Carousel/CarouselSlider.js

@@ -5,54 +5,74 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
-import { getWindow, useMergedRefs, useIsomorphicLayoutEffect, Box, } from '../utils/index.js';
+import {
+  getWindow,
+  useMergedRefs,
+  useIsomorphicLayoutEffect,
+  Box,
+} from '../utils/index.js';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */
 export const CarouselSlider = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    const context = React.useContext(CarouselContext);
-    if (!context) {
-        throw new Error('CarouselSlider must be used within Carousel');
-    }
-    const { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating } = context;
-    const items = React.useMemo(() => {
-        var _a;
-        return (_a = React.Children.map(children, (child, index) => React.isValidElement(child)
-            ? React.cloneElement(child, {
-                id: `${idPrefix}--slide-${index}`,
-                index,
+  const { children, className, ...rest } = props;
+  const context = React.useContext(CarouselContext);
+  if (!context) {
+    throw new Error('CarouselSlider must be used within Carousel');
+  }
+  const { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating } =
+    context;
+  const items = React.useMemo(
+    () =>
+      React.Children.map(children, (child, index) =>
+        React.isValidElement(child)
+          ? React.cloneElement(child, {
+              id: `${idPrefix}--slide-${index}`,
+              index,
             })
-            : child)) !== null && _a !== void 0 ? _a : [];
-    }, [children, idPrefix]);
-    useIsomorphicLayoutEffect(() => {
-        setSlideCount(items.length);
-    }, [items.length, setSlideCount]);
-    const sliderRef = React.useRef(null);
-    const refs = useMergedRefs(sliderRef, ref);
-    scrollToSlide.current = (slideIndex, { instant } = {}) => {
-        var _a, _b, _c;
-        isManuallyUpdating.current = true; // start manual update
-        const slideToShow = (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.children.item(slideIndex);
-        if (!sliderRef.current || !slideToShow) {
-            return;
-        }
-        const motionOk = (_c = (_b = getWindow()) === null || _b === void 0 ? void 0 : _b.matchMedia('(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches;
-        sliderRef.current.scrollTo({
-            left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
-            behavior: (instant || !motionOk ? 'instant' : 'smooth'), // scrollTo accepts 'instant' but ScrollBehavior type is wrong
-        });
-    };
-    const scrollTimeout = React.useRef();
-    // reset isManuallyUpdating.current to false after the last scroll event
-    const handleOnScroll = React.useCallback(() => {
-        var _a, _b;
-        if (scrollTimeout.current) {
-            (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.clearTimeout(scrollTimeout.current);
-        }
-        scrollTimeout.current = (_b = getWindow()) === null || _b === void 0 ? void 0 : _b.setTimeout(() => {
-            isManuallyUpdating.current = false;
-        }, 100);
-    }, [isManuallyUpdating]);
-    return (React.createElement(Box, { as: 'ol', "aria-live": 'polite', className: cx('iui-carousel-slider', className), ref: refs, onScroll: handleOnScroll, ...rest }, items));
+          : child,
+      ) ?? [],
+    [children, idPrefix],
+  );
+  useIsomorphicLayoutEffect(() => {
+    setSlideCount(items.length);
+  }, [items.length, setSlideCount]);
+  const sliderRef = React.useRef(null);
+  const refs = useMergedRefs(sliderRef, ref);
+  scrollToSlide.current = (slideIndex, { instant } = {}) => {
+    isManuallyUpdating.current = true; // start manual update
+    const slideToShow = sliderRef.current?.children.item(slideIndex);
+    if (!sliderRef.current || !slideToShow) {
+      return;
+    }
+    const motionOk = getWindow()?.matchMedia(
+      '(prefers-reduced-motion: no-preference)',
+    )?.matches;
+    sliderRef.current.scrollTo({
+      left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
+      behavior: instant || !motionOk ? 'instant' : 'smooth', // scrollTo accepts 'instant' but ScrollBehavior type is wrong
+    });
+  };
+  const scrollTimeout = React.useRef();
+  // reset isManuallyUpdating.current to false after the last scroll event
+  const handleOnScroll = React.useCallback(() => {
+    if (scrollTimeout.current) {
+      getWindow()?.clearTimeout(scrollTimeout.current);
+    }
+    scrollTimeout.current = getWindow()?.setTimeout(() => {
+      isManuallyUpdating.current = false;
+    }, 100);
+  }, [isManuallyUpdating]);
+  return React.createElement(
+    Box,
+    {
+      as: 'ol',
+      'aria-live': 'polite',
+      className: cx('iui-carousel-slider', className),
+      ref: refs,
+      onScroll: handleOnScroll,
+      ...rest,
+    },
+    items,
+  );
 });

package/esm/core/Checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type CheckboxProps = {
+type CheckboxProps = {
     /**
      * Text that will be shown next to the checkbox.
      */
@@ -19,15 +19,19 @@ declare type CheckboxProps = {
      * @default 'default'
      */
     variant?: 'default' | 'eyeball';
-    /**
-     * Set focus on checkbox.
-     */
-    setFocus?: boolean;
     /**
      * Display a loading state.
      * @default false
      */
     isLoading?: boolean;
+    /**
+     * Passes properties for checkbox wrapper.
+     */
+    wrapperProps?: React.ComponentProps<'label'>;
+    /**
+     * Passes properties for checkbox label.
+     */
+    labelProps?: React.ComponentProps<'span'>;
 };
 /**
  * Simple input checkbox