@lumx/react 3.20.1-alpha.25 → 3.20.1-alpha.27

package/_internal/Slides-2d267d8c.js

@@ -0,0 +1,679 @@
+import { f as forwardRef, c as classNames } from './forwardRef-15f62847.js';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useRef, useEffect, useState, useCallback, useMemo, Children } from 'react';
+import { W as WINDOW } from './constants-d0e3f49e.js';
+import { u as useId } from './useId-3a1facc0.js';
+import { u as useRovingTabIndex } from './useRovingTabIndex-7daf0f24.js';
+import { u as useTheme } from './ThemeContext-3181f000.js';
+import { range } from '@lumx/core/js/utils/collection/range';
+import { detectHorizontalSwipe } from '@lumx/core/js/utils';
+import { Theme, Emphasis } from '@lumx/core/js/constants';
+import { I as IconButton } from './IconButton-be160cb0.js';
+import { m as mdiChevronLeft, a as mdiChevronRight } from './chevron-right-827b804a.js';
+import { chunk } from '@lumx/core/js/utils/collection/chunk';
+import { m as mergeRefs } from './mergeRefs-f0d7d6ea.js';
+import { g as getFocusableElements } from './getFocusableElements-230173a8.js';
+
+const mdiPauseCircleOutline = 'M13 16V8h2v8zm-4 0V8h2v8zm3-14a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8';
+
+const mdiPlayCircleOutline = 'M12 20a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m-2 14.5 6-4.5-6-4.5z';
+
+/**
+ * Making setInterval Declarative with React Hooks.
+ * Credits: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+ *
+ * @param callback Function called by setInterval.
+ * @param     delay    Delay for setInterval.
+ */
+function useInterval(callback, delay) {
+  const savedCallback = useRef();
+  useEffect(() => {
+    savedCallback.current = callback;
+  });
+  useEffect(() => {
+    if (delay === null) return undefined;
+    function tick() {
+      savedCallback.current?.();
+    }
+    const id = setInterval(tick, delay);
+    return () => clearInterval(id);
+  }, [delay]);
+}
+
+/**
+ * Autoplay default interval in ms.
+ */
+const AUTOPLAY_DEFAULT_INTERVAL = 5000;
+
+/**
+ * Full width size in percent.
+ */
+const FULL_WIDTH_PERCENT = 100;
+
+/**
+ * Edge from the active index.
+ */
+const EDGE_FROM_ACTIVE_INDEX = 2;
+
+/**
+ * Max number of pagination items.
+ */
+const PAGINATION_ITEMS_MAX = 5;
+
+/**
+ * Size of a pagination item. Used to translate wrapper.
+ */
+const PAGINATION_ITEM_SIZE = 12;
+
+const DEFAULT_OPTIONS = {
+  activeIndex: 0,
+  groupBy: 1,
+  interval: AUTOPLAY_DEFAULT_INTERVAL
+};
+const useSlideshowControls = ({
+  activeIndex = DEFAULT_OPTIONS.activeIndex,
+  groupBy = DEFAULT_OPTIONS.groupBy,
+  interval = DEFAULT_OPTIONS.interval,
+  autoPlay,
+  defaultActiveIndex,
+  onChange,
+  itemsCount,
+  id,
+  slidesId
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(activeIndex);
+  // Use state instead of a ref to make the slideshow controls update directly when the element is set.
+  const [element, setElement] = useState(null);
+
+  // Number of slides when using groupBy prop.
+  const slidesCount = Math.ceil(itemsCount / Math.min(groupBy, itemsCount));
+
+  // Change current index to display next slide.
+  const goToNextSlide = useCallback((loopback = true) => {
+    setCurrentIndex(index => {
+      if (loopback && index === slidesCount - 1) {
+        // Loopback to the start.
+        return 0;
+      }
+      if (index < slidesCount - 1) {
+        // Next slide.
+        return index + 1;
+      }
+      return index;
+    });
+  }, [slidesCount, setCurrentIndex]);
+
+  // Change current index to display previous slide.
+  const goToPreviousSlide = useCallback((loopback = true) => {
+    setCurrentIndex(index => {
+      if (loopback && index === 0) {
+        // Loopback to the end.
+        return slidesCount - 1;
+      }
+      if (index > 0) {
+        // Previous slide.
+        return index - 1;
+      }
+      return index;
+    });
+  }, [slidesCount, setCurrentIndex]);
+
+  // Auto play
+  const [isAutoPlaying, setIsAutoPlaying] = useState(Boolean(autoPlay));
+  const [isForcePaused, setIsForcePaused] = useState(false);
+  const isSlideshowAutoPlaying = isForcePaused ? false : isAutoPlaying;
+  // Start
+  useInterval(goToNextSlide, isSlideshowAutoPlaying && slidesCount > 1 ? interval : null);
+
+  // Reset current index if it become invalid.
+  useEffect(() => {
+    if (currentIndex > slidesCount - 1) {
+      setCurrentIndex(defaultActiveIndex);
+    }
+  }, [currentIndex, slidesCount, defaultActiveIndex]);
+  const startAutoPlay = () => {
+    setIsAutoPlaying(Boolean(autoPlay));
+  };
+  const stopAutoPlay = () => {
+    setIsAutoPlaying(false);
+  };
+
+  // Handle click on a bullet to go to a specific slide.
+  const onPaginationClick = useCallback(index => {
+    stopAutoPlay();
+    setIsForcePaused(true);
+    if (index >= 0 && index < slidesCount) {
+      setCurrentIndex(index);
+    }
+  }, [slidesCount, setCurrentIndex]);
+
+  // Handle click or keyboard event to go to next slide.
+  const onNextClick = useCallback((loopback = true) => {
+    stopAutoPlay();
+    setIsForcePaused(true);
+    goToNextSlide(loopback);
+  }, [goToNextSlide]);
+
+  // Handle click or keyboard event to go to previous slide.
+  const onPreviousClick = useCallback((loopback = true) => {
+    stopAutoPlay();
+    setIsForcePaused(true);
+    goToPreviousSlide(loopback);
+  }, [goToPreviousSlide]);
+
+  // If the activeIndex props changes, update the current slide
+  useEffect(() => {
+    setCurrentIndex(activeIndex);
+  }, [activeIndex]);
+
+  // If the slide changes, with autoplay for example, trigger "onChange"
+  useEffect(() => {
+    if (!onChange) return;
+    onChange(currentIndex);
+  }, [currentIndex, onChange]);
+  const generatedSlideshowId = useId();
+  const slideshowId = id || generatedSlideshowId;
+  const generatedSlidesId = useId();
+  const slideshowSlidesId = slidesId || generatedSlidesId;
+  const toggleAutoPlay = () => {
+    if (isSlideshowAutoPlaying) {
+      stopAutoPlay();
+    } else {
+      startAutoPlay();
+    }
+  };
+  const toggleForcePause = () => {
+    const shouldBePaused = !isForcePaused;
+    setIsForcePaused(shouldBePaused);
+    if (!shouldBePaused) {
+      startAutoPlay();
+    } else {
+      stopAutoPlay();
+    }
+  };
+
+  // Start index and end index of visible slides.
+  const startIndexVisible = currentIndex * groupBy;
+  const endIndexVisible = startIndexVisible + groupBy;
+  return {
+    startIndexVisible,
+    endIndexVisible,
+    setSlideshow: setElement,
+    slideshow: element,
+    slideshowId,
+    slideshowSlidesId,
+    onPreviousClick,
+    onNextClick,
+    onPaginationClick,
+    isAutoPlaying: isSlideshowAutoPlaying,
+    toggleAutoPlay,
+    activeIndex: currentIndex,
+    slidesCount,
+    setActiveIndex: setCurrentIndex,
+    startAutoPlay,
+    stopAutoPlay,
+    isForcePaused,
+    toggleForcePause
+  };
+};
+
+/**
+ * Classname set on elements whose focus was blocked.
+ * This is to easily find elements that have been tempered with,
+ * and not elements whose focus was already initially blocked.
+ * */
+const BLOCKED_FOCUS_CLASSNAME = 'focus-blocked';
+
+/**
+ * Manage how slides must behave when visible or not.
+ * When not visible, they should be hidden from screen readers and not focusable.
+ */
+const useSlideFocusManagement = ({
+  isSlideDisplayed,
+  slideRef
+}) => {
+  useEffect(() => {
+    const element = slideRef?.current;
+    if (!element) {
+      return undefined;
+    }
+
+    /**
+     * Display given slide to screen readers and, if focus was blocked, restore focus on elements.
+     */
+    const enableSlide = () => {
+      // Hide from screen readers
+      element.setAttribute('aria-hidden', 'false');
+      // Find elements we have blocked focus on
+      element.querySelectorAll(`.${BLOCKED_FOCUS_CLASSNAME}`).forEach(focusableElement => {
+        focusableElement.removeAttribute('tabindex');
+        focusableElement.classList.remove(BLOCKED_FOCUS_CLASSNAME);
+      });
+    };
+
+    /**
+     * Hide given slide from screen readers and block focus on all focusable elements within.
+     */
+    const blockSlide = () => {
+      element.setAttribute('aria-hidden', 'true');
+      getFocusableElements(element).forEach(focusableElement => {
+        focusableElement.setAttribute('tabindex', '-1');
+        focusableElement.classList.add(BLOCKED_FOCUS_CLASSNAME);
+      });
+    };
+    const handleDisplay = () => {
+      if (!element) {
+        return;
+      }
+      if (isSlideDisplayed) {
+        enableSlide();
+      } else {
+        blockSlide();
+      }
+    };
+
+    // Callback function to execute when mutations are observed
+    const callback = mutationsList => {
+      if (element) {
+        for (const mutation of mutationsList) {
+          if (mutation.type === 'childList') {
+            handleDisplay();
+          }
+        }
+      }
+    };
+
+    // Create an observer instance linked to the callback function
+    const observer = new MutationObserver(callback);
+    if (element) {
+      handleDisplay();
+
+      /** If slide is hidden, start observing for elements to block focus  */
+      if (!isSlideDisplayed) {
+        observer.observe(element, {
+          attributes: true,
+          childList: true,
+          subtree: true
+        });
+      }
+    }
+    return () => {
+      if (!isSlideDisplayed) {
+        observer.disconnect();
+      }
+    };
+  }, [isSlideDisplayed, slideRef]);
+};
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$3 = 'SlideshowItemGroup';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$3 = getRootClassName(COMPONENT_NAME$3);
+const buildSlideShowGroupId = (slidesId, index) => `${slidesId}-slide-${index}`;
+
+/**
+ * SlideshowItemGroup component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const SlideshowItemGroup = forwardRef((props, ref) => {
+  const {
+    className,
+    children,
+    role = 'group',
+    label,
+    isDisplayed,
+    ...forwardedProps
+  } = props;
+  const groupRef = React__default.useRef(null);
+  useSlideFocusManagement({
+    isSlideDisplayed: isDisplayed,
+    slideRef: groupRef
+  });
+  return /*#__PURE__*/jsx("div", {
+    ref: mergeRefs(groupRef, ref),
+    role: role,
+    className: classNames(className, CLASSNAME$3),
+    "aria-roledescription": "slide",
+    "aria-label": label,
+    ...forwardedProps,
+    children: children
+  });
+});
+SlideshowItemGroup.displayName = COMPONENT_NAME$3;
+SlideshowItemGroup.className = CLASSNAME$3;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$2 = 'SlideshowItem';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
+
+/**
+ * SlideshowItem component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const SlideshowItem = forwardRef((props, ref) => {
+  const {
+    className,
+    children,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    className: classNames(className, CLASSNAME$2),
+    ...forwardedProps,
+    children: children
+  });
+});
+SlideshowItem.displayName = COMPONENT_NAME$2;
+SlideshowItem.className = CLASSNAME$2;
+
+const isTouchDevice = () => 'ontouchstart' in window;
+
+/**
+ * Listen swipe to navigate left and right.
+ */
+function useSwipeNavigate(element, onNext, onPrevious) {
+  useEffect(() => {
+    if (!element || !isTouchDevice()) return undefined;
+    return detectHorizontalSwipe(element, swipe => {
+      const callback = swipe === 'right' ? onPrevious : onNext;
+      callback?.();
+    });
+  }, [onPrevious, onNext, element]);
+}
+
+/**
+ * Calculate the currently visible pagination "bullet" range.
+ */
+function usePaginationVisibleRange(activeIndex, slideCount) {
+  const previousVisibleRangeRef = useRef();
+  return useMemo(() => {
+    const lastSlide = slideCount - 1;
+    const {
+      current: previousVisibleRange
+    } = previousVisibleRangeRef;
+    let newVisibleRange;
+    if (activeIndex === previousVisibleRange?.max && activeIndex < lastSlide) {
+      newVisibleRange = {
+        min: previousVisibleRange.min + 1,
+        max: previousVisibleRange.max + 1
+      };
+    } else if (activeIndex === previousVisibleRange?.min && activeIndex > 0) {
+      newVisibleRange = {
+        min: previousVisibleRange.min - 1,
+        max: previousVisibleRange.max - 1
+      };
+    } else {
+      const deltaItems = PAGINATION_ITEMS_MAX - 1;
+      let min = activeIndex - EDGE_FROM_ACTIVE_INDEX;
+      let max = activeIndex + EDGE_FROM_ACTIVE_INDEX;
+      if (activeIndex > lastSlide - EDGE_FROM_ACTIVE_INDEX) {
+        min = lastSlide - deltaItems;
+        max = lastSlide;
+      } else if (activeIndex < deltaItems) {
+        min = 0;
+        max = deltaItems;
+      }
+      newVisibleRange = {
+        min,
+        max
+      };
+    }
+    previousVisibleRangeRef.current = newVisibleRange;
+    return newVisibleRange;
+  }, [activeIndex, slideCount]);
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1 = 'SlideshowControls';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  activeIndex: 0
+};
+
+/**
+ * SlideshowControls component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const InternalSlideshowControls = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    activeIndex = DEFAULT_PROPS.activeIndex,
+    className,
+    nextButtonProps,
+    onNextClick,
+    onPaginationClick,
+    onPreviousClick,
+    parentRef,
+    previousButtonProps,
+    paginationProps,
+    slidesCount,
+    theme = defaultTheme,
+    isAutoPlaying = false,
+    playButtonProps,
+    paginationItemLabel,
+    paginationItemProps,
+    ...forwardedProps
+  } = props;
+  let parent;
+  if (WINDOW) {
+    // Checking window object to avoid errors in SSR.
+    parent = parentRef instanceof HTMLElement ? parentRef : parentRef?.current;
+  }
+  const paginationRef = React__default.useRef(null);
+  // Listen to touch swipe navigate left & right.
+  useSwipeNavigate(parent,
+  // Go next without loopback.
+  useCallback(() => onNextClick?.(false), [onNextClick]),
+  // Go previous without loopback.
+  useCallback(() => onPreviousClick?.(false), [onPreviousClick]));
+
+  /**
+   * Add roving tab index pattern to pagination items and activate slide on focus.
+   */
+  useRovingTabIndex({
+    parentRef: paginationRef,
+    elementSelector: 'button',
+    keepTabIndex: true,
+    onElementFocus: element => {
+      element.click();
+    }
+  });
+
+  // Pagination "bullet" range.
+  const visibleRange = usePaginationVisibleRange(activeIndex, slidesCount);
+
+  // Inline style of wrapper element.
+  const wrapperStyle = {
+    transform: `translateX(-${PAGINATION_ITEM_SIZE * visibleRange.min}px)`
+  };
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME$1,
+      theme
+    }), {
+      [`${CLASSNAME$1}--has-infinite-pagination`]: slidesCount > PAGINATION_ITEMS_MAX
+    }),
+    children: [/*#__PURE__*/jsx(IconButton, {
+      ...previousButtonProps,
+      icon: mdiChevronLeft,
+      className: `${CLASSNAME$1}__navigation`,
+      color: theme === Theme.dark ? 'light' : 'dark',
+      emphasis: Emphasis.low,
+      onClick: onPreviousClick
+    }), /*#__PURE__*/jsx("div", {
+      ref: paginationRef,
+      className: `${CLASSNAME$1}__pagination`,
+      children: /*#__PURE__*/jsx("div", {
+        className: `${CLASSNAME$1}__pagination-items`,
+        style: wrapperStyle,
+        role: "tablist",
+        ...paginationProps,
+        children: useMemo(() => range(slidesCount).map(index => {
+          const isOnEdge = index !== 0 && index !== slidesCount - 1 && (index === visibleRange.min || index === visibleRange.max);
+          const isActive = activeIndex === index;
+          const isOutRange = index < visibleRange.min || index > visibleRange.max;
+          const {
+            className: itemClassName = undefined,
+            label = undefined,
+            ...itemProps
+          } = paginationItemProps ? paginationItemProps(index) : {};
+          const ariaLabel = label || paginationItemLabel?.(index) || `${index + 1} / ${slidesCount}`;
+          return /*#__PURE__*/jsx("button", {
+            className: classNames(handleBasicClasses({
+              prefix: `${CLASSNAME$1}__pagination-item`,
+              isActive,
+              isOnEdge,
+              isOutRange
+            }), itemClassName),
+            type: "button",
+            tabIndex: isActive ? undefined : -1,
+            role: "tab",
+            "aria-selected": isActive,
+            onClick: () => onPaginationClick?.(index),
+            "aria-label": ariaLabel,
+            ...itemProps
+          }, index);
+        }), [slidesCount, visibleRange.min, visibleRange.max, activeIndex, paginationItemProps, paginationItemLabel, onPaginationClick])
+      })
+    }), playButtonProps ? /*#__PURE__*/jsx(IconButton, {
+      ...playButtonProps,
+      icon: isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline,
+      className: `${CLASSNAME$1}__play`,
+      color: theme === Theme.dark ? 'light' : 'dark',
+      emphasis: Emphasis.low
+    }) : null, /*#__PURE__*/jsx(IconButton, {
+      ...nextButtonProps,
+      icon: mdiChevronRight,
+      className: `${CLASSNAME$1}__navigation`,
+      color: theme === Theme.dark ? 'light' : 'dark',
+      emphasis: Emphasis.low,
+      onClick: onNextClick
+    })]
+  });
+});
+InternalSlideshowControls.displayName = COMPONENT_NAME$1;
+InternalSlideshowControls.className = CLASSNAME$1;
+InternalSlideshowControls.defaultProps = DEFAULT_PROPS;
+const SlideshowControls = Object.assign(InternalSlideshowControls, {
+  useSlideshowControls,
+  useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS
+});
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Slideshow';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Slides component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Slides = forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
+  const {
+    activeIndex,
+    id,
+    className,
+    theme = defaultTheme,
+    fillHeight,
+    groupBy,
+    isAutoPlaying,
+    toggleAutoPlay,
+    slidesId,
+    children,
+    afterSlides,
+    hasControls,
+    slideGroupLabel,
+    ...forwardedProps
+  } = props;
+  const wrapperRef = React__default.useRef(null);
+  const startIndexVisible = activeIndex;
+  const endIndexVisible = startIndexVisible + 1;
+
+  // Inline style of wrapper element.
+  const wrapperStyle = {
+    transform: `translateX(-${FULL_WIDTH_PERCENT * activeIndex}%)`
+  };
+  const groups = React__default.useMemo(() => {
+    const childrenArray = Children.toArray(children);
+    return groupBy && groupBy > 1 ? chunk(childrenArray, groupBy) : childrenArray;
+  }, [children, groupBy]);
+  return /*#__PURE__*/jsxs("section", {
+    id: id,
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      theme
+    }), {
+      [`${CLASSNAME}--fill-height`]: fillHeight,
+      [`${CLASSNAME}--group-by-${groupBy}`]: Boolean(groupBy)
+    }),
+    "aria-roledescription": "carousel",
+    children: [/*#__PURE__*/jsx("div", {
+      id: slidesId,
+      className: `${CLASSNAME}__slides`,
+      onMouseEnter: toggleAutoPlay,
+      onMouseLeave: toggleAutoPlay,
+      "aria-live": isAutoPlaying ? 'off' : 'polite',
+      children: /*#__PURE__*/jsx("div", {
+        ref: wrapperRef,
+        className: `${CLASSNAME}__wrapper`,
+        style: wrapperStyle,
+        children: groups.map((group, index) => /*#__PURE__*/jsx(SlideshowItemGroup, {
+          id: slidesId && buildSlideShowGroupId(slidesId, index),
+          role: hasControls ? 'tabpanel' : 'group',
+          label: slideGroupLabel ? slideGroupLabel(index + 1, groups.length) : undefined,
+          isDisplayed: index >= startIndexVisible && index < endIndexVisible,
+          children: group
+        }, index))
+      })
+    }), afterSlides]
+  });
+});
+Slides.displayName = COMPONENT_NAME;
+Slides.className = CLASSNAME;
+
+export { DEFAULT_OPTIONS as D, SlideshowItem as S, SlideshowControls as a, Slides as b, buildSlideShowGroupId as c };
+//# sourceMappingURL=Slides-2d267d8c.js.map