@m4l/components 8.2.3 → 9.0.0-beta-1

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

@@ -1,9 +1,21 @@
-import { GetLabelType } from '@m4l/core';
 import { ReactNode } from 'react';
-import { DraggableWindowProps } from '../../../../../DragResizeWindow/types';
+import { DragResizeWindowPropsRND } from '../../../../../DragResizeWindowRND/types';
 import { PopupStatus } from '../../../PopupsViewer/types';
+import { MFBaseProps } from '../../../../../MFLoader/types';
+import { JSX_REACT_NODE, ModuleAction, WindowOptions } from '../../../../../WindowBase/types';
+import { DynamicMFStore } from '../../../../../WindowBase/contexts/DynamicMFParmsContext/store';
 export type PopupVariantType = 'normal' | 'small' | 'large';
-export interface PopupStoreProps extends Pick<DraggableWindowProps, 'bounds' | 'defaultPosition'> {
+type PartialExcept<T, K extends keyof T> = Partial<Omit<T, K>> & Pick<T, K>;
+type PopupSelectedReason = 'add' | 'remove' | 'select';
+export interface PopupStorePropsBase extends PartialExcept<Pick<DragResizeWindowPropsRND, 'bounds' | 'defaultPosition' | 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight' | 'resizable' | 'draggable' | 'allowHeightResizeContainer' | 'allowWidthResizeContainer'>, 'defaultPosition'> {
+    /**
+     * "moduleId" Identificador del módulo, para Microfrontends
+     */
+    moduleId?: string;
+    /**
+     * "winType" Tipo de ventana
+     */
+    winType: 'microfrontend' | 'component';
     /**
      * "popupId" Indetificador del popupId
      */
@@ -13,7 +25,11 @@ export interface PopupStoreProps extends Pick<DraggableWindowProps, 'bounds' | '
      */
     status: PopupStatus;
     /**
-     * "variant" Variante del popup
+     * "windowOptions" Opciones de la ventana
+     */
+    windowOptions?: WindowOptions;
+    /**
+     * "variant" Variante del popup //TODO: Creo que esto es size
      */
     variant?: PopupVariantType;
     /**
@@ -44,25 +60,147 @@ export interface PopupStoreProps extends Pick<DraggableWindowProps, 'bounds' | '
      * "zIndex" Zindex del popup, tener en cuenta que se usa el baseZindex como offset para el zIndex
      */
     zIndex: number;
+    /**
+     * "onMouseDown" Evento nativo del Draggable, para tomar acciones externamente
+     */
+    onMouseDown?: (e: MouseEvent) => void;
+    /**
+     * "loading" Indica si el popup está cargando
+     */
+    loading?: boolean;
+    /**
+     * "moduleActions" Acciones del módulo
+     */
+    moduleActions?: ModuleAction[];
+    /**
+     * "version" Versión de la ventana
+     */
+    version?: string;
+    /**
+     * "fnQueryClose" Función de cierre de la consulta
+     */
+    fnQueryClose?: (...args: any[]) => void;
+    /**
+     * "dynamicMFStore" Almacén de microfrontends din
+     */
+    dynamicMFStore: DynamicMFStore;
+    /**
+     * dynamic params
+     */
+    dynamicParams?: Record<string, any>;
+    /**
+     * "collapsed" Indica si el popup está colapsado
+     */
+    collapsed?: boolean;
+    /**
+     * "maximized" Indica si el popup está maximizado
+     */
+    maximized?: boolean;
+    /**
+     * "groupId" Grupo del popup, si no se especifica, se debe almacenar en el group id "global"
+     */
+    groupId: string;
+    /**
+     * "onRemove" Función de cierre del popup
+     */
+    onRemove?: (id: string) => void;
+    /**
+     * "parentId" es un id que permitira cerrar todos los popups que dependan de él
+     */
+    parentId?: string;
+    /**
+     * "enforceVisibleCount" cuando cambia este valor, el popup se reenfoca con scrollLeft y scrollTop, esto es especialmente util en area cuando
+     * se utiliza replaceMeId para aseguar que el popup que se esta intentando visualizar realmente se vea.
+     */
+    enforceVisibleCount?: number;
+    /**
+     * "onSelectedPopupIdChange" Notifica cuando el popup seleccionado cambia
+     */
+    onSelectedPopupIdChange?: (groupId: string, popupId?: string, reason?: PopupSelectedReason) => void;
+}
+export interface PopupStoreComponentProps extends PopupStorePropsBase {
+    /**
+     * "winType" Tipo de ventana
+     */
+    winType: 'component';
     /**
      * "componentProps" Propiedades que se le pasan al componente que se va a mostrar en el popup.
      */
     componentProps?: Record<string, any>;
     /**
-     * functionComponent retorna el componente que se va a mostrar en el popup.
-     *
-     * Lo unico que necesita es guardar la referencia la función que retorna el componente.
+     * "component" Componente que se va a mostrar en el popup.
      */
-    functionComponent?: React.FC<Record<string, any>>;
+    component: JSX_REACT_NODE;
+}
+export interface PopupStoreMFProps extends PopupStorePropsBase {
     /**
-     * "onMouseDown" Evento nativo del Draggable, para tomar acciones externamente
+     * "winType" Tipo de ventana
      */
-    onMouseDown?: (e: MouseEvent) => void;
+    winType: 'microfrontend';
+    /**
+     * "mfProps" Propiedades de la ventana padre
+     */
+    mfProps: MFBaseProps;
+    /**
+     * "moduleId" Identificador del módulo, para Microfrontends
+     */
+    moduleId: string;
 }
+/**
+ * Props que tiene un popup en el store
+ */
+export type PopupStoreProps = PopupStoreComponentProps | PopupStoreMFProps;
+/**
+ * Props para usar en el initialPopups
+ */
+export type PopupInitialComponentProps = Omit<PopupStoreComponentProps, 'status' | 'version' | 'dynamicMFStore'>;
+export type PopupInitialMFProps = Omit<PopupStoreMFProps, 'status' | 'version' | 'dynamicMFStore'>;
+export type PopupInitialProps = PopupInitialComponentProps | PopupInitialMFProps;
+/**
+ * Props para usar en el addPopup
+ */
+export type PopupAddComponentProps = Omit<PopupStoreComponentProps, 'status' | 'zIndex' | 'version' | 'dynamicMFStore' | 'groupId'> & {
+    /**
+     * "groupId" Grupo del popup, si no se especifica, se debe almacenar en el group id "global"
+     */
+    groupId?: string;
+    /**
+     * "dynamicMFStore" Almacén de datos para los microfrontends
+     */
+    dynamicMFStore?: DynamicMFStore;
+};
+export type PopupAddMFProps = Omit<PopupStoreMFProps, 'status' | 'zIndex' | 'version' | 'dynamicMFStore' | 'groupId'> & {
+    /**
+     * "groupId" Grupo del popup, si no se especifica, se debe almacenar en el group id "global"
+     */
+    groupId?: string;
+    /**
+     * "dynamicMFStore" Almacén de datos para los microfrontends
+     */
+    dynamicMFStore?: DynamicMFStore;
+};
+export type PopupAddProps = PopupAddComponentProps | PopupAddMFProps;
+/**
+ * Grupo de popups
+ */
+export type PopupGroup = {
+    /**
+     * "id" Id del grupo
+     */
+    id: string;
+    /**
+     * "selectedPopupId" Id del popup seleccionado, en el grupo, si no se especifica, no se selecciona ninguno
+     */
+    selectedPopupId?: string;
+    /**
+     * "count" Cantidad de popups en el grupo
+     */
+    count: number;
+};
 /**
  * Interface que define el store del componente (variables y funciones )
  */
-export interface PopupsStore {
+export interface PopupsProviderStoreState {
     /**
      * Id del store, para identificarlo en las herramientas de redux.
      */
@@ -85,13 +223,9 @@ export interface PopupsStore {
      */
     currentZindex: number;
     /**
-     *  "getLabel" funcion que usará para traducir las etiquetas de diccionario
-     */
-    getLabel: GetLabelType;
-    /**
-     *  "getLabel" funcion que usará para traducir las etiquetas de diccionario
+     * "hashGroups" Grupos de popups
      */
-    getContainer: () => HTMLElement;
+    hashGroups: Record<string, PopupGroup>;
 }
 export type OpenPopupOptions = {
     /**
@@ -99,64 +233,102 @@ export type OpenPopupOptions = {
      */
     closeOthers: boolean;
 };
-export interface PopupsStateWithActions extends PopupsStore {
+export interface PopupsProviderStoreStateWithActions extends PopupsProviderStoreState {
     popupsActions: {
         /**
          * @description
          */
-        init(layersStore: PopupStoreProps[]): void;
+        init(layersStore: PopupInitialProps[]): void;
+        /**
+         * Agrega una un poupup nuevo al hash de popups y al array de ids, NOT IMPLEMENTED YET
+         */
+        unColapseLayoutItem: (popupId: string) => void;
+        /**
+         * Colapsa un popup NOT IMPLEMENTED YET
+         */
+        colapseLayoutItem: (popupId: string) => void;
         /**
-         * Agrega una un poupup nuevo al hash de popups y al array de ids,
+         * "addPopup" Agrega un popup nuevo al hash de popups y al array de ids
          */
-        addPopup: (popupProps: Omit<PopupStoreProps, 'status' | 'zIndex'>, options?: OpenPopupOptions) => void;
+        addPopup: (popupProps: PopupAddProps, options?: OpenPopupOptions) => void;
         /**
          * Remueve el poupup del hash de poups y de arrays de ids
          */
         removePopup: (popupId: string) => void;
         /**
-         * pasa el status a closing para que las las transiciones se ejecuten.
+         * Pone el popup  con zIndex igual a currentIndex y lo amuneta en uno.
          */
-        closePopup: (popupId: string) => void;
+        bringPopupOnFront: (popupId: string, withEnforceVisible?: boolean) => void;
         /**
-         * Modifica un popup espeficio
+         * setFnQueryClose: Establece la función de cierre del popup
          */
-        updatePopup: (popupId: string, popupProps: Partial<Omit<PopupStoreProps, 'status'>>) => void;
+        setFnQueryClose: (popupId: string, fn: () => void) => void;
+        /**
+         * removePopupsByGroupId: Elimina los popups de un grupo
+         */
+        closePopupsByGroupId: (groupId: string) => void;
+        /**
+         * "removeAllPopupsByGroupId" Elimina todos los popups de un grupo, esta opción se usa cuando se destruye el popupsViewer y no se alcanza hacer la transción de cierre.
+         * Para estos casos es obligatorio eleminarlos del store.
+         */
+        removeAllPopupsByGroupId: (groupId: string) => void;
+        /**
+         * closeAllPopupsByParentId: Cierra todos los popups que dependan de un popup padre, normalmente se usa en areas cuando se cierra una layout
+         */
+        closeAllPopupsByParentId: (parentId: string) => void;
+        /**
+         * setSelectedPopupId: Establece el popup seleccionado, undefined para deseleccionar
+         */
+        setSelectedPopupId: (groupId: string, popupId?: string) => void;
+    };
+    /**
+     * Acciones específicas que afecta a un solo popup, y no modifica el hash de popups de otros popups.
+     */
+    popupActions: {
         /**
          * pasa el status a init, no se ejecutan las transiciones, porque el popup viene de estar hide .
          */
-        showPopup: (popupId: string) => void;
+        show: (popupId: string) => void;
+        /**
+         * pasa el status a closing para que las las transiciones se ejecuten.
+         */
+        close: (popupId: string) => void;
+        /**
+         * Modifica un popup espeficio
+         */
+        update: (popupId: string, popupProps: Partial<Omit<PopupStoreProps, 'status'>>) => void;
         /**
          * pasa el status a hide, no se ejecutan las transiciones, porque el popup se esconde inmediatamente.
          */
-        hidePopup: (popupId: string) => void;
+        hide: (popupId: string) => void;
         /**
-         * Pone el popup  con zIndex igual a currentIndex y lo amuneta en uno.
+         * startProgress: Inicia el progreso del popup
          */
-        setPopupOnFront: (popupId: string) => void;
+        startProgress: (popupId: string) => void;
         /**
-         * Actualiza la variable de estado "getLabel"
-         * @param newHandler handle o función que va a traducir las etiquetas, esto es necesario debido que getLabel de useModuleDictionary
-         * cambia por el useCallback, cuando el diccionario se carga.
-         * @returns void
+         * stopProgress: Detiene el progreso del popup
          */
-        setHandlerGetLabel: (newHandler: GetLabelType) => void;
+        stopProgress: (popupId: string) => void;
+        /**
+         * setActions: Establece las acciones del popup
+         */
+        setActions: (popupId: string, actions: ModuleAction[], version?: string) => void;
     };
 }
-export type DefaultPopupsStoreProps = PopupsStore;
-export type InitialPopupsStoreProps = Pick<PopupsStore, 'getLabel' | 'baseZindex'> & Partial<DefaultPopupsStoreProps> & {
-    containerElement: HTMLElement;
-};
-export interface PopupsProviderProps extends Pick<PopupsStore, 'baseZindex' | 'storeId'> {
+export type DefaultPopupsStoreProps = PopupsProviderStoreState;
+export type InitialPopupsStoreProps = Pick<PopupsProviderStoreState, 'baseZindex' | 'storeId'>;
+export interface PopupsProviderProps extends Pick<PopupsProviderStoreState, 'baseZindex' | 'storeId'> {
     /**
-     * Contenedor donde los popups serán renderizados
+     * "storeDevtoolsEnabled" Determina si se debe usar devtools para el store
      */
-    containerElement: HTMLElement;
+    storeDevtoolsEnabled?: boolean;
     /**
      * Poopus abiertos desde el principio, puede servir para abrir los poupus previamente cargados en las cookies
      */
-    initialPopups?: PopupStoreProps[];
+    initialPopups?: PopupInitialProps[];
     /**
      * children
      */
     children: ReactNode;
 }
+export {};

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

@@ -0,0 +1,15 @@
+import { WindowBaseAction } from '../../../../WindowBase/types';
+interface UseHeaderActionsPopupsParams {
+    /** Identificador de la ventana (popup) */
+    popupId: string;
+}
+/**
+ * Hook useHeaderActionsPopups
+ *
+ * Este hook configura las acciones del header para un popup utilizando el store de popups,
+ * el diccionario e íconos propios y helpers para construir las acciones "main" e "inside".
+ * @param {UseHeaderActionsPopupsParams} params - Parámetros que incluyen el popupId y, opcionalmente, acciones adicionales.
+ * @returns Objeto con leftActions, menuActions y rightActions.
+ */
+export declare const useHeaderActionsPopups: ({ popupId, }: UseHeaderActionsPopupsParams) => WindowBaseAction[];
+export {};

package/components/popups/components/PopupsProvider/hooks/useHeaderActionsPopups.js

@@ -0,0 +1,60 @@
+import { useMemo } from "react";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { u as usePopupsStore } from "./usePopupsStore.js";
+import { shallow } from "zustand/shallow";
+import { useIsMobile } from "@m4l/graphics";
+import { g as getLeftActions, a as getInsideMenuActions } from "../../../../WindowBase/helpers.js";
+const useHeaderActionsPopups = ({
+  popupId
+}) => {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
+  const isMobile = useIsMobile();
+  const urlPrefix = `${host_static_assets}/${environment_assets}`;
+  const moduleActions = usePopupsStore(
+    (state) => state.hashPopups[popupId]?.moduleActions || [],
+    shallow
+  );
+  const leftActions = useMemo(() => {
+    return getLeftActions(isMobile, moduleActions).map((action) => ({
+      ...action,
+      place: "left",
+      iconUrl: action.iconUrl || "",
+      label: action.label || ""
+    }));
+  }, [isMobile, moduleActions]);
+  const windowOptions = usePopupsStore(
+    (state) => state.hashPopups[popupId]?.windowOptions,
+    shallow
+  );
+  const insideActions = useMemo(() => {
+    return getInsideMenuActions({
+      windowId: popupId,
+      isMobile,
+      moduleActions,
+      urlPrefix,
+      saveModuleCookies: () => {
+        throw new Error("Not implemented");
+      },
+      resetModuleCookies: () => {
+        throw new Error("Not implemented");
+      },
+      windowOptions,
+      getLabel
+    });
+  }, [
+    popupId,
+    isMobile,
+    moduleActions,
+    urlPrefix,
+    windowOptions,
+    getLabel
+  ]);
+  const memoizedActions = useMemo(() => {
+    return [...leftActions, ...insideActions];
+  }, [leftActions, insideActions]);
+  return memoizedActions;
+};
+export {
+  useHeaderActionsPopups as u
+};

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

@@ -0,0 +1,43 @@
+import { WindowToolsMF } from '../../../../WindowBase/contexts';
+/**
+ * Hook usePopups
+ *
+ * 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";
+    moduleId: string | undefined;
+    title: string;
+    subTitle: string | undefined;
+    iconUrl: string;
+    selected: boolean;
+    mfProps: import('../../../../MFLoader/types').MFBaseProps | undefined;
+    component: import('../../../../WindowBase/types').JSX_REACT_NODE;
+    loading: boolean | undefined;
+    status: import('../../PopupsViewer/types').PopupStatus;
+    version: string | undefined;
+    dynamicMFStore: Omit<import('zustand').StoreApi<import('../../../../WindowBase/contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions>, "setState"> & {
+        setState(nextStateOrUpdater: import('../../../../WindowBase/contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions | Partial<import('../../../../WindowBase/contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<import('../../../../WindowBase/contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions>) => void), shouldReplace?: boolean | undefined): void;
+    };
+    windowTools: WindowToolsMF;
+    memoizedActions: import('../../../../WindowBase/types').WindowBaseAction[];
+    editionInfo: string | undefined;
+    zIndex: number;
+    variant: import('../contexts/PopupsContext/types').PopupVariantType;
+    draggable: boolean;
+    resizable: boolean;
+    defaultPosition: import('../../../../DragResizeWindowRND/types').DefaultPosition | undefined;
+    bounds: import('../../../../DragResizeWindowRND/types').DraggableWindowBounds | undefined;
+    onMouseDown: ((e: MouseEvent) => void) | undefined;
+    allowHeightResizeContainer: boolean | undefined;
+    allowWidthResizeContainer: boolean | undefined;
+    maxHeight: any;
+    maxWidth: any;
+    minHeight: any;
+    minWidth: any;
+};

package/components/popups/components/PopupsProvider/hooks/usePopups.js

@@ -0,0 +1,138 @@
+import { useMemo } from "react";
+import { shallow } from "zustand/shallow";
+import { u as usePopupsStore } from "./usePopupsStore.js";
+import { u as useHeaderActionsPopups } from "./useHeaderActionsPopups.js";
+import { c as createToaster } from "../../../../ToastContainer/helpers/toaster.js";
+const usePopups = (popupId) => {
+  const {
+    moduleId,
+    winType,
+    title,
+    iconUrl,
+    status,
+    dynamicMFStore,
+    loading,
+    version,
+    subTitle,
+    editionInfo,
+    zIndex,
+    variant = "normal",
+    draggable = true,
+    resizable = true,
+    defaultPosition,
+    bounds,
+    onMouseDown,
+    allowHeightResizeContainer,
+    allowWidthResizeContainer,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth
+  } = usePopupsStore(
+    (state) => {
+      return state.hashPopups[popupId];
+    },
+    shallow
+  );
+  const mfProps = usePopupsStore(
+    (state) => state.hashPopups[popupId].winType === "microfrontend" ? state.hashPopups[popupId].mfProps : void 0,
+    shallow
+  );
+  const component = usePopupsStore(
+    (state) => state.hashPopups[popupId].winType === "component" ? state.hashPopups[popupId].component : void 0,
+    shallow
+  );
+  const selectedPopupId = usePopupsStore(
+    (state) => state.hashGroups[state.hashPopups[popupId].groupId].selectedPopupId,
+    shallow
+  );
+  const {
+    setFnQueryClose
+  } = usePopupsStore((state) => state.popupsActions, shallow);
+  const {
+    hide,
+    show,
+    update,
+    close,
+    setActions,
+    startProgress,
+    stopProgress
+  } = usePopupsStore((state) => state.popupActions, shallow);
+  const windowTools = useMemo(
+    () => ({
+      getWindowId: () => popupId,
+      setActions: (newActions, newVersion) => {
+        setActions(popupId, newActions, newVersion);
+      },
+      getCookie: () => {
+        throw new Error("getCookie not implemented");
+      },
+      getCookies: () => {
+        throw new Error("getCookies not implemented");
+      },
+      setCookie: (key, value) => {
+        throw new Error(`setCookie not implemented: ${key}, ${value}`);
+      },
+      close: () => close(popupId),
+      startProgress: () => startProgress(popupId),
+      stopProgress: () => stopProgress(popupId),
+      setFnQueryClose: (fnQueryClose) => setFnQueryClose(popupId, fnQueryClose),
+      toast: createToaster(popupId),
+      setWindowTitle: (newTitle) => update(popupId, { title: newTitle }),
+      setEditionInfo: (newEditionInfo) => update(popupId, { editionInfo: newEditionInfo }),
+      hide: () => hide(popupId),
+      show: () => {
+        show(popupId);
+      }
+    }),
+    [
+      popupId,
+      version,
+      setActions,
+      //getCookie,
+      //getCookies,
+      //setCookie,
+      close,
+      startProgress,
+      stopProgress,
+      setFnQueryClose
+    ]
+  );
+  const memoizedActions = useHeaderActionsPopups({
+    popupId
+  });
+  return {
+    winType,
+    moduleId,
+    title,
+    subTitle,
+    iconUrl,
+    selected: selectedPopupId === popupId,
+    mfProps,
+    component,
+    loading,
+    status,
+    version,
+    dynamicMFStore,
+    windowTools,
+    //onTouch,
+    memoizedActions,
+    editionInfo,
+    zIndex,
+    variant,
+    draggable,
+    resizable,
+    defaultPosition,
+    bounds,
+    onMouseDown,
+    allowHeightResizeContainer,
+    allowWidthResizeContainer,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth
+  };
+};
+export {
+  usePopups as u
+};

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

@@ -0,0 +1,5 @@
+import { PopupsProviderStoreStateWithActions } from '../contexts/PopupsContext/types';
+/**
+ * TODO: Documentar
+ */
+export declare function usePopupsStore<T>(selector: (state: PopupsProviderStoreStateWithActions) => T, equalityFn?: (left: T, right: T) => boolean): T;

package/components/popups/components/PopupsProvider/hooks/usePopupsStore.js

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+import { useStore } from "zustand";
+import { a as PopupsContext } from "../contexts/PopupsContext/PopupsContext.js";
+function usePopupsStore(selector, equalityFn) {
+  const context = useContext(PopupsContext);
+  if (!context) {
+    throw new Error("usePopupsStore context must be use inside PopupsContext");
+  }
+  return useStore(context, selector, equalityFn);
+}
+export {
+  usePopupsStore as u
+};

package/components/popups/components/PopupsViewer/PopupsViewer.d.ts

@@ -1,7 +1,39 @@
+import { PopupsViewerProps } from './types';
 /**
- * Visor de popups
- *   - Los popus desplegados depende del store proporcionado por PoupsProvider.
- *   - Utiliza la librería de tranciones para animar la apertura y cierre de los popups
- *   - Los popups utilizan el componente DragResizeWindow para poder ser movidos y redimensionados
+ * Componente PopupsViewer
+ *
+ * Este componente se encarga de visualizar y gestionar la animación y el ciclo de vida de
+ * los popups en la aplicación. Utiliza la librería `react-transition-group` para manejar las
+ * transiciones de entrada y salida de los popups, y `zustand` para gestionar el estado global de
+ * los popups.
+ *
+ * ### Funcionamiento:
+ *
+ * - **Estado de popups:**
+ * Se obtienen los identificadores de los popups activos desde el store mediante `usePopupsStore`,
+ * filtrando aquellos popups cuyo estado no sea `'closing'` y que pertenezcan al grupo especificado. Además, se obtiene el valor de `baseZindex`
+ * para establecer la jerarquía de apilamiento (z-index) de los popups.
+ *
+ * - **Contenedor:**
+ * Se recupera el elemento contenedor a través del método `getContainerElement` del store. Si el contenedor o su tamaño
+ * no están disponibles, el componente retorna `null` y no se renderiza nada. Normalmente este se establece cuando ya se renderizo este a través de un ref personalizado.
+ *
+ * - **Animaciones:**
+ * Cada popup se envuelve en un componente `CSSTransition` para gestionar las animaciones. Se definen
+ * las clases CSS correspondientes para la animación de entrada (por ejemplo, 'fade-enter', 'fade-enter-active', etc.).
+ * Cuando finaliza la animación de salida, se ejecuta la función `removePopup` para eliminar el popup del estado.
+ *
+ * - **Renderizado:**
+ * Los popups se renderizan dentro de un `TransitionGroup` que gestiona la secuencia de aparición y salida de
+ * cada popup. El componente `Popup` recibe propiedades como `popupId`, el contenedor y su tamaño, lo que permite
+ * que cada popup se posicione correctamente en la pantalla.
+ *
+ * - **Remoción de popups:**
+ * Cuando se cierra un popup se espera a que finalice la animación de salida, una vez termina,
+ * se invoca la función `removePopup` para que se pueda eliminar el popup del store.
+ * Importante:
+ *   Cuando se destruye el componente `PopupsViewer`, se eliminan todos los popups del grupo especificado,
+ *   invocando la función `removeAllPopupsByGroupId` debido a que las transiciones de salida no se ejecutaran.
  */
-export declare const PopupsViewer: () => import("react/jsx-runtime").JSX.Element | null;
+export declare const PopupsViewer: (props: PopupsViewerProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const MemonizePopupsViewer: import('react').MemoExoticComponent<(props: PopupsViewerProps) => import("react/jsx-runtime").JSX.Element | null>;