@m4l/components 9.4.9 → 9.4.10-JT14012026.beta.1

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;

package/components/datagrids/formatters/ColumnIconFormatter/ColumnIconGroupFormatter.js

@@ -0,0 +1,17 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { I as IconsFormatter } from "../../../formatters/IconsFormatter/IconsFormatter.js";
+const ColumnIconGroupFormatter = (props) => {
+  const { getIconProps } = props;
+  return (groupProps) => {
+    const { childRows } = groupProps;
+    if (childRows.length === 0) {
+      return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+    }
+    const representativeRow = childRows[0];
+    const iconProps = getIconProps(representativeRow);
+    return /* @__PURE__ */ jsx(IconsFormatter, { icons: iconProps });
+  };
+};
+export {
+  ColumnIconGroupFormatter as C
+};

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

@@ -1,3 +1,4 @@
 export { ColumnIconFormatter } from './formatter';
+export { ColumnIconGroupFormatter } from './ColumnIconGroupFormatter';
 export type { ColumnIconFormatterProps } from './types';
 export { useColumnIcon } from './useColumnIcon';

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

@@ -5,4 +5,5 @@ import { ColumnIconFormatterProps } from './types';
  */
 export declare const useColumnIcon: <TRow>(props: ColumnIconFormatterProps<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/ColumnIconFormatter/useColumnIcon.js

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

package/components/datagrids/formatters/ColumnImageFormatter/ColumnImageGroupFormatter.d.ts

@@ -0,0 +1,15 @@
+import { ColumnImageFormatterProps } from './types';
+import { RenderGroupCellProps } from 'react-data-grid';
+/**
+ * Formatter para mostrar imágenes en filas de grupo (TreeDataGrid).
+ *
+ * Esta función es utilizada cuando el TreeDataGrid agrupa filas y necesita
+ * mostrar una imagen 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 la URL de la imagen
+ *                - fieldText: Campo opcional para el texto
+ *                - cover: Modo de ajuste de la imagen
+ * @returns Función que recibe RenderGroupCellProps y retorna el ImageFormatter
+ */
+export declare const ColumnImageGroupFormatter: <TRow>(props: ColumnImageFormatterProps<TRow>) => (groupProps: RenderGroupCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/datagrids/formatters/ColumnImageFormatter/ColumnImageGroupFormatter.js

@@ -0,0 +1,33 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { getPropertyByString } from "@m4l/core";
+import { I as ImageFormatter } from "../../../formatters/ImageFormatter/ImageFormatter.js";
+const ColumnImageGroupFormatter = (props) => {
+  const { fieldValue, fieldText, cover } = props;
+  return (groupProps) => {
+    const { childRows } = groupProps;
+    if (childRows.length === 0) {
+      return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+    }
+    const representativeRow = childRows[0];
+    const src = getPropertyByString(
+      representativeRow,
+      fieldValue.toString()
+    );
+    const text = fieldText ? getPropertyByString(representativeRow, fieldText.toString()) : void 0;
+    if (!src) {
+      return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+    }
+    return /* @__PURE__ */ jsx(
+      ImageFormatter,
+      {
+        src,
+        alt: text || src,
+        text: text ?? void 0,
+        cover
+      }
+    );
+  };
+};
+export {
+  ColumnImageGroupFormatter as C
+};

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

@@ -1,3 +1,4 @@
 export { useColumnImage } from './useColumnImage';
 export { ColumnImageFormatter } from './formatter';
+export { ColumnImageGroupFormatter } from './ColumnImageGroupFormatter';
 export * from './types';

package/components/datagrids/formatters/ColumnImageFormatter/useColumnImage.d.ts

@@ -6,4 +6,5 @@ import { ColumnImageFormatterProps } from './types';
  */
 export declare const useColumnImage: <TRow>(props: ColumnImageFormatterProps<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;
 };

package/components/datagrids/formatters/ColumnImageFormatter/useColumnImage.js

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

package/components/datagrids/formatters/ColumnInteractiveCheckFormatter/formatter.d.ts

@@ -1,6 +1,17 @@
 import { ColumnInteractiveCheckFormatterProps } from './types';
 /**
  * ColumnInteractiveCheckFormatter: Es un formateador de columna booleano que permite la interacción directa
- * (camnbiar el checked) sin la necesidad de entrar en edición como lo hace un editor
+ * (cambiar el checked) sin la necesidad de entrar en edición como lo hace un editor.
+ *
+ * Soporta la propiedad opcional `disabledKey` en la columna, que indica qué campo del row
+ * determina si el checkbox está deshabilitado. Si el valor de ese campo es `false`,
+ * el checkbox se deshabilita.
+ * @example
+ * // Columna con checkbox siempre habilitado
+ * { key: 'visible', name: 'Visible', renderCell: ColumnInteractiveCheckFormatter }
+ * @example
+ * // Columna con checkbox condicionalmente deshabilitado
+ * { key: 'grouped', name: 'Agrupar', renderCell: ColumnInteractiveCheckFormatter, disabledKey: 'groupable' }
+ * // El checkbox se deshabilita cuando row.groupable === false
  */
 export declare function ColumnInteractiveCheckFormatter<Row>(props: ColumnInteractiveCheckFormatterProps<Row>): import("react/jsx-runtime").JSX.Element;

package/components/datagrids/formatters/ColumnInteractiveCheckFormatter/formatter.js

@@ -2,7 +2,12 @@ import { jsx } from "react/jsx-runtime";
 import { C as CheckBox } from "../../../mui_extended/CheckBox/CheckBox.js";
 function ColumnInteractiveCheckFormatter(props) {
   const { row, onRowChange, column } = props;
+  const disabledKey = column.disabledKey;
+  const isDisabled = disabledKey ? !row[disabledKey] : false;
   const handleChange = () => {
+    if (isDisabled) {
+      return;
+    }
     const newRow = { ...row };
     newRow[column.key] = !row[column.key];
     onRowChange(newRow);
@@ -12,6 +17,7 @@ function ColumnInteractiveCheckFormatter(props) {
     {
       size: "small",
       checked: row[column.key] || false,
+      disabled: isDisabled,
       onChange: handleChange
     }
   );

package/components/datagrids/formatters/ColumnNestedValueFormatter/ColumnNestedValueGroupFormatter.d.ts

@@ -0,0 +1,14 @@
+import { ColumnNestedValueFormatterProps } from './types';
+import { RenderGroupCellProps } from 'react-data-grid';
+/**
+ * Formatter para mostrar valores anidados en filas de grupo (TreeDataGrid).
+ *
+ * Esta función es utilizada cuando el TreeDataGrid agrupa filas y necesita
+ * mostrar un valor anidado 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 anidado a mostrar (ej: 'user.name')
+ *                - Component: Componente wrapper opcional
+ * @returns Función que recibe RenderGroupCellProps y retorna el valor formateado
+ */
+export declare function ColumnNestedValueGroupFormatter<TRow>(props: ColumnNestedValueFormatterProps<TRow>): (groupProps: RenderGroupCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/datagrids/formatters/ColumnNestedValueFormatter/ColumnNestedValueGroupFormatter.js

@@ -0,0 +1,22 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import React from "react";
+import { getPropertyByString } from "@m4l/core";
+import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
+function ColumnNestedValueGroupFormatter(props) {
+  const { fieldValue, Component = React.Fragment } = props;
+  return (groupProps) => {
+    const { childRows } = groupProps;
+    if (childRows.length === 0) {
+      return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+    }
+    const representativeRow = childRows[0];
+    const property = getNullGuard(
+      getPropertyByString(representativeRow, fieldValue)
+    );
+    const value = typeof property === "object" ? JSON.stringify(property) : property;
+    return /* @__PURE__ */ jsx(Component, { children: value });
+  };
+}
+export {
+  ColumnNestedValueGroupFormatter as C
+};

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

@@ -1,3 +1,4 @@
 export { ColumnNestedValueFormatter } from './formatter';
+export { ColumnNestedValueGroupFormatter } from './ColumnNestedValueGroupFormatter';
 export type { ColumnNestedValueFormatterProps } from './types';
 export { useColumnNestedValue } from './useColumnNestedValue';

package/components/datagrids/formatters/ColumnNestedValueFormatter/useColumnNestedValue.d.ts

@@ -5,6 +5,7 @@ import { ColumnNestedValueFormatterProps } from './types';
  */
 export declare const useColumnNestedValue: <TRow>(props: ColumnNestedValueFormatterProps<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) => any;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };