@m4l/components 0.1.62 → 0.1.63

package/components/hook-form/RHFAutocomplete/index.083e23c1.js

@@ -0,0 +1,400 @@
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { useFormContext, Controller } from "react-hook-form";
+import { styled as styled$1, Skeleton, generateUtilityClasses, generateUtilityClass, Autocomplete, Popper, TextField, CircularProgress } from "@mui/material";
+import { I as Image } from "../../Image/index.1a9c0327.js";
+import { useMemo, useState, useEffect } from "react";
+import { T as TEST_PROP_ID } from "../../../vendor.a15d263e.js";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { T as Typography } from "../../mui_extended/Typography/index.41b60a6b.js";
+import { H as HelperText } from "../../HelperText/index.3c07ca2a.js";
+import { styled } from "@mui/material/styles";
+import { unstable_composeClasses } from "@mui/base";
+import "clsx";
+import "../../Icon/index.0f9b360e.js";
+import "../../mui_extended/IconButton/index.be9c2ce5.js";
+import "../../mui_extended/Accordion/index.b7487e37.js";
+import "../../mui_extended/Avatar/index.fe06afd7.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import "../../mui_extended/Button/index.d9e0ae2e.js";
+import "@mui/lab";
+import "../../mui_extended/Popover/index.260aae81.js";
+import "../../mui_extended/MenuActions/index.ec654122.js";
+import "../../mui_extended/Pager/index.9e123670.js";
+import "../../mui_extended/Tab/index.e0653a0a.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 getNameDataTestId = (KEY) => {
+  return `${RHFAUTOCOMPLETE_PREFIX}-${KEY}`;
+};
+function withRenderOption(getUrlImage, classes) {
+  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)
+      }), optionProps.key]
+    });
+  };
+}
+const WrapperSkeletonRHFAutocomplete = styled$1("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  height: `${theme.spacing(4.5)}`,
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: `${theme.spacing(1)}`,
+  padding: `0 ${theme.spacing(2)}`,
+  overflow: "hidden",
+  [theme.breakpoints.down("md")]: {
+    width: "100%"
+  }
+}));
+const SkeletonContainerText = styled$1("div")(({
+  theme
+}) => ({
+  width: "100%",
+  height: "auto",
+  overflow: "hidden",
+  margin: theme.spacing(1.5)
+}));
+const SkeletonRHFAutocompleteRoot = styled$1("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: "4px",
+  width: "100%"
+}));
+const SkeletonRHFAutocomplete = (props) => {
+  const {
+    withImage,
+    skeletonWidth,
+    skeletonHeight,
+    imageWidth,
+    imageHeight,
+    classes,
+    hasLabel
+  } = props;
+  return /* @__PURE__ */ jsxs(SkeletonRHFAutocompleteRoot, {
+    children: [(hasLabel || hasLabel?.length === 0) && /* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: "30%",
+      height: "16px"
+    }), /* @__PURE__ */ jsx(WrapperSkeletonRHFAutocomplete, {
+      className: classes.skeleton,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId("skeleton")
+      } : {},
+      children: !withImage ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(SkeletonContainerText, {
+          sx: {
+            marginLeft: "0px"
+          },
+          children: /* @__PURE__ */ jsx(Skeleton, {
+            variant: "text",
+            width: skeletonWidth,
+            height: skeletonHeight
+          })
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 16,
+          height: 16,
+          sx: {
+            minWidth: "16px"
+          }
+        })]
+      }) : /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: imageWidth,
+          height: imageHeight,
+          sx: {
+            minWidth: imageWidth
+          }
+        }), /* @__PURE__ */ jsx(SkeletonContainerText, {
+          children: /* @__PURE__ */ jsx(Skeleton, {
+            variant: "text",
+            width: skeletonWidth,
+            height: skeletonHeight
+          })
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 16,
+          height: 16,
+          sx: {
+            minWidth: "16px"
+          }
+        })]
+      })
+    })]
+  });
+};
+const componentName = "M4LRHFAutocomplete";
+generateUtilityClasses(componentName, [
+  "root",
+  "withImage",
+  "skeleton",
+  "label",
+  "variantInfo",
+  "isDisabled",
+  "variantSuccess",
+  "variantWarning",
+  "variantError",
+  "sizeSmall",
+  "sizeMedium",
+  "isFocus"
+]);
+function getRHFAutocompleteClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.focus && "isFocus", ownerState.disabled && "isDisabled", ownerState.variant === "info" && "variantInfo", ownerState.variant === "success" && "variantSuccess", ownerState.variant === "warning" && "variantWarning", ownerState.variant === "error" && "variantError"],
+    withImage: ["withImage"],
+    skeleton: ["skeleton"],
+    label: ["label"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFAutocompleteClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+function RHFAutocomplete(props) {
+  const {
+    name: nameRHF,
+    getOptionLabel,
+    isOptionEqualToValue,
+    label,
+    skeletonWidth = 100,
+    skeletonHeight = "18px",
+    options,
+    disabled,
+    getOptionUrlImage,
+    imageWidth = "24px",
+    imageHeight = "24px",
+    onOpen,
+    onClose,
+    loading,
+    variant,
+    helperMessage,
+    size = "small",
+    onChangeFilterParmsLocal,
+    ...other
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const withImage = useMemo(() => getOptionUrlImage !== void 0, [getOptionUrlImage]);
+  const [open, setOpen] = useState(false);
+  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 [isFocus, setIsFocus] = useState(false);
+  const [currentVariant, setCurrentVariant] = useState(null);
+  useEffect(() => {
+    if (errors[nameRHF]) {
+      setCurrentVariant("error");
+    } else if (variant) {
+      setCurrentVariant(variant);
+    } else {
+      setCurrentVariant(null);
+    }
+  }, [errors[nameRHF], variant, control]);
+  const handleFocus = () => {
+    setIsFocus(true);
+  };
+  const handleBlur = () => {
+    setIsFocus(false);
+  };
+  const ownerState = {
+    size,
+    focus: isFocus,
+    variant: currentVariant,
+    disabled
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(AutocompleteRoot, {
+    className: classes.root,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("root")
+    } : {},
+    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) {
+            onChangeFilterParmsLocal(getOptionLabelLocal(value), "reset");
+          }
+        }, [value]);
+        const checkKeyDown = (e) => {
+          if (e.code === "Enter")
+            e.preventDefault();
+        };
+        return /* @__PURE__ */ jsxs(Fragment, {
+          children: [/* @__PURE__ */ jsx(Typography, {
+            variant: "body",
+            className: classes.label,
+            children: label
+          }), /* @__PURE__ */ jsx(Autocomplete, {
+            onKeyDown: checkKeyDown,
+            autoComplete: true,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            autoSelect: false,
+            options,
+            getOptionLabel: getOptionLabelLocal,
+            inputValue,
+            clearOnBlur: false,
+            PopperComponent: (props2) => {
+              return /* @__PURE__ */ jsx(Popper, {
+                ...props2,
+                placement: "bottom-start",
+                sx: {
+                  style: {
+                    top: "50px"
+                  }
+                }
+              });
+            },
+            onInputChange: (_event, newValue, reason) => {
+              if (reason === "input") {
+                setInputValue(newValue);
+                if (onChangeFilterParmsLocal) {
+                  onChangeFilterParmsLocal(newValue, reason);
+                }
+              }
+              onChange(null);
+            },
+            isOptionEqualToValue: isOptionEqualToValueLocal,
+            disableClearable: true,
+            value: value || null,
+            onOpen: onOpenLocal,
+            onClose: onCloseLocal,
+            onChange: (_e, val) => {
+              setInputValue(getOptionLabelLocal(val));
+              onChange(val);
+            },
+            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) : void 0,
+            renderInput: (params) => {
+              return /* @__PURE__ */ jsx(TextField, {
+                ...params,
+                InputLabelProps: {
+                  shrink: true
+                },
+                fullWidth: true,
+                SelectProps: {
+                  native: true
+                },
+                InputProps: {
+                  ...params.InputProps,
+                  startAdornment: withImage && value ? /* @__PURE__ */ jsx(Image, {
+                    src: getOptionUrlImageLocal(value),
+                    width: imageWidth,
+                    height: imageHeight
+                  }, "ImageTextField") : null,
+                  endAdornment: /* @__PURE__ */ jsxs(Fragment, {
+                    children: [loading ? /* @__PURE__ */ jsx(CircularProgress, {
+                      color: "inherit",
+                      size: 20
+                    }) : null, params.InputProps.endAdornment]
+                  })
+                },
+                autoComplete: "off",
+                error: !!error,
+                ...other
+              });
+            }
+          }), currentVariant ? /* @__PURE__ */ jsx(HelperText, {
+            variant: currentVariant,
+            message: currentVariant !== "error" ? helperMessage : error?.message
+          }) : null]
+        });
+      }
+    }) : /* @__PURE__ */ jsx(SkeletonRHFAutocomplete, {
+      withImage,
+      skeletonWidth,
+      skeletonHeight,
+      imageWidth,
+      imageHeight,
+      classes,
+      hasLabel: label
+    })
+  });
+}
+function getRHFAutocompleteComponentsDictionary() {
+  return ["rhf_autocomplete"];
+}
+export {
+  RHFAutocomplete as R,
+  getRHFAutocompleteComponentsDictionary as g
+};

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

