@m4l/components 9.2.0 → 9.2.2

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

@@ -1,10 +1,12 @@
 import { GetLabelType, NetworkProps } from '@m4l/core';
 import { ReactNode } from 'react';
-import { CookieType, HashWindowsByModals, ModalStateProps, AreaWindowAction, NewModalProps, NewLayoutMoveableProps, NewWindowProps, WinType, WindowStateProps, NewLayoutMagnetizableProps } from '../../types';
+import { CookieType, EmmitNewModalProps, EmmitNewPopupProps, EmmitNewWindowProps, AreaWindowProps, EmmitNewLayoutProps } from '../../types';
 import { DebouncedFunc } from 'lodash';
 import { LayoutItem } from '../../../GridLayout';
 import { ContainerChangeEvent } from '../../../GridLayout/subcomponents/Responsive/types';
 import { Layout, Breakpoint, Layouts } from '../../../GridLayout/types';
+import { PopupsProviderStoreStateWithActions } from '../../../popups/components/PopupsProvider/contexts/PopupsContext/types';
+import { ModuleAction, WinType } from '../../../WindowBase/types';
 export type WinLayoutItem = LayoutItem & {
     winType: WinType;
 };
@@ -17,22 +19,61 @@ export type Cols = {
 export type ViewAreaMode = 'multiple' | 'single';
 export type AreaStatus = 'init' | 'loading' | 'load' | 'loaded' | 'error';
 export interface Area {
+    /**
+     *  "id" Id del area de trabajo
+     */
     id: string;
+    /**
+     *  "name" Nombre del area de trabajo
+     */
     name: string;
+    /**
+     *  "status" Estado del area de trabajo
+     */
     status: AreaStatus;
+    /**
+     *  "zPopUpIndex" Indice de la ventana emergente
+     *  @deprecated El indice ya es manejado por el PopupsProvider
+     */
     zPopUpIndex: number;
+    /**
+     * Indica si se deben cargar las ventanas de la area de trabajo, por defecto cuando se agrega una area,
+     * no se cargan las ventanas, ya que no hay, pero cuando se abre un area, se cargan las ventanas.
+     */
     loadWindows: boolean;
     /**
-     *  "containerHeight" Altura del contendor de area, se deja en cada área porque solo llegan en eventos de resize cuando está diferente a display "none"
+     * "containerHeight" Altura del contendor de area, se deja en cada área porque solo llegan en eventos de resize cuando está diferente a display "none"
+     * Este valor se actualiza en el evento "onContainerChange" que emite el componente ResponsiveGridLayout
+     * Es necesario para poder calcular el tamaño de las ventanas nuevas que se agregan al area.
      */
     containerHeight?: number;
+    /**
+     * "currentBreakpoint" Breakpoint actual del area de trabajo
+     */
     currentBreakpoint?: Breakpoint;
+    /**
+     * "layouts" Layouts del area de trabajo
+     */
     layouts: Layouts;
+    /**
+     * "maximizedId" Id de la ventana que está maximizada, si es undefined, no hay ninguna ventana maximizada
+     */
     maximizedId?: string | undefined;
+    /**
+     * Son los ids de las ventanas, en el orden en que se agregaron
+     */
     layoutItemsIds: string[];
+    /**
+     * "currentLayoutId" Id de la ventana actual seleccionada
+     */
     currentLayoutId: string;
-    currentPopUpId: string;
+    /**
+     * "breakpoints" Breakpoints del area de trabajo, se usa para el responsive son los pixeles que representan cada breakpoint
+     */
     breakpoints: Breakpoints;
+    /**
+     * "cols" numero de columnas por cada breakpoint
+     */
     cols: Cols;
 }
 /**
@@ -48,10 +89,6 @@ export type OwnerState = {
      * "readyForHooks" indica si el componente ejecutó el efecto de carga y se suscrubió al eventemitter. Utilizado normalmente en storybook
      */
     readyForHooks: boolean;
-    /**
-     * focus: Estado de selección asignado por el usuario.
-     */
-    focus: boolean;
 };
 /**
  * Estados que se actulizan por fuera del store, a través de hooks
@@ -60,7 +97,11 @@ export type ExternalOwnerState = Pick<OwnerState, 'readyForHooks'>;
 /**
  * Interface que define el estado del componente (variables y funciones )
  */
