@m4l/components 9.4.13 → 9.4.15-BE20260120

package/components/datagrids/helpers/shared/getInitialColumnsConfig/getInitialColumnsConfig.js

@@ -13,6 +13,7 @@ const getInitialColumnsConfig = (id, columns, viewMode, defaultConfig, viewSpeci
   return columns.map((column, index) => {
     const existingConfig = columnsConfig.find((c) => c.key === column.key);
     const columnConfigIndex = existingConfig ? columnsConfig.indexOf(existingConfig) : -1;
+    const groupedColumnsCount = columns.slice(0, index).filter((c) => c.grouped === true).length;
     const baseConfig = {
       key: column.key,
       name: typeof column.name === "string" ? column.name : String(column.name),
@@ -22,10 +23,17 @@ const getInitialColumnsConfig = (id, columns, viewMode, defaultConfig, viewSpeci
       originalIndex: index,
       originalVisible: column.visible === void 0 ? true : column.visible
     };
+    const groupingConfig = viewMode === "table" ? {
+      grouped: existingConfig?.grouped ?? column.grouped ?? false,
+      groupOrder: existingConfig?.groupOrder ?? (column.grouped ? groupedColumnsCount : index),
+      originalGrouped: column.grouped ?? false,
+      originalGroupOrder: column.grouped ? groupedColumnsCount : index
+    } : {};
     return {
       ...baseConfig,
       ...viewSpecificDefaults,
       ...originalViewSpecificDefaults,
+      ...groupingConfig,
       ...existingConfig || {}
     };
   }).sort((a, b) => a.index - b.index);

package/components/datagrids/helpers/shared/getViewSpecificConfig/getViewSpecificConfig.js

@@ -1,10 +1,17 @@
 const getViewSpecificConfig = (viewMode) => {
   const configs = {
     table: {
-      defaults: { frozen: false },
-      originalDefaults: { originalFrozen: false },
+      defaults: { frozen: false, grouped: false, groupOrder: 0 },
+      originalDefaults: { originalFrozen: false, originalGrouped: false, originalGroupOrder: 0 },
+      /**
+       * Extrae las propiedades originales de frozen, grouped y groupOrder de un item.
+       * @param item - Item del cual extraer las propiedades
+       * @returns Objeto con las propiedades originales
+       */
       dynamicOriginalProperty: (item) => ({
-        originalFrozen: item?.frozen ?? false
+        originalFrozen: item?.frozen ?? false,
+        originalGrouped: item?.grouped ?? false,
+        originalGroupOrder: item?.groupOrder ?? 0
       })
     },
     cards: {

package/components/datagrids/hooks/useChangeColumnsOrder/useChangeColumnsOrder.d.ts

@@ -3,6 +3,7 @@ import { UseChangeColumnsOrderParams, UseChangeColumnsOrderReturn } from './type
  * Hook para manejar el cambio de orden de columnas.
  *
  * Reordena las columnas y llama a onChangeColumnsConfig para persistir.
+ * También recalcula groupOrder si las columnas están agrupadas.
  * @param getConfigColumns Función para obtener la configuración de columnas
  * @param onChangeColumnsConfig Función para cambiar la configuración de columnas
  * @returns Función para cambiar el orden de columnas

package/components/datagrids/hooks/useChangeColumnsOrder/useChangeColumnsOrder.js

@@ -21,10 +21,18 @@ const useChangeColumnsOrder = ({
         0,
         reorderedConfig.splice(sourceColumnIndex, 1)[0]
       );
-      const configWithUpdatedIndexes = reorderedConfig.map((col, idx) => ({
-        ...col,
-        index: idx
-      }));
+      let groupOrderCounter = 0;
+      const configWithUpdatedIndexes = reorderedConfig.map((col, idx) => {
+        const updatedCol = {
+          ...col,
+          index: idx
+        };
+        if (col.grouped) {
+          updatedCol.groupOrder = groupOrderCounter;
+          groupOrderCounter++;
+        }
+        return updatedCol;
+      });
       onChangeColumnsConfig(viewModeParam, configWithUpdatedIndexes);
     },
     [getConfigColumns, onChangeColumnsConfig]

package/components/datagrids/icons.d.ts

@@ -20,6 +20,7 @@ export declare const pathIcons: {
     freezeColumn: string;
     unfreezeColumn: string;
     hideColumn: string;
+    groupColumn: string;
     viewTable: string;
     viewCards: string;
     info: string;
@@ -28,4 +29,8 @@ export declare const pathIcons: {
     smartphone: string;
     internet: string;
     edit: string;
+    group: string;
+    removeGroup: string;
+    groupUp: string;
+    groupDown: string;
 };

package/components/datagrids/icons.js

@@ -1,10 +1,6 @@
 const pathIcons = {
-  compact: "frontend/components/data_grid/assets/icons/compact.svg",
-  standard: "frontend/components/data_grid/assets/icons/standard.svg",
-  confortable: "frontend/components/data_grid/assets/icons/confortable.svg",
   filter: "frontend/components/data_grid/assets/icons/list-filter.svg",
   configuration: "frontend/components/data_grid/assets/icons/settings.svg",
-  menu: "frontend/components/data_grid/assets/icons/menu.svg",
   moveFirstPlace: "frontend/components/data_grid/assets/icons/move_first_place.svg",
   moveUpPlace: "frontend/components/data_grid/assets/icons/move_up_place.svg",
   moveLastPlace: "frontend/components/data_grid/assets/icons/move_last_place.svg",
@@ -20,11 +16,11 @@ const pathIcons = {
   freezeColumn: "frontend/components/data_grid/assets/icons/pin.svg",
   unfreezeColumn: "frontend/components/data_grid/assets/icons/pin-off.svg",
   hideColumn: "frontend/components/data_grid/assets/icons/eye-off.svg",
-  viewTable: "frontend/components/data_grid/assets/icons/table.svg",
-  viewCards: "frontend/components/data_grid/assets/icons/card.svg",
   info: "frontend/components/data_grid/assets/icons/info.svg",
-  expanded: "frontend/components/data_grid/assets/icons/expanded.svg",
-  edit: "frontend/components/EditLabel/assets/icons/pencil.svg"
+  group: "frontend/components/data_grid/assets/icons/group.svg",
+  removeGroup: "frontend/components/data_grid/assets/icons/remove_group.svg",
+  groupUp: "frontend/components/data_grid/assets/icons/group_up.svg",
+  groupDown: "frontend/components/data_grid/assets/icons/group_down.svg"
 };
 export {
   pathIcons as p

package/components/datagrids/index.d.ts

@@ -1,7 +1,8 @@
 export { DataGrid } from './components/DataGridMain';
+export { TreeDataGrid } from './components/TreeDataGrid';
 export * from './formatters';
 export type { Column, RenderEditCellProps, RenderCellProps, } from 'react-data-grid';
-export type { RowKey, ChangeConfig, ChangeUserColumn, RowActionsGetter, RowKeyGetter, } from './types';
+export type { RowKey, ChangeConfig, ChangeUserColumn, RowActionsGetter, RowKeyGetter, TreeProps, TreeDataGridProps, } from './types';
 export type { IGridConfigExtended, BaseConfigColumn, } from './contexts/DataGridContext/types';
 export type { IGridConfig } from './helpers/persistence/getColumnsWidth/types';
 export { getDataGridComponentsDictionary } from './dictionary';

package/components/datagrids/slots/DataGridEnum.d.ts

@@ -53,7 +53,9 @@ export declare enum TableSlots {
     editorCellWrapper = "editorCellWrapper",
     editablePlaceholder = "editablePlaceholder",
     editLabel = "editLabel",
-    iconButtonEdit = "iconButtonEdit"
+    iconButtonEdit = "iconButtonEdit",
+    defaultRenderGroupCellRoot = "defaultRenderGroupCellRoot",
+    defaultRenderGroupCellText = "defaultRenderGroupCellText"
 }
 export declare enum TextEditorSlots {
     inputTexEditor = "inputTexEditor"

package/components/datagrids/slots/DataGridEnum.js

@@ -57,6 +57,8 @@ var TableSlots = /* @__PURE__ */ ((TableSlots2) => {
   TableSlots2["editablePlaceholder"] = "editablePlaceholder";
   TableSlots2["editLabel"] = "editLabel";
   TableSlots2["iconButtonEdit"] = "iconButtonEdit";
+  TableSlots2["defaultRenderGroupCellRoot"] = "defaultRenderGroupCellRoot";
+  TableSlots2["defaultRenderGroupCellText"] = "defaultRenderGroupCellText";
   return TableSlots2;
 })(TableSlots || {});
 var TextEditorSlots = /* @__PURE__ */ ((TextEditorSlots2) => {

package/components/datagrids/slots/DataGridSlot.d.ts

@@ -97,3 +97,5 @@ export declare const ControlNavigateStyled: import('@emotion/styled').StyledComp
  * ****************
  */
 export declare const ColumnIconFormatterStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const DefaultRenderGroupCellRootStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
+export declare const DefaultRenderGroupCellTextStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;

package/components/datagrids/slots/DataGridSlot.js

@@ -1,7 +1,7 @@
 import { styled } from "@mui/material/styles";
 import { MenuList, InputBase } from "@mui/material";
 import { D as DATAGRID_PREFIX_NAME } from "../constants.js";
-import { D as DataGridSlots, T as TextEditorSlots, A as ActionsSlots, C as ControlNavigateSlots, b as TableSlots, R as RowsCountSlots, a as ColumnsConfigSlots, c as ColumnIconFormatterSlots } from "./DataGridEnum.js";
+import { T as TextEditorSlots, D as DataGridSlots, b as TableSlots, A as ActionsSlots, C as ControlNavigateSlots, R as RowsCountSlots, a as ColumnsConfigSlots, c as ColumnIconFormatterSlots } from "./DataGridEnum.js";
 import { d as dataGridStyles } from "../Datagrid.styles.js";
 import { I as Icon } from "../../Icon/Icon.js";
 import { C as Card } from "../../Card/Card.js";
@@ -231,6 +231,14 @@ styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: ColumnIconFormatterSlots.columnIconFormatter
 })(dataGridStyles.columnIconFormatter);
+const DefaultRenderGroupCellRootStyled = styled("span", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.defaultRenderGroupCellRoot
+})(dataGridStyles.defaultRenderGroupCellRoot);
+const DefaultRenderGroupCellTextStyled = styled("span", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.defaultRenderGroupCellText
+})(dataGridStyles.defaultRenderGroupCellText);
 export {
   ActionsRootStyled as A,
   TableContainerStyled as B,
@@ -250,10 +258,12 @@ export {
   MenuListStyled as P,
   HeaderRenderClickStyled as Q,
   RowsCountRootStyled as R,
-  CheckboxCellWrapperStyled as S,
+  DefaultRenderGroupCellRootStyled as S,
   TextToggleCardButtonStyled as T,
+  DefaultRenderGroupCellTextStyled as U,
   ValueColumnStyled as V,
   WrapperSkeletonStyled as W,
+  CheckboxCellWrapperStyled as X,
   ControlNavigateStyled as a,
   RowsCountLabelStyled as b,
   RowsCountValueStyled as c,

package/components/datagrids/subcomponents/HeaderActions/subcomponents/Density/Density.js

@@ -1,12 +1,11 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { useModuleDictionary } from "@m4l/core";
 import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
-import { p as pathIcons } from "../../../../icons.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
+import { LayoutDensityCompactOutlined, LayoutDensityStandardOutlined, LayoutDensityConfortableOutlined } from "@m4l/icons";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function Density() {
-  const { host_static_assets, environment_assets } = useEnvironment();
   const { rowHeights, currentRowHeightVariant, setRowHeightVariant } = useDataGrid();
   const { getLabel } = useModuleDictionary();
   const menuActions = useMemo(() => {
@@ -16,21 +15,21 @@ function Density() {
     return [
       {
         type: "menuItem",
-        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.compact}`,
+        startIcon: /* @__PURE__ */ jsx(LayoutDensityCompactOutlined, {}),
         onClick: () => setRowHeightVariant("compact"),
         disabled: currentRowHeightVariant === "compact",
         label: getLabel(DICTIONARY.DENSITY_COMPACT)
       },
       {
         type: "menuItem",
-        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.standard}`,
+        startIcon: /* @__PURE__ */ jsx(LayoutDensityStandardOutlined, {}),
         onClick: () => setRowHeightVariant("standard"),
         disabled: currentRowHeightVariant === "standard",
         label: getLabel(DICTIONARY.DENSITY_STANDARD)
       },
       {
         type: "menuItem",
-        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.confortable}`,
+        startIcon: /* @__PURE__ */ jsx(LayoutDensityConfortableOutlined, {}),
         onClick: () => setRowHeightVariant("confortable"),
         disabled: currentRowHeightVariant === "confortable",
         label: getLabel(DICTIONARY.DENSITY_CONFORTABLE)
@@ -40,19 +39,17 @@ function Density() {
     rowHeights,
     currentRowHeightVariant,
     setRowHeightVariant,
-    host_static_assets,
-    environment_assets,
     getLabel
   ]);
-  const currenViewIcon = useMemo(() => {
+  const currentViewIcon = useMemo(() => {
     if (currentRowHeightVariant === "compact") {
-      return `${host_static_assets}/${environment_assets}/${pathIcons.compact}`;
+      return /* @__PURE__ */ jsx(LayoutDensityCompactOutlined, {});
     }
     if (currentRowHeightVariant === "standard") {
-      return `${host_static_assets}/${environment_assets}/${pathIcons.standard}`;
+      return /* @__PURE__ */ jsx(LayoutDensityStandardOutlined, {});
     }
-    return `${host_static_assets}/${environment_assets}/${pathIcons.confortable}`;
-  }, [currentRowHeightVariant, host_static_assets, environment_assets]);
+    return /* @__PURE__ */ jsx(LayoutDensityConfortableOutlined, {});
+  }, [currentRowHeightVariant]);
   if (menuActions.length === 0) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
@@ -63,7 +60,7 @@ function Density() {
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "left" },
       menuActions,
-      icon: currenViewIcon,
+      icon: currentViewIcon,
       toolTip: getLabel(DICTIONARY.DENSITY_TOOLTIP),
       paperProps: { style: { marginTop: "5px" } }
     }

package/components/datagrids/subcomponents/HeaderActions/subcomponents/MobileMenuActions/MobileMenuActions.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { p as pathIcons } from "../../../../icons.js";
+import { LayoutDensityCompactOutlined, LayoutDensityStandardOutlined, LayoutDensityConfortableOutlined, SettingsConfigOutlined, MenuMoreVerticalOutlined } from "@m4l/icons";
 import { u as useModalSettings } from "../../../../views/TableView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.js";
 import { u as useModalSettings$1 } from "../../../../views/CardsView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
@@ -21,21 +22,21 @@ const MobileMenuActions = (props) => {
   const menuActions = [
     {
       type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.compact}`,
+      startIcon: /* @__PURE__ */ jsx(LayoutDensityCompactOutlined, {}),
       onClick: () => setRowHeightVariant("compact"),
       disabled: currentRowHeightVariant === "compact",
       label: getLabel("data_grid.density_compact")
     },
     {
       type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.standard}`,
+      startIcon: /* @__PURE__ */ jsx(LayoutDensityStandardOutlined, {}),
       onClick: () => setRowHeightVariant("standard"),
       disabled: currentRowHeightVariant === "standard",
       label: getLabel("data_grid.density_standard")
     },
     {
       type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.confortable}`,
+      startIcon: /* @__PURE__ */ jsx(LayoutDensityConfortableOutlined, {}),
       onClick: () => setRowHeightVariant("confortable"),
       disabled: currentRowHeightVariant === "confortable",
       label: getLabel("data_grid.density_confortable")
@@ -48,7 +49,7 @@ const MobileMenuActions = (props) => {
     },
     {
       type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
+      startIcon: /* @__PURE__ */ jsx(SettingsConfigOutlined, {}),
       onClick: () => modalSettings(),
       label: getLabel("data_grid.tooltip_settings")
     }
@@ -57,7 +58,7 @@ const MobileMenuActions = (props) => {
     MenuActions,
     {
       className: "mobile-menu-actions",
-      icon: `${host_static_assets}/${environment_assets}/${pathIcons.menu}`,
+      icon: /* @__PURE__ */ jsx(MenuMoreVerticalOutlined, {}),
       arrowType: "no-arrow",
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" },

package/components/datagrids/subcomponents/HeaderActions/subcomponents/ViewMode/ViewMode.js

@@ -1,15 +1,14 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useMemo, useCallback } from "react";
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { useModuleDictionary } from "@m4l/core";
 import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
-import { p as pathIcons } from "../../../../icons.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
 import { g as ContainerToggleCardsStyled, h as CardToggleButtonStyled, T as TextToggleCardButtonStyled } from "../../../../slots/DataGridSlot.js";
+import { LayoutTableOutlined, LayoutCardOutlined } from "@m4l/icons";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 import { I as Icon } from "../../../../../Icon/Icon.js";
 function ViewMode() {
-  const { host_static_assets, environment_assets } = useEnvironment();
   const { viewMode, onViewModeChange } = useDataGrid();
   const { getLabel } = useModuleDictionary();
   const [anchorEl, setAnchorEl] = useState(null);
@@ -33,8 +32,8 @@ function ViewMode() {
     },
     [onViewModeChange, handleClose]
   );
-  const renderIcon = useMemo(() => {
-    return viewMode === "table" ? pathIcons.viewTable : pathIcons.viewCards;
+  const RenderIconViewMode = useMemo(() => {
+    return viewMode === "table" ? /* @__PURE__ */ jsx(LayoutTableOutlined, {}) : /* @__PURE__ */ jsx(LayoutCardOutlined, {});
   }, [viewMode]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -43,8 +42,8 @@ function ViewMode() {
         tooltip: getLabel(DICTIONARY.TOOLTIP_VIEW_MODE),
         onClick: handleClick,
         "aria-label": "view-mode",
-        icon: `${host_static_assets}/${environment_assets}/${renderIcon}`,
-        "data-testid": "view-mode-button"
+        icon: RenderIconViewMode,
+        dataTestId: "view-mode-button"
       }
     ),
     /* @__PURE__ */ jsx(
@@ -73,7 +72,7 @@ function ViewMode() {
                 /* @__PURE__ */ jsx(
                   Icon,
                   {
-                    src: `${host_static_assets}/${environment_assets}/${pathIcons.viewTable}`,
+                    icon: /* @__PURE__ */ jsx(LayoutTableOutlined, {}),
                     color: viewMode === "table" ? "primary.enabled" : "text.disabled"
                   }
                 ),
@@ -100,7 +99,7 @@ function ViewMode() {
                 /* @__PURE__ */ jsx(
                   Icon,
                   {
-                    src: `${host_static_assets}/${environment_assets}/${pathIcons.viewCards}`,
+                    icon: /* @__PURE__ */ jsx(LayoutCardOutlined, {}),
                     color: viewMode === "cards" ? "primary.enabled" : "text.disabled"
                   }
                 ),

package/components/datagrids/tests/helpers/types.d.ts

@@ -12,6 +12,16 @@ export interface SeedProps {
     withMultipleIcons?: boolean;
     withInteractiveCheck?: boolean;
     withNestedValue?: boolean;
+    /**
+     * Si es true, genera valores anidados con algunos null/undefined
+     * para mostrar el comportamiento del defaultValue ('-')
+     */
+    withNestedValueWithNulls?: boolean;
+    /**
+     * Si es true, genera valores anidados con null/undefined
+     * y usa un defaultValue personalizado ('N/A')
+     */
+    withNestedValueCustomDefaultValue?: boolean;
     withPoints?: boolean;
     withPrice?: boolean;
     withUncertainty?: boolean;

package/components/datagrids/types.d.ts

@@ -39,6 +39,18 @@ declare module 'react-data-grid' {
         formatter?: (props: any) => JSX.Element;
         /** @deprecated Usa renderEditCell en lugar de editor. Este atributo será removido en una futura versión. */
         editor?: Maybe<(props: RenderEditCellProps<TRow, TSummaryRow>) => ReactNode>;
+        /**
+         * Si true, la columna puede ser agrupada/desagrupada por el usuario.
+         * Solo aplica para TreeDataGrid.
+         */
+        groupable?: boolean;
+        /**
+         * Si true, la columna está agrupada por defecto.
+         * - Con `groupable: true`: el usuario puede cambiar la agrupación.
+         * - Sin `groupable` o `groupable: false`: agrupación estática, no se puede cambiar.
+         * Solo aplica para TreeDataGrid.
+         */
+        grouped?: boolean;
     }
 }
 export declare type RowKey = string | number;
@@ -319,3 +331,43 @@ export type DataGridOwnerState<TRow, TSummaryRow, TKey extends RowKey = RowKey>
 };
 export type DataGridSlotsType = DataGridSlots | TextEditorSlots | ActionsSlots | RowsCountSlots | ColumnsConfigSlots | TableSlots | ControlNavigateSlots | ColumnIconFormatterSlots;
 export type DataGridStyles = OverridesStyleRules<DataGridSlotsType, typeof DATAGRID_PREFIX_NAME, Theme>;
+/**
+ * Props específicas de TreeDataGrid (de react-data-grid)
+ * Estas props controlan la funcionalidad de agrupación jerárquica.
+ *
+ * NOTA: groupBy se calcula automáticamente desde columnsConfig.grouped
+ * ordenadas por groupOrder. El desarrollador define grouped/groupable en columns.
+ */
+export interface TreeProps<TRow> {
+    /**
+     * Función que agrupa las filas por una columna.
+     *
+     * OPCIONAL: Si no se pasa, usa un rowGrouper genérico que agrupa
+     * por el valor directo de la columna (row[columnKey]).
+     *
+     * Solo necesitas pasar un rowGrouper personalizado si quieres
+     * transformar los valores antes de agrupar, por ejemplo:
+     * - Agrupar fechas por mes ("Enero 2024")
+     * - Agrupar números por rango ("$40k - $60k")
+     * @see defaultRowGrouper en helpers/defaultRowGrouper
+     */
+    rowGrouper?: (rows: readonly TRow[], columnKey: string) => Record<string, readonly TRow[]>;
+    /** IDs de grupos expandidos */
+    expandedGroupIds?: ReadonlySet<unknown>;
+    /** Callback cuando cambian los grupos expandidos */
+    onExpandedGroupIdsChange?: (expandedGroupIds: Set<unknown>) => void;
+}
+/**
+ * Props completas de TreeDataGrid.
+ * Extiende DataGridProps pero sin cardsViewConfig ni defaultViewMode
+ * ya que TreeDataGrid solo soporta vista de tabla.
+ */
+export interface TreeDataGridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Omit<DataGridProps<TRow, TSummaryRow, TKey>, 'cardsViewConfig' | 'defaultViewMode'>, TreeProps<TRow> {
+}
+/**
+ * Props para TableView con soporte opcional para TreeDataGrid
+ */
+export type TableViewProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> = GridProps<TRow, TSummaryRow, TKey> & {
+    /** Props para TreeDataGrid. Si se pasan, usa TreeDataGrid en lugar de DataGrid */
+    treeProps?: TreeProps<TRow>;
+};

package/components/datagrids/views/CardsView/hooks/useCardContent/useCardContent.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { j as ContainerLabelValueColumnStyled, k as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, l as EditablePlaceholderStyled, m as IconButtonEditStyled } from "../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { p as pathIcons } from "../../../../icons.js";
+import { useModuleDictionary } from "@m4l/core";
+import { ActionsEditOutlined } from "@m4l/icons";
 import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function useCardContent({
@@ -15,7 +15,6 @@ function useCardContent({
 }) {
   const { getConfigColumns, size } = useDataGrid();
   const { getLabel } = useModuleDictionary();
-  const { host_static_assets, environment_assets } = useEnvironment();
   const { currentSize } = useComponentSize(size);
   const [editingColumnKey, setEditingColumnKey] = useState(null);
   const columnsConfig = getConfigColumns("cards");
@@ -95,7 +94,7 @@ function useCardContent({
                 /* @__PURE__ */ jsx(
                   IconButtonEditStyled,
                   {
-                    src: `${host_static_assets}/${environment_assets}/${pathIcons.edit}`,
+                    src: /* @__PURE__ */ jsx(ActionsEditOutlined, {}),
                     onClick: () => {
                       setEditingColumnKey(column.key);
                     },

package/components/datagrids/views/CardsView/hooks/useProcessedColumns/useProcessedColumns.d.ts

@@ -47,4 +47,6 @@ export declare function useProcessedColumns<TRow, TSummaryRow>(columns: readonly
     customSort?: ((a: TRow, b: TRow) => number) | undefined;
     formatter?: ((props: any) => JSX.Element) | undefined;
     editor?: import('@m4l/core').Maybe<(props: import('react-data-grid').RenderEditCellProps<TRow, TSummaryRow>) => import('react').ReactNode>;
+    groupable?: boolean;
+    grouped?: boolean;
 }[];

package/components/datagrids/views/CardsView/hooks/useProcessedColumns/useProcessedColumns.js

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
-import { d as DATAGRID_SELECT_COLUMN_KEY, e as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../../constants.js";
+import { SELECT_COLUMN_KEY } from "react-data-grid";
+import { d as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../../constants.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function useProcessedColumns(columns, options = {}) {
   const { applyVisibilityFilter = true } = options;
@@ -10,7 +11,7 @@ function useProcessedColumns(columns, options = {}) {
   );
   return useMemo(() => {
     const processedColumns = columns.filter((column) => {
-      if (column.key === DATAGRID_SELECT_COLUMN_KEY || column.key === DATAGRID_ACTIONS_COLUMN_KEY) {
+      if (column.key === SELECT_COLUMN_KEY || column.key === DATAGRID_ACTIONS_COLUMN_KEY) {
         return false;
       }
       if (!applyVisibilityFilter) {

package/components/datagrids/views/CardsView/subcomponents/CardDetails/CardDetails.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { o as CardDetailContainerStyled, j as ContainerLabelValueColumnStyled, k as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, l as EditablePlaceholderStyled, m as IconButtonEditStyled } from "../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { p as pathIcons } from "../../../../icons.js";
+import { useModuleDictionary } from "@m4l/core";
+import { ActionsEditOutlined } from "@m4l/icons";
 import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
 function CardDetails({
   row,
@@ -17,7 +17,6 @@ function CardDetails({
   const [editingColumnKey, setEditingColumnKey] = useState(null);
   const [refreshCounter, setRefreshCounter] = useState(0);
   const { getLabel } = useModuleDictionary();
-  const { host_static_assets, environment_assets } = useEnvironment();
   const { currentSize } = useComponentSize(size);
   const currentRow = rows[rowIndex] || row;
   const handleForceRefresh = useCallback(() => {
@@ -116,7 +115,7 @@ function CardDetails({
                 /* @__PURE__ */ jsx(
                   IconButtonEditStyled,
                   {
-                    src: `${host_static_assets}/${environment_assets}/${pathIcons.edit}`,
+                    src: /* @__PURE__ */ jsx(ActionsEditOutlined, {}),
                     onClick: () => {
                       setEditingColumnKey(modifiedColumn.key);
                     },

package/components/datagrids/views/CardsView/subcomponents/CardRow/subcomponents/CardHeader/CardHeader.js

@@ -1,8 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo, useCallback } from "react";
-import { useEnvironment } from "@m4l/core";
 import { s as CardHeaderStyled, t as CardHeaderLeftStyled, u as CardHeaderRightStyled } from "../../../../../../slots/DataGridSlot.js";
-import { p as pathIcons } from "../../../../../../icons.js";
+import { LayoutExpandOutlined } from "@m4l/icons";
 import { C as CheckboxCellAdapter } from "../../../../../adapters/CheckboxCellAdapter/CheckboxCellAdapter.js";
 import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
 import { u as useDataGrid } from "../../../../../../hooks/shared/useDataGrid/useDataGrid.js";
@@ -16,7 +15,6 @@ function CardHeader({
   onCheckedRowsChange
 }) {
   const { rowKeyGetter, rowActionsGetter, size, checkedRowsMultiple } = useDataGrid();
-  const { host_static_assets, environment_assets } = useEnvironment();
   const rowKey = useMemo(() => rowKeyGetter(row), [rowKeyGetter, row]);
   const onChange = useCallback(
     (checked, _isShiftClick) => {
@@ -69,7 +67,7 @@ function CardHeader({
       /* @__PURE__ */ jsx(
         IconButton,
         {
-          icon: `${host_static_assets}/${environment_assets}/${pathIcons.expanded}`,
+          icon: /* @__PURE__ */ jsx(LayoutExpandOutlined, {}),
           size,
           variant: "text",
           "data-testid": `card-details-button-${rowKey}`,

package/components/datagrids/views/CardsView/subcomponents/Settings/Settings.js

@@ -1,12 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { p as pathIcons } from "../../../../icons.js";
+import { useModuleDictionary } from "@m4l/core";
+import { SettingsConfigOutlined } from "@m4l/icons";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 import { u as useModalSettings } from "./hooks/useModalSettings/useModalSettings.js";
 function Settings(props) {
   const { columns } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
   const { size } = useDataGrid();
   const modalSettings = useModalSettings(size, columns);
   const { getLabel } = useModuleDictionary();
@@ -19,7 +18,7 @@ function Settings(props) {
       tooltip: getLabel("data_grid.tooltip_settings"),
       onClick: handleClick,
       "aria-label": "settings",
-      icon: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
+      icon: /* @__PURE__ */ jsx(SettingsConfigOutlined, {}),
       "data-testid": "settings-button"
     }
   );

package/components/datagrids/views/CardsView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { useModuleDictionary } from "@m4l/core";
 import { useIsMobile } from "@m4l/graphics";
 import { useRef, useCallback } from "react";
 import { u as useModal } from "../../../../../../../../hooks/useModal/index.js";
 import { n as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../../slots/DataGridSlot.js";
-import { p as pathIcons } from "../../../../../../icons.js";
+import { SettingsConfigOutlined } from "@m4l/icons";
 import { C as ColumnsConfig } from "../../subcomponents/ColumnsConfig/ColumnsConfig.js";
 import { A as ActionsContainer } from "../../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
 import { u as useDataGrid } from "../../../../../../hooks/shared/useDataGrid/useDataGrid.js";
@@ -16,7 +16,6 @@ const useModalSettings = (size, columns) => {
   const { getConfigColumns, onChangeColumnsConfig, currentRowHeight, classes } = useDataGrid();
   const columnsConfig = getConfigColumns("cards");
   const { getLabel } = useModuleDictionary();
-  const { host_static_assets, environment_assets } = useEnvironment();
   const isMobile = useIsMobile();
   const ref = useRef(null);
   const onCloseSettings = useCallback(() => {
@@ -39,7 +38,7 @@ const useModalSettings = (size, columns) => {
         WindowBase,
         {
           title: getLabel("data_grid.settings_title"),
-          iconUrl: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
+          iconUrl: /* @__PURE__ */ jsx(SettingsConfigOutlined, {}),
           onClose: closeModal,
           className: "settings-modal",
           variant: "outlined",