@@ -1,2 +1 @@
-import type { RHFAutocompleteProps } from './types';
-export declare function RHFAutocomplete<T>(props: RHFAutocompleteProps<T>): JSX.Element;
+export { RHFAutocomplete } from './RHFAutocomplete';

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/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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>, imageWidth: string, imageHeight: string): (optionProps: HTMLAttributes<HTMLLIElement>, option: T) => JSX.Element;
+export declare function withRenderOption<T>(getUrlImage: GetOptionString<T>, classes: any): (optionProps: HTMLAttributes<HTMLLIElement>, option: T) => JSX.Element;

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/styles").Theme>, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const WrapperSkeletonRHFAutocomplete: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SkeletonContainerText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SkeletonRHFAutocompleteRoot: 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/Skeleton/types.d.ts

@@ -1,4 +1,6 @@
 import { RHFAutocompleteProps } from '../../types';
 export interface SkeletonRHFAutocompleteProps extends Pick<RHFAutocompleteProps<any>, 'skeletonWidth' | 'skeletonHeight' | 'imageWidth' | 'imageHeight'> {
     withImage: boolean;
+    classes: any;
+    hasLabel?: string;
 }

package/components/hook-form/RHFAutocomplete/test/constants.d.ts

@@ -0,0 +1 @@
+export declare const RHFAUTOCOMPLETE_PREFIX = "RHFAutocomplete";

