@m4l/components 0.1.42 → 0.1.45

package/components/LanguagePopover/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LanguagePopover";

package/components/LanguagePopover/classes/index.d.ts

@@ -0,0 +1,9 @@
+import { LanguagePopoverClassesType } from './types';
+export declare const languagePopoverClasses: LanguagePopoverClassesType;
+export declare function getM4LanguagePopoverClassesUtilityClass(slot: string): string;
+export declare const useUtilityClasses: () => {
+    root: string;
+    containerItems: string;
+    containerProgress: string;
+    labelItem: string;
+};

package/components/LanguagePopover/classes/types.d.ts

@@ -0,0 +1,7 @@
+export interface LanguagePopoverClassesType {
+    root: string;
+    containerItems: string;
+    containerProgress: string;
+    labelItem: string;
+}
+export declare type LanguagePopoverClassesKey = keyof LanguagePopoverClassesType;

package/components/LanguagePopover/{index.cbc4b282.js → index.26b694ef.js}

@@ -1,22 +1,30 @@
 import { useState, useEffect } from "react";
-import { styled, Stack, MenuItem } from "@mui/material";
-import { I as Image } from "../Image/index.93d5f37f.js";
+import { styled, generateUtilityClasses, generateUtilityClass, Stack, MenuItem } from "@mui/material";
+import { I as Image } from "../Image/index.aa24e982.js";
 import { useLocales } from "@m4l/graphics";
 import { useEnvironment, useNetwork } from "@m4l/core";
-import "../Icon/index.8d754623.js";
+import "../Icon/index.f6e8d810.js";
 import "@mui/material/styles";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import "../mui_extended/Accordion/index.a541c71c.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import "../mui_extended/IconButton/index.1318a283.js";
+import "../mui_extended/Accordion/index.1d513477.js";
 import "../mui_extended/Avatar/index.fe06afd7.js";
 import "react-router-dom";
 import "@mui/material/Button";
+import { I as ImageButton } from "../mui_extended/Button/index.8406ed5b.js";
 import { C as CircularProgress } from "../mui_extended/CircularProgress/index.ad569afd.js";
 import "@mui/lab";
-import { I as ImageButton } from "../mui_extended/Button/index.86a155a2.js";
-import { P as Popover } from "../mui_extended/Popover/index.53c77d23.js";
-import "../mui_extended/MenuActions/index.ee17bddd.js";
-import "../mui_extended/Pager/index.74d3f5fc.js";
+import { P as Popover } from "../mui_extended/Popover/index.58c49cc0.js";
+import "../mui_extended/MenuActions/index.1261168c.js";
+import "../mui_extended/Pager/index.80ccec47.js";
 import "../mui_extended/Tab/index.e0653a0a.js";
