@m4l/layouts 9.1.13 → 9.1.15

package/components/ModuleDetailTabs/useModuleDatailTabs.d.ts

@@ -19,118 +19,118 @@ export declare function useModuleDetailTabs<T extends Record<string, any> = Reco
         size?: Extract<import('@m4l/styles').Sizes, "small" | "medium"> | undefined;
         children?: null | undefined;
         ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-        title?: string | undefined | undefined;
+        title?: string | undefined;
         component?: React.ElementType | undefined;
-        id?: string | undefined | undefined;
+        id?: string | undefined;
         disabled?: boolean | undefined;
         action?: React.Ref<import('@mui/material').ButtonBaseActions> | undefined;
-        hidden?: boolean | undefined | undefined;
+        hidden?: boolean | undefined;
         color?: Extract<import('@m4l/styles').ComponentPalletColor, "default"> | undefined;
-        content?: string | undefined | undefined;
+        content?: string | undefined;
         style?: React.CSSProperties | undefined;
-        translate?: "yes" | "no" | undefined | undefined;
+        translate?: "yes" | "no" | undefined;
         urlIcon?: string | undefined;
-        lang?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
+        lang?: string | undefined;
+        slot?: string | undefined;
+        dir?: string | undefined;
         className?: string | undefined;
         classes?: (Partial<import('@mui/material').TabClasses> & Partial<import('@mui/material').ClassNameMap<never>>) | undefined;
         sx?: import('@mui/system').SxProps<import('@mui/material').Theme> | undefined;
         key?: import('react').Key | null | undefined;
-        defaultChecked?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        accessKey?: string | undefined | undefined;
-        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-        autoFocus?: boolean | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
-        contextMenu?: string | undefined | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+        autoFocus?: boolean | undefined;
+        contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
-        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-        nonce?: string | undefined | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        nonce?: string | undefined;
         spellCheck?: (boolean | "false" | "true") | undefined;
         tabIndex?: NonNullable<React.HTMLAttributes<any>["tabIndex"]> | undefined;
-        radioGroup?: string | undefined | undefined;
+        radioGroup?: string | undefined;
         role?: import('react').AriaRole | undefined;
-        about?: string | undefined | undefined;
-        datatype?: string | undefined | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
         inlist?: any;
-        prefix?: string | undefined | undefined;
-        property?: string | undefined | undefined;
-        rel?: string | undefined | undefined;
-        resource?: string | undefined | undefined;
-        rev?: string | undefined | undefined;
-        typeof?: string | undefined | undefined;
-        vocab?: string | undefined | undefined;
-        autoCorrect?: string | undefined | undefined;
-        autoSave?: string | undefined | undefined;
-        itemProp?: string | undefined | undefined;
-        itemScope?: boolean | undefined | undefined;
-        itemType?: string | undefined | undefined;
-        itemID?: string | undefined | undefined;
-        itemRef?: string | undefined | undefined;
-        results?: number | undefined | undefined;
-        security?: string | undefined | undefined;
-        unselectable?: "on" | "off" | undefined | undefined;
-        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-        is?: string | undefined | undefined;
-        "aria-activedescendant"?: string | undefined | undefined;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "false" | "true") | undefined;
-        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
-        "aria-braillelabel"?: string | undefined | undefined;
-        "aria-brailleroledescription"?: string | undefined | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
         "aria-busy"?: (boolean | "false" | "true") | undefined;
-        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-        "aria-colcount"?: number | undefined | undefined;
-        "aria-colindex"?: number | undefined | undefined;
-        "aria-colindextext"?: string | undefined | undefined;
-        "aria-colspan"?: number | undefined | undefined;
-        "aria-controls"?: string | undefined | undefined;
-        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
-        "aria-describedby"?: string | undefined | undefined;
-        "aria-description"?: string | undefined | undefined;
-        "aria-details"?: string | undefined | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-description"?: string | undefined;
+        "aria-details"?: string | undefined;
         "aria-disabled"?: (boolean | "false" | "true") | undefined;
