@m4l/components 0.1.49 → 0.1.51

package/components/areas/components/Window/{index.d3ccc192.js → index.d1a59be4.js}

@@ -1,38 +1,81 @@
 import React__default, { useMemo, useState, useRef, useCallback, useEffect } from "react";
-import { a as useAreaStore } from "../../hooks/useArea/index.061d19d5.js";
+import { I as Icon } from "../../../Icon/index.f6e8d810.js";
+import { m } from "framer-motion";
+import { Skeleton, Typography, styled as styled$1, Dialog, Paper } from "@mui/material";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { styled } from "@mui/material/styles";
-import { W as WindowToolsMFProvider, a as WindowMFProvider } from "../../contexts/index.1edc1f88.js";
+import "react-router-dom";
+import "../../../animate/LoadingScreen/index.1d0c4307.js";
+import "../../../animate/PropagateLoader/index.be5b02c3.js";
+import "../index.29809e82.js";
+import "../AreasAdmin/index.3e586e9b.js";
+import { useEnvironment, useModuleSkeleton, useModuleDictionary, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.1318a283.js";
+import "zustand";
+import "../../contexts/AreasContext/index.4f938baa.js";
 import { shallow } from "zustand/shallow";
+import "../AreasContainer/index.15e4628d.js";
+import "react-grid-layout/css/styles.css";
+import "../../../../react-resizable.bb58c8fc.js";
+import { W as WindowToolsMFProvider, a as WindowMFProvider } from "../../contexts/index.4cfa6ea9.js";
 import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.c19cb8cc.js";
-import "../../../../contexts/ModalContext/index.a6faf940.js";
 import "react-hook-form";
-import "@hookform/resolvers/yup";
-import "../../../../contexts/RHFormContext/index.828b60ad.js";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { a as useWindow, b as useWindowStore } from "../../hooks/index.3326476e.js";
-import { useEnvironment, useModuleSkeleton, useModuleDictionary, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
-import { Skeleton, Typography, styled as styled$1 } from "@mui/material";
-import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/graphics";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.1318a283.js";
-import { I as Icon } from "../../../Icon/index.f6e8d810.js";
+import "../../../hook-form/RHFAutocomplete/index.74add0d0.js";
+import { I as Image } from "../../../Image/index.aa24e982.js";
+import debounce from "lodash/debounce";
+import "../../../hook-form/RHFCheckbox/index.ca94a050.js";
 import "../../../mui_extended/Accordion/index.1d513477.js";
 import "../../../mui_extended/Avatar/index.fe06afd7.js";
-import "react-router-dom";
+import "@mui/material/Button";
 import { B as Button } from "../../../mui_extended/Button/index.8406ed5b.js";
-import { I as Image } from "../../../Image/index.aa24e982.js";
 import "@mui/lab";
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.1261168c.js";
 import "../../../mui_extended/Popover/index.58c49cc0.js";
-import "../../../mui_extended/Pager/index.80ccec47.js";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index.1261168c.js";
+import "../../../mui_extended/Pager/index.984aac44.js";
 import "../../../mui_extended/Tab/index.e0653a0a.js";
 import "../../../mui_extended/Typography/index.be3a279a.js";
-import debounce from "lodash/debounce";
-import "@mui/material/Button";
+import "../../../ErrorLabel/index.78553a1e.js";
+import "@mui/x-date-pickers";
+import "../../../hook-form/RHFDateTime/index.7f1cbd85.js";
+import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/graphics";
+import "../../../hook-form/RHFTextField/index.57f138f7.js";
+import "../../../hook-form/RHFPeriod/index.47cf646d.js";
+import "../../../Period/index.89daad51.js";
+import "../../../CommonActions/components/Actions/index.c06ea173.js";
+import "../../../../contexts/ModalContext/index.e94f0e72.js";
+import { c as cjs } from "../../../../react-draggable.0eef011c.js";
+import "../../../ModalDialog/index.de10969f.js";
+import { R as ResizeableWindow } from "../../../Resizeable/index.8a442a8b.js";
+import "../../../modal/WindowConfirm.72de5ce8.js";
+import "../../../modal/WindowBase.ed279350.js";
+import "lodash/isString";
+import "react-dropzone";
+import "../../../hook-form/RHFUpload/index.7fdff30f.js";
+import "../../../DataGrid/index.eb1bdc97.js";
+import "react-dnd";
+import "react-dnd-html5-backend";
+import "../../../ScrollBar/index.39eeb2de.js";
+import "../../../DynamicFilter/index.17731fda.js";
+import "clsx";
+import "simplebar/dist/simplebar.min.css";
+import "@hookform/resolvers/yup";
+import "../../../../contexts/RHFormContext/index.828b60ad.js";
+import "yup";
+import "../../../../index.js";
+import "@mui/base";
+import "../../../LanguagePopover/index.5047b444.js";
+import "../../../NoItemSelected/index.9636ec8a.js";
+import "../../../ObjectLogs/index.338656c6.js";
+import "../../../../react-json-view.57125fcf.js";
+import "../../../PaperForm/index.0114aa9b.js";
+import "../../../Page/index.4237c241.js";
+import "../../../PropertyValue/index.dfcfe1ba.js";
+import "../../../../react-splitter-layout.8b1655c8.js";
+import "../../../SplitLayout/index.5a8355d8.js";
+import { a as useAreaStore } from "../../hooks/useArea/index.575c2abe.js";
+import { a as useWindow, b as useWindowStore } from "../../hooks/index.b15baf14.js";
 import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
-import { m } from "framer-motion";
 import { v as varBounce } from "../../../animate/variants/bounce.784aaaaa.js";
-import "../../../animate/LoadingScreen/index.1d0c4307.js";
-import "../../../animate/PropagateLoader/index.be5b02c3.js";
 const WrapperWindow = styled("div", {
   shouldForwardProp: (props) => props !== "selected"
 })(({ theme, selected }) => ({
@@ -614,9 +657,6 @@ const InnerForHooks = (props) => {
   const {
     winType
   } = props;
-  const areaStatus = useAreaStore((state) => state.status);
-  if (areaStatus !== "loaded")
-    return null;
   console.log("Render InnerForHooks", props.windowId);
   return /* @__PURE__ */ jsxs(WindowMFProvider, {
     ...props,
@@ -644,7 +684,7 @@ const Window = (props) => {
     if (!selected) {
       if (emergeType === "popup") {
         selectWindowPopUp(props.windowId);
-      } else {
+      } else if (emergeType === "layout") {
         selectWindowLayout(props.windowId);
       }
     }
@@ -660,7 +700,78 @@ const Window = (props) => {
   });
 };
 const MemonizedWindow = React__default.memo(Window);
+const Container = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  overflow: "hidden",
+  padding: theme.spacing(3)
+}));
+const WrapperWindowModal = styled(Dialog)(() => ({
+  height: "100%",
+  "&.m4l_selected": {
+    borderTop: "1px solid green"
+  }
+}));
+const DragabblePaperComponent = (props) => {
+  return /* @__PURE__ */ jsx(cjs.exports, {
+    handle: ".m4l_draggable_handle",
+    cancel: '[class*="MuiDialogContent-root"]',
+    children: /* @__PURE__ */ jsx(Paper, {
+      sx: {
+        maxHeight: "unset",
+        maxWidth: "unset"
+      },
+      ...props
+    })
+  });
+};
+function PaperComponent(props) {
+  return /* @__PURE__ */ jsx(Paper, {
+    sx: {
+      maxHeight: "unset",
+      maxWidth: "unset",
+      height: "100%"
+    },
+    ...props
+  });
+}
+const WindowModal = (props) => {
+  const {
+    closeWindowModal
+  } = useAreaStore((state) => state.actions);
+  const isDesktop = useResponsiveDesktop();
+  const onClose = () => {
+    closeWindowModal();
+  };
+  const contentComnponent = /* @__PURE__ */ jsx(Container, {
+    id: "Container",
+    children: /* @__PURE__ */ jsx(Window, {
+      ...props,
+      onClose
+    })
+  });
+  console.log("Render WindowModal");
+  return /* @__PURE__ */ jsxs(WrapperWindowModal, {
+    open: true,
+    "aria-labelledby": "child-modal-title",
+    "aria-describedby": "child-modal-description",
+    PaperComponent: isDesktop ? DragabblePaperComponent : PaperComponent,
+    maxWidth: false,
+    fullWidth: !isDesktop,
+    fullScreen: false,
+    disableEnforceFocus: true,
+    children: [isDesktop && /* @__PURE__ */ jsx(
+      ResizeableWindow,
+      {
+        children: contentComnponent
+      }
+    ), !isDesktop && contentComnponent]
+  });
+};
+React__default.memo(WindowModal);
 export {
   MemonizedWindow as M,
-  Window as W
+  WindowModal as W,
+  Window as a
 };

package/components/areas/components/Window/subcomponents/InnerForHooks/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { WindowProps } from '../../../Area/types';
-export declare const InnerForHooks: (props: WindowProps) => JSX.Element | null;
-export declare const MemonizedInnerForHooks: React.MemoExoticComponent<(props: WindowProps) => JSX.Element | null>;
+export declare const InnerForHooks: (props: WindowProps) => JSX.Element;
+export declare const MemonizedInnerForHooks: React.MemoExoticComponent<(props: WindowProps) => JSX.Element>;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ModalProps } from '../Area/types';
+export declare const WindowModal: (props: ModalProps) => JSX.Element;
+export declare const MemonizedWindowModal: React.MemoExoticComponent<(props: ModalProps) => JSX.Element>;

package/components/areas/components/WindowPopUp/{index.7183a2e5.js → index.90566fca.js}

@@ -7,23 +7,23 @@ import "@mui/material/styles";
 import "react-router-dom";
 import "../../../animate/LoadingScreen/index.1d0c4307.js";
 import "../../../animate/PropagateLoader/index.be5b02c3.js";
-import "../index.9f1b8516.js";
-import "../AreasAdmin/index.5f46d742.js";
+import "../index.29809e82.js";
+import "../AreasAdmin/index.3e586e9b.js";
 import "@m4l/core";
 import "../../../mui_extended/IconButton/index.1318a283.js";
 import "zustand";
-import "../../contexts/AreasContext/index.82659d93.js";
+import "../../contexts/AreasContext/index.4f938baa.js";
 import "zustand/shallow";
-import "../AreasContainer/index.c99b3cca.js";
+import "../AreasContainer/index.15e4628d.js";
 import "react-grid-layout/css/styles.css";
 import "../../../../react-resizable.bb58c8fc.js";
-import "../../contexts/index.1edc1f88.js";
+import "../../contexts/index.4cfa6ea9.js";
 import "../../contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 import "react-hook-form";
 import "../../../hook-form/RHFAutocomplete/index.74add0d0.js";
 import "../../../Image/index.aa24e982.js";
 import "lodash/debounce";
-import "../../../hook-form/RHFCheckbox/index.ebfe1e3c.js";
+import "../../../hook-form/RHFCheckbox/index.ca94a050.js";
 import "../../../mui_extended/Accordion/index.1d513477.js";
 import "../../../mui_extended/Avatar/index.fe06afd7.js";
 import "@mui/material/Button";
@@ -31,31 +31,31 @@ import "../../../mui_extended/Button/index.8406ed5b.js";
 import "@mui/lab";
 import "../../../mui_extended/Popover/index.58c49cc0.js";
 import "../../../mui_extended/MenuActions/index.1261168c.js";
-import "../../../mui_extended/Pager/index.80ccec47.js";
+import "../../../mui_extended/Pager/index.984aac44.js";
 import "../../../mui_extended/Tab/index.e0653a0a.js";
 import "../../../mui_extended/Typography/index.be3a279a.js";
-import "../../../ErrorLabel/index.73f9362c.js";
+import "../../../ErrorLabel/index.78553a1e.js";
 import "@mui/x-date-pickers";
 import "../../../hook-form/RHFDateTime/index.7f1cbd85.js";
 import "@m4l/graphics";
 import "../../../hook-form/RHFTextField/index.57f138f7.js";
-import "../../../hook-form/RHFPeriod/index.3470638a.js";
-import "../../../Period/index.2841388b.js";
-import "../../../CommonActions/components/Actions/index.4e56715e.js";
-import "../../../../contexts/ModalContext/index.a6faf940.js";
+import "../../../hook-form/RHFPeriod/index.47cf646d.js";
+import "../../../Period/index.89daad51.js";
+import "../../../CommonActions/components/Actions/index.c06ea173.js";
+import "../../../../contexts/ModalContext/index.e94f0e72.js";
 import "../../../../react-draggable.0eef011c.js";
-import "../../../ModalDialog/index.58a21edf.js";
+import "../../../ModalDialog/index.de10969f.js";
 import { R as ResizeableWindow } from "../../../Resizeable/index.8a442a8b.js";
-import "../../../modal/WindowConfirm.2fc8ed8f.js";
-import "../../../modal/WindowBase.52e21822.js";
+import "../../../modal/WindowConfirm.72de5ce8.js";
+import "../../../modal/WindowBase.ed279350.js";
 import "lodash/isString";
 import "react-dropzone";
 import "../../../hook-form/RHFUpload/index.7fdff30f.js";
-import "../../../DataGrid/index.4baf5552.js";
+import "../../../DataGrid/index.eb1bdc97.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
 import "../../../ScrollBar/index.39eeb2de.js";
-import "../../../DynamicFilter/index.b4fc6428.js";
+import "../../../DynamicFilter/index.17731fda.js";
 import "clsx";
 import "simplebar/dist/simplebar.min.css";
 import "@hookform/resolvers/yup";
@@ -63,17 +63,17 @@ import "../../../../contexts/RHFormContext/index.828b60ad.js";
 import "yup";
 import { DraggableWindow } from "../../../../index.js";
 import "@mui/base";
-import "../../../LanguagePopover/index.26b694ef.js";
+import "../../../LanguagePopover/index.5047b444.js";
 import "../../../NoItemSelected/index.9636ec8a.js";
-import "../../../ObjectLogs/index.9e362091.js";
+import "../../../ObjectLogs/index.338656c6.js";
 import "../../../../react-json-view.57125fcf.js";
 import "../../../PaperForm/index.0114aa9b.js";
 import "../../../Page/index.4237c241.js";
 import "../../../PropertyValue/index.dfcfe1ba.js";
 import "../../../../react-splitter-layout.8b1655c8.js";
 import "../../../SplitLayout/index.5a8355d8.js";
-import { a as useAreaStore } from "../../hooks/useArea/index.061d19d5.js";
-import { W as Window } from "../Window/index.d3ccc192.js";
+import { a as useAreaStore } from "../../hooks/useArea/index.575c2abe.js";
+import { a as Window } from "../Window/index.d1a59be4.js";
 const WindowPopUp = (props) => {
   const {
     windowProps,

package/components/areas/components/{index.9f1b8516.js → index.29809e82.js}

@@ -1,18 +1,18 @@
-import { A as AreaProvider } from "../contexts/AreaContext/index.2f35327c.js";
-import { G as GridLayout } from "./GridLayout/index.7cca9a94.js";
-import { u as useAreasStore } from "../hooks/useArea/index.061d19d5.js";
+import { A as AreaProvider } from "../contexts/AreaContext/index.c787aee6.js";
+import { G as GridLayout } from "./GridLayout/index.f38f5b74.js";
 import { styled } from "@mui/material/styles";
+import { a as useAreaStore } from "../hooks/useArea/index.575c2abe.js";
 import { jsx } from "react/jsx-runtime";
-import "./AreasAdmin/index.5f46d742.js";
+import "./AreasAdmin/index.3e586e9b.js";
 import "react";
 import "@m4l/core";
 import "@mui/material";
 import "../../Icon/index.f6e8d810.js";
 import "../../mui_extended/IconButton/index.1318a283.js";
 import "zustand";
-import "../contexts/AreasContext/index.82659d93.js";
+import "../contexts/AreasContext/index.4f938baa.js";
 import "zustand/shallow";
-import "./AreasContainer/index.c99b3cca.js";
+import "./AreasContainer/index.15e4628d.js";
 import "react-grid-layout/css/styles.css";
 import "../../../react-resizable.bb58c8fc.js";
 const WrapperArea = styled("div")(() => ({
@@ -42,27 +42,27 @@ const WrapperArea = styled("div")(() => ({
     borderTop: "1px solid green"
   }
 }));
+const InnerForHooks = () => {
+  const status = useAreaStore((state) => state.status);
+  if (status === "loaded") {
+    return /* @__PURE__ */ jsx(GridLayout, {});
+  } else {
+    return /* @__PURE__ */ jsx("div", {
+      children: "Loading.. Intentar si falla."
+    });
+  }
+};
 const Area = (props) => {
   const {
     id,
     active
   } = props;
-  const {
-    setAreaRef
-  } = useAreasStore((state) => state.internalActions);
-  const setAreaProviderRef = (element) => {
-    console.log("setAreaProviderRef", element, id);
-    if (element) {
-      setAreaRef(id, element);
-    }
-  };
   console.log("Render Area");
   return /* @__PURE__ */ jsx(WrapperArea, {
     className: `M4L_Area_wrapper_${id} ${active ? "active" : ""}`,
     children: /* @__PURE__ */ jsx(AreaProvider, {
       ...props,
-      ref: setAreaProviderRef,
-      children: /* @__PURE__ */ jsx(GridLayout, {})
+      children: /* @__PURE__ */ jsx(InnerForHooks, {})
     })
   });
 };

package/components/areas/contexts/AreaContext/{index.2f35327c.js → index.c787aee6.js}

@@ -1,13 +1,11 @@
-import React__default, { createContext, forwardRef, useRef, useImperativeHandle, useEffect, useCallback } from "react";
+import React__default, { createContext, useRef, useEffect } from "react";
 import { shallow } from "zustand/shallow";
-import { W as Window } from "../../components/Window/index.d3ccc192.js";
-import { u as useModal } from "../../../../hooks/useModal/index.54a1887f.js";
 import { useNetwork } from "@m4l/core";
 import { createStore, useStore } from "zustand";
 import { immer } from "zustand/middleware/immer";
 import { devtools } from "zustand/middleware";
 import debounce from "lodash/debounce";
-import { u as useAreasStore } from "../../hooks/useArea/index.061d19d5.js";
+import { u as useAreasStore } from "../../hooks/useArea/index.575c2abe.js";
 import { jsx } from "react/jsx-runtime";
 const DEBOUCED_SAVE_TIME = 500;
 const COOKIE_BREAKPOINT_LAYOUTS = "layoutPros";
@@ -59,6 +57,7 @@ const createAreaStore = (initProps) => {
     status: "init",
     breakpointsLayouts: {},
     gridLayouts: [],
+    windowModal: null,
     windowsPopUps: [],
     hashWindowsPopups: {},
     hashWindowsLayouts: {},
@@ -71,6 +70,27 @@ const createAreaStore = (initProps) => {
       immer((set, get) => ({
         ...startProps,
         actions: {
+          addWindow: (newWindow) => {
+            const windowId = `${get().id}_window_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
+            console.log("addWindow", newWindow.emergeType);
+            if (newWindow.emergeType === "layout") {
+              get().actions.addWindowLayout(windowId, newWindow);
+            } else if (newWindow.emergeType === "popup") {
+              get().actions.addWindowPopUp(windowId, newWindow);
+            } else if (newWindow.emergeType === "modal") {
+              get().actions.addWindowModal(windowId, newWindow);
+            }
+          },
+          closeWindowModal: () => {
+            set((state) => {
+              state.windowModal = void 0;
+            });
+          },
+          addWindowModal: (container_id, newWindowModalProps) => {
+            set((state) => {
+              state.windowModal = { ...newWindowModalProps, windowId: container_id };
+            });
+          },
           closeWindowPopUp: (removePopUpId) => {
             set((state) => {
               const removeIndex = state.windowsPopUps.findIndex(
@@ -85,6 +105,7 @@ const createAreaStore = (initProps) => {
           addWindowPopUp: (windowId, newWindowPopupProps) => {
             let popUpId = windowId;
             set((state) => {
+              console.log("addWindowPopUp", newWindowPopupProps, state.id);
               if (newWindowPopupProps.replaceMeId) {
                 for (const key in state.hashWindowsPopups) {
                   const WindoPopUp = state.hashWindowsPopups[key];
@@ -305,7 +326,7 @@ const createAreaStore = (initProps) => {
   );
 };
 const AreaContext = createContext(null);
-const AreaProvider = forwardRef((props, ref) => {
+const AreaProvider = (props) => {
   const {
     children,
     id,
@@ -313,6 +334,9 @@ const AreaProvider = forwardRef((props, ref) => {
     loadWindows = true
   } = props;
   const loadAreasFromNetwork = useAreasStore((state) => state.loadAreasFromNetwork);
+  const {
+    setAreaLink
+  } = useAreasStore((state) => state.internalActions);
   const {
     networkOperation
   } = useNetwork();
@@ -325,26 +349,15 @@ const AreaProvider = forwardRef((props, ref) => {
       loadWindows
     });
   }
-  const {
-    addWindowLayout,
-    addWindowPopUp
-  } = useStore(areaStoreRef.current, (state) => state.actions, shallow);
   const {
     loadFromApi
   } = useStore(areaStoreRef.current, (state) => state.internalActions, shallow);
   const status = useStore(areaStoreRef.current, (state) => state.status, shallow);
-  const {
-    openModal,
-    closeModal
-  } = useModal();
-  useImperativeHandle(ref, () => ({
-    store: areaStoreRef.current,
-    addWindow
-  }), []);
   useEffect(() => {
-    console.log("useEffect AreaProvider");
+    console.log("useEffect AreaProvider setAreaLink");
+    setAreaLink(id, areaStoreRef.current);
     return () => {
-      console.log("useEffect cluanUp AreaProvider****");
+      console.debug("useEffect cleanUP AreaProvider", props.id);
     };
   }, []);
   useEffect(() => {
@@ -353,37 +366,11 @@ const AreaProvider = forwardRef((props, ref) => {
     }
   }, [active]);
   console.log("Rendeer AreaProvider status", status, loadAreasFromNetwork);
-  const closeWindowModal = useCallback(() => {
-    closeModal();
-  }, []);
-  const openWindowModal = useCallback((container_id, newWindowProps) => {
-    openModal({
-      window: /* @__PURE__ */ jsx(Window, {
-        ...newWindowProps,
-        windowId: container_id,
-        onClose: closeWindowModal
-      })
-    });
-  }, []);
-  const addWindow = useCallback((newWindow) => {
-    const newId = `${id}_window_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
-    if (newWindow.emergeType === "layout") {
-      addWindowLayout(newId, newWindow);
-    } else if (newWindow.emergeType === "popup") {
-      addWindowPopUp(newId, newWindow);
-    } else {
-      openWindowModal(newId, newWindow);
-    }
-    return newId;
-  }, []);
   return /* @__PURE__ */ jsx(AreaContext.Provider, {
-    value: {
-      store: areaStoreRef.current,
-      addWindow
-    },
+    value: areaStoreRef.current,
     children
   });
-});
+};
 AreaProvider.displayName = "AreaProvider";
 React__default.memo(AreaProvider);
 export {

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

@@ -1,6 +1,20 @@
 import React from 'react';
-import { AreaContextProps, AreaProviderProps, AreaProviderRef } from './types';
-declare const AreaContext: React.Context<AreaContextProps | null>;
-declare const AreaProvider: React.ForwardRefExoticComponent<Omit<AreaProviderProps, "ref"> & React.RefAttributes<AreaProviderRef>>;
-declare const MemonizedAreaProvider: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<AreaProviderProps, "ref"> & React.RefAttributes<AreaProviderRef>>>;
+import { AreaProviderProps } from './types';
+declare const AreaContext: React.Context<(Omit<Omit<import("zustand").StoreApi<import("./store").AreaStateWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: import("./store").AreaStateWithActions | Partial<import("./store").AreaStateWithActions> | ((state: import("./store").AreaStateWithActions) => import("./store").AreaStateWithActions | Partial<import("./store").AreaStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: import("./store").AreaStateWithActions | Partial<import("./store").AreaStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<import("./store").AreaStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+}) | null>;
+declare const AreaProvider: {
+    (props: AreaProviderProps): JSX.Element;
+    displayName: string;
+};
+declare const MemonizedAreaProvider: React.MemoExoticComponent<{
+    (props: AreaProviderProps): JSX.Element;
+    displayName: string;
+}>;
 export { AreaProvider, AreaContext, MemonizedAreaProvider };

package/components/areas/contexts/AreaContext/store.d.ts

@@ -1,7 +1,7 @@
-import { NetworkProps } from '@m4l/core';
+import { Maybe, NetworkProps } from '@m4l/core';
 import { Layout, Layouts } from 'react-grid-layout';
 import { DebouncedFunc } from 'lodash';
-import { HashWindowsByLayouts, HashWindowsByPopups, NewLayoutProps, NewPopUpProps } from '../../components/Area/types';
+import { HashWindowsByLayouts, HashWindowsByPopups, ModalProps, NewLayoutProps, NewModalProps, NewPopUpProps, NewWindowProps } from '../../components/Area/types';
 export declare type AreaStatus = 'init' | 'load' | 'loaded' | 'error';
 export interface AreaState {
     zPopUpIndex: number;
@@ -12,6 +12,7 @@ export interface AreaState {
     breakpointsLayouts: Layouts;
     gridLayouts: Layout[];
     windowsPopUps: string[];
+    windowModal?: Maybe<ModalProps>;
     hashWindowsPopups: HashWindowsByPopups;
     hashWindowsLayouts: HashWindowsByLayouts;
     networkOperation: (props: NetworkProps) => Promise<any>;
@@ -20,6 +21,9 @@ export interface AreaState {
 }
 export interface AreaStateWithActions extends AreaState {
     actions: {
+        addWindow: (newWindow: NewWindowProps) => void;
+        closeWindowModal: () => void;
+        addWindowModal: (container_id: string, newWindowModalProps: NewModalProps) => void;
         closeWindowPopUp: (removePopUpId: string) => void;
         addWindowPopUp: (container_id: string, newWindowPopupProps: NewPopUpProps) => void;
         closeWindowLayout: (removeLayoutId: string) => void;

package/components/areas/contexts/AreasContext/{index.82659d93.js → index.4f938baa.js}

@@ -3,7 +3,7 @@ import { useHostTools, useModuleDictionary, useNetwork, EmitEvents } from "@m4l/
 import { createStore, useStore } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { L as LABEL_NEW_AREA } from "../../index.ae311948.js";
+import { L as LABEL_NEW_AREA } from "../../index.8c6f9e65.js";
 import { shallow } from "zustand/shallow";
 import { useFirstRender } from "@m4l/graphics";
 import { jsx } from "react/jsx-runtime";
@@ -116,11 +116,12 @@ const createAreasStore = (initProps) => {
               }
             }
           },
-          setAreaRef: (areaId, ref) => {
+          setAreaLink: (areaId, store) => {
             set((state) => {
               const areaIndex = state.areas.findIndex((area) => area.id === areaId);
-              if (areaIndex > -1 && !state.areas[areaIndex].ref) {
-                state.areas[areaIndex].ref = ref;
+              if (areaIndex > -1) {
+                state.areas[areaIndex].store = store;
+                state.areas[areaIndex].linked = true;
               }
             });
           }
@@ -161,16 +162,12 @@ function AreasProvider(props) {
     setHandlerGetLabel
   } = useStore(areasStoreRef.current, (state) => state.internalActions, shallow);
   const addWindow = useCallback((newWindow) => {
-    console.log("addWindow raw");
     const currentArea = areasStoreRef.current?.getState().currentArea;
     const areas = areasStoreRef.current?.getState().areas;
     if (currentArea && areas) {
       const areaIndex = areas.findIndex((area) => area.id == currentArea);
-      if (areaIndex > -1 && areas[areaIndex].ref) {
-        const areaRef = areas[areaIndex].ref;
-        if (areaRef) {
-          areaRef.addWindow(newWindow);
-        }
+      if (areaIndex > -1 && areas[areaIndex].store) {
+        areas[areaIndex].store?.getState().actions.addWindow(newWindow);
       }
     }
   }, []);

package/components/areas/contexts/AreasContext/store.d.ts

@@ -1,7 +1,7 @@
-import { AreaProviderRef } from '../AreaContext/types';
 import { AreaType } from '../../components/Area/types';
 import { GetLabelType, NetworkProps } from '@m4l/core';
 import { WritableDraft } from 'immer/dist/internal';
+import { AreaStore } from '../AreaContext/store';
 export declare type AreasStatus = 'init' | 'loading' | 'loaded' | 'error';
 export interface AreasState {
     networkOperation: (props: NetworkProps) => Promise<any>;
@@ -20,7 +20,7 @@ export interface AreasStateWithActions extends AreasState {
     internalActions: {
         setHandlerGetLabel: (newHandler: GetLabelType) => void;
         loadFromApi: () => void;
-        setAreaRef: (areaId: string, ref: AreaProviderRef) => void;
+        setAreaLink: (areaId: string, store: AreaStore) => void;
     };
 }
 declare type DefaultStoreProps = Omit<AreasState, 'currentArea'>;