@itwin/itwinui-react 3.13.4 → 3.14.0

package/DEV-esm/core/Carousel/CarouselDotsList.js

@@ -1,110 +1,146 @@
 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';
-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));
+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,
+    ],
+  );
+  React.useEffect(() => {
+    let firstDot = listRef.current?.children[firstVisibleDotIndex];
+    if (!listRef.current || !firstDot) return;
+    let motionOk = getWindow()?.matchMedia(
+      '(prefers-reduced-motion: no-preference)',
+    )?.matches;
+    listRef.current.scrollTo({
+      left: firstDot.offsetLeft - listRef.current.offsetLeft,
+      behavior: motionOk && !justMounted.current ? 'smooth' : 'auto',
     });
-    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
-    ]);
-    React.useEffect(()=>{
-        let firstDot = listRef.current?.children[firstVisibleDotIndex];
-        if (!listRef.current || !firstDot) return;
-        let 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
-    ]);
-    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, {
+    if (justMounted.current) justMounted.current = false;
+  }, [currentIndex, firstVisibleDotIndex, 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",
+        role: 'tablist',
+        'aria-label': 'Slides',
         ref: refs,
         onKeyDown: handleKeyDown,
         onKeyUp: handleKeyUp,
         tabIndex: -1,
-        ...rest
-    }, children ?? dots));
+        ...rest,
+      },
+      children ?? dots,
+    ),
+  );
 });
 CarouselDotsList.displayName = 'Carousel.DotsList';

package/DEV-esm/core/Carousel/CarouselNavigation.js

@@ -4,64 +4,93 @@ 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 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),
+        ),
+      ),
+  );
 });
 CarouselNavigationComponent.displayName = 'Carousel.Navigation';
-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 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),
+  );
 });
 PreviousButton.displayName = 'Carousel.Navigation.PreviousButton';
-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));
+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),
+  );
 });
 NextButton.displayName = 'Carousel.Navigation.NextButton';
 export const CarouselNavigation = Object.assign(CarouselNavigationComponent, {
-    PreviousButton,
-    NextButton
+  PreviousButton,
+  NextButton,
 });

package/DEV-esm/core/Carousel/CarouselSlide.js

@@ -1,34 +1,45 @@
 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';
-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);
+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,
+  );
 });
 CarouselSlide.displayName = 'Carousel.Slide';

package/DEV-esm/core/Carousel/CarouselSlider.js

@@ -1,53 +1,64 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
-import { getWindow, useMergedRefs, useLayoutEffect, Box } 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);
-    scrollToSlide.current = (slideIndex, { instant } = {})=>{
-        isManuallyUpdating.current = true;
-        let slideToShow = sliderRef.current?.children.item(slideIndex);
-        if (!sliderRef.current || !slideToShow) return;
-        let motionOk = getWindow()?.matchMedia('(prefers-reduced-motion: no-preference)')?.matches;
-        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);
+import {
+  getWindow,
+  useMergedRefs,
+  useLayoutEffect,
+  Box,
+} 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);
+  scrollToSlide.current = (slideIndex, { instant } = {}) => {
+    isManuallyUpdating.current = true;
+    let slideToShow = sliderRef.current?.children.item(slideIndex);
+    if (!sliderRef.current || !slideToShow) return;
+    let motionOk = getWindow()?.matchMedia(
+      '(prefers-reduced-motion: no-preference)',
+    )?.matches;
+    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,
+  );
 });
 CarouselSlider.displayName = 'Carousel.Slider';