@lumx/react 3.0.2-alpha-react-utils.2 → 3.0.2-alpha-react-utils.3

package/_internal/afec6b62.js

@@ -1,864 +0,0 @@
-import { d as _slicedToArray, b as _objectWithoutProperties, c as _extends, _ as _objectSpread2, a as _defineProperty } from './6340c129.js';
-import { Theme, Emphasis } from '../components.js';
-import React, { useRef, useEffect, useState, useCallback, useMemo, forwardRef, Children } from 'react';
-import { g as getRootClassName, c as classnames, h as handleBasicClasses, e as detectHorizontalSwipe } from './fd867c9d.js';
-import { g as mdiChevronLeft, p as mdiPauseCircleOutline, q as mdiPlayCircleOutline, f as mdiChevronRight } from './a521723d.js';
-import { W as WINDOW } from './288dfd0f.js';
-import { b as useFocusWithin } from './9ab3c637.js';
-import { m as mergeRefs } from './853713cd.js';
-import { I as IconButton } from './377b2f44.js';
-import isFunction from 'lodash/isFunction';
-import range from 'lodash/range';
-import { a as getFocusableElements } from './5d8ed4ee.js';
-import { u as useRovingTabIndex } from './20976405.js';
-import uniqueId from 'lodash/uniqueId';
-import chunk from 'lodash/chunk';
-
-/**
- * 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) {
-  var savedCallback = useRef();
-  useEffect(function () {
-    savedCallback.current = callback;
-  });
-  useEffect(function () {
-    if (delay === null) return undefined;
-
-    function tick() {
-      if (isFunction(savedCallback.current)) {
-        savedCallback.current();
-      }
-    }
-
-    var id = setInterval(tick, delay);
-    return function () {
-      return clearInterval(id);
-    };
-  }, [delay]);
-}
-
-/**
- * Autoplay default interval in ms.
- */
-var AUTOPLAY_DEFAULT_INTERVAL = 5000;
-/**
- * Full width size in percent.
- */
-
-var FULL_WIDTH_PERCENT = 100;
-/**
- * Edge from the active index.
- */
-
-var EDGE_FROM_ACTIVE_INDEX = 2;
-/**
- * Max number of pagination items.
- */
-
-var PAGINATION_ITEMS_MAX = 5;
-/**
- * Size of a pagination item. Used to translate wrapper.
- */
-
-var PAGINATION_ITEM_SIZE = 12;
-
-var DEFAULT_OPTIONS = {
-  activeIndex: 0,
-  groupBy: 1,
-  interval: AUTOPLAY_DEFAULT_INTERVAL
-};
-var useSlideshowControls = function useSlideshowControls(_ref) {
-  var _ref$activeIndex = _ref.activeIndex,
-      activeIndex = _ref$activeIndex === void 0 ? DEFAULT_OPTIONS.activeIndex : _ref$activeIndex,
-      _ref$groupBy = _ref.groupBy,
-      groupBy = _ref$groupBy === void 0 ? DEFAULT_OPTIONS.groupBy : _ref$groupBy,
-      _ref$interval = _ref.interval,
-      interval = _ref$interval === void 0 ? DEFAULT_OPTIONS.interval : _ref$interval,
-      autoPlay = _ref.autoPlay,
-      defaultActiveIndex = _ref.defaultActiveIndex,
-      onChange = _ref.onChange,
-      itemsCount = _ref.itemsCount,
-      id = _ref.id,
-      slidesId = _ref.slidesId;
-
-  var _useState = useState(activeIndex),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentIndex = _useState2[0],
-      setCurrentIndex = _useState2[1]; // Use state instead of a ref to make the slideshow controls update directly when the element is set.
-
-
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      element = _useState4[0],
-      setElement = _useState4[1]; // Number of slides when using groupBy prop.
-
-
-  var slidesCount = Math.ceil(itemsCount / Math.min(groupBy, itemsCount)); // Change current index to display next slide.
-
-  var goToNextSlide = useCallback(function () {
-    var loopback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-    setCurrentIndex(function (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.
-
-  var goToPreviousSlide = useCallback(function () {
-    var loopback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-    setCurrentIndex(function (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
-
-  var _useState5 = useState(Boolean(autoPlay)),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isAutoPlaying = _useState6[0],
-      setIsAutoPlaying = _useState6[1];
-
-  var _useState7 = useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      isForcePaused = _useState8[0],
-      setIsForcePaused = _useState8[1];
-
-  var isSlideshowAutoPlaying = isForcePaused ? false : isAutoPlaying; // Start
-
-  useInterval(goToNextSlide, isSlideshowAutoPlaying && slidesCount > 1 ? interval : null); // Reset current index if it become invalid.
-
-  useEffect(function () {
-    if (currentIndex > slidesCount - 1) {
-      setCurrentIndex(defaultActiveIndex);
-    }
-  }, [currentIndex, slidesCount, defaultActiveIndex]);
-
-  var startAutoPlay = function startAutoPlay() {
-    setIsAutoPlaying(Boolean(autoPlay));
-  };
-
-  var stopAutoPlay = function stopAutoPlay() {
-    setIsAutoPlaying(false);
-  }; // Handle click on a bullet to go to a specific slide.
-
-
-  var onPaginationClick = useCallback(function (index) {
-    stopAutoPlay();
-    setIsForcePaused(true);
-
-    if (index >= 0 && index < slidesCount) {
-      setCurrentIndex(index);
-    }
-  }, [slidesCount, setCurrentIndex]); // Handle click or keyboard event to go to next slide.
-
-  var onNextClick = useCallback(function () {
-    var loopback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-    stopAutoPlay();
-    setIsForcePaused(true);
-    goToNextSlide(loopback);
-  }, [goToNextSlide]); // Handle click or keyboard event to go to previous slide.
-
-  var onPreviousClick = useCallback(function () {
-    var loopback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-    stopAutoPlay();
-    setIsForcePaused(true);
-    goToPreviousSlide(loopback);
-  }, [goToPreviousSlide]); // If the activeIndex props changes, update the current slide
-
-  useEffect(function () {
-    setCurrentIndex(activeIndex);
-  }, [activeIndex]); // If the slide changes, with autoplay for example, trigger "onChange"
-
-  useEffect(function () {
-    if (!onChange) return;
-    onChange(currentIndex);
-  }, [currentIndex, onChange]);
-  var slideshowId = useMemo(function () {
-    return id || uniqueId('slideshow');
-  }, [id]);
-  var slideshowSlidesId = useMemo(function () {
-    return slidesId || uniqueId('slideshow-slides');
-  }, [slidesId]);
-
-  var toggleAutoPlay = function toggleAutoPlay() {
-    if (isSlideshowAutoPlaying) {
-      stopAutoPlay();
-    } else {
-      startAutoPlay();
-    }
-  };
-
-  var toggleForcePause = function toggleForcePause() {
-    var shouldBePaused = !isForcePaused;
-    setIsForcePaused(shouldBePaused);
-
-    if (!shouldBePaused) {
-      startAutoPlay();
-    } else {
-      stopAutoPlay();
-    }
-  }; // Start index and end index of visible slides.
-
-
-  var startIndexVisible = currentIndex * groupBy;
-  var endIndexVisible = startIndexVisible + groupBy;
-  return {
-    startIndexVisible: startIndexVisible,
-    endIndexVisible: endIndexVisible,
-    setSlideshow: setElement,
-    slideshow: element,
-    slideshowId: slideshowId,
-    slideshowSlidesId: slideshowSlidesId,
-    onPreviousClick: onPreviousClick,
-    onNextClick: onNextClick,
-    onPaginationClick: onPaginationClick,
-    isAutoPlaying: isSlideshowAutoPlaying,
-    toggleAutoPlay: toggleAutoPlay,
-    activeIndex: currentIndex,
-    slidesCount: slidesCount,
-    setActiveIndex: setCurrentIndex,
-    startAutoPlay: startAutoPlay,
-    stopAutoPlay: stopAutoPlay,
-    isForcePaused: isForcePaused,
-    toggleForcePause: 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.
- * */
-var 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.
- */
-
-var useSlideFocusManagement = function useSlideFocusManagement(_ref) {
-  var isSlideDisplayed = _ref.isSlideDisplayed,
-      slideRef = _ref.slideRef;
-  useEffect(function () {
-    var element = slideRef === null || slideRef === void 0 ? void 0 : slideRef.current;
-
-    if (!element) {
-      return undefined;
-    }
-    /**
-     * Display given slide to screen readers and, if focus was blocked, restore focus on elements.
-     */
-
-
-    var enableSlide = function enableSlide() {
-      // Hide from screen readers
-      element.setAttribute('aria-hidden', 'false'); // Find elements we have blocked focus on
-
-      element.querySelectorAll(".".concat(BLOCKED_FOCUS_CLASSNAME)).forEach(function (focusableElement) {
-        focusableElement.removeAttribute('tabindex');
-        focusableElement.classList.remove(BLOCKED_FOCUS_CLASSNAME);
-      });
-    };
-    /**
-     * Hide given slide from screen readers and block focus on all focusable elements within.
-     */
-
-
-    var blockSlide = function blockSlide() {
-      element.setAttribute('aria-hidden', 'true');
-      getFocusableElements(element).forEach(function (focusableElement) {
-        focusableElement.setAttribute('tabindex', '-1');
-        focusableElement.classList.add(BLOCKED_FOCUS_CLASSNAME);
-      });
-    };
-
-    var handleDisplay = function handleDisplay() {
-      if (!element) {
-        return;
-      }
-
-      if (isSlideDisplayed) {
-        enableSlide();
-      } else {
-        blockSlide();
-      }
-    }; // Callback function to execute when mutations are observed
-
-
-    var callback = function callback(mutationsList) {
-      if (element) {
-        var _iteratorNormalCompletion = true;
-        var _didIteratorError = false;
-        var _iteratorError = undefined;
-
-        try {
-          for (var _iterator = mutationsList[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-            var mutation = _step.value;
-
-            if (mutation.type === 'childList') {
-              handleDisplay();
-            }
-          }
-        } catch (err) {
-          _didIteratorError = true;
-          _iteratorError = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion && _iterator.return != null) {
-              _iterator.return();
-            }
-          } finally {
-            if (_didIteratorError) {
-              throw _iteratorError;
-            }
-          }
-        }
-      }
-    }; // Create an observer instance linked to the callback function
-
-
-    var 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 function () {
-      if (!isSlideDisplayed) {
-        observer.disconnect();
-      }
-    };
-  }, [isSlideDisplayed, slideRef]);
-};
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * Component display name.
- */
-var COMPONENT_NAME = 'SlideshowItemGroup';
-/**
- * Component default class name and class prefix.
- */
-
-var CLASSNAME = getRootClassName(COMPONENT_NAME);
-var buildSlideShowGroupId = function buildSlideShowGroupId(slidesId, index) {
-  return "".concat(slidesId, "-slide-").concat(index);
-};
-/**
- * SlideshowItemGroup component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-
-var SlideshowItemGroup = forwardRef(function (props, ref) {
-  var className = props.className,
-      children = props.children,
-      _props$role = props.role,
-      role = _props$role === void 0 ? 'group' : _props$role,
-      label = props.label,
-      isDisplayed = props.isDisplayed,
-      forwardedProps = _objectWithoutProperties(props, ["className", "children", "role", "label", "isDisplayed"]);
-
-  var groupRef = React.useRef(null);
-  useSlideFocusManagement({
-    isSlideDisplayed: isDisplayed,
-    slideRef: groupRef
-  });
-  return React.createElement("div", _extends({
-    ref: mergeRefs(groupRef, ref),
-    role: role,
-    className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME
-    })),
-    "aria-roledescription": "slide",
-    "aria-label": label
-  }, forwardedProps), children);
-});
-SlideshowItemGroup.displayName = COMPONENT_NAME;
-SlideshowItemGroup.className = CLASSNAME;
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * Component default props.
- */
-var DEFAULT_PROPS = _objectSpread2({}, DEFAULT_OPTIONS, {
-  theme: Theme.light
-});
-/**
- * Slideshow component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-
-
-var Slideshow = forwardRef(function (props, ref) {
-  var activeIndex = props.activeIndex,
-      autoPlay = props.autoPlay,
-      children = props.children,
-      className = props.className,
-      fillHeight = props.fillHeight,
-      groupBy = props.groupBy,
-      interval = props.interval,
-      onChange = props.onChange,
-      slideshowControlsProps = props.slideshowControlsProps,
-      theme = props.theme,
-      id = props.id,
-      slidesId = props.slidesId,
-      slideGroupLabel = props.slideGroupLabel,
-      forwardedProps = _objectWithoutProperties(props, ["activeIndex", "autoPlay", "children", "className", "fillHeight", "groupBy", "interval", "onChange", "slideshowControlsProps", "theme", "id", "slidesId", "slideGroupLabel"]); // Number of slideshow items.
-
-
-  var itemsCount = React.Children.count(children);
-
-  var _SlideshowControls$us = SlideshowControls.useSlideshowControls({
-    activeIndex: activeIndex,
-    defaultActiveIndex: DEFAULT_PROPS.activeIndex,
-    autoPlay: Boolean(autoPlay),
-    itemsCount: itemsCount,
-    groupBy: groupBy,
-    id: id,
-    interval: interval,
-    onChange: onChange,
-    slidesId: slidesId
-  }),
-      currentIndex = _SlideshowControls$us.activeIndex,
-      slideshowId = _SlideshowControls$us.slideshowId,
-      setSlideshow = _SlideshowControls$us.setSlideshow,
-      isAutoPlaying = _SlideshowControls$us.isAutoPlaying,
-      slideshowSlidesId = _SlideshowControls$us.slideshowSlidesId,
-      slidesCount = _SlideshowControls$us.slidesCount,
-      onNextClick = _SlideshowControls$us.onNextClick,
-      onPaginationClick = _SlideshowControls$us.onPaginationClick,
-      onPreviousClick = _SlideshowControls$us.onPreviousClick,
-      slideshow = _SlideshowControls$us.slideshow,
-      stopAutoPlay = _SlideshowControls$us.stopAutoPlay,
-      startAutoPlay = _SlideshowControls$us.startAutoPlay,
-      toggleAutoPlay = _SlideshowControls$us.toggleAutoPlay,
-      toggleForcePause = _SlideshowControls$us.toggleForcePause;
-
-  useFocusWithin({
-    element: slideshow,
-    onFocusIn: stopAutoPlay,
-    onFocusOut: startAutoPlay
-  });
-  var showControls = slideshowControlsProps && slidesCount > 1;
-  return React.createElement(Slides, _extends({
-    activeIndex: currentIndex,
-    id: slideshowId,
-    className: className,
-    theme: theme,
-    fillHeight: fillHeight,
-    groupBy: groupBy,
-    isAutoPlaying: isAutoPlaying,
-    autoPlay: autoPlay,
-    slidesId: slideshowSlidesId,
-    toggleAutoPlay: toggleAutoPlay,
-    ref: mergeRefs(ref, setSlideshow),
-    hasControls: showControls,
-    slideGroupLabel: slideGroupLabel,
-    afterSlides: slideshowControlsProps && slidesCount > 1 ? React.createElement("div", {
-      className: "".concat(Slides.className, "__controls")
-    }, React.createElement(SlideshowControls, _extends({}, slideshowControlsProps, {
-      activeIndex: currentIndex,
-      onPaginationClick: onPaginationClick,
-      onNextClick: onNextClick,
-      onPreviousClick: onPreviousClick,
-      slidesCount: slidesCount,
-      parentRef: slideshow,
-      theme: theme,
-      isAutoPlaying: isAutoPlaying,
-      nextButtonProps: _objectSpread2({
-        'aria-controls': slideshowSlidesId
-      }, slideshowControlsProps.nextButtonProps),
-      previousButtonProps: _objectSpread2({
-        'aria-controls': slideshowSlidesId
-      }, slideshowControlsProps.previousButtonProps),
-      playButtonProps: autoPlay ? _objectSpread2({
-        'aria-controls': slideshowSlidesId,
-        onClick: toggleForcePause
-      }, slideshowControlsProps.playButtonProps) : undefined,
-      paginationItemProps: function paginationItemProps(index) {
-        var _slideshowControlsPro;
-
-        return _objectSpread2({
-          'aria-controls': buildSlideShowGroupId(slideshowSlidesId, index)
-        }, (_slideshowControlsPro = slideshowControlsProps.paginationItemProps) === null || _slideshowControlsPro === void 0 ? void 0 : _slideshowControlsPro.call(slideshowControlsProps, index));
-      }
-    }))) : undefined
-  }, forwardedProps), children);
-});
-Slideshow.displayName = 'Slideshow';
-Slideshow.defaultProps = DEFAULT_PROPS;
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * Component display name.
- */
-var COMPONENT_NAME$1 = 'SlideshowItem';
-/**
- * Component default class name and class prefix.
- */
-
-var CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
-/**
- * SlideshowItem component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-
-var SlideshowItem = forwardRef(function (props, ref) {
-  var className = props.className,
-      children = props.children,
-      forwardedProps = _objectWithoutProperties(props, ["className", "children"]);
-
-  return React.createElement("div", _extends({
-    ref: ref,
-    className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$1
-    }))
-  }, forwardedProps), children);
-});
-SlideshowItem.displayName = COMPONENT_NAME$1;
-SlideshowItem.className = CLASSNAME$1;
-
-var isTouchDevice = function isTouchDevice() {
-  return 'ontouchstart' in window;
-};
-/**
- * Listen swipe to navigate left and right.
- */
-
-
-function useSwipeNavigate(element, onNext, onPrevious) {
-  useEffect(function () {
-    if (!element || !isTouchDevice()) return undefined;
-    return detectHorizontalSwipe(element, function (swipe) {
-      var callback = swipe === 'right' ? onPrevious : onNext;
-      callback === null || callback === void 0 ? void 0 : callback();
-    });
-  }, [onPrevious, onNext, element]);
-}
-
-/**
- * Calculate the currently visible pagination "bullet" range.
- */
-function usePaginationVisibleRange(activeIndex, slideCount) {
-  var previousVisibleRangeRef = useRef();
-  return useMemo(function () {
-    var lastSlide = slideCount - 1;
-    var previousVisibleRange = previousVisibleRangeRef.current;
-    var newVisibleRange;
-
-    if (activeIndex === (previousVisibleRange === null || previousVisibleRange === void 0 ? void 0 : previousVisibleRange.max) && activeIndex < lastSlide) {
-      newVisibleRange = {
-        min: previousVisibleRange.min + 1,
-        max: previousVisibleRange.max + 1
-      };
-    } else if (activeIndex === (previousVisibleRange === null || previousVisibleRange === void 0 ? void 0 : previousVisibleRange.min) && activeIndex > 0) {
-      newVisibleRange = {
-        min: previousVisibleRange.min - 1,
-        max: previousVisibleRange.max - 1
-      };
-    } else {
-      var deltaItems = PAGINATION_ITEMS_MAX - 1;
-      var min = activeIndex - EDGE_FROM_ACTIVE_INDEX;
-      var 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: min,
-        max: max
-      };
-    }
-
-    previousVisibleRangeRef.current = newVisibleRange;
-    return newVisibleRange;
-  }, [activeIndex, slideCount]);
-}
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * Component display name.
- */
-var COMPONENT_NAME$2 = 'SlideshowControls';
-/**
- * Component default class name and class prefix.
- */
-
-var CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
-/**
- * Component default props.
- */
-
-var DEFAULT_PROPS$1 = {
-  activeIndex: 0,
-  theme: Theme.light
-};
-/**
- * SlideshowControls component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-
-var InternalSlideshowControls = forwardRef(function (props, ref) {
-  var activeIndex = props.activeIndex,
-      className = props.className,
-      nextButtonProps = props.nextButtonProps,
-      onNextClick = props.onNextClick,
-      onPaginationClick = props.onPaginationClick,
-      onPreviousClick = props.onPreviousClick,
-      parentRef = props.parentRef,
-      previousButtonProps = props.previousButtonProps,
-      paginationProps = props.paginationProps,
-      slidesCount = props.slidesCount,
-      theme = props.theme,
-      _props$isAutoPlaying = props.isAutoPlaying,
-      isAutoPlaying = _props$isAutoPlaying === void 0 ? false : _props$isAutoPlaying,
-      playButtonProps = props.playButtonProps,
-      paginationItemLabel = props.paginationItemLabel,
-      paginationItemProps = props.paginationItemProps,
-      forwardedProps = _objectWithoutProperties(props, ["activeIndex", "className", "nextButtonProps", "onNextClick", "onPaginationClick", "onPreviousClick", "parentRef", "previousButtonProps", "paginationProps", "slidesCount", "theme", "isAutoPlaying", "playButtonProps", "paginationItemLabel", "paginationItemProps"]);
-
-  var parent;
-
-  if (WINDOW) {
-    // Checking window object to avoid errors in SSR.
-    parent = parentRef instanceof HTMLElement ? parentRef : parentRef === null || parentRef === void 0 ? void 0 : parentRef.current;
-  }
-
-  var paginationRef = React.useRef(null); // Listen to touch swipe navigate left & right.
-
-  useSwipeNavigate(parent, // Go next without loopback.
-  useCallback(function () {
-    return onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(false);
-  }, [onNextClick]), // Go previous without loopback.
-  useCallback(function () {
-    return onPreviousClick === null || onPreviousClick === void 0 ? void 0 : onPreviousClick(false);
-  }, [onPreviousClick]));
-  /**
-   * Add roving tab index pattern to pagination items and activate slide on focus.
-   */
-
-  useRovingTabIndex({
-    parentRef: paginationRef,
-    elementSelector: 'button',
-    keepTabIndex: true,
-    onElementFocus: function onElementFocus(element) {
-      element.click();
-    }
-  }); // Pagination "bullet" range.
-
-  var visibleRange = usePaginationVisibleRange(activeIndex, slidesCount); // Inline style of wrapper element.
-
-  var wrapperStyle = {
-    transform: "translateX(-".concat(PAGINATION_ITEM_SIZE * visibleRange.min, "px)")
-  };
-  return React.createElement("div", _extends({
-    ref: ref
-  }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$2,
-      theme: theme
-    }), _defineProperty({}, "".concat(CLASSNAME$2, "--has-infinite-pagination"), slidesCount > PAGINATION_ITEMS_MAX))
-  }), React.createElement(IconButton, _extends({}, previousButtonProps, {
-    icon: mdiChevronLeft,
-    className: "".concat(CLASSNAME$2, "__navigation"),
-    color: theme === Theme.dark ? 'light' : 'dark',
-    emphasis: Emphasis.low,
-    onClick: onPreviousClick
-  })), React.createElement("div", {
-    ref: paginationRef,
-    className: "".concat(CLASSNAME$2, "__pagination")
-  }, React.createElement("div", _extends({
-    className: "".concat(CLASSNAME$2, "__pagination-items"),
-    style: wrapperStyle,
-    role: "tablist"
-  }, paginationProps), useMemo(function () {
-    return range(slidesCount).map(function (index) {
-      var isOnEdge = index !== 0 && index !== slidesCount - 1 && (index === visibleRange.min || index === visibleRange.max);
-      var isActive = activeIndex === index;
-      var isOutRange = index < visibleRange.min || index > visibleRange.max;
-
-      var _ref = paginationItemProps ? paginationItemProps(index) : {},
-          _ref$className = _ref.className,
-          itemClassName = _ref$className === void 0 ? undefined : _ref$className,
-          _ref$label = _ref.label,
-          label = _ref$label === void 0 ? undefined : _ref$label,
-          itemProps = _objectWithoutProperties(_ref, ["className", "label"]);
-
-      var ariaLabel = label || (paginationItemLabel === null || paginationItemLabel === void 0 ? void 0 : paginationItemLabel(index)) || "".concat(index + 1, " / ").concat(slidesCount);
-      return React.createElement("button", _extends({
-        className: classnames(handleBasicClasses({
-          prefix: "".concat(CLASSNAME$2, "__pagination-item"),
-          isActive: isActive,
-          isOnEdge: isOnEdge,
-          isOutRange: isOutRange
-        }), itemClassName),
-        key: index,
-        type: "button",
-        tabIndex: isActive ? undefined : -1,
-        role: "tab",
-        "aria-selected": isActive,
-        onClick: function onClick() {
-          return onPaginationClick === null || onPaginationClick === void 0 ? void 0 : onPaginationClick(index);
-        },
-        "aria-label": ariaLabel
-      }, itemProps));
-    });
-  }, [slidesCount, visibleRange.min, visibleRange.max, activeIndex, paginationItemProps, paginationItemLabel, onPaginationClick]))), playButtonProps ? React.createElement(IconButton, _extends({}, playButtonProps, {
-    icon: isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline,
-    className: "".concat(CLASSNAME$2, "__play"),
-    color: theme === Theme.dark ? 'light' : 'dark',
-    emphasis: Emphasis.low
-  })) : null, React.createElement(IconButton, _extends({}, nextButtonProps, {
-    icon: mdiChevronRight,
-    className: "".concat(CLASSNAME$2, "__navigation"),
-    color: theme === Theme.dark ? 'light' : 'dark',
-    emphasis: Emphasis.low,
-    onClick: onNextClick
-  })));
-});
-InternalSlideshowControls.displayName = COMPONENT_NAME$2;
-InternalSlideshowControls.className = CLASSNAME$2;
-InternalSlideshowControls.defaultProps = DEFAULT_PROPS$1;
-var SlideshowControls = Object.assign(InternalSlideshowControls, {
-  useSlideshowControls: useSlideshowControls,
-  useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS
-});
-
-/**
- * Component display name.
- */
-var COMPONENT_NAME$3 = 'Slideshow';
-/**
- * Component default class name and class prefix.
- */
-
-var CLASSNAME$3 = getRootClassName(COMPONENT_NAME$3);
-/**
- * Slides component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-
-var Slides = forwardRef(function (props, ref) {
-  var _classNames;
-
-  var activeIndex = props.activeIndex,
-      id = props.id,
-      className = props.className,
-      theme = props.theme,
-      fillHeight = props.fillHeight,
-      groupBy = props.groupBy,
-      isAutoPlaying = props.isAutoPlaying,
-      toggleAutoPlay = props.toggleAutoPlay,
-      slidesId = props.slidesId,
-      children = props.children,
-      afterSlides = props.afterSlides,
-      hasControls = props.hasControls,
-      slideGroupLabel = props.slideGroupLabel,
-      forwardedProps = _objectWithoutProperties(props, ["activeIndex", "id", "className", "theme", "fillHeight", "groupBy", "isAutoPlaying", "toggleAutoPlay", "slidesId", "children", "afterSlides", "hasControls", "slideGroupLabel"]);
-
-  var wrapperRef = React.useRef(null);
-  var startIndexVisible = activeIndex;
-  var endIndexVisible = startIndexVisible + 1; // Inline style of wrapper element.
-
-  var wrapperStyle = {
-    transform: "translateX(-".concat(FULL_WIDTH_PERCENT * activeIndex, "%)")
-  };
-  var groups = React.useMemo(function () {
-    var childrenArray = Children.toArray(children);
-    return groupBy && groupBy > 1 ? chunk(childrenArray, groupBy) : childrenArray;
-  }, [children, groupBy]);
-  return React.createElement("section", _extends({
-    id: id,
-    ref: ref
-  }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$3,
-      theme: theme
-    }), (_classNames = {}, _defineProperty(_classNames, "".concat(CLASSNAME$3, "--fill-height"), fillHeight), _defineProperty(_classNames, "".concat(CLASSNAME$3, "--group-by-").concat(groupBy), Boolean(groupBy)), _classNames)),
-    "aria-roledescription": "carousel"
-  }), React.createElement("div", {
-    id: slidesId,
-    className: "".concat(CLASSNAME$3, "__slides"),
-    onMouseEnter: toggleAutoPlay,
-    onMouseLeave: toggleAutoPlay,
-    "aria-live": isAutoPlaying ? 'off' : 'polite'
-  }, React.createElement("div", {
-    ref: wrapperRef,
-    className: "".concat(CLASSNAME$3, "__wrapper"),
-    style: wrapperStyle
-  }, groups.map(function (group, index) {
-    return React.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$3;
-Slides.className = CLASSNAME$3;
-
-export { Slideshow as S, SlideshowItem as a, SlideshowControls as b, Slides as c };
-//# sourceMappingURL=afec6b62.js.map