@m4l/layouts 9.3.5 → 9.3.7-B17072025-beta.1

package/components/ModuleDetailTabs/ModuleDetailTabs.js

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

package/hooks/useDynamicAccordions/helpers/normalizeDynamicAccordions/normalizeDynamicAccordions.d.ts

@@ -0,0 +1,8 @@
+import { GroupConfigDynamicAccordion } from '../../types';
+import { NormalizeDynamicAccordionsProps } from './types';
+/**
+ * Garantiza la agrupación de accordiones.
+ * @param props - Las propiedades de los accordions
+ * @returns Las propiedades de los accordions normalizadas
+ */
+export declare const normalizeDynamicAccordions: (props: NormalizeDynamicAccordionsProps) => GroupConfigDynamicAccordion<any, any>[];

package/hooks/useDynamicAccordions/helpers/normalizeDynamicAccordions/normalizeDynamicAccordions.js

@@ -0,0 +1,18 @@
+const normalizeDynamicAccordions = (props) => {
+  const { configDynamicAccordions } = props;
+  const isGroup = (item) => Array.isArray(item.children);
+  const hasChildren = configDynamicAccordions.some(isGroup);
+  if (hasChildren) {
+    return configDynamicAccordions;
+  }
+  const configDynamicAccordionsNormalized = configDynamicAccordions.map((accordion) => {
+    return {
+      minWidth: void 0,
+      children: [accordion]
+    };
+  });
+  return configDynamicAccordionsNormalized;
+};
+export {
+  normalizeDynamicAccordions as n
+};

package/hooks/useDynamicAccordions/helpers/normalizeDynamicAccordions/normalizeDynamicAccordions.test.d.ts

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

package/hooks/useDynamicAccordions/helpers/normalizeDynamicAccordions/types.d.ts

@@ -0,0 +1,4 @@
+import { useDynamicAccordionsProps } from '../../types';
+export interface NormalizeDynamicAccordionsProps {
+    configDynamicAccordions: useDynamicAccordionsProps['configDynamicAccordions'];
+}

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,14 @@ 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 interface useBaseDynamicAccordionsProps<T extends any = any, K extends any = any> extends ModuleDetailTabContent {
+    configDynamicAccordions: 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 } from "@m4l/components";
 import { useModuleDictionary } from "@m4l/core";
 function useBaseAccordions(props) {
   const { data, endPointData, configDynamicAccordions: accordions } = props;
@@ -9,29 +9,39 @@ function useBaseAccordions(props) {
     if (!data) {
       return null;
     }
-    return accordions.map((accordion) => {
+    return accordions.map((accordion, index) => {
       return /* @__PURE__ */ jsx(
-        Accordion,
+        ContainerFlow,
         {
-          icon: accordion.icon,
-          label: getLabel(accordion.dictionaryId),
-          accordionProps: {
-            ...accordion.accordionProps
-          },
-          children: /* @__PURE__ */ jsx(Stack, { direction: "column", children: accordion.properties.map((property) => {
-            const value = property.getValue(data, endPointData);
-            return /* @__PURE__ */ createElement(
-              PropertyValue,
-              {
-                ...property,
-                key: property.dictionaryId,
-                property: getLabel(property.dictionaryId),
-                value
-              }
-            );
-          }) })
+          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
+          ))
         },
-        accordion.dictionaryId
+        `group-${index}`
       );
     });
   }, [accordions, data, endPointData, getLabel]);

package/hooks/useDynamicAccordions/useDynamicAccordions.js

@@ -1,16 +1,18 @@
 import { jsx } from "react/jsx-runtime";
-import { Stack } from "@m4l/components";
+import { ContainerFlow } from "@m4l/components";
 import { u as useBaseAccordions } from "./useBaseAccordions.js";
+import { n as normalizeDynamicAccordions } from "./helpers/normalizeDynamicAccordions/normalizeDynamicAccordions.js";
 function useDynamicAccordions(props) {
   const { configDynamicAccordions } = props;
   return function General(propsGeneral) {
     const { data, endPointData } = propsGeneral;
+    const configDynamicAccordionsNormalized = normalizeDynamicAccordions({ configDynamicAccordions });
     const accordionsComponents = useBaseAccordions({
       data,
       endPointData,
-      configDynamicAccordions
+      configDynamicAccordions: configDynamicAccordionsNormalized
     });
-    return /* @__PURE__ */ jsx(Stack, { direction: "column", gap: "8px", style: { height: "auto" }, children: accordionsComponents });
+    return /* @__PURE__ */ jsx(ContainerFlow, { variant: "column-flex", minWidth: 370, gap: "compact", children: accordionsComponents });
   };
 }
 export {

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@m4l/layouts",
-  "version": "9.3.5",
+  "version": "9.3.7-B17072025-beta.1",
   "license": "UNLICENSED",
-  "author": "M4L Team ",
+  "author": "M4L Team",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
   },