@m4l/layouts 9.3.5-B08072025beta.3 → 9.3.5-B09072025beta.1

package/components/ModuleDetailTabs/ModuleDetailTabs.js

@@ -30,7 +30,7 @@ function ModuleDetailTabs(props) {
         TabContent,
         {
           style: { display: isMatched ? "flex" : "none" },
-          hasBackground: true,
+          background: !!tab.background,
           children: /* @__PURE__ */ jsx(tab.tabContent, { data: detailData, endPointData, hasPrivilegeDetail, ...tab.componentProps })
         },
         tab.value

package/hooks/useDynamicAccordions/index.d.ts

@@ -1,2 +1,2 @@
 export * from './useDynamicAccordions';
-export type { useDynamicAccordionsProps, ConfigDynamicAccordion as DynamicAccordion, DynamicAccordionValue } from './types';
+export type { useDynamicAccordionsProps, ConfigDynamicAccordion as DynamicAccordion, DynamicAccordionValue, GroupConfigDynamicAccordion as DynamicAccordionGroup } from './types';

package/hooks/useDynamicAccordions/types.d.ts

@@ -1,4 +1,4 @@
-import { AccordionProps, PropertyValueProps } from '@m4l/components';
+import { AccordionProps, ContainerFlowProps, PropertyValueProps } from '@m4l/components';
 import { ModuleDetailTabContent } from '../../components/ModuleDetailTabs';
 export type DynamicAccordionValue<T extends any = any, K extends any = any> = (data: T, endPointData?: K) => string | React.ReactNode;
 export interface DynamicAccordionProperty<T extends any = any, K extends any = any> extends Omit<PropertyValueProps, 'value' | 'property'> {
@@ -19,6 +19,16 @@ export interface DynamicAccordionProperty<T extends any = any, K extends any = a
      */
     isForm?: boolean;
 }
+export interface GroupConfigDynamicAccordion<T extends any = any, K extends any = any> {
+    /**
+     * "icon": Icono de la propiedad
+     */
+    minWidth?: ContainerFlowProps['minWidth'];
+    /**
+     * "children": Propiedades que se ven en el accordion
+     */
+    children: ConfigDynamicAccordion<T, K>[];
+}
 export interface ConfigDynamicAccordion<T extends any = any, K extends any = any> {
     /**
      * "icon": Icono de la propiedad
@@ -36,8 +46,12 @@ export interface ConfigDynamicAccordion<T extends any = any, K extends any = any
      * "properties": Propiedades que se ven en el accordion
      */
     properties: DynamicAccordionProperty<T, K>[];
+    /**
+     * "minWidth": Ancho mínimo del accordion
+     */
+    minWidth?: ContainerFlowProps['minWidth'];
 }
 export interface useDynamicAccordionsProps<T extends any = any, K extends any = any> {
-    configDynamicAccordions: ConfigDynamicAccordion<T, K>[];
+    configDynamicAccordions: ConfigDynamicAccordion<T, K>[] | GroupConfigDynamicAccordion<T, K>[];
 }
 export type useBaseDynamicAccordionsProps<T extends any = any, K extends any = any> = useDynamicAccordionsProps<T, K> & ModuleDetailTabContent;

package/hooks/useDynamicAccordions/useBaseAccordions.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo, createElement } from "react";
-import { Accordion, Stack, PropertyValue } from "@m4l/components";
+import { ContainerFlow, Accordion, PropertyValue, Stack } from "@m4l/components";
 import { useModuleDictionary } from "@m4l/core";
 function useBaseAccordions(props) {
   const { data, endPointData, configDynamicAccordions: accordions } = props;
@@ -9,16 +9,52 @@ function useBaseAccordions(props) {
     if (!data) {
       return null;
     }
-    return accordions.map((accordion) => {
+    return accordions.map((accordion, index) => {
+      if ("children" in accordion && accordion.children && accordion.children.length > 0) {
+        return /* @__PURE__ */ jsx(
+          ContainerFlow,
+          {
+            variant: "column-flex",
+            minWidth: accordion.minWidth,
+            gap: "compact",
+            children: accordion.children.map((child) => /* @__PURE__ */ jsx(
+              Accordion,
+              {
+                icon: child.icon,
+                label: getLabel(child.dictionaryId),
+                accordionProps: {
+                  ...child.accordionProps
+                },
+                children: /* @__PURE__ */ jsx(ContainerFlow, { variant: "column-flex", minWidth: 150, gap: "standard", children: child.properties.map((property) => {
+                  const value = property.getValue(data, endPointData);
+                  return /* @__PURE__ */ createElement(
+                    PropertyValue,
+                    {
+                      ...property,
+                      key: property.dictionaryId,
+                      property: getLabel(property.dictionaryId),
+                      value,
+                      isForm: property.isForm ?? true
+                    }
+                  );
+                }) })
+              },
+              child.dictionaryId
+            ))
+          },
+          `group-${index}`
+        );
+      }
+      const configAccordion = accordion;
       return /* @__PURE__ */ jsx(
         Accordion,
         {
-          icon: accordion.icon,
-          label: getLabel(accordion.dictionaryId),
+          icon: configAccordion.icon,
+          label: getLabel(configAccordion.dictionaryId),
           accordionProps: {
-            ...accordion.accordionProps
+            ...configAccordion.accordionProps
           },
-          children: /* @__PURE__ */ jsx(Stack, { direction: "column", children: accordion.properties.map((property) => {
+          children: /* @__PURE__ */ jsx(Stack, { direction: "column", children: configAccordion.properties.map((property) => {
             const value = property.getValue(data, endPointData);
             return /* @__PURE__ */ createElement(
               PropertyValue,
@@ -31,7 +67,7 @@ function useBaseAccordions(props) {
             );
           }) })
         },
-        accordion.dictionaryId
+        configAccordion.dictionaryId
       );
     });
   }, [accordions, data, endPointData, getLabel]);

package/hooks/useDynamicAccordions/useDynamicAccordions.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Stack } from "@m4l/components";
+import { ContainerFlow, Stack } from "@m4l/components";
 import { u as useBaseAccordions } from "./useBaseAccordions.js";
 function useDynamicAccordions(props) {
   const { configDynamicAccordions } = props;
@@ -10,7 +10,11 @@ function useDynamicAccordions(props) {
       endPointData,
       configDynamicAccordions
     });
-    return /* @__PURE__ */ jsx(Stack, { direction: "column", gap: "8px", style: { height: "auto" }, children: accordionsComponents });
+    const hasChildrens = configDynamicAccordions.some((accordion) => "children" in accordion && accordion.children && accordion.children.length > 0);
+    if (hasChildrens) {
+      return /* @__PURE__ */ jsx(ContainerFlow, { variant: "column-flex", minWidth: 370, gap: "compact", children: accordionsComponents });
+    }
+    return /* @__PURE__ */ jsx(Stack, { direction: "column", gap: "16px", style: { height: "auto" }, children: accordionsComponents });
   };
 }
 export {

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@m4l/layouts",
-  "version": "9.3.5-B08072025beta.3",
+  "version": "9.3.5-B09072025beta.1",
   "license": "UNLICENSED",
-  "author": "M4L Team",
+  "author": "M4L Team ",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
   },
   "peerDependencies": {
-    "@m4l/components": "9.2.62-B08072025beta.3",
+    "@m4l/components": "9.2.62-B09072025beta.1",
     "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "7.1.2-B08072025beta.3",
-    "@m4l/styles": "7.1.30-B08072025beta.3"
+    "@m4l/graphics": "^7.0.0",
+    "@m4l/styles": "^7.0.0"
   },
   "resolutions": {
     "glob": "^10.4.5",