@m4l/layouts 9.3.12 → 9.3.13-JAEBeta.0

package/.storybook/utils/getStylesColorsByMode.d.ts

@@ -73,6 +73,7 @@ export declare const colorsLight: {
         readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
@@ -277,6 +278,7 @@ export declare const colorsLight: {
         readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
@@ -482,6 +484,7 @@ export declare const colorsDark: {
         readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
@@ -686,6 +689,7 @@ export declare const colorsDark: {
         readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {

package/@types/types.d.ts

@@ -1,20 +1,23 @@
-/* import { NoAuthModuleLayoutOwnerState, NoAuthModuleLayoutSlotsType } from '../layouts/NoAuthModuleLayout/types';
- */
-/* declare module '@mui/material/styles' {
+import { MFHostAppOwnerState, MFHostAppSlotsType } from '../components/MFHostApp/types';
+import { ComponentsOverrides, ComponentsVariants } from '@mui/material/styles';
+import { Theme } from '@mui/material/styles';
+import { MF_HOST_APP_KEY } from '../components/MFHostApp/constants';
+
+declare module '@mui/material/styles' {
   // Define the slots in the theme
   interface ComponentNameToClassKey {
-    M4LNoAuthModuleLayout: NoAuthModuleLayoutSlotsType;
-  }
+    [MF_HOST_APP_KEY]: MFHostAppSlotsType;
 
+  }
   interface ComponentsPropsList {
-    M4LNoAuthModuleLayout: Partial<NoAuthModuleLayoutOwnerState>;
+    [MF_HOST_APP_KEY]: Partial<MFHostAppOwnerState>;
   }
-
   interface Components {
-    M4LNoAuthModuleLayout?: {
-      defaultProps?: ComponentsPropsList['M4LNoAuthModuleLayout'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LNoAuthModuleLayout'];
-      variants?: ComponentsVariants['M4LNoAuthModuleLayout'];
+    [MF_HOST_APP_KEY]?: {
+      defaultProps?: ComponentsPropsList[MF_HOST_APP_KEY];
+      styleOverrides?: ComponentsOverrides<Theme>[MF_HOST_APP_KEY];
+      variants?: ComponentsVariants[MF_HOST_APP_KEY];
     };
+
   }
-} */
+}

package/components/MFHostApp/MFHostApp.js

@@ -3,6 +3,7 @@ import { unstable_HistoryRouter } from "react-router-dom";
 import { EnvironmentProvider, HostToolsProvider, NetworkProvider, DomainCountryProvider } from "@m4l/core";
 import { DeviceTypeProvider, LocalesProvider, HostThemeProvider, FormatterProvider } from "@m4l/graphics";
 import { BaseModule, WindowToolsMFProvider, DynamicMFParmsProvider, AppearanceComponentProvider } from "@m4l/components";
+import { M as MFHostAppContainerStyled } from "./slots/MFHostAppSlots.js";
 function MFHostApp(props) {
   const {
     children,
@@ -19,7 +20,9 @@ function MFHostApp(props) {
     privileges,
     componentsDictionary,
     dynamicMFStore,
-    windowTools
+    windowTools,
+    emergeType = "layout",
+    overrideContainerStyles
   } = props;
   return /* @__PURE__ */ jsx(EnvironmentProvider, { ...environment, children: /* @__PURE__ */ jsx(HostToolsProvider, { ...hostTools, children: /* @__PURE__ */ jsx(NetworkProvider, { axiosOperation, children: /* @__PURE__ */ jsx(DeviceTypeProvider, { children: /* @__PURE__ */ jsx(LocalesProvider, { isMicroFrontEnd: true, localeHost: currentLocale, children: /* @__PURE__ */ jsx(
     HostThemeProvider,
@@ -44,7 +47,7 @@ function MFHostApp(props) {
               componentsDictionary,
               skeletonFlags,
               privileges,
-              children: /* @__PURE__ */ jsx(FormatterProvider, { isMicroFrontEnd: true, ...formatters, children: /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx(AppearanceComponentProvider, { children }) }) }) })
+              children: /* @__PURE__ */ jsx(FormatterProvider, { isMicroFrontEnd: true, ...formatters, children: /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx(AppearanceComponentProvider, { children: /* @__PURE__ */ jsx(MFHostAppContainerStyled, { ownerState: { emergeType }, style: overrideContainerStyles, children }) }) }) }) })
             }
           )
         }

package/components/MFHostApp/constants.d.ts

@@ -0,0 +1 @@
+export declare const MF_HOST_APP_KEY = "MFHostApp";

package/components/MFHostApp/constants.js

@@ -0,0 +1,4 @@
+const MF_HOST_APP_KEY = "MFHostApp";
+export {
+  MF_HOST_APP_KEY as M
+};

package/components/MFHostApp/slots/MFHostAppSlots.d.ts

@@ -0,0 +1,3 @@
+export declare const MFHostAppContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').MFHostAppOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/MFHostApp/slots/MFHostAppSlots.js

@@ -0,0 +1,11 @@
+import { styled } from "@mui/material/styles";
+import { M as MF_HOST_APP_KEY } from "../constants.js";
+import { M as MFHostAppSlots } from "./MFHostAppSlotsEnum.js";
+import { m as mfHostAppStyles } from "../styles.js";
+const MFHostAppContainerStyled = styled("div", {
+  name: MF_HOST_APP_KEY,
+  slot: MFHostAppSlots.container
+})(mfHostAppStyles.container);
+export {
+  MFHostAppContainerStyled as M
+};

package/components/MFHostApp/slots/MFHostAppSlotsEnum.d.ts

@@ -0,0 +1,3 @@
+export declare enum MFHostAppSlots {
+    container = "container"
+}

package/components/MFHostApp/slots/MFHostAppSlotsEnum.js

@@ -0,0 +1,7 @@
+var MFHostAppSlots = /* @__PURE__ */ ((MFHostAppSlots2) => {
+  MFHostAppSlots2["container"] = "container";
+  return MFHostAppSlots2;
+})(MFHostAppSlots || {});
+export {
+  MFHostAppSlots as M
+};

package/components/MFHostApp/styles.d.ts

@@ -0,0 +1,2 @@
+import { MFHostAppStyles } from './types';
+export declare const mfHostAppStyles: MFHostAppStyles;

package/components/MFHostApp/styles.js

@@ -0,0 +1,15 @@
+const mfHostAppStyles = {
+  /**
+   * Estilos para el componente BaseModuleLayout.
+   */
+  container: ({ theme, ownerState }) => ({
+    padding: ownerState?.emergeType === "layout" ? theme.vars.size?.baseSpacings?.sp5 : theme.vars.size?.baseSpacings?.sp4,
+    display: "flex",
+    width: "100%",
+    height: "100%",
+    overflow: "auto"
+  })
+};
+export {
+  mfHostAppStyles as m
+};

package/components/MFHostApp/types.d.ts

@@ -1,6 +1,9 @@
 import { AxiosOperation, EnvironmentType, HostToolsType } from '@m4l/core';
 import { Formatters, LocaleType, HostThemeType } from '@m4l/graphics';
-import { DynamicMFStore, WindowToolsMF, BaseModuleProps } from '@m4l/components';
+import { DynamicMFStore, WindowToolsMF, BaseModuleProps, EmergeType, M4LOverridesStyleRules } from '@m4l/components';
+import { MFHostAppSlots } from './slots/MFHostAppSlotsEnum';
+import { MF_HOST_APP_KEY } from './constants';
+import { Theme } from '@mui/material/styles';
 export interface ByHostProps {
     environment: EnvironmentType;
     hostTools: HostToolsType;
@@ -20,5 +23,18 @@ export interface ByHostProps {
      * @deprecated no usar, no tiene efecto. utilizar el hook useMFWindowsTitle
      */
     isAddEditModule?: boolean;
+    /**
+     * Estilos para el contenedor de la aplicación, que es el content del WindowBase.
+     */
+    overrideContainerStyles?: React.CSSProperties;
+    /**
+     * EmergeType tipo de lanzamiento de la ventana, popup, layout, modal
+     */
+    emergeType?: EmergeType;
 }
 export type MFHostAppProps = ByHostProps & BaseModuleProps;
+export type MFHostAppOwnerState = {
+    emergeType?: EmergeType;
+};
+export type MFHostAppSlotsType = keyof typeof MFHostAppSlots;
+export type MFHostAppStyles = M4LOverridesStyleRules<MFHostAppSlotsType, typeof MF_HOST_APP_KEY, Theme>;

package/hooks/useNetworkActionConfirm/useNetworkActionConfirm.js

@@ -14,7 +14,9 @@ function useNetworkActionConfirm(props) {
         startProgress,
         stopProgress
       },
-      ...getEndPoint(obj)
+      ...getEndPoint(obj),
+      toastSuccess: false,
+      toastError: false
     }).then((response) => {
       if (customToastConfig) {
         const toastConfig = customToastConfig(obj, response);

package/index.js

@@ -3,12 +3,12 @@ import { M } from "./components/MFNoAuthApp/index.js";
 import { M as M2 } from "./components/MFHostApp/MFHostApp.js";
 import { M as M3 } from "./components/ModuleDetailTabs/ModuleDetailTabs.js";
 import { D } from "./components/DynamicTabs/DynamicTabs.js";
-import { M as M4 } from "./layouts/ModuleLayout/ModuleLayout.js";
 import { N } from "./layouts/NoAuthModuleLayout/index.js";
-import { d, g } from "./layouts/ModuleLayout/dicctionary.js";
+import { M as M4 } from "./layouts/ModuleLayout/ModuleLayout.js";
+import { g } from "./layouts/ModuleLayout/dicctionary.js";
 import { M as M5 } from "./layouts/MasterDetailLayout/MasterDetailLayout.js";
 import { g as g2 } from "./layouts/MasterDetailLayout/dicctionary.js";
-import { d as d2, g as g3 } from "./layouts/NoAuthModuleLayout/dicctionary.js";
+import { d, g as g3 } from "./layouts/NoAuthModuleLayout/dicctionary.js";
 import { u } from "./hooks/useMasterDetail/index.js";
 import { u as u2 } from "./hooks/useModule/index.js";
 import { u as u3 } from "./hooks/useDynamicAccordions/useDynamicAccordions.js";
@@ -27,8 +27,7 @@ export {
   N as NoAuthModuleLayout,
   c2 as createAppMF,
   c as createComponentField,
-  d as defaultModuleLayoutDictionary,
-  d2 as defaultNoAuthModuleLayoutDictionary,
+  d as defaultNoAuthModuleLayoutDictionary,
   g2 as getMasterDetailLayoutComponentsDictionary,
   g as getModuleLayoutComponentsDictionary,
   g3 as getNoAuthModuleLayoutComponentsDictionary,

package/layouts/MasterDetailLayout/MasterDetailLayout.js

@@ -79,7 +79,7 @@ function MasterDetailLayout(props) {
           onClose: () => {
             moduleLayoutRef.current?.closeModal();
           },
-          type: "modal",
+          emergeType: "modal",
           variant: "outlined",
           children: typeof detailComponent === "function" ? detailComponent({}) : detailComponent
         }

package/layouts/ModuleLayout/ModuleLayout.js

@@ -5,7 +5,7 @@ import { B as BaseModuleLayout } from "./subcomponents/BaseModuleLayout/index.js
 import { a as ModuleProvider } from "./contexts/ModuleContext/index.js";
 import { u as useUpdateWindowTitleAndEditionInfoMF } from "../../hooks/useUpdateWindowTitleAndEditionInfoMF/useUpdateWindowTitleAndEditionInfoMF.js";
 const ModuleLayout = forwardRef((props, ref) => {
-  const { moduleId, moduleActions, version, children, buildTime, moduleNameField, subtitle, editionInfo } = props;
+  const { moduleId, moduleActions, version, children, buildTime, moduleNameField, subtitle, editionInfo, overrideContainerStyles } = props;
   const moduleRef = useRef(null);
   const closeModal = () => {
     moduleRef.current?.closeModal();
@@ -16,7 +16,7 @@ const ModuleLayout = forwardRef((props, ref) => {
   useImperativeHandle(ref, () => ({
     openModal,
     closeModal,
-    current: moduleRef.current
+    nodeElement: moduleRef.current?.nodeElement || null
   }));
   useUpdateWindowTitleAndEditionInfoMF({
     moduleNameField,
@@ -30,7 +30,7 @@ const ModuleLayout = forwardRef((props, ref) => {
       moduleActions,
       version,
       buildTime,
-      children: /* @__PURE__ */ jsx(ModalProvider, { children: /* @__PURE__ */ jsx(BaseModuleLayout, { ref: moduleRef, children }) })
+      children: /* @__PURE__ */ jsx(ModalProvider, { children: /* @__PURE__ */ jsx(BaseModuleLayout, { ref: moduleRef, overrideContainerStyles, children }) })
     }
   );
 });

package/layouts/ModuleLayout/dicctionary.js

@@ -2,10 +2,6 @@ import { getModalDialogComponentsDictionary } from "@m4l/components";
 function getModuleLayoutComponentsDictionary() {
   return ["module_layout"].concat(getModalDialogComponentsDictionary());
 }
-const defaultModuleLayoutDictionary = {
-  module_layout: {}
-};
 export {
-  defaultModuleLayoutDictionary as d,
   getModuleLayoutComponentsDictionary as g
 };

package/layouts/ModuleLayout/index.d.ts

@@ -1,2 +1,3 @@
 export { ModuleLayout } from './ModuleLayout';
-export type { ModuleLayoutProps } from './types';
+export type { ModuleLayoutProps, ModuleLayoutRef } from './types';
+export { getModuleLayoutComponentsDictionary } from './dicctionary';

package/layouts/ModuleLayout/index.js

@@ -0,0 +1 @@
+

package/layouts/ModuleLayout/subcomponents/BaseModuleLayout/index.d.ts

@@ -1,2 +1,2 @@
-import { ModuleProps, ModuleRef } from './types';
-export declare const BaseModuleLayout: import('react').ForwardRefExoticComponent<ModuleProps & import('react').RefAttributes<ModuleRef>>;
+import { BaseModuleProps, ModuleRef } from './types';
+export declare const BaseModuleLayout: import('react').ForwardRefExoticComponent<BaseModuleProps & import('react').RefAttributes<ModuleRef>>;

package/layouts/ModuleLayout/subcomponents/BaseModuleLayout/index.js

@@ -4,16 +4,16 @@ import { useModal, getComponentSlotRoot } from "@m4l/components";
 import { M as ModuleLayoutRootStyled } from "../../slots/ModuleLayoutSlots.js";
 import { a as MODULE_LAYOUT_KEY } from "../../constants.js";
 const BaseModuleLayout = forwardRef((props, ref) => {
-  const { children } = props;
+  const { children, overrideContainerStyles } = props;
   const { openModal, closeModal } = useModal();
   const divRef = useRef(null);
   useImperativeHandle(ref, () => ({
     openModal,
     closeModal,
-    current: divRef.current
+    nodeElement: divRef.current
   }));
   const classRoot = getComponentSlotRoot(MODULE_LAYOUT_KEY);
-  return /* @__PURE__ */ jsx(ModuleLayoutRootStyled, { className: classRoot, ref: divRef, children });
+  return /* @__PURE__ */ jsx(ModuleLayoutRootStyled, { className: classRoot, ref: divRef, style: overrideContainerStyles, children });
 });
 export {
   BaseModuleLayout as B

package/layouts/ModuleLayout/subcomponents/BaseModuleLayout/types.d.ts

@@ -3,8 +3,9 @@ import { ModalOpenOptions } from '@m4l/components';
 export type ModuleRef = {
     openModal: (modalOpenProps: ModalOpenOptions) => void;
     closeModal: () => void;
-    current: HTMLDivElement | null;
+    nodeElement: HTMLDivElement | null;
 };
-export interface ModuleProps {
+export interface BaseModuleProps {
     children: ReactNode;
+    overrideContainerStyles?: React.CSSProperties;
 }

package/layouts/ModuleLayout/types.d.ts

@@ -1,8 +1,6 @@
 import { ReactNode } from 'react';
-import { ModalOpenOptions, ModuleAction } from '@m4l/components';
-import { ModuleRef } from './subcomponents/BaseModuleLayout/types';
+import { M4LOverridesStyleRules, ModalOpenOptions, ModuleAction } from '@m4l/components';
 import { ModuleLayoutSlots } from './slots/ModuleLayoutEnum';
-import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { MODULE_LAYOUT_KEY } from './constants';
 import { Theme } from '@mui/material/styles';
 import { ModuleNameField } from '../../hooks/useUpdateWindowTitleAndEditionInfoMF/types';
@@ -12,7 +10,7 @@ export interface ContainerProps {
 export type ModuleLayoutRef = {
     openModal: (modalOpenProps: ModalOpenOptions) => void;
     closeModal: () => void;
-    current: ModuleRef | null;
+    nodeElement: HTMLDivElement | null;
 };
 export interface ModuleLayoutProps {
     moduleId: string;
@@ -23,6 +21,11 @@ export interface ModuleLayoutProps {
     moduleNameField?: ModuleNameField;
     subtitle?: string;
     editionInfo?: string;
+    /**
+     * Estilos personalizados que van a reemplazar los estilos por defecto del contenedor del módulo. Para casos especiales.
+     * Donde se deb
+     */
+    overrideContainerStyles?: React.CSSProperties;
 }
 export type ModuleLayoutSlotsType = keyof typeof ModuleLayoutSlots;
-export type ModuleLayoutStyles = OverridesStyleRules<ModuleLayoutSlotsType, typeof MODULE_LAYOUT_KEY, Theme>;
+export type ModuleLayoutStyles = M4LOverridesStyleRules<ModuleLayoutSlotsType, typeof MODULE_LAYOUT_KEY, Theme>;

package/layouts/index.d.ts

@@ -1,5 +1,4 @@
-export { ModuleLayout } from './ModuleLayout/ModuleLayout';
-export * from './ModuleLayout/dicctionary';
+export * from './ModuleLayout';
 export * from './MasterDetailLayout';
 export { NoAuthModuleLayout } from './NoAuthModuleLayout';
 export * from './NoAuthModuleLayout/dicctionary';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/layouts",
-  "version": "9.3.12",
+  "version": "9.3.13-JAEBeta.0",
   "license": "UNLICENSED",
   "author": "M4L Team",
   "lint-staged": {

package/utils/createAppMF.d.ts

@@ -1,7 +1,10 @@
+import { EmergeType } from '@m4l/components';
 export type CreateAppMFProps = {
     prefixMF: string;
     moduleId: string;
-    App: () => JSX.Element;
+    App: (props: {
+        emergeType?: EmergeType;
+    }) => JSX.Element;
     privileges: string[];
     appVersion: string;
     componentsDictionary: string[];

package/utils/createAppMF.js

@@ -11,7 +11,7 @@ function createAppMF(props) {
     componentsDictionary,
     skeletonFlags
   } = props;
-  window[`render_${prefixMF}_${moduleId}`] = (containerId, environment, hostTools, currentLocale, hostTheme, axiosOperation, formatters, dynamicMFStore, windowTools) => {
+  window[`render_${prefixMF}_${moduleId}`] = (containerId, environment, hostTools, currentLocale, hostTheme, axiosOperation, formatters, dynamicMFStore, windowTools, emergeType) => {
     const container = document.getElementById(containerId);
     if (container) {
       const root = createRoot(container);
@@ -32,7 +32,7 @@ function createAppMF(props) {
             skeletonFlags,
             componentsDictionary,
             windowTools,
-            children: /* @__PURE__ */ jsx(App, {})
+            children: /* @__PURE__ */ jsx(App, { emergeType })
           }
         )
       );