@votodigital-onpeui/react 0.1.13 → 0.1.14

package/dist/components.mjs

@@ -1,4 +1,4 @@
-export { BrowserRecommended, Button, Footer, Modal, ModalBrowserIncompatible, ModalConfirm, ModalDnieVersions, ModalLoading, ModalNfc, ModalSystemIncompatible, NotRecommended, Overlay, Portal, Show } from './chunk-TNUNWG4S.mjs';
+export { BrowserRecommended, Button, Footer, Modal, ModalBrowserIncompatible, ModalConfirm, ModalDnieVersions, ModalLoading, ModalNfc, ModalSystemIncompatible, NotRecommended, Overlay, Portal, Show } from './chunk-7CLKQHKZ.mjs';
 import './chunk-UEKVXFZK.mjs';
 //# sourceMappingURL=components.mjs.map
 //# sourceMappingURL=components.mjs.map

package/dist/index.js

@@ -1573,6 +1573,8 @@ var Modal = ({
     [10, 50, 100, 200].forEach((d) => setTimeout(resetScroll, d));
   }, [isOpen]);
   react.useEffect(() => {
+    let focusOutWrapper = null;
+    const pendingTasks = [];
     const isElementVisible = (element) => {
       const style = window.getComputedStyle(element);
       return style.visibility !== "hidden" && style.display !== "none" && element.offsetParent !== null;
@@ -1697,22 +1699,60 @@ var Modal = ({
     };
     if (isOpen && !disableFocus) {
       previousActiveElement.current = document.activeElement;
-      modalRef.current?.focus();
+      const labelledById = props["aria-labelledby"];
+      const focusInitial = (wrapper) => {
+        if (labelledById) {
+          const labelEl = document.getElementById(labelledById);
+          if (labelEl instanceof HTMLElement) {
+            if (!labelEl.hasAttribute("tabindex")) labelEl.setAttribute("tabindex", "-1");
+            labelEl.focus({ preventScroll: true });
+            return;
+          }
+        }
+        const focusable = getFocusableElements(wrapper);
+        const first = focusable[0];
+        if (first) first.focus({ preventScroll: true });
+        else wrapper.focus();
+      };
+      const bindFocusManagement = (attempt = 0) => {
+        const wrapper = modalRef.current;
+        if (!wrapper) {
+          if (attempt < 10) {
+            pendingTasks.push(
+              globalThis.setTimeout(() => bindFocusManagement(attempt + 1), 25)
+            );
+          }
+          return;
+        }
+        if (focusOutWrapper !== wrapper) {
+          focusOutWrapper?.removeEventListener("focusout", handleFocusOut);
+          wrapper.addEventListener("focusout", handleFocusOut);
+          focusOutWrapper = wrapper;
+        }
+        focusInitial(wrapper);
+      };
       document.addEventListener("keydown", handleKeyDown);
-      const wrapper = modalRef.current;
-      if (wrapper) wrapper.addEventListener("focusout", handleFocusOut);
+      pendingTasks.push(globalThis.setTimeout(() => bindFocusManagement(), 0));
     } else if (isOpen && disableFocus) {
       document.addEventListener("keydown", handleKeyDown);
     }
     return () => {
+      pendingTasks.forEach((task) => globalThis.clearTimeout(task));
       document.removeEventListener("keydown", handleKeyDown);
-      const wrapper = modalRef.current;
-      if (wrapper) wrapper.removeEventListener("focusout", handleFocusOut);
+      focusOutWrapper?.removeEventListener("focusout", handleFocusOut);
       if (!disableFocus && !disableFocusRestore && previousActiveElement.current) {
         previousActiveElement.current.focus();
       }
     };
-  }, [isOpen, onClose, closeDisabled, escapeToClose, disableFocus, disableFocusRestore]);
+  }, [
+    isOpen,
+    onClose,
+    closeDisabled,
+    escapeToClose,
+    disableFocus,
+    disableFocusRestore,
+    props["aria-labelledby"]
+  ]);
   if (!mounted) return null;
   const contentClass = [
     "relative flex flex-col items-center justify-start",