@lumx/react 3.9.4-alpha.0 → 3.9.4-alpha.2

package/index.js

@@ -11806,6 +11806,8 @@ const PAGINATION_ITEMS_MAX = 5;
  * Size of a pagination item. Used to translate wrapper.
  */
 const PAGINATION_ITEM_SIZE = 12;
+const NEXT_SLIDE_EVENT = 'lumx-next-slide-event';
+const PREV_SLIDE_EVENT = 'lumx-prev-slide-event';
 
 const DEFAULT_OPTIONS = {
   activeIndex: 0,
@@ -11901,6 +11903,17 @@ const useSlideshowControls = _ref => {
     goTo(-1, loopBack, true);
   }, [goTo, stopAutoPlay]);
 
+  // Listen to custom next/prev slide events
+  useEffect(() => {
+    if (!element) return undefined;
+    element.addEventListener(NEXT_SLIDE_EVENT, onNextClick);
+    element.addEventListener(PREV_SLIDE_EVENT, onPreviousClick);
+    return () => {
+      element.removeEventListener(NEXT_SLIDE_EVENT, onNextClick);
+      element.removeEventListener(PREV_SLIDE_EVENT, onPreviousClick);
+    };
+  }, [element, onNextClick, onPreviousClick]);
+
   // If the activeIndex props changes, update the current slide
   useEffect(() => {
     setActiveIndex(activeIndex);
@@ -12125,11 +12138,11 @@ function useKeyNavigate(element, onNext, onPrevious) {
 }
 
 /**
- * Classname set on elements whose focus was blocked.
+ * Data attribute 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';
+ */
+const BLOCKED_FOCUS = 'data-focus-blocked';
 
 /**
  * Manage how slides must behave when visible or not.
@@ -12141,91 +12154,88 @@ const useSlideFocusManagement = _ref => {
     slidesRef
   } = _ref;
   const [slide, setSlide] = React__default.useState(null);
-  useEffect(() => {
-    var _slidesRef$current;
+  const [focusableElementSet, setFocusableElementSet] = React__default.useState();
+  React__default.useEffect(() => {
     if (!slide) {
       return undefined;
     }
-    const isUserActivated = (slidesRef === null || slidesRef === void 0 ? void 0 : (_slidesRef$current = slidesRef.current) === null || _slidesRef$current === void 0 ? void 0 : _slidesRef$current.dataset.lumxUserActivated) === 'true';
-    let focusableElements = [];
-
-    /**
-     * Display given slide to screen readers and, if focus was blocked, restore focus on elements.
-     */
-    const enableSlide = () => {
-      slide.removeAttribute('inert');
-      slide.setAttribute('aria-hidden', 'false');
-      // Find elements we have blocked focus on
-      // (won't be necessary once "inert" gets sufficient browser support)
-      focusableElements = Array.from(slide.querySelectorAll(`.${BLOCKED_FOCUS_CLASSNAME}`));
-      for (const focusableElement of focusableElements) {
-        focusableElement.removeAttribute('tabindex');
-        focusableElement.classList.remove(BLOCKED_FOCUS_CLASSNAME);
+    // Update the slide's focusable element list (including the blocked elements)
+    const updateFocusableElements = () => setFocusableElementSet(function () {
+      let set = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new Set();
+      // TODO: remove when `inert` gets sufficient browser support
+      const focusedBlocked = Array.from(slide.querySelectorAll(`[${BLOCKED_FOCUS}]`));
+      for (const element of focusedBlocked) {
+        set.add(element);
       }
-    };
+      for (const element of getFocusableElements(slide)) {
+        set.add(element);
+      }
+      return set;
+    });
 
-    /**
-     * Hide given slide from screen readers and block focus on all focusable elements within.
-     */
-    const blockSlide = () => {
+    // Observe changes in the content of the slide
+    const observer = new MutationObserver(mutationsList => {
+      if (mutationsList.some(mutation => mutation.type === 'childList')) {
+        updateFocusableElements();
+      }
+    });
+    updateFocusableElements();
+    observer.observe(slide, {
+      attributes: true,
+      childList: true,
+      subtree: true
+    });
+    return observer.disconnect();
+  }, [slide]);
+  useEffect(() => {
+    if (!slide || !focusableElementSet) {
+      return;
+    }
+    const focusableElements = Array.from(focusableElementSet);
+    if (!isSlideDisplayed) {
+      /* Block slide */
       slide.setAttribute('inert', '');
       slide.setAttribute('aria-hidden', 'true');
-      focusableElements = getFocusableElements(slide);
+
+      // TODO: remove when `inert` gets sufficient browser support
       for (const focusableElement of focusableElements) {
         focusableElement.setAttribute('tabindex', '-1');
-        focusableElement.classList.add(BLOCKED_FOCUS_CLASSNAME);
+        focusableElement.setAttribute(BLOCKED_FOCUS, '');
       }
-    };
-    const handleDisplay = () => {
-      if (isSlideDisplayed) {
-        enableSlide();
-      } else {
-        blockSlide();
-      }
-    };
+    } else {
+      var _slidesRef$current;
+      /* Un-block slide */
+      slide.removeAttribute('inert');
+      slide.removeAttribute('aria-hidden');
 
-    // Create an observer instance linked to the callback function
-    // (won't be necessary once "inert" gets sufficient browser support)
-    const observer = new MutationObserver(mutationsList => {
-      for (const mutation of mutationsList) {
-        if (mutation.type === 'childList') {
-          handleDisplay();
-        }
+      // TODO: remove when `inert` gets sufficient browser support
+      for (const focusableElement of focusableElements) {
+        focusableElement.removeAttribute('tabindex');
+        focusableElement.removeAttribute(BLOCKED_FOCUS);
       }
-    });
-    handleDisplay();
 
-    // Change focus on slide displayed
-    if (isSlideDisplayed && isUserActivated) {
-      var _elementToFocus;
-      let elementToFocus = slide;
+      // Change focus on slide displayed
+      const isUserActivated = (slidesRef === null || slidesRef === void 0 ? void 0 : (_slidesRef$current = slidesRef.current) === null || _slidesRef$current === void 0 ? void 0 : _slidesRef$current.dataset.lumxUserActivated) === 'true';
+      if (isUserActivated) {
+        var _elementToFocus;
+        let elementToFocus = slide;
 
-      // We have exactly one focusable element => focus it
-      if (focusableElements.length === 1) {
-        // eslint-disable-next-line prefer-destructuring
-        elementToFocus = focusableElements[0];
-      }
+        // We have exactly one focusable element => focus it
+        if (focusableElementSet.size === 1) {
+          // eslint-disable-next-line prefer-destructuring
+          elementToFocus = focusableElements[0];
+        }
 
-      // We have not focusable element => focus the pagination item
-      if (focusableElements.length === 0) {
-        elementToFocus = document.querySelector(`[aria-controls="${slide === null || slide === void 0 ? void 0 : slide.id}"]`);
+        // We have not focusable element => focus the pagination item
+        if (focusableElementSet.size === 0) {
+          elementToFocus = document.querySelector(`[aria-controls="${slide === null || slide === void 0 ? void 0 : slide.id}"]`);
+        }
+        (_elementToFocus = elementToFocus) === null || _elementToFocus === void 0 ? void 0 : _elementToFocus.focus({
+          preventScroll: true
+        });
       }
-      (_elementToFocus = elementToFocus) === null || _elementToFocus === void 0 ? void 0 : _elementToFocus.focus({
-        preventScroll: true
-      });
-    }
-
-    /** If slide is hidden, start observing for elements to block focus  */
-    if (!isSlideDisplayed) {
-      observer.observe(slide, {
-        attributes: true,
-        childList: true,
-        subtree: true
-      });
-      return () => observer.disconnect();
     }
-    return undefined;
-  }, [isSlideDisplayed, slide, slidesRef]);
+  }, [focusableElementSet, isSlideDisplayed, slide, slidesRef]);
   return setSlide;
 };
 
@@ -12527,6 +12537,10 @@ const Slides = /*#__PURE__*/forwardRef((props, ref) => {
     return groupBy && groupBy > 1 ? chunk(childrenArray, groupBy) : childrenArray;
   }, [children, groupBy]);
   const slidesRef = React__default.useRef(null);
+  const slide = slidesRef.current;
+  const onNextSlide = React__default.useCallback(() => slide === null || slide === void 0 ? void 0 : slide.dispatchEvent(new CustomEvent(NEXT_SLIDE_EVENT)), [slide]);
+  const onPrevSlide = React__default.useCallback(() => slide === null || slide === void 0 ? void 0 : slide.dispatchEvent(new CustomEvent(NEXT_SLIDE_EVENT)), [slide]);
+  useKeyNavigate(slide, onNextSlide, onPrevSlide);
   return /*#__PURE__*/React__default.createElement("section", _extends({
     id: id,
     ref: useMergeRefs(slidesRef, ref)
@@ -12551,7 +12565,7 @@ const Slides = /*#__PURE__*/forwardRef((props, ref) => {
   }, groups.map((group, index) => /*#__PURE__*/React__default.createElement(SlideshowItemGroup, {
     key: index,
     id: slidesId && buildSlideShowGroupId(slidesId, index),
-    label: slideGroupLabel ? slideGroupLabel(index + 1, groups.length) : undefined,
+    label: slideGroupLabel === null || slideGroupLabel === void 0 ? void 0 : slideGroupLabel(index + 1, groups.length),
     isDisplayed: index >= startIndexVisible && index < endIndexVisible,
     slidesRef: slidesRef
   }, group)))), afterSlides);