-        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
-        "aria-errormessage"?: string | undefined | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
         "aria-expanded"?: (boolean | "false" | "true") | undefined;
-        "aria-flowto"?: string | undefined | undefined;
+        "aria-flowto"?: string | undefined;
         "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
         "aria-hidden"?: (boolean | "false" | "true") | undefined;
-        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
-        "aria-keyshortcuts"?: string | undefined | undefined;
-        "aria-label"?: string | undefined | undefined;
-        "aria-labelledby"?: string | undefined | undefined;
-        "aria-level"?: number | undefined | undefined;
-        "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
         "aria-modal"?: (boolean | "false" | "true") | undefined;
         "aria-multiline"?: (boolean | "false" | "true") | undefined;
         "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
-        "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
-        "aria-owns"?: string | undefined | undefined;
-        "aria-placeholder"?: string | undefined | undefined;
-        "aria-posinset"?: number | undefined | undefined;
-        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
         "aria-readonly"?: (boolean | "false" | "true") | undefined;
-        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
         "aria-required"?: (boolean | "false" | "true") | undefined;
-        "aria-roledescription"?: string | undefined | undefined;
-        "aria-rowcount"?: number | undefined | undefined;
-        "aria-rowindex"?: number | undefined | undefined;
-        "aria-rowindextext"?: string | undefined | undefined;
-        "aria-rowspan"?: number | undefined | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
+        "aria-rowspan"?: number | undefined;
         "aria-selected"?: (boolean | "false" | "true") | undefined;
-        "aria-setsize"?: number | undefined | undefined;
-        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
-        "aria-valuemax"?: number | undefined | undefined;
-        "aria-valuemin"?: number | undefined | undefined;
-        "aria-valuenow"?: number | undefined | undefined;
-        "aria-valuetext"?: string | undefined | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
-        } | undefined | undefined;
+        } | undefined;
         onCopy?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
         onCopyCapture?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
         onCut?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
@@ -302,7 +302,7 @@ export declare function useModuleDetailTabs<T extends Record<string, any> = Reco
         touchRippleRef?: React.Ref<import('@mui/material/ButtonBase/TouchRipple').TouchRippleActions> | undefined;
         disableFocusRipple?: boolean | undefined;
         dataTestId?: string | undefined;
-        iconPosition?: "top" | "bottom" | "start" | "end" | undefined;
+        iconPosition?: ("top" | "bottom" | "start" | "end") | undefined;
         wrapped?: boolean | undefined;
     }[];
     handleChangeTab: (newValue: string) => void;

package/hooks/index.d.ts

@@ -2,3 +2,4 @@ export * from './useMasterDetail';
 export * from './useAuth';
 export * from './useModule';
 export * from './useDynamicAccordions';
+export * from './useDynamicPaperForm';

package/hooks/useDynamicAccordions/useBaseAccordions.js

@@ -17,14 +17,14 @@ function useBaseAccordions(props) {
           },
           children: accordion.properties.map((property) => {
             const value = property.getValue(data, endPointData);
-            return value ? /* @__PURE__ */ jsx(
+            return /* @__PURE__ */ jsx(
               PropertyValue,
               {
                 property: getLabel(property.dictionaryId),
                 value
               },
               property.dictionaryId
-            ) : null;
+            );
           })
         },
         accordion.dictionaryId

package/hooks/useDynamicPaperForm/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useDynamicPaperForm';
+export type { PropertyValueField } from './types';

package/hooks/useDynamicPaperForm/index.js

@@ -0,0 +1 @@
+

package/hooks/useDynamicPaperForm/types.d.ts

@@ -0,0 +1,25 @@
+interface PropertyValueFieldBase {
+    name: string;
+    type: 'RHFTexfField' | 'component';
+    label: string;
+    mandatory?: boolean;
+}
+interface PropertyValueRHFTexfField extends PropertyValueFieldBase {
+    type: 'RHFTexfField';
+    readOnly?: boolean;
+    disabled?: boolean;
+    textFieldType?: React.InputHTMLAttributes<unknown>['type'];
+}
+export interface PropertyValueOtherComponent<T extends React.ComponentType<any>> extends PropertyValueFieldBase {
+    type: 'component';
+    component: T;
+    componentProps: React.ComponentProps<T>;
+}
+export type PropertyValueField = PropertyValueRHFTexfField | PropertyValueOtherComponent<any>;
+export type UseDynamicPaperFormProps = {
+    fields: PropertyValueField[];
+    title: string;
+    urlIcon: string;
+    isForm: boolean;
+};
+export {};