+import "../mui_extended/Typography/index.be3a279a.js";
+import { unstable_composeClasses } from "@mui/base";
+const LanguagePopoverRoot = styled("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LanguagePopover?.styleOverrides
+}));
 const LabelItem = styled("span")(({
   theme
 }) => ({
@@ -32,7 +40,32 @@ const ContainerMenuItems = styled("div")(() => ({
   display: "flex",
   flexDirection: "column"
 }));
-function LanguagePopover() {
+const componentName = "M4LanguagePopover";
+generateUtilityClasses(componentName, [
+  "root",
+  "containerItems",
+  "containerProgress",
+  "labelItem"
+]);
+function getM4LanguagePopoverClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    containerItems: ["containerItems"],
+    containerProgress: ["containerProgress"],
+    labelItem: ["labelItem"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getM4LanguagePopoverClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+function LanguagePopover(props) {
+  const {
+    testingProps
+  } = props;
   const {
     currentLocale,
     onChangeLocale
@@ -43,9 +76,9 @@ function LanguagePopover() {
   const {
     networkOperation
   } = useNetwork();
-  const [open, setOpen] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [allLocales, setAllLocales] = useState([]);
+  const [open, setOpen] = useState(testingProps?.open || null);
+  const [loading, setLoading] = useState(testingProps?.loading || false);
+  const [allLocales, setAllLocales] = useState(testingProps?.allLocales || []);
   const handleOpen = (event) => {
     setOpen(event.currentTarget);
   };
@@ -75,9 +108,11 @@ function LanguagePopover() {
       mounted = false;
     };
   }, [open]);
-  return /* @__PURE__ */ jsxs(Fragment, {
+  const classes = useUtilityClasses();
+  return /* @__PURE__ */ jsxs(LanguagePopoverRoot, {
+    className: classes.root,
+    "data-testid": "LanguagePopoverRoot",
     children: [/* @__PURE__ */ jsx(ImageButton, {
-      className: "m4l_language_popover",
       onClick: handleOpen,
       sx: {
         width: 40,
@@ -91,7 +126,7 @@ function LanguagePopover() {
       width: "24px",
       height: "24px",
       skeletonVariant: "circle",
-      tooltip: "dddd"
+      "data-testid": "ImageButton"
     }), /* @__PURE__ */ jsx(Popover, {
       arrowType: "top-right",
       open: Boolean(open),
@@ -113,7 +148,11 @@ function LanguagePopover() {
         }
       },
       children: /* @__PURE__ */ jsxs(ContainerMenuItems, {
+        className: classes.containerItems,
+        "data-testid": "ContainerMenuItems",
         children: [allLocales.length === 0 && /* @__PURE__ */ jsx(ContainerProgress, {
+          className: classes.containerProgress,
+          "data-testid": "ContainerProgress",
           children: /* @__PURE__ */ jsx(CircularProgress, {
             size: "20px"
           })
@@ -131,6 +170,8 @@ function LanguagePopover() {
               width: "24px",
               height: "24px"
             }), /* @__PURE__ */ jsx(LabelItem, {
+              className: classes.labelItem,
+              "data-testid": "LabelItem",
               children: option.name
             })]
           }, option.lang || option.script || option.region))

package/components/LanguagePopover/index.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare function LanguagePopover(): JSX.Element;
+export * from './LanguagePopover';
+export * from './types';

package/components/LanguagePopover/styles.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export declare const LanguagePopoverRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const LabelItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const ContainerProgress: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ContainerMenuItems: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/LanguagePopover/types.d.ts

@@ -0,0 +1,9 @@
+import { NetworkLocaleType } from '@m4l/graphics';
+export interface LanguagePopoverTestingProps {
+    open?: HTMLElement;
+    loading?: boolean;
+    allLocales?: Array<NetworkLocaleType>;
+}
+export interface LanguagePopoverProps {
+    testingProps?: LanguagePopoverTestingProps;
+}

package/components/ModalDialog/{index.a684827f.js → index.c72a6e31.js}

@@ -1,12 +1,12 @@
 import { Dialog, Paper } from "@mui/material";
-import { c as cjs } from "../../react-draggable.84d6b038.js";
-import { u as useModal } from "../../hooks/useModal/index.d14edee3.js";
+import { c as cjs } from "../../react-draggable.0eef011c.js";
+import { u as useModal } from "../../hooks/useModal/index.19172e70.js";
 import { styled } from "@mui/material/styles";
-import { a as getThemeVariantColor } from "../../utils/index.899eb67b.js";
-import { R as ResizeableWindow } from "../Resizeable/index.c96c0f09.js";
+import { a as getThemeVariantColor } from "../../utils/index.e882b264.js";
+import { R as ResizeableWindow } from "../Resizeable/index.8a442a8b.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.d3e1f36e.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.a5f70d5d.js";
 const WrapperDialog = styled(Dialog)(() => ({}));
 const Container = styled("div")(({ theme }) => ({
   display: "flex",

package/components/NoItemSelected/{index.46d2f632.js → index.9636ec8a.js}

@@ -1,6 +1,6 @@
 import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { styled } from "@mui/material/styles";
-import { I as Image } from "../Image/index.93d5f37f.js";
+import { I as Image } from "../Image/index.aa24e982.js";
 import { Skeleton } from "@mui/material";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/components/NoItemSelected/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const WrapperNoItemSelected: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Img: import("@emotion/styled").StyledComponent<import("../Image/types").ImageProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Img: import("@emotion/styled").StyledComponent<import("../Image").ImageProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const WrapperSKTNoItemSelected: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/ObjectLogs/{index.4a859658.js → index.239e5877.js}

@@ -1,25 +1,36 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { useNetwork, useModuleDictionary, useEnvironment, usePaginate } from "@m4l/core";
 import { styled } from "@mui/material/styles";
-import { D as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.67260455.js";
+import { D as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.8333ea44.js";
 import { D as DateFormatter } from "../formatters/DateFormatter/index.80522f69.js";
 import { Tooltip, IconButton } from "@mui/material";
 import { useHostTheme, useResponsiveDesktop } from "@m4l/graphics";
 import { R as ReactJson } from "../../react-json-view.57125fcf.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { u as useModal } from "../../hooks/useModal/index.d14edee3.js";
-import { I as Icon } from "../Icon/index.8d754623.js";
-import "../../react-draggable.84d6b038.js";
-import "../ModalDialog/index.a684827f.js";
-import "../Resizeable/index.c96c0f09.js";
-import "../areas/contexts/DynamicMFParmsContext/index.668bc2e2.js";
-import "../CommonActions/components/Actions/index.d3e1f36e.js";
+import { u as useModal } from "../../hooks/useModal/index.19172e70.js";
+import { I as Icon } from "../Icon/index.f6e8d810.js";
+import "../../react-draggable.0eef011c.js";
+import "../ModalDialog/index.c72a6e31.js";
+import "../Resizeable/index.8a442a8b.js";
+import "../CommonActions/components/Actions/index.a5f70d5d.js";
 import "@mui/material/Button";
+import "../mui_extended/Button/index.8406ed5b.js";
 import "react-hook-form";
+import "../areas/components/index.e9971ebf.js";
+import "../areas/components/AreasAdmin/index.01739b1f.js";
+import "../mui_extended/IconButton/index.1318a283.js";
+import "zustand";
+import "../areas/contexts/AreasContext/index.1b624579.js";
+import "zustand/shallow";
+import "../areas/components/AreasContainer/index.41fb511e.js";
+import "react-grid-layout/css/styles.css";
+import "../../react-resizable.bb58c8fc.js";
+import "../areas/contexts/index.9c342ce6.js";
+import "../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 import "@mui/lab";
-import "../modal/WindowConfirm.0b8a6818.js";
-import { W as WindowBase } from "../modal/WindowBase.04439b8e.js";
-import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.071aa795.js";
+import "../modal/WindowConfirm.bde6242f.js";
+import { W as WindowBase } from "../modal/WindowBase.bed2458c.js";
+import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.93dfa3e0.js";
 const Container$1 = styled("div")(() => ({
   height: "100%",
   width: "100%",

package/components/PaperForm/{index.c5948756.js → index.0114aa9b.js}

@@ -1,7 +1,7 @@
 import { styled } from "@mui/material/styles";
 import { useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
-import { I as Icon } from "../Icon/index.8d754623.js";
+import { I as Icon } from "../Icon/index.f6e8d810.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 const WrapperPaper = styled("div")(({
   theme

package/components/Period/{index.abe445bd.js → index.10dc7de1.js}

@@ -1,20 +1,31 @@
 import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
 import { styled, Skeleton, Autocomplete, TextField } from "@mui/material";
 import { useMemo } from "react";
-import { I as Icon } from "../Icon/index.8d754623.js";
+import { I as Icon } from "../Icon/index.f6e8d810.js";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.d3e1f36e.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.a5f70d5d.js";
 import "@mui/material/Button";
+import "../mui_extended/Button/index.8406ed5b.js";
 import "react-hook-form";
-import "../../contexts/ModalContext/index.b90eec94.js";
-import "../../react-draggable.84d6b038.js";
-import "../ModalDialog/index.a684827f.js";
-import "../Resizeable/index.c96c0f09.js";
+import "../../contexts/ModalContext/index.c8212291.js";
+import "../../react-draggable.0eef011c.js";
+import "../ModalDialog/index.c72a6e31.js";
+import "../Resizeable/index.8a442a8b.js";
 import "@m4l/graphics";
-import "../areas/contexts/DynamicMFParmsContext/index.668bc2e2.js";
-import "../modal/WindowConfirm.0b8a6818.js";
+import "../modal/WindowConfirm.bde6242f.js";
 import "@mui/material/styles";
-import "../modal/WindowBase.04439b8e.js";
+import "../modal/WindowBase.bed2458c.js";
+import "../areas/components/index.e9971ebf.js";
+import "../areas/components/AreasAdmin/index.01739b1f.js";
+import "../mui_extended/IconButton/index.1318a283.js";
+import "zustand";
+import "../areas/contexts/AreasContext/index.1b624579.js";
+import "zustand/shallow";
+import "../areas/components/AreasContainer/index.41fb511e.js";
+import "react-grid-layout/css/styles.css";
+import "../../react-resizable.bb58c8fc.js";
+import "../areas/contexts/index.9c342ce6.js";
+import "../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 import "@mui/lab";
 const ContainerPeriod = styled("div")(({
   theme,

package/components/Resizeable/{index.c96c0f09.js → index.8a442a8b.js}

@@ -1,5 +1,5 @@
 import { styled } from "@mui/material/styles";
-import { R as ResizableBox } from "../../react-resizable.1d00271d.js";
+import { R as ResizableBox } from "../../react-resizable.bb58c8fc.js";
 import { jsx } from "react/jsx-runtime";
 const WrapperResizeable = styled(ResizableBox)(({
   theme

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

@@ -1,25 +1,31 @@
 import { ReactNode } from 'react';
-import { DynamicMFParameters, IsolationDynamicMFParameters } from '../../contexts/DynamicMFParmsContext/types';
+import { DynamicMFParameters } from '../../contexts/DynamicMFParmsContext/types';
 import type { Layout } from 'react-grid-layout';
+import { WindowStore } from '../../contexts/WindowContext/store';
+import { AreaProviderRef } from '../../contexts/AreaContext/types';
 export declare type WinType = 'microfrontend' | 'component';
 export declare type EmergeType = 'layout' | 'popup' | 'modal';
 export interface MFBaseProps {
-    module_id: string;
     debug_port: number;
     cache?: boolean;
-    dynamicParams?: IsolationDynamicMFParameters;
     prefix: string;
 }
-export interface MicroFrontendProps extends MFBaseProps {
-    dynamicParams?: DynamicMFParameters;
-}
+export declare type JSX_REACT_NODE = ((props?: WindowStore) => JSX.Element) | ReactNode;
+export declare type CookieType = 'window' | 'module';
+export declare type Cookies = {
+    moduleCookies: Record<string, any>;
+    windowCookies: Record<string, any>;
+};
 export interface WindowBaseProps {
     winType: WinType;
     emergeType: EmergeType;
-    container_id: string;
+    moduleId: string;
+    windowId: string;
+    dynamicParams: DynamicMFParameters;
     url_icon: string;
     title: string;
     onClose?: (layoutId: string) => void;
+    devCookies?: Cookies;
 }
 export interface LayoutBaseProps extends WindowBaseProps {
     emergeType: 'layout';
@@ -31,10 +37,10 @@ export interface LayoutMFProps extends LayoutBaseProps {
 }
 export interface LayoutComponentProps extends LayoutBaseProps {
     winType: 'component';
-    component: ReactNode;
+    component: JSX_REACT_NODE;
 }
 export declare type LayoutProps = LayoutMFProps | LayoutComponentProps;
-export declare type NewLayoutProps = Omit<LayoutMFProps, 'container_id' | 'onClose'> | Omit<LayoutComponentProps, 'container_id' | 'onClose'>;
+export declare type NewLayoutProps = Omit<LayoutMFProps, 'windowId' | 'onClose'> | Omit<LayoutComponentProps, 'windowId' | 'onClose'>;
 export interface HashWindowsByLayouts {
     [P: string]: LayoutProps;
 }
@@ -48,6 +54,8 @@ export interface PopUpBaseProps extends WindowBaseProps {
     emergeType: 'popup';
     zIndex?: number;
     windowProps: Pick<DOMRect, 'x' | 'y' | 'width' | 'height'>;
+    parentLayoutId: string;
+    replaceMeId?: string;
 }
 export interface PopUpMFProps extends PopUpBaseProps {
     winType: 'microfrontend';
@@ -55,10 +63,13 @@ export interface PopUpMFProps extends PopUpBaseProps {
 }
 export interface PopUpComponentProps extends PopUpBaseProps {
     winType: 'component';
-    component: ReactNode;
+    component: JSX_REACT_NODE;
 }
 export declare type PopUpProps = PopUpMFProps | PopUpComponentProps;
-export declare type NewPopUpProps = Omit<PopUpMFProps, 'container_id' | 'onClose'> | Omit<PopUpComponentProps, 'container_id' | 'onClose'>;
+export declare type NewPopUpProps = Omit<PopUpMFProps, 'windowId' | 'onClose'> | Omit<PopUpComponentProps, 'windowId' | 'onClose'>;
+export interface HashWindowsByPopups {
+    [P: string]: PopUpProps;
+}
 export interface ModalBaseProps extends WindowBaseProps {
     emergeType: 'modal';
     zIndex?: number;
@@ -73,13 +84,14 @@ export interface ModalComponentProps extends ModalBaseProps {
     component: ReactNode;
 }
 export declare type ModalProps = ModalMFProps | ModalComponentProps;
-export declare type NewModalProps = Omit<ModalMFProps, 'container_id' | 'onClose'> | Omit<ModalComponentProps, 'container_id' | 'onClose'>;
+export declare type NewModalProps = Omit<ModalMFProps, 'windowId' | 'onClose'> | Omit<ModalComponentProps, 'windowId' | 'onClose'>;
 export declare type WindowProps = LayoutProps | PopUpProps | ModalProps;
 export declare type NewWindowProps = NewLayoutProps | NewPopUpProps | NewModalProps;
 export interface AreaType {
     id: string;
     name: string;
     loadWindows?: boolean;
+    ref?: AreaProviderRef;
 }
 export interface AreaProps extends Omit<AreaType, 'url_icon' | 'name'> {
     active: boolean;

package/components/areas/components/AreasAdmin/{index.6794b22f.js → index.01739b1f.js}

@@ -1,21 +1,24 @@
 import { styled } from "@mui/material/styles";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.82f16572.js";
-import { u as useAreas } from "../../hooks/useArea/index.9b85ce24.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.1318a283.js";
+import { u as useAreasStore } from "../../hooks/useArea/index.df7c7169.js";
 import { useEnvironment } from "@m4l/core";
 import "@mui/material";
-import "../../../Icon/index.8d754623.js";
+import "../../../Icon/index.f6e8d810.js";
 import "react";
 import { jsxs, jsx } from "react/jsx-runtime";
-import "../../../mui_extended/Accordion/index.a541c71c.js";
+import "../../../mui_extended/Accordion/index.1d513477.js";
 import "../../../mui_extended/Avatar/index.fe06afd7.js";
 import "react-router-dom";
 import "@mui/material/Button";
+import "../../../mui_extended/Button/index.8406ed5b.js";
+import "../../../Image/index.aa24e982.js";
 import "@mui/lab";
-import "../../../mui_extended/Button/index.86a155a2.js";
-import "../../../mui_extended/Popover/index.53c77d23.js";
-import "../../../mui_extended/MenuActions/index.ee17bddd.js";
-import "../../../mui_extended/Pager/index.74d3f5fc.js";
+import "../../../mui_extended/Popover/index.58c49cc0.js";
+import "../../../mui_extended/MenuActions/index.1261168c.js";
+import "../../../mui_extended/Pager/index.80ccec47.js";
 import "../../../mui_extended/Tab/index.e0653a0a.js";
+import "../../../mui_extended/Typography/index.be3a279a.js";
+import { shallow } from "zustand/shallow";
 const WrapperAreasAdmin = styled("div")(({
   theme
 }) => ({
@@ -57,7 +60,12 @@ const AreaChip = (props) => {
   const {
     deleteArea,
     selectArea
-  } = useAreas();
+  } = useAreasStore((state) => state.actions);
+  const onClickDeleteArea = (e) => {
+    e.stopPropagation();
+    console.log("onClickDeleteArea", e.cancelable, e.eventPhase);
+    deleteArea(areaId);
+  };
   return /* @__PURE__ */ jsxs(WrapperAreaChips, {
     className: active ? "active" : "",
     onClick: () => {
@@ -75,18 +83,18 @@ const AreaChip = (props) => {
     }), /* @__PURE__ */ jsx(IconButton, {
       src: `${host_static_assets}/${environment_assets}/frontend/domain/microfrontends/users/assets/icons/delete.svg`,
       size: "small",
-      onClick: () => deleteArea(areaId)
+      onClick: onClickDeleteArea
     })]
   });
 };
 AreaChip.displayName = "AreaButtons";
 function AreasAdmin() {
+  const areas = useAreasStore((state) => state.areas, shallow);
+  const currentArea = useAreasStore((state) => state.currentArea, shallow);
+  const status = useAreasStore((state) => state.status);
   const {
-    areas,
-    currentArea,
-    addArea,
-    status
-  } = useAreas();
+    addArea
+  } = useAreasStore((state) => state.actions, shallow);
   const {
     host_static_assets,
     environment_assets
@@ -94,6 +102,7 @@ function AreasAdmin() {
   if (status !== "loaded") {
     return null;
   }
+  console.log("Render AreasAdmin", currentArea, status);
   return /* @__PURE__ */ jsxs(WrapperAreasAdmin, {
     id: "ContainerTabs",
     children: [areas.map((area) => /* @__PURE__ */ jsx(AreaChip, {

package/components/areas/components/AreasContainer/{index.a2f8899b.js → index.41fb511e.js}

@@ -1,8 +1,8 @@
 import { styled } from "@mui/material/styles";
-import { A as Area } from "../index.7d6cd649.js";
+import { A as Area } from "../index.e9971ebf.js";
 import "react-grid-layout/css/styles.css";
-import "../../../../react-resizable.1d00271d.js";
-import { u as useAreas } from "../../hooks/useArea/index.9b85ce24.js";
+import "../../../../react-resizable.bb58c8fc.js";
+import { u as useAreasStore } from "../../hooks/useArea/index.df7c7169.js";
 import { useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 const ContainerAreas = styled("div")(({
@@ -13,14 +13,12 @@ const ContainerAreas = styled("div")(({
   height: "100%",
   flexGrow: "1",
   position: "relative",
-  marginTop: theme.spacing(3)
+  marginTop: theme.spacing(0)
 }));
 function AreasContainer() {
-  const {
-    areas,
-    currentArea,
-    status
-  } = useAreas();
+  const areas = useAreasStore((state) => state.areas);
+  const currentArea = useAreasStore((state) => state.currentArea);
+  const status = useAreasStore((state) => state.status);
   useEffect(() => {
     console.log("useEffect AreasContainer");
   }, []);
@@ -33,7 +31,8 @@ function AreasContainer() {
     children: areas.map((area) => {
       return /* @__PURE__ */ jsx(Area, {
         id: area.id,
-        active: currentArea === area.id
+        active: currentArea === area.id,
+        loadWindows: area.loadWindows
       }, area.id);
     })
   });

package/components/areas/components/GridLayout/{index.b9c1e846.js → index.d11ecdd8.js}

@@ -1,10 +1,10 @@
 import { WidthProvider, Responsive } from "react-grid-layout";
-import { a as useArea } from "../../hooks/useArea/index.9b85ce24.js";
+import { a as useAreaStore } from "../../hooks/useArea/index.df7c7169.js";
 import { styled } from "@mui/material/styles";
-import { W as WindowPopUp } from "../WindowPopUp/index.214cf099.js";
-import { M as MemonizedWindow } from "../Window/index.252fbf4e.js";
+import { M as MemonizedWindowPopUp } from "../WindowPopUp/index.f5fa6cce.js";
+import { M as MemonizedWindow } from "../Window/index.61f87e9d.js";
 import "react-grid-layout/css/styles.css";
-import "../../../../react-resizable.1d00271d.js";
+import "../../../../react-resizable.bb58c8fc.js";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 const WrapperPoups = styled("div")(() => ({
   zIndex: 1,
@@ -14,14 +14,16 @@ const WrapperPoups = styled("div")(() => ({
 }));
 const ResponsiveGridLayout = WidthProvider(Responsive);
 const GridLayout = () => {
+  const status = useAreaStore((state) => state.status);
+  const areaId = useAreaStore((state) => state.id);
+  const gridLayouts = useAreaStore((state) => state.gridLayouts);
+  const hashWindowsPopups = useAreaStore((state) => state.hashWindowsPopups);
+  const hashWindowsLayouts = useAreaStore((state) => state.hashWindowsLayouts);
+  const breakPointsLayouts = useAreaStore((state) => state.breakpointsLayouts);
+  const windowsPopUps = useAreaStore((state) => state.windowsPopUps);
   const {
-    status,
-    allLayouts,
-    layouts,
-    hashWindowsLayouts,
-    windowsPopUps,
-    onLayoutChange
-  } = useArea();
+    onBreakpointsLayoutsChange: onBreakPointsLayoutsChange
+  } = useAreaStore((state) => state.actions);
   function onBreakpointChange(_newBreakpoint, _newCols) {
   }
   if (status === "init") {
@@ -32,8 +34,8 @@ const GridLayout = () => {
     });
   }
   return /* @__PURE__ */ jsxs(ResponsiveGridLayout, {
-    className: "layout",
-    onLayoutChange,
+    className: `M4L_GridLayout M4L_GridLayout_${areaId}`,
+    onLayoutChange: onBreakPointsLayoutsChange,
     onBreakpointChange,
     breakpoints: {
       lg: 1200,
@@ -54,7 +56,10 @@ const GridLayout = () => {
     containerPadding: [3, 3],
     draggableHandle: ".m4l_draggable_handle",
     compactType: "horizontal",
-    layouts: allLayouts,
+    layouts: breakPointsLayouts,
+    onResizeStart: (item) => {
+      console.log("onResizestart", item);
+    },
     children: [/* @__PURE__ */ jsx(WrapperPoups, {
       id: "WrapperPoups",
       "data-grid": {
@@ -71,10 +76,15 @@ const GridLayout = () => {
         isDraggable: false,
         isResizable: false
       },
-      children: windowsPopUps.map((wp) => /* @__PURE__ */ jsx(WindowPopUp, {
-        ...wp
-      }, wp.container_id))
-    }, "none"), layouts.map((l) => {
+      children: windowsPopUps.map((p) => {
+        if (hashWindowsPopups[p]) {
+          return /* @__PURE__ */ jsx(MemonizedWindowPopUp, {
+            ...hashWindowsPopups[p]
+          }, hashWindowsPopups[p].windowId);
+        }
+        return null;
+      })
+    }, "none"), gridLayouts.map((l) => {
       if (hashWindowsLayouts[l.i]) {
         return /* @__PURE__ */ jsx("div", {
           "data-grid": l,