@votodigital-onpeui/react 0.1.14 → 0.1.16

package/dist/hooks.js

@@ -0,0 +1,774 @@
+'use strict';
+
+var zustand = require('zustand');
+var react = require('react');
+var io = require('socket.io-client');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var io__default = /*#__PURE__*/_interopDefault(io);
+
+// src/hooks/onpeId/store/modalIframePreload.ts
+var INITIAL_STATE = {
+  modalUrl: "",
+  isOpenModal: false,
+  isIframeReady: false
+};
+var useModalIframePreload = zustand.create()(
+  (set) => ({
+    ...INITIAL_STATE,
+    setModalUrl: (url) => set({ modalUrl: url }),
+    openModal: () => set({ isOpenModal: true }),
+    closeModal: () => {
+      set({
+        isOpenModal: false,
+        isIframeReady: false,
+        modalUrl: ""
+      });
+    },
+    setIsIframeReady: (ready) => set({ isIframeReady: ready }),
+    reset: () => set(INITIAL_STATE)
+  })
+);
+var useIframeCommunication = ({
+  onExpiredApp,
+  onOpenApp,
+  onLaunchApp,
+  enabled = true,
+  allowedOrigin
+} = {}) => {
+  const handlersRef = react.useRef({
+    onExpiredApp,
+    onOpenApp,
+    onLaunchApp
+  });
+  react.useEffect(() => {
+    handlersRef.current = {
+      onExpiredApp,
+      onOpenApp,
+      onLaunchApp
+    };
+  }, [onExpiredApp, onOpenApp, onLaunchApp]);
+  react.useEffect(() => {
+    if (!enabled) return;
+    const handler = (event) => {
+      if (allowedOrigin && event.origin !== allowedOrigin) {
+        console.warn(
+          `Mensaje rechazado de origen no permitido: ${event.origin}`
+        );
+        return;
+      }
+      const data = event.data;
+      if (!data?.status) return;
+      const handlers = handlersRef.current;
+      switch (data.status) {
+        case "EXPIRED_APP":
+          handlers.onExpiredApp?.(data);
+          break;
+        case "OPEN_APP":
+          handlers.onOpenApp?.(data);
+          break;
+        case "LAUNCH_APP":
+          handlers.onLaunchApp?.(data);
+          break;
+      }
+    };
+    globalThis.addEventListener("message", handler);
+    return () => globalThis.removeEventListener("message", handler);
+  }, [enabled, allowedOrigin]);
+};
+var useSendMessageToIframe = ({
+  iframeRef,
+  modalUrl
+}) => {
+  const sendMessageToIframe = react.useCallback(
+    (message) => {
+      if (!iframeRef.current || !modalUrl) return;
+      try {
+        const iframeOrigin = new URL(modalUrl).origin;
+        iframeRef.current.contentWindow?.postMessage(message, iframeOrigin);
+      } catch (error) {
+        console.error("Error al enviar mensaje al iframe:", error);
+      }
+    },
+    [iframeRef, modalUrl]
+  );
+  return { sendMessageToIframe };
+};
+var useIframePreload = () => {
+  const {
+    modalUrl,
+    setModalUrl,
+    isOpenModal,
+    closeModal,
+    setIsIframeReady,
+    openModal,
+    reset
+  } = useModalIframePreload();
+  const preloadIframeRef = react.useRef(null);
+  const iframeRef = react.useRef(null);
+  const isPreloading = !!modalUrl && !isOpenModal;
+  const handlePreloadIframeReady = () => {
+    setIsIframeReady(true);
+    openModal();
+  };
+  const handleModalIframeReady = () => {
+    if (!useModalIframePreload.getState().isIframeReady) {
+      setIsIframeReady(true);
+    }
+  };
+  return {
+    modalUrl,
+    setModalUrl,
+    isOpenModal,
+    closeModal,
+    isPreloading,
+    preloadIframeRef,
+    iframeRef,
+    handlePreloadIframeReady,
+    handleModalIframeReady,
+    reset
+  };
+};
+var RECONNECTION_ATTEMPTS = 14;
+var useSocketConnection = ({
+  socketUrl,
+  secure = false,
+  isOpenLaunchApp,
+  dataOpenLaunchApp,
+  closeLaunchApp,
+  closeModal,
+  onComplete,
+  onDisconnectClient,
+  onDisconnect,
+  onMaxReconnects,
+  onConnectionChange,
+  enabled = true
+}) => {
+  const socketRef = react.useRef(null);
+  const [attempts, setAttempts] = react.useState(0);
+  const dataOpenLaunchAppRef = react.useRef(dataOpenLaunchApp);
+  const closeLaunchAppRef = react.useRef(closeLaunchApp);
+  const closeModalRef = react.useRef(closeModal);
+  const enabledRef = react.useRef(enabled);
+  const onConnectionChangeRef = react.useRef(onConnectionChange);
+  const onCompleteRef = react.useRef(onComplete);
+  const onDisconnectClientRef = react.useRef(onDisconnectClient);
+  const onDisconnectRef = react.useRef(onDisconnect);
+  const onMaxReconnectsRef = react.useRef(onMaxReconnects);
+  react.useEffect(() => {
+    dataOpenLaunchAppRef.current = dataOpenLaunchApp;
+    closeLaunchAppRef.current = closeLaunchApp;
+    closeModalRef.current = closeModal;
+    enabledRef.current = enabled;
+    onConnectionChangeRef.current = onConnectionChange;
+    onCompleteRef.current = onComplete;
+    onDisconnectClientRef.current = onDisconnectClient;
+    onDisconnectRef.current = onDisconnect;
+    onMaxReconnectsRef.current = onMaxReconnects;
+  }, [
+    dataOpenLaunchApp,
+    closeLaunchApp,
+    closeModal,
+    enabled,
+    onConnectionChange,
+    onComplete,
+    onDisconnectClient,
+    onDisconnect,
+    onMaxReconnects
+  ]);
+  react.useEffect(() => {
+    if (attempts === RECONNECTION_ATTEMPTS) {
+      if (socketRef.current) {
+        socketRef.current.disconnect();
+      }
+      closeLaunchAppRef.current();
+      onConnectionChangeRef.current?.(false);
+      closeModalRef.current();
+      onMaxReconnectsRef.current?.();
+      setTimeout(() => setAttempts(0), 0);
+    }
+  }, [attempts]);
+  react.useEffect(() => {
+    if (!enabled) {
+      if (socketRef.current) {
+        socketRef.current.removeAllListeners();
+        socketRef.current.disconnect();
+        socketRef.current = null;
+        onConnectionChangeRef.current?.(false);
+        setTimeout(() => setAttempts(0), 0);
+      }
+      return;
+    }
+    if (!isOpenLaunchApp) {
+      if (socketRef.current) {
+        socketRef.current.removeAllListeners();
+        socketRef.current.disconnect();
+        socketRef.current = null;
+      }
+      return;
+    }
+    if (!socketRef.current) {
+      socketRef.current = io__default.default(socketUrl, {
+        transports: ["websocket"],
+        secure,
+        upgrade: false,
+        forceNew: true,
+        reconnection: true,
+        reconnectionAttempts: RECONNECTION_ATTEMPTS,
+        reconnectionDelay: 2e3,
+        reconnectionDelayMax: 1e3
+      });
+      const socket = socketRef.current;
+      const handleConnect = () => {
+        if (!enabledRef.current) return;
+        onConnectionChangeRef.current?.(true);
+        if (socketRef.current) {
+          const jsonObject = dataOpenLaunchAppRef.current;
+          if (jsonObject && Object.keys(jsonObject).length > 0) {
+            socketRef.current.emit("setToken", jsonObject);
+          } else {
+            setTimeout(() => {
+              const delayedData = dataOpenLaunchAppRef.current;
+              if (delayedData && Object.keys(delayedData).length > 0 && socketRef.current && enabledRef.current) {
+                socketRef.current.emit("setToken", delayedData);
+              }
+            }, 100);
+          }
+        } else {
+          console.error("Socket no est\xE1 disponible para enviar token");
+        }
+      };
+      const handleDisconnect = () => {
+        if (!enabledRef.current) return;
+        onConnectionChangeRef.current?.(false);
+        closeLaunchAppRef.current();
+        closeModalRef.current();
+        onDisconnectRef.current?.();
+      };
+      const handleReconnectAttempt = (attemptNumber) => {
+        setAttempts(attemptNumber);
+      };
+      const handleConnectError = (error) => {
+        console.error("Error de conexi\xF3n socket:", error);
+      };
+      const handleComplete = (data) => {
+        if (!enabledRef.current) return;
+        closeLaunchAppRef.current();
+        onConnectionChangeRef.current?.(false);
+        closeModalRef.current();
+        onCompleteRef.current?.(data);
+      };
+      const handleServerTimeout = () => {
+        if (!enabledRef.current) return;
+        closeLaunchAppRef.current();
+        onConnectionChangeRef.current?.(false);
+        closeModalRef.current();
+      };
+      const handleDisconnectClient = () => {
+        if (!enabledRef.current) return;
+        closeLaunchAppRef.current();
+        onConnectionChangeRef.current?.(false);
+        closeModalRef.current();
+        onDisconnectClientRef.current?.();
+      };
+      socket.on("connect", handleConnect);
+      socket.on("disconnect", handleDisconnect);
+      socket.on("connect_error", handleConnectError);
+      socket.io.on("reconnect_attempt", handleReconnectAttempt);
+      socket.on("onProcessComplete", handleComplete);
+      socket.on("onValidationComplete", handleComplete);
+      socket.on("onProcessCompleteFirma", handleComplete);
+      socket.on("onServerTimeout", handleServerTimeout);
+      socket.on("onDisconnectClient", handleDisconnectClient);
+    }
+    return () => {
+      if (socketRef.current && (!enabled || !isOpenLaunchApp)) {
+        socketRef.current.removeAllListeners();
+        socketRef.current.disconnect();
+        socketRef.current = null;
+      }
+    };
+  }, [enabled, isOpenLaunchApp, socketUrl, secure]);
+  react.useEffect(() => {
+    return () => {
+      if (socketRef.current) {
+        socketRef.current.removeAllListeners();
+        socketRef.current.disconnect();
+        socketRef.current = null;
+      }
+    };
+  }, []);
+  return { attempts };
+};
+var useOnpeIdAuth = ({
+  socketUrl,
+  secure = false,
+  navigate,
+  onConnectionChange,
+  onComplete,
+  onDisconnectClient,
+  onExpiredApp,
+  onDisconnect,
+  onMaxReconnects
+}) => {
+  const [isOpenLaunchApp, setIsOpenLaunchApp] = react.useState(false);
+  const [dataOpenLaunchApp, setDataOpenLaunchApp] = react.useState({});
+  const openLaunchApp = react.useCallback(() => setIsOpenLaunchApp(true), []);
+  const closeLaunchApp = react.useCallback(() => setIsOpenLaunchApp(false), []);
+  const {
+    modalUrl,
+    setModalUrl,
+    isOpenModal,
+    isPreloading,
+    closeModal,
+    preloadIframeRef,
+    iframeRef,
+    handlePreloadIframeReady,
+    handleModalIframeReady,
+    reset: resetIframeState
+  } = useIframePreload();
+  const handleClose = react.useCallback(() => {
+    onConnectionChange?.(false);
+    closeModal();
+    closeLaunchApp();
+    resetIframeState();
+  }, [closeModal, closeLaunchApp, resetIframeState, onConnectionChange]);
+  const { attempts } = useSocketConnection({
+    socketUrl,
+    secure,
+    isOpenLaunchApp,
+    dataOpenLaunchApp,
+    closeLaunchApp,
+    closeModal: handleClose,
+    onComplete,
+    onDisconnectClient,
+    onDisconnect,
+    onMaxReconnects,
+    onConnectionChange,
+    enabled: isOpenModal && !!modalUrl
+  });
+  useIframeCommunication({
+    onExpiredApp: () => {
+      handleClose();
+      onExpiredApp?.();
+    },
+    onOpenApp: (data) => {
+      navigate(data.url);
+    },
+    onLaunchApp: (data) => {
+      openLaunchApp();
+      setDataOpenLaunchApp(data.data ?? {});
+    }
+  });
+  return {
+    modalUrl,
+    setModalUrl,
+    isOpenModal,
+    isPreloading,
+    isOpenLaunchApp,
+    handleClose,
+    iframeRef,
+    preloadIframeRef,
+    handlePreloadIframeReady,
+    handleModalIframeReady,
+    attempts,
+    reset: resetIframeState
+  };
+};
+var Portal = ({ children, container }) => {
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+  if (!mounted) return null;
+  let portalElement = container || document.querySelector("#portal");
+  if (!portalElement) {
+    portalElement = document.body;
+  }
+  return reactDom.createPortal(children, portalElement);
+};
+var IconCloseRadius = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 28, height: 28, viewBox: "0 0 28 28", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    d: "M14 0C6.2 0 0 6.2 0 14C0 21.8 6.2 28 14 28C21.8 28 28 21.8 28 14C28 6.2 21.8 0 14 0ZM19.4 21L14 15.6L8.6 21L7 19.4L12.4 14L7 8.6L8.6 7L14 12.4L19.4 7L21 8.6L15.6 14L21 19.4L19.4 21Z",
+    fill: "currentColor"
+  }
+) });
+var Modal = ({
+  isOpen,
+  onClose,
+  children,
+  whitoutBackground = false,
+  closeButton = false,
+  closeDisabled = false,
+  escapeToClose = true,
+  disableFocus = false,
+  disableFocusRestore = false,
+  existTabIndex = true,
+  zIndexLevel = 100,
+  onCloseComplete,
+  overlayColor: _overlayColor = "blue",
+  ...props
+}) => {
+  const modalRef = react.useRef(null);
+  const contentRef = react.useRef(null);
+  const previousActiveElement = react.useRef(null);
+  const [mounted, setMounted] = react.useState(false);
+  const [visible, setVisible] = react.useState(false);
+  const [cachedChildren, setCachedChildren] = react.useState(children);
+  react.useEffect(() => {
+    if (isOpen) {
+      setCachedChildren(children);
+    }
+  }, [isOpen, children]);
+  react.useEffect(() => {
+    if (isOpen) {
+      setMounted(true);
+      const raf = requestAnimationFrame(() => {
+        requestAnimationFrame(() => setVisible(true));
+      });
+      return () => cancelAnimationFrame(raf);
+    } else {
+      setVisible(false);
+      const timer = setTimeout(() => {
+        setMounted(false);
+        onCloseComplete?.();
+      }, 200);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, onCloseComplete]);
+  react.useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+  react.useEffect(() => {
+    if (!isOpen) return;
+    const resetScroll = () => {
+      const el = contentRef.current;
+      if (!el) return;
+      el.style.scrollBehavior = "auto";
+      el.scrollTop = 0;
+      requestAnimationFrame(() => {
+        el.scrollTop = 0;
+        setTimeout(() => {
+          el.style.scrollBehavior = "smooth";
+        }, 10);
+      });
+    };
+    resetScroll();
+    [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;
+    };
+    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) => {
+      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 handleKeyDown = (e) => {
+      if (e.key === "Escape" && escapeToClose && !closeDisabled) {
+        onClose();
+        return;
+      }
+      if (!isOpen || disableFocus) return;
+      const wrapper = modalRef.current;
+      if (!wrapper) return;
+      const focusable = getFocusableElements(wrapper);
+      const active = document.activeElement || null;
+      const arrowKeys = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
+      if (arrowKeys.includes(e.key)) {
+        if (active && wrapper.contains(active)) {
+          const activeIndex2 = focusable.indexOf(active);
+          if ((e.key === "ArrowUp" || e.key === "ArrowLeft") && activeIndex2 === 0) {
+            e.preventDefault();
+            e.stopPropagation();
+            if (focusable.length > 1) focusable[focusable.length - 1].focus();
+            else active.focus();
+            return;
+          }
+          if ((e.key === "ArrowDown" || e.key === "ArrowRight") && activeIndex2 === focusable.length - 1) {
+            e.preventDefault();
+            e.stopPropagation();
+            if (focusable.length > 1) focusable[0].focus();
+            else active.focus();
+            return;
+          }
+          requestAnimationFrame(() => {
+            const currentActive = document.activeElement;
+            if (!currentActive || !wrapper.contains(currentActive)) {
+              if (activeIndex2 !== -1 && focusable[activeIndex2])
+                focusable[activeIndex2].focus();
+              else if (focusable.length > 0) focusable[0].focus();
+              else wrapper.focus();
+            }
+          });
+        } else {
+          e.preventDefault();
+          if (focusable.length > 0) {
+            if (e.key === "ArrowUp" || e.key === "ArrowLeft")
+              focusable[focusable.length - 1].focus();
+            else focusable[0].focus();
+          } else {
+            wrapper.focus();
+          }
+        }
+        return;
+      }
+      if (e.key !== "Tab") return;
+      if (focusable.length === 0) {
+        e.preventDefault();
+        wrapper.focus();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const isShift = e.shiftKey;
+      if (!active || !wrapper.contains(active)) {
+        e.preventDefault();
+        (isShift ? last : first).focus();
+        return;
+      }
+      const activeIndex = focusable.indexOf(active);
+      if (!isShift && (active === last || activeIndex === focusable.length - 1)) {
+        e.preventDefault();
+        first.focus();
+        return;
+      }
+      if (isShift) {
+        e.preventDefault();
+        if (active === first || active === wrapper || activeIndex === 0)
+          last.focus();
+        else if (activeIndex > 0) focusable[activeIndex - 1].focus();
+        else last.focus();
+      }
+    };
+    if (isOpen && !disableFocus) {
+      previousActiveElement.current = document.activeElement;
+      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);
+      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);
+      focusOutWrapper?.removeEventListener("focusout", handleFocusOut);
+      if (!disableFocus && !disableFocusRestore && previousActiveElement.current) {
+        previousActiveElement.current.focus();
+      }
+    };
+  }, [
+    isOpen,
+    onClose,
+    closeDisabled,
+    escapeToClose,
+    disableFocus,
+    disableFocusRestore,
+    props["aria-labelledby"]
+  ]);
+  if (!mounted) return null;
+  const contentClass = [
+    "relative flex flex-col items-center justify-start",
+    whitoutBackground ? "bg-transparent" : [
+      "bg-white",
+      "pt-[25px] px-4 pb-[50px]",
+      "min-w-[320px] w-[95vw] max-w-[95vw] max-h-[90vh]",
+      "overflow-y-auto scroll-smooth",
+      "md:pt-[35px] md:px-8 md:pb-[54px] md:max-w-[1000px]"
+    ].join(" "),
+    props.className || ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(Portal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: { zIndex: zIndexLevel },
+        className: [
+          "fixed inset-0 bg-onpe-blue transition-opacity duration-200",
+          visible ? "opacity-80" : "opacity-0"
+        ].join(" "),
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: { zIndex: zIndexLevel + 10 },
+        className: [
+          "fixed top-0 w-full h-screen grid place-items-center",
+          "transition-all duration-200",
+          visible ? "opacity-100 scale-100 translate-y-0" : "opacity-[0.2] scale-95 -translate-y-5"
+        ].join(" "),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative grid place-items-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: modalRef,
+            onClick: (e) => e.stopPropagation(),
+            ...existTabIndex && { tabIndex: disableFocus ? -1 : 0 },
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": props["aria-labelledby"],
+            "aria-describedby": props["aria-describedby"],
+            "aria-label": props["aria-label"],
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: contentClass, children: cachedChildren }),
+              closeButton && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: onClose,
+                  className: "absolute top-2.5 right-2.5 text-onpe-red cursor-pointer w-4 h-4 border-none bg-transparent p-0 md:w-6 md:h-6",
+                  "aria-label": "Cerrar",
+                  type: "button",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(IconCloseRadius, { "aria-hidden": "true", className: "w-full h-full" })
+                }
+              )
+            ]
+          }
+        ) })
+      }
+    )
+  ] });
+};
+var OnpeIdModal = ({
+  modalUrl,
+  isOpenModal,
+  isOpenLaunchApp,
+  isOnline,
+  onClose,
+  iframeRef,
+  preloadIframeRef,
+  handlePreloadIframeReady,
+  handleModalIframeReady
+}) => {
+  const [isIframeLoaded, setIsIframeLoaded] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    modalUrl && !isOpenModal && isOnline && // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- iframe onLoad es necesario para detección de precarga
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "iframe",
+      {
+        ref: preloadIframeRef,
+        src: modalUrl,
+        className: "hidden",
+        onLoad: handlePreloadIframeReady,
+        title: "Precarga ONPE ID"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Modal,
+      {
+        isOpen: isOpenModal && isOnline,
+        onClose,
+        className: "max-w-custom-673 p-10 relative",
+        closeButton: !isOpenLaunchApp && isIframeLoaded,
+        escapeToClose: false,
+        children: !!modalUrl && isOnline && // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- iframe onLoad es necesario para el flujo de autenticación
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "iframe",
+          {
+            ref: iframeRef,
+            src: modalUrl,
+            onLoad: () => {
+              handleModalIframeReady();
+              setIsIframeLoaded(true);
+            },
+            className: "w-full h-[380px] md:h-[315px]",
+            title: "Aplicativo ONPEID para autenticaci\xF3n y registro"
+          }
+        )
+      }
+    )
+  ] });
+};
+
+exports.OnpeIdModal = OnpeIdModal;
+exports.useIframeCommunication = useIframeCommunication;
+exports.useIframePreload = useIframePreload;
+exports.useModalIframePreload = useModalIframePreload;
+exports.useOnpeIdAuth = useOnpeIdAuth;
+exports.useSendMessageToIframe = useSendMessageToIframe;
+exports.useSocketConnection = useSocketConnection;
+//# sourceMappingURL=hooks.js.map
+//# sourceMappingURL=hooks.js.map