@m4l/components 9.2.0 → 9.2.2

package/components/areas/contexts/AreasContext/helpers/helper.js

@@ -1,4 +1,4 @@
-import { c as createDynamicMFStore } from "../../DynamicMFParmsContext/store.js";
+import { c as createDynamicMFStore } from "../../../../WindowBase/contexts/DynamicMFParmsContext/store.js";
 import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../dictionary.js";
 import { c as addLayoutItemToBreakPointIfNoExists } from "../../../../GridLayout/subcomponents/Responsive/responsiveUtils.js";
 const PADDING_GRIDLAYOUT = 11;
@@ -28,7 +28,6 @@ const DEFAULT_AREA = {
   // windowsLayoutIds: [],
   layoutItemsIds: [],
   currentLayoutId: "",
-  currentPopUpId: "",
   breakpoints: BREAKPOINT_SIZES,
   cols: NORMALIZED_COLS,
   loadWindows: false
@@ -140,8 +139,7 @@ function getDataFromResponse(data, state, areaId) {
           emergeType: "layout",
           areaId,
           dynamicMFStore: createDynamicMFStore({
-            dynamicMFParameters: element.dynamicParams,
-            windowId: key
+            dynamicMFParameters: element.dynamicParams
           }),
           onClose: () => onClose(areaId, key)
         };
@@ -193,16 +191,16 @@ function getSelectedAreaIdFromCookies(cookiesResponse) {
   return typeof cookiesResponse?.data?.[0]?.value === "string" && JSON.parse(cookiesResponse?.data?.[0]?.value || "{}")?.selectedAreaId;
 }
 export {
-  COOKIE_AREAS_ADMIN_CONTAINER_ID as C,
+  COOKIE_WINDOW_SELECTED as C,
   DEFAULT_AREA as D,
   MARGIN_GRIDLAYOUT as M,
   NORMALIZED_COLS as N,
   PADDING_GRIDLAYOUT as P,
   RESPONSIVE_COLAPSED_HEIGHTS as R,
   RESPONSIVE_ROW_HEIGHTS as a,
-  COOKIE_AREAS_ADMIN_ID as b,
-  addArea as c,
-  COOKIE_WINDOW_SELECTED as d,
+  COOKIE_AREAS_ADMIN_CONTAINER_ID as b,
+  COOKIE_AREAS_ADMIN_ID as c,
+  addArea as d,
   DEFAULT_WINDOW as e,
   deleteLayoutFromBreakPoints as f,
   getSelectedAreaIdFromCookies as g,

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

@@ -0,0 +1,6 @@
+import { WritableDraft } from 'immer/dist/internal';
+import { AreasStoreStateWithActions } from '../types';
+/**
+ * TODO: Documentar
+ */
+export declare function helperSelectLayout(state: WritableDraft<AreasStoreStateWithActions>, areaId: string, layoutId: string, saveCookie?: boolean): void;

package/components/areas/contexts/AreasContext/helpers/selectLayout.js

@@ -0,0 +1,27 @@
+import { C as COOKIE_WINDOW_SELECTED } from "./helper.js";
+import { s as setCookie, d as deleteCookie } from "../../../../../helpers/cookies/cookies.js";
+function helperSelectLayout(state, areaId, layoutId, saveCookie = true) {
+  const area = state.hashAreas[areaId];
+  area.currentLayoutId = layoutId;
+  if (layoutId !== "" && state.hashWindows[layoutId]) {
+    state.currentModuleId = state.hashWindows[layoutId].moduleId;
+    if (saveCookie) {
+      setCookie({
+        networkOperation: state.networkOperation,
+        endPoint: `${area.id}/${COOKIE_WINDOW_SELECTED}`,
+        value: { currentLayoutId: layoutId }
+      });
+    }
+  } else {
+    state.currentModuleId = "";
+    if (saveCookie) {
+      deleteCookie({
+        networkOperation: state.networkOperation,
+        data: { f: [{ n: "id", o: "e", o1: COOKIE_WINDOW_SELECTED }] }
+      });
+    }
+  }
+}
+export {
+  helperSelectLayout as h
+};

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

@@ -1,10 +1,10 @@
 import { AreasProviderProps } from './types';
-declare const AreasContext: import('react').Context<(Omit<Omit<import('zustand').StoreApi<import('./types').AreasStateWithActions>, "setState"> & {
+declare const AreasContext: import('react').Context<(Omit<Omit<import('zustand').StoreApi<import('./types').AreasStoreStateWithActions>, "setState"> & {
     setState<A extends string | {
         type: unknown;
-    }>(partial: import('./types').AreasStateWithActions | Partial<import('./types').AreasStateWithActions> | ((state: import('./types').AreasStateWithActions) => import('./types').AreasStateWithActions | Partial<import('./types').AreasStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+    }>(partial: import('./types').AreasStoreStateWithActions | Partial<import('./types').AreasStoreStateWithActions> | ((state: import('./types').AreasStoreStateWithActions) => import('./types').AreasStoreStateWithActions | Partial<import('./types').AreasStoreStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
 }, "setState"> & {
-    setState(nextStateOrUpdater: import('./types').AreasStateWithActions | Partial<import('./types').AreasStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<import('./types').AreasStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+    setState(nextStateOrUpdater: import('./types').AreasStoreStateWithActions | Partial<import('./types').AreasStoreStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<import('./types').AreasStoreStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
         type: unknown;
     } | undefined): void;
 }) | null>;
@@ -15,7 +15,7 @@ declare const AreasContext: import('react').Context<(Omit<Omit<import('zustand')
  * @returns
  */
 /**
- * Proveedor del contexto de las áreas de trabajo.
+ * Proveedor de áreas de trabajo
  */
 declare function AreasProvider(props: AreasProviderProps): import("react/jsx-runtime").JSX.Element;
 export { AreasProvider, AreasContext };

package/components/areas/contexts/AreasContext/index.js

@@ -5,27 +5,47 @@ import { shallow } from "zustand/shallow";
 import { useFirstRender } from "@m4l/graphics";
 import { useHostTools, useModuleDictionary, useNetwork, useFlagsStore, CommonFlags, EmitEvents } from "@m4l/core";
 import { c as createAreasStore } from "./store.js";
+import { u as usePopupsStore } from "../../../popups/components/PopupsProvider/hooks/usePopupsStore.js";
 const AreasContext = createContext(null);
 function AreasProvider(props) {
-  const { children, loadAreasFromNetwork, loadCookiesFromNetwork, onLoad, onSelectLayout } = props;
+  const { children, loadAreasFromNetwork, loadCookiesFromNetwork, onLoad, onSelectLayout, storeId, storeDevtoolsEnabled } = props;
   const { events_add_listener, events_remove_listener } = useHostTools();
   const { getLabel } = useModuleDictionary();
   const { networkOperation } = useNetwork();
   const isFirstRender = useFirstRender([getLabel]);
   const { addFlag } = useFlagsStore((state) => state.flagsActions);
   const areasStoreRef = useRef();
+  const {
+    addPopup,
+    removePopup,
+    closePopupsByGroupId: removePopupsByGroupId,
+    bringPopupOnFront,
+    closeAllPopupsByParentId,
+    setSelectedPopupId
+  } = usePopupsStore(
+    (state) => state.popupsActions,
+    shallow
+  );
   if (!areasStoreRef.current) {
     areasStoreRef.current = createAreasStore({
+      storeId,
       getLabel,
       loadAreasFromNetwork,
       loadCookiesFromNetwork,
       networkOperation,
       ownerState: {
         status: "init",
-        readyForHooks: false,
-        focus: false
+        readyForHooks: false
+      },
+      popupsProviderMethods: {
+        addPopup,
+        removePopup,
+        removePopupsByGroupId,
+        bringPopupOnFront,
+        closeAllPopupsByParentId,
+        setSelectedPopupId
       }
-    });
+    }, storeDevtoolsEnabled);
     areasStoreRef.current?.getState().areasActions.init();
   }
   const status = useStore(areasStoreRef.current, (state) => state.ownerState.status, shallow);

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

@@ -1,15 +1,15 @@
-import { AreasStateWithActions, InitialAreasStoreProps } from './types';
+import { AreasStoreStateWithActions, InitialAreasStoreProps } from './types';
 /**
  * Crea el Store, por defecto inicia en estado 'init'
  * @param initProps propiedades iniciales del store
  * @returns
  */
-export declare const createAreasStore: (initProps: InitialAreasStoreProps) => Omit<Omit<import('zustand').StoreApi<AreasStateWithActions>, "setState"> & {
+export declare const createAreasStore: (initProps: InitialAreasStoreProps, storeDevtoolsEnabled?: boolean) => Omit<Omit<import('zustand').StoreApi<AreasStoreStateWithActions>, "setState"> & {
     setState<A extends string | {
         type: unknown;
-    }>(partial: AreasStateWithActions | Partial<AreasStateWithActions> | ((state: AreasStateWithActions) => AreasStateWithActions | Partial<AreasStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+    }>(partial: AreasStoreStateWithActions | Partial<AreasStoreStateWithActions> | ((state: AreasStoreStateWithActions) => AreasStoreStateWithActions | Partial<AreasStoreStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
 }, "setState"> & {
-    setState(nextStateOrUpdater: AreasStateWithActions | Partial<AreasStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<AreasStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+    setState(nextStateOrUpdater: AreasStoreStateWithActions | Partial<AreasStoreStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<AreasStoreStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
         type: unknown;
     } | undefined): void;
 };

package/components/areas/contexts/AreasContext/store.js

@@ -1,27 +1,35 @@
 import { createStore } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { C as COOKIE_AREAS_ADMIN_CONTAINER_ID, b as COOKIE_AREAS_ADMIN_ID, D as DEFAULT_AREA, c as addArea, g as getSelectedAreaIdFromCookies, d as COOKIE_WINDOW_SELECTED, e as DEFAULT_WINDOW, a as RESPONSIVE_ROW_HEIGHTS, P as PADDING_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, N as NORMALIZED_COLS, f as deleteLayoutFromBreakPoints, h as COOKIE_WINDOWS, i as COOKIE_BREAKPOINT_LAYOUTS, j as DEBOUCED_SAVE_TIME, s as setColapsedLayoutBreakPoints, k as getDataFromResponse, l as getParmsFromValue, m as getCookiesContainer } from "./helpers/helper.js";
-import { c as createDynamicMFStore } from "../DynamicMFParmsContext/store.js";
+import { b as COOKIE_AREAS_ADMIN_CONTAINER_ID, c as COOKIE_AREAS_ADMIN_ID, D as DEFAULT_AREA, d as addArea, g as getSelectedAreaIdFromCookies, e as DEFAULT_WINDOW, a as RESPONSIVE_ROW_HEIGHTS, P as PADDING_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, N as NORMALIZED_COLS, f as deleteLayoutFromBreakPoints, h as COOKIE_WINDOWS, i as COOKIE_BREAKPOINT_LAYOUTS, j as DEBOUCED_SAVE_TIME, s as setColapsedLayoutBreakPoints, k as getDataFromResponse, l as getParmsFromValue, m as getCookiesContainer, C as COOKIE_WINDOW_SELECTED } from "./helpers/helper.js";
+import { c as createDynamicMFStore } from "../../../WindowBase/contexts/DynamicMFParmsContext/store.js";
 import cloneDeep from "lodash-es/cloneDeep";
 import debounce from "lodash-es/debounce";
 import { g as generateModuleCount } from "./helpers/generateModuleCount.js";
+import { a as AREAS_STORE_ID } from "../../constants.js";
+import { h as helperSelectLayout } from "./helpers/selectLayout.js";
 import { g as getCookie, d as deleteCookie, s as setCookie } from "../../../../helpers/cookies/cookies.js";
 import { d as addLayoutItemToBreakPoints, e as cloneLayouts } from "../../../GridLayout/subcomponents/Responsive/responsiveUtils.js";
 import { k as isEqualLayouts } from "../../../GridLayout/utils.js";
-const createAreasStore = (initProps) => {
+const createDevtools = (immerMiddlewere, config) => {
+  const { enabled = false } = config;
+  if (enabled && process.env.NODE_ENV === "development") {
+    return devtools(immerMiddlewere, config);
+  }
+  return immerMiddlewere;
+};
+const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
   const startProps = {
     currentAreaId: "",
     currentModuleId: "",
     areasIds: [],
     hashAreas: {},
     hashWindows: {},
-    hashWindowsModals: {},
-    windowsModals: [],
+    windowsModalsIds: [],
     ...initProps
   };
   return createStore(
-    devtools(
+    createDevtools(
       immer((set, get) => ({
         ...startProps,
         areasActions: {
@@ -215,23 +223,20 @@ const createAreasStore = (initProps) => {
            */
           addWindow: (newWindowProps) => {
             const windowId = `${get().currentAreaId}_window_${(/* @__PURE__ */ new Date()).getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
-            if (newWindowProps.emergeType === "layout" || newWindowProps.emergeType === "popup") {
+            if (newWindowProps.emergeType === "layout") {
               get().areaActions.addLayout(get().currentAreaId, windowId, newWindowProps);
+            } else if (newWindowProps.emergeType === "popup") {
+              get().areaActions.addPopup(get().currentAreaId, windowId, newWindowProps);
             } else if (newWindowProps.emergeType === "modal") {
               get().areaActions.addWindowModal(get().currentAreaId, windowId, newWindowProps);
             }
-            setCookie({
-              networkOperation: get().networkOperation,
-              endPoint: `${get().currentAreaId}/${COOKIE_WINDOW_SELECTED}`,
-              value: { currentLayoutId: windowId }
-            });
           },
           /**
            * addLayout store
            */
           addLayout: (areaId, windowId, newWindowProps) => {
             let previousId = windowId;
-            const freeMove = newWindowProps.emergeType === "popup";
+            const freeMove = false;
             const moduleCount = generateModuleCount(get().currentAreaId, newWindowProps.moduleId, get().hashWindows);
             const newLayoutItem = {
               ...newWindowProps.layoutProps,
@@ -258,8 +263,7 @@ const createAreasStore = (initProps) => {
               }
               if (previousId === windowId) {
                 const dynamicMFStore = createDynamicMFStore({
-                  dynamicMFParameters: newWindowProps.dynamicParams,
-                  windowId
+                  dynamicMFParameters: newWindowProps.dynamicParams
                 });
                 state.hashWindows[windowId] = {
                   ...newWindowProps,
@@ -273,11 +277,6 @@ const createAreasStore = (initProps) => {
                   moduleCount
                 };
                 area.layoutItemsIds.push(windowId);
-                if (newWindowProps.emergeType === "layout") {
-                  area.currentLayoutId = windowId;
-                } else {
-                  area.currentPopUpId = windowId;
-                }
                 if (area.maximizedId) {
                   area.maximizedId = windowId;
                 }
@@ -294,6 +293,8 @@ const createAreasStore = (initProps) => {
                 if (area.currentBreakpoint === "xxs") {
                   area.maximizedId = windowId;
                 }
+                helperSelectLayout(state, areaId, windowId, true);
+                get().popupsProviderMethods.setSelectedPopupId(areaId, void 0);
               }
             });
             get().areaActions.saveLayouts(areaId);
@@ -314,6 +315,9 @@ const createAreasStore = (initProps) => {
               }
               deleteLayoutFromBreakPoints(area, removeLayoutId);
               delete state.hashWindows[removeLayoutId];
+              if (state.hashAreas[areaId].currentLayoutId === removeLayoutId) {
+                helperSelectLayout(state, areaId, "");
+              }
             });
             get().areaActions.saveLayouts(areaId);
             if (get().hashAreas[areaId].maximizedId === removeLayoutId) {
@@ -322,16 +326,11 @@ const createAreasStore = (initProps) => {
             for (let index = 0; index < get().hashAreas[areaId].layoutItemsIds.length; index++) {
               const layoutItemId = get().hashAreas[areaId].layoutItemsIds[index];
               const layoutItem = get().hashWindows[layoutItemId];
-              if (layoutItem.parentLayoutId === removeLayoutId) {
+              if (layoutItem.parentId === removeLayoutId) {
                 get().areaActions.closeLayout(areaId, layoutItem.windowId);
               }
             }
-            if (get().hashAreas[areaId].currentLayoutId === removeLayoutId) {
-              deleteCookie({
-                networkOperation: get().networkOperation,
-                data: { f: [{ n: "id", o: "e", o1: COOKIE_WINDOW_SELECTED }] }
-              });
-            }
+            get().popupsProviderMethods.closeAllPopupsByParentId(removeLayoutId);
           },
           /**
            * saveLayouts
@@ -379,17 +378,98 @@ const createAreasStore = (initProps) => {
               });
             }
           },
+          /**
+           * addPopup store
+           */
+          addPopup: (areaId, windowId, newWindowProps) => {
+            let previousId = windowId;
+            set((state) => {
+              const area = state.hashAreas[areaId];
+              if (!area) {
+                return;
+              }
+              if (newWindowProps.replaceMeId) {
+                for (const key in state.hashWindows) {
+                  if (state.hashWindows[key].replaceMeId === newWindowProps.replaceMeId) {
+                    const WindoPopUp = state.hashWindows[key];
+                    previousId = key;
+                    WindoPopUp.dynamicMFStore.getState().actions.changeData(newWindowProps.dynamicParams);
+                    get().popupsProviderMethods.bringPopupOnFront(key, true);
+                    break;
+                  }
+                }
+              }
+              if (previousId === windowId) {
+                const dynamicMFStore = createDynamicMFStore({
+                  dynamicMFParameters: newWindowProps.dynamicParams
+                });
+                state.hashWindows[windowId] = {
+                  ...newWindowProps,
+                  ...DEFAULT_WINDOW,
+                  areaId,
+                  windowId,
+                  onClose: (removeLayoutId) => {
+                    get().areaActions.closeLayout(areaId, removeLayoutId);
+                  },
+                  dynamicMFStore
+                };
+                const { emergeType, popupProps, ...newWindowPropsExact } = newWindowProps;
+                const onSelectedPopupIdChange = (groupId, _popupId, reason) => {
+                  if (parentId) {
+                    if (reason === "select") {
+                      get().areaActions.selectLayout(groupId, parentId);
+                    }
+                  } else {
+                    get().areaActions.selectLayout(groupId, "");
+                  }
+                };
+                const parentId = newWindowProps?.parentId;
+                get().popupsProviderMethods.addPopup({
+                  ...newWindowPropsExact,
+                  ...newWindowProps.popupProps,
+                  popupId: windowId,
+                  groupId: areaId,
+                  dynamicMFStore,
+                  dynamicParams: newWindowProps.dynamicParams,
+                  onRemove: () => get().areaActions.closePopup(areaId, windowId),
+                  /**
+                   *
+                   */
+                  onSelectedPopupIdChange,
+                  allowHeightResizeContainer: true,
+                  allowWidthResizeContainer: false,
+                  bounds: {
+                    left: MARGIN_GRIDLAYOUT,
+                    top: MARGIN_GRIDLAYOUT,
+                    right: -MARGIN_GRIDLAYOUT,
+                    bottom: -MARGIN_GRIDLAYOUT
+                  }
+                });
+              }
+            });
+          },
+          /**
+           * closePopup
+           */
+          closePopup: (areaId, windowId) => {
+            set((state) => {
+              const area = state.hashAreas[areaId];
+              if (!area) {
+                return;
+              }
+              delete state.hashWindows[windowId];
+            });
+          },
           /**
            * closeWindowModal
            */
           closeWindowModal: (removeModalId) => {
             set((state) => {
-              const removeIndex = state.windowsModals.findIndex((w) => w === removeModalId);
+              const removeIndex = state.windowsModalsIds.findIndex((w) => w === removeModalId);
               if (removeIndex > -1) {
-                state.windowsModals.splice(removeIndex, 1);
+                state.windowsModalsIds.splice(removeIndex, 1);
               }
               delete state.hashWindows[removeModalId];
-              delete state.hashWindowsModals[removeModalId];
             });
           },
           /**
@@ -398,12 +478,11 @@ const createAreasStore = (initProps) => {
           addWindowModal: (areaId, windowId, newWindowModalProps) => {
             set((state) => {
               const dynamicMFStore = createDynamicMFStore({
-                dynamicMFParameters: newWindowModalProps.dynamicParams,
-                windowId
+                dynamicMFParameters: newWindowModalProps.dynamicParams
               });
-              state.windowsModals.push(windowId);
+              state.windowsModalsIds.push(windowId);
               const moduleCount = generateModuleCount(get().currentAreaId, newWindowModalProps.moduleId, get().hashWindows);
-              state.hashWindowsModals[windowId] = {
+              state.hashWindows[windowId] = {
                 ...newWindowModalProps,
                 areaId,
                 windowId,
@@ -412,7 +491,6 @@ const createAreasStore = (initProps) => {
                 dynamicMFStore,
                 moduleCount
               };
-              state.hashWindows[windowId] = state.hashWindowsModals[windowId];
             });
           },
           bouncedSaveBreakpointsLayouts: debounce(
@@ -476,32 +554,11 @@ const createAreasStore = (initProps) => {
            * selectLayout
            */
           selectLayout: (areaId, layoutId) => {
+            if (get().hashAreas[areaId].currentLayoutId === layoutId) {
+              return;
+            }
             set((state) => {
-              const area = state.hashAreas[areaId];
-              if (state.hashWindows[layoutId].emergeType === "layout") {
-                area.currentLayoutId = layoutId;
-                state.currentModuleId = state.hashWindows[layoutId].moduleId;
-                if (area.currentPopUpId !== "" && state.hashWindows[area.currentPopUpId]) {
-                  if (state.hashWindows[area.currentPopUpId].parentLayoutId !== layoutId) {
-                    area.currentPopUpId = "";
-                  }
-                }
-              } else {
-                state.hashAreas[areaId].currentPopUpId = layoutId;
-                const parentLayoutId = state.hashWindows[layoutId]?.parentLayoutId;
-                if (parentLayoutId && state.hashWindows[parentLayoutId]) {
-                  area.currentLayoutId = parentLayoutId;
-                  state.currentModuleId = state.hashWindows[parentLayoutId].moduleId;
-                } else {
-                  area.currentLayoutId = "";
-                  state.currentModuleId = "";
-                }
-              }
-              setCookie({
-                networkOperation: get().networkOperation,
-                endPoint: `${area.id}/${COOKIE_WINDOW_SELECTED}`,
-                value: { currentLayoutId: layoutId }
-              });
+              helperSelectLayout(state, areaId, layoutId);
             });
           },
           /**
@@ -532,11 +589,6 @@ const createAreasStore = (initProps) => {
                 return;
               }
               area.maximizedId = layoutId;
-              const index = area.layouts["xxs"]?.findIndex((li) => li.i === area.maximizedId);
-              if (index !== void 0 && index > -1 && layoutId && state.hashWindows[layoutId].emergeType === "popup") {
-                area.layouts["xxs"][index].visible = true;
-                area.layouts["xxs"][index].colapsed = false;
-              }
             });
             if (layoutId) {
               get().areaActions.selectLayout(areaId, layoutId);
@@ -551,12 +603,6 @@ const createAreasStore = (initProps) => {
               if (!area) {
                 return;
               }
-              if (area.maximizedId) {
-                const index = area.layouts["xxs"]?.findIndex((li) => li.i === area.maximizedId);
-                if (index !== void 0 && index > -1 && state.hashWindows[area.maximizedId].emergeType === "popup") {
-                  area.layouts["xxs"][index].visible = false;
-                }
-              }
               area.maximizedId = void 0;
             });
           },
@@ -599,17 +645,23 @@ const createAreasStore = (initProps) => {
                 area3.layouts = newBreakPointsLayouts;
                 area3.layoutItemsIds = newHashLayoutItems;
                 area3.status = "loaded";
+                const layoutSelected = getParmsFromValue(COOKIE_WINDOW_SELECTED, dataResponse) || "";
+                helperSelectLayout(state, areaId, layoutSelected, false);
               });
-              const layoutSelected = getParmsFromValue(COOKIE_WINDOW_SELECTED, dataResponse);
-              if (layoutSelected) {
-                get().areaActions.selectLayout(areaId, layoutSelected.currentLayoutId);
-              }
             }).catch((_response) => {
               set((state) => {
                 state.hashAreas[areaId].status = "loaded";
               });
             });
           }
+          // /**
+          //  * setIsDraggingResizingPopup
+          //  */
+          // setIsDraggingResizingPopup: (areaId: string, newIsDraggingResizingPopup: boolean) => {
+          //   set(state => {
+          //     state.hashAreas[areaId].isDraggingResizingPopup = newIsDraggingResizingPopup;
+          //   });
+          // },
         },
         windowActions: {
           /**
@@ -789,19 +841,9 @@ const createAreasStore = (initProps) => {
               state.hashWindows[windowId].title = title;
             });
           }
-        },
-        areaAdminActions: {
-          /**
-           * setFocus
-           */
-          setFocus: (newValue) => {
-            set((state) => {
-              state.ownerState = { ...state.ownerState, focus: newValue };
-            });
-          }
         }
       })),
-      { name: `Areas store` }
+      { name: `${AREAS_STORE_ID}: ${initProps.storeId}`, enabled: storeDevtoolsEnabled }
     )
   );
 };