@votodigital-onpeui/react 0.1.54 → 0.1.56

package/dist/index.js

@@ -1541,6 +1541,61 @@ var unlockBodyScroll = (id, enabled) => {
     document.body.style.overflow = "";
   }
 };
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "iframe",
+  "object",
+  "embed",
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable="true"]'
+].join(",");
+var FOCUS_GUARD_ATTRIBUTE = "data-focus-guard";
+var focusGuardStyle = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: 0,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+var isElementVisible = (element) => {
+  const style = globalThis.getComputedStyle(element);
+  return style.visibility !== "hidden" && style.display !== "none" && element.offsetParent !== null;
+};
+var getFocusableElements = (wrapper, includeWrapper = true) => {
+  let focusable = Array.from(wrapper.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+    (el) => !el.hasAttribute(FOCUS_GUARD_ATTRIBUTE) && isElementVisible(el) && el.tabIndex !== -1
+  );
+  if (includeWrapper && wrapper.tabIndex >= 0) {
+    focusable = [wrapper, ...focusable];
+  }
+  return focusable;
+};
+var focusWrapper = (wrapper, options) => {
+  if (wrapper.tabIndex >= 0) {
+    wrapper.focus(options);
+    return;
+  }
+  const focusable = getFocusableElements(wrapper, false);
+  focusable[0]?.focus(options);
+};
+var focusEdgeElement = (wrapper, position, options) => {
+  const focusable = getFocusableElements(wrapper, false);
+  const target = position === "last" ? focusable.at(-1) : focusable[0];
+  if (target) {
+    target.focus(options);
+    return;
+  }
+  focusWrapper(wrapper, options);
+};
 var Modal = ({
   isOpen,
   onClose,
@@ -1569,6 +1624,16 @@ var Modal = ({
   const modalRef = react.useRef(null);
   const contentRef = react.useRef(null);
   const previousActiveElement = react.useRef(null);
+  const handleStartFocusGuard = () => {
+    const wrapper = modalRef.current;
+    if (!wrapper) return;
+    focusEdgeElement(wrapper, "last", { preventScroll: true });
+  };
+  const handleEndFocusGuard = () => {
+    const wrapper = modalRef.current;
+    if (!wrapper) return;
+    focusEdgeElement(wrapper, "first", { preventScroll: true });
+  };
   const [mounted, setMounted] = react.useState(false);
   const [visible, setVisible] = react.useState(false);
   const [cachedChildren, setCachedChildren] = react.useState(children);
@@ -1618,52 +1683,21 @@ var Modal = ({
     [10, 50, 100, 200].forEach((d) => setTimeout(resetScroll, d));
   }, [isOpen]);
   react.useEffect(() => {
-    let focusOutWrapper = null;
     const pendingTasks = [];
-    const isElementVisible = (element) => {
-      const style = globalThis.getComputedStyle(element);
-      return style.visibility !== "hidden" && style.display !== "none" && element.offsetParent !== null;
-    };
-    const getFocusableElements = (wrapper) => {
-      const selector = [
-        "a[href]",
-        "area[href]",
-        "button:not([disabled])",
-        'input:not([disabled]):not([type="hidden"])',
-        "select:not([disabled])",
-        "textarea:not([disabled])",
-        "iframe",
-        "object",
-        "embed",
-        '[tabindex]:not([tabindex="-1"])',
-        '[contenteditable="true"]'
-      ].join(",");
-      let focusable = Array.from(
-        wrapper.querySelectorAll(selector)
-      ).filter((el) => isElementVisible(el) && el.tabIndex !== -1);
-      if (wrapper.tabIndex >= 0) {
-        focusable = [wrapper, ...focusable];
-      }
-      return focusable;
-    };
-    const handleFocusOut = (e) => {
+    const handleDocumentFocusIn = (e) => {
       if (!isOpen || disableFocus) return;
       const wrapper = modalRef.current;
-      if (!wrapper) return;
-      const relatedTarget = e.relatedTarget;
-      if (relatedTarget && !wrapper.contains(relatedTarget)) {
-        setTimeout(() => {
-          const currentActive = document.activeElement;
-          if (!currentActive || !wrapper.contains(currentActive)) {
-            const focusable = getFocusableElements(wrapper);
-            if (focusable.length > 0) {
-              focusable[focusable.length - 1].focus();
-            } else {
-              wrapper.focus();
-            }
-          }
-        }, 0);
+      const target = e.target;
+      if (!wrapper || !(target instanceof HTMLElement) || wrapper.contains(target)) {
+        return;
       }
+      requestAnimationFrame(() => {
+        const currentActive = document.activeElement;
+        if (currentActive instanceof HTMLElement && wrapper.contains(currentActive)) {
+          return;
+        }
+        focusWrapper(wrapper, { preventScroll: true });
+      });
     };
     const handleKeyDown = (e) => {
       if (e.key === "Escape" && escapeToClose && !closeDisabled) {
@@ -1682,7 +1716,7 @@ var Modal = ({
           if ((e.key === "ArrowUp" || e.key === "ArrowLeft") && activeIndex2 === 0) {
             e.preventDefault();
             e.stopPropagation();
-            if (focusable.length > 1) focusable[focusable.length - 1].focus();
+            if (focusable.length > 1) focusable.at(-1)?.focus();
             else active.focus();
             return;
           }
@@ -1706,7 +1740,7 @@ var Modal = ({
           e.preventDefault();
           if (focusable.length > 0) {
             if (e.key === "ArrowUp" || e.key === "ArrowLeft")
-              focusable[focusable.length - 1].focus();
+              focusable.at(-1)?.focus();
             else focusable[0].focus();
           } else {
             wrapper.focus();
@@ -1721,8 +1755,13 @@ var Modal = ({
         return;
       }
       const first = focusable[0];
-      const last = focusable[focusable.length - 1];
+      const last = focusable.at(-1);
       const isShift = e.shiftKey;
+      if (!first || !last) {
+        e.preventDefault();
+        wrapper.focus();
+        return;
+      }
       if (!active || !wrapper.contains(active)) {
         e.preventDefault();
         (isShift ? last : first).focus();
@@ -1745,14 +1784,7 @@ var Modal = ({
     if (isOpen && !disableFocus) {
       previousActiveElement.current = document.activeElement;
       const focusInitial = (wrapper) => {
-        if (ariaLabelledBy && document.getElementById(ariaLabelledBy)) {
-          wrapper.focus({ preventScroll: true });
-          return;
-        }
-        const focusable = getFocusableElements(wrapper);
-        const first = focusable[0];
-        if (first) first.focus({ preventScroll: true });
-        else wrapper.focus();
+        focusWrapper(wrapper, { preventScroll: true });
       };
       const bindFocusManagement = (attempt = 0) => {
         const wrapper = modalRef.current;
@@ -1764,14 +1796,10 @@ var Modal = ({
           }
           return;
         }
-        if (focusOutWrapper !== wrapper) {
-          focusOutWrapper?.removeEventListener("focusout", handleFocusOut);
-          wrapper.addEventListener("focusout", handleFocusOut);
-          focusOutWrapper = wrapper;
-        }
         focusInitial(wrapper);
       };
       document.addEventListener("keydown", handleKeyDown);
+      document.addEventListener("focusin", handleDocumentFocusIn, true);
       pendingTasks.push(globalThis.setTimeout(() => bindFocusManagement(), 0));
     } else if (isOpen && disableFocus) {
       document.addEventListener("keydown", handleKeyDown);
@@ -1779,7 +1807,7 @@ var Modal = ({
     return () => {
       pendingTasks.forEach((task) => globalThis.clearTimeout(task));
       document.removeEventListener("keydown", handleKeyDown);
-      focusOutWrapper?.removeEventListener("focusout", handleFocusOut);
+      document.removeEventListener("focusin", handleDocumentFocusIn, true);
       if (!disableFocus && !disableFocusRestore && previousActiveElement.current) {
         previousActiveElement.current.focus();
       }
@@ -1839,6 +1867,16 @@ var Modal = ({
             "aria-describedby": props["aria-describedby"],
             "aria-label": props["aria-label"],
             children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  tabIndex: disableFocus ? -1 : 0,
+                  "aria-hidden": "true",
+                  ...{ [FOCUS_GUARD_ATTRIBUTE]: "start" },
+                  style: focusGuardStyle,
+                  onFocus: handleStartFocusGuard
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: contentClass, children: isOpen ? children : cachedChildren }),
               closeButton && /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
@@ -1849,6 +1887,16 @@ var Modal = ({
                   type: "button",
                   children: /* @__PURE__ */ jsxRuntime.jsx(IconCloseRadius, { "aria-hidden": "true", className: "w-full h-full" })
                 }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  tabIndex: disableFocus ? -1 : 0,
+                  "aria-hidden": "true",
+                  ...{ [FOCUS_GUARD_ATTRIBUTE]: "end" },
+                  style: focusGuardStyle,
+                  onFocus: handleEndFocusGuard
+                }
               )
             ]
           }
@@ -2276,7 +2324,13 @@ var ModalLoading = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white leading-normal text-2xl md:text-[64px] text-center mt-10 md:mt-20", children: message })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: `text-white leading-normal text-2xl md:text-[64px] text-center ${spinner ? "mt-5" : "mt-10 md:mt-20"}`,
+            children: message
+          }
+        )
       ]
     }
   );