@lumx/react 3.20.1-alpha.13 → 3.20.1-alpha.14

package/_internal/Slides-01f513ce.js

@@ -1,675 +0,0 @@
-import { f as forwardRef, _ as _extends, c as classNames } from './forwardRef-49d2bb84.js';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import React__default, { useRef, useEffect, useState, useCallback, useMemo, Children } from 'react';
-import range from 'lodash/range';
-import { mdiChevronLeft, mdiPauseCircleOutline, mdiPlayCircleOutline, mdiChevronRight } from '@lumx/icons';
-import { W as WINDOW } from './constants-d0e3f49e.js';
-import isFunction from 'lodash/isFunction';
-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 { detectHorizontalSwipe } from '@lumx/core/js/utils';
-import { Theme, Emphasis } from '@lumx/core/js/constants';
-import { I as IconButton } from './IconButton-10585058.js';
-import chunk from 'lodash/chunk';
-import { m as mergeRefs } from './mergeRefs-f0d7d6ea.js';
-import { g as getFocusableElements } from './getFocusableElements-230173a8.js';
-
-/**
- * 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() {
-      if (isFunction(savedCallback.current)) {
-        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]);
-};
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * 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__*/React__default.createElement("div", _extends({
-    ref: mergeRefs(groupRef, ref),
-    role: role,
-    className: classNames(className, CLASSNAME$3),
-    "aria-roledescription": "slide",
-    "aria-label": label
-  }, forwardedProps), children);
-});
-SlideshowItemGroup.displayName = COMPONENT_NAME$3;
-SlideshowItemGroup.className = CLASSNAME$3;
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * 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__*/React.createElement("div", _extends({
-    ref: ref,
-    className: classNames(className, CLASSNAME$2)
-  }, forwardedProps), 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]);
-}
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * 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__*/React__default.createElement("div", _extends({
-    ref: ref
-  }, forwardedProps, {
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$1,
-      theme
-    }), {
-      [`${CLASSNAME$1}--has-infinite-pagination`]: slidesCount > PAGINATION_ITEMS_MAX
-    })
-  }), /*#__PURE__*/React__default.createElement(IconButton, _extends({}, previousButtonProps, {
-    icon: mdiChevronLeft,
-    className: `${CLASSNAME$1}__navigation`,
-    color: theme === Theme.dark ? 'light' : 'dark',
-    emphasis: Emphasis.low,
-    onClick: onPreviousClick
-  })), /*#__PURE__*/React__default.createElement("div", {
-    ref: paginationRef,
-    className: `${CLASSNAME$1}__pagination`
-  }, /*#__PURE__*/React__default.createElement("div", _extends({
-    className: `${CLASSNAME$1}__pagination-items`,
-    style: wrapperStyle,
-    role: "tablist"
-  }, paginationProps), 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__*/React__default.createElement("button", _extends({
-      className: classNames(handleBasicClasses({
-        prefix: `${CLASSNAME$1}__pagination-item`,
-        isActive,
-        isOnEdge,
-        isOutRange
-      }), itemClassName),
-      key: index,
-      type: "button",
-      tabIndex: isActive ? undefined : -1,
-      role: "tab",
-      "aria-selected": isActive,
-      onClick: () => onPaginationClick?.(index),
-      "aria-label": ariaLabel
-    }, itemProps));
-  }), [slidesCount, visibleRange.min, visibleRange.max, activeIndex, paginationItemProps, paginationItemLabel, onPaginationClick]))), playButtonProps ? /*#__PURE__*/React__default.createElement(IconButton, _extends({}, playButtonProps, {
-    icon: isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline,
-    className: `${CLASSNAME$1}__play`,
-    color: theme === Theme.dark ? 'light' : 'dark',
-    emphasis: Emphasis.low
-  })) : null, /*#__PURE__*/React__default.createElement(IconButton, _extends({}, 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__*/React__default.createElement("section", _extends({
-    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"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    id: slidesId,
-    className: `${CLASSNAME}__slides`,
-    onMouseEnter: toggleAutoPlay,
-    onMouseLeave: toggleAutoPlay,
-    "aria-live": isAutoPlaying ? 'off' : 'polite'
-  }, /*#__PURE__*/React__default.createElement("div", {
-    ref: wrapperRef,
-    className: `${CLASSNAME}__wrapper`,
-    style: wrapperStyle
-  }, groups.map((group, index) => /*#__PURE__*/React__default.createElement(SlideshowItemGroup, {
-    key: index,
-    id: slidesId && buildSlideShowGroupId(slidesId, index),
-    role: hasControls ? 'tabpanel' : 'group',
-    label: slideGroupLabel ? slideGroupLabel(index + 1, groups.length) : undefined,
-    isDisplayed: index >= startIndexVisible && index < endIndexVisible
-  }, group)))), 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-01f513ce.js.map