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

package/components/DynamicFilter/helpers/frontEndHelpers.d.ts

@@ -1,10 +1,10 @@
-import { RawFilterFieldApply } from '../types';
+import { FilterField, RawFilterFieldApply } from '../types';
 type ObjectData = Record<any, any>;
 /**
  * Función que verifica si el objectData cumple con todos los filtros de DynamicFilter
  * Para usar en el frontEnd, y no atraves de la API
  */
-export declare const getIsIfInDynamicFilter: (objectData: ObjectData, groupedFields: Record<string, RawFilterFieldApply[]>) => boolean;
+export declare const getIsIfInDynamicFilter: (filterFields: Array<FilterField>, objectData: ObjectData, groupedFields: Record<string, RawFilterFieldApply[]>) => boolean;
 /**
  * getFilterGroupFieldsByName agrupa los campos por nombre, para procesarlos en una OR
  */

package/components/DynamicFilter/helpers/frontEndHelpers.js

@@ -16,7 +16,7 @@ const isInBooleanFilter = (objectData, field) => {
   }
   return true;
 };
-const isInStringFilter = (objectData, field) => {
+const isInStringFilter = (objectData, field, defaultUndefinedValue = true) => {
   const objectDataValue = getPropertyByString(objectData, field.n, void 0);
   if (typeof field.o1 !== "string") {
     return true;
@@ -31,19 +31,19 @@ const isInStringFilter = (objectData, field) => {
         return true;
       }
     } else if (field.o === "c") {
-      if (objectDataValue.includes(field.o1)) {
+      if (objectDataValue.toLocaleLowerCase().includes(field.o1.toLocaleLowerCase())) {
         return true;
       }
     } else if (field.o === "nc") {
-      if (!objectDataValue.includes(field.o1)) {
+      if (!objectDataValue.toLocaleLowerCase().includes(field.o1.toLocaleLowerCase())) {
         return true;
       }
     }
     return false;
   }
-  return true;
+  return defaultUndefinedValue;
 };
-const isInNumberFilter = (objectData, field) => {
+const isInNumberFilter = (objectData, field, defaultUndefinedValue = true) => {
   const objectDataValue = getPropertyByString(objectData, field.n, void 0);
   if (typeof field.o1 !== "number") {
     return true;
@@ -83,7 +83,7 @@ const isInNumberFilter = (objectData, field) => {
     }
     return false;
   }
-  return true;
+  return defaultUndefinedValue;
 };
 const isInDateTimeFilter = (objectData, field) => {
   const objectDataValueString = getPropertyByString(objectData, field.n, void 0);
@@ -169,13 +169,34 @@ const isInSelectFilter = (objectData, field) => {
   }
   return false;
 };
-const getIsIfInDynamicFilter = (objectData, groupedFields) => {
+const getIsIfInDynamicFilter = (filterFields, objectData, groupedFields) => {
   let InAllFilters = true;
   for (const fieldName of Object.keys(groupedFields)) {
     const fieldGroup = groupedFields[fieldName];
     let inFilter = false;
     fieldGroup.forEach((field) => {
-      if (field.ft === "boolean") {
+      if (field.n === "all") {
+        filterFields.forEach((filterField) => {
+          const isNumber = !isNaN(Number(field.o1));
+          const artificialField = {
+            n: filterField.name,
+            o: "c",
+            o1: field.o1,
+            ft: filterField.type
+          };
+          if (filterField.type === "string") {
+            const isInString = isInStringFilter(objectData, artificialField, false);
+            inFilter = inFilter || isInString;
+          }
+          if (isNumber && filterField.type === "number") {
+            inFilter = inFilter || isInNumberFilter(objectData, {
+              ...artificialField,
+              o: "e",
+              o1: Number(field.o1)
+            }, false);
+          }
+        });
+      } else if (field.ft === "boolean") {
         inFilter = inFilter || isInBooleanFilter(objectData, field);
       } else if (field.ft === "string") {
         inFilter = inFilter || isInStringFilter(objectData, field);
@@ -199,13 +220,14 @@ const getIsIfInDynamicFilter = (objectData, groupedFields) => {
   return InAllFilters;
 };
 function getFilterGroupFieldsByName(fields) {
-  return fields.reduce((acc, field) => {
+  const result = fields.reduce((acc, field) => {
     if (!acc[field.n]) {
       acc[field.n] = [];
     }
     acc[field.n].push(field);
     return acc;
   }, {});
+  return result;
 }
 export {
   getFilterGroupFieldsByName as a,

package/components/DynamicFilter/subcomponents/DynamicFilterBase/DynamicFilterBase.d.ts

@@ -1,5 +1,6 @@
+import { DynamicFilterBaseProps } from './types';
 /**
  * DynamicFilterBase: Componente base del DynamicFilter.
  */
-declare function DynamicFilterBase(): import("react/jsx-runtime").JSX.Element;
+declare function DynamicFilterBase(props: DynamicFilterBaseProps): import("react/jsx-runtime").JSX.Element;
 export default DynamicFilterBase;

package/components/DynamicFilter/subcomponents/DynamicFilterBase/DynamicFilterBase.js

@@ -3,19 +3,21 @@ import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 import { D as DYNAMIC_FILTER_KEY_COMPONENT } from "../../constants.js";
 import { u as useDynamicFilterBase } from "./useDynamicFilterBase.js";
+import clsx from "clsx";
 import { R as RootStyled, I as InnerContainerStyled } from "../../slots/dynamicFilterSlots.js";
 import { I as InputFilter } from "../InputFilter/InputFilter.js";
 import { A as AppliedFilters } from "../AppliedFilters/AppliedFilters.js";
 import { F as FilterActions } from "../FilterActions/FilterActions.js";
 import { P as PopoverFilter } from "../PopoverFilter/PopoverFilter.js";
 import { D as DynamicFilterSlots } from "../../slots/SlotsEnum.js";
-function DynamicFilterBase() {
+function DynamicFilterBase(props) {
+  const { className } = props;
   const { ownerState, dataTestId } = useDynamicFilterBase();
   const classRoot = getComponentSlotRoot(DYNAMIC_FILTER_KEY_COMPONENT);
   return /* @__PURE__ */ jsx(
     RootStyled,
     {
-      className: classRoot,
+      className: clsx(classRoot, className),
       ownerState: { ...ownerState },
       ...getPropDataTestId(DYNAMIC_FILTER_KEY_COMPONENT, DynamicFilterSlots.root, dataTestId),
       children: /* @__PURE__ */ jsxs(

package/components/DynamicFilter/subcomponents/DynamicFilterBase/types.d.ts

@@ -0,0 +1,3 @@
+export interface DynamicFilterBaseProps {
+    className?: string;
+}

package/components/DynamicFilter/subcomponents/PopoverFilter/PopoverFilter.js

@@ -52,7 +52,7 @@ function PopoverFilter() {
               title: labelField,
               iconUrl: field.urlIcon,
               variant: "text",
-              type: "popup",
+              emergeType: "popup",
               selected: true,
               draggable: false,
               children: [

package/components/DynamicFilter/types.d.ts

@@ -273,6 +273,10 @@ rawFilters: Array<RawFilterFieldApply>) => void;
  * Propiedades que recibe el componente DynamicFilter
  */
 export interface DynamicFilterProps {
+    /**
+     *  "className" clase css para el componente
+     */
+    className?: string;
     /**
      *  "storeId" identificador del store
      */

package/components/DynamicSort/DynamicSort.js

@@ -5,13 +5,14 @@ import { D as DynamicSortProvider } from "./store/DynamicSortContext.js";
 import { D as DynamicSortBase } from "./subcomponents/DynamicSortBase/DynamicSortBase.js";
 const DynamicSort = forwardRef(
   (props, ref) => {
+    const { className, ...others } = props;
     const hasPresentFlags = useFlagsPresent([
       CommonFlags.FLAG_DICTIONARY_LOADED
     ]);
     if (!hasPresentFlags) {
       return null;
     }
-    return /* @__PURE__ */ jsx(DynamicSortProvider, { ...props, ref, children: /* @__PURE__ */ jsx(DynamicSortBase, {}) });
+    return /* @__PURE__ */ jsx(DynamicSortProvider, { ...others, ref, children: /* @__PURE__ */ jsx(DynamicSortBase, { className }) });
   }
 );
 export {

package/components/DynamicSort/subcomponents/DynamicSortBase/DynamicSortBase.d.ts

@@ -1,5 +1,6 @@
+import { DynamicSortBaseProps } from './types';
 /**
  * DynamicSortBase es un componente base que contiene los subcomponentes InputSort, AppliedSorts, SortActions y PopoverSort.
  */
-declare function DynamicSortBase(): import("react/jsx-runtime").JSX.Element;
+declare function DynamicSortBase(props: DynamicSortBaseProps): import("react/jsx-runtime").JSX.Element;
 export default DynamicSortBase;

package/components/DynamicSort/subcomponents/DynamicSortBase/DynamicSortBase.js

@@ -3,19 +3,21 @@ import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 import { D as DYNAMIC_SORT_KEY_COMPONENT } from "../../constants.js";
 import { u as useDynamicSortBase } from "./useDynamicSortBase.js";
+import clsx from "clsx";
 import { R as RootStyled, I as InnerContainerStyled } from "../../slots/DynamicSortSlots.js";
 import { I as InputSort } from "../InputSort/InputSort.js";
 import { A as AppliedSorts } from "../AppliedSorts/AppliedSorts.js";
 import { S as SortActions } from "../SortActions/SortActions.js";
 import { P as PopoverSort } from "../PopoverSort/PopoverSort.js";
 import { D as DynamicSortSlots } from "../../slots/SlotsEnum.js";
-function DynamicSortBase() {
+function DynamicSortBase(props) {
+  const { className } = props;
   const { ownerState, dataTestId } = useDynamicSortBase();
   const classRoot = getComponentSlotRoot(DYNAMIC_SORT_KEY_COMPONENT);
   return /* @__PURE__ */ jsx(
     RootStyled,
     {
-      className: classRoot,
+      className: clsx(classRoot, className),
       ownerState: { ...ownerState },
       ...getPropDataTestId(DYNAMIC_SORT_KEY_COMPONENT, DynamicSortSlots.root, dataTestId),
       children: /* @__PURE__ */ jsxs(

package/components/DynamicSort/subcomponents/DynamicSortBase/types.d.ts

@@ -0,0 +1,3 @@
+export interface DynamicSortBaseProps {
+    className?: string;
+}

package/components/DynamicSort/subcomponents/PopoverSort/PopoverSort.js

@@ -51,7 +51,7 @@ function PopoverSort() {
               title: labelField,
               iconUrl: field.urlIcon,
               variant: "text",
-              type: "popup",
+              emergeType: "popup",
               selected: true,
               draggable: false,
               children: [

package/components/DynamicSort/types.d.ts

@@ -106,6 +106,10 @@ rawSorts: Array<RawSortFieldApply>) => void;
  * Propiedades que recibe el componente DynamicSort
  */
 export interface DynamicSortProps {
+    /**
+     *  "className" clase css para el componente
+     */
+    className?: string;
     /**
      *  "storeId" identificador del store
      */

package/components/GridLayout/subcomponents/GridItem/index.js

@@ -253,8 +253,8 @@ function GridItem(props) {
       }
       let { w: newW, h: newH } = calcWH(
         getPositionParams(),
-        size.width / transformScale,
-        size.height / transformScale,
+        size.width,
+        size.height,
         refProps.current.x,
         refProps.current.y
       );

package/components/Image/Image.js

@@ -14,6 +14,8 @@ function Image(props) {
     dataTestId,
     className,
     cover,
+    width,
+    height,
     ...others
   } = props;
   const isSkeleton = useModuleSkeleton();
@@ -31,6 +33,7 @@ function Image(props) {
           ImgStyled,
           {
             ownerState: { ...ownerState },
+            style: { width, height },
             ...getPropDataTestId(IMAGE_KEY_COMPONENT, ImageSlots.root, dataTestId),
             ...others,
             className: clsx(IMAGE_CLASSES.root, className)
@@ -38,7 +41,7 @@ function Image(props) {
         ) })
       }
     );
-  }, [dataTestId, enableIntersectionObserver, others, ownerState, threshold, className]);
+  }, [enableIntersectionObserver, threshold, ownerState, width, height, dataTestId, others, className]);
   return lazyLoadComponent;
 }
 export {

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/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;