@m4l/components 7.0.0 → 7.1.2

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

@@ -7,17 +7,17 @@ import { DebouncedFunc } from 'lodash';
 import { LayoutItem } from '../../../GridLayout';
 import { ContainerChangeEvent } from '../../../GridLayout/subcomponents/Responsive/types';
 import { Layout, Breakpoint, Layouts } from '../../../GridLayout/types';
-export declare type WinLayoutItem = LayoutItem & {
+export type WinLayoutItem = LayoutItem & {
     winType: WinType;
 };
-export declare type Breakpoints = {
+export type Breakpoints = {
     [P: string]: number;
 };
-export declare type Cols = {
+export type Cols = {
     [P: string]: number;
 };
-export declare type ViewAreaMode = 'multiple' | 'single';
-export declare type AreaStatus = 'init' | 'loading' | 'load' | 'loaded' | 'error';
+export type ViewAreaMode = 'multiple' | 'single';
+export type AreaStatus = 'init' | 'loading' | 'load' | 'loaded' | 'error';
 export interface Area {
     id: string;
     name: string;
@@ -39,10 +39,10 @@ export interface Area {
     cols: Cols;
 }
 /**
- * @description estado de carga de las areaS de trabajo.
+ * estado de carga de las areaS de trabajo.
  */
-export declare type AreasStatus = 'init' | 'loading' | 'loaded' | 'error';
-export declare type OwnerState = {
+export type AreasStatus = 'init' | 'loading' | 'loaded' | 'error';
+export type OwnerState = {
     /**
      *  "isSkeleton" indica si el componente está en skeleton.
      */
@@ -62,14 +62,11 @@ export declare type OwnerState = {
     focus: boolean;
 };
 /**
- * @type
- * @name ExternalOwnerState
- * @description Estados que se actulizan por fuera del store, a través de hooks
+ * Estados que se actulizan por fuera del store, a través de hooks
  */
-export declare type ExternalOwnerState = Pick<OwnerState, 'isMobile' | 'isSkeleton'>;
+export type ExternalOwnerState = Pick<OwnerState, 'isMobile' | 'isSkeleton'>;
 /**
- * @interface
- * @description Interface que define el estado del componente (variables y funciones )
+ * Interface que define el estado del componente (variables y funciones )
  */
 export interface AreasState {
     /**
@@ -130,19 +127,19 @@ export interface AreasState {
 export interface AreasStateWithActions extends AreasState {
     areasActions: {
         /**
-         * @description inicializa el store cargando las áreas de trabajo.
+         * inicializa el store cargando las áreas de trabajo.
          * Una vez termina el proceso, actualiza el estado de carga (ownerState.status) a "loaded".
          * Normalmente es asyncrono en producción por el llamado al endpoint áreas.
          */
         init: () => void;
         /**
-         * @description Arega un area de trabajo y la selecciona. Adiconalmente limpia el currentModuleId
+         * Arega un area de trabajo y la selecciona. Adiconalmente limpia el currentModuleId
          * Si esta habilitado "loadAreasFromNetwork" invoca al endpoint de POST de areas
          * @returns id del ara de trabajo
          */
         addArea: () => string;
         /**
-         * @description Edita el nombre del área de trabajo.
+         * Edita el nombre del área de trabajo.
          * Si está habilitado y sincroniza los cambios en la API.
          * @returns nombre del area de trabajo
          */
@@ -157,20 +154,20 @@ export interface AreasStateWithActions extends AreasState {
          */
         selectArea: (newAreaId: string) => void;
         /**
-         * @description Borra un area de trabajo, si esta activa "loadAreasFromNetwork" llama a la API.
+         * Borra un area de trabajo, si esta activa "loadAreasFromNetwork" llama a la API.
          * @param areaId Id de area a borrar
          * @returns void
          */
         deleteArea: (areaId: string) => void;
         /**
-         * @description Actualiza la variable de estado "getLabel"
+         * Actualiza la variable de estado "getLabel"
          * @param newHandler handle o función que va a traducir las etiquetas, esto es necesario debido que getLabel de useModuleDictionary
          * cambia por el useCallback, cuando el diccionario se carga.
          * @returns void
          */
         setHandlerGetLabel: (newHandler: GetLabelType) => void;
         /**
-         * @description Modifica los estados que se actualizan externamente al Store
+         * Modifica los estados que se actualizan externamente al Store
          * @param newIsMobile
          * @returns
          */
@@ -211,8 +208,8 @@ export interface AreasStateWithActions extends AreasState {
         setFocus: (value: boolean) => void;
     };
 }
-export declare type DefaultAreasStoreProps = Omit<AreasState, 'currentArea'>;
-export declare type InitialAreasStoreProps = Pick<AreasState, 'networkOperation' | 'loadAreasFromNetwork' | 'loadCookiesFromNetwork' | 'getLabel' | 'ownerState'> & Partial<DefaultAreasStoreProps>;
+export type DefaultAreasStoreProps = Omit<AreasState, 'currentArea'>;
+export type InitialAreasStoreProps = Pick<AreasState, 'networkOperation' | 'loadAreasFromNetwork' | 'loadCookiesFromNetwork' | 'getLabel' | 'ownerState'> & Partial<DefaultAreasStoreProps>;
 export interface AreasProviderProps {
     children: ReactNode;
     loadAreasFromNetwork: boolean;

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

@@ -1,10 +1,10 @@
-import React from 'react';
+import { default as React } from 'react';
 import { DynamicMFParmsProviderProps } from './types';
 /**
  * Contexto utilizado para proporcionar el almacenamiento de parámetros dinámicos a los componentes secundarios.
  */
-declare const DynamicMFParmsContext: React.Context<(Omit<import("zustand").StoreApi<import("./store").DynamicMFStateWithActions>, "setState"> & {
-    setState(nextStateOrUpdater: import("./store").DynamicMFStateWithActions | Partial<import("./store").DynamicMFStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<import("./store").DynamicMFStateWithActions>) => void), shouldReplace?: boolean | undefined): void;
+declare const DynamicMFParmsContext: React.Context<(Omit<import('zustand').StoreApi<import('./store').DynamicMFStateWithActions>, "setState"> & {
+    setState(nextStateOrUpdater: import('./store').DynamicMFStateWithActions | Partial<import('./store').DynamicMFStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<import('./store').DynamicMFStateWithActions>) => void), shouldReplace?: boolean | undefined): void;
 }) | null>;
 /**
  * Componente proveedor que envuelve la aplicación y proporciona el contexto de almacenamiento de parámetros dinámicos a los componentes secundarios.

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

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import React, { createContext } from "react";
+const DynamicMFParmsContext = createContext(null);
+function DynamicMFParmsProvider(props) {
+  const { children, store } = props;
+  return /* @__PURE__ */ jsx(DynamicMFParmsContext.Provider, { value: store, children });
+}
+const MemonizedDynamicMFParmsProvider = React.memo(DynamicMFParmsProvider);
+export {
+  DynamicMFParmsProvider as D,
+  MemonizedDynamicMFParmsProvider as M,
+  DynamicMFParmsContext as a
+};

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

@@ -19,10 +19,10 @@ export interface DynamicMFStateWithActions extends DynamicMFState {
  * @param initProps Las propiedades iniciales para inicializar el estado del almacén.
  * @returns El almacén de estado para los parámetros de un Microfrontend Dinámico.
  */
-export declare const createDynamicMFStore: (initProps: DynamicMFState) => Omit<import("zustand").StoreApi<DynamicMFStateWithActions>, "setState"> & {
-    setState(nextStateOrUpdater: DynamicMFStateWithActions | Partial<DynamicMFStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<DynamicMFStateWithActions>) => void), shouldReplace?: boolean | undefined): void;
+export declare const createDynamicMFStore: (initProps: DynamicMFState) => Omit<import('zustand').StoreApi<DynamicMFStateWithActions>, "setState"> & {
+    setState(nextStateOrUpdater: DynamicMFStateWithActions | Partial<DynamicMFStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<DynamicMFStateWithActions>) => void), shouldReplace?: boolean | undefined): void;
 };
 /**
  * Tipo de datos que representa el almacén de estado para los parámetros de un Microfrontend Dinámico.
  */
-export declare type DynamicMFStore = ReturnType<typeof createDynamicMFStore>;
+export type DynamicMFStore = ReturnType<typeof createDynamicMFStore>;

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

@@ -0,0 +1,28 @@
+import { createStore } from "zustand";
+import { immer } from "zustand/middleware/immer";
+const createDynamicMFStore = (initProps) => {
+  const startProps = {
+    ...initProps
+  };
+  return createStore(
+    immer((set, _get) => ({
+      ...startProps,
+      actions: {
+        /**
+         * Función para cambiar los datos del estado del almacén.
+         */
+        changeData: (newDynamicMFState) => {
+          set((state) => {
+            state.dynamicMFParameters = {
+              ...state.dynamicMFParameters,
+              ...newDynamicMFState
+            };
+          });
+        }
+      }
+    }))
+  );
+};
+export {
+  createDynamicMFStore as c
+};

package/components/areas/contexts/DynamicMFParmsContext/types.d.ts

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
-import type { DynamicMFStore } from './store';
+import { DynamicMFStore } from './store';
 /**
  * Tipo de datos que representa los parámetros de un Microfrontend Dinámico.
  */
-export declare type DynamicMFParameters = Record<string, any>;
+export type DynamicMFParameters = Record<string, any>;
 /**
  * Props para el proveedor de parámetros de un Microfrontend Dinámico.
  */

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

@@ -1,7 +1,4 @@
-import React from 'react';
-/**
- * Tipo que define la estructura de las props del contexto de WindowToolsMF.
- */
+import { default as React } from 'react';
 import { WindowToolsMFContextProps, WindowToolsMFProviderProps } from './types';
 /**
  * Contexto utilizado para proporcionar herramientas relacionadas con la ventana a los componentes secundarios.

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

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import React, { createContext } from "react";
+const WindowToolsMFContext = createContext(null);
+function WindowToolsMFProvider(props) {
+  const { children, ...other } = props;
+  return /* @__PURE__ */ jsx(WindowToolsMFContext.Provider, { value: { ...other }, children });
+}
+React.memo(WindowToolsMFProvider);
+export {
+  WindowToolsMFProvider as W,
+  WindowToolsMFContext as a
+};

package/components/areas/contexts/WindowToolsMFContext/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Toaster } from '@m4l/core';
-import type { CookieType, AreaWindowAction } from '../../types';
+import { CookieType, AreaWindowAction } from '../../types';
 /**
  * Interfaz que define un conjunto de herramientas relacionadas con la ventana que pueden ser proporcionadas por el contexto WindowToolsMF.
  */
@@ -72,4 +72,4 @@ export interface WindowToolsMFProviderProps extends WindowToolsMF {
 /**
  * Props del contexto WindowToolsMF, excluyendo la prop children.
  */
-export declare type WindowToolsMFContextProps = Omit<WindowToolsMFProviderProps, 'children'>;
+export type WindowToolsMFContextProps = Omit<WindowToolsMFProviderProps, 'children'>;

package/components/areas/contexts/index.js

@@ -0,0 +1 @@
+

package/components/areas/dictionary.d.ts

@@ -22,5 +22,5 @@ export declare const AREAS_DICCTIONARY: {
     readonly label_uncollapse_window: "label_uncollapse_window";
     readonly label_module_actions: "label_module_actions";
 };
-export declare type AreasDictionaryType = typeof AREAS_DICCTIONARY;
+export type AreasDictionaryType = typeof AREAS_DICCTIONARY;
 export declare const getAreasDictionary: (key: keyof AreasDictionaryType) => string;

package/components/areas/dictionary.js

@@ -0,0 +1,36 @@
+const AREAS_DICTIONARY_ID = "areas";
+function getAreasComponentsDictionary() {
+  return [AREAS_DICTIONARY_ID];
+}
+const LABEL_FILTER_BUTTON = "filter_tooltip";
+const AREAS_DICCTIONARY = {
+  label_new_area: "label_new_area",
+  label_persist_module_cookies: "label_persist_module_cookies",
+  validation_edit_area: "validation_edit_area",
+  label_edit_area: "label_edit_area",
+  label_delete_area: "label_delete_area",
+  label_window_colapse: "label_window_colapse",
+  label_window_un_colapse: "label_window_un_colapse",
+  area_error_title: "area_error_title",
+  area_error_description: "area_error_description",
+  area_error_recommendation: "area_error_recommendation",
+  area_error_intro: "area_error_intro",
+  area_add_new: "area_add_new",
+  label_reset_module_cookies: "label_reset_module_cookies",
+  label_close_window: "label_close_window",
+  label_maximize_window: "label_maximize_window",
+  label_minimize_window: "label_minimize_window",
+  label_collapse_window: "label_collapse_window",
+  label_uncollapse_window: "label_uncollapse_window",
+  label_module_actions: "label_module_actions"
+};
+const getAreasDictionary = (key) => {
+  return `${AREAS_DICTIONARY_ID}.${key}`;
+};
+export {
+  AREAS_DICCTIONARY as A,
+  LABEL_FILTER_BUTTON as L,
+  AREAS_DICTIONARY_ID as a,
+  getAreasComponentsDictionary as b,
+  getAreasDictionary as g
+};

package/components/areas/hooks/index.js

@@ -0,0 +1 @@
+

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

@@ -1,12 +1,18 @@
 import { AreasStateWithActions } from '../../contexts/AreasContext/types';
-export declare function useAreas(): Omit<Omit<import("zustand").StoreApi<AreasStateWithActions>, "setState"> & {
+/**
+ * TODO: Documentar
+ */
+export declare function useAreas(): 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;
 }, "setState"> & {
-    setState(nextStateOrUpdater: AreasStateWithActions | Partial<AreasStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<AreasStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+    setState(nextStateOrUpdater: AreasStateWithActions | Partial<AreasStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<AreasStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
         type: unknown;
     } | undefined): void;
 };
+/**
+ * TODO: Documentar
+ */
 export declare function useAreasStore<T>(selector: (state: AreasStateWithActions) => T, equalityFn?: (left: T, right: T) => boolean): T;
 export default useAreas;

package/components/areas/hooks/useAreas/index.js

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+import { useStore } from "zustand";
+import { a as AreasContext } from "../../contexts/AreasContext/index.js";
+function useAreasStore(selector, equalityFn) {
+  const context = useContext(AreasContext);
+  if (!context) {
+    throw new Error("useAreasStore context must be use inside AreasContext");
+  }
+  return useStore(context, selector, equalityFn);
+}
+export {
+  useAreasStore as u
+};

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

@@ -1,5 +1,11 @@
 import { DynamicMFState } from '../../contexts/DynamicMFParmsContext/store';
-export declare const useDynamicMFParameters: () => Omit<import("zustand").StoreApi<import("../../contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions>, "setState"> & {
-    setState(nextStateOrUpdater: import("../../contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions | Partial<import("../../contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<import("../../contexts/DynamicMFParmsContext/store").DynamicMFStateWithActions>) => void), shouldReplace?: boolean | undefined): void;
+/**
+ * TODO: Documentar
+ */
+export declare const useDynamicMFParameters: () => Omit<import('zustand').StoreApi<import('../../contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions>, "setState"> & {
+    setState(nextStateOrUpdater: import('../../contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions | Partial<import('../../contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<import('../../contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions>) => void), shouldReplace?: boolean | undefined): void;
 };
+/**
+ * TODO: Documentar
+ */
 export declare function useDynamicMFParametersStore<T>(selector: (state: DynamicMFState) => T, equalityFn?: (left: T, right: T) => boolean): T;

package/components/areas/hooks/useDynamicMFParameters/index.js

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+import { useStore } from "zustand";
+import { a as DynamicMFParmsContext } from "../../contexts/DynamicMFParmsContext/index.js";
+function useDynamicMFParametersStore(selector, equalityFn) {
+  const store = useContext(DynamicMFParmsContext);
+  if (!store) {
+    throw new Error("useDynamicMFParametersStore context must be use inside DynamicMFParmsContext");
+  }
+  return useStore(store, selector, equalityFn);
+}
+export {
+  useDynamicMFParametersStore as u
+};

package/components/areas/hooks/useSetWindowsTitle/index.js

@@ -0,0 +1 @@
+

package/components/areas/hooks/useSetWindowsTitle/useSetWindowsTitle.d.ts

@@ -1,3 +1,6 @@
+/**
+ * TODO: Documentar
+ */
 export declare function useSetWindowsTitle({ isAddEditModule, }?: {
     isAddEditModule?: boolean;
 }): void;

package/components/areas/hooks/useSetWindowsTitle/useSetWindowsTitle.js

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { shallow } from "zustand/shallow";
+import { useFlagsPresent, CommonFlags, useModuleDictionary } from "@m4l/core";
+import { u as useWindowToolsMF } from "../useWindowToolsMF/index.js";
+import { u as useDynamicMFParametersStore } from "../useDynamicMFParameters/index.js";
+const titleLabels = {
+  moduleName: "module_name",
+  moduleNameAdd: "module_name_add",
+  moduleNameEdit: "module_name_edit"
+};
+function useSetWindowsTitle({
+  isAddEditModule = false
+} = {}) {
+  const isFlagPresent = useFlagsPresent([CommonFlags.FLAG_DICTIONARY_LOADED]);
+  const { getLabel } = useModuleDictionary();
+  const { setWindowTitle } = useWindowToolsMF();
+  const id = useDynamicMFParametersStore(
+    // objectId or id  puede ser el nombre del parametro del con el Id que se está editando en los modulos add/edit
+    (state) => state.dynamicMFParameters?.objectId || state.dynamicMFParameters?.id,
+    shallow
+  );
+  useEffect(() => {
+    if (isFlagPresent) {
+      const labelKey = isAddEditModule ? id ? titleLabels.moduleNameEdit : titleLabels.moduleNameAdd : titleLabels.moduleName;
+      setWindowTitle(getLabel(labelKey));
+    }
+  }, [getLabel, isFlagPresent]);
+}
+export {
+  useSetWindowsTitle as u
+};

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

@@ -1 +1,4 @@
-export declare const useWindowToolsMF: () => import("../../contexts/WindowToolsMFContext/types").WindowToolsMFContextProps;
+/**
+ * TODO: Documentar
+ */
+export declare const useWindowToolsMF: () => import('../../contexts/WindowToolsMFContext/types').WindowToolsMFContextProps;

package/components/areas/hooks/useWindowToolsMF/index.js

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { a as WindowToolsMFContext } from "../../contexts/WindowToolsMFContext/index.js";
+const useWindowToolsMF = () => {
+  const context = useContext(WindowToolsMFContext);
+  if (!context) {
+    throw new Error("useWindowToolsMF context must be use inside WindowToolsMFContext");
+  }
+  return context;
+};
+export {
+  useWindowToolsMF as u
+};

package/components/areas/icons.js

@@ -0,0 +1,24 @@
+const ICONS = {
+  CLOSE: "close.svg",
+  MAXIMIZE: "maximize.svg",
+  NORMALIZE: "normalize.svg",
+  COLAPSE: "colapse.svg",
+  UNCOLPASE: "uncolapse.svg",
+  RESET_COOKIES: "reset_cookies.svg",
+  SAVE_COOKIES: "save_cookies.svg",
+  DELETE_AREA: "delete_area.svg",
+  ADD_AREA: "add_area.svg",
+  LAYERS: "layers.svg",
+  NAVIGATE_ERROR: "navegate_error.svg",
+  EDIT_AREA: "edit.svg",
+  CHECK: "checkmarkInCircle.svg",
+  RESIZE: "controlSize.svg",
+  VERSION: "version.svg",
+  SHOW_OPTIONS: "showMoreVertical.svg",
+  CHEVRON_DOWN: "chevronDown.svg",
+  MODULE: "module.svg",
+  POPUP: "popup.svg"
+};
+export {
+  ICONS as I
+};

package/components/areas/index.js

@@ -0,0 +1 @@
+

package/components/areas/types.d.ts

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
-import type { DynamicMFParameters } from './contexts/DynamicMFParmsContext/types';
-import type { DynamicMFStore } from './contexts/DynamicMFParmsContext/store';
-import type { MenuAction } from '../mui_extended/MenuActions/types';
+import { DynamicMFParameters } from './contexts/DynamicMFParmsContext/types';
+import { DynamicMFStore } from './contexts/DynamicMFParmsContext/store';
+import { MenuAction } from '../mui_extended/MenuActions/types';
 import { LayoutItem } from '../GridLayout';
-export declare type WindowActionType = 'main' | 'allways' | 'normal';
+export type WindowActionType = 'main' | 'allways' | 'normal';
 export interface AreaWindowAction extends MenuAction {
     /**
      * Tipo de visibilidad de la acción de ventana.
@@ -25,15 +25,15 @@ export interface AreaWindowAction extends MenuAction {
 /**
  * Tipo que representa el tipo de ventana: microfrontend o componente.
  */
-export declare type WinType = 'microfrontend' | 'component';
+export type WinType = 'microfrontend' | 'component';
 /**
  * Tipo que representa el tipo de emergencia de la ventana: diseño, popup o modal.
  */
-export declare type EmergeType = 'layout' | 'popup' | 'modal';
+export type EmergeType = 'layout' | 'popup' | 'modal';
 /**
  * Tipo que representa el tipo de apertura de la ventana: normal o maximizado.
  */
-export declare type OpenType = 'normal' | 'maximized';
+export type OpenType = 'normal' | 'maximized';
 /**
  * Propiedades base de un microfrontend.
  */
@@ -51,23 +51,23 @@ export interface MFBaseProps {
      */
     prefix: string;
 }
-export declare type JSX_REACT_NODE = ((props?: any) => JSX.Element) | ReactNode;
+export type JSX_REACT_NODE = ((props?: any) => JSX.Element) | ReactNode;
 /**
  * Tipo que representa el tipo de cookie: ventana o módulo.
  */
-export declare type CookieType = 'window' | 'module';
+export type CookieType = 'window' | 'module';
 /**
  * Objeto que contiene las cookies de un módulo y de una ventana.
  */
-export declare type Cookies = {
+export type Cookies = {
     moduleCookies: Record<string, any>;
     windowCookies: Record<string, any>;
 };
 /**
  * Tipo que representa el estado de la ventana: inicialización, carga, cargado o error.
  */
-export declare type WindowStatus = 'init' | 'loading' | 'loaded' | 'error';
-export declare type WindowState = {
+export type WindowStatus = 'init' | 'loading' | 'loaded' | 'error';
+export type WindowState = {
     /**
      * status Indica el proceso de cargado de la ventana
      */
@@ -92,7 +92,7 @@ export declare type WindowState = {
 /**
  * Opciones para la ventana.
  */
-export declare type WindowOptions = {
+export type WindowOptions = {
     /**
      * Indica si se permitirá persistir las cookies.
      */
@@ -132,10 +132,10 @@ export interface LayoutMagnetizableComponentProps extends LayoutMagnetizableBase
     winType: 'component';
     component: JSX_REACT_NODE;
 }
-export declare type LayoutMagentizableProps = LayoutMagnetizableMFProps | LayoutMagnetizableComponentProps;
-export declare type LayoutMagnetizableStateProps = LayoutMagentizableProps & WindowState;
-export declare type NewLayoutMagnetizableProps = Omit<LayoutMagnetizableMFProps, 'windowId' | 'onClose' | 'areaId'> | Omit<LayoutMagnetizableComponentProps, 'windowId' | 'onClose' | 'areaId'>;
-export declare type Position = {
+export type LayoutMagentizableProps = LayoutMagnetizableMFProps | LayoutMagnetizableComponentProps;
+export type LayoutMagnetizableStateProps = LayoutMagentizableProps & WindowState;
+export type NewLayoutMagnetizableProps = Omit<LayoutMagnetizableMFProps, 'windowId' | 'onClose' | 'areaId'> | Omit<LayoutMagnetizableComponentProps, 'windowId' | 'onClose' | 'areaId'>;
+export type Position = {
     x: number;
     y: number;
     width: number;
@@ -155,9 +155,9 @@ export interface LayoutMoveableComponentProps extends LayoutMoveableBaseProps {
     winType: 'component';
     component: JSX_REACT_NODE;
 }
-export declare type LayoutMoveableProps = LayoutMoveableMFProps | LayoutMoveableComponentProps;
-export declare type LayoutMoveableStateProps = LayoutMoveableProps & WindowState;
-export declare type NewLayoutMoveableProps = Omit<LayoutMoveableMFProps, 'windowId' | 'onClose' | 'areaId'> | Omit<LayoutMoveableComponentProps, 'windowId' | 'onClose' | 'areaId'>;
+export type LayoutMoveableProps = LayoutMoveableMFProps | LayoutMoveableComponentProps;
+export type LayoutMoveableStateProps = LayoutMoveableProps & WindowState;
+export type NewLayoutMoveableProps = Omit<LayoutMoveableMFProps, 'windowId' | 'onClose' | 'areaId'> | Omit<LayoutMoveableComponentProps, 'windowId' | 'onClose' | 'areaId'>;
 export interface HashWindowsByPopups {
     [P: string]: LayoutMoveableStateProps;
 }
@@ -177,15 +177,15 @@ export interface ModalComponentProps extends ModalBaseProps {
     winType: 'component';
     component: ReactNode;
 }
-export declare type ModalProps = ModalMFProps | ModalComponentProps;
-export declare type ModalStateProps = ModalProps & WindowState;
-export declare type NewModalProps = Omit<ModalMFProps, 'windowId' | 'onClose' | 'areaId'> | Omit<ModalComponentProps, 'windowId' | 'onClose' | 'areaId'>;
+export type ModalProps = ModalMFProps | ModalComponentProps;
+export type ModalStateProps = ModalProps & WindowState;
+export type NewModalProps = Omit<ModalMFProps, 'windowId' | 'onClose' | 'areaId'> | Omit<ModalComponentProps, 'windowId' | 'onClose' | 'areaId'>;
 export interface HashWindowsByModals {
     [P: string]: ModalStateProps;
 }
-export declare type WindowStateProps = (LayoutMagnetizableMFProps & WindowState) | (LayoutMagnetizableComponentProps & WindowState) | (LayoutMoveableMFProps & WindowState) | (LayoutMoveableComponentProps & WindowState) | (ModalMFProps & WindowState) | (ModalComponentProps & WindowState);
+export type WindowStateProps = (LayoutMagnetizableMFProps & WindowState) | (LayoutMagnetizableComponentProps & WindowState) | (LayoutMoveableMFProps & WindowState) | (LayoutMoveableComponentProps & WindowState) | (ModalMFProps & WindowState) | (ModalComponentProps & WindowState);
 export interface HashWindows {
     [P: string]: WindowStateProps;
 }
-export declare type NewWindowProps = NewLayoutMagnetizableProps | NewLayoutMoveableProps | NewModalProps;
-export declare type AddWindow = (newWindow: NewWindowProps) => string;
+export type NewWindowProps = NewLayoutMagnetizableProps | NewLayoutMoveableProps | NewModalProps;
+export type AddWindow = (newWindow: NewWindowProps) => string;

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

@@ -1,4 +1,7 @@
 import { RefObject } from 'react';
-declare type AnyEvent = MouseEvent | TouchEvent;
+type AnyEvent = MouseEvent | TouchEvent;
+/**
+ * TODO: Documentar
+ */
 declare function useOnClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: AnyEvent) => void, noRef?: RefObject<T>): void;
 export default useOnClickOutside;

package/components/areas/utils/useOnClickOutside/index.js

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+function useOnClickOutside(ref, handler, noRef) {
+  useEffect(() => {
+    const listener = (event) => {
+      const el = ref?.current;
+      const noEl = noRef?.current;
+      if (!el || el.contains(event.target) || noEl && noEl.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler]);
+}
+export {
+  useOnClickOutside as u
+};

package/components/commercial/AppBarCommercial/classes/constants.js

@@ -0,0 +1,4 @@
+const componentName = "M4LAppBarCommercial";
+export {
+  componentName as c
+};

package/components/commercial/AppBarCommercial/classes/index.d.ts

@@ -1,4 +1,7 @@
 import { AppBarComercialClassesType } from './types';
 export declare const appBarComercialClasses: AppBarComercialClassesType;
 export declare function getAppBarComercialUtilityClass(slot: string): string;
+/**
+ * TODO: Documentar
+ */
 export declare const useAppBarComercialUtilityClasses: () => Record<"root", string>;

package/components/commercial/AppBarCommercial/classes/index.js

@@ -0,0 +1,21 @@
+import { generateUtilityClasses } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { c as componentName } from "./constants.js";
+import { g as getComponentUtilityClass } from "../../../../utils/index.js";
+generateUtilityClasses(
+  componentName,
+  [
+    /* elements */
+    "root"
+    /* states or variants of elements */
+  ]
+);
+const useAppBarComercialUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
+  };
+  return unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
+};
+export {
+  useAppBarComercialUtilityClasses as u
+};