package/hooks/useDynamicPaperForm/useDynamicPaperForm.d.ts

@@ -0,0 +1,9 @@
+import { PropertyValueOtherComponent, UseDynamicPaperFormProps } from './types';
+/**
+ * Factory function to create a component field
+ */
+export declare function createComponentField<T extends React.ComponentType<any>>(params: PropertyValueOtherComponent<T>): PropertyValueOtherComponent<T>;
+/**
+ * Datos de ubicación
+ */
+export declare function useDynamicPaperForm(props: UseDynamicPaperFormProps): import("react/jsx-runtime").JSX.Element;

package/hooks/useDynamicPaperForm/useDynamicPaperForm.js

@@ -0,0 +1,55 @@
+import { jsx } from "react/jsx-runtime";
+import { PaperForm, RHFTextField, PropertyValue } from "@m4l/components";
+import { useModuleDictionary } from "@m4l/core";
+function createComponentField(params) {
+  return params;
+}
+function useDynamicPaperForm(props) {
+  const { getLabel } = useModuleDictionary();
+  const { fields, title, urlIcon, isForm } = props;
+  return /* @__PURE__ */ jsx(
+    PaperForm,
+    {
+      urlIcon,
+      title,
+      isForm,
+      children: fields.map((field) => {
+        let component;
+        if (field.type === "RHFTexfField") {
+          component = /* @__PURE__ */ jsx(
+            RHFTextField,
+            {
+              name: field.name,
+              disabled: field.disabled,
+              type: field.textFieldType,
+              InputProps: {
+                readOnly: field.readOnly
+              }
+            },
+            field.name
+          );
+        } else {
+          component = /* @__PURE__ */ jsx(field.component, { ...field.componentProps });
+        }
+        return /* @__PURE__ */ jsx(
+          PropertyValue,
+          {
+            property: getLabel(`${field.label}`),
+            isForm: true,
+            propertyWidth: 150,
+            mandatory: field.mandatory,
+            mandatoryMessage: "*",
+            value: component,
+            dataTestId: field.name,
+            semanticWidth: "fullWidth"
+          },
+          field.name
+        );
+      })
+    }
+  );
+}
+export {
+  createComponentField as c,
+  useDynamicPaperForm as u
+};

package/index.js

@@ -12,7 +12,8 @@ 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";
 import { u as u4 } from "./hooks/useDynamicAccordions/useDynamicAccordions.js";
