@m4l/components 9.4.14 → 9.4.15-JT21012026.beta.1

package/components/DynamicFilter/subcomponents/FieldTypes/BooleanFilter/helpers.js

@@ -2,6 +2,7 @@ import * as Yup from "yup";
 import { B as BOOLEAN_OPERATORS } from "../../../constants.js";
 import { B as BooleanFilter } from "./index.js";
 import { D as DYNAMIC_FILTER_DICTIONARY_ID, a as DICCTIONARY } from "../../../dictionary.js";
+import { g as getFormatBoolean } from "../../../../formatters/BooleanFormatter/BooleanFormatter.js";
 import { c as createValidationSchema, a as createValidationFullObject, b as createValidationPartialObject } from "../../../../hook-form/RHFormProvider/schema.js";
 class BooleanFilterHelpers {
   getComponent() {
@@ -67,7 +68,15 @@ class BooleanFilterHelpers {
    * getLabel devuelve las etiquetas para el filtro booleano.
    */
   getLabels(filter, getLabel, _formatters, _field) {
-    const labelOperands = filter.operand1 ? getLabel(DICCTIONARY.operand_true) : getLabel(DICCTIONARY.operand_false);
+    const presentationType = filter.field.presentationType;
+    const value = filter.operand1;
+    let labelOperands;
+    if (presentationType && typeof presentationType === "object" && "trueLabel" in presentationType) {
+      labelOperands = value ? presentationType.trueLabel : presentationType.falseLabel;
+    } else {
+      const preset = presentationType ?? "string_true_false";
+      labelOperands = getFormatBoolean(preset, value, getLabel);
+    }
     return {
       labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
       labelOperator: getLabel(

package/components/DynamicFilter/types.d.ts

@@ -5,6 +5,19 @@ import { M4LOverridesStyleRules } from '../../@types/augmentations';
 import { RHFAutocompleteAsyncProps } from '../hook-form/RHFAutocompleteAsync/types';
 import { RHFSelectProps } from '../hook-form/RHFSelect';
 import { DynamicFilterSlots } from './slots';
+import { PresentationType } from '../formatters/BooleanFormatter/types';
+/**
+ * Labels personalizados para valores booleanos
+ */
+export interface BooleanCustomLabels {
+    trueLabel: string;
+    falseLabel: string;
+}
+/**
+ * Tipo de presentación para campos booleanos en DynamicFilter.
+ * Solo incluye las presentaciones de texto del BooleanFormatter más labels personalizados.
+ */
+export type BooleanPresentationType = Extract<PresentationType, 'string_true_false' | 'string_yes_no'> | BooleanCustomLabels;
 export type FieldType = 'number' | 'string' | 'boolean' | 'datetime' | 'select' | 'selectAsync';
 export type OperandType = number | string | boolean | Date | [] | object;
 export type OperandInitialFilterType = number | string | boolean | [] | object;
@@ -47,6 +60,15 @@ export interface FieldBase<T extends FieldType = FieldType, TOption = any> {
     selectOptions?: SelectOptions;
     selectAsyncOptions?: SelectAsyncOptions<TOption>;
     skipColumnValidation?: boolean;
+    /**
+     * Tipo de presentación para campos booleanos.
+     * Solo aplica cuando type es 'boolean'.
+     * - 'string_true_false': "Verdadero" / "Falso" (default)
+     * - 'string_yes_no': "Sí" / "No"
+     * - { trueLabel: string, falseLabel: string }: Labels personalizados
+     * @default 'string_true_false'
+     */
+    presentationType?: BooleanPresentationType;
 }
 export interface FieldWithSelectAsync<T extends 'selectAsync', TOption = any> extends FieldBase<T, TOption> {
     selectAsyncOptions: SelectAsyncOptions<TOption>;

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-JT21012026.beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {