@m4l/components 9.3.25 → 9.3.26

package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.js

@@ -7,15 +7,16 @@ import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
 import { B as Button } from "../../../../mui_extended/Button/Button.js";
 function StepperNextButton(props) {
-  const { label, ...rest } = props;
+  const { label, forceIsMobile, ...rest } = props;
   const { nextStepAction } = useStepperActions();
   const isMobile = useIsMobile();
+  const isMobileForce = forceIsMobile !== void 0 ? forceIsMobile : isMobile;
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
   const handleNext = async () => {
     await nextStepAction();
   };
-  return isMobile ? /* @__PURE__ */ jsx(
+  return isMobileForce ? /* @__PURE__ */ jsx(
     IconButton,
     {
       type: "button",

package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.js

@@ -8,12 +8,13 @@ import { D as DICTIONARY } from "../../../dictionary.js";
 import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
 import { B as Button } from "../../../../mui_extended/Button/Button.js";
 function StepperPrevButton(props) {
-  const { label, ...rest } = props;
+  const { label, forceIsMobile, ...rest } = props;
   const { currentStep } = useStepper((state) => ({
     currentStep: state.currentStep
   }));
   const { host_static_assets, environment_assets } = useEnvironment();
   const isMobile = useIsMobile();
+  const isMobileForce = forceIsMobile !== void 0 ? forceIsMobile : isMobile;
   const { getLabel } = useModuleDictionary();
   const { prevStepAction } = useStepperActions();
   const handlePrev = () => {
@@ -22,7 +23,7 @@ function StepperPrevButton(props) {
   if (currentStep === 0) {
     return null;
   }
-  return isMobile ? /* @__PURE__ */ jsx(
+  return isMobileForce ? /* @__PURE__ */ jsx(
     IconButton,
     {
       type: "button",

package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.js

@@ -1,18 +1,37 @@
 import { jsx } from "react/jsx-runtime";
 import { D as DICTIONARY } from "../../../dictionary.js";
-import { useModuleDictionary } from "@m4l/core";
-import { B as Button } from "../../../../mui_extended/Button/Button.js";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { useIsMobile } from "@m4l/graphics";
+import { p as pathIcons } from "../../../icons.js";
+import { useFormContext } from "react-hook-form";
+import { L as LoadingButton } from "../../../../mui_extended/LoadingButton/LoadingButton.js";
+import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
+import { C as CircularProgress } from "../../../../mui_extended/CircularProgress/CircularProgress.js";
 function StepperSubmitButton(props) {
-  const { label, ...rest } = props;
+  const { label, forceIsMobile, ...rest } = props;
   const { getLabel } = useModuleDictionary();
-  return /* @__PURE__ */ jsx(
-    Button,
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const isMobile = useIsMobile();
+  const isMobileForce = forceIsMobile !== void 0 ? forceIsMobile : isMobile;
+  const { formState: { isSubmitting } } = useFormContext();
+  return isMobileForce ? /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      type: "submit",
+      icon: isSubmitting ? /* @__PURE__ */ jsx(CircularProgress, { color: "default" }) : `${host_static_assets}/${environment_assets}/${pathIcons.circleCheck}`,
+      "data-testid": "stepper-prev-button",
+      variant: "contained",
+      color: "primary"
+    }
+  ) : /* @__PURE__ */ jsx(
+    LoadingButton,
     {
       type: "submit",
       label: label || getLabel(DICTIONARY.LABEL_SUBMIT_BUTTON),
       variant: "contained",
       color: "primary",
       "data-testid": "stepper-submit-button",
+      loading: isSubmitting,
       ...rest
     }
   );

package/components/Stepper/subcomponents/StepperContent/subcomponents/Step/hooks/useIsStepVisible.d.ts

@@ -0,0 +1,8 @@
+import { StepProps } from '../../../../../types';
+/**
+ * Hook que determina si un step debe ser visible
+ * Usa useSyncExternalStore para optimizar re-renders:
+ * - Solo re-renderiza el componente si el valor booleano cambia realmente
+ * - Aunque el formulario cambie, si la visibilidad sigue siendo la misma, no re-renderiza
+ */
+export declare function useIsStepVisible(props: Pick<StepProps, 'stepKey'>): boolean;

package/components/Stepper/subcomponents/StepperContent/subcomponents/Step/hooks/useIsStepVisible.js

@@ -0,0 +1,93 @@
+import { useRef, useCallback, useSyncExternalStore } from "react";
+import { u as useStepper } from "../../../../../hooks/useStepper/index.js";
+import { useFormContext } from "react-hook-form";
+import { d as deepShallow } from "../../../../../../../utils/deepShallow.js";
+import { e as evaluateVisibilityStepCondition } from "../../../../../helpers/evaluateVisibilityStepCondition/index.js";
+function calculateStepVisibility(stepKey, steps, currentStep, formValues, visibilityData) {
+  const stepConfig = steps.find((step) => step.key === stepKey);
+  if (!stepConfig) {
+    return false;
+  }
+  const meetsVisibilityCondition = evaluateVisibilityStepCondition(
+    stepConfig,
+    formValues || {},
+    visibilityData || {}
+  );
+  if (!meetsVisibilityCondition) {
+    return false;
+  }
+  const currentStepConfig = steps[currentStep];
+  if (!currentStepConfig) {
+    return false;
+  }
+  if (evaluateVisibilityStepCondition(currentStepConfig, formValues || {}, visibilityData || {})) {
+    return stepKey === currentStepConfig.key;
+  }
+  const visibleStepsUpToCurrent = [];
+  for (let i = 0; i <= currentStep; i++) {
+    const step = steps[i];
+    if (evaluateVisibilityStepCondition(step, formValues || {}, visibilityData || {})) {
+      visibleStepsUpToCurrent.push(step);
+    }
+  }
+  if (visibleStepsUpToCurrent.length === 0) {
+    for (let i = currentStep + 1; i < steps.length; i++) {
+      const step = steps[i];
+      if (evaluateVisibilityStepCondition(step, formValues || {}, visibilityData || {})) {
+        return stepKey === step.key;
+      }
+    }
+    return false;
+  }
+  const activeVisibleStep = visibleStepsUpToCurrent[visibleStepsUpToCurrent.length - 1];
+  return stepKey === activeVisibleStep.key;
+}
+function useIsStepVisible(props) {
+  const { stepKey } = props;
+  const formContext = useFormContext();
+  const { currentStep, steps, visibilityData } = useStepper((state) => ({
+    currentStep: state.currentStep,
+    steps: state.steps,
+    visibilityData: state.visibilityData
+  }), deepShallow);
+  const previousValueRef = useRef(null);
+  const listenersRef = useRef(/* @__PURE__ */ new Set());
+  const subscribe = useCallback((callback) => {
+    listenersRef.current.add(callback);
+    const { unsubscribe } = formContext.watch((formValues) => {
+      const newValue = calculateStepVisibility(
+        stepKey,
+        steps,
+        currentStep,
+        formValues,
+        visibilityData
+      );
+      if (newValue !== previousValueRef.current) {
+        previousValueRef.current = newValue;
+        listenersRef.current.forEach((listener) => listener());
+      }
+    });
+    return () => {
+      listenersRef.current.delete(callback);
+      unsubscribe();
+    };
+  }, [formContext, stepKey, steps, currentStep, visibilityData]);
+  const getSnapshot = useCallback(() => {
+    const formValues = formContext.getValues();
+    const value = calculateStepVisibility(
+      stepKey,
+      steps,
+      currentStep,
+      formValues,
+      visibilityData
+    );
+    if (previousValueRef.current === null) {
+      previousValueRef.current = value;
+    }
+    return value;
+  }, [formContext, stepKey, steps, currentStep, visibilityData]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+export {
+  useIsStepVisible as u
+};

package/components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.js

@@ -1,58 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { u as useStepper } from "../../../../hooks/useStepper/index.js";
-import { useWatch } from "react-hook-form";
 import { j as StepContentStyled } from "../../../../slots/StepperSlot.js";
-import { e as evaluateVisibilityStepCondition } from "../../../../helpers/evaluateVisibilityStepCondition/index.js";
+import { u as useIsStepVisible } from "./hooks/useIsStepVisible.js";
 function Step(props) {
   const { stepKey, children } = props;
-  const formValues = useWatch();
-  const { currentStep, steps, visibilityData } = useStepper((state) => ({
-    currentStep: state.currentStep,
-    steps: state.steps,
-    visibilityData: state.visibilityData
-  }));
-  const stepConfig = useMemo(() => {
-    return steps.find((step) => step.key === stepKey);
-  }, [steps, stepKey]);
-  const isStepVisible = useMemo(() => {
-    if (!stepConfig) {
-      return false;
-    }
-    const meetsVisibilityCondition = evaluateVisibilityStepCondition(
-      stepConfig,
-      formValues || {},
-      visibilityData
-    );
-    if (!meetsVisibilityCondition) {
-      return false;
-    }
-    const currentStepConfig = steps[currentStep];
-    if (!currentStepConfig) {
-      return false;
-    }
-    if (evaluateVisibilityStepCondition(currentStepConfig, formValues || {}, visibilityData)) {
-      return stepKey === currentStepConfig.key;
-    }
-    const visibleStepsUpToCurrent = [];
-    for (let i = 0; i <= currentStep; i++) {
-      const step = steps[i];
-      if (evaluateVisibilityStepCondition(step, formValues || {}, visibilityData)) {
-        visibleStepsUpToCurrent.push(step);
-      }
-    }
-    if (visibleStepsUpToCurrent.length === 0) {
-      for (let i = currentStep + 1; i < steps.length; i++) {
-        const step = steps[i];
-        if (evaluateVisibilityStepCondition(step, formValues || {}, visibilityData)) {
-          return stepKey === step.key;
-        }
-      }
-      return false;
-    }
-    const activeVisibleStep = visibleStepsUpToCurrent[visibleStepsUpToCurrent.length - 1];
-    return stepKey === activeVisibleStep.key;
-  }, [currentStep, stepKey, stepConfig, steps, formValues, visibilityData]);
+  const isStepVisible = useIsStepVisible({ stepKey });
   return /* @__PURE__ */ jsx(StepContentStyled, { ownerState: { isStepVisible }, children });
 }
 export {

package/components/Stepper/types.d.ts

@@ -150,6 +150,10 @@ export interface StepperFooterLeftActionsProps {
  * Props para los botones del Stepper que extienden las props de Button de mui_extended
  */
 export interface StepperButtonProps extends Omit<ButtonProps, 'label'> {
+    /**
+     * Forzar a un una versión especifica no importando el dispositivo
+     */
+    forceIsMobile?: boolean;
     label?: string;
 }
 /**

package/components/ToastContainer/ToastContainer.js

@@ -28,6 +28,7 @@ const ToastContainer = (props) => {
             icon: false,
             closeButton: false,
             autoClose: DEFAULT_CLOSE_TIME,
+            position: "bottom-left",
             theme: "light",
             ...restProps
           }

package/components/ToastContainer/constants.d.ts

@@ -1,5 +1,5 @@
 export declare const TOAST_KEY_COMPONENT = "M4LToastContainer";
-export declare const DEFAULT_CLOSE_TIME = 30000;
+export declare const DEFAULT_CLOSE_TIME = 10000;
 export declare const ICONS_PATH = "frontend/components/toast/assets/icons";
 export declare const TOAST_NATIVE_STYLES: {
     '&': {

package/components/ToastContainer/constants.js

@@ -1,5 +1,5 @@
 const TOAST_KEY_COMPONENT = "M4LToastContainer";
-const DEFAULT_CLOSE_TIME = 3e4;
+const DEFAULT_CLOSE_TIME = 1e4;
 const ICONS_PATH = "frontend/components/toast/assets/icons";
 const TOAST_NATIVE_STYLES = {
   "&": {

package/components/WindowBase/contexts/WindowToolsMFContext/WindowToolsMFContext.js

@@ -1,9 +1,53 @@
 import { jsx } from "react/jsx-runtime";
-import React, { createContext } from "react";
+import React, { createContext, useMemo } from "react";
 const WindowToolsMFContext = createContext(null);
 function WindowToolsMFProvider(props) {
-  const { children, ...other } = props;
-  return /* @__PURE__ */ jsx(WindowToolsMFContext.Provider, { value: { ...other }, children });
+  const {
+    children,
+    getCookie,
+    getWindowId,
+    getCookies,
+    setActions,
+    setCookie,
+    startProgress,
+    stopProgress,
+    toast,
+    close,
+    setFnQueryClose,
+    setWindowTitle,
+    setWindowSubTitle,
+    setWindowEditionInfo
+  } = props;
+  const value = useMemo(() => ({
+    getCookie,
+    getWindowId,
+    getCookies,
+    setActions,
+    setCookie,
+    startProgress,
+    stopProgress,
+    toast,
+    close,
+    setFnQueryClose,
+    setWindowTitle,
+    setWindowSubTitle,
+    setWindowEditionInfo
+  }), [
+    getCookie,
+    getWindowId,
+    getCookies,
+    setActions,
+    setCookie,
+    startProgress,
+    stopProgress,
+    toast,
+    close,
+    setFnQueryClose,
+    setWindowTitle,
+    setWindowSubTitle,
+    setWindowEditionInfo
+  ]);
+  return /* @__PURE__ */ jsx(WindowToolsMFContext.Provider, { value, children });
 }
 const MemonizedWindowToolsMFContext = React.memo(WindowToolsMFProvider);
 export {

package/components/WindowBase/contexts/WindowToolsMFContext/types.d.ts

@@ -53,7 +53,7 @@ export interface WindowToolsMF {
     /**
      * Método para cerrar la ventana actual.
      */
-    close: () => void;
+    close: (useFnQueryClose?: boolean) => void;
     /**
      * Método para establecer la función de consulta de cierre de la ventana.
      * @param fnQueryClose La función de consulta de cierre de la ventana que se desea establecer.

package/components/WindowBase/subcomponents/Component/index.d.ts

@@ -1,7 +1,18 @@
 import { default as React } from 'react';
 import { ComponentProps } from './types';
 /**
- * Componente encargado de renderizar el componente de la ventana.
+ * Componente encargado de renderizar el componente de la ventana con transición y loader.
+ * Usa useTransition para priorizar el loader y mantener la UI responsive durante el renderizado pesado.
+ *
+ * ## Flujo de renderizado:
+ * 1. Monta con shouldRender=false, isPending=false → muestra nada (o loader inicial)
+ * 2. useEffect ejecuta: startTransition(() => setShouldRender(true))
+ * 3. React marca la actualización como "no urgente" e inmediatamente isPending=true → muestra loader
+ * 4. React procesa el cambio de shouldRender: useMemo se re-ejecuta y crea el componente pesado
+ * 5. Cuando termina TODO el trabajo de render: isPending=false → muestra componente con fade in
+ *
+ * La clave es que React mantiene isPending=true durante TODO el tiempo que tarde en procesar
+ * la actualización de estado y el render que causa (incluyendo el useMemo pesado).
  */
 export declare const WindowBaseComponent: (props: ComponentProps) => import("react/jsx-runtime").JSX.Element;
 export declare const MemonizedComponent: React.MemoExoticComponent<(props: ComponentProps) => import("react/jsx-runtime").JSX.Element>;

package/components/WindowBase/subcomponents/Component/index.js

@@ -1,11 +1,65 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React, { useTransition, useState, useRef, useMemo, createElement, useEffect } from "react";
 import { a as WindowContainerComponentStyled } from "../../slots/WindowBaseSlots.js";
+import { P as PropagateLoaderSpinner } from "../../../extended/React-Spinners/PropagateLoaderSpinner/PropagateLoaderSpinner.js";
 import { a as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/WindowToolsMFContext.js";
 import { a as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
 const WindowBaseComponent = (props) => {
   const { component, dynamicMFStore, windowTools, componentProps, emergeType } = props;
-  return /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx(WindowContainerComponentStyled, { ownerState: { emergeType }, children: typeof component === "function" ? component(componentProps) : component }) }) });
+  const [isPending, startTransition] = useTransition();
+  const [shouldRender, setShouldRender] = useState(false);
+  const mountTimeRef = useRef(performance.now());
+  const renderedComponent = useMemo(() => {
+    if (!shouldRender) {
+      return null;
+    }
+    const renderStartTime = performance.now();
+    const component_result = typeof component === "function" ? createElement(component, componentProps) : component;
+    const renderTime = performance.now() - renderStartTime;
+    if (process.env.NODE_ENV === "development" && renderTime > 100) {
+      console.warn(`⚠️ WindowBase component rendering took ${renderTime.toFixed(2)}ms`);
+    }
+    return component_result;
+  }, [shouldRender, component, componentProps]);
+  useEffect(() => {
+    startTransition(() => {
+      setShouldRender(true);
+    });
+    const timer = setTimeout(() => {
+      const totalTime = performance.now() - mountTimeRef.current;
+      if (process.env.NODE_ENV === "development" && totalTime > 500) {
+        console.warn(`⏱️ WindowBase total mount time: ${totalTime.toFixed(2)}ms`);
+      }
+    }, 0);
+    return () => clearTimeout(timer);
+  }, []);
+  return /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx(
+    WindowContainerComponentStyled,
+    {
+      ownerState: { emergeType },
+      children: isPending ? (
+        // Mientras isPending=true, mostrar solo el loader
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              width: "100%",
+              height: "100%",
+              zIndex: 1e3
+            },
+            children: /* @__PURE__ */ jsx(PropagateLoaderSpinner, {})
+          }
+        )
+      ) : (
+        // Cuando isPending=false, mostrar componente con fade in
+        renderedComponent
+      )
+    }
+  ) }) });
 };
 React.memo(WindowBaseComponent);
 export {

package/components/WindowBase/subcomponents/Component/types.d.ts

@@ -3,6 +3,7 @@ import { DynamicMFStore } from '../../contexts/DynamicMFParmsContext/store';
 import { JSX_REACT_NODE } from '../../../WindowBase/types';
 import { EmergeType } from '../../../areas/types';
 export interface ComponentProps {
+    id: string;
     emergeType: EmergeType;
     windowTools: WindowToolsMF;
     dynamicMFStore: DynamicMFStore;

package/components/WindowBase/types.d.ts

@@ -16,7 +16,7 @@ export type WindowOptions = {
      */
     allowPersistCookies: boolean;
 };
-export type JSX_REACT_NODE = ((props?: any) => JSX.Element) | ReactNode;
+export type JSX_REACT_NODE = ((props?: any) => JSX.Element) | JSX.Element;
 /**
  * Tipo que representa el tipo de ventana: microfrontend o componente.
  */

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/Window.js

@@ -90,6 +90,7 @@ const Window = (props) => {
       ) : /* @__PURE__ */ jsx(
         WindowBaseComponent,
         {
+          id: windowId,
           emergeType,
           dynamicMFStore,
           windowTools,

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useWindow.js

@@ -68,7 +68,7 @@ const useWindow = (windowId, areaId) => {
       getCookie: (id) => getCookie(windowId, id),
       getCookies: (type) => getCookies(windowId, type),
       setCookie: (id, type, cookie) => setCookie(windowId, id, type, cookie),
-      close: () => close(windowId),
+      close: (useFnQueryClose = true) => close(windowId, useFnQueryClose),
       startProgress: () => startProgress(windowId),
       stopProgress: () => stopProgress(windowId),
       setFnQueryClose: (fnQueryClose) => setFnQueryClose(windowId, fnQueryClose),

package/components/areas/contexts/AreasContext/store.js

@@ -441,8 +441,8 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
                   bounds: {
                     left: MARGIN_GRIDLAYOUT,
                     top: MARGIN_GRIDLAYOUT,
-                    right: -MARGIN_GRIDLAYOUT,
-                    bottom: -MARGIN_GRIDLAYOUT
+                    right: -10,
+                    bottom: -10
                   }
                 });
               }
@@ -721,9 +721,13 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
           /**
            * close window
            */
-          close: (windowId) => {
+          close: (windowId, useFnQueryClose = true) => {
             const hW = get().hashWindows[windowId];
             if (hW) {
+              if (hW.fnQueryClose && useFnQueryClose) {
+                hW.fnQueryClose();
+                return;
+              }
               const onClose = hW.onClose;
               if (onClose) {
                 onClose(hW.windowId);

package/components/areas/contexts/AreasContext/types.d.ts

@@ -285,7 +285,7 @@ export interface AreasStoreStateWithActions extends AreasStoreState {
         getCookie: (windowId: string, id: string) => Record<string, any> | undefined;
         getCookies: (windowId: string, type: CookieType) => Record<string, any>;
         setCookie: (windowId: string, id: string, type: CookieType, cookie: Record<string, any>) => void;
-        close: (windowId: string) => void;
+        close: (windowId: string, useFnQueryClose?: boolean) => void;
         startProgress: (windowId: string) => void;
         stopProgress: (windowId: string) => void;
         loadCookiesFromApi: (windowId: string) => void;

package/components/hook-form/RHFormContext/index.d.ts

@@ -3,7 +3,7 @@ import { CustomFormArguments, FormProviderCustomProps, FormProviderProps } from
 /**
  * TODO: Documentar
  */
-export declare function useCustomForm({ validationSchema, values, statusLoad, mode, }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
+export declare function useCustomForm({ validationSchema, values, statusLoad, mode, }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, undefined>;
 /**
  * TODO: Documentar
  */

package/components/hook-form/RHFormContext/styles.js

@@ -1,7 +1,8 @@
 import { styled } from "@mui/material";
 const FormProviderRoot = styled("form")(({ theme }) => ({
   ...theme.components?.M4LRHFormProvider?.styleOverrides || {},
-  width: "100%"
+  width: "100%",
+  overflow: "hidden"
 }));
 export {
   FormProviderRoot as F

package/components/mui_extended/CircularProgress/types.d.ts

@@ -17,7 +17,7 @@ export interface CircularProgressProps extends Omit<MUICircularProgressProps, 'c
      * Este debe ser un valor de la paleta de colores personalizada (`ComponentPalletColor`),
      * restringido actualmente al color `primary`.
      */
-    color?: Extract<ComponentPalletColor, 'primary'>;
+    color?: ComponentPalletColor;
     /**
      * Tamaño del componente.
      * Solo se aceptan los valores `small` y `medium`, que representan tamaños predefinidos.

package/components/popups/components/PopupsProvider/contexts/PopupsContext/store.js

@@ -262,10 +262,14 @@ const createPopupsStore = (initProps, storeDevtoolsEnabled = false) => {
           /**
            * closePopup: Cierra un popup
            */
-          close: (popupId) => {
+          close: (popupId, useFnQueryClose = true) => {
             if (!get().hashPopups[popupId]) {
               return;
             }
+            if (get().hashPopups[popupId].fnQueryClose && useFnQueryClose) {
+              get().hashPopups[popupId].fnQueryClose?.();
+              return;
+            }
             set((state) => {
               state.hashPopups[popupId].status = "closing";
             });

package/components/popups/components/PopupsProvider/contexts/PopupsContext/types.d.ts

@@ -296,7 +296,7 @@ export interface PopupsProviderStoreStateWithActions extends PopupsProviderStore
         /**
          * pasa el status a closing para que las las transiciones se ejecuten.
          */
-        close: (popupId: string) => void;
+        close: (popupId: string, useFnQueryClose?: boolean) => void;
         /**
          * Modifica un popup espeficio
          */

package/components/popups/components/PopupsProvider/hooks/usePopups.d.ts

@@ -5,9 +5,6 @@ import { WindowToolsMF } from '../../../../WindowBase/contexts';
  * Este hook encapsula la lógica relacionada con el estado y las funciones necesarias
  * para el componente Popup. Retorna un objeto con el estado, las acciones y las herramientas
  * de la ventana popup.
- * @param {string} areaId - Identificador del área.
- * @param {string} popupId - Identificador del popup.
- * @returns {Object} Objeto con estado, acciones y herramientas del popup.
  */
 export declare const usePopups: (popupId: string) => {
     winType: "component" | "microfrontend";
@@ -17,7 +14,8 @@ export declare const usePopups: (popupId: string) => {
     iconUrl: string;
     selected: boolean;
     mfProps: import('../../../../MFLoader/types').MFBaseProps | undefined;
-    component: import('../../../../WindowBase').JSX_REACT_NODE;
+    component: import('../../../../WindowBase').JSX_REACT_NODE | undefined;
+    componentProps: Record<string, any> | undefined;
     loading: boolean | undefined;
     status: import('../../PopupsViewer/types').PopupStatus;
     version: string | undefined;