@m4l/components 9.2.0 → 9.2.2

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

@@ -5,7 +5,9 @@ import { u as useAreasStore } from "../../../../../../hooks/useAreas/index.js";
 import { a as areasViewerClasses } from "../../../../classes/index.js";
 import clsx from "clsx";
 import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../../../../../contexts/AreasContext/helpers/helper.js";
-import { d as dragResizeWindowClasses } from "../../../../../../../DragResizeWindow/classes/index.js";
+import { M as MemonizePopupsViewer } from "../../../../../../../popups/components/PopupsViewer/PopupsViewer.js";
+import { useState } from "react";
+import { d as dragResizeWindowRNDClasses } from "../../../../../../../DragResizeWindowRND/classes/index.js";
 import { w as withSizeProvider } from "../../../../../../../GridLayout/subcomponents/withSizeProvider/index.js";
 import { R as Responsive } from "../../../../../../../GridLayout/subcomponents/Responsive/index.js";
 const ResponsiveGridLayout = withSizeProvider(Responsive);
@@ -20,9 +22,36 @@ const AreaGridLayout = (props) => {
     (state) => state.areaActions,
     shallow
   );
+  const [gridLayouContainer, setGridLayouContainer] = useState(void 0);
+  const onResizeStart = () => {
+    if (gridLayouContainer) {
+      gridLayouContainer.classList.add(dragResizeWindowRNDClasses.resizing);
+    }
+  };
+  const onResizeStop = () => {
+    if (gridLayouContainer) {
+      gridLayouContainer.classList.remove(dragResizeWindowRNDClasses.resizing);
+    }
+  };
+  const onDragStart = () => {
+    if (gridLayouContainer) {
+      gridLayouContainer.classList.add(dragResizeWindowRNDClasses.dragging);
+    }
+  };
+  const onDragStop = () => {
+    if (gridLayouContainer) {
+      gridLayouContainer.classList.remove(dragResizeWindowRNDClasses.dragging);
+    }
+  };
+  const setContainerElementRef = (nodeElement) => {
+    if (nodeElement && nodeElement !== gridLayouContainer) {
+      setGridLayouContainer(nodeElement);
+    }
+  };
   return /* @__PURE__ */ jsx(
     ResponsiveGridLayout,
     {
+      ref: setContainerElementRef,
       autoSize: false,
       compactType: "vertical",
       measureBeforeMount: true,
@@ -33,8 +62,8 @@ const AreaGridLayout = (props) => {
       ),
       layouts,
       onLayoutChange: (layout, newLayouts) => onBreakpointsLayoutsChange(areaId, layout, newLayouts),
-      draggableHandle: `.${dragResizeWindowClasses.draggableHandle}`,
-      draggableCancel: `.${dragResizeWindowClasses.draggableCancel}`,
+      draggableHandle: `.${dragResizeWindowRNDClasses.draggableHandle}`,
+      draggableCancel: `.${dragResizeWindowRNDClasses.draggableCancel}`,
       layoutItemRender: (p) => {
         if (hashLayoutItems.indexOf(p.i) === -1) {
           return /* @__PURE__ */ jsx(Fragment, {});
@@ -54,7 +83,18 @@ const AreaGridLayout = (props) => {
         onContainerChange(areaId, e);
       },
       preventCollision: false,
-      maximizeId: maximizedId
+      maximizeId: maximizedId,
+      children: /* @__PURE__ */ jsx(
+        MemonizePopupsViewer,
+        {
+          groupId: areaId,
+          containerElement: gridLayouContainer,
+          onResizeStart,
+          onResizeStop,
+          onDragStart,
+          onDragStop
+        }
+      )
     }
   );
 };

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/Window.d.ts

@@ -1,5 +1,11 @@
 import { default as React } from 'react';
-import { WindowProps } from './types';
+/**
+ *
+ */
+export type WindowProps = {
+    windowId: string;
+    areaId?: string;
+};
 /**
  * Componente Window
  *
@@ -7,10 +13,6 @@ import { WindowProps } from './types';
  * Lee los datos y configuraciones de la ventana desde el store de Zustand,
  * crea herramientas para el microfrontend o componente y utiliza un hook
  * personalizado para definir las acciones del header.
- * @param {WindowProps} props - Propiedades del componente, que incluyen areaId y windowId.
- * @returns {JSX.Element|null} Renderiza la ventana o null si aún no se carga.
- * @example
- * <Window areaId="area_123" windowId="win_456" />
  */
 export declare const Window: (props: WindowProps) => import("react/jsx-runtime").JSX.Element | null;
 export declare const MemonizedWindow: React.MemoExoticComponent<(props: WindowProps) => import("react/jsx-runtime").JSX.Element | null>;

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

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { M as MemonizedMicroFrontend } from "./subcomponents/MicroFrontend/MicroFrontend.js";
-import { C as Component } from "./subcomponents/Component/index.js";
+import { M as MemonizedWindowBaseMicroFrontend } from "../../../../../../../WindowBase/subcomponents/MicroFrontend/MicroFrontend.js";
+import { W as WindowBaseComponent } from "../../../../../../../WindowBase/subcomponents/Component/index.js";
 import { T as TEST_PROP_ID } from "../../../../../../../../test/constants_no_mock.js";
 import { a as getNameDataTestId } from "../../../../../../../../test/getNameDataTestId.js";
 import { A as AREAS_VIEWER_CLASS_NAME } from "../../../../../../constants.js";
-import { u as useWindow } from "./hooks/useWindow/useWindow.js";
-import { W as WindowBase } from "../../../../../../../WindowBase/WindowBase.js";
+import { u as useWindow } from "./hooks/useWindow.js";
+import { W as WindowBaseStyled } from "../../../../slots/AreasViewerSlots.js";
 const Window = (props) => {
   const { areaId, windowId } = props;
   const {
@@ -26,13 +26,14 @@ const Window = (props) => {
     windowTools,
     onTouch,
     memoizedActions
-  } = useWindow(areaId, windowId);
+  } = useWindow(windowId, areaId);
   if (status === void 0) {
     return null;
   }
   return /* @__PURE__ */ jsx(
-    WindowBase,
+    WindowBaseStyled,
     {
+      ownerState: {},
       title: `${title}${moduleCount ? `:${moduleCount}` : ""}`,
       iconUrl,
       isLoading: loading,
@@ -50,7 +51,7 @@ const Window = (props) => {
         )
       } : {},
       children: status === "loaded" ? winType === "microfrontend" ? /* @__PURE__ */ jsx(
-        MemonizedMicroFrontend,
+        MemonizedWindowBaseMicroFrontend,
         {
           moduleId,
           dynamicMFStore,
@@ -58,9 +59,8 @@ const Window = (props) => {
           ...mfProps
         }
       ) : /* @__PURE__ */ jsx(
-        Component,
+        WindowBaseComponent,
         {
-          moduleId,
           dynamicMFStore,
           windowTools,
           component

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useHeaderActions.d.ts

@@ -0,0 +1,12 @@
+import { WindowBaseAction } from '../../../../../../../../WindowBase/types';
+import { UseHeaderActionsParams } from '../types';
+/**
+ * Hook useHeaderActions
+ *
+ * Retorna las acciones del header de una ventana. Izquierda, derecha y dentro del menu.
+ */
+export declare const useHeaderActions: ({ windowId, areaId, }: UseHeaderActionsParams) => {
+    leftActions: WindowBaseAction[];
+    insideActions: WindowBaseAction[];
+    rightActions: WindowBaseAction[];
+};

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

@@ -0,0 +1,58 @@
+import { useMemo } from "react";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { u as useAreasStore } from "../../../../../../../hooks/useAreas/index.js";
+import { shallow } from "zustand/shallow";
+import { useIsMobile } from "@m4l/graphics";
+import { g as getLeftActions, a as getInsideMenuActions } from "../../../../../../../../WindowBase/helpers.js";
+import { u as useRightActions } from "./useRightActions.js";
+const useHeaderActions = ({
+  windowId,
+  areaId
+}) => {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
+  const isMobile = useIsMobile();
+  const urlPrefix = `${host_static_assets}/${environment_assets}`;
+  const moduleActions = useAreasStore(
+    (state) => {
+      const window = state.hashWindows[windowId];
+      return window?.moduleActions || [];
+    },
+    shallow
+  );
+  const leftActions = useMemo(() => {
+    return getLeftActions(isMobile, moduleActions);
+  }, [!isMobile, moduleActions]);
+  const windowOptions = useAreasStore(
+    (state) => state.hashWindows[windowId]?.windowOptions,
+    shallow
+  );
+  const { saveModuleCookies, resetModuleCookies } = useAreasStore(
+    (state) => state.windowActions,
+    shallow
+  );
+  const insideActions = useMemo(() => {
+    return getInsideMenuActions({
+      windowId,
+      isMobile,
+      moduleActions,
+      urlPrefix,
+      saveModuleCookies,
+      resetModuleCookies,
+      windowOptions: windowOptions || { allowPersistCookies: false },
+      getLabel
+    });
+  }, [windowId, isMobile, moduleActions, urlPrefix, saveModuleCookies, resetModuleCookies, windowOptions, getLabel]);
+  const rightActions = useRightActions({
+    windowId,
+    areaId
+  });
+  return {
+    leftActions,
+    insideActions,
+    rightActions
+  };
+};
+export {
+  useHeaderActions as u
+};

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useRightActions.d.ts

@@ -0,0 +1,6 @@
+import { WindowBaseAction } from '../../../../../../../../WindowBase/types';
+import { UseHeaderActionsParams } from '../types';
+/**
+ * Hook useRightActions, retorna las acciones de maximizar y minimizar una ventana, colapsar y expandir una ventana
+ */
+export declare const useRightActions: ({ windowId, areaId, }: UseHeaderActionsParams) => WindowBaseAction[];

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

@@ -0,0 +1,88 @@
+import { useMemo } from "react";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { u as useAreasStore } from "../../../../../../../hooks/useAreas/index.js";
+import { shallow } from "zustand/shallow";
+import { I as ICONS } from "../../../../../../../icons.js";
+import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../../../../../dictionary.js";
+const useRightActions = ({
+  windowId,
+  areaId
+}) => {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
+  const collapsed = useAreasStore(
+    (state) => {
+      const area = areaId ? state.hashAreas[areaId] : void 0;
+      if (area && area.currentBreakpoint && area.layouts && area.layouts[area.currentBreakpoint]) {
+        return area.layouts[area.currentBreakpoint].find(
+          (li) => li.i === windowId
+        )?.colapsed || false;
+      }
+      return false;
+    },
+    shallow
+  );
+  const maximizedId = useAreasStore(
+    (state) => areaId ? state.hashAreas[areaId]?.maximizedId : void 0,
+    shallow
+  );
+  const { maximizeLayout, normalizeLayouts, colapseLayoutItem, unColapseLayoutItem } = useAreasStore((state) => state.areaActions);
+  const rightActions = useMemo(() => {
+    const actions = [];
+    actions.push({
+      place: "right",
+      key: "maximize",
+      iconUrl: maximizedId ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NORMALIZE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.MAXIMIZE}`,
+      label: maximizedId ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_minimize_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_maximize_window)),
+      /**
+       * Acción de maximize/normalize.
+       */
+      onClick: () => {
+        if (areaId) {
+          if (maximizedId) {
+            normalizeLayouts(areaId);
+          } else {
+            maximizeLayout(areaId, windowId);
+          }
+        }
+      },
+      disabled: false
+    });
+    actions.push({
+      place: "right",
+      key: "collapseToggle",
+      iconUrl: !collapsed ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.COLAPSE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.UNCOLPASE}`,
+      label: !collapsed ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_collapse_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_uncollapse_window)),
+      /**
+       * Acción de collapse/expand.
+       */
+      onClick: () => {
+        if (areaId) {
+          if (collapsed) {
+            unColapseLayoutItem(areaId, windowId);
+          } else {
+            colapseLayoutItem(areaId, windowId);
+          }
+        }
+      },
+      disabled: !(maximizedId === void 0)
+    });
+    return actions;
+  }, [
+    collapsed,
+    maximizedId,
+    host_static_assets,
+    environment_assets,
+    getLabel,
+    areaId,
+    windowId,
+    colapseLayoutItem,
+    unColapseLayoutItem,
+    normalizeLayouts,
+    maximizeLayout
+  ]);
+  return rightActions;
+};
+export {
+  useRightActions as u
+};

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/{useWindow/useWindow.d.ts → useWindow.d.ts}

@@ -1,15 +1,15 @@
-import { WindowToolsMF } from '../../../../../../../../contexts';
+import { WindowToolsMF } from '../../../../../../../../WindowBase/contexts';
 /**
  * Hook useWindow
  *
  * Este hook encapsula toda la lógica relacionada con el estado y las funciones necesarias
  * para el componente Window. Retorna un objeto con el estado, las acciones y las herramientas
  * de la ventana.
- * @param {string} areaId - Identificador del área.
  * @param {string} windowId - Identificador de la ventana.
+ * @param {string} areaId - Identificador del área.
  * @returns {Object} Un objeto con el estado, las acciones y las herramientas de la ventana.
  */
-export declare const useWindow: (areaId: string, windowId: string) => {
+export declare const useWindow: (windowId: string, areaId?: string) => {
     emergeType: "layout" | "popup" | "modal";
     moduleId: string;
     winType: "component" | "microfrontend";
@@ -21,11 +21,11 @@ export declare const useWindow: (areaId: string, windowId: string) => {
     mfProps: any;
     component: any;
     loading: boolean;
-    status: import('../../../../../../../../types').WindowStatus;
-    dynamicMFStore: Omit<import('zustand').StoreApi<import('../../../../../../../../contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions>, "setState"> & {
-        setState(nextStateOrUpdater: import('../../../../../../../../contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions | Partial<import('../../../../../../../../contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<import('../../../../../../../../contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions>) => void), shouldReplace?: boolean | undefined): void;
+    status: import('../../../../../../../types').WindowStatus;
+    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;
     onTouch: () => void;
-    memoizedActions: import('../../../../../../../../../WindowBase/types').WindowBaseAction[];
+    memoizedActions: import('../../../../../../../../WindowBase/types').WindowBaseAction[];
 };

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

@@ -1,12 +1,13 @@
 import { useMemo, useEffect } from "react";
 import { shallow } from "zustand/shallow";
-import { u as useAreasStore } from "../../../../../../../../hooks/useAreas/index.js";
-import { u as useHeaderActions } from "../useHeaderActions/useHeaderActions.js";
-import { c as createToaster } from "../../../../../../../../../ToastContainer/helpers/toaster.js";
-const useWindow = (areaId, windowId) => {
+import { u as useAreasStore } from "../../../../../../../hooks/useAreas/index.js";
+import { u as useHeaderActions } from "./useHeaderActions.js";
+import { u as usePopupsStore } from "../../../../../../../../popups/components/PopupsProvider/hooks/usePopupsStore.js";
+import { c as createToaster } from "../../../../../../../../ToastContainer/helpers/toaster.js";
+const useWindow = (windowId, areaId) => {
   const [emergeType, moduleId, winType, title, iconUrl, version, moduleCount, selected, loading, status, dynamicMFStore] = useAreasStore((state) => {
     const window = state.hashWindows[windowId];
-    const selected2 = state.hashAreas[areaId]?.currentLayoutId === windowId || state.hashAreas[areaId]?.currentPopUpId === windowId;
+    const selected2 = areaId ? state.hashAreas[areaId]?.currentLayoutId === windowId : false;
     return [
       window?.emergeType,
       window?.moduleId,
@@ -28,16 +29,18 @@ const useWindow = (areaId, windowId) => {
   );
   const { setActions, getCookie, getCookies, setCookie, close, startProgress, stopProgress, setFnQueryClose, setWindowTitle, loadCookiesFromApi } = useAreasStore((state) => state.windowActions, shallow);
   const { selectLayout } = useAreasStore((state) => state.areaActions, shallow);
+  const { setSelectedPopupId } = usePopupsStore((state) => state.popupsActions, shallow);
   const onTouch = () => {
-    if (!selected) {
+    if (!selected && emergeType === "layout" && areaId) {
       selectLayout(areaId, windowId);
+      setSelectedPopupId(areaId, void 0);
     }
   };
   const windowTools = useMemo(
     () => ({
       getWindowId: () => windowId,
-      setActions: (newActions) => {
-        setActions(windowId, newActions, version);
+      setActions: (newActions, newVersion) => {
+        setActions(windowId, newActions, newVersion);
       },
       getCookie: (id) => getCookie(windowId, id),
       getCookies: (type) => getCookies(windowId, type),
@@ -65,10 +68,9 @@ const useWindow = (areaId, windowId) => {
       loadCookiesFromApi(windowId);
     }
   }, [status, loadCookiesFromApi, windowId]);
-  const { leftActions, menuActions, rightActions } = useHeaderActions({
+  const { leftActions, insideActions: menuActions, rightActions } = useHeaderActions({
     windowId,
-    areaId,
-    menuActions: []
+    areaId
   });
   const memoizedActions = useMemo(() => {
     return [...leftActions, ...menuActions, ...rightActions];

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/types.d.ts

@@ -1,8 +1,12 @@
-import { WindowBaseAction } from '../../../../../../../WindowBase/types';
-import { WindowBaseProps } from '../../../../../../types';
-export interface WindowProps extends Pick<WindowBaseProps, 'windowId' | 'areaId'> {
+import { WindowBaseAction } from '../../../../../../../../../src/components/WindowBase/types';
+import { AreaWindowBaseProps } from '../../../../../../types';
+export interface WindowProps extends Pick<AreaWindowBaseProps, 'windowId' | 'areaId'> {
     /**
      * Acciones que se mostrarán en el header
      */
     actions?: WindowBaseAction[];
 }
+export interface UseHeaderActionsParams {
+    windowId: string;
+    areaId?: string;
+}

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/WindowModal/WindowModal.d.ts

@@ -1,8 +1,9 @@
 import { default as React } from 'react';
-import { ModalProps } from '../../../../../../types';
-import { DialogProperties } from '../../../../../../../ModalDialog/types';
+export type ModalProps = {
+    windowId: string;
+};
 /**
  * A draggable and resizable window modal component.
  */
-export declare const WindowModal: (props: ModalProps, dialogProperties: DialogProperties) => import("react/jsx-runtime").JSX.Element;
-export declare const MemonizedWindowModal: React.MemoExoticComponent<(props: ModalProps, dialogProperties: DialogProperties) => import("react/jsx-runtime").JSX.Element>;
+export declare const AreaWindowModal: (props: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AreaMemonizedWindowModal: React.MemoExoticComponent<(props: ModalProps) => import("react/jsx-runtime").JSX.Element>;

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

@@ -1,46 +1,46 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import React, { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
 import { u as useAreasStore } from "../../../../../../hooks/useAreas/index.js";
 import { W as Window } from "../Window/Window.js";
 import { useIsMobile } from "@m4l/graphics";
 import { b as WrapperWindowModalStyled } from "../../../../slots/AreasViewerSlots.js";
 import { u as useStateRef } from "../../../../../../../../hooks/useStateRef/index.js";
-import { D as DragResizeWindow } from "../../../../../../../DragResizeWindow/DragResizeWindow.js";
+import { D as DragResizeWindowRND } from "../../../../../../../DragResizeWindowRND/DragResizeWindowRND.js";
 import { D as Dialog } from "../../../../../../../mui_extended/Dialog/Dialog.js";
 const WrapperWindowModalWithRef = React.forwardRef(
   (props, ref) => /* @__PURE__ */ jsx(Dialog, { ref, ...props })
 );
-const WindowModal = (props, dialogProperties) => {
-  const { initialWidth, initialHeight, maxWidth, maxHeight } = dialogProperties;
+const AreaWindowModal = (props) => {
   const { windowId } = props;
-  const { onClose } = useAreasStore((state) => state.hashWindowsModals[windowId]);
+  const { onClose } = useAreasStore((state) => state.hashWindows[windowId]);
+  const { width = 400, height = 200, minWindowWidth = 400, minWindowHeight = 200 } = useAreasStore(
+    (state) => state.hashWindows[windowId].emergeType === "modal" ? state.hashWindows[windowId].modalProps : {
+      width: 400,
+      height: 200,
+      minWindowWidth: 400,
+      minWindowHeight: 200
+    }
+  );
   const isMobile = useIsMobile();
   const [containerRef, setContainerRef] = useStateRef(null);
-  useEffect(() => {
-    const container = containerRef;
-    if (!container) {
-      console.warn("El containerRef es null en useLayoutEffect");
-      return;
-    }
-  }, [initialHeight, initialWidth, containerRef]);
-  const topPosition = Math.max(0, window.innerHeight / 2 - (initialHeight ?? 100) / 2);
-  const leftPosition = Math.max(0, window.innerWidth / 2 - (initialWidth ?? 100) / 2);
+  const leftPosition = Math.max(0, window.innerWidth / 2 - (width ?? 100) / 2);
+  const topPosition = Math.max(0, window.innerHeight / 2 - (height ?? 100) / 2);
   const DraggableComponent = () => {
-    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-      DragResizeWindow,
+    return /* @__PURE__ */ jsx(
+      DragResizeWindowRND,
       {
         containerElement: containerRef ?? void 0,
-        minWindowWidth: maxWidth,
-        minWindowHeight: maxHeight,
+        minWindowWidth,
+        minWindowHeight,
         bounds: { left: 0, top: 0, right: 0, bottom: 0 },
         resizeHandles: ["se", "nw", "sw", "ne", "n", "e", "s", "w"],
         defaultPosition: {
-          vertical: { top: topPosition, height: initialHeight ?? 100 },
-          horizontal: { left: leftPosition, width: initialWidth ?? 200 }
+          vertical: { top: topPosition, height },
+          horizontal: { left: leftPosition, width }
         },
-        children: /* @__PURE__ */ jsx(Window, { ...props })
+        children: /* @__PURE__ */ jsx(Window, { windowId, areaId: void 0 })
       }
-    ) });
+    );
   };
   return /* @__PURE__ */ jsx(
     WrapperWindowModalWithRef,
@@ -70,7 +70,7 @@ const WindowModal = (props, dialogProperties) => {
     }
   );
 };
-const MemonizedWindowModal = React.memo(WindowModal);
+const AreaMemonizedWindowModal = React.memo(AreaWindowModal);
 export {
-  MemonizedWindowModal as M
+  AreaMemonizedWindowModal as A
 };

package/components/areas/components/AreasViewer/types.d.ts

@@ -18,5 +18,7 @@ export interface AreasViewerProps {
      */
     [key: string]: unknown;
 }
-export type AreasViewerOwnerState = Pick<AreaProps, 'selected'>;
+export type AreasViewerOwnerState = Pick<AreaProps, 'selected'> & {
+    isDraggingResizingPopup?: boolean;
+};
 export type AreasViewerStyles = M4LOverridesStyleRules<AreasViewerType, typeof AREAS_VIEWER_KEY_COMPONENT, Theme>;

package/components/areas/components/index.d.ts

@@ -1,3 +1,3 @@
 export * from './AreasAdmin/AreasAdmin';
 export * from './AreasViewer/AreasViewer';
-export type { NewWindowProps as NewWindow } from '../types';
+export type { EmmitNewWindowProps as NewWindow } from '../types';

package/components/areas/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const COMPONENT_TEST_ID = "M4LAreasViewer";
 export declare const AREAS_VIEWER_CLASS_NAME = "M4LAreasViewer";
 export declare const AREAS_ADMIN_CLASS_NAME = "M4LAreasAdmin";
+export declare const AREAS_STORE_ID = "M4LAreasStore";

package/components/areas/constants.js

@@ -1,4 +1,6 @@
 const AREAS_VIEWER_CLASS_NAME = "M4LAreasViewer";
+const AREAS_STORE_ID = "M4LAreasStore";
 export {
-  AREAS_VIEWER_CLASS_NAME as A
+  AREAS_VIEWER_CLASS_NAME as A,
+  AREAS_STORE_ID as a
 };

package/components/areas/contexts/AreasContext/helpers/generateModuleCount.d.ts

@@ -1,4 +1,4 @@
-import { WindowStateProps } from '../../../types';
+import { AreaWindowProps } from '../../../types';
 /**
  * Función que genera un string con el número de módulos repetidos en una misma área.
  * Esta función recibe un hash de ventanas y evalúa cada ventana para contar cuántas veces se repite un módulo en una misma área
@@ -6,4 +6,4 @@ import { WindowStateProps } from '../../../types';
  * @param hashWindows
  * @returns number con el número de módulos repetidos en una mista area
  */
-export declare const generateModuleCount: (areaId: string, moduleId: string, hashWindows: Record<string, WindowStateProps>) => number;
+export declare const generateModuleCount: (areaId: string, moduleId: string, hashWindows: Record<string, AreaWindowProps>) => number;

package/components/areas/contexts/AreasContext/helpers/getWindowForAreaTest.d.ts

@@ -1,4 +1,4 @@
-import { NewWindowProps } from '../../../types';
+import { EmmitNewWindowProps } from '../../../types';
 export declare const moduleIdsTest: {
     users: {
         moduleId: string;
@@ -29,5 +29,5 @@ interface WindowForAreaTest {
  * @param moduleId Identificador del módulo.
  * *****************************************************************************************
  */
-export declare const getWindowForAreaTest: ({ title, moduleId }: WindowForAreaTest) => NewWindowProps;
+export declare const getWindowForAreaTest: ({ title, moduleId }: WindowForAreaTest) => EmmitNewWindowProps;
 export {};

package/components/areas/contexts/AreasContext/helpers/helper.d.ts

@@ -1,5 +1,5 @@
 import { WritableDraft } from 'immer/dist/internal';
-import { Area, AreasStateWithActions } from '../types';
+import { Area, AreasStoreStateWithActions } from '../types';
 import { WindowState } from '../../../types';
 import { Layouts } from '../../../../GridLayout/types';
 export declare const PADDING_GRIDLAYOUT = 11;
@@ -56,7 +56,7 @@ export declare const DEFAULT_AREA: Omit<Area, 'id' | 'name' | 'viewMode'>;
  * @param state
  * @returns
  */
-export declare const addArea: (state: WritableDraft<AreasStateWithActions>) => string;
+export declare const addArea: (state: WritableDraft<AreasStoreStateWithActions>) => string;
 /**
  * Actualiza la clases basado en owner state
  * @param state immer State
@@ -64,7 +64,7 @@ export declare const addArea: (state: WritableDraft<AreasStateWithActions>) => s
 /**
  * TODO: Documentar
  */
-export declare const getCurrentArea: (state: WritableDraft<AreasStateWithActions> | AreasStateWithActions) => Area;
+export declare const getCurrentArea: (state: WritableDraft<AreasStoreStateWithActions> | AreasStoreStateWithActions) => Area;
 /**
  * TODO: Documentar
  */
@@ -80,7 +80,7 @@ export declare function deleteLayoutFromBreakPoints(state: WritableDraft<Area>,
 /**
  * TODO: Documentar
  */
-export declare function getDataFromResponse(data: any, state: WritableDraft<AreasStateWithActions>, areaId: string): {
+export declare function getDataFromResponse(data: any, state: WritableDraft<AreasStoreStateWithActions>, areaId: string): {
     newBreakPointsLayouts: Layouts;
     newHashLayoutItems: string[];
 };