@m4l/components 0.2.35 → 0.2.36

package/components/formatters/{index.03471e3f.js → index.b816c6b6.js}

@@ -1,9 +1,9 @@
+import { jsx } from "react/jsx-runtime";
 import { generateUtilityClasses, styled } from "@mui/material";
 import "@mui/base";
-import { jsx } from "react/jsx-runtime";
-import { W as WrapperComponent } from "../WrapperComponent/index.5e872594.js";
+import { W as WrapperComponent } from "../WrapperComponent/index.57964195.js";
 import { useModuleDictionary } from "@m4l/core";
-import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY } from "./BooleanFormatter/index.9ccf9298.js";
+import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY } from "./BooleanFormatter/index.0c2d8e35.js";
 const COMPONENT_CLASS_NAME = "M4LFormatter";
 const formatterClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "root",
@@ -14,13 +14,8 @@ const FormatterRootContainer = styled("div")(({ theme }) => ({
   ...theme.components?.M4LFormatter?.styleOverrides
 }));
 const FormatterRoot = (props) => {
-  const {
-    children
-  } = props;
-  return /* @__PURE__ */ jsx(FormatterRootContainer, {
-    className: formatterClasses.root,
-    children
-  });
+  const { children } = props;
+  return /* @__PURE__ */ jsx(FormatterRootContainer, { className: formatterClasses.root, children });
 };
 function getFormatConcatenated(values, separator) {
   const returnSymbol = "";
@@ -49,14 +44,8 @@ function getFormatConcatenated(values, separator) {
   }
 }
 function ConcatenatedFormatter(props) {
-  const {
-    values = [],
-    separator = " ",
-    Component = WrapperComponent
-  } = props;
-  return /* @__PURE__ */ jsx(Component, {
-    children: getFormatConcatenated(values, separator)
-  });
+  const { values = [], separator = " ", Component = WrapperComponent } = props;
+  return /* @__PURE__ */ jsx(Component, { children: getFormatConcatenated(values, separator) });
 }
 const PERIOD_FORMATTER_DICTIONARY_KEY = `period_formatter`;
 const dictionary = {
@@ -68,9 +57,7 @@ const dictionary = {
   LABEL_DAY: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_day`
 };
 function getFormatPeriod(years, months, days) {
-  const {
-    getLabel
-  } = useModuleDictionary();
+  const { getLabel } = useModuleDictionary();
   let period = "";
   const separator = ", ";
   switch (years) {
@@ -113,21 +100,11 @@ function getFormatPeriod(years, months, days) {
   return period;
 }
 function PeriodFormatter(props) {
-  const {
-    years = 0,
-    months = 0,
-    days = 0,
-    Component = WrapperComponent
-  } = props;
-  return /* @__PURE__ */ jsx(Component, {
-    children: getFormatPeriod(years, months, days)
-  });
+  const { years = 0, months = 0, days = 0, Component = WrapperComponent } = props;
+  return /* @__PURE__ */ jsx(Component, { children: getFormatPeriod(years, months, days) });
 }
 function getFormattersComponentsDictionary() {
-  return [
-    BOOLEAN_FORMATTER_DICTIONARY_KEY,
-    PERIOD_FORMATTER_DICTIONARY_KEY
-  ];
+  return [BOOLEAN_FORMATTER_DICTIONARY_KEY, PERIOD_FORMATTER_DICTIONARY_KEY];
 }
 export {
   ConcatenatedFormatter as C,

package/components/hook-form/HelperError/index.c8b046b7.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { useFormContext, useController } from "react-hook-form";
+import { H as HelperText } from "../../HelperText/index.81c5d349.js";
+function HelperError(props) {
+  const { name } = props;
+  const { control } = useFormContext();
+  const { fieldState } = useController({
+    name,
+    control,
+    rules: { required: true }
+  });
+  if (fieldState?.error?.message) {
+    return /* @__PURE__ */ jsx(HelperText, { variant: "error", message: fieldState?.error?.message });
+  }
+  return null;
+}
+export {
+  HelperError as H
+};

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

@@ -0,0 +1,408 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useMemo, useRef, useState, useEffect, createElement } from "react";
+import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { useFormContext, Controller } from "react-hook-form";
+import { styled, Skeleton, generateUtilityClasses, generateUtilityClass, useTheme, Autocomplete, Popper, TextField, Chip } from "@mui/material";
+import { I as Image } from "../../Image/index.8cc036b1.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { T as Typography } from "../../mui_extended/Typography/index.a1e774a2.js";
+import { unstable_composeClasses } from "@mui/base";
+import { H as HelperText } from "../../HelperText/index.81c5d349.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { useFormFocus } from "../../../index.js";
+import { F as FieldLabel } from "../../FieldLabel/index.2622ee40.js";
+import { C as CircularProgress } from "../../mui_extended/CircularProgress/index.967e70b7.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index.b0ee4965.js";
+const AutocompleteRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFAutocomplete?.styleOverrides
+}));
+const WrapperOption = styled("li")(({ theme }) => ({
+  "& .m4l_image": {
+    marginRight: theme.spacing(1.5)
+  }
+}));
+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" } })
+        ] })
+      }
+    )
+  ] });
+};
+const componentName = "M4LRHFAutocomplete";
+generateUtilityClasses(
+  componentName,
+  [
+    "root",
+    "withImage",
+    "skeleton",
+    "label",
+    "popper",
+    "skeletonRoot",
+    "skeletonContainerText",
+    "iconDown",
+    "variantInfo",
+    "variantImage",
+    "isDisabled",
+    "imageWidthDefined",
+    "variantSuccess",
+    "variantWarning",
+    "variantError",
+    "sizeSmall",
+    "sizeMedium",
+    "isFocus",
+    "isTabSelected",
+    "chip"
+  ]
+);
+function getRHFAutocompleteClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = (ownerState) => {
+  const slots = {
+    root: [
+      "root",
+      ownerState.size === "small" && "sizeSmall",
+      ownerState.size === "medium" && "sizeMedium",
+      ownerState.isFocus && "isFocus",
+      ownerState.isTabSelected && "isTabSelected",
+      ownerState.disabled && "isDisabled",
+      ownerState.semantics === "info" && "variantInfo",
+      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"
+    ],
+    skeletonRoot: ["skeletonRoot"],
+    skeletonContainerText: ["SkeletonContainerText"],
+    iconDown: ["iconDown"],
+    chip: [
+      "chip",
+      ownerState.size === "small" && "sizeSmall",
+      ownerState.size === "medium" && "sizeMedium"
+    ]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFAutocompleteClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+function RHFAutocomplete(props) {
+  const {
+    name: nameRHF,
+    getOptionLabel,
+    isOptionEqualToValue,
+    label,
+    skeletonWidth = 100,
+    skeletonHeight = "18px",
+    options,
+    disabled,
+    getOptionUrlImage,
+    onOpen,
+    onClose,
+    loading,
+    variant,
+    helperMessage,
+    size = "small",
+    onChangeFilterParmsLocal,
+    imageWidth,
+    imageHeight,
+    mandatory,
+    mandatoryMessage,
+    multiple,
+    ...other
+  } = props;
+  const { getLabel } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const withImage = useMemo(() => getOptionUrlImage !== void 0, [getOptionUrlImage]);
+  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 getOptionUrlImageLocal = (option) => {
+    if (option === void 0 || option === null || getOptionUrlImage === void 0) {
+      return "";
+    }
+    return getOptionUrlImage(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,
+    imageWidthDefined: Boolean(imageWidth),
+    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",
+                        placeholder: void 0,
+                        onPointerEnterCapture: () => {
+                        },
+                        onPointerLeaveCapture: () => {
+                        },
+                        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: withImage ? withRenderOption(getOptionUrlImageLocal, classes, imageWidth) : 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__ */ jsxs(Fragment, { children: [
+                            !multiple && withImage && value ? /* @__PURE__ */ jsx(
+                              Image,
+                              {
+                                src: getOptionUrlImageLocal(value),
+                                width: imageWidth,
+                                height: "100%"
+                              },
+                              "ImageTextField"
+                            ) : null,
+                            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: withImage && option ? /* @__PURE__ */ jsx(
+                            Image,
+                            {
+                              src: getOptionUrlImageLocal(option),
+                              width: imageWidth,
+                              height: imageHeight ?? "100%"
+                            }
+                          ) : void 0,
+                          sx: {
+                            ...theme.components?.M4LRHFAutocompleteChip?.styleOverrides
+                          }
+                        }
+                      );
+                    })
+                  } : {}
+                }
+              ),
+              currentVariant === "error" ? /* @__PURE__ */ jsx(HelperText, { variant: currentVariant, message: error?.message }) : null
+            ] });
+          }
+        }
+      ) : /* @__PURE__ */ jsx(SkeletonRHFAutocomplete, { withImage, classes, hasLabel: label })
+    }
+  );
+}
+function getRHFAutocompleteComponentsDictionary() {
+  return ["rhf_autocomplete"];
+}
+export {
+  RHFAutocomplete as R,
+  getRHFAutocompleteComponentsDictionary as g
+};

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AutocompleteRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapperOption: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;

package/components/hook-form/RHFAutocompleteAsync/{index.bc278965.js → index.98dcf0de.js}

@@ -1,19 +1,17 @@
+import { jsx } from "react/jsx-runtime";
 import { useState, useCallback, useEffect } from "react";
 import { useNetwork, getPropertyByString } from "@m4l/core";
 import debounce from "lodash/debounce";
 import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { jsx } from "react/jsx-runtime";
-import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.1f2afb6b.js";
+import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.ea2ac2b1.js";
 styled("div")(() => ({
   display: "flex",
   width: "100%",
   flexDirection: "column"
 }));
-styled("div")(({
-  theme
-}) => ({
+styled("div")(({ theme }) => ({
   display: "flex",
   justifyContent: "flex-end",
   paddingRight: `${theme.spacing(2)}`,
@@ -21,9 +19,7 @@ styled("div")(({
     justifyContent: "flex-start"
   }
 }));
-styled("div")(({
-  theme
-}) => ({
+styled("div")(({ theme }) => ({
   width: "100%",
   display: "grid",
   gridTemplateColumns: "1fr auto",
@@ -37,15 +33,16 @@ styled("div")(({
     width: "100%"
   }
 }));
-const RHFAutocompleteAsyncRoot = styled("div")(({
-  theme
-}) => ({
+const RHFAutocompleteAsyncRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LRHFAutocompleteAsync?.styleOverrides
 }));
 const componentName = "M4LRHFAutocompleteAsync";
-generateUtilityClasses(componentName, [
-  "root"
-]);
+generateUtilityClasses(
+  componentName,
+  [
+    "root"
+  ]
+);
 function getRHFAutocompleteAsyncClassesUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);
 }
@@ -74,18 +71,22 @@ function RHFAutocompleteAsync(props) {
     onChangeFilterParms,
     ...other
   } = props;
-  const {
-    networkOperation
-  } = useNetwork();
+  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 debouncedFilter = useCallback(
+    debounce(
+      (newFilterParms) => {
+        setCanLoadOptions(true);
+        setFilterParms(newFilterParms);
+      },
+      300
+    ),
+    []
+  );
   const onChangeFilterParmsLocal = (newValue) => {
     if (onChangeFilterParms) {
       debouncedFilter(onChangeFilterParms(newValue));
@@ -108,10 +109,7 @@ function RHFAutocompleteAsync(props) {
       method: "GET",
       endPoint,
       timeout,
-      parms: {
-        ...parms,
-        ...filterParms
-      },
+      parms: { ...parms, ...filterParms },
       isRemote
     }).then((response) => {
       const valueMaybeArray = getPropertyByString(response, resultField);
@@ -126,26 +124,30 @@ function RHFAutocompleteAsync(props) {
     };
   }, [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, {
-      name,
-      loading,
-      options,
-      onChangeFilterParmsLocal: onChangeFilterParms ? onChangeFilterParmsLocal : void 0,
-      size,
-      onOpen: () => {
-        setOpen(true);
-      },
-      onClose: () => {
-        setOpen(false);
-      },
-      ...other
-    })
-  });
+  return /* @__PURE__ */ jsx(
+    RHFAutocompleteAsyncRoot,
+    {
+      className: classes.root,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
+      children: /* @__PURE__ */ jsx(
+        RHFAutocomplete,
+        {
+          name,
+          loading,
+          options,
+          onChangeFilterParmsLocal: onChangeFilterParms ? onChangeFilterParmsLocal : void 0,
+          size,
+          onOpen: () => {
+            setOpen(true);
+          },
+          onClose: () => {
+            setOpen(false);
+          },
+          ...other
+        }
+      )
+    }
+  );
 }
 function getRHFAutocompleteAsyncComponentsDictionary() {
   return getRHFAutocompleteComponentsDictionary();

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SKTRHFAutocompleteAsyncWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PropertieValueLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTInputText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const RHFAutocompleteAsyncRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,2 +1,2 @@
-import { RHFAutocompleteAsyncClassesKey } from "../classes/types";
+import { RHFAutocompleteAsyncClassesKey } from '../classes/types';
 export declare const getNameDataTestId: (KEY: RHFAutocompleteAsyncClassesKey) => string;