@lumx/react 3.0.1 → 3.0.2

package/esm/_internal/Slides.js

@@ -1,6 +1,6 @@
-import { d as _slicedToArray, _ as _objectSpread2, b as _objectWithoutProperties, c as _extends, a as _defineProperty } from './_rollupPluginBabelHelpers.js';
+import { d as _slicedToArray, b as _objectWithoutProperties, c as _extends, _ as _objectSpread2, a as _defineProperty } from './_rollupPluginBabelHelpers.js';
 import { Theme, Emphasis } from './components.js';
-import React, { useRef, useEffect, useState, useCallback, useMemo, forwardRef } from 'react';
+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 './getRootClassName.js';
 import { g as mdiChevronLeft, p as mdiPauseCircleOutline, q as mdiPlayCircleOutline, f as mdiChevronRight } from './Icon2.js';
 import { W as WINDOW } from './constants.js';
@@ -9,7 +9,10 @@ import { m as mergeRefs } from './mergeRefs.js';
 import { I as IconButton } from './IconButton.js';
 import isFunction from 'lodash/isFunction';
 import range from 'lodash/range';
+import { a as getFocusableElements } from './ClickAwayProvider.js';
+import { u as useRovingTabIndex } from './useRovingTabIndex.js';
 import uniqueId from 'lodash/uniqueId';
+import chunk from 'lodash/chunk';
 
 /**
  * Making setInterval Declarative with React Hooks.
@@ -242,6 +245,172 @@ var useSlideshowControls = function useSlideshowControls(_ref) {
   };
 };
 
+/**
+ * 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.
  */
@@ -274,7 +443,8 @@ var Slideshow = forwardRef(function (props, ref) {
       theme = props.theme,
       id = props.id,
       slidesId = props.slidesId,
-      forwardedProps = _objectWithoutProperties(props, ["activeIndex", "autoPlay", "children", "className", "fillHeight", "groupBy", "interval", "onChange", "slideshowControlsProps", "theme", "id", "slidesId"]); // Number of slideshow items.
+      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);
@@ -310,6 +480,7 @@ var Slideshow = forwardRef(function (props, ref) {
     onFocusIn: stopAutoPlay,
     onFocusOut: startAutoPlay
   });
+  var showControls = slideshowControlsProps && slidesCount > 1;
   return React.createElement(Slides, _extends({
     activeIndex: currentIndex,
     id: slideshowId,
@@ -321,8 +492,9 @@ var Slideshow = forwardRef(function (props, ref) {
     autoPlay: autoPlay,
     slidesId: slideshowSlidesId,
     toggleAutoPlay: toggleAutoPlay,
-    interval: interval,
     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, {
@@ -343,7 +515,14 @@ var Slideshow = forwardRef(function (props, ref) {
       playButtonProps: autoPlay ? _objectSpread2({
         'aria-controls': slideshowSlidesId,
         onClick: toggleForcePause
-      }, slideshowControlsProps.playButtonProps) : undefined
+      }, 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);
 });
@@ -357,12 +536,12 @@ Slideshow.defaultProps = DEFAULT_PROPS;
 /**
  * Component display name.
  */
-var COMPONENT_NAME = 'SlideshowItem';
+var COMPONENT_NAME$1 = 'SlideshowItem';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME = getRootClassName(COMPONENT_NAME);
+var CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
 /**
  * SlideshowItem component.
  *
@@ -379,14 +558,12 @@ var SlideshowItem = forwardRef(function (props, ref) {
   return React.createElement("div", _extends({
     ref: ref,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME
-    })),
-    "aria-roledescription": "slide",
-    role: "group"
+      prefix: CLASSNAME$1
+    }))
   }, forwardedProps), children);
 });
-SlideshowItem.displayName = COMPONENT_NAME;
-SlideshowItem.className = CLASSNAME;
+SlideshowItem.displayName = COMPONENT_NAME$1;
+SlideshowItem.className = CLASSNAME$1;
 
 var isTouchDevice = function isTouchDevice() {
   return 'ontouchstart' in window;
@@ -406,36 +583,6 @@ function useSwipeNavigate(element, onNext, onPrevious) {
   }, [onPrevious, onNext, element]);
 }
 
-/**
- * Listen keyboard to navigate left and right.
- */
-
-function useKeyNavigate(element, onNext, onPrevious) {
-  useEffect(function () {
-    if (!element) return undefined;
-
-    var onKeyNavigate = function onKeyNavigate(evt) {
-      var callback;
-
-      if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'ArrowRight') {
-        callback = onNext;
-      } else if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'ArrowLeft') {
-        callback = onPrevious;
-      }
-
-      if (!callback) return;
-      callback();
-      evt.preventDefault();
-      evt.stopPropagation();
-    };
-
-    element.addEventListener('keydown', onKeyNavigate);
-    return function () {
-      element.removeEventListener('keydown', onKeyNavigate);
-    };
-  }, [onPrevious, onNext, element]);
-}
-
 /**
  * Calculate the currently visible pagination "bullet" range.
  */
@@ -487,12 +634,12 @@ function usePaginationVisibleRange(activeIndex, slideCount) {
 /**
  * Component display name.
  */
-var COMPONENT_NAME$1 = 'SlideshowControls';
+var COMPONENT_NAME$2 = 'SlideshowControls';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+var CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
 /**
  * Component default props.
  */
@@ -518,23 +665,24 @@ var InternalSlideshowControls = forwardRef(function (props, ref) {
       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,
-      forwardedProps = _objectWithoutProperties(props, ["activeIndex", "className", "nextButtonProps", "onNextClick", "onPaginationClick", "onPreviousClick", "parentRef", "previousButtonProps", "slidesCount", "theme", "isAutoPlaying", "playButtonProps", "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;
-  } // Listen to keyboard navigate left & right.
-
+  }
 
-  useKeyNavigate(parent, onNextClick, onPreviousClick); // Listen to touch swipe navigate left & right.
+  var paginationRef = React.useRef(null); // Listen to touch swipe navigate left & right.
 
   useSwipeNavigate(parent, // Go next without loopback.
   useCallback(function () {
@@ -542,7 +690,19 @@ var InternalSlideshowControls = forwardRef(function (props, ref) {
   }, [onNextClick]), // Go previous without loopback.
   useCallback(function () {
     return onPreviousClick === null || onPreviousClick === void 0 ? void 0 : onPreviousClick(false);
-  }, [onPreviousClick])); // Pagination "bullet" range.
+  }, [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.
 
@@ -553,56 +713,69 @@ var InternalSlideshowControls = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$1,
+      prefix: CLASSNAME$2,
       theme: theme
-    }), _defineProperty({}, "".concat(CLASSNAME$1, "--has-infinite-pagination"), slidesCount > PAGINATION_ITEMS_MAX))
+    }), _defineProperty({}, "".concat(CLASSNAME$2, "--has-infinite-pagination"), slidesCount > PAGINATION_ITEMS_MAX))
   }), React.createElement(IconButton, _extends({}, previousButtonProps, {
     icon: mdiChevronLeft,
-    className: "".concat(CLASSNAME$1, "__navigation"),
+    className: "".concat(CLASSNAME$2, "__navigation"),
     color: theme === Theme.dark ? 'light' : 'dark',
     emphasis: Emphasis.low,
     onClick: onPreviousClick
   })), React.createElement("div", {
-    className: "".concat(CLASSNAME$1, "__pagination")
-  }, React.createElement("div", {
-    className: "".concat(CLASSNAME$1, "__pagination-items"),
-    style: wrapperStyle
-  }, useMemo(function () {
+    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$1, "__pagination-item"),
+          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': paginationItemLabel ? paginationItemLabel(index) : "".concat(index + 1, " / ").concat(slidesCount)
-      }));
+        },
+        "aria-label": ariaLabel
+      }, itemProps));
     });
