@m4l/components 9.4.12 → 9.4.14

package/components/datagrids/components/TreeDataGrid/TreeDataGrid.d.ts

@@ -0,0 +1,22 @@
+import { TreeDataGridProps, RowKey } from '../../types';
+/**
+ * TreeDataGrid es un componente para mostrar datos jerárquicos con agrupación.
+ *
+ * Características principales:
+ * - Vista de tabla con agrupación jerárquica
+ * - Expansión/colapso de grupos
+ * - Todas las funcionalidades del DataGrid (paginación, filtros, ordenamiento, etc.)
+ *
+ * IMPORTANTE: Solo soporta vista de tabla (no cards).
+ *
+ * El groupBy se calcula automáticamente desde las columnas con grouped=true,
+ * ordenadas por groupOrder. El desarrollador solo define:
+ * - `grouped: true` en columnas que deben agruparse por defecto
+ * - `groupable: true` en columnas que el usuario puede agrupar/desagrupar
+ *
+ * Modos de control para expandedGroupIds:
+ * - Sin props: Estado interno, todos los grupos colapsados inicialmente
+ * - Solo expandedGroupIds: Usa ese valor como inicial, luego maneja internamente
+ * - expandedGroupIds + onExpandedGroupIdsChange: Modo controlado, padre maneja estado
+ */
+export declare function TreeDataGrid<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: TreeDataGridProps<TRow, TSummaryRow, TKey>): import("react/jsx-runtime").JSX.Element;

package/components/datagrids/components/TreeDataGrid/TreeDataGrid.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { T as TableView } from "../../views/TableView/TableView.js";
+import { B as BaseDataGrid } from "../BaseDataGrid/BaseDataGrid.js";
+function TreeDataGrid(props) {
+  const {
+    id,
+    withActions,
+    columns,
+    rows,
+    selectedRows,
+    onSelectedRowsChange,
+    rowKeyGetter,
+    onRowsChange,
+    focusOnRowKey,
+    checkedRows,
+    onCheckedRowsChange,
+    rowGrouper,
+    expandedGroupIds: expandedGroupIdsProp,
+    onExpandedGroupIdsChange: onExpandedGroupIdsChangeProp
+  } = props;
+  const [internalExpandedGroupIds, setInternalExpandedGroupIds] = useState(() => new Set(expandedGroupIdsProp ?? []));
+  const isControlled = expandedGroupIdsProp !== void 0 && onExpandedGroupIdsChangeProp !== void 0;
+  const expandedGroupIds = isControlled ? expandedGroupIdsProp : internalExpandedGroupIds;
+  const onExpandedGroupIdsChange = isControlled ? onExpandedGroupIdsChangeProp : setInternalExpandedGroupIds;
+  return /* @__PURE__ */ jsx(BaseDataGrid, { ...props, children: /* @__PURE__ */ jsx(
+    TableView,
+    {
+      id,
+      withActions,
+      columns,
+      rows,
+      selectedRows,
+      onSelectedRowsChange,
+      rowKeyGetter,
+      onRowsChange,
+      focusOnRowKey,
+      checkedRows,
+      onCheckedRowsChange,
+      treeProps: {
+        rowGrouper,
+        expandedGroupIds,
+        onExpandedGroupIdsChange
+      }
+    }
+  ) });
+}
+export {
+  TreeDataGrid as T
+};

package/components/datagrids/components/TreeDataGrid/TreeDataGrid.test.d.ts

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

package/components/datagrids/components/TreeDataGrid/index.d.ts

@@ -0,0 +1 @@
+export { TreeDataGrid } from './TreeDataGrid';

package/components/datagrids/components/TreeDataGrid/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/constants.js

@@ -1,5 +1,4 @@
 const DATAGRID_PREFIX_NAME = "M4LDataGrid";
-const DATAGRID_SELECT_COLUMN_KEY = "M4LDataGrid-CheckedColumn";
 const DATAGRID_ACTIONS_COLUMN_KEY = "M4LDataGrid-ActionsColumn";
 const TEST_SKELETON = "data-skeleton";
 const DATAGRID_HEADER_RENDER_CLICK_KEY = "M4LDataGrid-HeaderRenderClick";
