@m4l/components 9.2.0 → 9.2.2

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

@@ -1,3 +1,4 @@
+import { PopupsViewerProps } from './types';
 /**
  * Componente PopupsViewer
  *
@@ -10,12 +11,12 @@
  *
  * - **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`
+ * 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 `getContainer` del store. Si el contenedor o su tamaño
- * no están disponibles, el componente retorna `null` y no se renderiza nada.
+ * 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
@@ -26,5 +27,13 @@
  * 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>;

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

@@ -2,18 +2,30 @@ 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/Popup.js";
-import { u as usePopupsStore } from "../PopupsProvider/hooks/usePopupsStore/index.js";
+import { u as usePopupsStore } from "../PopupsProvider/hooks/usePopupsStore.js";
 import { u as useSizeContainer } from "../../../../hooks/useSizeContainer/index.js";
 import { R as RootStyled } from "./slots/popupsViewerSlots.js";
-const PopupsViewer = () => {
+import { useRef, createRef, useEffect, memo } from "react";
+const PopupsViewer = (props) => {
+  const { groupId = "global", onResizeStart, onResizeStop, onDragStart, onDragStop, containerElement } = props;
   const popupsIds = usePopupsStore(
-    (state) => state.popupsIds.filter((pId) => state.hashPopups[pId].status !== "closing"),
+    (state) => state.popupsIds.filter((pId) => groupId === state.hashPopups[pId].groupId && state.hashPopups[pId].status !== "closing"),
     shallow
   );
+  const popupRefsMap = useRef({});
+  popupsIds.forEach((id) => {
+    if (!popupRefsMap.current[id]) {
+      popupRefsMap.current[id] = createRef();
+    }
+  });
   const baseZindex = usePopupsStore((state) => state.baseZindex, shallow);
-  const containerElement = usePopupsStore((state) => state.getContainer, shallow)();
-  const { removePopup } = usePopupsStore((state) => state.popupsActions, shallow);
+  const { removePopup, removeAllPopupsByGroupId } = usePopupsStore((state) => state.popupsActions, shallow);
   const containerSize = useSizeContainer(containerElement);
+  useEffect(() => {
+    return () => {
+      removeAllPopupsByGroupId(groupId);
+    };
+  }, [groupId, removeAllPopupsByGroupId]);
   if (!containerElement || !containerSize) {
     return null;
   }
@@ -22,19 +34,26 @@ const PopupsViewer = () => {
       CSSTransition,
       {
         timeout: { appear: 0, enter: 1300, exit: 0 },
+        nodeRef: popupRefsMap.current[id],
         unmountOnExit: true,
+        onEntered: () => {
+        },
         onExited: () => {
           removePopup(id);
         },
         classNames: {
           enter: "fade-enter",
-          // Clases para la animación de entrada
           enterActive: "fade-enter-active",
           enterDone: "fade-enter-done"
         },
         children: /* @__PURE__ */ jsx(
           Popup,
           {
+            ref: popupRefsMap.current[id],
+            onResizeStart,
+            onResizeStop,
+            onDragStart,
+            onDragStop,
             "data-testid": "popup",
             popupId: id,
             containerElement,
@@ -47,6 +66,8 @@ const PopupsViewer = () => {
     );
   }) }) });
 };
+const MemonizePopupsViewer = memo(PopupsViewer);
 export {
+  MemonizePopupsViewer as M,
   PopupsViewer as P
 };

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