package/components/hook-form/RHFAutocomplete/test/utils.d.ts

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

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

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import { AutocompleteCloseReason, AutocompleteInputChangeReason, TextFieldProps } from '@mui/material';
+import { RHFTextFieldProps } from '../RHFTextField';
 export declare type GetOptionString<T> = (option: T | null) => string;
+export declare type RHFAutocompleteVariants = 'info' | 'success' | 'warning';
 export declare type RHFAutocompleteProps<T> = {
     name: string;
     options: Array<T>;
@@ -9,11 +11,18 @@ export declare type RHFAutocompleteProps<T> = {
     isOptionEqualToValue: (option: T, value: T) => boolean;
     skeletonWidth?: string | number;
     skeletonHeight?: string | number;
+    size?: Pick<RHFTextFieldProps, 'size'>;
     label: string;
     imageWidth?: string;
     imageHeight?: string;
     loading?: boolean;
+    variant?: RHFAutocompleteVariants;
+    helperMessage?: string;
     onOpen?: (event: React.SyntheticEvent) => void;
     onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
     onChangeFilterParmsLocal?: (newValue: string, reason: AutocompleteInputChangeReason) => void;
 } & TextFieldProps;
+export interface OwnerState extends Pick<RHFTextFieldProps, 'size' | 'disabled'> {
+    focus: boolean;
+    variant: RHFAutocompleteVariants | 'error' | null;
+}

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

@@ -0,0 +1,7 @@
+import type { RHFAutocompleteAsyncProps } from './types';
+/**
+ * Provee un combo de opciones cargadas directamente desde un endpoint usando internamente el componente RHFAutocomplete.
+ * @param props
+ * @returns
+ */
+export declare function RHFAutocompleteAsync<T>(props: RHFAutocompleteAsyncProps<T>): JSX.Element;

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

@@ -0,0 +1 @@
+export declare const componentName = "M4LRHFAutocompleteAsync";

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

@@ -0,0 +1,6 @@
+import { RHFAutocompleteAsyncClassesType } from './types';
+export declare const autocompleteAsyncClasses: RHFAutocompleteAsyncClassesType;
+export declare function getRHFAutocompleteAsyncClassesUtilityClass(slot: string): string;
+export declare const useUtilityClasses: () => {
+    root: string;
+};

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

@@ -0,0 +1,4 @@
+export interface RHFAutocompleteAsyncClassesType {
+    root: string;
+}
+export declare type RHFAutocompleteAsyncClassesKey = keyof RHFAutocompleteAsyncClassesType;

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

@@ -0,0 +1,156 @@
+import { useState, useCallback, useEffect } from "react";
+import { useNetwork, getPropertyByString } from "@m4l/core";
+import debounce from "lodash/debounce";
+import { styled } from "@mui/material/styles";
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { T as TEST_PROP_ID } from "../../../vendor.a15d263e.js";
+import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.083e23c1.js";
+import { jsx } from "react/jsx-runtime";
+styled("div")(() => ({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column"
+}));
+styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "flex-end",
+  paddingRight: `${theme.spacing(2)}`,
+  [theme.breakpoints.down("md")]: {
+    justifyContent: "flex-start"
+  }
+}));
+styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "grid",
+  gridTemplateColumns: "1fr auto",
+  gridGap: theme.spacing(2),
+  alignItems: "center",
+  height: `${theme.spacing(4.5)}`,
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: `${theme.spacing(1)}`,
+  padding: `0 ${theme.spacing(2)}`,
+  [theme.breakpoints.down("md")]: {
+    width: "100%"
+  }
+}));
+const RHFAutocompleteAsyncRoot = styled("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LRHFAutocompleteAsync?.styleOverrides
+}));
+const componentName = "M4LRHFAutocompleteAsync";
+generateUtilityClasses(componentName, [
+  "root"
+]);
+function getRHFAutocompleteAsyncClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFAutocompleteAsyncClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFAUTOCOMPLETEASYNC_PREFIX = "RHFAutocompleteAsync";
+const getNameDataTestId = (KEY) => {
+  return `${RHFAUTOCOMPLETEASYNC_PREFIX}-${KEY}`;
+};
+function RHFAutocompleteAsync(props) {
+  const {
+    name,
+    endPoint,
+    timeout = 5e3,
+    parms,
+    resultField = "data",
+    size,
+    isRemote = true,
+    onChangeFilterParms,
+    ...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 newOptions = getPropertyByString(response, resultField);
+      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, {
+      name,
+      loading,
+      options,
+      onChangeFilterParmsLocal: onChangeFilterParms ? onChangeFilterParmsLocal : void 0,
+      size,
+      onOpen: () => {
+        setOpen(true);
+      },
+      onClose: () => {
+        setOpen(false);
+      },
+      ...other
+    })
+  });
+}
+function getRHFAutocompleteAsyncComponentsDictionary() {
+  return getRHFAutocompleteComponentsDictionary();
+}
+export {
+  RHFAutocompleteAsync as R,
+  getRHFAutocompleteAsyncComponentsDictionary as g
+};

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/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PropertieValueLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTInputText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const RHFAutocompleteAsyncRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1 @@
+export declare const RHFAUTOCOMPLETEASYNC_PREFIX = "RHFAutocompleteAsync";

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

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

package/components/hook-form/RHFCheckbox/classes/index.d.ts

@@ -1,7 +1,9 @@
 import { RHFCheckboxClassesType } from './types';
+import { OwnerState } from '../types';
 export declare const RHFCheckboxClasses: RHFCheckboxClassesType;
 export declare function getRHFCheckboxUtilityClass(slot: string): string;
-export declare const useUtilityClasses: () => {
+export declare const useUtilityClasses: (ownerState: OwnerState) => {
     root: string;
     skeleton: string;
+    checkTypography: string;
 };