@m4l/components 0.1.64 → 0.1.65

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

@@ -0,0 +1,7 @@
+/**
+ * @description Muestra las áreas cargadas en el store, si no se han cargado muestra un componente indicando la carga.
+ * Se debe visualizar todas las areas, y con display:none para todas menos para la activa, para que no se tengan que estar montando y destruyendo
+ * las ventanas que al cambiar entre áreas
+ * @returns JSX Areas
+ */
+export declare function AreasViewer(): JSX.Element;

package/components/areas/{contexts → components/AreasViewer/subcomponents/Area/contexts}/AreaContext/helper.d.ts

@@ -1,7 +1,7 @@
 import { WritableDraft } from 'immer/dist/internal';
 import { Layouts } from 'react-grid-layout';
-import { HashWindowsByLayouts } from '../../components/Area/types';
-import { AreaStateWithActions } from './store';
+import { HashWindowsByLayouts } from '../../types';
+import { AreaStateWithActions } from './types';
 import { WinLayout } from './types';
 export declare const ROW_HEIGTH_GRIDLAYOUT = 100;
 export declare const CONTAINER_PADDING_GRIDLAYOUT = 3;

package/components/areas/{contexts → components/AreasViewer/subcomponents/Area/contexts}/AreaContext/index.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import { AreaProviderProps } from './types';
-declare const AreaContext: React.Context<(Omit<Omit<import("zustand").StoreApi<import("./store").AreaStateWithActions>, "setState"> & {
+declare const AreaContext: React.Context<(Omit<Omit<import("zustand").StoreApi<import("./types").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;
+    }>(partial: import("./types").AreaStateWithActions | Partial<import("./types").AreaStateWithActions> | ((state: import("./types").AreaStateWithActions) => import("./types").AreaStateWithActions | Partial<import("./types").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 | {
+    setState(nextStateOrUpdater: import("./types").AreaStateWithActions | Partial<import("./types").AreaStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<import("./types").AreaStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
         type: unknown;
     } | undefined): void;
 }) | null>;

package/components/areas/components/AreasViewer/subcomponents/Area/contexts/AreaContext/store.d.ts

@@ -0,0 +1,11 @@
+import type { AreaStateWithActions, InitialStoreProps } from './types';
+export declare const createAreaStore: (initProps: InitialStoreProps) => Omit<Omit<import("zustand").StoreApi<AreaStateWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: AreaStateWithActions | Partial<AreaStateWithActions> | ((state: AreaStateWithActions) => AreaStateWithActions | Partial<AreaStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: AreaStateWithActions | Partial<AreaStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<AreaStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+};
+export declare type AreaStore = ReturnType<typeof createAreaStore>;

package/components/areas/{contexts/AreaContext/store.d.ts → components/AreasViewer/subcomponents/Area/contexts/AreaContext/types.d.ts}

@@ -1,7 +1,13 @@
-import { Maybe, NetworkProps } from '@m4l/core';
-import { Layout, Layouts } from 'react-grid-layout';
+import { ReactNode } from 'react';
 import { DebouncedFunc } from 'lodash';
-import { HashWindowsByLayouts, HashWindowsByPopups, ModalProps, NewLayoutProps, NewModalProps, NewPopUpProps, NewWindowProps } from '../../components/Area/types';
+import { Layout, Layouts } from 'react-grid-layout';
+import { HashWindowsByLayouts, HashWindowsByPopups, ModalProps, NewLayoutProps, NewModalProps, NewPopUpProps, NewWindowProps, WinType } from '../../types';
+import { AreaProps } from '../../types';
+import { AreaStore } from './store';
+import { Maybe, NetworkProps } from '@m4l/core';
+export declare type WinLayout = Layout & {
+    winType: WinType;
+};
 export declare type AreaStatus = 'init' | 'load' | 'loaded' | 'error';
 export declare type Breakpoints = {
     [P: string]: number;
@@ -11,9 +17,16 @@ export declare type Cols = {
 };
 export declare type ViewAreaMode = 'multiple' | 'single';
 export interface AreaState {
-    zPopUpIndex: number;
     id: string;
+    /**
+     *  "loadAreasFromNetwork" Indica si se deben cargar las ventanas desde la API
+     */
     loadAreasFromNetwork: boolean;
+    /**
+     *  "loadCookiesFromNetwork" Indica si se deben cargar/grabar las cookies en la API
+     */
+    loadCookiesFromNetwork: boolean;
+    zPopUpIndex: number;
     loadWindows: boolean;
     status: AreaStatus;
     breakpointsLayouts: Layouts;
@@ -54,16 +67,16 @@ export interface AreaStateWithActions extends AreaState {
         changeDesktopBreakpoint: (isDesktop: boolean) => void;
     };
 }
-declare type DefaultStoreProps = Omit<AreaState, 'id'>;
-declare type InitialStoreProps = Pick<AreaState, 'id' | 'networkOperation' | 'loadAreasFromNetwork' | 'loadWindows' | 'isDesktop'> & Partial<DefaultStoreProps>;
-export declare const createAreaStore: (initProps: InitialStoreProps) => Omit<Omit<import("zustand").StoreApi<AreaStateWithActions>, "setState"> & {
-    setState<A extends string | {
-        type: unknown;
-    }>(partial: AreaStateWithActions | Partial<AreaStateWithActions> | ((state: AreaStateWithActions) => AreaStateWithActions | Partial<AreaStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
-}, "setState"> & {
-    setState(nextStateOrUpdater: AreaStateWithActions | Partial<AreaStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<AreaStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
-        type: unknown;
-    } | undefined): void;
+export declare type DefaultStoreProps = Omit<AreaState, 'id'>;
+export declare type InitialStoreProps = Pick<AreaState, 'id' | 'networkOperation' | 'loadWindows' | 'isDesktop' | 'loadAreasFromNetwork' | 'loadCookiesFromNetwork'> & Partial<DefaultStoreProps>;
+export interface AreaProviderProps extends AreaProps {
+    children: ReactNode;
+}
+export declare type AreaProviderRef = {
+    store: AreaStore;
+    addWindow: (newWindow: NewWindowProps) => string;
 };
-export declare type AreaStore = ReturnType<typeof createAreaStore>;
-export {};
+export interface AreaContextProps {
+    store: AreaStore;
+    addWindow: (newWindow: NewWindowProps) => string;
+}

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

@@ -0,0 +1,12 @@
+import { AreaProps } from './types';
+/**
+ * @description Funcion encargada de renderizar un área completa.
+ * El AreaProvider crea el store del área, por medio del cual se controla todo el estado y almacenamiento del área
+ *
+ * @param props AreaProps
+ * @returns JSX
+ */
+export declare const Area: {
+    (props: AreaProps): JSX.Element;
+    displayName: string;
+};

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/GridLayout/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @description Retorna el componente GridLayout con las ventanas (layouts) y popups tomados del área de trabajo.
+ * @returns JSX
+ */
+export declare const GridLayout: () => JSX.Element;

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/PanelWindows/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @description Funcion que se encarga de renderizar los botones que permiten cambiar de ventana o módulo
+ * cuando el área está en modo single (maximizado o mobile)
+ * @returns JSX
+ */
+export declare const PanelWindows: () => JSX.Element | null;

package/components/areas/{contexts → components/AreasViewer/subcomponents/Area/subcomponents/Window/contexts}/WindowContext/store.d.ts

@@ -1,11 +1,16 @@
-import { ModuleAction, WindowToolsMF } from '..';
-import { Cookies, WindowBaseProps } from '../../components/Area/types';
+import { ModuleAction, WindowToolsMF } from '../../../../../../../../contexts';
+import { Cookies, WindowBaseProps } from '../../../../types';
 import { NetworkProps } from '@m4l/core';
-import { DynamicMFStore } from '../DynamicMFParmsContext/store';
+import { DynamicMFStore } from '../../../../../../../../contexts/DynamicMFParmsContext/store';
+import { AreaStore } from '../../../../contexts/AreaContext/store';
+import { AreasStore } from '../../../../../../../../contexts/AreasContext/store';
 export declare type WindowStatus = 'init' | 'loaded' | 'error';
 export interface WindowState extends WindowBaseProps {
     status: WindowStatus;
     dynamicMFStore: DynamicMFStore;
+    areaStore: AreaStore;
+    areasStore: AreasStore;
+    version?: string;
     moduleActions: ModuleAction[];
     networkOperation: (props: NetworkProps) => Promise<any>;
     cookies: Cookies;

package/components/areas/{contexts → components/AreasViewer/subcomponents/Area/subcomponents/Window/contexts}/WindowContext/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { WindowBaseProps } from '../../components/Area/types';
+import { WindowBaseProps } from '../../../../types';
 export interface WindowProviderProps extends WindowBaseProps {
     children: ReactNode;
 }

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

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

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import { WindowProps } from '../../../Area/types';
+import { WindowProps } from '../../../../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 → AreasViewer/subcomponents/Area/subcomponents/Window}/subcomponents/InnerForHooks/subcomponents/Component/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { JSX_REACT_NODE } from '../../../../../Area/types';
+import { JSX_REACT_NODE } from '../../../../../../types';
 export declare const Component: (props: {
     component: JSX_REACT_NODE;
 }) => JSX.Element;

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/InnerForHooks/subcomponents/Header/helper.d.ts

@@ -0,0 +1,3 @@
+import { ModuleAction } from '../../../../../../../../../../contexts';
+export declare function getMainActions(isDesktop: boolean | undefined, moduleActions: ModuleAction[]): ModuleAction[];
+export declare function getMenuActions(isDesktop: boolean | undefined, moduleActions: ModuleAction[], urlPrefix: string, saveModuleCookies: () => void, version?: string): ModuleAction[];

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/InnerForHooks/subcomponents/Header/subcomponents/MainActions/index.d.ts

@@ -0,0 +1 @@
+export declare function MainActions(): JSX.Element;

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

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

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

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

package/components/areas/components/{WindowModal → AreasViewer/subcomponents/Area/subcomponents/WindowModal}/index.d.ts

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

package/components/areas/components/{WindowPopUp → AreasViewer/subcomponents/Area/subcomponents/WindowPopUp}/index.d.ts

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

package/components/areas/components/{Area → AreasViewer/subcomponents/Area}/types.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { DynamicMFParameters } from '../../contexts/DynamicMFParmsContext/types';
+import { DynamicMFParameters } from '../../../../contexts/DynamicMFParmsContext/types';
 import type { Layout } from 'react-grid-layout';
-import { WindowStore } from '../../contexts/WindowContext/store';
-import { AreaStore } from '../../contexts/AreaContext/store';
+import { WindowStore } from './subcomponents/Window/contexts/WindowContext/store';
+import { AreaStore } from './contexts/AreaContext/store';
 export declare type WinType = 'microfrontend' | 'component';
 export declare type EmergeType = 'layout' | 'popup' | 'modal';
 export interface MFBaseProps {
@@ -73,7 +73,8 @@ export interface HashWindowsByPopups {
 export interface ModalBaseProps extends WindowBaseProps {
     emergeType: 'modal';
     zIndex?: number;
-    position?: Position;
+    width?: number;
+    height?: number;
 }
 export interface ModalMFProps extends ModalBaseProps {
     winType: 'microfrontend';
@@ -96,11 +97,5 @@ export interface AreaType {
     linked?: boolean;
 }
 export interface AreaProps extends Omit<AreaType, 'url_icon' | 'name'> {
-    active: boolean;
+    selected: boolean;
 }
-export declare type AreaRef = {
-    addWindow?: (newWindow: NewWindowProps) => string;
-    current: {
-        divRef: HTMLDivElement | null;
-    };
-};

package/components/areas/components/index.9de77fae.js

@@ -0,0 +1,12 @@
+import "./AreasViewer/index.1aa4d12d.js";
+import "react";
+import "@m4l/core";
+import "@mui/material";
+import "../../Icon/index.6938827f.js";
+import "react/jsx-runtime";
+import "../../mui_extended/IconButton/index.78a489d3.js";
+import "clsx";
+import "zustand";
+import "../contexts/AreasContext/index.b3b26965.js";
+import "./AreasAdmin/index.46fab65b.js";
+import "zustand/shallow";

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

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

package/components/areas/constants.d.ts

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

package/components/areas/contexts/AreasContext/{index.0792a8d1.js → index.b3b26965.js}

@@ -1,16 +1,18 @@
 import { createContext, useRef, useCallback, useEffect } from "react";
-import { useHostTools, useModuleDictionary, useNetwork, EmitEvents } from "@m4l/core";
 import { createStore, useStore } from "zustand";
+import { shallow } from "zustand/shallow";
+import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
+import { useHostTools, useModuleDictionary, useNetwork, useModuleSkeleton, EmitEvents } from "@m4l/core";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { L as LABEL_NEW_AREA } from "../../index.8fca0f8f.js";
-import { shallow } from "zustand/shallow";
-import { useFirstRender } from "@m4l/graphics";
+import { g as getAreasDictionary } from "../../index.bfe6bf91.js";
+import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/index.1aa4d12d.js";
+import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index.46fab65b.js";
 import { jsx } from "react/jsx-runtime";
-const addAreaNoBoilerPlate = (state) => {
+const addArea = (state) => {
   let newName = "";
   const newId = `area_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
-  newName = `${state.getLabel(LABEL_NEW_AREA)} ${state.areas.length + 1}`;
+  newName = `${state.getLabel(getAreasDictionary("label_new_area"))} ${state.areas.length + 1}`;
   state.areas.push({ id: newId, name: newName, loadWindows: false });
   state.currentArea = newId;
   if (state.loadAreasFromNetwork) {
@@ -24,9 +26,14 @@ const addAreaNoBoilerPlate = (state) => {
   }
   return newId;
 };
+const updateOwnerStateClasses = (state) => {
+  state.viwerClasses = useAreasViewerUtilityClasses(state.ownerState);
+  state.adminClasses = useAreasAdminUtilityClasses(state.ownerState);
+};
 const createAreasStore = (initProps) => {
   const startProps = {
-    status: "init",
+    viwerClasses: useAreasViewerUtilityClasses(initProps.ownerState),
+    adminClasses: useAreasAdminUtilityClasses(initProps.ownerState),
     currentArea: "",
     areas: [],
     ...initProps
@@ -36,10 +43,46 @@ const createAreasStore = (initProps) => {
       immer((set, get) => ({
         ...startProps,
         actions: {
+          init: () => {
+            if (get().ownerState.status === "init") {
+              if (!get().loadAreasFromNetwork) {
+                get().actions.addArea();
+                set((state) => {
+                  state.ownerState.status = "loaded";
+                  updateOwnerStateClasses(state);
+                });
+              } else {
+                set((state) => {
+                  state.ownerState.status = "loading";
+                  updateOwnerStateClasses(state);
+                  state.networkOperation({
+                    method: "GET",
+                    endPoint: `areas`,
+                    parms: {},
+                    toastSuccess: false
+                  }).then((response) => {
+                    set((otherState) => {
+                      if (response?.data && Array.isArray(response.data) && response.data.length > 0) {
+                        otherState.areas = response.data;
+                        otherState.currentArea = response.data[0].id;
+                      } else {
+                        addArea(otherState);
+                      }
+                    });
+                  }).finally(() => {
+                    set((state2) => {
+                      state2.ownerState.status = "loaded";
+                      updateOwnerStateClasses(state2);
+                    });
+                  });
+                });
+              }
+            }
+          },
           addArea: () => {
             let newId = "";
             set((state) => {
-              newId = addAreaNoBoilerPlate(state);
+              newId = addArea(state);
             });
             return newId;
           },
@@ -81,39 +124,6 @@ const createAreasStore = (initProps) => {
               state.getLabel = newHandler;
             });
           },
-          loadFromApi: () => {
-            if (get().status === "init") {
-              if (!get().loadAreasFromNetwork) {
-                get().actions.addArea();
-                set((state) => {
-                  state.status = "loaded";
-                });
-              } else {
-                set((state) => {
-                  state.status = "loading";
-                  state.networkOperation({
-                    method: "GET",
-                    endPoint: `areas`,
-                    parms: {},
-                    toastSuccess: false
-                  }).then((response) => {
-                    set((otherState) => {
-                      if (response?.data && Array.isArray(response.data) && response.data.length > 0) {
-                        otherState.areas = response.data;
-                        otherState.currentArea = response.data[0].id;
-                      } else {
-                        addAreaNoBoilerPlate(otherState);
-                      }
-                    });
-                  }).finally(() => {
-                    set((otherState) => {
-                      otherState.status = "loaded";
-                    });
-                  });
-                });
-              }
-            }
-          },
           setAreaLink: (areaId, store) => {
             set((state) => {
               const areaIndex = state.areas.findIndex((area) => area.id === areaId);
@@ -122,6 +132,12 @@ const createAreasStore = (initProps) => {
                 state.areas[areaIndex].linked = true;
               }
             });
+          },
+          setExternalState: (newExternalState) => {
+            set((state) => {
+              state.ownerState = { ...state.ownerState, ...newExternalState };
+              updateOwnerStateClasses(state);
+            });
           }
         }
       })),
@@ -134,6 +150,7 @@ function AreasProvider(props) {
   const {
     children,
     loadAreasFromNetwork,
+    loadCookiesFromNetwork,
     onLoad
   } = props;
   const {
@@ -146,16 +163,25 @@ function AreasProvider(props) {
   const {
     networkOperation
   } = useNetwork();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
   const isFirstRender = useFirstRender([getLabel]);
   const areasStoreRef = useRef();
   if (!areasStoreRef.current) {
     areasStoreRef.current = createAreasStore({
       getLabel,
       loadAreasFromNetwork,
-      networkOperation
+      loadCookiesFromNetwork,
+      networkOperation,
+      ownerState: {
+        status: "init",
+        isMobile: !isDesktop,
+        isSkeleton
+      }
     });
+    areasStoreRef.current?.getState().actions.init();
   }
-  const status = useStore(areasStoreRef.current, (state) => state.status, shallow);
+  const status = useStore(areasStoreRef.current, (state) => state.ownerState.status, shallow);
   const {
     setHandlerGetLabel
   } = useStore(areasStoreRef.current, (state) => state.internalActions, shallow);
@@ -181,11 +207,19 @@ function AreasProvider(props) {
   }, [getLabel]);
   useEffect(() => {
     events_add_listener(EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW, addWindow);
-    areasStoreRef.current?.getState().internalActions.loadFromApi();
     return () => {
       events_remove_listener(EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW, addWindow);
     };
   }, []);
+  useEffect(() => {
+    if (isFirstRender) {
+      return;
+    }
+    areasStoreRef.current?.getState().internalActions.setExternalState({
+      isMobile: !isDesktop,
+      isSkeleton
+    });
+  }, [isDesktop, isSkeleton]);
   return /* @__PURE__ */ jsx(AreasContext.Provider, {
     value: areasStoreRef.current,
     children

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

@@ -1,13 +1,19 @@
 /// <reference types="react" />
-import { AreasProviderProps } from './types';
-declare const AreasContext: import("react").Context<(Omit<Omit<import("zustand").StoreApi<import("./store").AreasStateWithActions>, "setState"> & {
+import type { AreasProviderProps } from './types';
+declare const AreasContext: import("react").Context<(Omit<Omit<import("zustand").StoreApi<import("./types").AreasStateWithActions>, "setState"> & {
     setState<A extends string | {
         type: unknown;
-    }>(partial: import("./store").AreasStateWithActions | Partial<import("./store").AreasStateWithActions> | ((state: import("./store").AreasStateWithActions) => import("./store").AreasStateWithActions | Partial<import("./store").AreasStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+    }>(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;
 }, "setState"> & {
-    setState(nextStateOrUpdater: import("./store").AreasStateWithActions | Partial<import("./store").AreasStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<import("./store").AreasStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+    setState(nextStateOrUpdater: import("./types").AreasStateWithActions | Partial<import("./types").AreasStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<import("./types").AreasStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
         type: unknown;
     } | undefined): void;
 }) | null>;
+/**
+ * @description Provedor del contexto de las areas de trabajo,
+ * Expone el store (AreasStore) encargado de gestionar la creación, modificación y borrado de las areas de trabajo.
+ * @param props
+ * @returns
+ */
 declare function AreasProvider(props: AreasProviderProps): JSX.Element;
 export { AreasProvider, AreasContext };

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

@@ -1,31 +1,11 @@
-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>;
-    getLabel: GetLabelType;
-    loadAreasFromNetwork: boolean;
-    currentArea: string;
-    status: AreasStatus;
-    areas: AreaType[];
-}
-export interface AreasStateWithActions extends AreasState {
-    actions: {
-        addArea: () => string;
-        deleteArea: (areaId: string) => void;
-        selectArea: (newAreaId: string) => void;
-    };
-    internalActions: {
-        setHandlerGetLabel: (newHandler: GetLabelType) => void;
-        loadFromApi: () => void;
-        setAreaLink: (areaId: string, store: AreaStore) => void;
-    };
-}
-declare type DefaultStoreProps = Omit<AreasState, 'currentArea'>;
-declare type InitialStoreProps = Pick<AreasState, 'networkOperation' | 'loadAreasFromNetwork' | 'getLabel'> & Partial<DefaultStoreProps>;
-export declare const createAreasStore: (initProps: InitialStoreProps) => Omit<Omit<import("zustand").StoreApi<AreasStateWithActions>, "setState"> & {
+import type { WritableDraft } from 'immer/dist/internal';
+import type { AreasStateWithActions, InitialAreasStoreProps } from './types';
+/**
+ * @description 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"> & {
     setState<A extends string | {
         type: unknown;
     }>(partial: AreasStateWithActions | Partial<AreasStateWithActions> | ((state: AreasStateWithActions) => AreasStateWithActions | Partial<AreasStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
@@ -35,4 +15,3 @@ export declare const createAreasStore: (initProps: InitialStoreProps) => Omit<Om
     } | undefined): void;
 };
 export declare type AreasStore = ReturnType<typeof createAreasStore>;
-export {};