@m4l/layouts 9.2.2 → 9.3.0-beta.1

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

@@ -3,3 +3,4 @@ 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/index.js

@@ -0,0 +1 @@
+

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.js

@@ -14,6 +14,7 @@ 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 {
   D as DynamicTabs,
@@ -33,6 +34,7 @@ export {
   g3 as getNoAuthModuleLayoutComponentsDictionary,
   u3 as useDynamicAccordions,
   u4 as useDynamicPaperForm,
+  u6 as useFormAddEdit,
   u as useMasterDetail,
   u2 as useModule,
   u5 as useNetworkActionConfirm

package/layouts/MasterDetailLayout/MasterDetailLayout.js

@@ -17,6 +17,7 @@ function MasterDetailLayout(props) {
     detailComponent,
     moduleActions,
     version,
+    buildTime,
     splitPosition
   } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -28,39 +29,41 @@ function MasterDetailLayout(props) {
     setSplitPositionState(newPostion);
   }, []);
   const splitActions = useMemo(
-    () => [
-      {
-        iconUrl: `${host_static_assets}/${environment_assets}/${icons.splitVertical}`,
-        onClick: () => onChangePostionInternal("vertical"),
-        visibility: "main",
-        label: getLabel(dictionary.LABEL_SPLIT_VERTICAL),
-        tag: "vertical",
-        className: "splitactions",
-        disabled: splitPositionState === "vertical",
-        key: "vertical"
-      },
-      {
-        iconUrl: `${host_static_assets}/${environment_assets}/${icons.splitHorizontal}`,
-        onClick: () => onChangePostionInternal("horizontal"),
-        visibility: "main",
-        label: getLabel(dictionary.LABEL_SPLIT_HORIZONTAL),
-        tag: "horizontal",
-        className: "splitactions",
-        disabled: splitPositionState === "horizontal",
-        key: "horizontal"
-      },
-      {
-        iconUrl: `${host_static_assets}/${environment_assets}/${icons.noSplit}`,
-        onClick: () => onChangePostionInternal("none"),
-        visibility: "main",
-        label: getLabel(dictionary.LABEL_NO_SPLIT),
-        tag: "none",
-        className: "splitactions",
-        disabled: splitPositionState === "none",
-        key: "none"
+    () => {
+      if (isMobile) {
+        return [];
       }
-    ],
-    [getLabel, splitPositionState, environment_assets, host_static_assets, onChangePostionInternal]
+      return [
+        {
+          iconUrl: `${host_static_assets}/${environment_assets}/${icons.splitVertical}`,
+          onClick: () => onChangePostionInternal("vertical"),
+          label: getLabel(dictionary.LABEL_SPLIT_VERTICAL),
+          className: "splitactions",
+          checkable: true,
+          checked: splitPositionState === "vertical",
+          key: "vertical"
+        },
+        {
+          iconUrl: `${host_static_assets}/${environment_assets}/${icons.splitHorizontal}`,
+          onClick: () => onChangePostionInternal("horizontal"),
+          label: getLabel(dictionary.LABEL_SPLIT_HORIZONTAL),
+          className: "splitactions",
+          checkable: true,
+          checked: splitPositionState === "horizontal",
+          key: "horizontal"
+        },
+        {
+          iconUrl: `${host_static_assets}/${environment_assets}/${icons.noSplit}`,
+          onClick: () => onChangePostionInternal("none"),
+          label: getLabel(dictionary.LABEL_NO_SPLIT),
+          className: "splitactions",
+          checkable: true,
+          checked: splitPositionState === "none",
+          key: "none"
+        }
+      ];
+    },
+    [isMobile, host_static_assets, environment_assets, getLabel, splitPositionState, onChangePostionInternal]
   );
   const onClickViewDetail = useCallback(() => {
     moduleLayoutRef.current?.openModal({
@@ -80,11 +83,12 @@ function MasterDetailLayout(props) {
   }, [detailComponent, getLabel]);
   const finalModuleActions = useMemo(() => {
     const actions = getTotalModuleActions(
+      splitPositionState,
       splitActions,
       moduleActions
     );
     return actions;
-  }, [splitActions, moduleActions]);
+  }, [splitActions, moduleActions, splitPositionState]);
   const classRoot = getComponentSlotRoot(MASTER_DETAIL_LAYOUT_PREFIX);
   return /* @__PURE__ */ jsx(MasterDetailProvider, { onClickViewDetail, children: /* @__PURE__ */ jsx(MasterDetailLayoutRootStyled, { className: classRoot, children: /* @__PURE__ */ jsx(
     ModuleLayout,
@@ -93,6 +97,7 @@ function MasterDetailLayout(props) {
       moduleId,
       moduleActions: finalModuleActions,
       version,
+      buildTime,
       children: /* @__PURE__ */ jsx(
         SplitLayout,
         {

package/layouts/MasterDetailLayout/helpers/getTotalModuleActions.d.ts

@@ -1,5 +1,5 @@
-import { ModuleAction } from '@m4l/components';
+import { ModuleAction, GroupActionMenuItem } from '@m4l/components';
 /**
  * Obtiene las acciones totales del modulo
  */
-export declare function getTotalModuleActions(splitActions: ModuleAction[], moduleActions?: ModuleAction[]): ModuleAction[];
+export declare function getTotalModuleActions(selectedActionKey: string, splitActions: GroupActionMenuItem[], moduleActions?: ModuleAction[]): ModuleAction[];

package/layouts/MasterDetailLayout/helpers/getTotalModuleActions.js

@@ -1,6 +1,13 @@
-function getTotalModuleActions(splitActions, moduleActions = []) {
-  let totalActions = [...splitActions];
-  totalActions = moduleActions.concat(totalActions);
+function getTotalModuleActions(selectedActionKey, splitActions, moduleActions = []) {
+  let totalActions = [];
+  const groupAction = {
+    type: "groupActions",
+    actions: splitActions,
+    key: "splitActions",
+    selectedActionKey,
+    visibility: "main"
+  };
+  totalActions = moduleActions.concat(groupAction);
   return totalActions;
 }
 export {

package/layouts/ModuleLayout/ModuleLayout.js

@@ -4,7 +4,7 @@ import { forwardRef, useRef, useImperativeHandle } from "react";
 import { B as BaseModuleLayout } from "./subcomponents/BaseModuleLayout/index.js";
 import { a as ModuleProvider } from "./contexts/ModuleContext/index.js";
 const ModuleLayout = forwardRef((props, ref) => {
-  const { moduleId, moduleActions, version, children } = props;
+  const { moduleId, moduleActions, version, children, buildTime } = props;
   const moduleRef = useRef(null);
   const closeModal = () => {
     moduleRef.current?.closeModal();
@@ -17,7 +17,16 @@ const ModuleLayout = forwardRef((props, ref) => {
     closeModal,
     current: moduleRef.current
   }));
-  return /* @__PURE__ */ jsx(ModuleProvider, { moduleId, moduleActions, version, children: /* @__PURE__ */ jsx(ModalProvider, { children: /* @__PURE__ */ jsx(BaseModuleLayout, { ref: moduleRef, children }) }) });
+  return /* @__PURE__ */ jsx(
+    ModuleProvider,
+    {
+      moduleId,
+      moduleActions,
+      version,
+      buildTime,
+      children: /* @__PURE__ */ jsx(ModalProvider, { children: /* @__PURE__ */ jsx(BaseModuleLayout, { ref: moduleRef, children }) })
+    }
+  );
 });
 export {
   ModuleLayout as M

package/layouts/ModuleLayout/contexts/ModuleContext/index.js

@@ -4,7 +4,7 @@ import { createContext, useRef, useEffect } from "react";
 import { c as createModuleLayoutStore } from "./store.js";
 const ModuleContext = createContext(null);
 function ModuleProvider(props) {
-  const { children, moduleActions, moduleId, version } = props;
+  const { children, moduleActions, moduleId, version, buildTime } = props;
   const { setActions } = useWindowToolsMF();
   const moduleLayoutStoreRef = useRef();
   useEffect(() => {
@@ -17,6 +17,7 @@ function ModuleProvider(props) {
       moduleActions,
       moduleId,
       version,
+      buildTime,
       setActions
     });
     moduleLayoutStoreRef.current.getState().init();

package/layouts/ModuleLayout/contexts/ModuleContext/store.js

@@ -10,7 +10,7 @@ const createDevtools = (immerMiddlewere, config) => {
   return immerMiddlewere;
 };
 const createModuleLayoutStore = (initProps, storeDevtoolsEnabled = false) => {
-  const { moduleActions, moduleId, version, setActions } = initProps;
+  const { moduleActions, moduleId, version, setActions, buildTime } = initProps;
   const startProps = {
     configOptions: {
       moduleId
@@ -18,7 +18,8 @@ const createModuleLayoutStore = (initProps, storeDevtoolsEnabled = false) => {
     dynamicActions: [],
     finalModuleActions: [],
     moduleActions: [],
-    version
+    version,
+    buildTime
   };
   return create(
     createDevtools(
@@ -40,7 +41,7 @@ const createModuleLayoutStore = (initProps, storeDevtoolsEnabled = false) => {
             const actionsConcatenated = (moduleActions || []).concat(dynamicActions);
             state.dynamicActions = dynamicActions;
             state.finalModuleActions = actionsConcatenated;
-            setActions(actionsConcatenated, state.version);
+            setActions(actionsConcatenated, state.version, state.buildTime);
           });
         },
         /**
@@ -51,7 +52,7 @@ const createModuleLayoutStore = (initProps, storeDevtoolsEnabled = false) => {
             const actionsConcatenated = newModuleActions.concat(state.dynamicActions);
             state.moduleActions = moduleActions;
             state.finalModuleActions = actionsConcatenated;
-            setActions(actionsConcatenated, state.version);
+            setActions(actionsConcatenated, state.version, state.buildTime);
           });
         }
       })),

package/layouts/ModuleLayout/contexts/ModuleContext/types.d.ts

@@ -5,7 +5,9 @@ export interface ModuleLayoutContextStateProps {
 }
 export interface ModuleLayoutProviderProps extends Omit<ModuleLayoutContextStateProps, 'init'> {
     children: ReactNode;
-    version: string;
+    /**
+     *  "moduleActions" acciones del módulo
+     */
     moduleActions?: ModuleAction[];
     /**
      *  "storeId" identificador del store
@@ -15,6 +17,14 @@ export interface ModuleLayoutProviderProps extends Omit<ModuleLayoutContextState
      *  "storeDevtoolsEnabled" determina si se debe usar devtools para el store
      */
     storeDevtoolsEnabled?: boolean;
+    /**
+     *  "version" versión del módulo
+     */
+    version: string;
+    /**
+     *  "buildTime" fecha de compilación del módulo
+     */
+    buildTime?: string;
 }
 export interface ModuleLayoutContextProps extends ModuleLayoutContextStateProps {
     setDynamicActions: (dynamicActions: ModuleAction[]) => void;
@@ -40,6 +50,10 @@ export interface ModuleLayoutState extends Pick<ModuleLayoutProviderProps, 'stor
      * "version" Versión del módulo
      */
     version: string;
+    /**
+     * "buildTime" fecha de compilación del módulo
+     */
+    buildTime?: string;
 }
 export interface ModuleLayoutStateWithActions extends ModuleLayoutState {
     /**
@@ -55,4 +69,4 @@ export interface ModuleLayoutStateWithActions extends ModuleLayoutState {
      */
     updateModuleActions: (moduleActions: ModuleAction[]) => void;
 }
-export type InitialModuleLayoutStoreProps = Pick<ModuleLayoutState, 'moduleActions' | 'version' | 'storeId'> & Pick<WindowToolsMF, 'setActions'> & ModuleLayoutContextStateProps;
+export type InitialModuleLayoutStoreProps = Pick<ModuleLayoutState, 'moduleActions' | 'version' | 'storeId' | 'buildTime'> & Pick<WindowToolsMF, 'setActions'> & ModuleLayoutContextStateProps;

package/layouts/ModuleLayout/types.d.ts

@@ -18,6 +18,7 @@ export interface ModuleLayoutProps {
     moduleActions?: ModuleAction[];
     children: ReactNode;
     version: string;
+    buildTime?: string;
 }
 export type ModuleLayoutSlotsType = keyof typeof ModuleLayoutSlots;
 export type ModuleLayoutStyles = OverridesStyleRules<ModuleLayoutSlotsType, typeof MODULE_LAYOUT_KEY, Theme>;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@m4l/layouts",
-  "version": "9.2.2",
+  "version": "9.3.0-beta.1",
   "license": "UNLICENSED",
   "author": "M4L Team ",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
   },
   "peerDependencies": {
-    "@m4l/components": "^9.0.0",
+    "@m4l/components": "9.2.54-beta.2",
     "@m4l/core": "^2.0.0",
     "@m4l/graphics": "^7.0.0",
     "@m4l/styles": "^7.0.0"