@m4l/components 9.2.52 → 9.2.54-beta.1

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,74 @@
+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
+      };
+    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,44 @@
+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",
+  /**
+   * Reset the state options, allowFetchingOptionsAutocomplete (false)
+   * and loading (true) to initial state before fetching options
+   * to wait the response from the server.
+   */
+  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.
+   */
+  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/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)

package/components/mui_extended/Autocomplete/Autocomplete.d.ts

@@ -1,2 +1,9 @@
 import { AutocompleteProps } from './types';
+/**
+ * Autocomplete refactorizado con slots M4L.
+ * Tener en cuenta que cuando es multiple y se abre el dropdown, y el value no está dentro de lasl  opciones.
+ * MUI va a genera el siguiente warning (Y es normal que suceda, no es necesario darle solución):
+ *     MUI: The value provided to Autocomplete is invalid.
+ *     None of the options match with `{"y":y,"x":"xxx"}`. etc.
+ */
 export declare const Autocomplete: import('react').ForwardRefExoticComponent<AutocompleteProps<unknown, boolean | undefined> & import('react').RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;