@votodigital-onpeui/react 0.1.31 → 0.1.36

package/dist/index.mjs

@@ -1,9 +1,9 @@
-export { BrowserRecommended, Footer, ModalBrowserIncompatible, ModalDnieVersions, ModalNfc, ModalSystemIncompatible, NotRecommended, Overlay, Show } from './chunk-MFNWIYOJ.mjs';
-export { OnpeIdModal, useIframeCommunication, useIframePreload, useModalIframePreload, useOnpeIdAuth, useSendMessageToIframe, useSocketConnection } from './chunk-6RNDTVIJ.mjs';
+export { BrowserRecommended, Footer, ModalBrowserIncompatible, ModalDnieVersions, ModalNfc, ModalSystemIncompatible, NotRecommended, Overlay, Show } from './chunk-4VUH3WMT.mjs';
+export { OnpeIdModal, useIframeCommunication, useIframePreload, useModalIframePreload, useOnpeIdAuth, useSendMessageToIframe, useSocketConnection } from './chunk-6FILBCCN.mjs';
 import './chunk-KWOWOGBU.mjs';
-export { Button, ModalConfirm, ModalLoading } from './chunk-UGIZ3K3S.mjs';
+export { Button, ModalConfirm, ModalLoading } from './chunk-52VIQAQL.mjs';
 export { FaceBookIcon, IconAndroid, IconApple, IconCheck, IconChrome, IconChromeColor, IconClose, IconEdge, IconEdgeColor, IconElectionsGeneral, IconElectionsRegionalesYMunicipales, IconHome, IconHuawei, IconInfo, IconLogoONPE, IconMozilla, IconMozillaColor, IconPhone, IconQuestion, IconSafari, IconSafariColor, IconSpinnerDesktop, IconSpinnerMobile, IconVotoDigital, IconWarning, IconWarningNotRecommended, IconWindow, InstagramIcon, TikTokIcon, WhatsappIcon, XIcon, YoutubeIcon } from './chunk-M2KQXQLY.mjs';
-export { Modal, Portal } from './chunk-4XHWFUHC.mjs';
+export { Modal, Portal } from './chunk-FV3GKV22.mjs';
 export { IconCloseRadius } from './chunk-5FNWA3QC.mjs';
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/modal.d.mts

@@ -17,8 +17,12 @@ interface ModalGlobalProviderProps {
     preventBodyScroll?: boolean;
     /** Spinner personalizado para ModalLoading. Si no se provee, se usa el spinner por defecto. */
     loadingSpinner?: ReactNode;
+    /** Alinea el ModalLoadingPercentage al tope de la pantalla (default: false) */
+    loadingPercentageAlignTop?: boolean;
+    /** Reemplaza el contenido del ModalLoadingPercentage con un render personalizado */
+    loadingPercentageContent?: (percentage: number, message: string) => ReactNode;
 }
-declare const ModalGlobalProvider: ({ children, zIndexLevel, zIndexLoading, zIndexLoadingPercentage, animated, preventBodyScroll, loadingSpinner, }: ModalGlobalProviderProps) => react_jsx_runtime.JSX.Element;
+declare const ModalGlobalProvider: ({ children, zIndexLevel, zIndexLoading, zIndexLoadingPercentage, animated, preventBodyScroll, loadingSpinner, loadingPercentageAlignTop, loadingPercentageContent, }: ModalGlobalProviderProps) => react_jsx_runtime.JSX.Element;
 
 type ModalResult = "confirm" | "cancel" | "close";
 /**
@@ -91,8 +95,9 @@ declare const useModalGlobalStore: zustand.UseBoundStore<zustand.StoreApi<ModalG
 interface ModalLoadingState {
     isOpen: boolean;
     message: string;
-    openLoading: (message?: string) => void;
-    closeLoading: () => void;
+    sessionId: number;
+    openLoading: (message?: string) => number;
+    closeLoading: (sessionId?: number) => void;
 }
 declare const useModalLoadingStore: zustand.UseBoundStore<zustand.StoreApi<ModalLoadingState>>;
 
@@ -100,9 +105,11 @@ interface ModalLoadingPercentageState {
     isOpen: boolean;
     message: string;
     percentage: number;
-    openLoadingPercentage: (message?: string) => void;
-    updatePercentage: (percentage: number) => void;
-    closeLoadingPercentage: () => void;
+    /** ID de sesión actual — se incrementa en cada apertura */
+    sessionId: number;
+    openLoadingPercentage: (message?: string, initialPercentage?: number) => number;
+    updatePercentage: (percentage: number, sessionId?: number) => void;
+    closeLoadingPercentage: (sessionId?: number) => void;
 }
 declare const useModalLoadingPercentageStore: zustand.UseBoundStore<zustand.StoreApi<ModalLoadingPercentageState>>;
 
@@ -171,9 +178,9 @@ declare const isAlreadyHandled: () => boolean;
  * await api.save(data);
  * closeGlobalLoading();
  */
-declare const showGlobalLoading: (message?: string) => void;
-/** Close the global loading modal. */
-declare const closeGlobalLoading: () => void;
+declare const showGlobalLoading: (message?: string) => number;
+/** Close the global loading modal. If sessionId is provided, only closes if it matches. */
+declare const closeGlobalLoading: (sessionId?: number) => void;
 /** Returns true if the global loading modal is currently visible. */
 declare const isGlobalLoadingOpen: () => boolean;
 /**
@@ -187,11 +194,17 @@ declare const isGlobalLoadingOpen: () => boolean;
  * }
  * closeGlobalLoadingPercentage();
  */
-declare const showGlobalLoadingPercentage: (message?: string) => void;
-/** Update the percentage value (0–100). Clamped automatically. */
-declare const updateGlobalLoadingPercentage: (percentage: number) => void;
-/** Close the global loading percentage modal. */
-declare const closeGlobalLoadingPercentage: () => void;
+/**
+ * Abre el modal de loading con porcentaje. Retorna un sessionId para evitar
+ * interferencias si se abre otro modal del mismo tipo antes de cerrar el actual.
+ * Pasar el sessionId a updateGlobalLoadingPercentage y closeGlobalLoadingPercentage
+ * garantiza que solo la instancia activa pueda actualizar o cerrar el modal.
+ */
+declare const showGlobalLoadingPercentage: (message?: string, initialPercentage?: number) => number;
+/** Update the percentage value (0–100). Si se pasa sessionId y no coincide con la sesión activa, se ignora. */
+declare const updateGlobalLoadingPercentage: (percentage: number, sessionId?: number) => void;
+/** Close the global loading percentage modal. Si se pasa sessionId y no coincide con la sesión activa, se ignora. */
+declare const closeGlobalLoadingPercentage: (sessionId?: number) => void;
 /** Returns true if the global loading percentage modal is currently visible. */
 declare const isGlobalLoadingPercentageOpen: () => boolean;
 

package/dist/modal.d.ts

@@ -17,8 +17,12 @@ interface ModalGlobalProviderProps {
     preventBodyScroll?: boolean;
     /** Spinner personalizado para ModalLoading. Si no se provee, se usa el spinner por defecto. */
     loadingSpinner?: ReactNode;
+    /** Alinea el ModalLoadingPercentage al tope de la pantalla (default: false) */
+    loadingPercentageAlignTop?: boolean;
+    /** Reemplaza el contenido del ModalLoadingPercentage con un render personalizado */
+    loadingPercentageContent?: (percentage: number, message: string) => ReactNode;
 }
-declare const ModalGlobalProvider: ({ children, zIndexLevel, zIndexLoading, zIndexLoadingPercentage, animated, preventBodyScroll, loadingSpinner, }: ModalGlobalProviderProps) => react_jsx_runtime.JSX.Element;
+declare const ModalGlobalProvider: ({ children, zIndexLevel, zIndexLoading, zIndexLoadingPercentage, animated, preventBodyScroll, loadingSpinner, loadingPercentageAlignTop, loadingPercentageContent, }: ModalGlobalProviderProps) => react_jsx_runtime.JSX.Element;
 
 type ModalResult = "confirm" | "cancel" | "close";
 /**
@@ -91,8 +95,9 @@ declare const useModalGlobalStore: zustand.UseBoundStore<zustand.StoreApi<ModalG
 interface ModalLoadingState {
     isOpen: boolean;
     message: string;
-    openLoading: (message?: string) => void;
-    closeLoading: () => void;
+    sessionId: number;
+    openLoading: (message?: string) => number;
+    closeLoading: (sessionId?: number) => void;
 }
 declare const useModalLoadingStore: zustand.UseBoundStore<zustand.StoreApi<ModalLoadingState>>;
 
@@ -100,9 +105,11 @@ interface ModalLoadingPercentageState {
     isOpen: boolean;
     message: string;
     percentage: number;
-    openLoadingPercentage: (message?: string) => void;
-    updatePercentage: (percentage: number) => void;
-    closeLoadingPercentage: () => void;
+    /** ID de sesión actual — se incrementa en cada apertura */
+    sessionId: number;
+    openLoadingPercentage: (message?: string, initialPercentage?: number) => number;
+    updatePercentage: (percentage: number, sessionId?: number) => void;
+    closeLoadingPercentage: (sessionId?: number) => void;
 }
 declare const useModalLoadingPercentageStore: zustand.UseBoundStore<zustand.StoreApi<ModalLoadingPercentageState>>;
 
@@ -171,9 +178,9 @@ declare const isAlreadyHandled: () => boolean;
  * await api.save(data);
  * closeGlobalLoading();
  */
-declare const showGlobalLoading: (message?: string) => void;
-/** Close the global loading modal. */
-declare const closeGlobalLoading: () => void;
+declare const showGlobalLoading: (message?: string) => number;
+/** Close the global loading modal. If sessionId is provided, only closes if it matches. */
+declare const closeGlobalLoading: (sessionId?: number) => void;
 /** Returns true if the global loading modal is currently visible. */
 declare const isGlobalLoadingOpen: () => boolean;
 /**
@@ -187,11 +194,17 @@ declare const isGlobalLoadingOpen: () => boolean;
  * }
  * closeGlobalLoadingPercentage();
  */
-declare const showGlobalLoadingPercentage: (message?: string) => void;
-/** Update the percentage value (0–100). Clamped automatically. */
-declare const updateGlobalLoadingPercentage: (percentage: number) => void;
-/** Close the global loading percentage modal. */
-declare const closeGlobalLoadingPercentage: () => void;
+/**
+ * Abre el modal de loading con porcentaje. Retorna un sessionId para evitar
+ * interferencias si se abre otro modal del mismo tipo antes de cerrar el actual.
+ * Pasar el sessionId a updateGlobalLoadingPercentage y closeGlobalLoadingPercentage
+ * garantiza que solo la instancia activa pueda actualizar o cerrar el modal.
+ */
+declare const showGlobalLoadingPercentage: (message?: string, initialPercentage?: number) => number;
+/** Update the percentage value (0–100). Si se pasa sessionId y no coincide con la sesión activa, se ignora. */
+declare const updateGlobalLoadingPercentage: (percentage: number, sessionId?: number) => void;
+/** Close the global loading percentage modal. Si se pasa sessionId y no coincide con la sesión activa, se ignora. */
+declare const closeGlobalLoadingPercentage: (sessionId?: number) => void;
 /** Returns true if the global loading percentage modal is currently visible. */
 declare const isGlobalLoadingPercentageOpen: () => boolean;
 

package/dist/modal.js

@@ -50,19 +50,38 @@ var useModalGlobalStore = zustand.create((set, get) => ({
     set({ isOpen: false, payload: null, isTriState: false, _resolve: null, _resolveWithClose: null });
   }
 }));
-var useModalLoadingStore = zustand.create((set) => ({
+var useModalLoadingStore = zustand.create((set, get) => ({
   isOpen: false,
   message: "Cargando...",
-  openLoading: (message = "Cargando...") => set({ isOpen: true, message }),
-  closeLoading: () => set({ isOpen: false, message: "Cargando..." })
+  sessionId: 0,
+  openLoading: (message = "Cargando...") => {
+    const nextId = get().sessionId + 1;
+    set({ isOpen: true, message, sessionId: nextId });
+    return nextId;
+  },
+  closeLoading: (sessionId) => {
+    if (sessionId !== void 0 && sessionId !== get().sessionId) return;
+    set({ isOpen: false, message: "Cargando..." });
+  }
 }));
-var useModalLoadingPercentageStore = zustand.create((set) => ({
+var useModalLoadingPercentageStore = zustand.create((set, get) => ({
   isOpen: false,
   message: "Cargando...",
   percentage: 0,
-  openLoadingPercentage: (message = "Cargando...") => set({ isOpen: true, message, percentage: 0 }),
-  updatePercentage: (percentage) => set({ percentage: Math.min(100, Math.max(0, percentage)) }),
-  closeLoadingPercentage: () => set({ isOpen: false, message: "Cargando...", percentage: 0 })
+  sessionId: 0,
+  openLoadingPercentage: (message = "Cargando...", initialPercentage = 0) => {
+    const nextId = get().sessionId + 1;
+    set({ isOpen: true, message, percentage: Math.min(100, Math.max(0, initialPercentage)), sessionId: nextId });
+    return nextId;
+  },
+  updatePercentage: (percentage, sessionId) => {
+    if (sessionId !== void 0 && sessionId !== get().sessionId) return;
+    set({ percentage: Math.min(100, Math.max(0, percentage)) });
+  },
+  closeLoadingPercentage: (sessionId) => {
+    if (sessionId !== void 0 && sessionId !== get().sessionId) return;
+    set({ isOpen: false, message: "Cargando...", percentage: 0 });
+  }
 }));
 var Portal = ({ children, container }) => {
   const [mounted, setMounted] = react.useState(false);
@@ -117,6 +136,7 @@ var Modal = ({
     }
   }, [isOpen, children]);
   react.useEffect(() => {
+    if (!animated) return;
     if (isOpen) {
       setMounted(true);
       const raf = requestAnimationFrame(() => {
@@ -131,7 +151,7 @@ var Modal = ({
       }, 200);
       return () => clearTimeout(timer);
     }
-  }, [isOpen, onCloseComplete]);
+  }, [isOpen, animated, onCloseComplete]);
   react.useEffect(() => {
     if (!preventBodyScroll) return;
     if (isOpen) {
@@ -336,7 +356,8 @@ var Modal = ({
     disableFocusRestore,
     ariaLabelledBy
   ]);
-  if (!mounted) return null;
+  if (!animated && !isOpen) return null;
+  if (animated && !mounted) return null;
   const contentClass = [
     "relative flex flex-col items-center justify-start",
     whitoutBackground ? "bg-transparent" : [
@@ -383,7 +404,7 @@ var Modal = ({
             "aria-describedby": props["aria-describedby"],
             "aria-label": props["aria-label"],
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: contentClass, children: cachedChildren }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: contentClass, children: isOpen ? children : cachedChildren }),
               closeButton && /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
@@ -604,14 +625,21 @@ var ModalConfirm = ({
             children: title
           }
         ),
-        effectiveMessage && /* @__PURE__ */ jsxRuntime.jsx(
+        effectiveMessage && (typeof effectiveMessage === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            id: messageId,
+            className: `mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? "text-justify" : "text-center"}`,
+            dangerouslySetInnerHTML: { __html: effectiveMessage }
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             id: messageId,
             className: `mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? "text-justify" : "text-center"}`,
             children: effectiveMessage
           }
-        ),
+        )),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center w-full gap-5 mt-11 md:hidden", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Button,
@@ -724,7 +752,9 @@ var ModalLoadingPercentage = ({
   percentage,
   zIndexLevel = 300,
   animated = true,
-  preventBodyScroll = true
+  preventBodyScroll = true,
+  alignTop = false,
+  renderContent
 }) => {
   const clamped = Math.min(100, Math.max(0, percentage));
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -739,7 +769,8 @@ var ModalLoadingPercentage = ({
       zIndexLevel,
       animated,
       preventBodyScroll,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-6 px-4 w-full max-w-xs md:max-w-sm", children: [
+      alignTop,
+      children: renderContent ? renderContent(clamped, message) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-6 px-4 w-full max-w-xs md:max-w-sm", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-white text-5xl md:text-[80px] font-semibold leading-none", children: [
           clamped,
           "%"
@@ -768,15 +799,21 @@ var ModalGlobalProvider = ({
   zIndexLoadingPercentage = 300,
   animated = true,
   preventBodyScroll = true,
-  loadingSpinner
+  loadingSpinner,
+  loadingPercentageAlignTop = false,
+  loadingPercentageContent
 }) => {
-  const { isOpen, payload, modalId, isTriState, closeModal, closeModalWithResult } = useModalGlobalStore();
-  const { isOpen: isLoadingOpen, message: loadingMessage } = useModalLoadingStore();
-  const {
-    isOpen: isPercentageOpen,
-    message: percentageMessage,
-    percentage
-  } = useModalLoadingPercentageStore();
+  const isOpen = useModalGlobalStore((s) => s.isOpen);
+  const payload = useModalGlobalStore((s) => s.payload);
+  const modalId = useModalGlobalStore((s) => s.modalId);
+  const isTriState = useModalGlobalStore((s) => s.isTriState);
+  const closeModal = useModalGlobalStore((s) => s.closeModal);
+  const closeModalWithResult = useModalGlobalStore((s) => s.closeModalWithResult);
+  const isLoadingOpen = useModalLoadingStore((s) => s.isOpen);
+  const loadingMessage = useModalLoadingStore((s) => s.message);
+  const isPercentageOpen = useModalLoadingPercentageStore((s) => s.isOpen);
+  const percentageMessage = useModalLoadingPercentageStore((s) => s.message);
+  const percentage = useModalLoadingPercentageStore((s) => s.percentage);
   react.useEffect(() => {
     if (!isOpen || !payload?.autoConfirmTimeout) return;
     const timerId = setTimeout(async () => {
@@ -838,24 +875,40 @@ var ModalGlobalProvider = ({
         percentage,
         zIndexLevel: zIndexLoadingPercentage,
         animated,
-        preventBodyScroll
+        preventBodyScroll,
+        alignTop: loadingPercentageAlignTop,
+        renderContent: loadingPercentageContent
       }
     )
   ] });
 };
 
 // src/utils/showGlobalModal.ts
-var showGlobalModal = (payload) => useModalGlobalStore.getState().openModal(payload);
-var showGlobalModalWithClose = (payload) => useModalGlobalStore.getState().openModalWithClose(payload);
+var showGlobalModal = (payload) => {
+  useModalLoadingStore.getState().closeLoading();
+  useModalLoadingPercentageStore.getState().closeLoadingPercentage();
+  return useModalGlobalStore.getState().openModal(payload);
+};
+var showGlobalModalWithClose = (payload) => {
+  useModalLoadingStore.getState().closeLoading();
+  useModalLoadingPercentageStore.getState().closeLoadingPercentage();
+  return useModalGlobalStore.getState().openModalWithClose(payload);
+};
 var closeGlobalModal = () => useModalGlobalStore.getState().closeModal(false);
 var isGlobalModalOpen = () => useModalGlobalStore.getState().isOpen;
 var isAlreadyHandled = () => useModalGlobalStore.getState().payload?.alreadyHandled ?? false;
-var showGlobalLoading = (message) => useModalLoadingStore.getState().openLoading(message);
-var closeGlobalLoading = () => useModalLoadingStore.getState().closeLoading();
+var showGlobalLoading = (message) => {
+  useModalLoadingPercentageStore.getState().closeLoadingPercentage();
+  return useModalLoadingStore.getState().openLoading(message);
+};
+var closeGlobalLoading = (sessionId) => useModalLoadingStore.getState().closeLoading(sessionId);
 var isGlobalLoadingOpen = () => useModalLoadingStore.getState().isOpen;
-var showGlobalLoadingPercentage = (message) => useModalLoadingPercentageStore.getState().openLoadingPercentage(message);
-var updateGlobalLoadingPercentage = (percentage) => useModalLoadingPercentageStore.getState().updatePercentage(percentage);
-var closeGlobalLoadingPercentage = () => useModalLoadingPercentageStore.getState().closeLoadingPercentage();
+var showGlobalLoadingPercentage = (message, initialPercentage) => {
+  useModalLoadingStore.getState().closeLoading();
+  return useModalLoadingPercentageStore.getState().openLoadingPercentage(message, initialPercentage);
+};
+var updateGlobalLoadingPercentage = (percentage, sessionId) => useModalLoadingPercentageStore.getState().updatePercentage(percentage, sessionId);
+var closeGlobalLoadingPercentage = (sessionId) => useModalLoadingPercentageStore.getState().closeLoadingPercentage(sessionId);
 var isGlobalLoadingPercentageOpen = () => useModalLoadingPercentageStore.getState().isOpen;
 
 exports.ModalGlobalProvider = ModalGlobalProvider;