@m4l/components 9.2.52 → 9.2.54-beta.1

package/.storybook/utils/getStylesColorsByMode.d.ts

@@ -55,7 +55,7 @@ export declare const colorsLight: {
         readonly backdrop: string;
         readonly base: string;
         readonly blur: string;
-        readonly paper: "#000";
+        readonly paper: "#fff";
     };
     readonly chips: {
         readonly error: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
@@ -288,7 +288,7 @@ export declare const colorsLight: {
     readonly border: {
         readonly main: string;
         readonly dens: string;
-        readonly default: string | undefined;
+        readonly default: string;
         readonly secondary: string;
         readonly disabled: string;
         readonly error: string;
@@ -440,7 +440,7 @@ export declare const colorsDark: {
         readonly backdrop: string;
         readonly base: string;
         readonly blur: string;
-        readonly paper: "#000";
+        readonly paper: "#fff";
     };
     readonly chips: {
         readonly error: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
@@ -673,7 +673,7 @@ export declare const colorsDark: {
     readonly border: {
         readonly main: string;
         readonly dens: string;
-        readonly default: string | undefined;
+        readonly default: string;
         readonly secondary: string;
         readonly disabled: string;
         readonly error: string;

package/components/Chip/Chip.js

@@ -22,6 +22,7 @@ const Chip = forwardRef((props, ref) => {
     iconButtonProps,
     className,
     dataTestId,
+    disabledDeleteButton,
     ...others
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -93,7 +94,8 @@ const Chip = forwardRef((props, ref) => {
             src: iconClose,
             size: adjustedSize,
             ownerState: { ...ownerState },
-            onClick: handleDelete
+            onClick: handleDelete,
+            disabled: disabledDeleteButton
           }
         )
       ]

package/components/Chip/types.d.ts

@@ -74,6 +74,10 @@ export interface ChipProps {
      * Test id for the `Chip`.
      */
     dataTestId?: string;
+    /**
+     * If the `Chip` delete button is disabled.
+     */
+    disabledDeleteButton?: boolean;
 }
 /**
  * Owner state of the `Chip` used to define internal style and behavior properties.

package/components/DataGrid/constants.d.ts

@@ -1,3 +1,24 @@
 export declare const DATAGRID_PREFIX_NAME = "M4LDataGrid";
 export declare const DATAGRID_SELECT_COLUMN_KEY = "M4LDataGrid-CheckedColumn";
 export declare const DATAGRID_ACTIONS_COLUMN_KEY = "M4LDataGrid-ActionsColumn";
+export declare enum DATAGRID_SEMANTIC_WIDTHS {
+    actions = 40,
+    bigChip = 190,
+    bigDescription = 350,
+    bigId = 200,
+    bigName = 290,
+    bigNumber = 150,
+    date = 180,
+    email = 300,
+    mediumChip = 140,
+    mediumDescription = 280,
+    mediumId = 130,
+    mediumName = 180,
+    mediumNumber = 150,
+    percentNumber = 90,
+    smallChip = 70,
+    smallDescription = 130,
+    smallId = 50,
+    smallName = 90,
+    smallNumber = 60
+}

package/components/DataGrid/constants.js

@@ -1,8 +1,31 @@
 const DATAGRID_PREFIX_NAME = "M4LDataGrid";
 const DATAGRID_SELECT_COLUMN_KEY = "M4LDataGrid-CheckedColumn";
 const DATAGRID_ACTIONS_COLUMN_KEY = "M4LDataGrid-ActionsColumn";
+var DATAGRID_SEMANTIC_WIDTHS = /* @__PURE__ */ ((DATAGRID_SEMANTIC_WIDTHS2) => {
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["actions"] = 40] = "actions";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["bigChip"] = 190] = "bigChip";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["bigDescription"] = 350] = "bigDescription";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["bigId"] = 200] = "bigId";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["bigName"] = 290] = "bigName";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["bigNumber"] = 150] = "bigNumber";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["date"] = 180] = "date";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["email"] = 300] = "email";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["mediumChip"] = 140] = "mediumChip";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["mediumDescription"] = 280] = "mediumDescription";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["mediumId"] = 130] = "mediumId";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["mediumName"] = 180] = "mediumName";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["mediumNumber"] = 150] = "mediumNumber";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["percentNumber"] = 90] = "percentNumber";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["smallChip"] = 70] = "smallChip";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["smallDescription"] = 130] = "smallDescription";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["smallId"] = 50] = "smallId";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["smallName"] = 90] = "smallName";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["smallNumber"] = 60] = "smallNumber";
+  return DATAGRID_SEMANTIC_WIDTHS2;
+})(DATAGRID_SEMANTIC_WIDTHS || {});
 export {
   DATAGRID_PREFIX_NAME as D,
   DATAGRID_SELECT_COLUMN_KEY as a,
-  DATAGRID_ACTIONS_COLUMN_KEY as b
+  DATAGRID_ACTIONS_COLUMN_KEY as b,
+  DATAGRID_SEMANTIC_WIDTHS as c
 };

package/components/DataGrid/index.d.ts

@@ -6,3 +6,4 @@ export { getDataGridComponentsDictionary } from './dictionary';
 export { TextEditor, NumberEditor } from './subcomponents/editors/TextEditor';
 export { getDataGridRowsFromSet } from './utils/getDataGridRowsFromSet';
 export type { IGridConfig, BaseConfigColumn } from './contexts/DataGridContext/types';
+export { DATAGRID_SEMANTIC_WIDTHS } from './constants';

package/components/DataGrid/subcomponents/Table/subcomponents/ActionsColumn.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { useTheme } from "@mui/material";
-import { b as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../constants.js";
+import { b as DATAGRID_ACTIONS_COLUMN_KEY, c as DATAGRID_SEMANTIC_WIDTHS } from "../../../constants.js";
 import { M as MenuActions } from "../../../../MenuActions/MenuActions.js";
 function ActionsFormatter(props) {
   const { rowActionsGetter } = useDataGrid();
@@ -27,7 +27,7 @@ const ActionsColumn = {
   key: DATAGRID_ACTIONS_COLUMN_KEY,
   // name: getLabel(dictionary.LABEL_ACTIONS),
   name: getActionLabel(),
-  width: 32,
+  width: DATAGRID_SEMANTIC_WIDTHS.actions,
   minWidth: 32,
   isDraggable: false,
   withFilter: false,

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

@@ -2,6 +2,7 @@ import * as Yup from "yup";
 import { b as DATE_TIME_OPERATORS } from "../../../constants.js";
 import { D as DYNAMIC_FILTER_DICTIONARY_ID, a as DICCTIONARY } from "../../../dictionary.js";
 import { D as DateTimeFilter } from "./index.js";
+import { startOfDay, endOfDay } from "date-fns";
 import { i as isValidDate } from "../../../../../utils/isValidDate.js";
 class DateTimeFilterHelpers {
   getComponent() {
@@ -34,8 +35,8 @@ class DateTimeFilterHelpers {
   getFormValue(field, getLabel, filterValueDateTime) {
     const filterValue = filterValueDateTime;
     const operator = filterValue ? filterValue.operator : field.defaultOperator ?? "b";
-    const defaultStartDate = /* @__PURE__ */ new Date();
-    const defaultEndDate = /* @__PURE__ */ new Date();
+    const defaultStartDate = startOfDay(/* @__PURE__ */ new Date());
+    const defaultEndDate = endOfDay(/* @__PURE__ */ new Date());
     const defaultOperand1 = field.defaultOperand1 && field.defaultOperand1 instanceof Date ? field.defaultOperand1 : defaultStartDate;
     const defaultOperand2 = field.defaultOperand2 && field.defaultOperand2 instanceof Date ? field.defaultOperand2 : defaultEndDate;
     const formValueOperand1 = filterValue ? filterValue.operand1 : defaultOperand1;

package/components/DynamicFilter/types.d.ts

@@ -2,7 +2,7 @@ import { Maybe } from '@m4l/core';
 import { Sizes } from '@m4l/styles';
 import { Theme } from '@mui/material/styles';
 import { M4LOverridesStyleRules } from '../../@types/augmentations';
-import { RHFAutocompleteAsyncBaseProps } from '../hook-form/RHFAutocompleteAsync/types';
+import { RHFAutocompleteAsyncProps } from '../hook-form/RHFAutocompleteAsync/types';
 import { RHFSelectProps } from '../hook-form/RHFSelect';
 import { DynamicFilterSlots } from './slots';
 export type FieldType = 'number' | 'string' | 'boolean' | 'datetime' | 'select' | 'selectAsync';
@@ -27,7 +27,7 @@ export type OperandsSelectArray = Array<OperandSelect>;
 export type FieldTypeOperator<T extends FieldType> = T extends 'boolean' ? BooleanOperator : T extends 'datetime' ? DateTimeOperator : T extends 'number' ? NumberOperator : T extends 'select' ? SelectOperator : T extends 'selectAsync' ? SelectOperatorAsync : T extends 'string' ? StringOperator : T;
 export type FieldTypeOperand<T extends FieldType> = T extends 'boolean' ? boolean : T extends 'datetime' ? Date : T extends 'number' ? number : T extends 'string' ? string : T extends 'select' ? OperandSelect : T extends 'selectAsync' ? OperandSelectAsync : FieldType;
 export type FieldTypeOperandsArray<T extends FieldType> = T extends 'boolean' ? never : T extends 'datetime' ? never : T extends 'number' ? never : T extends 'string' ? never : T extends 'select' ? OperandsSelectArray : T extends 'selectAsync' ? OperandsArraySelectAsync : never;
-type SelectAsyncOptions<TOption = any> = Pick<RHFAutocompleteAsyncBaseProps<TOption>, 'type' | 'endPoint' | 'responseToCamelCase' | 'multiple' | 'autoComplete' | 'autoCapitalize' | 'parms' | 'timeout'> & {
+type SelectAsyncOptions<TOption = any> = Pick<RHFAutocompleteAsyncProps<TOption>, 'type' | 'endPoint' | 'responseToCamelCase' | 'multiple' | 'autoComplete' | 'autoCapitalize' | 'parms' | 'timeout'> & {
     getOptionLabel: (option: TOption) => string;
     isOptionEqualToValue: (options: TOption | TOption[], value: TOption) => boolean;
     getOptionId: (option: TOption) => string | number;

package/components/ObjectLogs/subcomponents/ObjectLogsByOthers/ObjectLogsByOthers.js

@@ -125,7 +125,7 @@ function ObjectLogsByOthers(props) {
                 columns,
                 rows,
                 rowKeyGetter: (row) => row.id,
-                withActions: false,
+                withActions: true,
                 actionsProps: {}
               },
               "users_list_logs"

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

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
 import { useIsMobile } from "@m4l/graphics";
 import { useTheme } from "@mui/material";
-import { useState, useEffect } from "react";
+import { useId, useState, useCallback, useEffect } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import { A as AutocompleteRootStyled, L as LabelStyled } from "./slots/RHFAutocompleteSlots.js";
 import { A as Autocomplete } from "../../mui_extended/Autocomplete/Autocomplete.js";
@@ -29,28 +29,36 @@ function RHFAutocomplete(props) {
     imageScale = true,
     imageRepeat,
     refresh
+    // onChange: onChangeRHF,
   } = props;
+  const htmlForId = useId();
   const theme = useTheme();
   const [open, setOpen] = useState(false);
   const isDesktop = !useIsMobile();
-  const onCloseLocal = (event, reason) => {
+  const onCloseLocal = useCallback((event, reason) => {
     setOpen(false);
     if (onClose) {
       onClose(event, reason);
     }
-  };
-  const onOpenLocal = (event) => {
-    setOpen((currentState) => !currentState);
-    if (onOpen) {
-      onOpen(event);
-    }
-  };
-  const getOptionLabelLocal = (option) => {
-    if (option === void 0 || option === null) {
-      return "";
-    }
-    return getOptionLabel(option);
-  };
+  }, [onClose]);
+  const onOpenLocal = useCallback(
+    (event) => {
+      setOpen((currentState) => !currentState);
+      if (onOpen) {
+        onOpen(event);
+      }
+    },
+    [onOpen]
+  );
+  const getOptionLabelLocal = useCallback(
+    (option) => {
+      if (option === void 0 || option === null) {
+        return "";
+      }
+      return getOptionLabel(option);
+    },
+    [getOptionLabel]
+  );
   const paletteColor = getPropertyByString(
     theme.vars.palette,
     disabled ? "default" : color || "default",
@@ -108,11 +116,11 @@ function RHFAutocomplete(props) {
                 {
                   ownerState: { ...ownerState },
                   label,
+                  htmlFor: htmlForId,
                   size,
                   mandatory,
                   mandatoryMessage,
                   helperMessage,
-                  htmlFor: `autocomplete-${nameRHF}`,
                   disabled
                 }
               ),
@@ -124,8 +132,10 @@ function RHFAutocomplete(props) {
                   options,
                   getOptionLabel,
                   isOptionEqualToValue,
-                  multiple: multiple ? true : void 0,
-                  onChange: (_e, newValue) => onChange(newValue),
+                  multiple,
+                  onChange: (_event, newValue, _reason) => {
+                    onChange(newValue);
+                  },
                   onChangeFilterParmsLocal,
                   refresh,
                   disabled,
@@ -133,7 +143,8 @@ function RHFAutocomplete(props) {
                   onOpen: onOpenLocal,
                   onClose: onCloseLocal,
                   size,
-                  value
+                  value,
+                  htmlFor: htmlForId
                 }
               ),
               currentVariant === "error" ? /* @__PURE__ */ jsx(HelperError, { message: error?.message }) : null

package/components/hook-form/RHFAutocomplete/tests/common.d.ts

@@ -0,0 +1,37 @@
+import { renderMaterialUI } from '../../../../test';
+import { FieldValues } from 'react-hook-form';
+import { RHFAutocompleteProps } from '../types';
+import * as Yup from 'yup';
+export declare const FIELD_NAME = "rhf-autocomplete";
+export declare const FIELD_NAME_REQUIRED = "rhf-autocomplete-required";
+export declare const FIELD_NAME_PRESELECTED = "rhf-autocomplete-preselected";
+export declare const FIELD_NAME_PRESELECTED_NOT_IN_OPTIONS = "rhf-autocomplete-preselected-not-in-options";
+export declare const FIELD_NAME_PRESELECTED_MULTIPLE = "rhf-autocomplete-preselected-multiple";
+export declare const FIELD_NAME_PRESELECTED_MULTIPLE_NOT_IN_OPTIONS = "rhf-autocomplete-preselected-multiple-not-in-options";
+export interface OptionsTests {
+    id: number;
+    name: string;
+}
+export declare const mockItems: OptionsTests[];
+export declare const mockItemPreselected: OptionsTests;
+export declare const mockItemPreselectedMultiple: OptionsTests[];
+export declare const mockItemPreselectedNotInOptions: OptionsTests;
+export declare const mockItemPreselectedMultipleNotInOptions: OptionsTests[];
+export declare const INITIAL_FORM_VALUES: FieldValues;
+export declare const DEFAULT_PROPS: RHFAutocompleteProps<OptionsTests>;
+export declare const errorMessage = "This field is required";
+export declare const VALIDATION_SCHEMA: Yup.ObjectSchema<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, {
+    "rhf-autocomplete-required": import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+}>, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, {
+    "rhf-autocomplete-required": import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+}>>, import('yup/lib/object').AssertsShape<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, {
+    "rhf-autocomplete-required": import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+}>>>;
+/**
+ * Renderiza el componente con el contexto de EnvironmentProvider y RHFormProvider.
+ */
+export declare const renderWithContexts: (ui: React.ReactElement, initialValuesFormContext?: FieldValues, validationSchema?: any) => ReturnType<typeof renderMaterialUI>;
+/**
+ * Renders the RHFAutocompleteAsync component with the provided props.
+ */
+export declare const renderRHFAutocomplete: (fieldName: string, overrideProps?: Partial<RHFAutocompleteProps<OptionsTests>>, withFormValidation?: boolean) => ReturnType<typeof renderMaterialUI>;

package/components/hook-form/RHFAutocomplete/types.d.ts

@@ -1,4 +1,4 @@
-import { AutocompleteCloseReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteValue, AutocompleteProps as MUIAutocompleteProps, Theme, PaletteColor, PopperProps } from '@mui/material';
+import { AutocompleteCloseReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteProps as MUIAutocompleteProps, Theme, PaletteColor, PopperProps } from '@mui/material';
 import { ComponentPalletColor, Sizes } from '@m4l/styles';
 import { TextFieldProps } from '../../mui_extended/TextField/types';
 import { RFHAUTOCOMPLETE_KEY_COMPONENT } from './constants';
@@ -12,7 +12,7 @@ export type RHFAutocompleteType = 'text' | 'image';
  * Props for the unified Autocomplete component.
  * Supports both single and multiple selection, and two types: `text` and `image`.
  */
-export interface RHFAutocompleteProps<T, Multiple extends boolean | undefined = true, DisableClearable extends boolean | undefined = true, FreeSolo extends boolean | undefined = false> extends Omit<MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, 'variant' | 'color' | 'size' | 'value' | 'classes' | 'defaultValue' | 'onBlur' | 'onFocus' | 'autoComplete' | 'renderInput'>, Omit<TextFieldProps, 'label' | 'variant' | 'defaultValue' | 'classes' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'ref' | 'onChange' | 'helperText'>, Omit<LabelProps, 'label'> {
+export interface RHFAutocompleteProps<T = any, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined> extends Omit<MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, 'variant' | 'color' | 'size' | 'value' | 'classes' | 'defaultValue' | 'onBlur' | 'onFocus' | 'autoComplete' | 'renderInput' | 'onChange' | 'open' | 'value' | 'multiple'>, Omit<TextFieldProps, 'label' | 'variant' | 'defaultValue' | 'classes' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'ref' | 'onChange' | 'helperText' | 'value'>, Omit<LabelProps, 'label'> {
     name: string;
     /**
      * The label for the autocomplete field.
@@ -20,11 +20,6 @@ export interface RHFAutocompleteProps<T, Multiple extends boolean | undefined =
     popperProps?: Omit<PopperProps, 'color'>;
     onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     autoComplete?: string;
-    /**
-     * The value of the autocomplete, supports single or multiple selection.
-     * Extended to include `null` for controlled components.
-     */
-    value?: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo> | null | undefined;
     size?: Extract<Sizes, 'small' | 'medium'>;
     variant?: RHFAutocompleteVariants;
     color?: Extract<ComponentPalletColor, 'primary'>;
@@ -42,7 +37,7 @@ export interface RHFAutocompleteProps<T, Multiple extends boolean | undefined =
     helperMessage?: string;
     onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
     onChangeFilterParmsLocal?: (newValue: string, reason: AutocompleteInputChangeReason) => void;
-    multiple?: Multiple;
+    multiple?: boolean;
     type?: RHFAutocompleteType;
     getOptionUrlImage?: (option: T) => string;
     imageScale?: boolean;

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

@@ -1,7 +1,34 @@
-import { RHFAutocompleteAsyncBaseProps } from './types';
+import { RHFAutocompleteAsyncProps } from './types';
 /**
- * RHFAutocompleteProps is a component that handles asynchronous autocomplete functionality.
- * @param props - The properties passed to the component.
- * @returns A React component.
+ * RHFAutocompleteProps is a component that handles asynchronous autocomplete functionality
+ * Requerimientos:
+ *
+ * - Generales
+ *   - (Test OK) Solo cuando se abre el combo se debe hacer el request si nunca se ha hecho .
+ *
+ *
+ *
+ * - Si al componente se le define onChangeFilterParms
+ *   - (Test OK) Solo cuando se abre el combo se debe hacer el request .
+ *   - (Test OK) Si se abre el combo varias veces, solo se hace el request la primera vez si no han cambiado los parms.
+ *   - (Test OK) Si cambian los parms (Normalmente cuando el componente depende de otro componente), al volver a abrir el combo se debe volver a hacer el request.
+ *   - (Test OK) Si el request esta en curso y se cierra el combo, se debe dejar terminar el request para no perder la respuesta.
+ *   - (Test OK) Si el request genera un error, debe dejar las mismas opciones y en el proximo open se debe volver a hacer el request.
+ *   - Si es multiple = false
+ *     - (Test OK) Si el usuario tiene preseleccionada una opcion al cargar el componente, esta opcion debe verse incluso si no se abierto el combo.
+ *     - (Test OK) Si tiene preseleccionada una opcion, se abre el combo y cuando llega la respuesta no está dentro de las que llegan de la red,
+ *                 no debe desaparecer la opcion preseleccionada, solo si se selecciona otra opcion.
+ *
+ *   - Si es multiple = true
+ *     - (Test OK) Si el usuario tiene preseleccionadas una opcion al cargar el componente, esta opcion debe verse incluso si no se abierto el combo.
+ *     - (Test OK) Si tiene preseleccionadas varias opciones, se abre el combo y cuando llega la respuesta no están dentro de las que llegan de la red,
+ *                 no deben desaparecer las opciones preseleccionadas, solo si se selecciona otra opcion.
+ *
+ * - Si el componente se le define onChangeFilterParms
+ *   - (Test OK) Si se define multiple y onChangeFilterParms, se debe lanzar un error.
+ *   - (Test OK) Cuando se ejecuta se hace la primera apertura debe ejecutarse el request con los parms y adicionalmente los que devuelve onChangeFilterParms.
+ *   - (Test OK) Si el usuario digita y deja espacios de 300ms, se encola otra petición usando onChangeFilterParms.
+ *   - (Test OK) Si el request esta en curso y el usuario digita, cancela la petición actual.
+ *
  */
-export declare function RHFAutocompleteAsync<T>(props: RHFAutocompleteAsyncBaseProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function RHFAutocompleteAsync<T>(props: RHFAutocompleteAsyncProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
-import { useNetwork, getPropertyByString } from "@m4l/core";
 import debounce from "lodash-es/debounce";
-import { useState, useCallback, useEffect } from "react";
+import { useReducer, useCallback } from "react";
+import { a as actionsType } from "./types.js";
 import { R as RHFAutocomplete } from "../RHFAutocomplete/RHFAutocomplete.js";
-import { deepEqual } from "fast-equals";
+import { R as RHFAutocompleteAsyncReducer, g as getInitialStateRHFAutocompleteAsync } from "./reducer/RHFAutocompleteReducer.js";
+import { u as useFetchOptions } from "./hooks/useFetchOptions.js";
 function RHFAutocompleteAsync(props) {
   const {
     name,
     endPoint,
-    responseToCamelCase,
     label,
     timeout = 5e3,
     parms,
@@ -17,112 +17,77 @@ function RHFAutocompleteAsync(props) {
     isRemote = true,
     isExternalUrl = false,
     onChangeFilterParms,
-    onChange,
-    onOpen,
-    onClose,
     getOptionLabel,
     isOptionEqualToValue,
     multiple,
     disabled,
     skeletonWidth,
-    open,
-    value
+    responseToCamelCase
   } = props;
-  const { networkOperation } = useNetwork();
-  const [options, setOptions] = useState([]);
-  const [firstOpen, setFirstOpen] = useState(0);
-  const [loading, setIsloading] = useState(false);
-  const [newRefresh, setNewRefresh] = useState(0);
-  const [canLoadOptions, setCanLoadOptions] = useState(true);
-  const [filterParms, setFilterParms] = useState(() => onChangeFilterParms ? onChangeFilterParms("") : {});
+  const [state, dispatch] = useReducer(
+    RHFAutocompleteAsyncReducer(onChangeFilterParms),
+    getInitialStateRHFAutocompleteAsync({
+      parms,
+      onChangeFilterParms
+    })
+  );
+  if (multiple && onChangeFilterParms) {
+    throw new Error("multiple no puede estar habilitado cuando se define onChangeFilterParms, definir el filtro en los parms, si es necesario");
+  }
+  useFetchOptions({
+    state,
+    dispatch,
+    endPoint,
+    timeout,
+    isExternalUrl,
+    parms,
+    responseToCamelCase,
+    isRemote,
+    resultField
+  });
   const refresh = () => {
-    setNewRefresh((current) => current + 1);
-    firstOpen === 0 && hanldeFirstOpen();
+    dispatch({ type: actionsType.REFRESH });
   };
-  const onOpenLocal = (event) => {
-    if (onOpen) {
-      onOpen(event);
-    }
-    hanldeFirstOpen();
+  const onOpenLocal = () => {
+    dispatch({ type: actionsType.OPEN });
+  };
+  const onCloseLocal = () => {
+    dispatch({ type: actionsType.CLOSE });
   };
   const debouncedFilter = useCallback(
-    debounce(
-      (newFilterParms) => {
-        setCanLoadOptions(true);
-        setFilterParms((oldValue) => {
-          if (deepEqual(oldValue, newFilterParms)) {
-            return oldValue;
-          }
-          return newFilterParms;
-        });
-      },
-      300
-    ),
-    [setCanLoadOptions, setFilterParms]
+    debounce((newFilterParms) => {
+      dispatch({
+        type: actionsType.SET_QUERY_PARAMS,
+        payload: newFilterParms
+      });
+    }, 300, {
+      // leading: true,
+      trailing: true
+    }),
+    [dispatch]
   );
-  const onChangeFilterParmsLocal = (newValue) => {
-    if (onChangeFilterParms) {
+  const onChangeFilterParmsLocal = useCallback((newValue, reason) => {
+    if (onChangeFilterParms && reason === "input") {
       debouncedFilter(onChangeFilterParms(newValue));
     }
-  };
-  useEffect(() => {
-    setCanLoadOptions(true);
-  }, [parms, endPoint]);
-  const hanldeFirstOpen = () => {
-    if (firstOpen === 0) {
-      setFirstOpen(1);
-    }
-  };
-  useEffect(() => {
-    let cancel = false;
-    if (firstOpen === 1 && !loading && canLoadOptions) {
-      setIsloading(true);
-      setOptions([]);
-      setCanLoadOptions(false);
-      networkOperation({
-        method: "GET",
-        endPoint,
-        timeout,
-        isExternalUrl,
-        parms: { ...parms, ...filterParms },
-        responseToCamelCase,
-        isRemote
-      }).then((response) => {
-        if (cancel) {
-          return;
-        }
-        const valueMaybeArray = getPropertyByString(response, resultField);
-        const newOptions = Array.isArray(valueMaybeArray) ? valueMaybeArray : [];
-        setOptions(newOptions);
-      }).finally(() => {
-        setIsloading(false);
-        setCanLoadOptions(true);
-      });
-    }
-    return () => {
-      cancel = true;
-    };
-  }, [firstOpen, parms, filterParms, endPoint, newRefresh]);
+  }, [onChangeFilterParms, debouncedFilter]);
   return /* @__PURE__ */ jsx(
     RHFAutocomplete,
     {
       name,
-      loading,
+      loading: state.loading,
       label,
-      options,
+      options: state.options,
       onChangeFilterParmsLocal: onChangeFilterParms ? onChangeFilterParmsLocal : void 0,
       size,
       refresh: () => refresh(),
       onOpen: onOpenLocal,
-      onChange,
       getOptionLabel,
       isOptionEqualToValue,
       multiple,
       disabled,
-      onClose,
-      skeletonWidth,
-      open,
-      value
+      onClose: onCloseLocal,
+      skeletonWidth
     }
   );
 }

package/components/hook-form/RHFAutocompleteAsync/RHFAutocompleteAsyncStyles.d.ts

@@ -1,2 +1,2 @@
-import { RHFAutocompleteAyncStyles } from './types';
-export declare const rhfAutocompleteAsyncSyles: RHFAutocompleteAyncStyles;
+import { RHFAutocompleteAsyncStyles } from './types';
+export declare const rhfAutocompleteAsyncSyles: RHFAutocompleteAsyncStyles;

package/components/hook-form/RHFAutocompleteAsync/hooks/useFetchOptions.d.ts

@@ -0,0 +1,5 @@
+import { UseFetchOptionsProps } from '../types';
+/**
+ * Hook to fetch options for autocomplete.
+ */
+export declare const useFetchOptions: <T>(props: UseFetchOptionsProps<T>) => void;