-import { c } from "./utils/createAppMF.js";
+import { c, u as u5 } from "./hooks/useDynamicPaperForm/useDynamicPaperForm.js";
+import { c as c2 } from "./utils/createAppMF.js";
 export {
   A as AuthContext,
   a as AuthProvider,
@@ -22,7 +23,8 @@ export {
   M3 as ModuleDetailTabs,
   M4 as ModuleLayout,
   N as NoAuthModuleLayout,
-  c as createAppMF,
+  c2 as createAppMF,
+  c as createComponentField,
   d as defaultModuleLayoutDictionary,
   d2 as defaultNoAuthModuleLayoutDictionary,
   g2 as getMasterDetailLayoutComponentsDictionary,
@@ -30,6 +32,7 @@ export {
   g3 as getNoAuthModuleLayoutComponentsDictionary,
   u2 as useAuth,
   u4 as useDynamicAccordions,
+  u5 as useDynamicPaperForm,
   u as useMasterDetail,
   u3 as useModule
 };

package/layouts/MasterDetailLayout/MasterDetailLayout.js

@@ -1,17 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useMemo } from "react";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { WindowBase, SplitLayout } from "@m4l/components";
+import { WindowBase, getComponentSlotRoot, SplitLayout } from "@m4l/components";
 import { M as ModuleLayout } from "../ModuleLayout/ModuleLayout.js";
 import { a as MasterDetailProvider } from "./contexts/MasterDetailContext/index.js";
 import { useIsMobile } 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;
-}
+import { i as icons } from "./icons.js";
+import { d as dictionary } from "./dicctionary.js";
+import { M as MasterDetailLayoutRootStyled } from "./slots/MasterDetailLayoutSlot.js";
+import { M as MASTER_DETAIL_LAYOUT_PREFIX } from "./constants.js";
+import { g as getTotalModuleActions } from "./helpers/getTotalModuleActions.js";
 function MasterDetailLayout(props) {
   const {
     moduleId,
@@ -19,7 +17,6 @@ function MasterDetailLayout(props) {
     detailComponent,
     moduleActions,
     version
-    // defaultDictionary,
   } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
   const [splitPosition, setSplitPosition] = useState("vertical");
@@ -32,30 +29,30 @@ function MasterDetailLayout(props) {
   const splitActions = useMemo(
     () => [
       {
-        iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_vertical.svg`,
+        iconUrl: `${host_static_assets}/${environment_assets}/${icons.splitVertical}`,
         onClick: () => onChangePostionInternal("vertical"),
         visibility: "main",
-        label: getLabel("master_detail_layout.split_vertical"),
+        label: getLabel(dictionary.LABEL_SPLIT_VERTICAL),
         tag: "vertical",
         className: "splitactions",
         disabled: splitPosition === "vertical",
         key: "vertical"
       },
       {
-        iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_horizontal.svg`,
+        iconUrl: `${host_static_assets}/${environment_assets}/${icons.splitHorizontal}`,
         onClick: () => onChangePostionInternal("horizontal"),
         visibility: "main",
-        label: getLabel("master_detail_layout.split_horizontal"),
+        label: getLabel(dictionary.LABEL_SPLIT_HORIZONTAL),
         tag: "horizontal",
         className: "splitactions",
         disabled: splitPosition === "horizontal",
         key: "horizontal"
       },
       {
-        iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/no_split.svg`,
+        iconUrl: `${host_static_assets}/${environment_assets}/${icons.noSplit}`,
         onClick: () => onChangePostionInternal("none"),
         visibility: "main",
-        label: getLabel("master_detail_layout.no_split"),
+        label: getLabel(dictionary.LABEL_NO_SPLIT),
         tag: "none",
         className: "splitactions",
         disabled: splitPosition === "none",
@@ -71,7 +68,7 @@ function MasterDetailLayout(props) {
       window: /* @__PURE__ */ jsx(
         WindowBase,
         {
-          title: getLabel("master_detail_layout.view_detail"),
+          title: getLabel(dictionary.LABEL_VIEW_DETAIL),
           onClose: () => {
             moduleLayoutRef.current?.closeModal();
           },
@@ -87,8 +84,8 @@ function MasterDetailLayout(props) {
     );
     return actions;
   }, [splitActions, moduleActions]);
-  const classes = getMasterDetailLayoutUtilityClasses();
-  return /* @__PURE__ */ jsx(MasterDetailProvider, { onClickViewDetail, children: /* @__PURE__ */ jsx(MasterDetailLayoutRoot, { className: classes.root, children: /* @__PURE__ */ jsx(
+  const classRoot = getComponentSlotRoot(MASTER_DETAIL_LAYOUT_PREFIX);
+  return /* @__PURE__ */ jsx(MasterDetailProvider, { onClickViewDetail, children: /* @__PURE__ */ jsx(MasterDetailLayoutRootStyled, { className: classRoot, children: /* @__PURE__ */ jsx(
     ModuleLayout,
     {
       ref: moduleLayoutRef,

package/layouts/MasterDetailLayout/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const MASTER_DETAIL_LAYOUT_PREFIX = "M4LMasterDetailLayout";
+export declare const MASTER_DETAIL_LAYOUT_STORE_ID = "M4LMasterDetailLayoutStore";

package/layouts/MasterDetailLayout/constants.js

@@ -0,0 +1,6 @@
+const MASTER_DETAIL_LAYOUT_PREFIX = "M4LMasterDetailLayout";
+const MASTER_DETAIL_LAYOUT_STORE_ID = "M4LMasterDetailLayoutStore";
+export {
+  MASTER_DETAIL_LAYOUT_PREFIX as M,
+  MASTER_DETAIL_LAYOUT_STORE_ID as a
+};

package/layouts/MasterDetailLayout/contexts/MasterDetailContext/index.js

@@ -1,6 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, useState } from "react";
+import { createContext, useRef } from "react";
 import { voidFunction } from "@m4l/core";
+import { c as createMasterDetailLayoutStore } from "./store.js";
+import { useStore } from "zustand";
 const initialState = {
   masterSelection: void 0,
   onChangeMasterSelection: voidFunction,
@@ -11,17 +13,24 @@ const initialState = {
 const MasterDetailContext = createContext(initialState);
 function MasterDetailProvider(props) {
   const { children, onClickViewDetail } = props;
-  const [masterSelection, setMasterSelection] = useState(void 0);
-  const [refreshMaster, setRefreshMaster] = useState(voidFunction);
+  const masterDetailLayoutStoreRef = useRef();
+  if (!masterDetailLayoutStoreRef.current) {
+    masterDetailLayoutStoreRef.current = createMasterDetailLayoutStore({
+      masterSelection: void 0,
+      refreshMaster: voidFunction
+    });
+  }
+  const store = useStore(masterDetailLayoutStoreRef.current, (state) => state);
+  const { masterSelection, updateMasterSelection, updateRefreshMaster, refreshMaster } = store;
   return /* @__PURE__ */ jsx(
     MasterDetailContext.Provider,
     {
       value: {
         masterSelection,
-        onChangeMasterSelection: setMasterSelection,
+        onChangeMasterSelection: updateMasterSelection,
         onClickViewDetail,
         refreshMaster,
-        setRefreshMaster
+        setRefreshMaster: updateRefreshMaster
       },
       children
     }

package/layouts/MasterDetailLayout/contexts/MasterDetailContext/store.d.ts

@@ -0,0 +1,16 @@
+import { MasterDetailLayoutState, MasterDetailLayoutStateWithActions } from './types';
+/**
+ * Crea el Store para ModuleLayout.
+ * Este store se encarga de manejar el estado del layout de módulo.
+ * @param props Las props iniciales del store.
+ */
+export declare const createMasterDetailLayoutStore: (initProps: MasterDetailLayoutState, storeDevtoolsEnabled?: boolean) => import('zustand').UseBoundStore<Omit<Omit<import('zustand').StoreApi<MasterDetailLayoutStateWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: MasterDetailLayoutStateWithActions | Partial<MasterDetailLayoutStateWithActions> | ((state: MasterDetailLayoutStateWithActions) => MasterDetailLayoutStateWithActions | Partial<MasterDetailLayoutStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: MasterDetailLayoutStateWithActions | Partial<MasterDetailLayoutStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<MasterDetailLayoutStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+}>;
+export type MasterDetailLayoutStore = ReturnType<typeof createMasterDetailLayoutStore>;

package/layouts/MasterDetailLayout/contexts/MasterDetailContext/store.js

@@ -0,0 +1,50 @@
+import { create } from "zustand";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import { a as MASTER_DETAIL_LAYOUT_STORE_ID } from "../../constants.js";
+const createDevtools = (immerMiddlewere, config) => {
+  const { enabled = false } = config;
+  if (enabled && process.env.NODE_ENV === "development") {
+    return devtools(immerMiddlewere, config);
+  }
+  return immerMiddlewere;
+};
+const createMasterDetailLayoutStore = (initProps, storeDevtoolsEnabled = false) => {
+  const { refreshMaster, masterSelection } = initProps;
+  const startProps = {
+    refreshMaster,
+    masterSelection
+  };
+  return create(
+    createDevtools(
+      immer((set) => ({
+        ...startProps,
+        /**
+         * Initilize the store
+         */
+        init: () => {
+        },
+        /**
+         * Update the master selection
+         */
+        updateMasterSelection: (newMasterSelection) => {
+          set((state) => {
+            state.masterSelection = newMasterSelection;
+          });
+        },
+        /**
+         * Update the refresh master
+         */
+        updateRefreshMaster: (callback) => {
+          set((state) => {
+            state.refreshMaster = callback;
+          });
+        }
+      })),
+      { name: `${MASTER_DETAIL_LAYOUT_STORE_ID}: ${initProps.storeId}`, enabled: storeDevtoolsEnabled }
+    )
+  );
+};
+export {
+  createMasterDetailLayoutStore as c
+};

package/layouts/MasterDetailLayout/contexts/MasterDetailContext/types.d.ts

@@ -6,9 +6,37 @@ export interface MasterDetailContextStateProps {
 export interface MasterDetailProviderProps {
     children: ReactNode;
     onClickViewDetail: () => void;
+    /**
+     *  "storeDevtoolsEnabled" enable store devtools
+     */
+    storeDevtoolsEnabled?: boolean;
+    /**
+     *  "storeId" store identifier
+     */
+    storeId?: string;
 }
 export interface MasterDetailContextProps extends MasterDetailContextStateProps, Pick<MasterDetailProviderProps, 'onClickViewDetail'> {
     onChangeMasterSelection: (newMasterSelection: MasterSelecion) => void;
     refreshMaster: () => void;
     setRefreshMaster: (callback: () => void) => void;
 }
+export interface MasterDetailLayoutState extends Pick<MasterDetailContextStateProps, 'masterSelection'>, Pick<MasterDetailProviderProps, 'storeId'> {
+    /**
+     * Refresh master: Action to refresh data inthe master component
+     */
+    refreshMaster: () => void;
+}
+export interface MasterDetailLayoutStateWithActions extends MasterDetailLayoutState {
+    /**
+     * Initialize MasterDetailLayout store.
+     */
+    init: () => void;
+    /**
+     * Update MasterDetailLayout store.
+     */
+    updateMasterSelection: (newMasterSelection: MasterSelecion) => void;
+    /**
+     * Update MasterDetailLayout store.
+     */
+    updateRefreshMaster: (callback: () => void) => void;
+}

package/layouts/MasterDetailLayout/dicctionary.d.ts

@@ -1,3 +1,7 @@
-import { Dictionary } from '@m4l/core';
 export declare function getMasterDetailLayoutComponentsDictionary(): string[];
-export declare const defaultMasterDetailDictionary: Dictionary;
+export declare const dictionary: {
+    LABEL_SPLIT_VERTICAL: string;
+    LABEL_SPLIT_HORIZONTAL: string;
+    LABEL_NO_SPLIT: string;
+    LABEL_VIEW_DETAIL: string;
+};

package/layouts/MasterDetailLayout/dicctionary.js

@@ -1,8 +1,13 @@
-import { g as getModuleLayoutComponentsDictionary } from "../ModuleLayout/dicctionary.js";
-import { getNoItemSelectedComponentsDictionary } from "@m4l/components";
 function getMasterDetailLayoutComponentsDictionary() {
-  return ["master_detail_layout"].concat(getModuleLayoutComponentsDictionary()).concat(getNoItemSelectedComponentsDictionary());
+  return ["master_detail_layout"];
 }
+const dictionary = {
+  LABEL_SPLIT_VERTICAL: `${getMasterDetailLayoutComponentsDictionary()[0]}.split_vertical`,
+  LABEL_SPLIT_HORIZONTAL: `${getMasterDetailLayoutComponentsDictionary()[0]}.split_horizontal`,
+  LABEL_NO_SPLIT: `${getMasterDetailLayoutComponentsDictionary()[0]}.no_split`,
+  LABEL_VIEW_DETAIL: `${getMasterDetailLayoutComponentsDictionary()[0]}.view_detail`
+};
 export {
+  dictionary as d,
   getMasterDetailLayoutComponentsDictionary as g
 };