@m4l/components 9.1.126 → 9.1.128

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

@@ -0,0 +1,157 @@
+import { useMemo } from "react";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { u as usePopupsStore } from "../usePopupsStore/index.js";
+import { shallow } from "zustand/shallow";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { I as ICONS } from "../../../../../areas/icons.js";
+import { g as getMainActions } from "../../../../../areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useHeaderActions/helper.js";
+import { g as getMenuActionsForPopups } from "./helper.js";
+import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../../../areas/dictionary.js";
+const useHeaderActionsPopups = ({
+  popupId,
+  menuActions = []
+}) => {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
+  const urlPrefix = `${host_static_assets}/${environment_assets}`;
+  const moduleActions = usePopupsStore(
+    (state) => state.hashPopups[popupId]?.moduleActions || [],
+    shallow
+  );
+  const mainActions = useMemo(() => {
+    return getMainActions(isDesktop, moduleActions).map((action) => ({
+      ...action,
+      place: "left",
+      iconUrl: action.iconUrl || "",
+      label: action.label || ""
+    }));
+  }, [isDesktop, moduleActions]);
+  const windowOptions = usePopupsStore(
+    (state) => state.hashPopups[popupId]?.windowOptions,
+    shallow
+  );
+  const menuActionsInside = useMemo(() => {
+    return getMenuActionsForPopups({
+      popupId,
+      isDesktop,
+      moduleActions,
+      urlPrefix,
+      saveModuleCookies: () => {
+        throw new Error("Not implemented");
+      },
+      resetModuleCookies: () => {
+        throw new Error("Not implemented");
+      },
+      windowOptions: {
+        allowPersistCookies: false
+      },
+      getLabel
+    }).map((action) => ({
+      ...action,
+      place: "inside",
+      iconUrl: action.iconUrl || "",
+      label: action.label || ""
+    }));
+  }, [
+    popupId,
+    isDesktop,
+    moduleActions,
+    urlPrefix,
+    windowOptions,
+    getLabel
+  ]);
+  const predefActions = useMemo(() => {
+    const groups = {
+      left: [],
+      inside: [],
+      right: []
+    };
+    menuActions.forEach((action) => {
+      if (action.place === "left") {
+        groups.left.push(action);
+      } else if (action.place === "inside") {
+        groups.inside.push(action);
+      } else if (action.place === "right") {
+        groups.right.push(action);
+      }
+    });
+    return groups;
+  }, [menuActions]);
+  const collapsed = usePopupsStore(
+    (state) => state.hashPopups[popupId]?.collapsed || false,
+    shallow
+  );
+  const maximized = usePopupsStore(
+    (state) => state.hashPopups[popupId]?.maximized || false,
+    shallow
+  );
+  const { colapseLayoutItem: collapsePopup, unColapseLayoutItem: uncollapsePopup } = usePopupsStore(
+    (state) => state.popupsActions,
+    shallow
+  );
+  const headerRightActions = useMemo(() => {
+    const actions = [];
+    actions.push({
+      place: "right",
+      key: "maximize",
+      iconUrl: maximized ? `${host_static_assets}/${environment_assets}/frontend/components/popups/assets/icons/${ICONS.NORMALIZE}` : `${host_static_assets}/${environment_assets}/frontend/components/popups/assets/icons/${ICONS.MAXIMIZE}`,
+      label: maximized ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_minimize_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_maximize_window))
+      /**
+       *
+       */
+      // onClick: () => {
+      //   if (maximized) {
+      //     normalizePopup(windowId);
+      //   } else {
+      //     maximizePopup(windowId);
+      //   }
+      // },
+      // disabled: false,
+    });
+    if (!maximized) {
+      actions.push({
+        place: "right",
+        key: "collapseToggle",
+        iconUrl: !collapsed ? `${host_static_assets}/${environment_assets}/frontend/components/popups/assets/icons/${ICONS.COLAPSE}` : `${host_static_assets}/${environment_assets}/frontend/components/popups/assets/icons/${ICONS.UNCOLPASE}`,
+        label: !collapsed ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_collapse_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_uncollapse_window)),
+        /**
+         * Función que se ejecuta al hacer clic en la acción.
+         */
+        onClick: () => {
+          if (collapsed) {
+            uncollapsePopup(popupId);
+          } else {
+            collapsePopup(popupId);
+          }
+        },
+        disabled: false
+      });
+    }
+    return actions;
+  }, [
+    collapsed,
+    maximized,
+    host_static_assets,
+    environment_assets,
+    getLabel,
+    popupId,
+    collapsePopup,
+    uncollapsePopup
+    //normalizePopup,
+    //maximizePopup,
+  ]);
+  console.log(headerRightActions);
+  const combinedInsideActions = useMemo(() => {
+    return [...menuActionsInside, ...predefActions.inside];
+  }, [menuActionsInside, predefActions.inside]);
+  return {
+    leftActions: [...mainActions, ...predefActions.left],
+    menuActions: combinedInsideActions,
+    rightActions: []
+    // rightActions: [...predefActions.right, ...headerRightActions],
+  };
+};
+export {
+  useHeaderActionsPopups as u
+};

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

