@m4l/layouts 6.0.0 → 7.0.1

package/@types/index.d.ts

@@ -0,0 +1,7 @@
+import { NewWindow } from '@m4l/components';
+import { EmitEvents } from '@m4l/core';
+declare module '@m4l/core' {
+    interface EmmitEventsGuard {
+        [EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW]: NewWindow;
+    }
+}

package/components/MFHostApp/index.d.ts

@@ -1,4 +1,10 @@
-/// <reference types="react" />
-import type { MFHostAppProps } from './types';
-export declare function MFHostApp(props: MFHostAppProps): import("react").JSX.Element;
+import { MFHostAppProps } from './types';
+/**
+ * Componente que envuelve la aplicación de un microfrontend
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-09 19:56:26 - automatic
+ * @updatedAt 2024-10-09 20:00:30 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
+export declare function MFHostApp(props: MFHostAppProps): import("react/jsx-runtime").JSX.Element;
 export default MFHostApp;

package/components/MFHostApp/index.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { unstable_HistoryRouter } from "react-router-dom";
+import { EnvironmentProvider, HostToolsProvider, NetworkProvider, DomainCountryProvider } from "@m4l/core";
+import { LocalesProvider, HostThemeProvider, ResponsiveContainerProvider, FormatterProvider } from "@m4l/graphics";
+import { BaseModule, WindowToolsMFProvider, DynamicMFParmsProvider, AppearanceComponentProvider } from "@m4l/components";
+import { M as MFWindowsTitle } from "../MFWindowsTitle/MFWindowsTitle.js";
+function MFHostApp(props) {
+  const {
+    children,
+    currentLocale,
+    hostTheme,
+    environment,
+    hostTools,
+    axiosOperation,
+    formatters,
+    isAuth = true,
+    moduleId,
+    moduleNameField,
+    skeletonFlags,
+    privileges,
+    componentsDictionary,
+    dynamicMFStore,
+    windowTools,
+    observedDivRef,
+    isAddEditModule = false
+  } = props;
+  return /* @__PURE__ */ jsx(EnvironmentProvider, { ...environment, children: /* @__PURE__ */ jsx(HostToolsProvider, { ...hostTools, children: /* @__PURE__ */ jsx(NetworkProvider, { axiosOperation, children: /* @__PURE__ */ jsx(LocalesProvider, { isMicroFrontEnd: true, localeHost: currentLocale, children: /* @__PURE__ */ jsx(
+    HostThemeProvider,
+    {
+      isMicroFrontEnd: true,
+      ...hostTheme,
+      children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, { observedDivRef, children: /* @__PURE__ */ jsx(unstable_HistoryRouter, { history: hostTools.history, children: /* @__PURE__ */ jsx(
+        DomainCountryProvider,
+        {
+          isMicroFrontEnd: true,
+          id: dynamicMFStore?.getState().dynamicMFParameters?.id || 1,
+          currency: formatters.currencyFormatter.code,
+          currency_decimal_digits: formatters.currencyFormatter.decimalDigits,
+          decimal_symbol: formatters.numberFormatter.decimalSymbol,
+          thousands_symbol: formatters.numberFormatter.thousandsSymbol,
+          children: /* @__PURE__ */ jsx(
+            BaseModule,
+            {
+              isAuth,
+              moduleId,
+              moduleNameField,
+              componentsDictionary,
+              skeletonFlags,
+              privileges,
+              children: /* @__PURE__ */ jsx(FormatterProvider, { isMicroFrontEnd: true, ...formatters, children: /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx(MFWindowsTitle, { isAddEditModule, children: /* @__PURE__ */ jsx(AppearanceComponentProvider, { children }) }) }) }) })
+            }
+          )
+        }
+      ) }) })
+    }
+  ) }) }) }) });
+}
+export {
+  MFHostApp as M
+};

package/components/MFHostApp/types.d.ts

@@ -1,7 +1,6 @@
-import type { AxiosOperation, EnvironmentType, HostToolsType } from '@m4l/core';
-import { Formatters, LocaleType } from '@m4l/graphics';
+import { AxiosOperation, EnvironmentType, HostToolsType } from '@m4l/core';
+import { Formatters, LocaleType, HostThemeType } from '@m4l/graphics';
 import { DynamicMFStore, WindowToolsMF, BaseModuleProps } from '@m4l/components';
