@m4l/components 1.1.1 → 2.0.0

package/components/hook-form/RHFAutocomplete/{index.dab5e2d6.js → index.c8bcfed8.js}

@@ -1,61 +1,19 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useMemo, useRef, useState, useEffect, createElement } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { createElement, useMemo, useRef, useState, useEffect } from "react";
 import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { useFormFocus } from "../../../index.js";
+import { generateUtilityClasses, generateUtilityClass, Skeleton, useTheme, Autocomplete, Popper, TextField, Chip } from "@mui/material";
+import { useResponsiveDesktop } from "@m4l/graphics";
 import { useFormContext, Controller } from "react-hook-form";
-import { Skeleton, generateUtilityClasses, generateUtilityClass, useTheme, Autocomplete, Popper, TextField, Chip } from "@mui/material";
-import { ag as WrapperOption, ah as AutocompleteRoot } from "../../../styles/index.7868464e.js";
-import { I as Image } from "../../Image/index.8a3d05d3.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { T as Typography } from "../../mui_extended/Typography/index.8a0f958b.js";
 import { unstable_composeClasses } from "@mui/base";
-import { H as HelperText } from "../../HelperText/index.b1961313.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { useFormFocus } from "../../../index.js";
-import { F as FieldLabel } from "../../FieldLabel/index.a6235bcc.js";
+import { ag as WrapperOption, ah as AutocompleteRoot } from "../../../styles/index.d972f170.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { I as Image } from "../../Image/index.fb9e71ba.js";
+import { T as Typography } from "../../mui_extended/Typography/index.dbc44e77.js";
+import { H as HelperText } from "../../HelperText/index.e9eddfe4.js";
+import { F as FieldLabel } from "../../FieldLabel/index.44f3e099.js";
 import { C as CircularProgress } from "../../mui_extended/CircularProgress/index.967e70b7.js";
-import { I as IconButton } from "../../mui_extended/IconButton/index.97e91dae.js";
-const RHFAUTOCOMPLETE_PREFIX = "RHFAutocomplete";
-const RHFTAUTOCOMPLET_ROOT_TEST_ID = "RHFAutocomplete";
-const getNameDataTestId = (KEY) => {
-  return `${RHFAUTOCOMPLETE_PREFIX}-${KEY}`;
-};
-function withRenderOption(getUrlImage, classes, imageWidth) {
-  return function RenderOption(optionProps, option) {
-    return /* @__PURE__ */ jsxs(
-      WrapperOption,
-      {
-        ...optionProps,
-        className: classes.withImage,
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("withImage") } : {},
-        children: [
-          /* @__PURE__ */ jsx(Image, { src: getUrlImage(option), width: imageWidth, height: "100%" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "body", children: optionProps.key })
-        ]
-      }
-    );
-  };
-}
-const SkeletonRHFAutocomplete = (props) => {
-  const { withImage, classes, hasLabel } = props;
-  return /* @__PURE__ */ jsxs("div", { className: classes.skeletonRoot, children: [
-    (hasLabel || hasLabel?.length === 0) && /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "30%", height: "16px" }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: classes.skeleton,
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("skeleton") } : {},
-        children: !withImage ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: classes.skeletonContainerText, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "50%", height: "14px" }) }),
-          /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 16, height: 16, sx: { minWidth: "16px" } })
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Skeleton, { variant: "circular" }),
-          /* @__PURE__ */ jsx("div", { className: classes.skeletonContainerText, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "50%", height: "14px" }) }),
-          /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 16, height: 16, sx: { minWidth: "16px" } })
-        ] })
-      }
-    )
-  ] });
-};
+import { I as IconButton } from "../../mui_extended/IconButton/index.f5dcf537.js";
 const componentName = "M4LRHFAutocomplete";
 generateUtilityClasses(
   componentName,
@@ -69,7 +27,6 @@ generateUtilityClasses(
     "skeletonContainerText",
     "iconDown",
     "variantInfo",
-    "variantImage",
     "isDisabled",
     "imageWidthDefined",
     "variantSuccess",
@@ -98,17 +55,16 @@ const useUtilityClasses = (ownerState) => {
       ownerState.semantics === "success" && "variantSuccess",
       ownerState.semantics === "warning" && "variantWarning",
       ownerState.semantics === "error" && "variantError",
-      ownerState.imageWidthDefined && "imageWidthDefined",
       ownerState.multiple && "multiple"
     ],
-    withImage: ["withImage"],
     skeleton: ["skeleton"],
     label: ["label"],
     popper: [
       "popper",
       ownerState.size === "small" && "sizeSmall",
       ownerState.size === "medium" && "sizeMedium",
-      ownerState.imageWidthDefined && "imageWidthDefined"
+      ownerState.imageScale && "imageScale",
+      ownerState.imageRepeat && "imageRepeat"
     ],
     skeletonRoot: ["skeletonRoot"],
     skeletonContainerText: ["SkeletonContainerText"],
@@ -124,7 +80,48 @@ const useUtilityClasses = (ownerState) => {
     ...composedClasses
   };
 };
-function RHFAutocomplete(props) {
+const RHFAUTOCOMPLETE_PREFIX = "RHFAutocomplete";
+const RHFTAUTOCOMPLET_ROOT_TEST_ID = "RHFAutocomplete";
+const getNameDataTestId = (KEY) => {
+  return `${RHFAUTOCOMPLETE_PREFIX}-${KEY}`;
+};
+function withRenderOption(getUrlImage, classes) {
+  return function RenderOption(optionProps, option) {
+    return /* @__PURE__ */ createElement(
+      WrapperOption,
+      {
+        ...optionProps,
+        key: optionProps.key,
+        className: classes.withImage,
+        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("withImage") } : {}
+      },
+      /* @__PURE__ */ jsx(Image, { src: getUrlImage(option) }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body", children: optionProps.key })
+    );
+  };
+}
+const SkeletonRHFAutocomplete = (props) => {
+  const { withImage, classes, hasLabel } = props;
+  return /* @__PURE__ */ jsxs("div", { className: classes.skeletonRoot, children: [
+    (hasLabel || hasLabel?.length === 0) && /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "30%", height: "16px" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classes.skeleton,
+        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("skeleton") } : {},
+        children: !withImage ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: classes.skeletonContainerText, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "50%", height: "14px" }) }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 16, height: 16, sx: { minWidth: "16px" } })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "circular" }),
+          /* @__PURE__ */ jsx("div", { className: classes.skeletonContainerText, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "50%", height: "14px" }) }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 16, height: 16, sx: { minWidth: "16px" } })
+        ] })
+      }
+    )
+  ] });
+};
+function ComponentTypeImage(props) {
   const {
     name: nameRHF,
     getOptionLabel,
@@ -142,11 +139,11 @@ function RHFAutocomplete(props) {
     helperMessage,
     size = "small",
     onChangeFilterParmsLocal,
-    imageWidth,
-    imageHeight,
     mandatory,
     mandatoryMessage,
     multiple,
+    imageScale = true,
+    imageRepeat,
     ...other
   } = props;
   const { getLabel } = useModuleDictionary();
@@ -207,8 +204,9 @@ function RHFAutocomplete(props) {
     isTabSelected: !isSkeleton ? isTabSelected : false,
     semantics: currentVariant,
     disabled,
-    imageWidthDefined: Boolean(imageWidth),
-    multiple: Boolean(multiple)
+    multiple: Boolean(multiple),
+    imageScale: Boolean(imageScale),
+    imageRepeat: Boolean(imageRepeat)
   };
   const classes = useUtilityClasses(ownerState);
   const theme = useTheme();
@@ -266,6 +264,7 @@ function RHFAutocomplete(props) {
                   inputValue,
                   clearOnBlur: false,
                   PopperComponent: (popperProps) => {
+                    console.log("popper debug");
                     return /* @__PURE__ */ jsx(
                       Popper,
                       {
@@ -306,7 +305,7 @@ function RHFAutocomplete(props) {
                   loadingText: /* @__PURE__ */ jsx(Typography, { variant: "body", children: getLabel("rhf_autocomplete.loading_options") }),
                   disabled,
                   noOptionsText: getLabel("rhf_autocomplete.no_options"),
-                  renderOption: withImage ? withRenderOption(getOptionUrlImageLocal, classes, imageWidth) : void 0,
+                  renderOption: withRenderOption(getOptionUrlImageLocal, classes),
                   renderInput: (params) => {
                     return /* @__PURE__ */ jsx(
                       TextField,
@@ -325,9 +324,7 @@ function RHFAutocomplete(props) {
                             !multiple && withImage && value ? /* @__PURE__ */ jsx(
                               Image,
                               {
-                                src: getOptionUrlImageLocal(value),
-                                width: imageWidth,
-                                height: "100%"
+                                src: getOptionUrlImageLocal(value)
                               },
                               "ImageTextField"
                             ) : null,
@@ -365,9 +362,7 @@ function RHFAutocomplete(props) {
                           icon: withImage && option ? /* @__PURE__ */ jsx(
                             Image,
                             {
-                              src: getOptionUrlImageLocal(option),
-                              width: imageWidth,
-                              height: imageHeight ?? "100%"
+                              src: getOptionUrlImageLocal(option)
                             }
                           ) : void 0,
                           sx: {
@@ -387,6 +382,243 @@ function RHFAutocomplete(props) {
     }
   );
 }
+function ComponentTypeText(props) {
+  const {
+    name: nameRHF,
+    getOptionLabel,
+    isOptionEqualToValue,
+    label,
+    skeletonWidth = 100,
+    skeletonHeight = "18px",
+    options,
+    disabled,
+    onOpen,
+    onClose,
+    loading,
+    variant,
+    helperMessage,
+    size = "small",
+    onChangeFilterParmsLocal,
+    mandatory,
+    mandatoryMessage,
+    multiple,
+    ...other
+  } = props;
+  const { getLabel } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
+  const autocompleteRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const isDesktop = useResponsiveDesktop();
+  const onCloseLocal = (event, reason) => {
+    setOpen(false);
+    if (onClose)
+      onClose(event, reason);
+  };
+  const onOpenLocal = (event) => {
+    setOpen(true);
+    if (onOpen)
+      onOpen(event);
+  };
+  const getOptionLabelLocal = (option) => {
+    if (option === void 0 || option === null) {
+      return "";
+    }
+    return getOptionLabel(option);
+  };
+  const isOptionEqualToValueLocal = (option, value) => {
+    if (value === void 0 || value === null || option === null) {
+      return false;
+    }
+    return isOptionEqualToValue(option, value);
+  };
+  const {
+    control,
+    formState: { errors }
+  } = useFormContext();
+  const [currentVariant, setCurrentVariant] = useState(
+    null
+  );
+  useEffect(() => {
+    if (errors[nameRHF]) {
+      setCurrentVariant("error");
+    } else if (variant) {
+      setCurrentVariant(variant);
+    } else {
+      setCurrentVariant(null);
+    }
+  }, [errors[nameRHF], variant, control]);
+  const ownerState = {
+    size: !isDesktop ? "medium" : size,
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false,
+    semantics: currentVariant,
+    disabled,
+    multiple: Boolean(multiple)
+  };
+  const classes = useUtilityClasses(ownerState);
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    AutocompleteRoot,
+    {
+      className: classes.root,
+      tabIndex: 0,
+      onFocus: handlerFocus,
+      onBlur: handlerOnBlur,
+      onKeyUp: handlerOnKeyUp,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: `${RHFTAUTOCOMPLET_ROOT_TEST_ID}_${nameRHF}` } : {},
+      children: !isSkeleton ? /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name: nameRHF,
+          control,
+          render: ({ field: { onChange, value }, fieldState: { error } }) => {
+            const [inputValue, setInputValue] = useState(getOptionLabelLocal(value));
+            useEffect(() => {
+              if (!open && value === null && inputValue !== "") {
+                setInputValue("");
+              }
+              if (!open && value !== null && options.length === 0) {
+                onChangeFilterParmsLocal?.(getOptionLabelLocal(value), "reset");
+              }
+            }, [value]);
+            const checkKeyDown = (e) => {
+              if (e.code === "Enter")
+                e.preventDefault();
+            };
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              label && /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  className: classes.label,
+                  label,
+                  mandatory,
+                  mandatoryMessage,
+                  helperMessage
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Autocomplete,
+                {
+                  autoComplete: true,
+                  disableClearable: true,
+                  multiple,
+                  onKeyDown: checkKeyDown,
+                  size,
+                  ref: autocompleteRef,
+                  autoSelect: false,
+                  options,
+                  getOptionLabel: getOptionLabelLocal,
+                  inputValue,
+                  clearOnBlur: false,
+                  PopperComponent: (popperProps) => {
+                    return /* @__PURE__ */ jsx(
+                      Popper,
+                      {
+                        ...popperProps,
+                        className: classes.popper,
+                        placement: "bottom-start",
+                        sx: {
+                          ...theme.components?.M4LRHFAutocompletePopover?.styleOverrides
+                        }
+                      }
+                    );
+                  },
+                  onInputChange: (_event, newValue, reason) => {
+                    if (reason === "input") {
+                      setInputValue(newValue);
+                      if (onChangeFilterParmsLocal) {
+                        onChangeFilterParmsLocal(newValue, reason);
+                      }
+                    } else {
+                      onChange(null);
+                    }
+                  },
+                  isOptionEqualToValue: isOptionEqualToValueLocal,
+                  value: Array.isArray(value) ? value : multiple ? value ? [value] : [] : value || null,
+                  onOpen: onOpenLocal,
+                  onClose: onCloseLocal,
+                  open,
+                  onChange: (_e, newValue) => {
+                    if (!multiple && !Array.isArray(newValue)) {
+                      setInputValue(getOptionLabelLocal(newValue));
+                    } else {
+                      setInputValue("");
+                    }
+                    onChange(Array.isArray(newValue) ? [...newValue] : newValue);
+                  },
+                  filterOptions: onChangeFilterParmsLocal ? (x) => x : void 0,
+                  loading,
+                  loadingText: /* @__PURE__ */ jsx(Typography, { variant: "body", children: getLabel("rhf_autocomplete.loading_options") }),
+                  disabled,
+                  noOptionsText: getLabel("rhf_autocomplete.no_options"),
+                  renderOption: void 0,
+                  renderInput: (params) => {
+                    return /* @__PURE__ */ jsx(
+                      TextField,
+                      {
+                        ...params,
+                        InputLabelProps: {
+                          ...params.InputLabelProps,
+                          shrink: true
+                        },
+                        fullWidth: true,
+                        size,
+                        SelectProps: { native: true },
+                        InputProps: {
+                          ...params.InputProps,
+                          startAdornment: /* @__PURE__ */ jsx(Fragment, { children: params.InputProps.startAdornment }),
+                          endAdornment: loading ? /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 18 }) : /* @__PURE__ */ jsx(
+                            IconButton,
+                            {
+                              className: classes.iconDown,
+                              src: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/chevronDown.svg`,
+                              onClick: (event) => onOpenLocal(event),
+                              disabled,
+                              size
+                            }
+                          )
+                        },
+                        autoComplete: "off",
+                        error: !!error,
+                        ...other
+                      }
+                    );
+                  },
+                  ...multiple ? {
+                    renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => {
+                      const { key, ...restTagProps } = getTagProps({
+                        index
+                      });
+                      return /* @__PURE__ */ createElement(
+                        Chip,
+                        {
+                          ...restTagProps,
+                          key,
+                          label: getOptionLabelLocal(option),
+                          className: classes.chip,
+                          icon: void 0,
+                          sx: {
+                            ...theme.components?.M4LRHFAutocompleteChip?.styleOverrides
+                          }
+                        }
+                      );
+                    })
+                  } : {}
+                }
+              ),
+              currentVariant === "error" ? /* @__PURE__ */ jsx(HelperText, { variant: currentVariant, message: error?.message }) : null
+            ] });
+          }
+        }
+      ) : /* @__PURE__ */ jsx(SkeletonRHFAutocomplete, { classes, hasLabel: label })
+    }
+  );
+}
+function RHFAutocomplete(props) {
+  return /* @__PURE__ */ jsx(Fragment, { children: props.type === "image" ? /* @__PURE__ */ jsx(ComponentTypeImage, { ...props }) : /* @__PURE__ */ jsx(ComponentTypeText, { ...props }) });
+}
 function getRHFAutocompleteComponentsDictionary() {
   return ["rhf_autocomplete"];
 }

package/components/hook-form/RHFAutocomplete/subcomponents/ComponentTypeImage/index.d.ts

@@ -0,0 +1,2 @@
+import { ImageProps, RHFAutocompleteBaseProps } from "../../types";
+export declare function ComponentTypeImage<T>(props: RHFAutocompleteBaseProps<T> & ImageProps<T>): import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFAutocomplete/subcomponents/ComponentTypeText/index.d.ts

@@ -0,0 +1,2 @@
+import { RHFAutocompleteBaseProps, RHFAutocompleteTypeTextProps } from "../../types";
+export declare function ComponentTypeText<T>(props: RHFAutocompleteBaseProps<T> & RHFAutocompleteTypeTextProps): import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFAutocomplete/subcomponents/RenderOption/index.d.ts

@@ -1,3 +1,3 @@
 import { HTMLAttributes } from 'react';
 import { GetOptionString } from '../../types';
-export declare function withRenderOption<T>(getUrlImage: GetOptionString<T>, classes: any, imageWidth: string | number | undefined): (optionProps: HTMLAttributes<HTMLLIElement>, option: T) => import("react/jsx-runtime").JSX.Element;
+export declare function withRenderOption<T>(getUrlImage: GetOptionString<T>, classes: any): (optionProps: HTMLAttributes<HTMLLIElement>, option: T) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { Classes } from '../../classes/types';
 export interface SkeletonRHFAutocompleteProps {
-    withImage: boolean;
+    withImage?: boolean;
     classes: Classes;
     hasLabel?: string;
 }

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

@@ -3,15 +3,17 @@ import { AutocompleteCloseReason, AutocompleteInputChangeReason, TextFieldProps
 import { FieldLabelProps } from '../../FieldLabel/types';
 export declare type GetOptionString<T> = (option: T | null) => string;
 export declare type RHFAutocompleteVariants = 'info' | 'success' | 'warning';
-export interface RHFAutocompleteProps<T> extends Omit<TextFieldProps, 'label' | 'variant'>, Omit<FieldLabelProps, 'label'> {
+export declare type ImageProps<T> = (RHFAutocompleteTypeImageProps<T> & {
+    imageScale?: boolean;
+    imageRepeat?: never;
+}) | (RHFAutocompleteTypeImageProps<T> & {
+    imageRepeat: boolean;
+    imageScale?: never;
+});
+export interface RHFAutocompleteBaseProps<T> extends Omit<TextFieldProps, 'label' | 'variant'>, Omit<FieldLabelProps, 'label'> {
     name: string;
     options: Array<T>;
     getOptionLabel: (option: T) => string;
-    getOptionUrlImage?: (option: T) => string;
-    /**
-     * El valor de tamaño en anchura que va a tener el elemento de imagen.
-     */
-    imageWidth?: string | number;
     isOptionEqualToValue: (option: T, value: T) => boolean;
     skeletonWidth?: string | number;
     skeletonHeight?: string | number;
@@ -22,14 +24,20 @@ export interface RHFAutocompleteProps<T> extends Omit<TextFieldProps, 'label' |
     onOpen?: (event: React.SyntheticEvent) => void;
     onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
     onChangeFilterParmsLocal?: (newValue: string, reason: AutocompleteInputChangeReason) => void;
-    imageHeight?: string | number;
     multiple?: boolean;
 }
-export interface OwnerState extends Pick<RHFAutocompleteProps<any>, 'size' | 'disabled'> {
+export interface RHFAutocompleteTypeTextProps {
+    type: 'text';
+}
+export interface RHFAutocompleteTypeImageProps<T> {
+    type: 'image';
+    getOptionUrlImage: (option: T) => string;
+}
+export declare type RHFAutocompleteProps<T> = (RHFAutocompleteBaseProps<T> & ImageProps<T>) | (RHFAutocompleteBaseProps<T> & RHFAutocompleteTypeTextProps);
+export interface OwnerState extends Pick<RHFAutocompleteProps<any>, 'size' | 'disabled'>, Pick<ImageProps<any>, 'imageScale' | 'imageRepeat'> {
     isFocus: boolean;
     isTabSelected: boolean;
     semantics: RHFAutocompleteVariants | 'error' | null;
     variant?: 'withImage';
-    imageWidthDefined: boolean;
     multiple: boolean;
 }

package/components/hook-form/RHFAutocompleteAsync/{index.a61e7dda.js → index.2b2ff592.js}

@@ -1,12 +1,12 @@
-import { jsx } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from "react";
+import { jsx, Fragment } from "react/jsx-runtime";
 import { useNetwork, getPropertyByString } from "@m4l/core";
+import { useState, useCallback, useEffect } from "react";
 import debounce from "lodash/debounce";
-import { ai as RHFAutocompleteAsyncRoot } from "../../../styles/index.7868464e.js";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
+import { ai as RHFAutocompleteAsyncRoot } from "../../../styles/index.d972f170.js";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.dab5e2d6.js";
+import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.c8bcfed8.js";
 const componentName = "M4LRHFAutocompleteAsync";
 generateUtilityClasses(
   componentName,
@@ -30,7 +30,99 @@ const RHFAUTOCOMPLETEASYNC_PREFIX = "RHFAutocompleteAsync";
 const getNameDataTestId = (KEY) => {
   return `${RHFAUTOCOMPLETEASYNC_PREFIX}-${KEY}`;
 };
-function RHFAutocompleteAsync(props) {
+function ComponentTypeText(props) {
+  const {
+    name,
+    endPoint,
+    timeout = 5e3,
+    parms,
+    resultField = "data",
+    size,
+    isRemote = true,
+    onChangeFilterParms,
+    type,
+    ...other
+  } = props;
+  const { networkOperation } = useNetwork();
+  const [options, setOptions] = useState([]);
+  const [open, setOpen] = useState(false);
+  const [loading, setIsloading] = useState(false);
+  const [canLoadOptions, setCanLoadOptions] = useState(true);
+  const [filterParms, setFilterParms] = useState({});
+  const debouncedFilter = useCallback(
+    debounce(
+      (newFilterParms) => {
+        setCanLoadOptions(true);
+        setFilterParms(newFilterParms);
+      },
+      300
+    ),
+    []
+  );
+  const onChangeFilterParmsLocal = (newValue) => {
+    if (onChangeFilterParms) {
+      debouncedFilter(onChangeFilterParms(newValue));
+    }
+  };
+  useEffect(() => {
+    setCanLoadOptions(true);
+  }, [parms, endPoint]);
+  useEffect(() => {
+    if (!open || loading) {
+      return;
+    }
+    if (!canLoadOptions) {
+      return;
+    }
+    setIsloading(true);
+    setOptions([]);
+    setCanLoadOptions(false);
+    networkOperation({
+      method: "GET",
+      endPoint,
+      timeout,
+      parms: { ...parms, ...filterParms },
+      isRemote
+    }).then((response) => {
+      const valueMaybeArray = getPropertyByString(response, resultField);
+      const newOptions = Array.isArray(valueMaybeArray) ? valueMaybeArray : [];
+      setOptions(newOptions);
+    }).catch(() => {
+      setCanLoadOptions(true);
+    }).finally(() => {
+      setIsloading(false);
+    });
+    return () => {
+    };
+  }, [open, parms, filterParms, endPoint]);
+  const classes = useUtilityClasses();
+  return /* @__PURE__ */ jsx(
+    RHFAutocompleteAsyncRoot,
+    {
+      className: classes.root,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
+      children: /* @__PURE__ */ jsx(
+        RHFAutocomplete,
+        {
+          type: "text",
+          name,
+          loading,
+          options,
+          onChangeFilterParmsLocal: onChangeFilterParms ? onChangeFilterParmsLocal : void 0,
+          size,
+          onOpen: () => {
+            setOpen(true);
+          },
+          onClose: () => {
+            setOpen(false);
+          },
+          ...other
+        }
+      )
+    }
+  );
+}
+function ComponentTypeImage(props) {
   const {
     name,
     endPoint,
@@ -40,6 +132,7 @@ function RHFAutocompleteAsync(props) {
     size,
     isRemote = true,
     onChangeFilterParms,
+    type,
     ...other
   } = props;
   const { networkOperation } = useNetwork();
@@ -103,6 +196,7 @@ function RHFAutocompleteAsync(props) {
       children: /* @__PURE__ */ jsx(
         RHFAutocomplete,
         {
+          type: "image",
           name,
           loading,
           options,
@@ -120,6 +214,9 @@ function RHFAutocompleteAsync(props) {
     }
   );
 }
+function RHFAutocompleteAsync(props) {
+  return /* @__PURE__ */ jsx(Fragment, { children: props.type === "image" ? /* @__PURE__ */ jsx(ComponentTypeImage, { ...props }) : /* @__PURE__ */ jsx(ComponentTypeText, { ...props }) });
+}
 function getRHFAutocompleteAsyncComponentsDictionary() {
   return getRHFAutocompleteComponentsDictionary();
 }

package/components/hook-form/RHFAutocompleteAsync/subcomponents/ComponentTypeImage/index.d.ts

@@ -0,0 +1,3 @@
+import { RHFAutocompleteAsyncBaseProps } from "../../types";
+import { ImageProps, RHFAutocompleteBaseProps } from "src/components/hook-form/RHFAutocomplete/types";
+export declare function ComponentTypeImage<T>(props: Omit<RHFAutocompleteBaseProps<T>, 'options' | 'get'> & ImageProps<T> & RHFAutocompleteAsyncBaseProps): import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFAutocompleteAsync/subcomponents/ComponentTypeText/index.d.ts

@@ -0,0 +1,2 @@
+import { ComponentTextProps } from "../../types";
+export declare function ComponentTypeText<T>(props: ComponentTextProps<T>): import("react/jsx-runtime").JSX.Element;