@m4l/components 9.3.19-BE101025-beta.2 → 9.3.19-BE241025-beta.1

package/components/MFIsolationAppStorybook/MFIsolationAppStorybook.js

@@ -5,7 +5,7 @@ import { createBrowserHistory } from "history";
 import EventEmitter from "eventemitter3";
 import NProgress from "nprogress";
 import { DeviceTypeProvider, ThemeSettingsProvider, LocalesProvider } from "@m4l/graphics";
-import { EnvironmentProvider, HostToolsProvider, NetworkProvider } from "@m4l/core";
+import { EnvironmentProvider, HostToolsProvider, NetworkProvider, axiosOperation } from "@m4l/core";
 import { A as AppearanceComponentProvider } from "../../contexts/AppearanceComponentContext/AppearanceComponentContext.js";
 import enLocale from "date-fns/locale/en-US";
 import { c as createToaster } from "../ToastContainer/helpers/toaster.js";
@@ -13,10 +13,7 @@ import { M as MFAuthAppStorybook } from "./subcomponents/MFAuthAppStorybook/MFAu
 import { B as BaseModule } from "../BaseModule/BaseModule.js";
 import { S as SettingsLayout } from "../SettingsLayout/SettingsLayout.js";
 import { T as ToastContainer } from "../ToastContainer/ToastContainer.js";
-import { A as AppBarSettings } from "./subcomponents/AppBarSettings/AppBarSettings.js";
 import { P as PopupsProvider } from "../popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext.js";
