@itwin/itwinui-react 3.0.4 → 3.0.6

package/esm/core/Carousel/CarouselDotsList.js

@@ -5,13 +5,7 @@
 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
@@ -36,145 +30,89 @@ import { CarouselDot } from './CarouselDot.js';
  * />
  */
 export const CarouselDotsList = React.forwardRef((props, ref) => {
-  const {
-    currentIndex: userCurrentIndex,
-    length,
-    className,
-    onSlideChange,
-    children,
-    ...rest
-  } = props;
-  const context = React.useContext(CarouselContext);
-  const slideCount =
-    length ?? context?.slideCount ?? React.Children.count(children);
-  const currentIndex = userCurrentIndex ?? context?.currentIndex ?? 0;
-  const idPrefix = props.id ?? context?.idPrefix;
-  const handleSlideChange = React.useCallback(
-    (index) => {
-      if (context) {
-        context.setCurrentIndex(index);
-        context.scrollToSlide.current(index);
-      }
-      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));
     });
-    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,
-    ),
-  );
+    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',
+        });
+        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.js

@@ -9,79 +9,43 @@ 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`
@@ -90,6 +54,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.js

@@ -4,12 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 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`.
@@ -18,41 +13,24 @@ 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 { isManuallyUpdating, currentIndex, setCurrentIndex } = context;
-  const updateActiveIndexOnScroll = React.useCallback(() => {
-    // only update index if scroll was triggered by browser
-    if (!isManuallyUpdating.current) {
-      setCurrentIndex(index);
+    const { index, className, children, ...rest } = props;
+    const context = React.useContext(CarouselContext);
+    if (!context || index == null) {
+        throw new Error('CarouselSlide must be used within Carousel');
     }
-  }, [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();
+    const { isManuallyUpdating, currentIndex, setCurrentIndex } = context;
+    const updateActiveIndexOnScroll = React.useCallback(() => {
+        // only update index if scroll was triggered by browser
+        if (!isManuallyUpdating.current) {
+            setCurrentIndex(index);
         }
-      }),
-    },
-    children,
-  );
+    }, [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));
 });

package/esm/core/Carousel/CarouselSlider.js

@@ -5,74 +5,50 @@
 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(
-    () =>
-      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],
-  );
-  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 { children, className, ...rest } = props;
+    const context = React.useContext(CarouselContext);
+    if (!context) {
+        throw new Error('CarouselSlider must be used within Carousel');
     }
-    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,
-    {
-      className: cx('iui-carousel-slider', className),
-      ref: refs,
-      onScroll: handleOnScroll,
-      tabIndex: -1,
-      ...rest,
-    },
-    items,
-  );
+    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}`,
+            'aria-labelledby': `${idPrefix}--dot-${index}`,
+            index,
+        })
+        : 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, { className: cx('iui-carousel-slider', className), ref: refs, onScroll: handleOnScroll, tabIndex: -1, ...rest }, items));
 });