@@ -15,7 +15,9 @@ const popupsViewerStyles = {
     zIndex: ownerState.baseZindex || 0
   }),
   /**
-   * TODO: Documentar
+   * TODO: Documentar      global: {
+   * id: 'global',
+   * },
    */
   popupDragWindowRoot: ({ theme, ownerState }) => ({
     display: "flex",
@@ -45,9 +47,6 @@ const popupsViewerStyles = {
     ...ownerState?.status === "hidden" ? {
       visibility: "hidden",
       pointerEvents: "none"
-    } : {},
-    ...ownerState?.variant === "small" ? {
-      border: "1px solid red"
     } : {}
   }),
   /**
@@ -105,13 +104,6 @@ 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/slots/popupsViewerSlots.d.ts

@@ -1,24 +1,21 @@
-export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown> & {
+export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-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> & {
+export declare const PopupDragWindowRootStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../../DragResizeWindowRND/types').DragResizeWindowPropsRND, "ref"> & import('react').RefAttributes<import('../../../../DragResizeWindowRND/types').DragResizeWindowRefHandler>, string | number> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & 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> & {
+export declare const PopupHeaderContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<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').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const PopupHeaderTitleStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown> & {
+export declare const PopupHeaderTitleStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & 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 PopupHeaderSubTitleStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown> & {
+export declare const PopupHeaderSubTitleStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & 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 PopupContentRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown> & {
+export declare const PopupContentRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const PopupContentWrapperStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown> & {
+export declare const PopupContentWrapperStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').PopupsViewerOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

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

@@ -2,18 +2,14 @@ import { styled } from "@mui/material/styles";
 import { P as POPUPS_VIEWER_KEY_COMPONENT } from "../constants.js";
 import { p as popupsViewerStyles } from "../PopupsViewer.styles.js";
 import { P as PopupViewerSlots } from "./slots.js";
-import { D as DragResizeWindow } from "../../../../DragResizeWindow/DragResizeWindow.js";
+import { D as DragResizeWindowRND } from "../../../../DragResizeWindowRND/DragResizeWindowRND.js";
 const RootStyled = styled("div", { name: POPUPS_VIEWER_KEY_COMPONENT, slot: PopupViewerSlots.root })(
   popupsViewerStyles?.root
 );
-const PopupDragWindowRootStyled = styled(DragResizeWindow, {
+const PopupDragWindowRootStyled = styled(DragResizeWindowRND, {
   name: POPUPS_VIEWER_KEY_COMPONENT,
   slot: PopupViewerSlots.popupDragWindowRoot
 })(popupsViewerStyles?.popupDragWindowRoot);
-const WindowBaseContentStyled = styled("div", {
-  name: POPUPS_VIEWER_KEY_COMPONENT,
-  slot: PopupViewerSlots.windowBaseContent
-})(popupsViewerStyles?.windowBaseContent);
 styled("div", {
   name: POPUPS_VIEWER_KEY_COMPONENT,
   slot: PopupViewerSlots.pDWHeaderContainer
@@ -36,6 +32,5 @@ styled("div", {
 })(popupsViewerStyles?.pDWContentWrapper);
 export {
   PopupDragWindowRootStyled as P,
-  RootStyled as R,
-  WindowBaseContentStyled as W
+  RootStyled as R
 };

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

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

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

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

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

@@ -6,4 +6,4 @@ import { PopupProps } from './types';
  * @param props
  * @returns
  */
-export declare const Popup: import('react').ForwardRefExoticComponent<PopupProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Popup: import('react').ForwardRefExoticComponent<PopupProps & import('react').RefAttributes<HTMLDivElement | undefined>>;

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

@@ -1,20 +1,21 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useRef, useEffect } 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 { u as usePopupsStore } from "../../../PopupsProvider/hooks/usePopupsStore.js";
+import { P as PopupDragWindowRootStyled } from "../../slots/popupsViewerSlots.js";
+import { u as usePopups } from "../../../PopupsProvider/hooks/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 { M as MemonizedWindowBaseMicroFrontend } from "../../../../../WindowBase/subcomponents/MicroFrontend/MicroFrontend.js";
+import { W as WindowBaseComponent } from "../../../../../WindowBase/subcomponents/Component/index.js";
 import { W as WindowBase } from "../../../../../WindowBase/WindowBase.js";
 const Popup = forwardRef((props, ref) => {
-  const { popupId, containerElement, containerSize, style } = props;
+  const { popupId, containerElement, containerSize, style, onResizeStart, onResizeStop, onDragStart, onDragStop } = 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 { bringPopupOnFront } = usePopupsStore((state) => state.popupsActions, shallow);
+  const { close } = usePopupsStore((state) => state.popupActions, shallow);
+  const refHandler = useRef(null);
   const { collapsed, maximized } = usePopupsStore(
     (state) => ({
       collapsed: state.hashPopups[popupId]?.collapsed || false,
@@ -34,9 +35,7 @@ const Popup = forwardRef((props, ref) => {
     //onTouch,
     memoizedActions,
     loading,
-    version
-  } = usePopups(popupId);
-  const {
+    version,
     status,
     subTitle,
     editionInfo,
@@ -47,8 +46,15 @@ const Popup = forwardRef((props, ref) => {
     defaultPosition,
     bounds,
     onMouseDown,
+    allowHeightResizeContainer,
+    allowWidthResizeContainer,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    selected,
     ...others
-  } = popup || {};
+  } = usePopups(popupId);
   const ownerState = {
     status,
     variant,
@@ -59,11 +65,16 @@ const Popup = forwardRef((props, ref) => {
     maximized
   };
   const onMouseDownLocal = (e) => {
-    setPopupOnTop(popupId);
+    bringPopupOnFront(popupId);
     if (onMouseDown) {
       onMouseDown(e);
     }
   };
+  useEffect(() => {
+    if (popup.enforceVisibleCount && popup.enforceVisibleCount > 0) {
+      refHandler.current?.ensureVisible();
+    }
+  }, [popup.enforceVisibleCount, popupId]);
   if (!popup) {
     return null;
   }
@@ -71,57 +82,62 @@ const Popup = forwardRef((props, ref) => {
     PopupDragWindowRootStyled,
     {
       ownerState,
-      ref,
+      windowRef: ref,
+      ref: refHandler,
+      onResizeStart,
+      onResizeStop,
+      onDragStart,
+      onDragStop,
       hidden: popup.status === "hidden",
       onMouseDown: onMouseDownLocal,
       containerElement,
       containerSize,
       bounds,
       draggable,
-      resizeable: resizable,
+      resizable,
       defaultPosition,
       style: { ...style, zIndex },
+      allowHeightResizeContainer,
+      allowWidthResizeContainer,
+      maxHeight,
+      maxWidth,
+      minHeight,
+      minWidth,
       ...others,
       children: /* @__PURE__ */ jsx(
-        WindowBaseContentStyled,
+        WindowBase,
         {
-          ownerState,
-          children: /* @__PURE__ */ jsx(
-            WindowBase,
+          ...others,
+          version,
+          onClose: () => close(popupId),
+          title: title ?? "",
+          subTitle,
+          iconUrl,
+          editionInfo,
+          actions: memoizedActions,
+          isLoading: loading,
+          windowId: popupId,
+          selected,
+          ...process.env.NODE_ENV !== "production" ? {
+            [TEST_PROP_ID]: getNameDataTestId(
+              POPUPS_VIEWER_CLASS_NAME,
+              "root"
+            )
+          } : {},
+          children: winType === "microfrontend" ? /* @__PURE__ */ jsx(
+            MemonizedWindowBaseMicroFrontend,
+            {
+              moduleId,
+              dynamicMFStore,
+              windowTools,
+              ...mfProps ?? { debugPort: 0, prefix: "" }
+            }
+          ) : /* @__PURE__ */ jsx(
+            WindowBaseComponent,
             {
-              ...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
-                }
-              )
+              dynamicMFStore,
+              windowTools,
+              component
             }
           )
         }

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

@@ -18,4 +18,20 @@ export interface PopupProps {
      * "style" Estilos del popup
      */
     style?: CSSProperties;
+    /**
+     * "onResizeStart" Función que se ejecuta cuando se comienza a redimensionar el popup
+     */
+    onResizeStart?: () => void;
+    /**
+     * "onResizeStop" Función que se ejecuta cuando se termina de redimensionar el popup
+     */
+    onResizeStop?: () => void;
+    /**
+     * "onDragStart" Función que se ejecuta cuando se comienza a arrastrar el popup
+     */
+    onDragStart?: () => void;
+    /**
+     * "onDragStop" Función que se ejecuta cuando se termina de arrastrar el popup
+     */
+    onDragStop?: () => void;
 }

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

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

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

@@ -1,10 +1,17 @@
 import { Theme } from '@mui/material/styles';
-import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { PopupViewerSlots } from './slots/slots';
 import { POPUPS_VIEWER_KEY_COMPONENT } from './constants';
-import { PopupStoreProps, PopupsStore } from '../PopupsProvider/contexts/PopupsContext/types';
+import { PopupStoreProps, PopupsProviderStoreState } from '../PopupsProvider/contexts/PopupsContext/types';
+import { M4LOverridesStyleRules } from '../../../../@types/augmentations';
 export type PopupViewerSlotsType = keyof typeof PopupViewerSlots;
-export type PopupsViewerProps = {};
+export type PopupsViewerProps = {
+    containerElement?: HTMLElement;
+    groupId?: string;
+    onResizeStart?: () => void;
+    onResizeStop?: () => void;
+    onDragStart?: () => void;
+    onDragStop?: () => void;
+};
 export type PopupStatus = 'init' | 'closing' | 'hidden';
 export interface PopupOwnerState extends Pick<PopupStoreProps, 'status' | 'subTitle' | 'editionInfo' | 'zIndex' | 'variant'> {
     /**
@@ -13,7 +20,8 @@ export interface PopupOwnerState extends Pick<PopupStoreProps, 'status' | 'subTi
     isMobile?: boolean;
     collapsed?: boolean;
     maximized?: boolean;
+    isVisible?: boolean;
 }
-export interface PopupsViewerOwnerState extends Pick<PopupsStore, 'baseZindex'>, PopupOwnerState {
+export interface PopupsViewerOwnerState extends Pick<PopupsProviderStoreState, 'baseZindex'>, PopupOwnerState {
 }
-export type PopupsViewerStyles = Partial<OverridesStyleRules<PopupViewerSlotsType, typeof POPUPS_VIEWER_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type PopupsViewerStyles = M4LOverridesStyleRules<PopupViewerSlotsType, typeof POPUPS_VIEWER_KEY_COMPONENT, Theme>;

package/contexts/AppearanceComponentContext/AppearanceComponentContext.d.ts

@@ -11,6 +11,14 @@ export declare const AppearanceComponentContext: import('react').Context<(Omit<O
 }) | null>;
 interface AppearanceComponentContextProps extends Partial<AppearanceComponentState> {
     children: ReactNode;
+    /**
+     * "storeId" Id del store
+     */
+    storeId?: string;
+    /**
+     * "storeDevtoolsEnabled" determina si se debe usar devtools para el store
+     */
+    storeDevtoolsEnabled?: boolean;
 }
 /**
  * TODO: Documentar

package/contexts/AppearanceComponentContext/AppearanceComponentContext.js

@@ -4,12 +4,13 @@ import { DEFAULT_SIZE } from "@m4l/styles";
 import { c as createAppearanceComponentStore } from "./AppearanceComponentStore.js";
 const AppearanceComponentContext = createContext(null);
 function AppearanceComponentProvider(props) {
-  const { defaultSize, children } = props;
+  const { defaultSize, children, storeId, storeDevtoolsEnabled } = props;
   const appearanceComponentStoreRef = useRef();
   if (!appearanceComponentStoreRef.current) {
     appearanceComponentStoreRef.current = createAppearanceComponentStore({
-      defaultSize: defaultSize || DEFAULT_SIZE
-    });
+      defaultSize: defaultSize || DEFAULT_SIZE,
+      storeId
+    }, storeDevtoolsEnabled);
   }
   return /* @__PURE__ */ jsx(AppearanceComponentContext.Provider, { value: appearanceComponentStoreRef.current, children });
 }

package/contexts/AppearanceComponentContext/AppearanceComponentStore.d.ts

@@ -1,5 +1,12 @@
 import { Sizes } from '@m4l/styles';
 export interface AppearanceComponentState {
+    /**
+     * "storeId" Id del store
+     */
+    storeId?: string;
+    /**
+     * "defaultSize" Tamaño por defecto
+     */
     defaultSize: Sizes;
 }
 export interface AppearanceComponentActions {
@@ -11,7 +18,7 @@ export type AppearanceComponentStore = AppearanceComponentState & AppearanceComp
 /**
  * TODO: Documentar
  */
-export declare const createAppearanceComponentStore: (initProps: AppearanceComponentState) => Omit<Omit<import('zustand').StoreApi<AppearanceComponentStore>, "setState"> & {
+export declare const createAppearanceComponentStore: (initProps: AppearanceComponentState, storeDevtoolsEnabled?: boolean) => Omit<Omit<import('zustand').StoreApi<AppearanceComponentStore>, "setState"> & {
     setState<A extends string | {
         type: unknown;
     }>(partial: AppearanceComponentStore | Partial<AppearanceComponentStore> | ((state: AppearanceComponentStore) => AppearanceComponentStore | Partial<AppearanceComponentStore>), replace?: boolean | undefined, action?: A | undefined): void;

package/contexts/AppearanceComponentContext/AppearanceComponentStore.js

@@ -2,9 +2,16 @@ import { createStore } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 import { DEFAULT_SIZE } from "@m4l/styles";
-const createAppearanceComponentStore = (initProps) => {
+const createDevtools = (immerMiddlewere, config) => {
+  const { enabled = false } = config;
+  if (enabled && process.env.NODE_ENV === "development") {
+    return devtools(immerMiddlewere, config);
+  }
+  return immerMiddlewere;
+};
+const createAppearanceComponentStore = (initProps, storeDevtoolsEnabled = false) => {
   return createStore(
-    devtools(
+    createDevtools(
       immer((set) => ({
         defaultSize: initProps.defaultSize ?? DEFAULT_SIZE,
         actions: {
@@ -18,7 +25,7 @@ const createAppearanceComponentStore = (initProps) => {
           }
         }
       })),
-      { name: "AppearanceComponentStore" }
+      { name: `AppearanceComponentStore: ${initProps.storeId}`, enabled: storeDevtoolsEnabled }
     )
   );
 };

package/contexts/index.d.ts

@@ -1,4 +1,4 @@
-export { DynamicMFParmsProvider, DynamicMFParmsContext, MemonizedDynamicMFParmsProvider, } from '../components/areas/contexts/DynamicMFParmsContext';
+export { DynamicMFParmsProvider, DynamicMFParmsContext, MemonizedDynamicMFParmsProvider, } from '../components/WindowBase/contexts/DynamicMFParmsContext';
 export * from './ModalContext/index';
 export * from './ModalContext/types';
 export type { FormInitialValues, FormStatusLoad, } from '../components/hook-form/RHFormContext/types';

package/hooks/useDataGridPersistence/useDataGridPersistence.js

@@ -1,7 +1,7 @@
 import { useState, useCallback } from "react";
 import { g as getColumnsConfigCookie } from "./helpers.js";
 import { C as COOKIE_COLUMNS_WIDTHS, a as COOKIE_COLUMNS_CONFIG } from "./constants.js";
-import { u as useWindowToolsMF } from "../../components/areas/hooks/useWindowToolsMF/index.js";
+import { u as useWindowToolsMF } from "../../components/WindowBase/hooks/useWindowToolsMF/index.js";
 const useDataGridPersistence = (props) => {
   const { prefixCookie } = props;
   const { setCookie, getCookie } = useWindowToolsMF();
@@ -14,11 +14,11 @@ const useDataGridPersistence = (props) => {
   const onChangeUserColumns = useCallback((newProps) => {
     const { reason, userConfig } = newProps;
     if (reason === "columnsConfig") {
-      setCookie(COOKIE_COLUMNS_CONFIG, "window", userConfig);
+      setCookie(prefixCookie ? `${prefixCookie}_${COOKIE_COLUMNS_CONFIG}` : COOKIE_COLUMNS_CONFIG, "window", userConfig);
     } else if (reason === "columnsWidths") {
-      setCookie(COOKIE_COLUMNS_WIDTHS, "window", userConfig);
+      setCookie(prefixCookie ? `${prefixCookie}_${COOKIE_COLUMNS_WIDTHS}` : COOKIE_COLUMNS_WIDTHS, "window", userConfig);
     }
-  }, [setCookie]);
+  }, [setCookie, prefixCookie]);
   return {
     onChangeUserColumns,
     defaultUserColumns

package/hooks/useDynamicFilterAndSort/types.d.ts

@@ -4,7 +4,7 @@ import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { DynamicFilterAndSortSlots } from './slots/DynamicFilterAndSortEnum';
 import { M4LDYNAMIC_KEY_FILTER_AND_SORT } from './constants';
 import { Theme } from '@mui/material/styles';
-import { WindowToolsMF } from '../../components/areas/contexts/WindowToolsMFContext/types';
+import { WindowToolsMF } from '../../components/WindowBase';
 interface ChangeFilter {
     filters?: Array<InitialFilterApplied>;
     rawFilters?: Array<RawFilterFieldApply>;

package/hooks/useSizeContainer/index.js

@@ -16,8 +16,8 @@ function useSizeContainer(containerElement) {
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
         throttleResize({
-          containerWidth: entry.contentRect.width,
-          containerHeight: entry.contentRect.height
+          containerWidth: Math.round(entry.contentRect.width),
+          containerHeight: Math.round(entry.contentRect.height)
         });
       }
     });