@m4l/components 9.4.15 → 9.4.17-BE20260121-2

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/NumberInput/hooks/useNumberInput/useNumberInput.js

@@ -56,9 +56,11 @@ const useNumberInput = (parameters) => {
     (event, field, fieldValue, reason) => {
       if (field === "value" && typeof fieldValue !== "string") {
         switch (reason) {
+          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:inputChange":
             onChange?.(event, fieldValue);
             break;
+          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:clamp":
             onChange?.(event, fieldValue);
             break;

package/components/datagrids/views/TableView/hooks/useSortColumnsRows/useSortColumnsRows.js

@@ -20,6 +20,7 @@ function getComparator(columns, sortColumn) {
     return column.customSort;
   }
   switch (typeOrder) {
+    //Si el tipo de dato de la columna es un numerico, retorna una función de ordenamiento numérica
     case "number":
       return (a, b) => {
         try {
@@ -28,6 +29,7 @@ function getComparator(columns, sortColumn) {
           return -1;
         }
       };
+    //Por defecto retorna una función de ordenamiento de string
     default:
       return (a, b) => {
         try {

package/components/hook-form/RHFAutocompleteAsync/reducer/RHFAutocompleteReducer.js

@@ -65,6 +65,11 @@ const RHFAutocompleteAsyncReducer = (onChangeFilterParms) => (state, action) =>
         ...state,
         isOpen: false
       };
+    // case actionsType.SET_SELECTED_OPTIONS_TO_AUTOCOMPLETE:
+    //   return {
+    //     ...state,
+    //     selectedOptions: action.payload,
+    //   };
     default:
       return state;
   }

package/components/hook-form/RHFDaysOfWeekPicker/RHFDaysOfWeekPicker.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Componente RHFDaysOfWeekPicker que integra DaysOfWeekPicker con react-hook-form.
+ *
+ * Este componente permite seleccionar días de la semana en un formulario controlado
+ * por react-hook-form, proporcionando validación automática y manejo de estados.
+ *
+ * ### Características:
+ * - **Integración con RHF**: Se integra automáticamente con react-hook-form mediante el HOC withRHFController
+ * - **Validación**: Soporta validación mediante esquemas de validación (Yup, Zod, etc.)
+ * - **Estados del formulario**: Se deshabilita automáticamente durante el envío del formulario
+ * - **Label y errores**: El HOC maneja automáticamente el Label y los mensajes de error
+ * @example
+ * ```tsx
+ * const schema = Yup.object({
+ *   days: Yup.array().min(1, 'Debe seleccionar al menos un día').required('Campo requerido'),
+ * });
+ *
+ * <RHFDaysOfWeekPicker
+ *   name="days"
+ *   label="Días de la semana"
+ *   mandatory
+ *   disabledDays={[6]} // Deshabilita domingo
+ * />
+ * ```
+ */
+export declare const RHFDaysOfWeekPicker: import('react').ForwardRefExoticComponent<Omit<import('../../DaysOfWeekPicker').DaysOfWeekPickerProps & import('react').RefAttributes<HTMLDivElement> & import('../../../hocs').BaseRHFProps<import('react-hook-form').FieldValues>, "ref"> & import('react').RefAttributes<any>>;

package/components/hook-form/RHFDaysOfWeekPicker/RHFDaysOfWeekPicker.js

@@ -0,0 +1,6 @@
+import { w as withRHFController } from "../../../hocs/withRHFController/index.js";
+import { D as DaysOfWeekPicker } from "../../DaysOfWeekPicker/DaysOfWeekPicker.js";
+const RHFDaysOfWeekPicker = withRHFController(DaysOfWeekPicker);
+export {
+  RHFDaysOfWeekPicker as R
+};

package/components/hook-form/RHFDaysOfWeekPicker/index.d.ts

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

package/components/hook-form/RHFDaysOfWeekPicker/index.js

@@ -0,0 +1 @@
+

package/components/hook-form/index.d.ts

@@ -8,6 +8,7 @@ export * from './RHFCheckableList';
 export { RHFDateTime } from './RHFDateTime';
 export { RHFDateTimePicker } from './RHFDateTimePicker';
 export { RHFDatePicker } from './RHFDatePicker';
+export * from './RHFDaysOfWeekPicker';
 export { RHFMultiCheckbox } from './RHFMultiCheckbox';
 export { RHFSelect } from './RHFSelect';
 export { RHFHelperError } from './RHFHelperError';

package/components/index.d.ts

@@ -14,6 +14,7 @@ export * from './CommonActions/';
 export * from './ContainerFlow';
 export * from './CommonActions/dictionary';
 export * from './datagrids';
+export * from './DaysOfWeekPicker';
 export * from './DragResizeWindowRND';
 export * from './DynamicFilter';
 export * from './DynamicSort';

package/hocs/index.d.ts

@@ -1 +1,3 @@
 export { withToggle } from './withToggle';
+export { withRHFController } from './withRHFController';
+export type { BaseRHFProps, RHFControllerRenderProps, ComponentWithRHFControllerProps, WithRHFControllerProps, } from './withRHFController/types';

package/hocs/withRHFController/constants.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Constantes para el HOC withRHFController
+ */
+export declare const WITH_RHF_CONTROLLER_KEY = "withRHFController";
+/**
+ * Clases CSS para el HOC withRHFController
+ */
+export declare const WITH_RHF_CONTROLLER_CLASSES: Record<"root", string>;

package/hocs/withRHFController/constants.js

@@ -0,0 +1,8 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { W as WithRHFControllerSlots } from "./slots/WithRHFControllerEnum.js";
+const WITH_RHF_CONTROLLER_KEY = "withRHFController";
+const WITH_RHF_CONTROLLER_CLASSES = getComponentClasses(WITH_RHF_CONTROLLER_KEY, WithRHFControllerSlots);
+export {
+  WITH_RHF_CONTROLLER_CLASSES as W,
+  WITH_RHF_CONTROLLER_KEY as a
+};

package/hocs/withRHFController/index.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { FieldValues } from 'react-hook-form';
+import { BaseRHFProps, ComponentWithRHFControllerProps } from './types';
+/**
+ * HOC que envuelve un componente con la funcionalidad de Controller de react-hook-form.
+ *
+ * Este HOC automatiza la integración con react-hook-form proporcionando:
+ * - Acceso automático al control del formulario mediante useFormContext
+ * - Wrapper con Controller que maneja el estado del campo
+ * - Props del field, fieldState y formState pasadas automáticamente al componente envuelto
+ * - Props estándar de RHF (value, onChange, onBlur, name, error) extraídas del field y fieldState para compatibilidad
+ * @template TComponentProps - Props del componente que será envuelto
+ * @template TFieldValues - Tipo de los valores del formulario
+ * @param Component - Componente a envolver
+ * @returns Componente envuelto con funcionalidad RHF
+ * @example
+ * ```tsx
+ * // Componente base sin RHF - puede usar field completo o props individuales
+ * const MyInput = ({ field, fieldState, value, onChange, ...props }) => (
+ *   <input {...field} {...props} />
+ * );
+ *
+ * // O usar props estándar de RHF directamente
+ * const MyTextField = ({ value, onChange, onBlur, error, ...props }) => (
+ *   <TextField value={value} onChange={onChange} onBlur={onBlur} error={error} {...props} />
+ * );
+ *
+ * // Componente envuelto con HOC
+ * const RHFMyInput = withRHFController(MyInput);
+ * const RHFMyTextField = withRHFController(MyTextField);
+ *
+ * // Uso en formulario
+ * <RHFMyInput name="email" label="Email" />
+ * <RHFMyTextField name="email" label="Email" />
+ * ```
+ */
+export declare function withRHFController<TComponentProps extends Record<string, any> = {}, TFieldValues extends FieldValues = FieldValues>(Component: React.ComponentType<ComponentWithRHFControllerProps<TComponentProps, TFieldValues>>): React.ForwardRefExoticComponent<React.PropsWithoutRef<TComponentProps & BaseRHFProps<TFieldValues>> & React.RefAttributes<any>>;

package/hocs/withRHFController/index.js

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { useFormContext, Controller } from "react-hook-form";
+import { W as WITH_RHF_CONTROLLER_CLASSES } from "./constants.js";
+import clsx from "clsx";
+import { R as RootStyled } from "./slots/WithRHFControllerSlots.js";
+import { L as Label } from "../../components/Label/Label.js";
+import { H as HelperError } from "../../components/HelperError/HelperError.js";
+function withRHFController(Component) {
+  const WrappedComponent = forwardRef((props, ref) => {
+    const {
+      name,
+      control: controlProp,
+      // Puede permitir que el componente se use fuera de un FormProvider
+      label,
+      mandatory,
+      mandatoryMessage,
+      helperMessage,
+      size = "medium",
+      disabled,
+      id,
+      htmlFor,
+      ...componentProps
+    } = props;
+    const hookId = useId();
+    const htmlForId = id || htmlFor || hookId;
+    const contextControl = useFormContext()?.control;
+    const control = controlProp || contextControl;
+    if (!control) {
+      console.warn(
+        `withRHFController: No se encontró un control de formulario para el campo "${name}". Asegúrate de que el componente esté dentro de un FormProvider o proporciona el control como prop.`
+      );
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        name,
+        control,
+        render: ({ field, fieldState, formState }) => {
+          const { value, onChange, onBlur, name: fieldName } = field;
+          const isDisabled = disabled || formState.isSubmitting;
+          const controllerProps = {
+            ...componentProps,
+            // Props estándar de RHF (value, onChange, onBlur, name, error)
+            // Útiles para componentes que prefieren props individuales explícitas
+            value,
+            onChange,
+            onBlur,
+            name: fieldName,
+            error: !!fieldState.error,
+            // Props del HOC que también deben pasarse al componente (size, disabled, id)
+            size,
+            disabled: isDisabled,
+            id: htmlForId,
+            // Props del Controller (field completo, fieldState, formState)
+            field,
+            fieldState,
+            formState
+          };
+          return /* @__PURE__ */ jsxs(RootStyled, { ref, className: clsx(WITH_RHF_CONTROLLER_CLASSES.root), children: [
+            label && /* @__PURE__ */ jsx(
+              Label,
+              {
+                size,
+                label,
+                htmlFor: htmlForId,
+                mandatory,
+                mandatoryMessage,
+                helperMessage,
+                disabled: isDisabled,
+                error: !!fieldState.error
+              }
+            ),
+            /* @__PURE__ */ jsx(Component, { ...controllerProps, ref: field.ref, size, disabled: isDisabled }),
+            fieldState.error?.message && /* @__PURE__ */ jsx(
+              HelperError,
+              {
+                message: fieldState.error.message,
+                size,
+                htmlFor: htmlForId
+              }
+            )
+          ] });
+        }
+      }
+    );
+  });
+  const componentName = Component.displayName || Component.name || "Component";
+  WrappedComponent.displayName = `withRHFController(${componentName})`;
+  return WrappedComponent;
+}
+export {
+  withRHFController as w
+};

package/hocs/withRHFController/slots/WithRHFControllerEnum.d.ts

@@ -0,0 +1,3 @@
+export declare enum WithRHFControllerSlots {
+    root = "root"
+}

package/hocs/withRHFController/slots/WithRHFControllerEnum.js

@@ -0,0 +1,7 @@
+var WithRHFControllerSlots = /* @__PURE__ */ ((WithRHFControllerSlots2) => {
+  WithRHFControllerSlots2["root"] = "root";
+  return WithRHFControllerSlots2;
+})(WithRHFControllerSlots || {});
+export {
+  WithRHFControllerSlots as W
+};

package/hocs/withRHFController/slots/WithRHFControllerSlots.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Elemento div de react construido a través de styled,
+ * sirve para agrupar el contenido del HOC `withRHFController`
+ */
+export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/hocs/withRHFController/slots/WithRHFControllerSlots.js

@@ -0,0 +1,11 @@
+import { styled } from "@mui/material/styles";
+import { a as WITH_RHF_CONTROLLER_KEY } from "../constants.js";
+import { W as WithRHFControllerSlots } from "./WithRHFControllerEnum.js";
+import { w as withRHFControllerStyles } from "../withRHFController.styles.js";
+const RootStyled = styled("div", {
+  name: WITH_RHF_CONTROLLER_KEY,
+  slot: WithRHFControllerSlots.root
+})(withRHFControllerStyles?.root);
+export {
+  RootStyled as R
+};

package/hocs/withRHFController/slots/index.d.ts

@@ -0,0 +1,2 @@
+export { WithRHFControllerSlots } from './WithRHFControllerEnum';
+export * from './WithRHFControllerSlots';

package/hocs/withRHFController/slots/index.js

@@ -0,0 +1 @@
+

package/hocs/withRHFController/types.d.ts

@@ -0,0 +1,70 @@
+import { Control, FieldPath, FieldValues, ControllerRenderProps, ControllerFieldState, FormState } from 'react-hook-form';
+import { Theme } from '@mui/material';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { WithRHFControllerSlots } from './slots/WithRHFControllerEnum';
+import { WITH_RHF_CONTROLLER_KEY } from './constants';
+import { LabelPropsBase } from '../../components/Label/types';
+import { Sizes } from '@m4l/styles';
+/**
+ * Props que el componente envuelto recibirá del Controller de react-hook-form
+ */
+export interface RHFControllerRenderProps<TFieldValues extends FieldValues = FieldValues> {
+    /** Props del field del Controller */
+    field: ControllerRenderProps<TFieldValues, FieldPath<TFieldValues>>;
+    /** Estado del field (error, invalid, etc.) */
+    fieldState: ControllerFieldState;
+    /** Estado del formulario completo */
+    formState: FormState<TFieldValues>;
+}
+/**
+ * Props base que todos los componentes RHF deben tener
+ */
+export interface BaseRHFProps<TFieldValues extends FieldValues = FieldValues> extends LabelPropsBase {
+    /** Nombre del campo en el formulario */
+    name: FieldPath<TFieldValues>;
+    /** Control del formulario (opcional, se obtiene automáticamente de useFormContext si no se proporciona) */
+    control?: Control<TFieldValues>;
+    /** Tamaño del componente */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /** Indica si el componente está deshabilitado */
+    disabled?: boolean;
+    /** Identificador único para el campo */
+    id?: string;
+}
+/**
+ * Props que el HOC añade al componente envuelto
+ */
+export interface WithRHFControllerProps<TFieldValues extends FieldValues = FieldValues> extends BaseRHFProps<TFieldValues> {
+    /** Props del render del Controller */
+    renderProps?: RHFControllerRenderProps<TFieldValues>;
+}
+/**
+ * Props adicionales que el HOC pasa al componente envuelto
+ */
+export interface WithRHFControllerAdditionalProps {
+    /** Valor del campo */
+    value?: any;
+    /** Función de cambio de valor */
+    onChange?: (...event: any[]) => void;
+    /** Función de blur (puede ser de diferentes tipos según el componente) */
+    onBlur?: (...args: any[]) => void;
+    /** Nombre del campo */
+    name?: string;
+    /** Indica si hay error */
+    error?: boolean;
+    /** Tamaño del componente */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /** Indica si el componente está deshabilitado */
+    disabled?: boolean;
+    /** Identificador único para el campo */
+    id?: string;
+}
+/**
+ * Tipo para el componente que será envuelto por el HOC
+ */
+export type ComponentWithRHFControllerProps<TComponentProps extends Record<string, any> = {}, TFieldValues extends FieldValues = FieldValues> = TComponentProps & RHFControllerRenderProps<TFieldValues> & Partial<WithRHFControllerAdditionalProps>;
+/**
+ * Define los estilos del HOC `withRHFController`. Permite la personalización parcial
+ * de las reglas de estilo mediante `M4LOverridesStyleRules`.
+ */
+export type WithRHFControllerStyles = M4LOverridesStyleRules<WithRHFControllerSlots, typeof WITH_RHF_CONTROLLER_KEY, Theme>;

package/hocs/withRHFController/withRHFController.styles.d.ts

@@ -0,0 +1,5 @@
+import { WithRHFControllerStyles } from './types';
+/**
+ * Conjunto de estilos para el HOC `withRHFController`.
+ */
+export declare const withRHFControllerStyles: WithRHFControllerStyles;

package/hocs/withRHFController/withRHFController.styles.js

@@ -0,0 +1,14 @@
+const withRHFControllerStyles = {
+  /**
+   * Estilos para el contenedor principal del componente.
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp1,
+    width: "100%"
+  })
+};
+export {
+  withRHFControllerStyles as w
+};

package/hocs/withRHFController/withRHFController.test.d.ts

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