@m4l/components 0.1.42 → 0.1.44

package/components/areas/components/Window/{index.252fbf4e.js → index.76143c30.js}

@@ -1,62 +1,50 @@
-import React__default, { createContext, useState, useContext, useMemo, useRef, useCallback, useEffect } from "react";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React__default, { useMemo, useState, useRef, useCallback, useEffect } from "react";
+import { a as useAreaStore } from "../../hooks/useArea/index.89306f6a.js";
 import { styled } from "@mui/material/styles";
-import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.668bc2e2.js";
-import "../../../../contexts/ModalContext/index.b90eec94.js";
+import { W as WindowToolsMFProvider, a as WindowMFProvider } from "../../contexts/index.137257b8.js";
+import { shallow } from "zustand/shallow";
+import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.c19cb8cc.js";
+import "../../../../contexts/ModalContext/index.4442afd9.js";
 import "react-hook-form";
 import "@hookform/resolvers/yup";
-import "../../../../contexts/RHFormContext/index.d88e6e27.js";
+import "../../../../contexts/RHFormContext/index.828b60ad.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { a as useWindow, b as useWindowStore } from "../../hooks/index.b8c93059.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.82f16572.js";
-import { I as Icon } from "../../../Icon/index.8d754623.js";
-import "../../../mui_extended/Accordion/index.a541c71c.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.1318a283.js";
+import { I as Icon } from "../../../Icon/index.f6e8d810.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 { B as Button } from "../../../mui_extended/Button/index.86a155a2.js";
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.ee17bddd.js";
-import "../../../mui_extended/Popover/index.53c77d23.js";
-import "../../../mui_extended/Pager/index.74d3f5fc.js";
+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 "../../../mui_extended/Tab/index.e0653a0a.js";
+import "../../../mui_extended/Typography/index.be3a279a.js";
 import debounce from "lodash/debounce";
+import "@mui/material/Button";
 import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
 import { m } from "framer-motion";
-import { I as Image } from "../../../Image/index.93d5f37f.js";
 import { v as varBounce } from "../../../animate/variants/bounce.784aaaaa.js";
 import "../../../animate/LoadingScreen/index.1d0c4307.js";
 import "../../../animate/PropagateLoader/index.be5b02c3.js";