-import { HostThemeType } from '@m4l/graphics';
 export interface ByHostProps {
     environment: EnvironmentType;
     hostTools: HostToolsType;
@@ -18,4 +17,4 @@ export interface ByHostProps {
      */
     isAddEditModule?: boolean;
 }
-export declare type MFHostAppProps = ByHostProps & BaseModuleProps;
+export type MFHostAppProps = ByHostProps & BaseModuleProps;

package/components/MFNoAuthApp/index.d.ts

@@ -1,4 +1,10 @@
-/// <reference types="react" />
 import { MFNoAuthAppProps } from './types';
-export declare function MFNoAuthApp(props: MFNoAuthAppProps): import("react").JSX.Element;
+/**
+ * Componente que envuelve la aplicación de un microfrontend sin autenticación
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-09 19:56:26 - automatic
+ * @updatedAt 2024-10-09 20:00:30 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
+export declare function MFNoAuthApp(props: MFNoAuthAppProps): import("react/jsx-runtime").JSX.Element;
 export default MFNoAuthApp;

package/components/MFNoAuthApp/index.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { DomainCountryProvider } from "@m4l/core";
+import { FormatterProvider, ResponsiveContainerProvider } from "@m4l/graphics";
+import { BaseModule } from "@m4l/components";
+function MFNoAuthApp(props) {
+  const {
+    children,
+    formatters,
+    moduleId,
+    moduleNameField,
+    skeletonFlags,
+    privileges,
+    componentsDictionary,
+    isAuth,
+    observedDivRef
+  } = props;
+  const domianCountry = {
+    id: 1,
+    currency: "USD",
+    currency_decimal_digits: 2,
+    decimal_symbol: ".",
+    thousands_symbol: ","
+  };
+  return /* @__PURE__ */ jsx(DomainCountryProvider, { isMicroFrontEnd: true, ...domianCountry, children: /* @__PURE__ */ jsx(
+    BaseModule,
+    {
+      isAuth,
+      moduleId,
+      moduleNameField,
+      componentsDictionary,
+      skeletonFlags,
+      privileges,
+      children: /* @__PURE__ */ jsx(FormatterProvider, { isMicroFrontEnd: true, ...formatters, children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, { observedDivRef, children }) })
+    }
+  ) });
+}
+export {
+  MFNoAuthApp as M
+};

package/components/MFWindowsTitle/MFWindowsTitle.d.ts