-import { A as AreasProvider } from "../areas/contexts/AreasContext/index.js";
-import { S as Stack } from "../mui_extended/Stack/Stack.js";
 const LOCALE_HOST_EN = {
   lang: "en",
   script: void 0,
@@ -43,13 +40,11 @@ function MFIsolationAppStorybook(props) {
     moduleNameField,
     privileges,
     componentsDictionary,
-    onLoad,
     // observedDivRef,
     moduleDictionaryLoaded,
     forcedDeviceType,
     areasStoreId,
-    areasStoreDevtoolsEnabled,
-    appBarSettings = false
+    areasStoreDevtoolsEnabled
   } = props;
   const eventEmitter = useMemo(() => new EventEmitter(), []);
   const events_add_listener = useCallback(
@@ -113,14 +108,7 @@ function MFIsolationAppStorybook(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const mockNetworkOperation = useCallback(async (_networkProps) => {
-    return Promise.resolve({
-      data: [],
-      status: 200,
-      statusText: "OK"
-    });
-  }, []);
-  return /* @__PURE__ */ jsx(EnvironmentProvider, { ...environment, children: /* @__PURE__ */ jsx(HostToolsProvider, { ...hostTools, children: /* @__PURE__ */ jsx(NetworkProvider, { axiosOperation: mockNetworkOperation, children: /* @__PURE__ */ jsx(unstable_HistoryRouter, { history, children: /* @__PURE__ */ jsx(DeviceTypeProvider, { forcedDeviceType, children: /* @__PURE__ */ jsx(MFAuthAppStorybook, { children: /* @__PURE__ */ jsx(ThemeSettingsProvider, { children: /* @__PURE__ */ jsx(LocalesProvider, { isMicroFrontEnd: true, localeHost: LOCALE_HOST_EN, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(EnvironmentProvider, { ...environment, children: /* @__PURE__ */ jsx(HostToolsProvider, { ...hostTools, children: /* @__PURE__ */ jsx(NetworkProvider, { axiosOperation, children: /* @__PURE__ */ jsx(unstable_HistoryRouter, { history, children: /* @__PURE__ */ jsx(DeviceTypeProvider, { forcedDeviceType, children: /* @__PURE__ */ jsx(MFAuthAppStorybook, { children: /* @__PURE__ */ jsx(ThemeSettingsProvider, { children: /* @__PURE__ */ jsx(LocalesProvider, { isMicroFrontEnd: true, localeHost: LOCALE_HOST_EN, children: /* @__PURE__ */ jsx(
     BaseModule,
     {
       moduleId,
@@ -132,17 +120,13 @@ function MFIsolationAppStorybook(props) {
       children: /* @__PURE__ */ jsxs(AppearanceComponentProvider, { children: [
         /* @__PURE__ */ jsx(SettingsLayout, {}),
         /* @__PURE__ */ jsx(ToastContainer, { containerId: toastContainerId }),
-        " ",
         /* @__PURE__ */ jsx(
           PopupsProvider,
           {
             baseZindex: 1e3,
             storeId: areasStoreId,
             storeDevtoolsEnabled: areasStoreDevtoolsEnabled,
-            children: /* @__PURE__ */ jsx(AreasProvider, { loadAreasFromNetwork: false, loadCookiesFromNetwork: false, onLoad, children: /* @__PURE__ */ jsxs(Stack, { width: "100%", height: "100%", flexDirection: "column", overflow: "hidden", position: "relative", children: [
-              appBarSettings && /* @__PURE__ */ jsx(AppBarSettings, {}),
-              /* @__PURE__ */ jsx(Stack, { width: "100%", flexGrow: 1, flexDirection: "column", overflow: "hidden", position: "relative", children })
-            ] }) })
+            children
           }
         )
       ] })

package/components/MFIsolationAppStorybook/types.d.ts

@@ -8,10 +8,6 @@ export type MFIsolationAppStorybookProps = BaseModuleProps & {
     host_api_remote: string;
     host_static_assets: string;
     environment_assets: string;
-    onLoad: () => void;
-    activeAreasNetwork?: boolean;
-    activeCookiesFromNetwork?: boolean;
-    appBarSettings?: boolean;
     /**
      * Diccionario de componentes, se puede proporcionar ya el diccionario cargado, para evitar que se llame al endpoint nuevamente.
      */

package/components/MFLoader/MFLoader.js

@@ -30,7 +30,7 @@ function getDivScritId(prefix, moduleId) {
   };
 }
 function MFLoader(props) {
-  const { prefix, moduleId, cache = true, debugPort, dynamicMFStore, windowTools } = props;
+  const { prefix, moduleId, cache = true, debugPort, dynamicMFStore, windowTools, emergeType, loggedUser } = props;
   const { hostThemeOptions, fnComponentsOverrides } = useHostTheme();
   const { networkOperation } = useNetwork();
   const environment = useEnvironment();
@@ -64,6 +64,10 @@ function MFLoader(props) {
   }
   const renderMicroFrontend = useCallback(
     (newDScript) => {
+      const options = {
+        loggedUser,
+        emergeType
+      };
       try {
         window[`render_${prefix}_${newDScript.moduleId}`](
           newDScript.divContainerId,
@@ -74,13 +78,14 @@ function MFLoader(props) {
           axiosOperation,
           formatter,
           dynamicMFStore,
-          windowTools
+          windowTools,
+          options
         );
       } catch (_e) {
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [hostThemeOptions, currentLocale, formatter]
+    [hostThemeOptions, currentLocale, formatter, loggedUser]
   );
   const debouncedSetDivScript = useCallback(
     debounce(

package/components/MFLoader/styles.js

@@ -2,10 +2,10 @@ import { styled } from "@mui/material";
 const MFLoaderRoot = styled("div")(() => ({
   width: "100%",
   height: "100%",
+  position: "relative",
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
-  overflow: "auto",
   "& .M4LMFLoader-containerLinearProgress": {
     width: "100%",
     height: "100%",

package/components/MFLoader/types.d.ts

@@ -1,5 +1,7 @@
 import { DynamicMFStore } from '../WindowBase/contexts/DynamicMFParmsContext/store';
 import { WindowToolsMF } from '../WindowBase/contexts';
+import { EmergeType } from '../areas/types';
+import { AuthUserType } from '@m4l/core';
 /**
  * Propiedades base de un microfrontend.
  */
@@ -33,4 +35,12 @@ export interface MFLoaderProps extends MFBaseProps {
      * Herramientas de ventana para el microfrontend.
      */
     windowTools: WindowToolsMF;
+    /**
+     * Tipo de lanzamiento de la ventana, popup, layout, modal
+     */
+    emergeType?: EmergeType;
+    /**
+     * loggedUser: usuario logueado, para los microfrontends que necesitan el usuario logueado
+     */
+    loggedUser?: AuthUserType;
 }

package/components/MenuActions/MenuActions.js

@@ -34,6 +34,7 @@ function MenuActions(props) {
     className,
     onOpen,
     slots = {},
+    variant = "text",
     ...other
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -41,11 +42,14 @@ function MenuActions(props) {
   const { getLabel } = useModuleDictionary();
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(externalOpen ?? anchorEl);
-  const ownerState = useMemo(() => ({
-    iconSize: currentSize,
-    selected: open,
-    paletteColor: color
-  }), [currentSize, open, color]);
+  const ownerState = useMemo(
+    () => ({
+      iconSize: currentSize,
+      selected: open,
+      paletteColor: color
+    }),
+    [currentSize, open, color]
+  );
   useEffect(() => {
     if (onOpen) {
       onOpen(open);
@@ -60,21 +64,27 @@ function MenuActions(props) {
   const finalIcon = useMemo(() => {
     return icon || urlIcon || `${host_static_assets}/${environment_assets}/${ICON_PATH}/${ICONS.MENU}`;
   }, [urlIcon, icon, host_static_assets, environment_assets]);
-  const handleClick = useCallback((e, menuAction) => {
-    e.stopPropagation();
-    setAnchorEl(null);
-    if (onOpen) {
-      onOpen(false);
-    }
-    menuAction.onClick && menuAction.onClick(e);
-  }, [onOpen]);
-  const handleButtonClick = useCallback((e) => {
-    e.stopPropagation();
-    setAnchorEl(e.currentTarget);
-    if (onOpen) {
-      onOpen(true);
-    }
-  }, [onOpen]);
+  const handleClick = useCallback(
+    (e, menuAction) => {
+      e.stopPropagation();
+      setAnchorEl(null);
+      if (onOpen) {
+        onOpen(false);
+      }
+      menuAction.onClick && menuAction.onClick(e);
+    },
+    [onOpen]
+  );
+  const handleButtonClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      setAnchorEl(e.currentTarget);
+      if (onOpen) {
+        onOpen(true);
+      }
+    },
+    [onOpen]
+  );
   const renderMenuContent = useCallback(() => {
     let processedActions = [];
     let finalActions = [];
@@ -89,7 +99,16 @@ function MenuActions(props) {
       finalActions = processedActions;
     }
     if (finalActions.length === 0) {
-      return /* @__PURE__ */ jsx(MenuItem, { disabled: true, role: "menu-no-actions", label: getLabel(getMenuActionsDictionary(DICTIONARY.no_actions_label)) });
+      return /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          disabled: true,
+          role: "menu-no-actions",
+          label: getLabel(
+            getMenuActionsDictionary(DICTIONARY.no_actions_label)
+          )
+        }
+      );
     }
     const RenderHeader = () => {
       return /* @__PURE__ */ jsx(HeaderMenuActionsStyled, { children: header });
@@ -104,7 +123,14 @@ function MenuActions(props) {
         const key = actionKey ?? index;
         switch (menuAction.type ?? "menuItem") {
           case "divider":
-            return /* @__PURE__ */ jsx(MenuDivider, { variant: "solid", size }, `divider-${key}`);
+            return /* @__PURE__ */ jsx(
+              MenuDivider,
+              {
+                variant: "solid",
+                size
+              },
+              `divider-${key}`
+            );
           case "loader":
             return /* @__PURE__ */ jsx(MenuLoaderStyled, { size, children: /* @__PURE__ */ jsx(CircularProgress, { size }) }, `loader-${key}`);
           case "customNode":
@@ -115,7 +141,9 @@ function MenuActions(props) {
               {
                 size,
                 ...menuAction,
-                label: menuAction.label ?? getLabel(getMenuActionsDictionary(DICTIONARY.no_actions_label)),
+                label: menuAction.label ?? getLabel(
+                  getMenuActionsDictionary(DICTIONARY.no_actions_label)
+                ),
                 onClick: menuAction.onClick ? (e) => handleClick(e, menuAction) : void 0
               },
               `${MENU_ACTIONS_}${menuAction.label ?? key}`
@@ -128,38 +156,60 @@ function MenuActions(props) {
       footer && /* @__PURE__ */ jsx(RenderFooter, {}),
       endListElement && endListElement
     ] });
-  }, [menuActions, header, size, footer, endListElement, objItem, getLabel, actionKey, handleClick]);
-  return /* @__PURE__ */ jsxs(RootStyled, { className: clsx(className, MENU_ACTIONS_CLASSES.root, ownerState.selected && MENU_ACTIONS_CLASSES.selected), ownerState: { ownerState }, children: [
-    /* @__PURE__ */ jsx(
-      IconButtonStyled,
-      {
-        ownerState: { ...ownerState },
-        tooltip: toolTip,
-        size,
-        icon: finalIcon,
-        onClick: handleButtonClick,
-        className: iconButtonClassName,
-        selected: open,
-        disabled,
-        badgeProps: { badgeContent },
-        "aria-label": "menu-actions"
-      }
-    ),
-    open && /* @__PURE__ */ jsx(
-      Popover,
-      {
-        id: "Popover",
-        open,
-        anchorEl,
-        onClose: handleOpenClose,
-        arrowType,
-        ...other,
-        slots: { ...slots },
-        slotProps: { paper: { ...paperProps } },
-        children: renderMenuContent()
-      }
-    )
-  ] });
+  }, [
+    menuActions,
+    header,
+    size,
+    footer,
+    endListElement,
+    objItem,
+    getLabel,
+    actionKey,
+    handleClick
+  ]);
+  return /* @__PURE__ */ jsxs(
+    RootStyled,
+    {
+      className: clsx(
+        className,
+        MENU_ACTIONS_CLASSES.root,
+        ownerState.selected && MENU_ACTIONS_CLASSES.selected
+      ),
+      ownerState: { ownerState },
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButtonStyled,
+          {
+            ownerState: { ...ownerState },
+            tooltip: toolTip,
+            size,
+            icon: finalIcon,
+            onClick: handleButtonClick,
+            className: iconButtonClassName,
+            selected: open,
+            disabled,
+            badgeProps: { badgeContent },
+            "aria-label": other?.["aria-label"] ?? "menu-actions",
+            variant
+          }
+        ),
+        open && /* @__PURE__ */ jsx(
+          Popover,
+          {
+            id: "Popover",
+            open,
+            anchorEl,
+            onClose: handleOpenClose,
+            arrowType,
+            ...other,
+            slots: { ...slots },
+            slotProps: { paper: { ...paperProps } },
+            children: renderMenuContent()
+          }
+        )
+      ]
+    }
+  );
 }
 const MemonizedMenuActions = React.memo(MenuActions);
 export {

package/components/ObjectLogs/hooks/useDetailFormatter.js

@@ -33,7 +33,7 @@ const useDetailFormatter = (type) => {
                 title: getLabel(`${DICTIONARY.LABEL_LOG_DETAIL}`),
                 onClose: closeModal,
                 variant: "outlined",
-                type: "modal",
+                emergeType: "modal",
                 children: /* @__PURE__ */ jsx(StackStyled, { direction: "column", flexGrow: 1, children: /* @__PURE__ */ jsx(DetailDialogComponent, { logId, type }) })
               }
             ),

package/components/WindowBase/WindowBase.js

@@ -25,7 +25,7 @@ const WindowBase = (props) => {
     windowId,
     onMouseDown,
     editionInfo,
-    type = "layout",
+    emergeType = "layout",
     collapsed,
     draggable = true,
     ...other
@@ -36,7 +36,7 @@ const WindowBase = (props) => {
     selected,
     variant: computedVariant,
     size: currentSize,
-    type,
+    emergeType,
     maximized,
     collapsed,
     draggable
@@ -61,7 +61,7 @@ const WindowBase = (props) => {
             maximized,
             collapsed,
             onClose,
-            type,
+            emergeType,
             draggable,
             ...other
           }

package/components/WindowBase/WindowBase.styles.js

@@ -16,7 +16,7 @@ const windowBaseStyles = {
       overflow: "hidden",
       ...ownerState?.variant === "outlined" && {
         ...ownerState?.selected ? {
-          ...ownerState?.type === "layout" ? {
+          ...ownerState?.emergeType === "layout" ? {
             background: `linear-gradient(to bottom, 
             ${theme.vars.palette.primary.opacityGradient1}, 
             ${theme.vars.palette.primary.opacityGradient2})`,
@@ -31,26 +31,26 @@ const windowBaseStyles = {
             boxShadow: `inset 0px 0px 0 1px ${theme.vars.palette?.border.main}`
           }
         } : {
-          boxShadow: ownerState?.type === "layout" ? `inset 0px 0px 0 1px ${theme.vars.palette?.border.secondary}` : "unset"
+          boxShadow: ownerState?.emergeType === "layout" ? `inset 0px 0px 0 1px ${theme.vars.palette?.border.secondary}` : "unset"
         }
       },
-      ...ownerState?.type === "popup" && {
+      ...ownerState?.emergeType === "popup" && {
         "&&&": {
           boxShadow: theme.vars.customShadows.z1,
           border: `1px solid ${theme.vars.palette?.border.secondary}`,
-          borderRadius: theme.vars.size.borderRadius.r1,
+          borderRadius: theme.vars.size.borderRadius.r3,
           ...ownerState?.selected && {
             boxShadow: theme.vars.customShadows.z4,
-            border: `1px solid ${theme.vars.palette?.border.main}`
+            border: `1px solid ${theme.vars.palette?.primary.activeOpacity}`
           }
         }
       },
-      ...ownerState?.type === "layout" && {
+      ...ownerState?.emergeType === "layout" && {
         ...ownerState?.selected && !ownerState?.maximized ? {
           boxShadow: theme.vars.customShadows.primary
         } : {}
       },
-      ...ownerState?.type === "modal" && {
+      ...ownerState?.emergeType === "modal" && {
         boxShadow: `${theme.vars.customShadows.z3}!important`
       }
     }
@@ -59,8 +59,8 @@ const windowBaseStyles = {
   /**
    * Styles for the content of the window base component.
    */
-  contentWindowBase: ({ theme, ownerState }) => ({
-    padding: ownerState?.type === "layout" ? theme.vars.size.baseSpacings.sp5 : theme.vars.size.baseSpacings.sp4,
+  contentWindowBase: ({ ownerState, theme }) => ({
+    padding: ownerState?.emergeType === "layout" ? theme.vars.size.baseSpacings.sp5 : theme.vars.size.baseSpacings.sp4,
     overflow: "auto",
     width: "100%",
     height: "100%",
@@ -69,6 +69,17 @@ const windowBaseStyles = {
       display: "none"
     }
   }),
+  /**
+   * Window  component content Styles by emergeType
+   */
+  windowContainerComponent: () => ({
+    //Mover el estilado para adentro
+    position: "relative",
+    display: "flex",
+    width: "100%",
+    height: "100%",
+    overflow: "visible"
+  }),
   /**
    * Styles for the header of the window base component.
    */
@@ -76,14 +87,19 @@ const windowBaseStyles = {
     return {
       width: "100%",
       display: "flex",
-      padding: ownerState?.type === "popup" || ownerState?.type === "modal" ? theme.vars.size.baseSpacings["sp0-5"] : theme.vars.size.baseSpacings.sp1,
+      padding: theme.vars.size.baseSpacings.sp1,
+      borderBottom: "1px solid #ffffff00",
+      ...(ownerState?.emergeType === "popup" || ownerState?.emergeType === "modal") && {
+        padding: `${theme.vars.size.baseSpacings["sp2-5"]} ${theme.vars.size.baseSpacings.sp2} 0 ${theme.vars.size.baseSpacings.sp2}`,
+        borderBottom: `unset`
+      },
       alignItems: "center",
       justifyContent: "space-between",
       flexShrink: 0,
       alignSelf: "stretch",
       cursor: ownerState?.draggable ? "all-scroll" : "default",
       position: "relative",
-      ...ownerState?.type === "layout" || ownerState?.type === "modal" ? getSizeStyles(
+      ...ownerState?.emergeType === "layout" || ownerState?.emergeType === "modal" ? getSizeStyles(
         theme,
         ownerState?.size,
         "container",
@@ -101,8 +117,7 @@ const windowBaseStyles = {
           })
         )
       },
-      borderBottom: "1px solid #ffffff00",
-      ...ownerState?.selected && ownerState?.type === "layout" && ownerState?.variant === "outlined" && !ownerState?.maximized ? {
+      ...ownerState?.selected && ownerState?.emergeType === "layout" && ownerState?.variant === "outlined" && !ownerState?.maximized ? {
         background: `linear-gradient(to right, ${theme.vars.palette.primary.opacity}, #ffffff00);`,
         "&::before": {
           content: '""',
@@ -114,8 +129,7 @@ const windowBaseStyles = {
           background: `linear-gradient(to left, ${theme.vars.palette.primary.opacityGradient2}, #ffffff00);`
         }
       } : {
-        background: "transparent",
-        borderBottom: `1px solid ${theme.vars.palette.border.disabled}`
+        background: "transparent"
       }
     };
   },
@@ -138,7 +152,7 @@ const windowBaseStyles = {
    */
   headerTitleWindowBase: ({ theme, ownerState }) => ({
     minWidth: "30px",
-    ...ownerState?.selected && ownerState?.type !== "modal" ? {
+    ...ownerState?.selected && ownerState?.emergeType !== "modal" ? {
       color: `${theme.vars.palette["primary"].semanticText} !important`
     } : {
       color: `${theme.vars.palette.text.secondary} !important`
@@ -180,7 +194,7 @@ const windowBaseStyles = {
   headerSubTitleWindowBase: ({ theme, ownerState }) => ({
     width: "auto !important",
     height: "auto !important",
-    ...ownerState?.selected && ownerState?.type !== "modal" ? {
+    ...ownerState?.selected && ownerState?.emergeType !== "modal" ? {
       color: `${theme.vars.palette["primary"].semanticText} !important`
     } : {
       color: `${theme.vars.palette.text.secondary} !important`
@@ -196,7 +210,7 @@ const windowBaseStyles = {
    */
   headerIconWindowBase: ({ theme, ownerState }) => ({
     "& .M4LIcon-icon": {
-      ...ownerState?.selected && ownerState?.type !== "modal" ? {
+      ...ownerState?.selected && ownerState?.emergeType !== "modal" ? {
         backgroundColor: `${theme.vars.palette["primary"].semanticText} !important`
       } : {
         backgroundColor: `${theme.vars.palette.text.secondary} !important`
@@ -228,7 +242,7 @@ const windowBaseStyles = {
       ),
       marginLeft: theme.vars.size.baseSpacings.sp1,
       marginRight: theme.vars.size.baseSpacings.sp1,
-      marginBottom: ownerState?.type === "layout" ? "auto" : "unset"
+      marginBottom: ownerState?.emergeType === "layout" ? "auto" : "unset"
     },
     '& .window-actions[class*="M4LIconButton-styledMUIIconButton"]': {
       ...getSizeStyles(
@@ -242,7 +256,7 @@ const windowBaseStyles = {
       ),
       marginLeft: theme.vars.size.baseSpacings.sp1,
       marginRight: theme.vars.size.baseSpacings.sp1,
-      marginBottom: ownerState?.type === "layout" ? "auto!important" : "unset!important",
+      marginBottom: ownerState?.emergeType === "layout" ? "auto!important" : "unset!important",
       "&.collapse-toggle": {
         ...ownerState?.maximized && {
           display: "none"
@@ -304,7 +318,7 @@ const windowBaseStyles = {
    */
   pointIcon: ({ theme, ownerState }) => ({
     "& .M4LIcon-icon": {
-      ...ownerState?.selected && ownerState?.type !== "modal" && ownerState?.variant === "outlined" ? {
+      ...ownerState?.selected && ownerState?.emergeType !== "modal" && ownerState?.variant === "outlined" ? {
         backgroundColor: `${theme.vars.palette["primary"].semanticText} !important`
       } : {
         backgroundColor: `${theme.vars.palette.text.secondary} !important`
@@ -320,7 +334,7 @@ const windowBaseStyles = {
    * Styles for the menu actions of the window base component.
    */
   menuActionsWindowBase: ({ theme, ownerState }) => ({
-    ...ownerState?.type === "layout" ? {
+    ...ownerState?.emergeType === "layout" ? {
       ...getSizeStyles(
         theme,
         ownerState?.size,
@@ -363,15 +377,6 @@ const windowBaseStyles = {
       maxWidth: "100%"
     }
   }),
-  /**
-   * Window component content Styles
-   */
-  windowContainerComponent: () => ({
-    display: "flex",
-    width: "100%",
-    height: "100%",
-    overflow: "auto"
-  }),
   /**
    * Styles for the toast container of the window base component.
    */

package/components/WindowBase/constants.d.ts

@@ -1,2 +1,2 @@
 export declare const WINDOW_BASE_KEY_COMPONENT = "M4LWindowBase";
-export declare const WINDOW_BASE_CLASSES: Record<"wrapperWindowBase" | "contentWindowBase" | "headerContentWindowBase" | "headerTitleWindowBase" | "headerSubTitleWindowBase" | "pointIcon" | "containerTitleSubtitle" | "headerIconWindowBase" | "menuActionsWindowBase" | "iconsWrapperWindowBase" | "headerWindowComponent" | "linearProgressIndeterminate" | "contentEditionInfo" | "windowContainerComponent" | "toastContainer" | "containerLeftActions", string>;
+export declare const windowBaseClasses: Record<"wrapperWindowBase" | "contentWindowBase" | "headerContentWindowBase" | "headerTitleWindowBase" | "headerSubTitleWindowBase" | "pointIcon" | "containerTitleSubtitle" | "headerIconWindowBase" | "menuActionsWindowBase" | "iconsWrapperWindowBase" | "headerWindowComponent" | "linearProgressIndeterminate" | "contentEditionInfo" | "windowContainerComponent" | "toastContainer" | "containerLeftActions", string>;

package/components/WindowBase/constants.js

@@ -1,8 +1,8 @@
 import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
 import { W as WindowBaseSlots } from "./slots/WindowBaseEnum.js";
 const WINDOW_BASE_KEY_COMPONENT = "M4LWindowBase";
-const WINDOW_BASE_CLASSES = getComponentClasses(WINDOW_BASE_KEY_COMPONENT, WindowBaseSlots);
+const windowBaseClasses = getComponentClasses(WINDOW_BASE_KEY_COMPONENT, WindowBaseSlots);
 export {
   WINDOW_BASE_KEY_COMPONENT as W,
-  WINDOW_BASE_CLASSES as a
+  windowBaseClasses as w
 };

package/components/WindowBase/index.d.ts

@@ -5,3 +5,4 @@ export * from './contexts/WindowToolsMFContext';
 export * from './contexts/DynamicMFParmsContext';
 export type { WindowToolsMFContextProps } from './contexts/WindowToolsMFContext/types';
 export type { ModuleAction, GroupActionMenuItem, ModuleActionGroup } from './types';
+export type { JSX_REACT_NODE } from './types';

package/components/WindowBase/subcomponents/Component/index.js

@@ -4,8 +4,8 @@ import { a as WindowContainerComponentStyled } from "../../slots/WindowBaseSlots
 import { a as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/WindowToolsMFContext.js";
 import { a as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
 const WindowBaseComponent = (props) => {
-  const { component, dynamicMFStore, windowTools, componentProps } = props;
-  return /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx(WindowContainerComponentStyled, { ownerState: {}, children: typeof component === "function" ? component(componentProps) : component }) }) });
+  const { component, dynamicMFStore, windowTools, componentProps, emergeType } = props;
+  return /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx(WindowContainerComponentStyled, { ownerState: { emergeType }, children: typeof component === "function" ? component(componentProps) : component }) }) });
 };
 React.memo(WindowBaseComponent);
 export {

package/components/WindowBase/subcomponents/Component/types.d.ts

@@ -1,7 +1,9 @@
 import { WindowToolsMF } from '../../contexts';
 import { DynamicMFStore } from '../../contexts/DynamicMFParmsContext/store';
 import { JSX_REACT_NODE } from '../../../WindowBase/types';
+import { EmergeType } from '../../../areas/types';
 export interface ComponentProps {
+    emergeType: EmergeType;
     windowTools: WindowToolsMF;
     dynamicMFStore: DynamicMFStore;
     component: JSX_REACT_NODE;