@@ -0,0 +1,28 @@
+import { WindowToolsMF } from '../../../../../areas';
+import { WindowBaseAction } from '../../../../../WindowBase';
+interface UsePopupsReturn {
+    moduleId: string;
+    winType: any;
+    title: string | undefined;
+    iconUrl?: string;
+    loading?: boolean;
+    mfProps: any;
+    component: any;
+    status: string;
+    dynamicMFStore: any;
+    windowTools: WindowToolsMF;
+    memoizedActions: WindowBaseAction[];
+    version?: string;
+}
+/**
+ * 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) => UsePopupsReturn;
+export {};

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

@@ -0,0 +1,117 @@
+import { useMemo } from "react";
+import { shallow } from "zustand/shallow";
+import { u as usePopupsStore } from "../usePopupsStore/index.js";
+import { u as useHeaderActionsPopups } from "../useHeaderActionsPopups/useHeaderActionsPopups.js";
+import { c as createToaster } from "../../../../../ToastContainer/helpers/toaster.js";
+const usePopups = (popupId) => {
+  const [
+    winType,
+    title,
+    iconUrl,
+    status,
+    dynamicMFStore,
+    loading,
+    version
+  ] = usePopupsStore(
+    (state) => {
+      const popupData = state.hashPopups[popupId];
+      return [
+        popupData?.winType,
+        popupData?.title,
+        popupData?.iconUrl,
+        popupData?.status,
+        popupData?.dynamicMFStore,
+        popupData?.loading || false,
+        popupData?.version
+      ];
+    },
+    shallow
+  );
+  const mfProps = usePopupsStore(
+    (state) => state.hashPopups[popupId]?.mfProps,
+    shallow
+  );
+  const component = usePopupsStore(
+    (state) => state.hashPopups[popupId]?.component,
+    shallow
+  );
+  const {
+    setActions,
+    closePopup,
+    startProgress,
+    stopProgress,
+    setFnQueryClose,
+    setPopupTitle
+  } = usePopupsStore((state) => state.popupsActions, shallow);
+  const windowTools = useMemo(
+    () => ({
+      getWindowId: () => popupId,
+      setActions: (newActions) => {
+        setActions(popupId, newActions, version);
+      },
+      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: () => closePopup(popupId),
+      startProgress: () => startProgress(popupId),
+      stopProgress: () => stopProgress(popupId),
+      setFnQueryClose: (fnQueryClose) => setFnQueryClose(popupId, fnQueryClose),
+      toast: createToaster(popupId),
+      setWindowTitle: (newTitle) => setPopupTitle(popupId, newTitle),
+      setEditionInfo: (editionInfo) => {
+        throw new Error(`setEditionInfo not implemented: ${editionInfo}`);
+      },
+      hide: () => {
+        throw new Error("hide not implemented");
+      },
+      show: () => {
+        throw new Error("show not implemented");
+      }
+    }),
+    [
+      popupId,
+      version,
+      setActions,
+      //getCookie,
+      //getCookies,
+      //setCookie,
+      closePopup,
+      startProgress,
+      stopProgress,
+      setFnQueryClose,
+      setPopupTitle
+    ]
+  );
+  const { leftActions, menuActions, rightActions } = useHeaderActionsPopups({
+    popupId,
+    menuActions: []
+  });
+  const memoizedActions = useMemo(() => {
+    return [...leftActions, ...menuActions, ...rightActions];
+  }, [leftActions, menuActions, rightActions]);
+  return {
+    moduleId: popupId,
+    winType,
+    title,
+    iconUrl,
+    //selected,
+    mfProps,
+    component,
+    loading,
+    status,
+    version,
+    dynamicMFStore,
+    windowTools,
+    //onTouch,
+    memoizedActions
+  };
+};
+export {
+  usePopups as u
+};

package/components/popups/components/PopupsProvider/tests/PopupsProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,7 +1,30 @@
 /**
- * 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'`. 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 `getContainer` del store. Si el contenedor o su tamaño
+ * no están disponibles, el componente retorna `null` y no se renderiza nada.
+ *
+ * - **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.
  */
 export declare const PopupsViewer: () => import("react/jsx-runtime").JSX.Element | null;

package/components/popups/components/PopupsViewer/PopupsViewer.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
 import { shallow } from "zustand/shallow";
-import { P as Popup } from "./subcomponents/Popup/index.js";
+import { P as Popup } from "./subcomponents/Popup/Popup.js";
 import { u as usePopupsStore } from "../PopupsProvider/hooks/usePopupsStore/index.js";
 import { u as useSizeContainer } from "../../../../hooks/useSizeContainer/index.js";
 import { R as RootStyled } from "./slots/popupsViewerSlots.js";
@@ -27,8 +27,6 @@ const PopupsViewer = () => {
           removePopup(id);
         },
         classNames: {
-          // appear: 'fade-appear', // Clases para la animación de aparición
-          // appearActive: 'fade-appear-active',
           enter: "fade-enter",
           // Clases para la animación de entrada
           enterActive: "fade-enter-active",
@@ -37,6 +35,7 @@ const PopupsViewer = () => {
         children: /* @__PURE__ */ jsx(
           Popup,
           {
+            "data-testid": "popup",
             popupId: id,
             containerElement,
             containerSize

package/components/popups/components/PopupsViewer/PopupsViewer.styles.js

@@ -97,16 +97,6 @@ const popupsViewerStyles = {
     flexDirection: "column",
     overflow: "hidden"
   }),
-  /**
-   * TODO: Documentar
-   */
-  pDWContentEditionInfo: () => ({
-    display: "flex",
-    justifyContent: "flex-end",
-    "& .M4LIcon-root": {
-      paddingRight: "8px"
-    }
-  }),
   /**
    * TODO: Documentar
    */
@@ -115,6 +105,13 @@ const popupsViewerStyles = {
     display: "flex",
     position: "relative",
     overflow: "auto"
+  }),
+  /**
+   * TODO: Documentar
+   */
+  windowBaseContent: ({ theme, ownerState }) => ({
+    width: "100%",
+    height: ownerState.collapsed ? `${theme.vars.size.baseSpacings["sp10-5"]}` : "100%"
   })
 };
 export {

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

@@ -1,5 +1,6 @@
 export declare const COMPONENT_TEST_ID = "M4LPopupsViewer";
 export declare const POPUPS_VIEWER_KEY_COMPONENT = "M4LPopupsViewer";
+export declare const POPUPS_VIEWER_CLASS_NAME = "M4LPopupsViewer";
 export declare const EARTH_RADIO = 6378137;
 export declare const DN = 500;
 export declare const DE = 500;

package/components/popups/components/PopupsViewer/constants.js

@@ -1,4 +1,6 @@
 const POPUPS_VIEWER_KEY_COMPONENT = "M4LPopupsViewer";
+const POPUPS_VIEWER_CLASS_NAME = "M4LPopupsViewer";
 export {
-  POPUPS_VIEWER_KEY_COMPONENT as P
+  POPUPS_VIEWER_KEY_COMPONENT as P,
+  POPUPS_VIEWER_CLASS_NAME as a
 };

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

@@ -4,6 +4,9 @@ export declare const RootStyled: import('@emotion/styled').StyledComponent<impor
 export declare const PopupDragWindowRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../../DragResizeWindow/types').DragResizeWindowProps & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('../../../../DragResizeWindow/types').DragResizeWindowProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown>;
 }, {}, {}>;
+export declare const WindowBaseContentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
 export declare const PopupHeaderContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
@@ -13,9 +16,6 @@ export declare const PopupHeaderTitleStyled: import('@emotion/styled').StyledCom
 export declare const PopupHeaderSubTitleStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
-export declare const PopupContentEditionInfoStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown>;
-}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
 export declare const PopupContentRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;