@@ -1,3 +1,9 @@
-/// <reference types="react" />
-import type { MFWindowsTitleProps } from './types';
-export declare function MFWindowsTitle({ isAddEditModule, children }: MFWindowsTitleProps): import("react").JSX.Element;
+import { MFWindowsTitleProps } from './types';
+/**
+ * Titulo de la ventana del microfrontend
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-09 19:56:26 - automatic
+ * @updatedAt 2024-10-09 20:00:30 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
+export declare function MFWindowsTitle({ isAddEditModule, children }: MFWindowsTitleProps): import("react/jsx-runtime").JSX.Element;

package/components/MFWindowsTitle/MFWindowsTitle.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { useSetWindowsTitle } from "@m4l/components";
+function MFWindowsTitle({ isAddEditModule = false, children }) {
+  useSetWindowsTitle({ isAddEditModule });
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+export {
+  MFWindowsTitle as M
+};

package/contexts/AuthContext/index.d.ts

@@ -1,5 +1,11 @@
-/// <reference types="react" />
-import type { AuthProviderProps, SessionContextType } from './types';
-declare const AuthContext: import("react").Context<SessionContextType | null>;
-declare function AuthProvider(props: AuthProviderProps): import("react").JSX.Element;
+import { AuthProviderProps, SessionContextType } from './types';
+declare const AuthContext: import('react').Context<SessionContextType | null>;
+/**
+ * Proveedor de autenticación
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-09 19:56:26 - automatic
+ * @updatedAt 2024-10-09 20:00:30 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
+declare function AuthProvider(props: AuthProviderProps): import("react/jsx-runtime").JSX.Element;
 export { AuthContext, AuthProvider };

package/contexts/AuthContext/{index-DARkRRM4.js → index.js}

@@ -1,12 +1,7 @@
+import { jsx } from "react/jsx-runtime";
 import { createContext, useReducer, useEffect } from "react";
 import { useHostTools, useNetwork, useEnvironment, useLocalStorageWithListener, EmitEvents, getLocalStorage, setLocalStorage } from "@m4l/core";
-import { jsx } from "react/jsx-runtime";
-var EnumTypes = /* @__PURE__ */ ((EnumTypes2) => {
-  EnumTypes2["Initial"] = "INITIALIZE";
-  EnumTypes2["Login"] = "LOGIN";
-  EnumTypes2["Logout"] = "LOGOUT";
-  return EnumTypes2;
-})(EnumTypes || {});
+import { E as EnumTypes } from "./types.js";
 const initialState = {
   isAuthenticated: false,
   isInitialized: false,
@@ -47,19 +42,11 @@ function dispatchInitial(dispatch) {
   });
 }
 function AuthProvider(props) {
-  const {
-    children
-  } = props;
+  const { children } = props;
   const [state, dispatch] = useReducer(JWTReducer, initialState);
-  const {
-    events_add_listener
-  } = useHostTools();
-  const {
-    networkOperation
-  } = useNetwork();
-  const {
-    domain_token
-  } = useEnvironment();
+  const { events_add_listener } = useHostTools();
+  const { networkOperation } = useNetwork();
+  const { domain_token } = useEnvironment();
   const [nextValSession, setNextValSession] = useLocalStorageWithListener(
     //Variable para saber si ha cambiado la session en otro navegador
     "vSession",
@@ -70,9 +57,7 @@ function AuthProvider(props) {
       networkOperation({
         method: "GET",
         endPoint: `auth/login`,
-        parms: {
-          user_data: true
-        },
+        parms: { user_data: true },
         checkUnAuthorized: false
       }).then((response) => {
         dispatch({
@@ -87,9 +72,7 @@ function AuthProvider(props) {
           remember: true
         });
         if (useSaved?.email !== response.user.email) {
-          setLocalStorage("userData", {
-            email: response.user.email
-          }, true);
+          setLocalStorage("userData", { email: response.user.email }, true);
         }
       }).catch(() => {
         dispatchInitial(dispatch);
@@ -109,15 +92,9 @@ function AuthProvider(props) {
     }).then((response) => {
       const user = response.data;
       if (remember) {
-        setLocalStorage("userData", {
-          email,
-          remember
-        });
+        setLocalStorage("userData", { email, remember });
       } else {
-        setLocalStorage("userData", {
-          email: "",
-          remember
-        });
+        setLocalStorage("userData", { email: "", remember });
       }
       dispatch({
         type: EnumTypes.Login,
@@ -135,25 +112,29 @@ function AuthProvider(props) {
         method: "POST"
       });
     }
-    dispatch({
-      type: EnumTypes.Logout
-    });
+    dispatch({ type: EnumTypes.Logout });
     setNextValSession((/* @__PURE__ */ new Date()).getTime() + "");
   };
   const onNetserviceUnautorized = () => {
     logout(false);
   };
   useEffect(() => {
-    events_add_listener(EmitEvents.EMMIT_EVENT_NET_SERVICE_UNAUTHORIZED, onNetserviceUnautorized);
+    events_add_listener(
+      EmitEvents.EMMIT_EVENT_NET_SERVICE_UNAUTHORIZED,
+      onNetserviceUnautorized
+    );
   }, []);
-  return /* @__PURE__ */ jsx(AuthContext.Provider, {
-    value: {
-      ...state,
-      login,
-      logout
-    },
-    children
-  });
+  return /* @__PURE__ */ jsx(
+    AuthContext.Provider,
+    {
+      value: {
+        ...state,
+        login,
+        logout
+      },
+      children
+    }
+  );
 }
 export {
   AuthContext as A,

package/contexts/AuthContext/types.d.ts

@@ -5,10 +5,10 @@ export declare enum EnumTypes {
     Login = "LOGIN",
     Logout = "LOGOUT"
 }
-export declare type AuthProviderProps = {
+export type AuthProviderProps = {
     children: ReactNode;
 };
-export declare type ActionMap<M extends {
+export type ActionMap<M extends {
     [index: string]: any;
 }> = {
     [Key in keyof M]: M[Key] extends undefined ? {
@@ -18,7 +18,7 @@ export declare type ActionMap<M extends {
         payload: M[Key];
     };
 };
-export declare type SessionAuthPayload = {
+export type SessionAuthPayload = {
     [EnumTypes.Initial]: {
         isAuthenticated: boolean;
         user: AuthUser;
@@ -28,7 +28,7 @@ export declare type SessionAuthPayload = {
     };
     [EnumTypes.Logout]: undefined;
 };
-export declare type SessionActions = ActionMap<SessionAuthPayload>[keyof ActionMap<SessionAuthPayload>];
+export type SessionActions = ActionMap<SessionAuthPayload>[keyof ActionMap<SessionAuthPayload>];
 export interface User {
     email: string;
     id: number;
@@ -39,8 +39,8 @@ export interface User {
     avatar_url?: Maybe<string>;
     user_type_id?: number;
 }
-export declare type AuthUser = Maybe<User>;
-export declare type AuthState = {
+export type AuthUser = Maybe<User>;
+export type AuthState = {
     isAuthenticated: boolean;
     isInitialized: boolean;
     user: AuthUser;

package/contexts/AuthContext/types.js

@@ -0,0 +1,9 @@
+var EnumTypes = /* @__PURE__ */ ((EnumTypes2) => {
+  EnumTypes2["Initial"] = "INITIALIZE";
+  EnumTypes2["Login"] = "LOGIN";
+  EnumTypes2["Logout"] = "LOGOUT";
+  return EnumTypes2;
+})(EnumTypes || {});
+export {
+  EnumTypes as E
+};

package/{m4l_layouts/types.d.ts → hooks/index.js}

@@ -1 +1 @@
-
+

package/hooks/useAuth/index.d.ts

@@ -1,2 +1,9 @@
-export declare const useAuth: () => import("../../contexts/AuthContext/types").SessionContextType;
+/**
+ * Hook para obtener el contexto de autenticación
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-09 19:56:26 - automatic
+ * @updatedAt 2024-10-09 20:00:30 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
+export declare const useAuth: () => import('../../contexts/AuthContext/types').SessionContextType;
 export default useAuth;

package/hooks/useAuth/{index-8hAi3guc.js → index.js}

@@ -1,8 +1,10 @@
 import { useContext } from "react";
-import { A as AuthContext } from "../../contexts/AuthContext/index-DARkRRM4.js";
+import { A as AuthContext } from "../../contexts/AuthContext/index.js";
 const useAuth = () => {
   const context = useContext(AuthContext);
-  if (!context) throw new Error("Auth context must be use inside AuthProvider");
+  if (!context) {
+    throw new Error("Auth context must be use inside AuthProvider");
+  }
   return context;
 };
 export {

package/hooks/useMasterDetail/index.d.ts

@@ -1 +1 @@
-export declare const useMasterDetail: () => import("../../layouts/MasterDetailLayout/contexts/MasterDetailContext/types").MasterDetailContextProps;
+export declare const useMasterDetail: () => import('../../layouts/MasterDetailLayout/contexts/MasterDetailContext/types').MasterDetailContextProps;

package/hooks/useMasterDetail/{index-D4QUQYYc.js → index.js}

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { M as MasterDetailContext } from "../../layouts/MasterDetailLayout/index-DeC4RoBs.js";
+import { M as MasterDetailContext } from "../../layouts/MasterDetailLayout/contexts/MasterDetailContext/index.js";
 const useMasterDetail = () => useContext(MasterDetailContext);
 export {
   useMasterDetail as u

package/hooks/useModule/index.d.ts

@@ -1,2 +1,9 @@
-export declare const useModule: () => import("../../layouts/ModuleLayout/contexts/ModuleContext/types").ModuleLayoutContextProps;
+/**
+ * Hook para obtener el contexto de un módulo
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-09 19:56:26 - automatic
+ * @updatedAt 2024-10-09 20:00:30 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
+export declare const useModule: () => import('../../layouts/ModuleLayout/contexts/ModuleContext/types').ModuleLayoutContextProps;
 export default useModule;

package/hooks/useModule/index.js

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

package/index.js

@@ -1,19 +1,22 @@
-import { a } from "./components/index-uQ5qk7MJ.js";
-import { M } from "./components/MFHostApp/index-Bz3RUvvY.js";
-import { A, a as a2 } from "./contexts/AuthContext/index-DARkRRM4.js";
-import { a as a3, d, g } from "./layouts/ModuleLayout/index-DAtDuh6s.js";
-import { a as a4, d as d2, g as g2 } from "./layouts/MasterDetailLayout/index-DeC4RoBs.js";
-import { N, d as d3, g as g3 } from "./layouts/NoAuthModuleLayout/index-txgn4T5B.js";
-import { u } from "./hooks/useMasterDetail/index-D4QUQYYc.js";
-import { u as u2 } from "./hooks/useAuth/index-8hAi3guc.js";
-import { u as u3 } from "./hooks/useModule/index-FY5nsBmE.js";
+import { M } from "./components/MFNoAuthApp/index.js";
+import { M as M2 } from "./components/MFHostApp/index.js";
+import { A, a } from "./contexts/AuthContext/index.js";
+import { M as M3 } from "./layouts/ModuleLayout/ModuleLayout.js";
+import { M as M4 } from "./layouts/MasterDetailLayout/MasterDetailLayout.js";
+import { N } from "./layouts/NoAuthModuleLayout/index.js";
+import { d, g } from "./layouts/ModuleLayout/dicctionary.js";
+import { d as d2, g as g2 } from "./layouts/MasterDetailLayout/dicctionary.js";
+import { d as d3, g as g3 } from "./layouts/NoAuthModuleLayout/dicctionary.js";
+import { u } from "./hooks/useMasterDetail/index.js";
+import { u as u2 } from "./hooks/useAuth/index.js";
+import { u as u3 } from "./hooks/useModule/index.js";
 export {
   A as AuthContext,
-  a2 as AuthProvider,
-  M as MFHostApp,
-  a as MFNoAuthApp,
-  a4 as MasterDetailLayout,
-  a3 as ModuleLayout,
+  a as AuthProvider,
+  M2 as MFHostApp,
+  M as MFNoAuthApp,
+  M4 as MasterDetailLayout,
+  M3 as ModuleLayout,
   N as NoAuthModuleLayout,
   d2 as defaultMasterDetailDictionary,
   d as defaultModuleLayoutDictionary,

package/layouts/MasterDetailLayout/MasterDetailLayout.d.ts

@@ -1,3 +1,9 @@
-/// <reference types="react" />
-import type { MasterDetailLayoutProps } from './types';
-export declare function MasterDetailLayout(props: MasterDetailLayoutProps): import("react").JSX.Element;
+import { MasterDetailLayoutProps } from './types';
+/**
+ * Layout de maestro detalle
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-09 19:56:26 - automatic
+ * @updatedAt 2024-10-09 20:00:30 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
+export declare function MasterDetailLayout(props: MasterDetailLayoutProps): import("react/jsx-runtime").JSX.Element;

package/layouts/MasterDetailLayout/MasterDetailLayout.js

@@ -0,0 +1,110 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useMemo, useCallback } from "react";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { WindowBase, SplitLayout } from "@m4l/components";
+import { M as ModuleLayout } from "../ModuleLayout/ModuleLayout.js";
+import { a as MasterDetailProvider } from "./contexts/MasterDetailContext/index.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { g as getMasterDetailLayoutUtilityClasses } from "./classes/index.js";
+import { M as MasterDetailLayoutRoot } from "./styles.js";
+function getTotalModuleActions(splitActions, moduleActions = []) {
+  let totalActions = [...splitActions];
+  totalActions = moduleActions.concat(totalActions);
+  return totalActions;
+}
+function MasterDetailLayout(props) {
+  const {
+    moduleId,
+    masterComponent,
+    detailComponent,
+    moduleActions,
+    version
+    // defaultDictionary,
+  } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const [splitPosition, setSplitPosition] = useState("vertical");
+  const isDesktop = useResponsiveDesktop();
+  const moduleLayoutRef = useRef(null);
+  const { getLabel } = useModuleDictionary();
+  const splitActions = useMemo(
+    () => [
+      {
+        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_vertical.svg`,
+        onClick: () => onChangePostionInternal("vertical"),
+        visibility: "main",
+        label: getLabel("master_detail_layout.split_vertical"),
+        tag: "vertical",
+        className: "splitactions",
+        disabled: splitPosition === "vertical",
+        key: "vertical"
+      },
+      {
+        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_horizontal.svg`,
+        onClick: () => onChangePostionInternal("horizontal"),
+        visibility: "main",
+        label: getLabel("master_detail_layout.split_horizontal"),
+        tag: "horizontal",
+        className: "splitactions",
+        disabled: splitPosition === "horizontal",
+        key: "horizontal"
+      },
+      {
+        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/no_split.svg`,
+        onClick: () => onChangePostionInternal("none"),
+        visibility: "main",
+        label: getLabel("master_detail_layout.no_split"),
+        tag: "none",
+        className: "splitactions",
+        disabled: splitPosition === "none",
+        key: "none"
+      }
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getLabel, splitPosition]
+  );
+  const onChangePostionInternal = useCallback((newPostion) => {
+    setSplitPosition(newPostion);
+  }, []);
+  const onClickViewDetail = useCallback(() => {
+    moduleLayoutRef.current?.openModal({
+      initialWidth: 500,
+      initialHeigth: 680,
+      window: /* @__PURE__ */ jsx(
+        WindowBase,
+        {
+          title: getLabel("master_detail_layout.view_detail"),
+          children: typeof detailComponent === "function" ? detailComponent({}) : detailComponent
+        }
+      )
+      // actions: undefined,
+    });
+  }, [detailComponent, getLabel]);
+  const finalModuleActions = useMemo(() => {
+    const actions = getTotalModuleActions(
+      splitActions,
+      moduleActions
+    );
+    return actions;
+  }, [splitActions, moduleActions]);
+  const classes = getMasterDetailLayoutUtilityClasses();
+  return /* @__PURE__ */ jsx(MasterDetailProvider, { onClickViewDetail, children: /* @__PURE__ */ jsx(MasterDetailLayoutRoot, { className: classes.root, children: /* @__PURE__ */ jsx(
+    ModuleLayout,
+    {
+      ref: moduleLayoutRef,
+      moduleId,
+      moduleActions: finalModuleActions,
+      version,
+      children: /* @__PURE__ */ jsx(
+        SplitLayout,
+        {
+          splitPosition: isDesktop ? splitPosition : "none",
+          firstPart: masterComponent,
+          secondPart: detailComponent
+        }
+      )
+    }
+  ) }) });
+}
+export {
+  MasterDetailLayout as M
+};

package/layouts/MasterDetailLayout/classes/constants.js

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

package/layouts/MasterDetailLayout/classes/index.d.ts

@@ -1,6 +1,13 @@
 import { MasterDetailLayoutClassesType } from './types';
 export declare const masterDetailLayoutClasses: MasterDetailLayoutClassesType;
 export declare function getMasterDetailLayoutUtilityClass(slot: string): string;
-export declare const useMasterDetailLayoutUtilityClasses: () => {
+/**
+ * Hook para obtener las clases del componente MasterDetailLayout
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-09 19:56:26 - automatic
+ * @updatedAt 2024-10-09 20:00:30 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
+export declare const getMasterDetailLayoutUtilityClasses: () => {
     root: string;
 };

package/layouts/MasterDetailLayout/classes/index.js

@@ -0,0 +1,23 @@
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { c as componentName } from "./constants.js";
+generateUtilityClasses(componentName, [
+  /* elements */
+  "root"
+  /* states or variants of elements */
+]);
+function getMasterDetailLayoutUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const getMasterDetailLayoutUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getMasterDetailLayoutUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+export {
+  getMasterDetailLayoutUtilityClasses as g
+};

package/layouts/MasterDetailLayout/classes/types.d.ts

@@ -1,6 +1,6 @@
-import { useMasterDetailLayoutUtilityClasses } from ".";
+import { getMasterDetailLayoutUtilityClasses } from '.';
 export interface MasterDetailLayoutClassesType {
     root: string;
 }
-export declare type MasterDetailLayoutClassesKey = keyof MasterDetailLayoutClassesType;
-export declare type Classes = ReturnType<typeof useMasterDetailLayoutUtilityClasses>;
+export type MasterDetailLayoutClassesKey = keyof MasterDetailLayoutClassesType;
+export type Classes = ReturnType<typeof getMasterDetailLayoutUtilityClasses>;