-  }, [slidesCount, visibleRange.min, visibleRange.max, activeIndex, paginationItemLabel, onPaginationClick]))), playButtonProps ? React.createElement(IconButton, _extends({}, playButtonProps, {
+  }, [slidesCount, visibleRange.min, visibleRange.max, activeIndex, paginationItemProps, paginationItemLabel, onPaginationClick]))), playButtonProps ? React.createElement(IconButton, _extends({}, playButtonProps, {
     icon: isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline,
-    className: "".concat(CLASSNAME$1, "__play"),
+    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$1, "__navigation"),
+    className: "".concat(CLASSNAME$2, "__navigation"),
     color: theme === Theme.dark ? 'light' : 'dark',
     emphasis: Emphasis.low,
     onClick: onNextClick
   })));
 });
-InternalSlideshowControls.displayName = COMPONENT_NAME$1;
-InternalSlideshowControls.className = CLASSNAME$1;
+InternalSlideshowControls.displayName = COMPONENT_NAME$2;
+InternalSlideshowControls.className = CLASSNAME$2;
 InternalSlideshowControls.defaultProps = DEFAULT_PROPS$1;
 var SlideshowControls = Object.assign(InternalSlideshowControls, {
   useSlideshowControls: useSlideshowControls,
@@ -612,12 +785,12 @@ var SlideshowControls = Object.assign(InternalSlideshowControls, {
 /**
  * Component display name.
  */
-var COMPONENT_NAME$2 = 'Slideshow';
+var COMPONENT_NAME$3 = 'Slideshow';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
+var CLASSNAME$3 = getRootClassName(COMPONENT_NAME$3);
 /**
  * Slides component.
  *
@@ -640,34 +813,52 @@ var Slides = forwardRef(function (props, ref) {
       slidesId = props.slidesId,
       children = props.children,
       afterSlides = props.afterSlides,
-      forwardedProps = _objectWithoutProperties(props, ["activeIndex", "id", "className", "theme", "fillHeight", "groupBy", "isAutoPlaying", "toggleAutoPlay", "slidesId", "children", "afterSlides"]); // Inline style of wrapper element.
+      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$2,
+      prefix: CLASSNAME$3,
       theme: theme
-    }), (_classNames = {}, _defineProperty(_classNames, "".concat(CLASSNAME$2, "--fill-height"), fillHeight), _defineProperty(_classNames, "".concat(CLASSNAME$2, "--group-by-").concat(groupBy), Boolean(groupBy)), _classNames)),
+    }), (_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$2, "__slides"),
+    className: "".concat(CLASSNAME$3, "__slides"),
     onMouseEnter: toggleAutoPlay,
     onMouseLeave: toggleAutoPlay,
     "aria-live": isAutoPlaying ? 'off' : 'polite'
   }, React.createElement("div", {
-    className: "".concat(CLASSNAME$2, "__wrapper"),
+    ref: wrapperRef,
+    className: "".concat(CLASSNAME$3, "__wrapper"),
     style: wrapperStyle
-  }, children)), afterSlides);
+  }, 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$2;
-Slides.className = CLASSNAME$2;
+Slides.displayName = COMPONENT_NAME$3;
+Slides.className = CLASSNAME$3;
 
 export { Slideshow as S, SlideshowItem as a, SlideshowControls as b, Slides as c };
 //# sourceMappingURL=Slides.js.map