package/components/popups/components/PopupsViewer/slots/popupsViewerSlots.js

@@ -10,37 +10,32 @@ const PopupDragWindowRootStyled = styled(DragResizeWindow, {
   name: POPUPS_VIEWER_KEY_COMPONENT,
   slot: PopupViewerSlots.popupDragWindowRoot
 })(popupsViewerStyles?.popupDragWindowRoot);
-const PopupHeaderContainerStyled = styled("div", {
+const WindowBaseContentStyled = styled("div", {
+  name: POPUPS_VIEWER_KEY_COMPONENT,
+  slot: PopupViewerSlots.windowBaseContent
+})(popupsViewerStyles?.windowBaseContent);
+styled("div", {
   name: POPUPS_VIEWER_KEY_COMPONENT,
   slot: PopupViewerSlots.pDWHeaderContainer
 })(popupsViewerStyles?.pDWHeaderContainer);
-const PopupHeaderTitleStyled = styled("span", {
+styled("span", {
   name: POPUPS_VIEWER_KEY_COMPONENT,
   slot: PopupViewerSlots.pDWHeaderTitle
 })(popupsViewerStyles?.pDWHeaderTitle);
-const PopupHeaderSubTitleStyled = styled("span", {
+styled("span", {
   name: POPUPS_VIEWER_KEY_COMPONENT,
   slot: PopupViewerSlots.pDWHeaderSubTitle
 })(popupsViewerStyles?.pDWHeaderSubTitle);
-const PopupContentEditionInfoStyled = styled("div", {
-  name: POPUPS_VIEWER_KEY_COMPONENT,
-  slot: PopupViewerSlots.pDWContentEditionInfo
-})(popupsViewerStyles?.pDWContentEditionInfo);
-const PopupContentRootStyled = styled("div", {
+styled("div", {
   name: POPUPS_VIEWER_KEY_COMPONENT,
   slot: PopupViewerSlots.pDWContentRoot
 })(popupsViewerStyles?.pDWContentRoot);
-const PopupContentWrapperStyled = styled("div", {
+styled("div", {
   name: POPUPS_VIEWER_KEY_COMPONENT,
   slot: PopupViewerSlots.pDWContentWrapper
 })(popupsViewerStyles?.pDWContentWrapper);
 export {
   PopupDragWindowRootStyled as P,
   RootStyled as R,
-  PopupContentRootStyled as a,
-  PopupContentWrapperStyled as b,
-  PopupContentEditionInfoStyled as c,
-  PopupHeaderContainerStyled as d,
-  PopupHeaderTitleStyled as e,
-  PopupHeaderSubTitleStyled as f
+  WindowBaseContentStyled as W
 };

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

@@ -5,6 +5,6 @@ export declare enum PopupViewerSlots {
     pDWHeaderTitle = "pDWHeaderTitle",
     pDWHeaderSubTitle = "pDWHeaderSubTitle",
     pDWContentRoot = "pDWContentRoot",
-    pDWContentEditionInfo = "pDWContentEditionInfo",
-    pDWContentWrapper = "pDWContentWrapper"
+    pDWContentWrapper = "pDWContentWrapper",
+    windowBaseContent = "windowBaseContent"
 }

package/components/popups/components/PopupsViewer/slots/slots.js

@@ -5,8 +5,8 @@ var PopupViewerSlots = /* @__PURE__ */ ((PopupViewerSlots2) => {
   PopupViewerSlots2["pDWHeaderTitle"] = "pDWHeaderTitle";
   PopupViewerSlots2["pDWHeaderSubTitle"] = "pDWHeaderSubTitle";
   PopupViewerSlots2["pDWContentRoot"] = "pDWContentRoot";
-  PopupViewerSlots2["pDWContentEditionInfo"] = "pDWContentEditionInfo";
   PopupViewerSlots2["pDWContentWrapper"] = "pDWContentWrapper";
+  PopupViewerSlots2["windowBaseContent"] = "windowBaseContent";
   return PopupViewerSlots2;
 })(PopupViewerSlots || {});
 export {

package/components/popups/components/PopupsViewer/subcomponents/Popup/Popup.js

@@ -0,0 +1,134 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { shallow } from "zustand/shallow";
+import { u as usePopupsStore } from "../../../PopupsProvider/hooks/usePopupsStore/index.js";
+import { P as PopupDragWindowRootStyled, W as WindowBaseContentStyled } from "../../slots/popupsViewerSlots.js";
+import { M as MemonizedMicroFrontend } from "../../../../../areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/MicroFrontend/MicroFrontend.js";
+import { C as Component } from "../../../../../areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Component/index.js";
+import { u as usePopups } from "../../../PopupsProvider/hooks/usePopops/usePopups.js";
+import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
+import { a as POPUPS_VIEWER_CLASS_NAME } from "../../constants.js";
+import { a as getNameDataTestId } from "../../../../../../test/getNameDataTestId.js";
+import { W as WindowBase } from "../../../../../WindowBase/WindowBase.js";
+const Popup = forwardRef((props, ref) => {
+  const { popupId, containerElement, containerSize, style } = props;
+  const popup = usePopupsStore((state) => state.hashPopups[popupId], shallow);
+  const { setPopupOnFront: setPopupOnTop } = usePopupsStore((state) => state.popupsActions, shallow);
+  const { closePopup } = usePopupsStore((state) => state.popupsActions, shallow);
+  const { collapsed, maximized } = usePopupsStore(
+    (state) => ({
+      collapsed: state.hashPopups[popupId]?.collapsed || false,
+      maximized: state.hashPopups[popupId]?.maximized || false
+    }),
+    shallow
+  );
+  const {
+    moduleId,
+    winType,
+    title,
+    iconUrl,
+    dynamicMFStore,
+    windowTools,
+    mfProps,
+    component,
+    //onTouch,
+    memoizedActions,
+    loading,
+    version
+  } = usePopups(popupId);
+  const {
+    status,
+    subTitle,
+    editionInfo,
+    zIndex,
+    variant = "normal",
+    draggable = true,
+    resizable = true,
+    defaultPosition,
+    bounds,
+    onMouseDown,
+    ...others
+  } = popup || {};
+  const ownerState = {
+    status,
+    variant,
+    subTitle,
+    editionInfo,
+    zIndex,
+    collapsed,
+    maximized
+  };
+  const onMouseDownLocal = (e) => {
+    setPopupOnTop(popupId);
+    if (onMouseDown) {
+      onMouseDown(e);
+    }
+  };
+  if (!popup) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    PopupDragWindowRootStyled,
+    {
+      ownerState,
+      ref,
+      hidden: popup.status === "hidden",
+      onMouseDown: onMouseDownLocal,
+      containerElement,
+      containerSize,
+      bounds,
+      draggable,
+      resizeable: resizable,
+      defaultPosition,
+      style: { ...style, zIndex },
+      ...others,
+      children: /* @__PURE__ */ jsx(
+        WindowBaseContentStyled,
+        {
+          ownerState,
+          children: /* @__PURE__ */ jsx(
+            WindowBase,
+            {
+              ...others,
+              version,
+              onClose: () => closePopup(popupId),
+              title: title ?? "",
+              subTitle,
+              iconUrl,
+              editionInfo,
+              actions: memoizedActions,
+              isLoading: loading,
+              windowId: popupId,
+              ...process.env.NODE_ENV !== "production" ? {
+                [TEST_PROP_ID]: getNameDataTestId(
+                  POPUPS_VIEWER_CLASS_NAME,
+                  "root"
+                )
+              } : {},
+              children: winType === "microfrontend" ? /* @__PURE__ */ jsx(
+                MemonizedMicroFrontend,
+                {
+                  moduleId,
+                  dynamicMFStore,
+                  windowTools,
+                  ...mfProps
+                }
+              ) : /* @__PURE__ */ jsx(
+                Component,
+                {
+                  moduleId,
+                  dynamicMFStore,
+                  windowTools,
+                  component
+                }
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+});
+export {
+  Popup as P
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -11,6 +11,8 @@ export interface PopupOwnerState extends Pick<PopupStoreProps, 'status' | 'subTi
      *  "isMobile" cuando el navegador está corriendo en dispositivo móvil
      */
     isMobile?: boolean;
+    collapsed?: boolean;
+    maximized?: boolean;
 }
 export interface PopupsViewerOwnerState extends Pick<PopupsStore, 'baseZindex'>, PopupOwnerState {
 }