@m4l/components 9.4.14 → 9.4.15

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

@@ -1,6 +1,38 @@
 import { ColumnNestedValueFormatterProps } from './types';
 import { RenderCellProps } from 'react-data-grid';
 /**
- * Function to format a nested value in a column of a DataGrid
+ * Formatter para mostrar valores de propiedades anidadas en columnas del DataGrid.
+ *
+ * Este formatter permite acceder a propiedades dentro de objetos anidados usando
+ * "dot notation" (notación de punto). Es útil cuando los datos tienen estructuras
+ * complejas y necesitas mostrar un valor específico dentro de un objeto.
+ * @param props - Configuración del formatter
+ * @param props.fieldValue - Ruta a la propiedad usando dot notation (ej: 'user.profile.name')
+ * @param props.Component - Componente opcional para envolver el valor (default: React.Fragment)
+ * @param props.defaultValue - Valor a mostrar si es null/undefined (default: '-')
+ * @returns Función formatter compatible con react-data-grid
+ * @example
+ * // Filas de ejemplo:
+ * // { id: 1, user: { profile: { name: 'Juan' } } }
+ * // { id: 2, user: { profile: { name: null } } }
+ *
+ * // Uso recomendado con hook:
+ * const nestedColumn = useColumnNestedValue<MyRow>({
+ *   fieldValue: 'user.profile.name',
+ *   defaultValue: 'Sin nombre',
+ * });
+ *
+ * const columns = [
+ *   {
+ *     key: 'userName',
+ *     name: 'Nombre',
+ *     type: 'custom',
+ *     ...nestedColumn, // Incluye formatter, customFilter y customSort
+ *   }
+ * ];
+ *
+ * // Resultado en DataGrid:
+ * // Fila 1: "Juan"
+ * // Fila 2: "Sin nombre" (porque el valor es null)
  */
 export declare function ColumnNestedValueFormatter<TRow>(props: ColumnNestedValueFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,10 +3,11 @@ import { getPropertyByString } from "@m4l/core";
 import React from "react";
 import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
 function ColumnNestedValueFormatter(props) {
-  const { fieldValue, Component = React.Fragment } = props;
+  const { fieldValue, Component = React.Fragment, defaultValue = "-" } = props;
   return (formatterProps) => {
     const property = getNullGuard(
-      getPropertyByString(formatterProps.row, fieldValue)
+      getPropertyByString(formatterProps.row, fieldValue),
+      defaultValue
     );
     const value = typeof property === "object" ? JSON.stringify(property) : property;
     return /* @__PURE__ */ jsx(Component, { children: value });

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

@@ -1,5 +1,23 @@
 import { DeepKeyOf } from '../../../../utils/types';
 export interface ColumnNestedValueFormatterProps<TRow> {
-    Component?: React.ElementType;
+    /**
+     * Ruta a la propiedad anidada usando dot notation.
+     * Permite acceder a valores dentro de objetos anidados.
+     * @example
+     * // Para acceder a { user: { profile: { name: 'Juan' } } }
+     * fieldValue: 'user.profile.name' // Retorna 'Juan'
+     */
     fieldValue: DeepKeyOf<TRow>;
+    /**
+     * Componente opcional para envolver el valor renderizado.
+     * Por defecto usa React.Fragment.
+     * @example
+     * Component: Typography // Envuelve el valor en <Typography>{valor}</Typography>
+     */
+    Component?: React.ElementType;
+    /**
+     * Valor a mostrar cuando la propiedad es null o undefined.
+     * Por defecto es '-'.
+     */
+    defaultValue?: string;
 }

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

@@ -1,7 +1,39 @@
 import { ColumnNestedValueFormatterProps } from './types';
 /**
- * Function that return the formatter, customFilter and customSort
- * of the column for ColumnNestedValueFormatter.
+ * Hook para crear una columna que muestra valores de propiedades anidadas.
+ * @param props - Configuración del formatter
+ * @param props.fieldValue - Ruta a la propiedad usando dot notation (ej: 'user.profile.name')
+ * @param props.Component - Componente opcional para envolver el valor (default: React.Fragment)
+ * @param props.defaultValue - Valor a mostrar si es null/undefined (default: '-')
+ * @returns Objeto con { formatter, customFilter, customSort } para usar en la columna
+ * @example
+ * // Datos de ejemplo en el DataGrid:
+ * // [
+ * //   { id: 1, nestedValue: { value: 'Activo' } },
+ * //   { id: 2, nestedValue: { value: null } },
+ * //   { id: 3, nestedValue: { value: 'Pendiente' } },
+ * // ]
+ *
+ * // Crear la columna con el hook
+ * const nestedColumn = useColumnNestedValue<RowType>({
+ *   fieldValue: 'nestedValue.value',
+ *   defaultValue: 'N/A', // Opcional, por defecto es '-'
+ * });
+ *
+ * // Usar en la definición de columnas
+ * const columns = [
+ *   {
+ *     key: 'nestedValue',
+ *     name: 'Estado',
+ *     type: 'custom',
+ *     ...nestedColumn, // Spread incluye formatter, customFilter y customSort
+ *   }
+ * ];
+ *
+ * // Resultado en el DataGrid:
+ * // Fila 1: "Activo"
+ * // Fila 2: "N/A"     (porque el valor es null)
+ * // Fila 3: "Pendiente"
  */
 export declare const useColumnNestedValue: <TRow>(props: ColumnNestedValueFormatterProps<TRow>) => {
     formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;

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

@@ -6,8 +6,12 @@ import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
 import { C as ColumnNestedValueFormatter } from "./formatter.js";
 import { g as getColumnKey } from "../../helpers/shared/getColumnKey/getColumnKey.js";
 const getCustomNestedValueFilter = (props) => {
+  const { defaultValue = "-" } = props;
   return (row, value) => {
-    const property = getNullGuard(getPropertyByString(row, props.fieldValue));
+    const property = getNullGuard(
+      getPropertyByString(row, props.fieldValue),
+      defaultValue
+    );
     if (typeof property === "object") {
       return Object.values(property).includes(value);
     }
@@ -15,10 +19,17 @@ const getCustomNestedValueFilter = (props) => {
   };
 };
 const getCustomNestedValueSort = (props) => {
+  const { defaultValue = "-" } = props;
   return (a, b) => {
     const keyWiouthRow = getColumnKey(props.fieldValue);
-    const valueA = getNullGuard(getPropertyByString(a, keyWiouthRow));
-    const valueB = getNullGuard(getPropertyByString(b, keyWiouthRow));
+    const valueA = getNullGuard(
+      getPropertyByString(a, keyWiouthRow),
+      defaultValue
+    );
+    const valueB = getNullGuard(
+      getPropertyByString(b, keyWiouthRow),
+      defaultValue
+    );
     if (typeof valueA === "object" || typeof valueB === "object" || valueA === void 0 || valueB === void 0) {
       return 0;
     }
@@ -40,12 +51,15 @@ const useColumnNestedValue = (props) => {
       setStateProps(props);
     }
   }, [props]);
-  return useMemo(() => ({
-    formatter: ColumnNestedValueFormatter(stateProps),
-    renderGroupCell: ColumnNestedValueGroupFormatter(stateProps),
-    customFilter: getCustomNestedValueFilter(stateProps),
-    customSort: getCustomNestedValueSort(stateProps)
-  }), [stateProps]);
+  return useMemo(
+    () => ({
+      formatter: ColumnNestedValueFormatter(stateProps),
+      renderGroupCell: ColumnNestedValueGroupFormatter(stateProps),
+      customFilter: getCustomNestedValueFilter(stateProps),
+      customSort: getCustomNestedValueSort(stateProps)
+    }),
+    [stateProps]
+  );
 };
 export {
   useColumnNestedValue as u

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.4.14",
+  "version": "9.4.15",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {