@m4l/layouts 9.2.1 → 9.3.0

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

@@ -53,6 +53,8 @@ export declare const colorsLight: {
         readonly surface: string;
         readonly hover: string;
         readonly backdrop: string;
+        readonly base: string;
+        readonly blur: string;
         readonly paper: "#000";
     };
     readonly chips: {
@@ -62,35 +64,40 @@ export declare const colorsLight: {
         readonly warning: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly default: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly forest: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly pink: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly orange: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        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 disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
             readonly contained: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
         };
     };
     readonly border: {
         readonly main: string;
+        readonly dens: string;
         readonly default: string;
         readonly secondary: string;
-        readonly dens: string;
         readonly disabled: string;
         readonly error: string;
     };
@@ -238,6 +245,8 @@ export declare const colorsLight: {
         readonly surface: string;
         readonly hover: string;
         readonly backdrop: string;
+        readonly base: string;
+        readonly blur: string;
         readonly paper: "#000";
     };
     readonly chips: {
@@ -247,35 +256,40 @@ export declare const colorsLight: {
         readonly warning: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly default: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly forest: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly pink: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly orange: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        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 disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
             readonly contained: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
         };
     };
     readonly border: {
         readonly main: string;
-        readonly default: string;
-        readonly secondary: string;
         readonly dens: string;
+        readonly default: string | undefined;
+        readonly secondary: string;
         readonly disabled: string;
         readonly error: string;
     };
@@ -424,6 +438,8 @@ export declare const colorsDark: {
         readonly surface: string;
         readonly hover: string;
         readonly backdrop: string;
+        readonly base: string;
+        readonly blur: string;
         readonly paper: "#000";
     };
     readonly chips: {
@@ -433,35 +449,40 @@ export declare const colorsDark: {
         readonly warning: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly default: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly forest: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly pink: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly orange: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        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 disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
             readonly contained: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
         };
     };
     readonly border: {
         readonly main: string;
+        readonly dens: string;
         readonly default: string;
         readonly secondary: string;
-        readonly dens: string;
         readonly disabled: string;
         readonly error: string;
     };
@@ -609,6 +630,8 @@ export declare const colorsDark: {
         readonly surface: string;
         readonly hover: string;
         readonly backdrop: string;
+        readonly base: string;
+        readonly blur: string;
         readonly paper: "#000";
     };
     readonly chips: {
@@ -618,35 +641,40 @@ export declare const colorsDark: {
         readonly warning: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly default: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly forest: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly pink: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly orange: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        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 disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
             readonly contained: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
         };
     };
     readonly border: {
         readonly main: string;
-        readonly default: string;
-        readonly secondary: string;
         readonly dens: string;
+        readonly default: string | undefined;
+        readonly secondary: string;
         readonly disabled: string;
         readonly error: string;
     };

package/components/DynamicTabs/DynamicTabs.js

@@ -16,7 +16,7 @@ function DynamicTabs(props) {
           onChange: (_e, value) => handleChangeTab(value),
           children: finalTabs.map((tab) => {
             const { value, tabProps } = tab;
-            return /* @__PURE__ */ jsx(Tab, { value, label: tabProps?.label }, value);
+            return /* @__PURE__ */ jsx(Tab, { value, ...tabProps }, value);
           })
         }
       ),

package/components/ModuleDetailTabs/ModuleDetailTabs.js

@@ -19,8 +19,8 @@ function ModuleDetailTabs(props) {
         allowScrollButtonsMobile: true,
         onChange: (_e, value) => handleChangeTab(value),
         children: finalTabs.map((tab) => {
-          const { value, label } = tab;
-          return /* @__PURE__ */ jsx(Tab, { value, label }, value);
+          const { value, label, icon } = tab;
+          return /* @__PURE__ */ jsx(Tab, { value, label, icon }, value);
         })
       }
     ),

package/components/ModuleDetailTabs/index.d.ts

@@ -1,2 +1,2 @@
 export { ModuleDetailTabs } from './ModuleDetailTabs';
-export type { ModuleDatailTab, ModuleDetailObjectLogs, ModuleDetailTabContent, ModuleDetailTabsProps } from './types';
+export type { ModuleDatailTab, ModuleDetailObjectLogs, ModuleDetailOtherObjectLogs, ModuleDetailM4LObjectLogs, ModuleDetailTabContent, ModuleDetailTabsProps } from './types';

package/components/ModuleDetailTabs/useModuleDatailTabs.js

@@ -38,13 +38,14 @@ function useModuleDetailTabs(props) {
         value: "objectLogs",
         tabContent: ObjectLogs,
         unmountable: false,
-        componentProps
+        componentProps,
+        icon: "/main/na/icons/i_common_master_detail_layout_detail_tab_logs"
       });
     }
     return arrTabs.map((tab) => ({
       ...tab,
       unmountable: tab.unmountable === void 0 ? true : tab.unmountable,
-      icon: typeof tab.icon === "string" ? /* @__PURE__ */ jsx(Icon, { src: `${urlAssetsPrefix}/${tab.icon}` }) : tab.icon,
+      icon: typeof tab.icon === "string" ? /* @__PURE__ */ jsx(Icon, { src: `${urlAssetsPrefix}${tab.icon}` }) : tab.icon,
       label: tab.dictionaryId ? getLabel(tab.dictionaryId) : void 0
     }));
   }, [masterSelection, tabs, objectLogsProps, urlAssetsPrefix, getLabel]);

package/hooks/index.d.ts

@@ -1,6 +1,6 @@
 export * from './useMasterDetail';
-export * from './useAuth';
 export * from './useModule';
 export * from './useDynamicAccordions';
 export * from './useDynamicPaperForm';
 export * from './useNetworkActionConfirm';
+export * from './useFormAddEdit';

package/hooks/useFormAddEdit/dictionary.d.ts

@@ -0,0 +1 @@
+export declare const getformAddEditDictionary: () => string;

package/hooks/useFormAddEdit/index.d.ts

@@ -0,0 +1 @@
+export * from './useFormAddEdit';

package/hooks/useFormAddEdit/types.d.ts

@@ -0,0 +1,27 @@
+import { NetworkProps } from '@m4l/core';
+import { FieldValues } from 'react-hook-form';
+export type ResponseEndpoint<TEndpointValues = FieldValues> = {
+    data: TEndpointValues;
+};
+export interface UseFormAddEditProps<TValues = FieldValues, TEndpointValues = FieldValues> {
+    /**
+     * Id del objeto, si se define, se llama al endpoint para obtener los datos
+     */
+    objectId?: number | string;
+    /**
+     * Valores iniciales del formulario
+     */
+    initialValues: TValues;
+    /**
+     * Funcion para formatear los datos del endpoint
+     */
+    formatDataEndpoint?: (response: ResponseEndpoint<TEndpointValues>) => TValues;
+    /**
+     * Si se define en true, no se llama al endpoint
+     */
+    omitCallEnpoint?: boolean;
+    /**
+     * Props para llamar al networkOperation
+     */
+    networkProps: NetworkProps;
+}

package/hooks/useFormAddEdit/useFormAddEdit.d.ts

@@ -0,0 +1,11 @@
+import { UseFormAddEditProps } from './types';
+import { FormStatusLoad } from '@m4l/components';
+import { FieldValues } from 'react-hook-form';
+/**
+ * TODO: Documentar
+ */
+export declare function useFormAddEdit<TValues extends FieldValues = FieldValues, TEndpointValues extends FieldValues = FieldValues>(props: UseFormAddEditProps<TValues, TEndpointValues>): {
+    formValues: TValues;
+    statusLoad: FormStatusLoad;
+    refresh: () => void;
+};

package/hooks/useFormAddEdit/useFormAddEdit.js

@@ -0,0 +1,79 @@
+import { jsx } from "react/jsx-runtime";
+import { useNetwork, useFlagsStore, useModuleDictionary } from "@m4l/core";
+import { useState, useCallback, useEffect } from "react";
+import { useModal, WindowConfirm } from "@m4l/components";
+function useFormAddEdit(props) {
+  const {
+    initialValues,
+    objectId,
+    networkProps,
+    formatDataEndpoint,
+    omitCallEnpoint = false
+  } = props;
+  const { openModal, closeModal } = useModal();
+  const [formValues, setFormValues] = useState(initialValues);
+  const [statusLoad, setStatusLoad] = useState(
+    objectId === void 0 ? "new" : "edit"
+  );
+  const { networkOperation } = useNetwork();
+  const addFlag = useFlagsStore((state) => state.flagsActions.addFlag);
+  const { getLabel } = useModuleDictionary();
+  const refresh = useCallback(() => {
+    if (statusLoad === "ready") {
+      setStatusLoad("edit");
+    }
+  }, [statusLoad]);
+  useEffect(() => {
+    let mounted = true;
+    if (statusLoad === "edit") {
+      if (omitCallEnpoint) {
+        addFlag("form_loaded");
+        setStatusLoad("ready");
+        return;
+      }
+      networkOperation(networkProps).then(
+        (response) => {
+          if (mounted) {
+            if (formatDataEndpoint) {
+              setFormValues(formatDataEndpoint(response));
+            } else {
+              setFormValues(response.data);
+            }
+            setStatusLoad("reload_values_provider");
+          }
+        },
+        () => {
+          setStatusLoad("error");
+          openModal({
+            window: /* @__PURE__ */ jsx(
+              WindowConfirm,
+              {
+                variant: "error",
+                title: getLabel("form_add_edit.label_error_title"),
+                msg: getLabel("form_add_edit.error_authorization_message"),
+                onClickIntro: () => closeModal()
+              }
+            ),
+            variant: "delete"
+          });
+          addFlag("form_loaded");
+        }
+      );
+    } else if (statusLoad === "new" || statusLoad === "reload_values_provider") {
+      addFlag("form_loaded");
+      setStatusLoad("ready");
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [statusLoad]);
+  useEffect(() => {
+    if (statusLoad === "ready" && objectId !== void 0) {
+      setStatusLoad("edit");
+    }
+  }, [objectId]);
+  return { formValues, statusLoad, refresh };
+}
+export {
+  useFormAddEdit as u
+};

package/hooks/useFormAddEdit/useFormAddEdit.test.d.ts

@@ -0,0 +1 @@
+export {};

package/index.d.ts

@@ -1,5 +1,4 @@
 export * from './components';
-export * from './contexts';
 export * from './layouts';
 export * from './hooks';
 export * from './utils';

package/index.js

@@ -3,7 +3,6 @@ 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 { A, a } from "./contexts/AuthContext/index.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";
@@ -11,15 +10,13 @@ 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 { 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, u as u5 } from "./hooks/useDynamicPaperForm/useDynamicPaperForm.js";
-import { u as u6 } from "./hooks/useNetworkActionConfirm/useNetworkActionConfirm.js";
+import { u as u2 } from "./hooks/useModule/index.js";
+import { u as u3 } from "./hooks/useDynamicAccordions/useDynamicAccordions.js";
+import { c, u as u4 } from "./hooks/useDynamicPaperForm/useDynamicPaperForm.js";
+import { u as u5 } from "./hooks/useNetworkActionConfirm/useNetworkActionConfirm.js";
+import { u as u6 } from "./hooks/useFormAddEdit/useFormAddEdit.js";
 import { c as c2 } from "./utils/createAppMF.js";
 export {
-  A as AuthContext,
-  a as AuthProvider,
   D as DynamicTabs,
   L as LIMIT_RECORDS_500_CONFIG,
   M2 as MFHostApp,
@@ -35,10 +32,10 @@ export {
   g2 as getMasterDetailLayoutComponentsDictionary,
   g as getModuleLayoutComponentsDictionary,
   g3 as getNoAuthModuleLayoutComponentsDictionary,
-  u2 as useAuth,
-  u4 as useDynamicAccordions,
-  u5 as useDynamicPaperForm,
+  u3 as useDynamicAccordions,
+  u4 as useDynamicPaperForm,
+  u6 as useFormAddEdit,
   u as useMasterDetail,
-  u3 as useModule,
-  u6 as useNetworkActionConfirm
+  u2 as useModule,
+  u5 as useNetworkActionConfirm
 };

package/layouts/MasterDetailLayout/MasterDetailLayout.js

@@ -16,15 +16,16 @@ function MasterDetailLayout(props) {
     masterComponent,
     detailComponent,
     moduleActions,
-    version
+    version,
+    splitPosition
   } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
-  const [splitPosition, setSplitPosition] = useState("vertical");
+  const [splitPositionState, setSplitPositionState] = useState(splitPosition ?? "vertical");
   const isMobile = useIsMobile();
   const moduleLayoutRef = useRef(null);
   const { getLabel } = useModuleDictionary();
   const onChangePostionInternal = useCallback((newPostion) => {
-    setSplitPosition(newPostion);
+    setSplitPositionState(newPostion);
   }, []);
   const splitActions = useMemo(
     () => [
@@ -35,7 +36,7 @@ function MasterDetailLayout(props) {
         label: getLabel(dictionary.LABEL_SPLIT_VERTICAL),
         tag: "vertical",
         className: "splitactions",
-        disabled: splitPosition === "vertical",
+        disabled: splitPositionState === "vertical",
         key: "vertical"
       },
       {
@@ -45,7 +46,7 @@ function MasterDetailLayout(props) {
         label: getLabel(dictionary.LABEL_SPLIT_HORIZONTAL),
         tag: "horizontal",
         className: "splitactions",
-        disabled: splitPosition === "horizontal",
+        disabled: splitPositionState === "horizontal",
         key: "horizontal"
       },
       {
@@ -55,11 +56,11 @@ function MasterDetailLayout(props) {
         label: getLabel(dictionary.LABEL_NO_SPLIT),
         tag: "none",
         className: "splitactions",
-        disabled: splitPosition === "none",
+        disabled: splitPositionState === "none",
         key: "none"
       }
     ],
-    [getLabel, splitPosition, environment_assets, host_static_assets, onChangePostionInternal]
+    [getLabel, splitPositionState, environment_assets, host_static_assets, onChangePostionInternal]
   );
   const onClickViewDetail = useCallback(() => {
     moduleLayoutRef.current?.openModal({
@@ -95,7 +96,7 @@ function MasterDetailLayout(props) {
       children: /* @__PURE__ */ jsx(
         SplitLayout,
         {
-          splitPosition: isMobile ? "none" : splitPosition,
+          splitPosition: isMobile ? "none" : splitPositionState,
           firstPart: masterComponent,
           secondPart: detailComponent
         }

package/layouts/MasterDetailLayout/types.d.ts

@@ -4,10 +4,12 @@ import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { MasterDetailLayoutSlots } from './slots/MasterDetailLayoutEnum';
 import { MASTER_DETAIL_LAYOUT_PREFIX } from './constants';
 import { Theme } from '@mui/material/styles';
+import { SplitPosition } from '@m4l/components';
 export interface ContainerProps {
     vertical: boolean;
 }
 export interface MasterDetailLayoutProps extends Omit<ModuleLayoutProps, 'children'> {
+    splitPosition?: SplitPosition;
     masterComponent: ((props?: any) => JSX.Element) | ReactNode;
     detailComponent: ((props?: any) => JSX.Element) | ReactNode;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/layouts",
-  "version": "9.2.1",
+  "version": "9.3.0",
   "license": "UNLICENSED",
   "author": "M4L Team ",
   "lint-staged": {

package/storybook/layouts/MasterDetailLayout/MasterDetailLayout.stories.d.ts

@@ -3,4 +3,5 @@ import { AreasAdmin, PaperForm } from '@m4l/components';
 declare const meta: Meta<typeof AreasAdmin>;
 type Story = StoryObj<typeof PaperForm>;
 export declare const Default: Story;
+export declare const SplitHorizontal: Story;
 export default meta;

package/storybook/layouts/MasterDetailLayout/subcomponents/RenderMasterDetailLayout.d.ts

@@ -1,6 +1,10 @@
+import { SplitPosition } from '@m4l/components';
+interface RenderMasterDetailLayoutProps {
+    splitPosition?: SplitPosition;
+}
 /**
  * Render para utilizar el componente ModuleLayout
  * en AreasViewer en el storybook
  */
-declare const RenderMasterDetailLayout: () => import("react/jsx-runtime").JSX.Element;
+declare const RenderMasterDetailLayout: (props: RenderMasterDetailLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export default RenderMasterDetailLayout;

package/contexts/AuthContext/index.d.ts

@@ -1,7 +0,0 @@
-import { AuthProviderProps, SessionContextType } from './types';
-declare const AuthContext: import('react').Context<SessionContextType | null>;
-/**
- * Proveedor de autenticación
- */
-declare function AuthProvider(props: AuthProviderProps): import("react/jsx-runtime").JSX.Element;
-export { AuthContext, AuthProvider };

package/contexts/AuthContext/index.js

@@ -1,142 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { createContext, useReducer, useEffect } from "react";
-import { useHostTools, useNetwork, useEnvironment, useLocalStorageWithListener, EmitEvents, getLocalStorage, setLocalStorage } from "@m4l/core";
-import { E as EnumTypes } from "./types.js";
-const initialState = {
-  isAuthenticated: false,
-  isInitialized: false,
-  user: null
-};
-const JWTReducer = (state, action) => {
-  switch (action.type) {
-    case "INITIALIZE":
-      return {
-        isAuthenticated: action.payload.isAuthenticated,
-        isInitialized: true,
-        user: action.payload.user
-      };
-    case "LOGIN":
-      return {
-        ...state,
-        isAuthenticated: true,
-        user: action.payload.user
-      };
-    case "LOGOUT":
-      return {
-        ...state,
-        isAuthenticated: false,
-        user: null
-      };
-    default:
-      return state;
-  }
-};
-const AuthContext = createContext(null);
-function dispatchInitial(dispatch) {
-  dispatch({
-    type: EnumTypes.Initial,
-    payload: {
-      isAuthenticated: false,
-      user: null
-    }
-  });
-}
-function AuthProvider(props) {
-  const { children } = props;
-  const [state, dispatch] = useReducer(JWTReducer, initialState);
-  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",
-    (/* @__PURE__ */ new Date()).getTime() + ""
-  );
-  useEffect(() => {
-    const initialize = async () => {
-      networkOperation({
-        method: "GET",
-        endPoint: `auth/login`,
-        parms: { user_data: true },
-        checkUnAuthorized: false
-      }).then((response) => {
-        dispatch({
-          type: EnumTypes.Initial,
-          payload: {
-            isAuthenticated: true,
-            user: response.user
-          }
-        });
-        const useSaved = getLocalStorage("userData", {
-          email: response.user.email,
-          remember: true
-        });
-        if (useSaved?.email !== response.user.email) {
-          setLocalStorage("userData", { email: response.user.email }, true);
-        }
-      }).catch(() => {
-        dispatchInitial(dispatch);
-      });
-    };
-    initialize();
-  }, [nextValSession]);
-  const login = async (email, password, remember) => {
-    await networkOperation({
-      endPoint: `auth/login`,
-      method: "POST",
-      data: {
-        email,
-        password,
-        domain_token
-      }
-    }).then((response) => {
-      const user = response.data;
-      if (remember) {
-        setLocalStorage("userData", { email, remember });
-      } else {
-        setLocalStorage("userData", { email: "", remember });
-      }
-      dispatch({
-        type: EnumTypes.Login,
-        payload: {
-          user
-        }
-      });
-      setNextValSession((/* @__PURE__ */ new Date()).getTime() + "");
-    });
-  };
-  const logout = async (isAuthenticated) => {
-    if (isAuthenticated) {
-      await networkOperation({
-        endPoint: `auth/logout`,
-        method: "POST"
-      });
-    }
-    dispatch({ type: EnumTypes.Logout });
-    setNextValSession((/* @__PURE__ */ new Date()).getTime() + "");
-  };
-  const onNetserviceUnautorized = () => {
-    logout(false);
-  };
-  useEffect(() => {
-    events_add_listener(
-      EmitEvents.EMMIT_EVENT_NET_SERVICE_UNAUTHORIZED,
-      onNetserviceUnautorized
-    );
-  }, []);
-  return /* @__PURE__ */ jsx(
-    AuthContext.Provider,
-    {
-      value: {
-        ...state,
-        login,
-        logout
-      },
-      children
-    }
-  );
-}
-export {
-  AuthContext as A,
-  AuthProvider as a
-};

package/contexts/AuthContext/types.d.ts

@@ -1,51 +0,0 @@
-import { DomainCountry, Maybe } from '@m4l/core';
-import { ReactNode } from 'react';
-export declare enum EnumTypes {
-    Initial = "INITIALIZE",
-    Login = "LOGIN",
-    Logout = "LOGOUT"
-}
-export type AuthProviderProps = {
-    children: ReactNode;
-};
-export type ActionMap<M extends {
-    [index: string]: any;
-}> = {
-    [Key in keyof M]: M[Key] extends undefined ? {
-        type: Key;
-    } : {
-        type: Key;
-        payload: M[Key];
-    };
-};
-export type SessionAuthPayload = {
-    [EnumTypes.Initial]: {
-        isAuthenticated: boolean;
-        user: AuthUser;
-    };
-    [EnumTypes.Login]: {
-        user: AuthUser;
-    };
-    [EnumTypes.Logout]: undefined;
-};
-export type SessionActions = ActionMap<SessionAuthPayload>[keyof ActionMap<SessionAuthPayload>];
-export interface User {
-    email: string;
-    id: number;
-    first_name: string;
-    last_name: string;
-    account_id: number;
-    domain_country: DomainCountry;
-    avatar_url?: Maybe<string>;
-    user_type_id?: number;
-}
-export type AuthUser = Maybe<User>;
-export type AuthState = {
-    isAuthenticated: boolean;
-    isInitialized: boolean;
-    user: AuthUser;
-};
-export interface SessionContextType extends AuthState {
-    login: (email: string, password: string, remember: boolean) => object | undefined;
-    logout: (isAuthenticated: boolean) => Promise<void>;
-}

package/contexts/AuthContext/types.js

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

package/contexts/index.d.ts

@@ -1 +0,0 @@
-export * from './AuthContext';

package/hooks/useAuth/index.d.ts

@@ -1,5 +0,0 @@
-/**
- * Hook para obtener el contexto de autenticación
- */
-export declare const useAuth: () => import('../../contexts/AuthContext/types').SessionContextType;
-export default useAuth;

package/hooks/useAuth/index.js

@@ -1,12 +0,0 @@
-import { useContext } from "react";
-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");
-  }
-  return context;
-};
-export {
-  useAuth as u
-};