@m4l/components 9.2.52 → 9.2.53

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;

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

@@ -0,0 +1,64 @@
+import { useRef, useEffect } from "react";
+import { a as actionsType } from "../types.js";
+import { useNetwork, getPropertyByString } from "@m4l/core";
+const useFetchOptions = (props) => {
+  const {
+    state,
+    dispatch,
+    endPoint,
+    timeout,
+    isExternalUrl,
+    parms,
+    responseToCamelCase,
+    isRemote,
+    resultField = "data"
+  } = props;
+  const { networkOperation } = useNetwork();
+  const abortControllerRef = useRef(null);
+  const refFireFetchCount = useRef(state.fireFetchCount);
+  useEffect(() => {
+    dispatch({ type: actionsType.SET_PARAMS, payload: parms });
+  }, [parms]);
+  useEffect(() => {
+    let cancel = false;
+    if (refFireFetchCount.current === state.fireFetchCount) {
+      return;
+    } else {
+      refFireFetchCount.current = state.fireFetchCount;
+    }
+    if (state.fireFetchCount > 0) {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      abortControllerRef.current = new AbortController();
+      networkOperation({
+        method: "GET",
+        endPoint,
+        timeout,
+        isExternalUrl,
+        parms: { ...parms, ...state.queryParams },
+        responseToCamelCase,
+        isRemote,
+        signal: abortControllerRef.current.signal
+      }).then((response) => {
+        if (cancel) {
+          return;
+        }
+        const valueMaybeArray = getPropertyByString(response, resultField);
+        const newOptions = Array.isArray(valueMaybeArray) ? valueMaybeArray : [];
+        dispatch({ type: actionsType.FINISH_LOAD_OPTIONS, payload: { options: newOptions } });
+      }).catch(() => {
+        dispatch({ type: actionsType.FINISH_LOAD_OPTIONS, payload: {} });
+      });
+    }
+    return () => {
+      cancel = true;
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, [state.fireFetchCount]);
+};
+export {
+  useFetchOptions as u
+};

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

@@ -0,0 +1,14 @@
+import { RHFAutocompleteAsyncAction, RHFAutocompleteAsyncState, OnChangeFilterParms } from '../types';
+type getInitialStateRHFAutocompleteAsyncProps = {
+    parms?: Record<string, any>;
+    onChangeFilterParms?: OnChangeFilterParms;
+};
+/**
+ * Returns the initial state for the RHFAutocompleteAsync component.
+ */
+export declare const getInitialStateRHFAutocompleteAsync: <T>(props: getInitialStateRHFAutocompleteAsyncProps) => RHFAutocompleteAsyncState<T>;
+/**
+ * Reducer to manage state of RHFAutocompleteAsync component.
+ */
+export declare const RHFAutocompleteAsyncReducer: <T>(onChangeFilterParms?: OnChangeFilterParms) => (state: RHFAutocompleteAsyncState<T>, action: RHFAutocompleteAsyncAction<T>) => RHFAutocompleteAsyncState<T>;
+export {};

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

@@ -0,0 +1,79 @@
+import { deepEqual } from "fast-equals";
+import { a as actionsType } from "../types.js";
+const getInitialStateRHFAutocompleteAsync = (props) => ({
+  fireFetchCount: 0,
+  options: [],
+  parms: props.parms,
+  // allowFetch: false,
+  loading: false,
+  queryParams: props.onChangeFilterParms ? props.onChangeFilterParms("") : {},
+  isOpen: false,
+  firstOpen: true
+  // selectedOptions: [],
+});
+const RHFAutocompleteAsyncReducer = (onChangeFilterParms) => (state, action) => {
+  switch (action.type) {
+    case actionsType.REFRESH:
+      return {
+        ...state,
+        fireFetchCount: state.fireFetchCount + 1
+        //Lanzr una nueva petición
+      };
+    case actionsType.SET_PARAMS:
+      if (deepEqual(state.parms, action.payload)) {
+        return state;
+      }
+      if (onChangeFilterParms) {
+        state.queryParams = onChangeFilterParms("");
+      }
+      return {
+        ...state,
+        parms: action.payload,
+        fireFetchCount: 0,
+        firstOpen: true
+      };
+    case actionsType.SET_QUERY_PARAMS:
+      if (deepEqual(state.queryParams, action.payload)) {
+        return state;
+      }
+      return {
+        ...state,
+        queryParams: action.payload,
+        fireFetchCount: state.fireFetchCount + 1
+      };
+    case actionsType.FINISH_LOAD_OPTIONS:
+      const finalOptions = action.payload?.options || state.options;
+      const firstOpen = action.payload?.options ? state.firstOpen : true;
+      return {
+        ...state,
+        options: finalOptions,
+        loading: false,
+        firstOpen
+      };
+    case actionsType.OPEN:
+      return {
+        ...state,
+        isOpen: true,
+        fireFetchCount: state.firstOpen ? state.fireFetchCount + 1 : state.fireFetchCount,
+        firstOpen: false,
+        loading: state.firstOpen ? true : state.loading
+        // allowFetch: true,
+      };
+    case actionsType.CLOSE:
+      return {
+        ...state,
+        isOpen: false
+      };
+    // case actionsType.SET_SELECTED_OPTIONS_TO_AUTOCOMPLETE:
+    //   return {
+    //     ...state,
+    //     selectedOptions: action.payload,
+    //   };
+    default:
+      return state;
+  }
+};
+export {
+  RHFAutocompleteAsyncReducer as R,
+  getInitialStateRHFAutocompleteAsync as g
+};

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

@@ -1 +1 @@
-export declare const RHFAutocompleteAsyncRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../RHFAutocomplete/types').RHFAutocompleteProps<unknown, true, true, false>, keyof import('../../RHFAutocomplete/types').RHFAutocompleteProps<unknown, true, true, false>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
+export declare const RHFAutocompleteAsyncRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../RHFAutocomplete/types').RHFAutocompleteProps<unknown, undefined, undefined, undefined>, keyof import('../../RHFAutocomplete/types').RHFAutocompleteProps<unknown, undefined, undefined, undefined>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;

package/components/hook-form/RHFAutocompleteAsync/tests/OnChangFilterParmsDefined.test.d.ts

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

package/components/hook-form/RHFAutocompleteAsync/tests/OnChangFilterParmsUndefined.test.d.ts

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

package/components/hook-form/RHFAutocompleteAsync/tests/RHFAutocompleteReducer.test.d.ts

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

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

@@ -0,0 +1,41 @@
+import { RHFAutocompleteAsyncProps } from '../types';
+import { renderMaterialUI } from '../../../../test';
+import { FieldValues } from 'react-hook-form';
+export declare const FIELD_NAME = "rhf-autocomplete-async";
+export declare const FIELD_NAME_PRESELECTED = "rhf-autocomplete-async-preselected";
+export declare const FIELD_NAME_PRESELECTED_NOT_IN_OPTIONS = "rhf-autocomplete-async-preselected-not-in-options";
+export declare const FIELD_NAME_PRESELECTED_MULTIPLE = "rhf-autocomplete-async-preselected-multiple";
+export declare const FIELD_NAME_PRESELECTED_MULTIPLE_NOT_IN_OPTIONS = "rhf-autocomplete-async-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: RHFAutocompleteAsyncProps<OptionsTests>;
+/**
+ * Custom filter function
+ */
+export declare const onChangeFilterParms: (newValue: string) => {
+    f: ({
+        n: string;
+        o: string;
+        o1: boolean;
+    } | {
+        n: string;
+        o: string;
+        o1: string;
+    })[];
+};
+/**
+ * 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 renderRHFAutocompleteAsync: (fieldName: string, overrideProps?: Partial<RHFAutocompleteAsyncProps<OptionsTests>>) => ReturnType<typeof renderMaterialUI>;

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

@@ -1,17 +1,46 @@
-import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { RHFAutocompleteProps } from '../RHFAutocomplete/types';
 import { RFHAUTOCOMPLETEASYNC_KEY_COMPONENT } from './constants';
 import { RHFAutocompleteAsyncSlots } from './slots';
 import { Theme } from '@mui/material';
-export interface RHFAutocompleteAsyncBaseProps<T extends any = unknown> extends Omit<RHFAutocompleteProps<T>, 'options'> {
+import { M4LOverridesStyleRules } from '../../../@types/augmentations';
+export type OnChangeFilterParms = (newValue: string) => Record<string, any>;
+export interface RHFAutocompleteAsyncProps<T extends any = unknown> extends Omit<RHFAutocompleteProps<T>, 'options' | 'onOpen' | 'onClose' | 'open' | 'multiple'> {
+    /**
+     * URL to fetch data from
+     */
     endPoint: string;
+    /**
+     * Whether the response should be converted to camel case
+     */
     responseToCamelCase?: boolean;
+    /**
+     * Timeout for the fetch request
+     */
     timeout?: number;
+    /**
+     * Parameters to send with the fetch request
+     */
     parms?: Record<string, any>;
+    /**
+     * Whether the URL is external
+     */
     isExternalUrl?: boolean;
+    /**
+     * Field in the response object that contains the data, normalmente data.
+     */
     resultField?: string;
+    /**
+     * Whether the data is fetched remotely
+     */
     isRemote?: boolean;
-    onChangeFilterParms?: (newValue: string) => Record<string, any>;
+    /**
+     * Callback for when the filter parameters change, or initial state.
+     */
+    onChangeFilterParms?: OnChangeFilterParms;
+    /**
+     * Whether the autocomplete is multiple
+     */
+    multiple?: boolean;
 }
 /**
  * Defines the types of Slots available for the Autocomplete.
@@ -20,4 +49,91 @@ export type RHFAutocompleteAsyncSlotsType = keyof typeof RHFAutocompleteAsyncSlo
 /**
  * Styles applicable to the Autocomplete using themes and custom slots.
  */
-export type RHFAutocompleteAyncStyles = OverridesStyleRules<RHFAutocompleteAsyncSlotsType, typeof RFHAUTOCOMPLETEASYNC_KEY_COMPONENT, Theme>;
+export type RHFAutocompleteAsyncStyles = M4LOverridesStyleRules<RHFAutocompleteAsyncSlotsType, typeof RFHAUTOCOMPLETEASYNC_KEY_COMPONENT, Theme>;
+/**
+ * Name of actions for reducer in RHFAutocompleteAsync component.
+ */
+export declare const actionsType: {
+    /**
+     * Refresh the options of the autocomplete, esta opcion es manual, por lo tanto debe forzar
+     * la recarga de las options.
+     */
+    readonly REFRESH: "REFRESH";
+    /**
+     * Set the params to request the options. When the parms change, the options are requested again, and queryParams are rebuilt.
+     */
+    readonly SET_PARAMS: "SET_PARAMS";
+    /**
+     * Set the query params to request the options with the new filter
+     * selected from the option listed in the autocomplete.
+     */
+    readonly SET_QUERY_PARAMS: "SET_QUERY_PARAMS";
+    /**
+     * Indicate if the popover options are open.
+     */
+    readonly OPEN: "OPEN";
+    /**
+     * Indicate if the popover options are close.
+     */
+    readonly CLOSE: "CLOSE";
+    /**
+     * Reset the state options, allowFetchingOptionsAutocomplete (false)
+     * and loading (true) to initial state before fetching options
+     * to wait the response from the server.
+     */
+    readonly START_FETCHING_OPTIONS: "START_FETCHING_OPTIONS";
+    /**
+     * Set new options to list in autocomplete.
+     * For example, when the user is typing,
+     * the options are filtered from the server and the new options are set to the list.
+     */
+    readonly FINISH_LOAD_OPTIONS: "FINISH_LOAD_OPTIONS";
+};
+/**
+ * Action type for RHFAutocompleteAsync component.
+ */
+export type RHFAutocompleteAsyncAction<T> = {
+    type: typeof actionsType.REFRESH;
+} | {
+    type: typeof actionsType.SET_QUERY_PARAMS;
+    payload: Record<string, any>;
+} | {
+    type: typeof actionsType.FINISH_LOAD_OPTIONS;
+    payload: {
+        options?: Array<T>;
+    };
+} | {
+    type: typeof actionsType.OPEN;
+} | {
+    type: typeof actionsType.CLOSE;
+} | {
+    type: typeof actionsType.SET_PARAMS;
+    payload: Record<string, any> | undefined;
+};
+/**
+ * State type for RHFAutocompleteAsync component.
+ */
+export type RHFAutocompleteAsyncState<T> = {
+    options: Array<T>;
+    loading: boolean;
+    parms?: Record<string, any>;
+    queryParams: Record<string, any>;
+    isOpen: boolean;
+    /**
+     * Indica si es la primera apertura el componente
+     */
+    firstOpen: boolean;
+    /**
+     * Number of times the fetching is fired.
+     * the fetching count is incremented, useFetchOptions Effect is fired.
+     * When the fetching count is equal to 0, the fetching is not allowed.
+     */
+    fireFetchCount: number;
+};
+/**
+ * Params for useFetchOptions hook.
+ */
+export interface UseFetchOptionsProps<T> extends Pick<RHFAutocompleteAsyncProps<T>, 'endPoint' | 'timeout' | 'isExternalUrl' | 'parms' | 'responseToCamelCase' | 'isRemote' | 'resultField'> {
+    state: RHFAutocompleteAsyncState<T>;
+    dispatch: (value: RHFAutocompleteAsyncAction<T>) => void;
+}

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

@@ -0,0 +1,38 @@
+const actionsType = {
+  /**
+   * Refresh the options of the autocomplete, esta opcion es manual, por lo tanto debe forzar
+   * la recarga de las options.
+   */
+  REFRESH: "REFRESH",
+  /**
+   * Set the params to request the options. When the parms change, the options are requested again, and queryParams are rebuilt.
+   */
+  SET_PARAMS: "SET_PARAMS",
+  /**
+   * Set the query params to request the options with the new filter
+   * selected from the option listed in the autocomplete.
+   */
+  SET_QUERY_PARAMS: "SET_QUERY_PARAMS",
+  /**
+   * Indicate if the popover options are open.
+   */
+  OPEN: "OPEN",
+  /**
+   * Indicate if the popover options are close.
+   */
+  CLOSE: "CLOSE",
+  /**
+   * Set new options to list in autocomplete.
+   * For example, when the user is typing,
+   * the options are filtered from the server and the new options are set to the list.
+   */
+  FINISH_LOAD_OPTIONS: "FINISH_LOAD_OPTIONS"
+  // /**
+  //  * Set the selected options to the autocomplete because
+  //  * are necessary merge with the options obtains from the server
+  //  */
+  // SET_SELECTED_OPTIONS_TO_AUTOCOMPLETE: 'SET_SELECTED_OPTIONS_TO_AUTOCOMPLETE',
+};
+export {
+  actionsType as a
+};

package/components/hook-form/RHFCheckbox/slots/RHFCheckBoxSlots.js

@@ -2,8 +2,8 @@ import { styled } from "@mui/material/styles";
 import { r as rhfCheckBoxStyles } from "../RHFCheckBox.styles.js";
 import { R as RHFCheckBoxSlots } from "./RHFCheckBoxEnum.js";
 import { R as RHF_CHECKBOX_KEY_COMPONENT } from "../constants.js";
-import { C as CheckBox } from "../../../mui_extended/CheckBox/CheckBox.js";
 import { L as Label } from "../../../Label/Label.js";
+import { C as CheckBox } from "../../../mui_extended/CheckBox/CheckBox.js";
 const RHFCheckboxRoot = styled("div", {
   name: RHF_CHECKBOX_KEY_COMPONENT,
   slot: RHFCheckBoxSlots.root

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

@@ -9,8 +9,8 @@ import { R as RHF_PERIOD_KEY_COMPONENT } from "./constants.js";
 import clsx from "clsx";
 import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
-import { R as RHFPeriodSlots } from "./slots/RHFPeriodEnum.js";
 import { H as HelperError } from "../../HelperError/HelperError.js";
+import { R as RHFPeriodSlots } from "./slots/RHFPeriodEnum.js";
 const RHFPeriod = (props) => {
   const {
     name,

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

@@ -27,9 +27,11 @@ const RHFTextField = forwardRef((props, ref) => {
     mandatoryMessage,
     helperText = true,
     className,
+    htmlFor,
     ...other
   } = props;
-  const htmlForId = useId();
+  const id = useId();
+  const htmlForId = htmlFor ?? id;
   const ariaLabelledById = `field-label-${htmlForId}`;
   const {
     control
@@ -87,7 +89,6 @@ const RHFTextField = forwardRef((props, ref) => {
                   value: type === "number" ? isNaN(parseFloat(value)) ? "" : value : value || "",
                   inputProps: {
                     name,
-                    ss: 1,
                     id: htmlForId,
                     "aria-labelledby": ariaLabelledById,
                     ...getPropDataTestId(RHF_TEXT_FIELD_KEY_COMPONENT, RHFTextFieldSlots.textField)