-export interface AreasState {
+export interface AreasStoreState {
+    /**
+     *  "storeId" Id del store
+     */
+    storeId?: string;
     /**
      *  "loadAreasFromNetwork" Indica si se deben cargar/grabar las áreas de trabajo en la API
      */
@@ -82,11 +123,9 @@ export interface AreasState {
      */
     ownerState: OwnerState;
     /**
-     *  "windowsModals" id de ventans modales abiertas
+     *  "windowsModalsIds" id de ventans modales abiertas, en el orden en que se agregaron
      */
-    windowsModals: string[];
-    hashWindowsModals: HashWindowsByModals;
-    windowModal?: ModalStateProps;
+    windowsModalsIds: string[];
     /**
      *  "areasIds" Areas de trabajo para saber en que orden se muestran en el AreasAdmin
      */
@@ -96,19 +135,30 @@ export interface AreasState {
      */
     hashAreas: Record<string, Area>;
     /**
-     *  "hashWindows" Todas las ventanas de todas las áreas cagadas
+     *  "hashWindows" Todas las ventanas de todas las áreas cagadas, incluyendo layouts, popups y modals
      */
-    hashWindows: Record<string, WindowStateProps>;
+    hashWindows: Record<string, AreaWindowProps>;
     /**
      *  "networkOperation" funcion que usará el Store para enviar las peticiones de red
      */
     networkOperation: (props: NetworkProps) => Promise<any>;
     /**
-     *  "getLabel" funcion que usará para traducir las etiquetas de diccionario
+     *  "getLabel" funcion que usará para traducir las etiquetas de diccionario, cuando se agrega una nueva area, se requier tener acceso al diccionario
      */
     getLabel: GetLabelType;
+    /**
+     * Como desde zustand no se puede acceder a meotodos de un contexto de react, se deben proporcionar en el momento de creación.
+     */
+    popupsProviderMethods: {
+        addPopup: PopupsProviderStoreStateWithActions['popupsActions']['addPopup'];
+        removePopup: PopupsProviderStoreStateWithActions['popupsActions']['removePopup'];
+        removePopupsByGroupId: PopupsProviderStoreStateWithActions['popupsActions']['closePopupsByGroupId'];
+        bringPopupOnFront: PopupsProviderStoreStateWithActions['popupsActions']['bringPopupOnFront'];
+        closeAllPopupsByParentId: PopupsProviderStoreStateWithActions['popupsActions']['closeAllPopupsByParentId'];
+        setSelectedPopupId: PopupsProviderStoreStateWithActions['popupsActions']['setSelectedPopupId'];
+    };
 }
-export interface AreasStateWithActions extends AreasState {
+export interface AreasStoreStateWithActions extends AreasStoreState {
     areasActions: {
         /**
          * inicializa el store cargando las áreas de trabajo.
@@ -158,24 +208,80 @@ export interface AreasStateWithActions extends AreasState {
         setExternalState: (newExternalState: Partial<ExternalOwnerState>) => void;
     };
     areaActions: {
-        addWindow: (newWindow: NewWindowProps) => void;
-        closeWindowModal: (removeModalId: string) => void;
-        addWindowModal: (areaId: string, windowId: string, newWindowModalProps: NewModalProps) => void;
+        /**
+         * Agrega una ventana aca se deriva de acuerdo al emergeType si va para popup, modal o layout
+         */
+        addWindow: (newWindow: EmmitNewWindowProps) => void;
+        /**
+         * Agrega un layout al AreaGridLayout
+         */
+        addLayout: (areaId: string, windowId: string, newWindow: EmmitNewLayoutProps) => void;
+        /**
+         * Cierra un layout y lo retira del AreaGridLayout
+         */
         closeLayout: (areaId: string, removePopUpId: string) => void;
-        selectLayout: (areaId: string, layoutId: string) => void;
-        addLayout: (areaId: string, windowId: string, newWindow: NewLayoutMagnetizableProps | NewLayoutMoveableProps) => void;
+        /**
+         * Selecciona un layout, para marcarlo como el layout actual
+         */
+        selectLayout: (areaId: string, layoutId: string, saveCookie?: boolean) => void;
+        /**
+         * Colapsa un layout, para que se vea solo la barra de titulo
+         */
+        colapseLayoutItem: (areaId: string, layoutId: string) => void;
+        /**
+         * Descolapsa un layout, para que se vea el layout completo
+         */
+        unColapseLayoutItem: (areaId: string, layoutId: string) => void;
+        /**
+         * Normaliza los layouts, remueve el maximizado
+         * TODO: Revisar como debe interactuar con popups
+         */
+        normalizeLayouts: (areaId: string) => void;
+        /**
+         * Maximiza un layout, establece el maximizedId del area
+         */
+        maximizeLayout: (areaId: string, layoutId?: string) => void;
+        /**
+         * Guarda los layouts en la API
+         */
         saveLayouts: (areaId: string) => void;
+        /**
+         * Actualiza los layouts en el AreaGridLayout cuando se redimensiona la ventana del navegador
+         * siempre y cuando no este maximizada una ventana
+         */
         onBreakpointsLayoutsChange: (areaId: string, currentLayout: Layout, newAllLayouts: Layouts) => void;
+        /**
+         * Agrega un popup al PopupsProvider
+         */
+        addPopup: (areaId: string, windowId: string, newWindowProps: EmmitNewPopupProps) => void;
+        /**
+         * Se remueve de hashWindows y se envia a PopupsProvider que cierr el popup
+         * TODO: Reivisar si funciona bien
+         */
+        closePopup: (areaId: string, removePopupId: string) => void;
+        /**
+         * Agrega un modal a hashWindows y windowsModalsIds
+         */
+        addWindowModal: (areaId: string, windowId: string, newWindowModalProps: EmmitNewModalProps) => void;
+        /**
+         * Se remueve de hashWindows, y lo remueve de windowsModalsIds
+         */
+        closeWindowModal: (removeModalId: string) => void;
+        /**
+         * Actualiza el estado de la ventana cuando cambia el tamaño de la ventana del navegador
+         */
         onContainerChange: (areaId: string, e: ContainerChangeEvent) => void;
+        /**
+         * Guarda los layouts en la API con bounced
+         */
         bouncedSaveBreakpointsLayouts: DebouncedFunc<(areaId: string) => void>;
-        colapseLayoutItem: (areaId: string, layoutId: string) => void;
-        unColapseLayoutItem: (areaId: string, layoutId: string) => void;
-        maximizeLayout: (areaId: string, layoutId?: string) => void;
-        normalizeLayouts: (areaId: string) => void;
+        /**
+         * Carga las ventanas de la API cuando se selecciona una area por primera vez
+         */
         loadWindowsFromApi: (areaId: string) => void;
     };
     windowActions: {
-        setActions: (windowId: string, newActions: AreaWindowAction[], version?: string) => void;
+        setActions: (windowId: string, newActions: ModuleAction[], version?: string) => void;
         getCookie: (windowId: string, id: string) => Record<string, any> | undefined;
         getCookies: (windowId: string, type: CookieType) => Record<string, any>;
         setCookie: (windowId: string, id: string, type: CookieType, cookie: Record<string, any>) => void;
@@ -188,13 +294,18 @@ export interface AreasStateWithActions extends AreasState {
         setFnQueryClose: (windowId: string, fnQueryClose: () => void) => void;
         setWindowTitle: (windowId: string, title: string) => void;
     };
-    areaAdminActions: {
-        setFocus: (value: boolean) => void;
-    };
 }
-export type DefaultAreasStoreProps = Omit<AreasState, 'currentArea'>;
-export type InitialAreasStoreProps = Pick<AreasState, 'networkOperation' | 'loadAreasFromNetwork' | 'loadCookiesFromNetwork' | 'getLabel' | 'ownerState'> & Partial<DefaultAreasStoreProps>;
+export type DefaultAreasStoreProps = Omit<AreasStoreState, 'currentArea'>;
+export type InitialAreasStoreProps = Pick<AreasStoreState, 'networkOperation' | 'loadAreasFromNetwork' | 'loadCookiesFromNetwork' | 'getLabel' | 'ownerState' | 'popupsProviderMethods' | 'storeId'> & Partial<DefaultAreasStoreProps>;
 export interface AreasProviderProps {
+    /**
+     *  "storeId" identificador del store
+     */
+    storeId?: string;
+    /**
+     *  "storeDevtoolsEnabled" determina si se debe usar devtools para el store
+     */
+    storeDevtoolsEnabled?: boolean;
     children: ReactNode;
     loadAreasFromNetwork: boolean;
     loadCookiesFromNetwork: boolean;

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

@@ -1,7 +1 @@
 export * from './AreasContext';
-export type { DynamicMFParameters } from './DynamicMFParmsContext/types';
-export type { DynamicMFStore } from './DynamicMFParmsContext/store';
-export type { WindowToolsMF } from './WindowToolsMFContext/types';
-export type { AreaWindowAction as ModuleAction } from '../types';
-export { WindowToolsMFProvider, WindowToolsMFContext } from './WindowToolsMFContext';
-export { createDynamicMFStore } from './DynamicMFParmsContext/store';

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

@@ -1,4 +1,2 @@
-export { useDynamicMFParametersStore } from './useDynamicMFParameters';
-export { useWindowToolsMF } from './useWindowToolsMF';
 export { useSetWindowsTitle } from './useSetWindowsTitle';
 export { useAreasStore } from './useAreas';

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

@@ -1,18 +1,18 @@
-import { AreasStateWithActions } from '../../contexts/AreasContext/types';
+import { AreasStoreStateWithActions } from '../../contexts/AreasContext/types';
 /**
  * TODO: Documentar
  */
-export declare function useAreas(): Omit<Omit<import('zustand').StoreApi<AreasStateWithActions>, "setState"> & {
+export declare function useAreas(): 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;
 };
 /**
  * TODO: Documentar
  */
-export declare function useAreasStore<T>(selector: (state: AreasStateWithActions) => T, equalityFn?: (left: T, right: T) => boolean): T;
+export declare function useAreasStore<T>(selector: (state: AreasStoreStateWithActions) => T, equalityFn?: (left: T, right: T) => boolean): T;
 export default useAreas;

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

@@ -1,8 +1,8 @@
 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";
+import { u as useWindowToolsMF } from "../../../WindowBase/hooks/useWindowToolsMF/index.js";
+import { u as useDynamicMFParametersStore } from "../../../WindowBase/hooks/useDynamicMFParameters/index.js";
 const titleLabels = {
   moduleName: "module_name",
   moduleNameAdd: "module_name_add",

package/components/areas/types.d.ts

@@ -1,35 +1,11 @@
-import { ReactNode } from 'react';
-import { DynamicMFParameters } from './contexts/DynamicMFParmsContext/types';
-import { DynamicMFStore } from './contexts/DynamicMFParmsContext/store';
-import { MenuItemAction } from '../MenuActions/types';
+import { DynamicMFParameters } from '../WindowBase/contexts/DynamicMFParmsContext/types';
+import { DynamicMFStore } from '../WindowBase/contexts/DynamicMFParmsContext/store';
 import { LayoutItem } from '../GridLayout';
-export type WindowActionType = 'main' | 'allways' | 'normal';
-export interface AreaWindowAction extends MenuItemAction {
-    /**
-     * Tipo de visibilidad de la acción de ventana.
-     */
-    visibility: WindowActionType;
-    /**
-     * Clave única de la acción de ventana.
-     */
-    key: string;
-    /**
-     * Etiqueta opcional para la acción de ventana.
-     */
-    tag?: any;
-    /**
-     * Clase CSS opcional para la acción de ventana.
-     */
-    className?: string;
-    /**
-     * Icono opcional para la acción de ventana.
-     */
-    iconUrl?: string;
-}
-/**
- * Tipo que representa el tipo de ventana: microfrontend o componente.
- */
-export type WinType = 'microfrontend' | 'component';
+import { MFBaseProps } from '../MFLoader/types';
+import { ModuleAction } from '../WindowBase';
+import { PopupAddProps } from '../popups/components/PopupsProvider/contexts/PopupsContext/types';
+import { DragResizeWindowProps } from '../DragResizeWindow/types';
+import { JSX_REACT_NODE, WindowOptions, WinType } from '../WindowBase/types';
 /**
  * Tipo que representa el tipo de emergencia de la ventana: diseño, popup o modal.
  */
@@ -38,24 +14,6 @@ export type EmergeType = 'layout' | 'popup' | 'modal';
  * Tipo que representa el tipo de apertura de la ventana: normal o maximizado.
  */
 export type OpenType = 'normal' | 'maximized';
-/**
- * Propiedades base de un microfrontend.
- */
-export interface MFBaseProps {
-    /**
-     * Puerto de depuración utilizado para cargar el microfrontend en entornos locales.
-     */
-    debugPort: number;
-    /**
-     * Indica si se debe almacenar en caché el microfrontend para futuros usos.
-     */
-    cache?: boolean;
-    /**
-     * Prefijo utilizado para identificar los microfrontends. Por ejemplo, "m4labs", "guardian", etc.
-     */
-    prefix: string;
-}
-export type JSX_REACT_NODE = ((props?: any) => JSX.Element) | ReactNode;
 /**
  * Tipo que representa el tipo de cookie: ventana o módulo.
  */
@@ -81,14 +39,20 @@ export type WindowState = {
      * loading indica si la barra de progress aparece o no
      */
     loading: boolean;
+    /**
+     * version del Microfrontend, esta version es actualizada normalmente por el ModuleLayout del microfrontend
+     */
     version?: string;
     /**
      * Acciones del módulo.
      */
-    moduleActions: AreaWindowAction[];
+    moduleActions: ModuleAction[];
+    /**
+     * Cookies de la ventana.
+     */
     cookies: Cookies;
     /**
-     * "fnQueryClose"  función que reemplaza la opción de cerrado normal de la ventana
+     * "fnQueryClose"  función que reemplaza la opción de cerrado normal de la ventana, utilizado en Los MFs Add/Edit para confirmar la acción
      * @returns void
      */
     fnQueryClose?: () => void;
@@ -99,102 +63,147 @@ export type WindowState = {
     moduleCount?: number;
 };
 /**
- * Opciones para la ventana.
+ * Propiedades base para cuando se crea una ventana en la aplicación. En terminos generales son las propiedas base del Emmit
  */
-export type WindowOptions = {
+export interface EmmitNewWindowBase {
     /**
-     * Indica si se permitirá persistir las cookies.
+     * Tipo de emergencia de la ventana: diseño, popup o modal.
      */
-    allowPersistCookies: boolean;
-};
-/**
- * Propiedades base para una ventana en la aplicación.
- */
-export interface WindowBaseProps {
+    emergeType: EmergeType;
     /**
-     * Tipo de ventana ('microfrontend' o 'component').
+     * Tipo de ventana: microfrontend o componente.
      */
     winType: WinType;
-    emergeType: EmergeType;
-    openType?: OpenType;
-    areaId: string;
+    /**
+     * Id del módulo. Este es el dado por el Backend
+     */
     moduleId: string;
-    windowId: string;
+    /**
+     * Parámetros dinámicos del módulo. Estos paramtros son lo que un modulo puede enviarle a otro modulo para comunicarse entre ellos.
+     * Los parametros pueden ser datos tipo string, number, boolean, object, array, etc. y tambien pueden ser funciones.
+     */
     dynamicParams: DynamicMFParameters;
+    /**
+     * Url del icono del módulo.
+     */
     iconUrl: string;
+    /**
+     * Título de la ventana.
+     */
     title: string;
-    onClose?: (windowId: string) => void;
-    devCookies?: Cookies;
+    /**
+     * Subtítulo de la ventana.
+     */
+    subTitle?: string;
+    /**
+     * Opciones de la ventana. Son acciones que permiten persistir las cookies de la ventana a nivel de módulo, para que aunque se cierre esta,
+     * Cuando se abra de nuevo venga con las cookies guardadas.
+     * TODO: Se daño con la migración de ventanas a WindowBase, se debe revisar
+     */
     windowOptions?: WindowOptions;
-    parentLayoutId?: string;
+    /**
+     * Id del padre de la ventana.
+     */
+    parentId?: string;
+    /**
+     * Tipo de apertura de la ventana: normal o maximizado.
+     */
+    openType?: OpenType;
+    /**
+     * Id de la ventana que puede ser reemplazada. Esto permite avisarle a una ventana existente que debe repintar su contenido, en vez de lanzar una nueva ventana.
+     */
     replaceMeId?: string;
 }
-export interface LayoutMagnetizableBaseProps extends WindowBaseProps {
+/**
+ * Propiedades base para una ventana en la aplicación. En terminos generales es lo que el store aporta en el metodo AddWindow
+ */
+export interface AreaWindowBaseProps extends EmmitNewWindowBase {
+    areaId: string;
+    windowId: string;
+    onClose?: (windowId: string) => void;
+    devCookies?: Cookies;
+}
+export interface AreaLayoutBaseProps extends AreaWindowBaseProps {
     emergeType: 'layout';
     layoutProps: Omit<LayoutItem, 'i'>;
 }
-export interface LayoutMagnetizableMFProps extends LayoutMagnetizableBaseProps {
+export interface AreaLayoutMFProps extends AreaLayoutBaseProps {
     winType: 'microfrontend';
     mfProps: MFBaseProps;
 }
-export interface LayoutMagnetizableComponentProps extends LayoutMagnetizableBaseProps {
+export interface AreaLayoutComponentProps extends AreaLayoutBaseProps {
     winType: 'component';
     component: JSX_REACT_NODE;
 }
-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 AreaLayoutProps = AreaLayoutMFProps | AreaLayoutComponentProps;
+export type AreaLayoutStateProps = AreaLayoutProps & WindowState;
+export type EmmitNewLayoutProps = Omit<AreaLayoutMFProps, 'windowId' | 'onClose' | 'areaId'> | Omit<AreaLayoutComponentProps, 'windowId' | 'onClose' | 'areaId'> & {
+    winType: string;
+    emergeType: string;
+    layoutProps: any;
+    moduleId: string;
+    dynamicParams: Record<string, any>;
+    iconUrl: string;
+    title: string;
+};
+/**
+ * Retirar la props que ya entran por el Emmit, y dejar solo las que ingresan directamente al Popup
+ */
+type PopupPropsForAdd = Partial<Pick<PopupAddProps, 'bounds' | 'defaultPosition' | 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight' | 'resizable' | 'draggable'>>;
 export type Position = {
     x: number;
     y: number;
     width: number;
     height: number;
 };
-export interface LayoutMoveableBaseProps extends WindowBaseProps {
+export interface AreaPopupBaseProps extends AreaWindowBaseProps {
     emergeType: 'popup';
-    layoutProps: Omit<LayoutItem, 'i'>;
-    parentLayoutId: string;
+    popupProps: PopupPropsForAdd;
     replaceMeId?: string;
 }
-export interface LayoutMoveableMFProps extends LayoutMoveableBaseProps {
+export interface AreaPopupMFProps extends AreaPopupBaseProps {
     winType: 'microfrontend';
     mfProps: MFBaseProps;
 }
-export interface LayoutMoveableComponentProps extends LayoutMoveableBaseProps {
+export interface AreaPopupComponentProps extends AreaPopupBaseProps {
     winType: 'component';
     component: JSX_REACT_NODE;
 }
-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;
+export interface EmmitNewPopupMFProps extends EmmitNewWindowBase {
+    emergeType: 'popup';
+    winType: 'microfrontend';
+    mfProps: MFBaseProps;
+    popupProps: PopupPropsForAdd;
 }
+export interface EmmitNewPopupComponentProps extends EmmitNewWindowBase {
+    emergeType: 'popup';
+    winType: 'component';
+    component: JSX_REACT_NODE;
+    popupProps: PopupPropsForAdd;
+}
+export type EmmitNewPopupProps = EmmitNewPopupMFProps | EmmitNewPopupComponentProps;
 export interface HashWindowsByLayouts {
-    [P: string]: LayoutMagnetizableStateProps | LayoutMoveableStateProps;
+    [P: string]: AreaLayoutStateProps;
 }
-export interface ModalBaseProps extends WindowBaseProps {
+type AreaModalPropsForAdd = Pick<DOMRect, 'width' | 'height'> & Pick<DragResizeWindowProps, 'minWindowWidth' | 'minWindowHeight'>;
+export interface AreaModalBaseProps extends AreaWindowBaseProps {
     emergeType: 'modal';
     zIndex?: number;
-    windowProps?: Pick<DOMRect, 'width' | 'height'>;
+    modalProps: AreaModalPropsForAdd;
 }
-export interface ModalMFProps extends ModalBaseProps {
+export interface AreaModalMFProps extends AreaModalBaseProps {
     winType: 'microfrontend';
     mfProps: MFBaseProps;
 }
-export interface ModalComponentProps extends ModalBaseProps {
+export interface AreaModalComponentProps extends AreaModalBaseProps {
     winType: 'component';
-    component: ReactNode;
-}
-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;
+    component: JSX_REACT_NODE;
 }
-export type WindowStateProps = (LayoutMagnetizableMFProps & WindowState) | (LayoutMagnetizableComponentProps & WindowState) | (LayoutMoveableMFProps & WindowState) | (LayoutMoveableComponentProps & WindowState) | (ModalMFProps & WindowState) | (ModalComponentProps & WindowState);
+export type EmmitNewModalProps = Omit<AreaModalMFProps, 'windowId' | 'onClose' | 'areaId'> | Omit<AreaModalComponentProps, 'windowId' | 'onClose' | 'areaId'>;
+export type AreaWindowProps = (AreaLayoutMFProps & WindowState) | (AreaLayoutComponentProps & WindowState) | (AreaPopupMFProps & WindowState) | (AreaPopupComponentProps & WindowState) | (AreaModalMFProps & WindowState) | (AreaModalComponentProps & WindowState);
 export interface HashWindows {
-    [P: string]: WindowStateProps;
+    [P: string]: AreaWindowProps;
 }
-export type NewWindowProps = NewLayoutMagnetizableProps | NewLayoutMoveableProps | NewModalProps;
-export type AddWindow = (newWindow: NewWindowProps) => string;
+export type EmmitNewWindowProps = EmmitNewLayoutProps | EmmitNewPopupProps | EmmitNewModalProps;
+export type AddWindow = (newWindow: EmmitNewWindowProps) => string;
+export {};

package/components/extended/React-Resizable/Resizable/Resizable.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { R as RootStyled } from "./slots/ResizableSlots.js";
 import { u as useResizable } from "../hooks/useResizable.js";
 import { R as RESIZING_CLASS_NAME } from "./constants.js";
+import clsx from "clsx";
 const Resizable = (props) => {
   const { onResizeStart, onResizeStop, ...other } = props;
   const { isResizing, localHandleResizeStart, localHandleResizeStop } = useResizable(onResizeStart, onResizeStop);
@@ -11,7 +12,7 @@ const Resizable = (props) => {
       ...other,
       onResizeStart: localHandleResizeStart,
       onResizeStop: localHandleResizeStop,
-      className: isResizing ? RESIZING_CLASS_NAME : ""
+      className: clsx(isResizing ? RESIZING_CLASS_NAME : "", other.className)
     }
   );
 };

package/components/extended/React-Resizable/Resizable/slots/ResizableSlots.d.ts

@@ -1,4 +1,4 @@
 import { Resizable } from 'react-resizable';
-export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<import('react-resizable').ResizableProps, "children" | "width" | "height" | "className" | "onResize" | "axis" | "resizeHandles" | "handle" | "handleSize" | "lockAspectRatio" | "minConstraints" | "maxConstraints" | "onResizeStop" | "onResizeStart" | "draggableOpts" | "transformScale"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {
+export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<import('react-resizable').ResizableProps, "children" | "resizeHandles" | "width" | "height" | "className" | "onResize" | "handle" | "handleSize" | "lockAspectRatio" | "minConstraints" | "maxConstraints" | "onResizeStop" | "onResizeStart" | "draggableOpts" | "transformScale" | "axis"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {
     ref?: import('react').Ref<Resizable> | undefined;
 }>;

package/components/extended/React-Resizable/ResizableBox/slots/ResizableBoxSlots.d.ts

@@ -1,4 +1,4 @@
 import { ResizableBox } from 'react-resizable';
-export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<import('react-resizable').ResizableBoxProps, "children" | "style" | "width" | "height" | "className" | "onResize" | "axis" | "resizeHandles" | "handle" | "handleSize" | "lockAspectRatio" | "minConstraints" | "maxConstraints" | "onResizeStop" | "onResizeStart" | "draggableOpts" | "transformScale"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {
+export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<import('react-resizable').ResizableBoxProps, "children" | "resizeHandles" | "style" | "width" | "height" | "className" | "onResize" | "handle" | "handleSize" | "lockAspectRatio" | "minConstraints" | "maxConstraints" | "onResizeStop" | "onResizeStart" | "draggableOpts" | "transformScale" | "axis"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {
     ref?: import('react').Ref<ResizableBox> | undefined;
 }>;

package/components/extended/React-Resizable/helpers.d.ts

@@ -22,8 +22,13 @@ export declare const getReactResizableStyles: (theme: Theme, ownerState: {
         '& .react-resizable-handle': {
             display: string;
         };
-        '&:hover .react-resizable-handle, &.M4L-resizing .react-resizable-handle': {
+        '&:hover:not(.react-resizable-hide) .react-resizable-handle': {
             display: string;
+            prop1: number;
+        };
+        '&.M4L-resizing .react-resizable-handle': {
+            display: string;
+            prop1: number;
         };
     };
     '& .react-resizable-handle-sw': {