-const WindowContext = createContext(null);
-function WindowProvider(props) {
-  const {
-    children,
-    initialExternalActions = [],
-    ...other
-  } = props;
-  const [moduleActions, setModuleActions] = useState([]);
-  const [externalActions, setExternalActions] = useState(initialExternalActions);
-  return /* @__PURE__ */ jsx(WindowContext.Provider, {
-    value: {
-      moduleActions,
-      externalActions,
-      setModuleActions,
-      setExternalActions,
-      ...other
-    },
-    children
-  });
-}
-const WrapperWindow = styled("div")(({ theme }) => ({
+const WrapperWindow = styled("div", {
+  shouldForwardProp: (props) => props !== "selected"
+})(({ theme, selected }) => ({
   display: "flex",
   flexDirection: "column",
   height: "100%",
   width: "100%",
   overflow: "hidden",
+  border: "1px solid gray",
+  borderTop: selected ? "1px solid red" : "1px solid black",
   backgroundColor: theme.palette.background.paper,
   padding: theme.spacing(3),
-  border: "1px solid gray",
   "&.m4l_selected": {
     borderTop: "1px solid green"
   }
@@ -65,19 +53,19 @@ const WrapperContent = styled("div")(() => ({
   flexGrow: 1,
   position: "relative"
 }));
-const useWindow = () => {
-  const context = useContext(WindowContext);
-  if (!context)
-    throw new Error("useWindow context must be use inside WindowContext");
-  return context;
-};
 const Component = (props) => {
   const {
-    setModuleActions
-  } = useWindow();
-  return /* @__PURE__ */ jsx(DynamicMFParmsProvider, {
-    setModuleActions,
-    children: props.children
+    component
+  } = props;
+  const store = useWindow();
+  const dynamicMFStore = useWindowStore((state) => state.dynamicMFStore);
+  const actions = useWindowStore((state) => state.actions, shallow);
+  return /* @__PURE__ */ jsx(WindowToolsMFProvider, {
+    ...actions,
+    children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, {
+      store: dynamicMFStore,
+      children: typeof component === "function" ? component(store) : component
+    })
   });
 };
 React__default.memo(Component);
@@ -275,13 +263,8 @@ function getMainActions(isDesktop, moduleActions) {
   return mainActions;
 }
 function Header() {
-  const {
-    url_icon,
-    title,
-    moduleActions,
-    onClose,
-    container_id
-  } = useWindow();
+  const [url_icon, title, moduleActions, onClose, container_id] = useWindowStore((state) => [state.url_icon, state.title, state.moduleActions, state.onClose, state.windowId], shallow);
+  const saveModuleCookies = useWindowStore((state) => state.internalActions.saveModuleCookies);
   const {
     host_static_assets,
     environment_assets
@@ -316,7 +299,7 @@ function Header() {
         marginRight: "24px",
         textOverflow: "ellipsis"
       },
-      children: title
+      children: `${container_id.substring(container_id.length - 3)} - ${title}`
     }), mainActions.map((mainAction, index) => {
       if (!mainAction.component) {
         return /* @__PURE__ */ jsx(IconButton, {
@@ -347,6 +330,10 @@ function Header() {
       onClick: onCloseLocal,
       "aria-label": "click",
       src: `${host_static_assets}/${environment_assets}/frontend/components/window/assets/icons/close.svg`
+    }), /* @__PURE__ */ jsx(Button, {
+      onClick: saveModuleCookies,
+      "aria-label": "click",
+      children: "Grabar Props"
     })]
   });
 }
@@ -436,10 +423,11 @@ function getDivScritId(prefix, moduleId) {
 function MFLoader(props) {
   const {
     prefix,
-    module_id,
+    moduleId,
     cache = true,
     debug_port,
-    dynamicParams
+    dynamicMFStore,
+    windowTools
   } = props;
   const {
     hostThemeOptions,
@@ -457,10 +445,10 @@ function MFLoader(props) {
   const {
     currentLocale
   } = useLocales();
-  const [divScript, setDivScript] = useState(getDivScritId(prefix, module_id));
+  const [divScript, setDivScript] = useState(getDivScritId(prefix, moduleId));
   const refTime = useRef(0);
-  const isFirstRender = useFirstRender([module_id]);
-  const final_host = environment.isLocalhost ? `https://localhost:${debug_port}` : `https://${window.location.host}/mf/${module_id}`;
+  const isFirstRender = useFirstRender([moduleId]);
+  const final_host = environment.isLocalhost ? `https://localhost:${debug_port}` : `https://${window.location.host}/mf/${moduleId}`;
   function cleanUp(dScript) {
     try {
       if (window[`unmount_${prefix}_${dScript.moduleId}`]) {
@@ -486,13 +474,10 @@ function MFLoader(props) {
       window[`render_${prefix}_${newDScript.moduleId}`](newDScript.divContainerId, environment, hostTools, currentLocale, {
         hostThemeOptions,
         fnComponentsOverrides
-      }, axiosOperation, formatter, {
-        version: 1,
-        ...dynamicParams ? dynamicParams : {}
-      });
+      }, axiosOperation, formatter, dynamicMFStore, windowTools);
     } catch (error) {
     }
-  }, [hostThemeOptions, currentLocale, formatter, dynamicParams]);
+  }, [hostThemeOptions, currentLocale, formatter]);
   const debouncedSetDivScript = useCallback(debounce((newName) => {
     const newDivScript = getDivScritId(prefix, newName);
     if (newName !== divScript.moduleId) {
@@ -503,13 +488,13 @@ function MFLoader(props) {
   }, 200), [divScript]);
   useEffect(() => {
     if (!isFirstRender) {
-      debouncedSetDivScript(module_id + "");
-      if (module_id !== divScript.moduleId)
+      debouncedSetDivScript(moduleId + "");
+      if (moduleId !== divScript.moduleId)
         ;
     }
     return () => {
     };
-  }, [module_id]);
+  }, [moduleId]);
   useEffect(() => {
     setIsLoading(true);
     let mounted = true;
@@ -518,7 +503,7 @@ function MFLoader(props) {
       ...divScript
     };
     const loadIfNotLoaded = async () => {
-      if (!window[`render_${prefix}_${module_id}`]) {
+      if (!window[`render_${prefix}_${moduleId}`]) {
         let urlFile = "";
         setNetworkProgress(0);
         const manifest = await fetch(`${final_host}/manifest.json?rnd=${Math.random()}`).then((res) => res.json()).catch(() => {
@@ -612,30 +597,65 @@ MFLoader.defaultProps = {
   window
 };
 const MicroFrontend = (props) => {
-  const {
-    setModuleActions
-  } = useWindow();
+  const dynamicMFStore = useWindowStore((state) => state.dynamicMFStore, shallow);
+  const moduleId = useWindowStore((state) => state.moduleId, shallow);
+  const actions = useWindowStore((state) => state.actions, shallow);
   return /* @__PURE__ */ jsx(MFLoader, {
     ...props,
-    dynamicParams: {
-      ...props.dynamicParams,
-      setModuleActions
+    moduleId,
+    dynamicMFStore,
+    windowTools: {
+      ...actions
     }
   });
 };
 React__default.memo(MicroFrontend);
+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,
+    children: [/* @__PURE__ */ jsx(Header, {}), /* @__PURE__ */ jsx(WrapperContent, {
+      children: winType === "microfrontend" ? /* @__PURE__ */ jsx(MicroFrontend, {
+        ...props.mfProps
+      }) : /* @__PURE__ */ jsx(Component, {
+        component: props.component
+      })
+    })]
+  });
+};
+const MemonizedInnerForHooks = React__default.memo(InnerForHooks);
 const Window = (props) => {
+  const {
+    emergeType
+  } = props;
+  const selected = useAreaStore((state) => emergeType === "layout" ? state.currentLayoutId : state.currentPopUpId) === props.windowId;
+  const {
+    selectWindowPopUp,
+    selectWindowLayout
+  } = useAreaStore((state) => state.actions);
+  const onTouch = () => {
+    console.log("onTouch", props.windowId);
+    if (!selected) {
+      if (emergeType === "popup") {
+        selectWindowPopUp(props.windowId);
+      } else {
+        selectWindowLayout(props.windowId);
+      }
+    }
+  };
+  console.log("Render Window", props.windowId, selected);
   return /* @__PURE__ */ jsx(WrapperWindow, {
-    children: /* @__PURE__ */ jsxs(WindowProvider, {
-      initialExternalActions: [],
-      ...props,
-      children: [/* @__PURE__ */ jsx(Header, {}), /* @__PURE__ */ jsx(WrapperContent, {
-        children: props.winType === "microfrontend" ? /* @__PURE__ */ jsx(MicroFrontend, {
-          ...props.mfProps
-        }) : /* @__PURE__ */ jsx(Component, {
-          children: props.component
-        })
-      })]
+    id: "WrapperWindow",
+    selected,
+    onMouseDown: onTouch,
+    children: /* @__PURE__ */ jsx(MemonizedInnerForHooks, {
+      ...props
     })
   });
 };

package/components/areas/components/Window/styles.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
-export declare const WrapperWindow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const WrapperContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+interface WrapperWindowPrps {
+    selected: boolean;
+}
+export declare const WrapperWindow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & WrapperWindowPrps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

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

@@ -0,0 +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>;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapperContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/areas/components/Window/subcomponents/{Component → InnerForHooks/subcomponents/Component}/index.d.ts

@@ -1,7 +1,8 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import { JSX_REACT_NODE } from '../../../../../Area/types';
 export declare const Component: (props: {
-    children: ReactNode;
+    component: JSX_REACT_NODE;
 }) => JSX.Element;
 export declare const MemonizedComponent: React.MemoExoticComponent<(props: {
-    children: ReactNode;
+    component: JSX_REACT_NODE;
 }) => JSX.Element>;

package/components/areas/components/Window/subcomponents/{MicroFrontend → InnerForHooks/subcomponents/MicroFrontend}/index.d.ts

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

package/components/areas/components/Window/subcomponents/{MicroFrontend → InnerForHooks/subcomponents/MicroFrontend}/subcomponents/MFLoader/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { MicroFrontendProps } from '../../../../../Area/types';
+import { MicroFrontendProps } from '../../types';
 declare global {
     interface Window {
         [key: string]: any;

package/components/areas/components/Window/subcomponents/InnerForHooks/subcomponents/MicroFrontend/types.d.ts

@@ -0,0 +1,8 @@
+import { WindowToolsMF } from '../../../../../../contexts/WindowToolsMFContext/types';
+import { MFBaseProps } from '../../../../../Area/types';
+import { DynamicMFStore } from '../../../../../../contexts/DynamicMFParmsContext/store';
+export interface MicroFrontendProps extends MFBaseProps {
+    moduleId: string;
+    dynamicMFStore?: DynamicMFStore;
+    windowTools: WindowToolsMF;
+}

package/components/areas/components/WindowPopUp/index.33bc0a5a.js

@@ -0,0 +1,117 @@
+import React__default from "react";
+import "../../../Icon/index.f6e8d810.js";
+import "framer-motion";
+import "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import "@mui/material/styles";
+import "react-router-dom";
+import "../../../animate/LoadingScreen/index.1d0c4307.js";
+import "../../../animate/PropagateLoader/index.be5b02c3.js";
+import "../index.4b828081.js";
+import "../AreasAdmin/index.7a526b73.js";
+import "@m4l/core";
+import "../../../mui_extended/IconButton/index.1318a283.js";
+import "zustand";
+import "../../contexts/AreasContext/index.e65fd347.js";
+import "zustand/shallow";
+import "../AreasContainer/index.ca690110.js";
+import "react-grid-layout/css/styles.css";
+import "../../../../react-resizable.bb58c8fc.js";
+import "../../contexts/index.137257b8.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 "../../../mui_extended/Accordion/index.1d513477.js";
+import "../../../mui_extended/Avatar/index.fe06afd7.js";
+import "@mui/material/Button";
+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/Tab/index.e0653a0a.js";
+import "../../../mui_extended/Typography/index.be3a279a.js";
+import "../../../ErrorLabel/index.73f9362c.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.3c5e5fb7.js";
+import "../../../Period/index.c439d1ed.js";
+import "../../../CommonActions/components/Actions/index.c8754d33.js";
+import "../../../../contexts/ModalContext/index.4442afd9.js";
+import "../../../../react-draggable.0eef011c.js";
+import "../../../ModalDialog/index.d605b574.js";
+import { R as ResizeableWindow } from "../../../Resizeable/index.8a442a8b.js";
+import "../../../modal/WindowConfirm.f2cc1072.js";
+import "../../../modal/WindowBase.ff74f597.js";
+import "lodash/isString";
+import "react-dropzone";
+import "../../../hook-form/RHFUpload/index.7fdff30f.js";
+import "../../../DataGrid/index.fd736623.js";
+import "react-dnd";
+import "react-dnd-html5-backend";
+import "../../../ScrollBar/index.39eeb2de.js";
+import "../../../DynamicFilter/index.4c43cc99.js";
+import "clsx";
+import "simplebar/dist/simplebar.min.css";
+import "@hookform/resolvers/yup";
+import "../../../../contexts/RHFormContext/index.828b60ad.js";
+import "yup";
+import { DraggableWindow } from "../../../../index.js";
+import "@mui/base";
+import "../../../LanguagePopover/index.26b694ef.js";
+import "../../../NoItemSelected/index.9636ec8a.js";
+import "../../../ObjectLogs/index.91d29e9e.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.89306f6a.js";
+import { W as Window } from "../Window/index.76143c30.js";
+const WindowPopUp = (props) => {
+  const {
+    windowProps,
+    windowId
+  } = props;
+  const {
+    selectWindowPopUp
+  } = useAreaStore((store) => store.actions);
+  const selectedPopUpId = useAreaStore((store) => store.currentPopUpId);
+  const zIndex = useAreaStore((store) => store.hashWindowsPopups[props.windowId].zIndex);
+  const isSelected = props.windowId === selectedPopUpId;
+  const onTouch = () => {
+    if (!isSelected) {
+      selectWindowPopUp(props.windowId);
+    }
+  };
+  return /* @__PURE__ */ jsx(DraggableWindow, {
+    handle: ".m4l_draggable_handle",
+    cancel: "",
+    defaultPosition: windowProps,
+    children: /* @__PURE__ */ jsx(ResizeableWindow, {
+      width: windowProps.width,
+      height: windowProps.height,
+      style: {
+        zIndex,
+        position: "absolute"
+      },
+      className: `M4L_WindowPopUp_${windowId} ${isSelected ? "m4l_selected" : ""}`,
+      onResizeStart: () => {
+        onTouch();
+      },
+      children: /* @__PURE__ */ jsx(Window, {
+        ...props
+      })
+    })
+  });
+};
+const MemonizedWindowPopUp = React__default.memo(WindowPopUp);
+export {
+  MemonizedWindowPopUp as M
+};

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

@@ -1,3 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { PopUpProps } from '../Area/types';
 export declare const WindowPopUp: (props: PopUpProps) => JSX.Element;
+export declare const MemonizedWindowPopUp: React.MemoExoticComponent<(props: PopUpProps) => JSX.Element>;

package/components/areas/components/{index.7d6cd649.js → index.4b828081.js}

@@ -1,37 +1,42 @@
-import { A as AreaProvider } from "../contexts/AreaContext/index.4894cf23.js";
-import { G as GridLayout } from "./GridLayout/index.b9c1e846.js";
-import { u as useAreas } from "../hooks/useArea/index.9b85ce24.js";
+import { A as AreaProvider } from "../contexts/AreaContext/index.ec85aee7.js";
+import { G as GridLayout } from "./GridLayout/index.4fb84fff.js";
+import { u as useAreasStore } from "../hooks/useArea/index.89306f6a.js";
 import { styled } from "@mui/material/styles";
 import { jsx } from "react/jsx-runtime";
-import "./AreasAdmin/index.6794b22f.js";
+import "./AreasAdmin/index.7a526b73.js";
 import "react";
 import "@m4l/core";
 import "@mui/material";
-import "../../Icon/index.8d754623.js";
-import "../contexts/AreasContext/index.cd8e4bee.js";
-import "./AreasContainer/index.a2f8899b.js";
+import "../../Icon/index.f6e8d810.js";
+import "../../mui_extended/IconButton/index.1318a283.js";
+import "zustand";
+import "../contexts/AreasContext/index.e65fd347.js";
+import "zustand/shallow";
+import "./AreasContainer/index.ca690110.js";
 import "react-grid-layout/css/styles.css";
-import "../../../react-resizable.1d00271d.js";
+import "../../../react-resizable.bb58c8fc.js";
 const WrapperArea = styled("div")(() => ({
   flexDirection: "column",
   flexGrow: "1",
   position: "absolute",
   height: "100%",
   width: "100%",
-  overflow: "auto",
+  overflow: "hidden",
   justifyContent: "top",
   alignItems: "flex-start",
   border: "1px dashed black",
   visibility: "hidden",
   display: "none",
+  hola: "juan",
   "&.active": {
     display: "flex",
     visibility: "visible"
   },
-  "& .layout": {
+  "& .M4L_GridLayout": {
     overflow: "scroll",
     minWidth: "100%",
-    minHeight: "100%"
+    minHeight: "100%",
+    juan: 1
   },
   "& .selected": {
     borderTop: "1px solid green"
@@ -44,7 +49,7 @@ const Area = (props) => {
   } = props;
   const {
     setAreaRef
-  } = useAreas();
+  } = useAreasStore((state) => state.internalActions);
   const setAreaProviderRef = (element) => {
     console.log("setAreaProviderRef", element, id);
     if (element) {
@@ -53,7 +58,7 @@ const Area = (props) => {
   };
   console.log("Render Area");
   return /* @__PURE__ */ jsx(WrapperArea, {
-    className: active ? "active" : "",
+    className: `M4L_Area_wrapper_${id} ${active ? "active" : ""}`,
     children: /* @__PURE__ */ jsx(AreaProvider, {
       ...props,
       ref: setAreaProviderRef,

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

@@ -1,4 +1,5 @@
 export * from './Area';
 export * from './AreasAdmin';
 export * from './AreasContainer';
-export type { NewWindowProps as NewWindow, MicroFrontendProps } from './Area/types';
+export type { NewWindowProps as NewWindow } from './Area/types';
+export type { MicroFrontendProps } from './Window/subcomponents/InnerForHooks/subcomponents/MicroFrontend/types';

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

@@ -0,0 +1,12 @@
+import { WritableDraft } from 'immer/dist/internal';
+import { HashWindowsByLayouts } from '../../components/Area/types';
+import { AreaStateWithActions } from './store';
+export declare const DEBOUCED_SAVE_TIME = 500;
+export declare const COOKIE_BREAKPOINT_LAYOUTS = "layoutPros";
+export declare const COOKIE_WINDOWS = "windows";
+export declare const getParmsFromValue: (key: string, data: []) => any;
+export declare function getDataFromResponse(data: any, state: WritableDraft<AreaStateWithActions>): {
+    newBreakPointsLayouts: any;
+    newGridLayouts: any[];
+    newHashWindowLayouts: HashWindowsByLayouts;
+};

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AreaContextProps, AreaProviderProps, AreaProviderRef } from './types';
 declare const AreaContext: React.Context<AreaContextProps | null>;
-declare const AreaProvider: React.ForwardRefExoticComponent<AreaProviderProps & React.RefAttributes<AreaProviderRef>>;
-declare const MemonizedAreaProvider: React.MemoExoticComponent<React.ForwardRefExoticComponent<AreaProviderProps & React.RefAttributes<AreaProviderRef>>>;
+declare const AreaProvider: React.ForwardRefExoticComponent<Omit<AreaProviderProps, "ref"> & React.RefAttributes<AreaProviderRef>>;
+declare const MemonizedAreaProvider: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<AreaProviderProps, "ref"> & React.RefAttributes<AreaProviderRef>>>;
 export { AreaProvider, AreaContext, MemonizedAreaProvider };