@@ -45,8 +44,7 @@ export {
   DATAGRID_ROW_HEIGHTS as a,
   DATAGRID_ROW_HEADER_HEIGHTS as b,
   DATAGRID_ID_DICTIONARY as c,
-  DATAGRID_SELECT_COLUMN_KEY as d,
-  DATAGRID_ACTIONS_COLUMN_KEY as e,
-  DATAGRID_SEMANTIC_WIDTHS as f,
-  DATAGRID_HEADER_RENDER_CLICK_KEY as g
+  DATAGRID_ACTIONS_COLUMN_KEY as d,
+  DATAGRID_SEMANTIC_WIDTHS as e,
+  DATAGRID_HEADER_RENDER_CLICK_KEY as f
 };

package/components/datagrids/contexts/DataGridContext/DataGridContext.js

@@ -192,8 +192,8 @@ function DataGridProvider(props) {
           columns,
           "table",
           resolvedDefaultConfig?.columnsConfig,
-          { frozen: false },
-          { originalFrozen: false }
+          { frozen: false, grouped: false, groupOrder: 0 },
+          { originalFrozen: false, originalGrouped: false, originalGroupOrder: 0 }
         )
       );
       const finalCardsConfig = (() => {
@@ -267,12 +267,16 @@ function DataGridProvider(props) {
         if (newColumnsForView.length > 0) {
           const colLength = currentConfig.length;
           const viewSpecificDefaults = viewModeParam === "cards" ? { showTitle: false } : {
-            frozen: false
+            frozen: false,
+            grouped: false,
+            groupOrder: 0
           };
           const originalViewSpecificDefaults = viewModeParam === "cards" ? {
             originalShowTitle: false
           } : {
-            originalFrozen: false
+            originalFrozen: false,
+            originalGrouped: false,
+            originalGroupOrder: 0
           };
           const newColConfig = getInitialColumnsConfig(
             id,

package/components/datagrids/contexts/DataGridContext/types.d.ts

@@ -23,16 +23,26 @@ export interface BaseConfigColumn {
     visible: boolean;
     index: number;
     frozen: boolean;
+    /**
+     * Si la columna está agrupada actualmente.
+     * Solo aplica para TreeDataGrid.
+     */
+    grouped?: boolean;
+    /**
+     * Orden en la jerarquía de agrupación (0 = primer nivel).
+     * Solo aplica para TreeDataGrid.
+     */
+    groupOrder?: number;
     /**
      * @deprecated internamente el componente usa el name de columns.
      */
     name?: string;
 }
 /**
- * Configuración base para vista cards - omite frozen y agrega showTitle
+ * Configuración base para vista cards - omite frozen, grouped y groupOrder y agrega showTitle
  * USO: Los desarrolladores pasan esto en defaultUserColumns.columnsConfigCards
  */
-export interface BaseConfigColumnCards extends Omit<BaseConfigColumn, 'frozen'> {
+export interface BaseConfigColumnCards extends Omit<BaseConfigColumn, 'frozen' | 'grouped' | 'groupOrder'> {
     showTitle: boolean;
 }
 /**
@@ -44,12 +54,16 @@ export interface IConfigColumn extends BaseConfigColumn {
     originalIndex: number;
     originalVisible: boolean;
     originalFrozen: boolean;
+    /** Valor original de grouped definido en la columna */
+    originalGrouped?: boolean;
+    /** Valor original de groupOrder */
+    originalGroupOrder?: number;
 }
 /**
  * Configuración extendida para cards (estado interno)
  * USO INTERNO: El contexto agrega estas propiedades para tracking y gestión de estado
  */
-export interface IConfigColumnCards extends Omit<IConfigColumn, 'frozen' | 'originalFrozen'> {
+export interface IConfigColumnCards extends Omit<IConfigColumn, 'frozen' | 'originalFrozen' | 'grouped' | 'groupOrder' | 'originalGrouped' | 'originalGroupOrder'> {
     showTitle: boolean;
     originalShowTitle: boolean;
 }
@@ -60,7 +74,9 @@ export type ViewMode = 'table' | 'cards';
  * EXTENSIBILIDAD: Agregar aquí nuevas propiedades para nuevas vistas (ej: columnsConfigList)
  */
 export interface IGridConfigExtended extends IGridConfig {
+    /** Configuración de columnas para vista cards */
     columnsConfigCards?: BaseConfigColumnCards[];
+    /** Modo de vista actual (table/cards) */
     viewMode?: ViewMode;
 }
 export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<GridProps<TRow, TSummaryRow, TKey>, 'rows' | 'columns' | 'rowActionsGetter' | 'rowHeaderHeights' | 'rowHeights' | 'initialRowHeightVariant' | 'checkedRows' | 'onCheckedRowsChange' | 'checkedRowsMultiple' | 'rowKeyGetter' | 'externalSortSettings' | 'externalFilterSettings' | 'defaultViewMode' | 'cardsViewConfig'> {

package/components/datagrids/dictionary.d.ts

@@ -34,6 +34,9 @@ export declare const DICTIONARY: {
     UNFREEZE_COLUMN: string;
     HIDE_COLUMN: string;
     ADD_FILTER_COLUMN: string;
+    SETTINGS_COLUMN_GROUP: string;
+    GROUP_BY_COLUMN: string;
+    REMOVE_GROUP_COLUMN: string;
     VIEW_MODE_TABLE: string;
     VIEW_MODE_CARDS: string;
     TOOLTIP_VIEW_MODE: string;

package/components/datagrids/dictionary.js

@@ -34,6 +34,10 @@ const DICTIONARY = {
   UNFREEZE_COLUMN: `${DATAGRID_ID_DICTIONARY}.unfreeze_column`,
   HIDE_COLUMN: `${DATAGRID_ID_DICTIONARY}.hide_column`,
   ADD_FILTER_COLUMN: `${DATAGRID_ID_DICTIONARY}.add_filter`,
+  // Labels para agrupación de columnas (Row Grouping)
+  SETTINGS_COLUMN_GROUP: `${DATAGRID_ID_DICTIONARY}.settings_column_group`,
+  GROUP_BY_COLUMN: `${DATAGRID_ID_DICTIONARY}.group_by_column`,
+  REMOVE_GROUP_COLUMN: `${DATAGRID_ID_DICTIONARY}.remove_group_column`,
   VIEW_MODE_TABLE: `${DATAGRID_ID_DICTIONARY}.view_mode_table`,
   VIEW_MODE_CARDS: `${DATAGRID_ID_DICTIONARY}.view_mode_cards`,
   TOOLTIP_VIEW_MODE: `${DATAGRID_ID_DICTIONARY}.tooltip_view_mode`,

package/components/datagrids/formatters/ColumnBooleanFormatter/ColumnBooleanGroupFormatter.d.ts

@@ -0,0 +1,15 @@
+import { ColumnBooleanFormatterProps } from './types';
+import { RenderGroupCellProps } from 'react-data-grid';
+/**
+ * Formatter para mostrar valores booleanos en filas de grupo (TreeDataGrid).
+ *
+ * Esta función es utilizada cuando el TreeDataGrid agrupa filas y necesita
+ * mostrar un valor booleano en el encabezado del grupo. Usa la primera fila
+ * del grupo (childRows[0]) como fuente de datos representativa.
+ * @param props - Propiedades del formatter que incluyen:
+ *                - fieldValue: Campo que contiene el valor booleano
+ *                - presentationType: Tipo de presentación (text, icon, etc.)
+ *                - Component: Componente wrapper opcional
+ * @returns Función que recibe RenderGroupCellProps y retorna el BooleanFormatter
+ */
+export declare function ColumnBooleanGroupFormatter<TRow>(props: ColumnBooleanFormatterProps<TRow>): (groupProps: RenderGroupCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/datagrids/formatters/ColumnBooleanFormatter/ColumnBooleanGroupFormatter.js

@@ -0,0 +1,32 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import React from "react";
+import { getPropertyByString } from "@m4l/core";
+import { B as BooleanFormatter } from "../../../formatters/BooleanFormatter/BooleanFormatter.js";
+function ColumnBooleanGroupFormatter(props) {
+  const { fieldValue, presentationType, Component = React.Fragment } = props;
+  return (groupProps) => {
+    const { childRows } = groupProps;
+    if (childRows.length === 0) {
+      return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+    }
+    const representativeRow = childRows[0];
+    const valueMaybeString = getPropertyByString(representativeRow, fieldValue);
+    let fixedValue;
+    if (typeof valueMaybeString === "boolean") {
+      fixedValue = valueMaybeString;
+    } else {
+      fixedValue = void 0;
+    }
+    return /* @__PURE__ */ jsx(
+      BooleanFormatter,
+      {
+        presentationType,
+        value: fixedValue,
+        Component
+      }
+    );
+  };
+}
+export {
+  ColumnBooleanGroupFormatter as C
+};

package/components/datagrids/formatters/ColumnBooleanFormatter/index.d.ts

@@ -1,3 +1,4 @@
 export { ColumnBooleanFormatter } from './formatter';
+export { ColumnBooleanGroupFormatter } from './ColumnBooleanGroupFormatter';
 export type { ColumnBooleanFormatterProps } from './types';
 export { useColumnBoolean } from './useColumnBoolean';

package/components/datagrids/formatters/ColumnBooleanFormatter/useColumnBoolean.d.ts

@@ -4,6 +4,7 @@ import { ColumnBooleanFormatterProps } from './types';
  */
 export declare const useColumnBoolean: <TRow>(props: ColumnBooleanFormatterProps<TRow>) => {
     formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    renderGroupCell: (groupProps: import('react-data-grid').RenderGroupCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

package/components/datagrids/formatters/ColumnBooleanFormatter/useColumnBoolean.js

@@ -1,5 +1,6 @@
 import { g as getFormatBoolean } from "../../../formatters/BooleanFormatter/BooleanFormatter.js";
 import { C as ColumnBooleanFormatter } from "./formatter.js";
+import { C as ColumnBooleanGroupFormatter } from "./ColumnBooleanGroupFormatter.js";
 import { useModuleDictionary, getPropertyByString } from "@m4l/core";
 import { useState, useRef, useEffect, useMemo } from "react";
 import { deepEqual } from "fast-equals";
@@ -70,6 +71,7 @@ const useColumnBoolean = (props) => {
   return useMemo(
     () => ({
       formatter: ColumnBooleanFormatter(stateProps),
+      renderGroupCell: ColumnBooleanGroupFormatter(stateProps),
       customFilter: getCustomBooleanFilter(stateProps, getLabel),
       customSort: getCustomBooleanSort(stateProps, getLabel)
     }),

package/components/datagrids/formatters/ColumnChipStatusFormatter/ColumnChipStatusGroupFormatter.d.ts

@@ -0,0 +1,16 @@
+import { ColumnChipStatusFormatterProps } from './types';
+import { RenderGroupCellProps } from 'react-data-grid';
+/**
+ * Formatter para mostrar un chip de estado en filas de grupo (TreeDataGrid).
+ *
+ * Esta función es utilizada cuando el TreeDataGrid agrupa filas y necesita
+ * mostrar un ChipStatus en el encabezado del grupo. Usa la primera fila
+ * del grupo (childRows[0]) como fuente de datos representativa.
+ * @param props - Propiedades del formatter que incluyen:
+ *                - fieldStatus: Campo que contiene el valor del estado
+ *                - fieldLabel: Campo o función que genera la etiqueta del chip
+ *                - statusesColors: Mapeo de estados a colores
+ *                - fallbackColor: Color por defecto si el estado no tiene mapeo
+ * @returns Función que recibe RenderGroupCellProps y retorna el ChipStatusFormatter
+ */
+export declare const ColumnChipStatusGroupFormatter: <TRow>(props: ColumnChipStatusFormatterProps<TRow>) => (groupProps: RenderGroupCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/datagrids/formatters/ColumnChipStatusFormatter/ColumnChipStatusGroupFormatter.js

@@ -0,0 +1,37 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { getPropertyByString } from "@m4l/core";
+import { C as ChipStatusFormatterColumnWrapperStyled } from "../../../formatters/ChipStatusFormatter/slots/ChipStatusFormatterSlots.js";
+import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
+import { C as ChipStatusFormatter } from "../../../formatters/ChipStatusFormatter/ChipStatusFormatter.js";
+const ColumnChipStatusGroupFormatter = (props) => {
+  const { fieldStatus, fieldLabel, statusesColors, fallbackColor } = props;
+  return (groupProps) => {
+    const { childRows } = groupProps;
+    if (childRows.length === 0) {
+      return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+    }
+    const representativeRow = childRows[0];
+    const cleanFieldStatus = fieldStatus.toString().startsWith("row.") ? fieldStatus.toString().substring(4) : fieldStatus.toString();
+    const cleanFieldLabel = typeof fieldLabel === "string" && fieldLabel.startsWith("row.") ? fieldLabel.substring(4) : fieldLabel;
+    const status = getNullGuard(
+      getPropertyByString(representativeRow, cleanFieldStatus)
+    );
+    const baseLabel = typeof cleanFieldLabel === "string" ? getNullGuard(
+      getPropertyByString(representativeRow, cleanFieldLabel)
+    ) : typeof fieldLabel === "function" ? fieldLabel(representativeRow, status) : "";
+    const label = `${baseLabel} (${childRows.length})`;
+    return /* @__PURE__ */ jsx(
+      ChipStatusFormatter,
+      {
+        label,
+        status,
+        statusesColors,
+        Component: ChipStatusFormatterColumnWrapperStyled,
+        fallbackColor
+      }
+    );
+  };
+};
+export {
+  ColumnChipStatusGroupFormatter as C
+};

package/components/datagrids/formatters/ColumnChipStatusFormatter/index.d.ts

@@ -1,3 +1,4 @@
 export { ColumnChipStatusFormatter } from './formatter';
+export { ColumnChipStatusGroupFormatter } from './ColumnChipStatusGroupFormatter';
 export { useColumnChipStatus } from './useColumnChipStatus';
 export type { ColumnChipStatusFormatterProps } from './types';

package/components/datagrids/formatters/ColumnChipStatusFormatter/useColumnChipStatus.d.ts

@@ -4,6 +4,7 @@ import { ColumnChipStatusFormatterProps } from './types';
  */
 export declare const useColumnChipStatus: <TRow>(props: ColumnChipStatusFormatterProps<TRow>) => {
     formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    renderGroupCell: (groupProps: import('react-data-grid').RenderGroupCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string | number) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

package/components/datagrids/formatters/ColumnChipStatusFormatter/useColumnChipStatus.js

@@ -1,5 +1,6 @@
 import { getPropertyByString } from "@m4l/core";
 import { C as ColumnChipStatusFormatter } from "./formatter.js";
+import { C as ColumnChipStatusGroupFormatter } from "./ColumnChipStatusGroupFormatter.js";
 import { deepEqual } from "fast-equals";
 import { useState, useRef, useEffect, useMemo } from "react";
 import { g as getColumnKey } from "../../helpers/shared/getColumnKey/getColumnKey.js";
@@ -28,6 +29,7 @@ const useColumnChipStatus = (props) => {
   }, [props]);
   return useMemo(() => ({
     formatter: ColumnChipStatusFormatter(stateProps),
+    renderGroupCell: ColumnChipStatusGroupFormatter(stateProps),
     customFilter: getCustomChipStatusFilter(stateProps),
     customSort: getCustomChipStatusSort(stateProps)
   }), [stateProps]);

package/components/datagrids/formatters/ColumnColorFormatter/ColumnColorGroupFormatter.d.ts

@@ -0,0 +1,14 @@
+import { RenderGroupCellProps } from 'react-data-grid';
+import { ColumnColorFormatterProps } from './types';
+/**
+ * Formatter para mostrar colores en filas de grupo (TreeDataGrid).
+ *
+ * Esta función es utilizada cuando el TreeDataGrid agrupa filas y necesita
+ * mostrar un color en el encabezado del grupo. Usa la primera fila
+ * del grupo (childRows[0]) como fuente de datos representativa.
+ * @param props - Propiedades del formatter que incluyen:
+ *                - fieldValue: Campo que contiene el valor del color
+ *                - size: Tamaño del indicador de color
+ * @returns Función que recibe RenderGroupCellProps y retorna el ColorFormatter
+ */
+export declare const ColumnColorGroupFormatter: <TRow>(props: ColumnColorFormatterProps<TRow>) => (groupProps: RenderGroupCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/datagrids/formatters/ColumnColorFormatter/ColumnColorGroupFormatter.js

@@ -0,0 +1,24 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { getPropertyByString } from "@m4l/core";
+import { C as ColorFormatter } from "../../../formatters/ColorFormatter/ColorFormatter.js";
+const ColumnColorGroupFormatter = (props) => {
+  const { fieldValue, size = "medium" } = props;
+  return (groupProps) => {
+    const { childRows } = groupProps;
+    if (childRows.length === 0) {
+      return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+    }
+    const representativeRow = childRows[0];
+    const colorValue = getPropertyByString(representativeRow, fieldValue.toString());
+    let fixedValue;
+    if (typeof colorValue === "string") {
+      fixedValue = colorValue;
+    } else {
+      fixedValue = null;
+    }
+    return /* @__PURE__ */ jsx(ColorFormatter, { value: fixedValue, size });
+  };
+};
+export {
+  ColumnColorGroupFormatter as C
+};

package/components/datagrids/formatters/ColumnColorFormatter/index.d.ts

@@ -1,3 +1,4 @@
 export * from './formatter';
+export * from './ColumnColorGroupFormatter';
 export * from './types';
 export * from './useColumnColor';

package/components/datagrids/formatters/ColumnColorFormatter/useColumnColor.d.ts

@@ -11,4 +11,5 @@ import { ColumnColorFormatterProps } from './types';
  */
 export declare const useColumnColor: <TRow>(props: ColumnColorFormatterProps<TRow>) => {
     formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    renderGroupCell: (groupProps: import('react-data-grid').RenderGroupCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
 };

package/components/datagrids/formatters/ColumnColorFormatter/useColumnColor.js

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, useMemo } from "react";
 import { deepEqual } from "fast-equals";
 import { C as ColumnColorFormatter } from "./formatter.js";
+import { C as ColumnColorGroupFormatter } from "./ColumnColorGroupFormatter.js";
 const useColumnColor = (props) => {
   const [stateProps, setStateProps] = useState(props);
   const refProps = useRef({ ...props });
@@ -12,7 +13,8 @@ const useColumnColor = (props) => {
   }, [props]);
   return useMemo(
     () => ({
-      formatter: ColumnColorFormatter(stateProps)
+      formatter: ColumnColorFormatter(stateProps),
+      renderGroupCell: ColumnColorGroupFormatter(stateProps)
     }),
     [stateProps]
   );

package/components/datagrids/formatters/ColumnConcatenatedValuesFormatter/ColumnConcatenatedValuesGroupFormatter.d.ts

@@ -0,0 +1,15 @@
+import { ColumnConcatenatedValuesFormatterProps } from './types';
+import { RenderGroupCellProps } from 'react-data-grid';
+/**
+ * Formatter para mostrar valores concatenados en filas de grupo (TreeDataGrid).
+ *
+ * Esta función es utilizada cuando el TreeDataGrid agrupa filas y necesita
+ * mostrar valores concatenados en el encabezado del grupo. Usa la primera fila
+ * del grupo (childRows[0]) como fuente de datos representativa.
+ * @param props - Propiedades del formatter que incluyen:
+ *                - fieldValue: Array de campos a concatenar
+ *                - fieldSeparator: Separador entre valores
+ *                - Component: Componente wrapper opcional
+ * @returns Función que recibe RenderGroupCellProps y retorna el ConcatenatedFormatter
+ */
+export declare function ColumnConcatenatedValuesGroupFormatter<TRow>(props: ColumnConcatenatedValuesFormatterProps<TRow>): (groupProps: RenderGroupCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/datagrids/formatters/ColumnConcatenatedValuesFormatter/ColumnConcatenatedValuesGroupFormatter.js

@@ -0,0 +1,35 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import React from "react";
+import { getPropertyByString } from "@m4l/core";
+import { C as ConcatenatedFormatter } from "../../../formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
+function ColumnConcatenatedValuesGroupFormatter(props) {
+  const { fieldValue, fieldSeparator, Component = React.Fragment } = props;
+  return (groupProps) => {
+    const { childRows } = groupProps;
+    if (childRows.length === 0) {
+      return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+    }
+    const representativeRow = childRows[0];
+    const values = fieldValue.map((element) => {
+      const valueMaybeString = getPropertyByString(representativeRow, element);
+      let fixedValue;
+      if (typeof valueMaybeString === "string" || typeof valueMaybeString === "number") {
+        fixedValue = valueMaybeString.toString();
+      } else {
+        fixedValue = "";
+      }
+      return fixedValue;
+    });
+    return /* @__PURE__ */ jsx(
+      ConcatenatedFormatter,
+      {
+        values,
+        separator: fieldSeparator,
+        Component
+      }
+    );
+  };
+}
+export {
+  ColumnConcatenatedValuesGroupFormatter as C
+};

package/components/datagrids/formatters/ColumnConcatenatedValuesFormatter/index.d.ts

@@ -1,3 +1,4 @@
 export { ColumnConcatenatedValuesFormatter as ColumnConcatenatedValueFormatter } from './formatter';
+export { ColumnConcatenatedValuesGroupFormatter } from './ColumnConcatenatedValuesGroupFormatter';
 export type { ColumnConcatenatedValuesFormatterProps } from './types';
 export { useColumnConcatenatedValues as useColumnConcatenatedValue } from './useColumnConcatenatedValues';

package/components/datagrids/formatters/ColumnConcatenatedValuesFormatter/useColumnConcatenatedValues.d.ts

@@ -4,6 +4,7 @@ import { ColumnConcatenatedValuesFormatterProps } from './types';
  */
 export declare const useColumnConcatenatedValues: <TRow>(props: ColumnConcatenatedValuesFormatterProps<TRow>) => {
     formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    renderGroupCell: (groupProps: import('react-data-grid').RenderGroupCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

package/components/datagrids/formatters/ColumnConcatenatedValuesFormatter/useColumnConcatenatedValues.js

@@ -1,5 +1,6 @@
 import { getPropertyByString } from "@m4l/core";
 import { deepEqual } from "fast-equals";
+import { C as ColumnConcatenatedValuesGroupFormatter } from "./ColumnConcatenatedValuesGroupFormatter.js";
 import { g as getFormatConcatenated } from "../../../formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
 import { useState, useRef, useEffect, useMemo } from "react";
 import { C as ColumnConcatenatedValuesFormatter } from "./formatter.js";
@@ -50,6 +51,7 @@ const useColumnConcatenatedValues = (props) => {
   }, [props]);
   return useMemo(() => ({
     formatter: ColumnConcatenatedValuesFormatter(stateProps),
+    renderGroupCell: ColumnConcatenatedValuesGroupFormatter(stateProps),
     customFilter: getCustomContatenatedValueFilter(stateProps),
     customSort: getCustomConcatenatedValueSort(stateProps)
   }), [stateProps]);

package/components/datagrids/formatters/ColumnDateFormatter/ColumnDateGroupFormatter.d.ts

@@ -0,0 +1,9 @@
+import { ColumnDateFormatterProps } from './types';
+import { RenderGroupCellProps } from 'react-data-grid';
+/**
+ * Formatter para mostrar una fecha en filas de grupo (TreeDataGrid).
+ * Usa la primera fila del grupo (childRows[0]) como fuente de datos.
+ * @param props - Propiedades del formatter (fieldValue, presentationType, Component)
+ * @returns Función que recibe RenderGroupCellProps y retorna el DateFormatter
+ */
+export declare function ColumnDateGroupFormatter<TRow>(props: ColumnDateFormatterProps<TRow>): (groupProps: RenderGroupCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/datagrids/formatters/ColumnDateFormatter/ColumnDateGroupFormatter.js

@@ -0,0 +1,35 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { getPropertyByString } from "@m4l/core";
+import React from "react";
+import { D as DateFormatter } from "../../../formatters/DateFormatter/DateFormatter.js";
+function ColumnDateGroupFormatter(props) {
+  const { fieldValue, presentationType, Component = React.Fragment } = props;
+  return (groupProps) => {
+    const { childRows } = groupProps;
+    if (childRows.length === 0) {
+      return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+    }
+    const representativeRow = childRows[0];
+    const valueMaybeDateStringNumber = getPropertyByString(
+      representativeRow,
+      fieldValue
+    );
+    let fixedValue;
+    if (typeof valueMaybeDateStringNumber === "string" || typeof valueMaybeDateStringNumber === "number" || valueMaybeDateStringNumber instanceof Date) {
+      fixedValue = valueMaybeDateStringNumber;
+    } else {
+      fixedValue = "";
+    }
+    return /* @__PURE__ */ jsx(
+      DateFormatter,
+      {
+        presentationType,
+        value: fixedValue,
+        Component
+      }
+    );
+  };
+}
+export {
+  ColumnDateGroupFormatter as C
+};

package/components/datagrids/formatters/ColumnDateFormatter/index.d.ts

@@ -1,3 +1,4 @@
 export { ColumnDateFormatter } from './formatter';
+export { ColumnDateGroupFormatter } from './ColumnDateGroupFormatter';
 export type { ColumnDateFormatterProps } from './types';
 export { useColumnDate } from './useColumnDate';

package/components/datagrids/formatters/ColumnDateFormatter/useColumnDate.d.ts

@@ -9,6 +9,7 @@ export declare const useCustomDateFilter: <TRow>(props: ColumnDateFormatterProps
  */
 export declare const useColumnDate: <TRow>(props: ColumnDateFormatterProps<TRow>) => {
     formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    renderGroupCell: (groupProps: import('react-data-grid').RenderGroupCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

package/components/datagrids/formatters/ColumnDateFormatter/useColumnDate.js

@@ -1,6 +1,7 @@
 import { getPropertyByString } from "@m4l/core";
 import { g as getFormatDate } from "../../../formatters/DateFormatter/DateFormatter.js";
 import { C as ColumnDateFormatter } from "./formatter.js";
+import { C as ColumnDateGroupFormatter } from "./ColumnDateGroupFormatter.js";
 import { useFormatter } from "@m4l/graphics";
 import { g as getValidDate } from "../../../../utils/getValidDate.js";
 import { useState, useRef, useEffect, useMemo, useCallback } from "react";
@@ -56,6 +57,7 @@ const useColumnDate = (props) => {
   }, [props]);
   return useMemo(() => ({
     formatter: ColumnDateFormatter(stateProps),
+    renderGroupCell: ColumnDateGroupFormatter(stateProps),
     customFilter,
     customSort: getCustomDateSort(stateProps)
   }), [stateProps, customFilter]);

package/components/datagrids/formatters/ColumnIconFormatter/ColumnIconGroupFormatter.d.ts

@@ -0,0 +1,13 @@
+import { ColumnIconFormatterProps } from './types';
+import { RenderGroupCellProps } from 'react-data-grid';
+/**
+ * Formatter para mostrar iconos en filas de grupo (TreeDataGrid).
+ *
+ * Esta función es utilizada cuando el TreeDataGrid agrupa filas y necesita
+ * mostrar iconos en el encabezado del grupo. Usa la primera fila
+ * del grupo (childRows[0]) como fuente de datos representativa.
+ * @param props - Propiedades del formatter que incluyen:
+ *                - getIconProps: Función que obtiene las props del icono de una fila
+ * @returns Función que recibe RenderGroupCellProps y retorna el IconsFormatter
+ */
+export declare const ColumnIconGroupFormatter: <TRow>(props: ColumnIconFormatterProps<TRow>) => (groupProps: RenderGroupCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;