@m4l/components 9.1.53 → 9.1.55

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

@@ -1,43 +1,81 @@
-import { AutocompleteCloseReason, AutocompleteInputChangeReason, TextFieldProps } from '@mui/material';
+import { AutocompleteChangeReason, AutocompleteCloseReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteValue, AutocompleteProps as MUIAutocompleteProps, Theme, PaletteColor, PopperProps } from '@mui/material';
+import { ComponentPalletColor, Sizes } from '@m4l/styles';
+import { ChangeEvent } from 'react';
+import { TextFieldProps } from '../../mui_extended/TextField/types';
+import { RFHAUTOCOMPLETE_KEY_COMPONENT } from './constants';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { RFHAutocompleteSlots } from './slots';
 import { LabelProps } from '../../Label/types';
 export type GetOptionString<T> = (option: T | null) => string;
-export type RHFAutocompleteVariants = 'info' | 'success' | 'warning';
-export 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<LabelProps, 'label'> {
+export type RHFAutocompleteVariants = 'outlined' | 'text';
+export type RHFAutocompleteType = 'text' | 'image';
+/**
+ * Props for the unified Autocomplete component.
+ * Supports both single and multiple selection, and two types: `text` and `image`.
+ * @createdAt 2024-11-28 17:06:36 - automatic
+ */
+export interface RHFAutocompleteProps<T, Multiple extends boolean | undefined = true, DisableClearable extends boolean | undefined = true, FreeSolo extends boolean | undefined = false> extends Omit<MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, 'variant' | 'color' | 'size' | 'onChange' | 'value' | 'classes' | 'defaultValue' | 'onBlur' | 'onFocus' | 'autoComplete' | 'renderInput'>, Omit<TextFieldProps, 'label' | 'variant' | 'defaultValue' | 'classes' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'ref' | 'onChange'>, Omit<LabelProps, 'label'> {
     name: string;
-    options: Array<T>;
-    getOptionLabel: (option: T) => string;
+    /**
+     * The label for the autocomplete field.
+     */
+    popperProps?: Omit<PopperProps, 'color'>;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    autoComplete?: string;
+    /**
+     * The value of the autocomplete, supports single or multiple selection.
+     * Extended to include `null` for controlled components.
+     * @createdAt 2024-11-28 17:06:36 - automatic
+     */
+    value?: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo> | null | undefined;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    variant?: RHFAutocompleteVariants;
+    color?: Extract<ComponentPalletColor, 'primary'>;
+    dataTestid?: string;
+    options: T[];
+    getOptionLabel: (option: T | AutocompleteFreeSoloValueMapping<FreeSolo>) => string;
     isOptionEqualToValue: (option: T, value: T) => boolean;
     skeletonWidth?: string | number;
-    skeletonHeight?: string | number;
     loading?: boolean;
     refresh?: () => void;
     label?: string;
-    variant?: RHFAutocompleteVariants;
+    /**
+     * Whether the controller detected an error on component.
+     */
     helperMessage?: string;
     onOpen?: (event: React.SyntheticEvent) => void;
     onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
     onChangeFilterParmsLocal?: (newValue: string, reason: AutocompleteInputChangeReason) => void;
-    multiple?: boolean;
-}
-export interface RHFAutocompleteTypeTextProps {
-    type: 'text';
-}
-export interface RHFAutocompleteTypeImageProps<T> {
-    type: 'image';
-    getOptionUrlImage: (option: T) => string;
+    multiple?: Multiple;
+    type?: RHFAutocompleteType;
+    getOptionUrlImage?: (option: T) => string;
+    imageScale?: boolean;
+    imageRepeat?: boolean;
+    customError?: {
+        message: string;
+    };
+    onChange?: (event: ChangeEvent<{}> | undefined, value: T | T[] | null, reason: AutocompleteChangeReason) => void;
+    renderInput?: MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>['renderInput'];
 }
-export type RHFAutocompleteProps<T> = (RHFAutocompleteBaseProps<T> & ImageProps<T>) | (RHFAutocompleteBaseProps<T> & RHFAutocompleteTypeTextProps);
-export interface OwnerState extends Pick<RHFAutocompleteProps<any>, 'size' | 'disabled'>, Pick<ImageProps<any>, 'imageScale' | 'imageRepeat'> {
+/**
+ * Represents the owner state of the Autocomplete component for styling purposes.
+ */
+export interface RHFAutocompleteOwnerState extends Pick<RHFAutocompleteProps<any>, 'size' | 'disabled' | 'variant'> {
+    autocompleteColor: RHFAutocompleteProps<any>['color'];
+    disabled?: boolean;
     isFocus: boolean;
     isTabSelected: boolean;
     semantics: RHFAutocompleteVariants | 'error' | null;
-    variant?: 'withImage';
     multiple: boolean;
+    imageScale?: boolean;
+    imageRepeat?: boolean;
+    paletteColor: PaletteColor;
 }
+/**
+ * Defines the types of Slots available for the Autocomplete.
+ */
+export type RHFAutocompleteSlotsType = keyof typeof RFHAutocompleteSlots;
+/**
+ * Styles applicable to the Autocomplete using themes and custom slots.
+ */
+export type RHFAutocompleteStyles = Partial<OverridesStyleRules<RHFAutocompleteSlotsType, typeof RFHAUTOCOMPLETE_KEY_COMPONENT, Theme>> | undefined;

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

@@ -1,10 +1,7 @@
-import { RHFAutocompleteAsyncProps } from './types';
+import { RHFAutocompleteAsyncBaseProps } from './types';
 /**
- * Provee un combo de opciones cargadas directamente desde un endpoint usando internamente el componente RHFAutocomplete.
- * @param props
- * @returns
+ * RHFAutocompleteProps is a component that handles asynchronous autocomplete functionality.
+ * @param props - The properties passed to the component.
+ * @returns A React component.
  */
-/**
- * TODO: Documentar
- */
-export declare function RHFAutocompleteAsync<T>(props: RHFAutocompleteAsyncProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function RHFAutocompleteAsync<T>(props: RHFAutocompleteAsyncBaseProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,109 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { C as ComponentTypeText } from "./subcomponents/ComponentTypeText/index.js";
-import { C as ComponentTypeImage } from "./subcomponents/ComponentTypeImage/index.js";
+import { jsx } from "react/jsx-runtime";
+import { useNetwork, getPropertyByString } from "@m4l/core";
+import debounce from "lodash-es/debounce";
+import { useState, useCallback, useEffect } from "react";
+import { R as RHFAutocompleteAsyncRootStyled } from "./slots/RHFAutocompleteSlotsAsync.js";
 function RHFAutocompleteAsync(props) {
-  return /* @__PURE__ */ jsx(Fragment, { children: props.type === "image" ? /* @__PURE__ */ jsx(ComponentTypeImage, { ...props }) : /* @__PURE__ */ jsx(ComponentTypeText, { ...props }) });
+  const {
+    name,
+    endPoint,
+    timeout = 5e3,
+    parms,
+    resultField = "data",
+    size,
+    isRemote = true,
+    isExternalUrl = false,
+    onChangeFilterParms,
+    onChange,
+    onOpen,
+    onClose,
+    getOptionLabel,
+    isOptionEqualToValue,
+    multiple,
+    disabled,
+    skeletonWidth,
+    open,
+    value
+  } = props;
+  const { networkOperation } = useNetwork();
+  const [options, setOptions] = useState([]);
+  const [firstOpen, setFirstOpen] = useState(0);
+  const [loading, setIsloading] = useState(false);
+  const [newRefresh, setNewRefresh] = useState(0);
+  const [canLoadOptions, setCanLoadOptions] = useState(true);
+  const [filterParms, setFilterParms] = useState({});
+  const refresh = () => {
+    setNewRefresh((current) => current + 1);
+    firstOpen === 0 && hanldeFirstOpen();
+  };
+  const debouncedFilter = useCallback(
+    debounce(
+      (newFilterParms) => {
+        setCanLoadOptions(true);
+        setFilterParms(newFilterParms);
+      },
+      300
+    ),
+    [setCanLoadOptions, setFilterParms]
+  );
+  const onChangeFilterParmsLocal = (newValue) => {
+    if (onChangeFilterParms) {
+      debouncedFilter(onChangeFilterParms(newValue));
+    }
+  };
+  useEffect(() => {
+    setCanLoadOptions(true);
+  }, [parms, endPoint]);
+  const hanldeFirstOpen = () => {
+    if (firstOpen === 0) {
+      setFirstOpen(1);
+    }
+  };
+  useEffect(() => {
+    if (firstOpen === 1 && !loading && canLoadOptions) {
+      setIsloading(true);
+      setOptions([]);
+      setCanLoadOptions(false);
+      networkOperation({
+        method: "GET",
+        endPoint,
+        timeout,
+        isExternalUrl,
+        parms: { ...parms, ...filterParms },
+        isRemote
+      }).then((response) => {
+        const valueMaybeArray = getPropertyByString(response, resultField);
+        const newOptions = Array.isArray(valueMaybeArray) ? valueMaybeArray : [];
+        setOptions(newOptions);
+      }).finally(() => {
+        setIsloading(false);
+        setCanLoadOptions(true);
+      });
+    }
+    return () => {
+    };
+  }, [firstOpen, parms, filterParms, endPoint, newRefresh]);
+  return /* @__PURE__ */ jsx(
+    RHFAutocompleteAsyncRootStyled,
+    {
+      name,
+      loading,
+      options,
+      onChangeFilterParmsLocal: onChangeFilterParms ? onChangeFilterParmsLocal : void 0,
+      size,
+      refresh: () => refresh(),
+      onOpen,
+      onChange,
+      getOptionLabel,
+      isOptionEqualToValue,
+      multiple,
+      disabled,
+      onClose,
+      skeletonWidth,
+      open,
+      value
+    }
+  );
 }
 export {
   RHFAutocompleteAsync as R

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

@@ -0,0 +1,2 @@
+import { RHFAutocompleteAyncStyles } from './types';
+export declare const rhfAutocompleteAsyncSyles: RHFAutocompleteAyncStyles;

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

@@ -0,0 +1,6 @@
+const rhfAutocompleteAsyncSyles = {
+  autocompleteAsyncRoot: {}
+};
+export {
+  rhfAutocompleteAsyncSyles as r
+};

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

@@ -0,0 +1,9 @@
+/**
+ * Clave de identificación del componente Autocomplete dentro del sistema.
+ *
+ * Esta constante se utiliza como identificador único para asociar y personalizar estilos y configuraciones
+ * relacionadas con el componente `RHFAutocompleteAsync` dentro del sistema de temas y estilos.
+ * @default 'RHFM4LAutocomplete'
+ */
+export declare const RFHAUTOCOMPLETEASYNC_KEY_COMPONENT = "RHFM4LAutocompleteAsync";
+export declare const RFHAUTOCOMPLETEASYNC_CLASS_NAME_SPECIFY = "RHFM4LclasssAutocompleCssSpecificityAsync";

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

@@ -0,0 +1,4 @@
+const RFHAUTOCOMPLETEASYNC_KEY_COMPONENT = "RHFM4LAutocompleteAsync";
+export {
+  RFHAUTOCOMPLETEASYNC_KEY_COMPONENT as R
+};

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

@@ -0,0 +1,3 @@
+export declare enum RHFAutocompleteAsyncSlots {
+    autocompleteAsyncRoot = "autocompleteAsyncRoot"
+}

package/components/hook-form/RHFAutocompleteAsync/slots/RHFAutocompleteEnumAsync.js

@@ -0,0 +1,7 @@
+var RHFAutocompleteAsyncSlots = /* @__PURE__ */ ((RHFAutocompleteAsyncSlots2) => {
+  RHFAutocompleteAsyncSlots2["autocompleteAsyncRoot"] = "autocompleteAsyncRoot";
+  return RHFAutocompleteAsyncSlots2;
+})(RHFAutocompleteAsyncSlots || {});
+export {
+  RHFAutocompleteAsyncSlots as R
+};

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

@@ -0,0 +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>, {}, {}>;

package/components/hook-form/RHFAutocompleteAsync/slots/RHFAutocompleteSlotsAsync.js

@@ -0,0 +1,12 @@
+import { styled } from "@mui/material";
+import { r as rhfAutocompleteAsyncSyles } from "../RHFAutocompleteAsyncStyles.js";
+import { R as RFHAUTOCOMPLETEASYNC_KEY_COMPONENT } from "../constants.js";
+import { R as RHFAutocompleteAsyncSlots } from "./RHFAutocompleteEnumAsync.js";
+import { R as RHFAutocomplete } from "../../RHFAutocomplete/RHFAutocomplete.js";
+const RHFAutocompleteAsyncRootStyled = styled(RHFAutocomplete, {
+  name: RFHAUTOCOMPLETEASYNC_KEY_COMPONENT,
+  slot: RHFAutocompleteAsyncSlots.autocompleteAsyncRoot
+})(rhfAutocompleteAsyncSyles?.autocompleteAsyncRoot);
+export {
+  RHFAutocompleteAsyncRootStyled as R
+};

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

@@ -0,0 +1,2 @@
+export * from './RHFAutocompleteEnumAsync';
+export * from './RHFAutocompleteSlotsAsync';

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

@@ -0,0 +1 @@
+

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

@@ -1,12 +1,26 @@
-import { ImageProps, RHFAutocompleteBaseProps, RHFAutocompleteTypeTextProps } from '../RHFAutocomplete/types';
-export interface RHFAutocompleteAsyncBaseProps {
+import { AutocompleteChangeReason, Theme } from '@mui/material';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { ChangeEvent } from 'react';
+import { RHFAutocompleteProps } from '../RHFAutocomplete/types';
+import { RFHAUTOCOMPLETEASYNC_KEY_COMPONENT } from './constants';
+import { RHFAutocompleteAsyncSlots } from './slots';
+export interface RHFAutocompleteAsyncBaseProps<T> extends Omit<RHFAutocompleteProps<T>, 'options' | 'onChangeSearchInput' | 'get' | 'onChange' | 'getOptionLabel' | 'isOptionEqualToValue'> {
     endPoint: string;
     timeout?: number;
     parms?: Record<string, any>;
+    isExternalUrl?: boolean;
     resultField?: string;
     isRemote?: boolean;
+    onChange?: (event: ChangeEvent<{}> | undefined, value: unknown, reason: AutocompleteChangeReason) => void;
+    getOptionLabel: (option: unknown) => string;
+    isOptionEqualToValue: (option: unknown, value: unknown) => boolean;
     onChangeFilterParms?: (newValue: string) => Record<string, any>;
 }
-export type RHFAutocompleteAsyncProps<T> = (Omit<RHFAutocompleteBaseProps<T>, 'options' | 'onChangeSearchInput'> & ImageProps<T> & RHFAutocompleteAsyncBaseProps) | (Omit<RHFAutocompleteBaseProps<T>, 'options' | 'onChangeSearchInput'> & RHFAutocompleteTypeTextProps & RHFAutocompleteAsyncBaseProps);
-export type ComponentImageProps<T> = RHFAutocompleteAsyncBaseProps & Omit<RHFAutocompleteBaseProps<T>, 'options' | 'onChangeSearchInput'> & ImageProps<T>;
-export type ComponentTextProps<T> = RHFAutocompleteAsyncBaseProps & Omit<RHFAutocompleteBaseProps<T>, 'options' | 'onChangeSearchInput'> & RHFAutocompleteTypeTextProps;
+/**
+ * Defines the types of Slots available for the Autocomplete.
+ */
+export type RHFAutocompleteAsyncSlotsType = keyof typeof RHFAutocompleteAsyncSlots;
+/**
+ * Styles applicable to the Autocomplete using themes and custom slots.
+ */
+export type RHFAutocompleteAyncStyles = Partial<OverridesStyleRules<RHFAutocompleteAsyncSlotsType, typeof RFHAUTOCOMPLETEASYNC_KEY_COMPONENT, Theme>> | undefined;

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

@@ -1,2 +1,2 @@
 import { AutocompleteProps } from './types';
-export declare const Autocomplete: import('react').ForwardRefExoticComponent<Omit<AutocompleteProps<unknown, false, true, false>, "ref"> & import('react').RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export declare const Autocomplete: import('react').ForwardRefExoticComponent<Omit<AutocompleteProps<unknown, true, true, false>, "ref"> & import('react').RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

package/components/mui_extended/Autocomplete/Autocomplete.js

@@ -0,0 +1,299 @@
+import { jsx } from "react/jsx-runtime";
+import { useModuleDictionary, useModuleSkeleton, useEnvironment, getPropertyByString } from "@m4l/core";
+import { useTheme } from "@mui/material";
+import { forwardRef, useState, useMemo, useEffect, useCallback } from "react";
+import { w as withRenderOption } from "./renderOptions/index.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+import { A as AutocompleteStyled, P as PopperComponentStyled, R as RenderInputStyled, C as ChipStyled, I as ImageStyled, a as CircularProgressStyled, b as IconButtonStyled } from "./slots /AutocompleteSlots.js";
+import { T as Typography } from "../Typography/Typography.js";
+const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
+  const {
+    getOptionLabel,
+    isOptionEqualToValue,
+    skeletonWidth = 100,
+    options,
+    disabled,
+    onOpen,
+    onClose,
+    loading,
+    variant = "outlined",
+    helperMessage,
+    size = "medium",
+    onChangeFilterParmsLocal,
+    multiple,
+    imageScale = true,
+    //Diferencia
+    imageRepeat,
+    // Diferencia
+    getOptionUrlImage,
+    // Diferencia
+    type = "outlined",
+    color = "primary",
+    refresh,
+    error = false,
+    onChange,
+    value,
+    customError,
+    ...other
+  } = props;
+  const { getLabel } = useModuleDictionary();
+  useModuleSkeleton();
+  const theme = useTheme();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const [open, setOpen] = useState(false);
+  const { currentSize } = useComponentSize(size);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  useMemo(
+    () => getOptionUrlImage !== void 0,
+    [getOptionUrlImage]
+  );
+  const [selectedValue, setSelectedValue] = useState(
+    value || (multiple ? [] : null)
+  );
+  useEffect(() => {
+    if (!multiple && value) {
+      setInputValue(getOptionLabel(value));
+    } else if (multiple && Array.isArray(value)) {
+      setInputValue("");
+    } else {
+      setInputValue("");
+    }
+    setSelectedValue(value || (multiple ? [] : null));
+  }, [value, multiple, getOptionLabel]);
+  const handleDelete = (optionToDelete) => {
+    if (Array.isArray(selectedValue)) {
+      const updatedValue = selectedValue.filter(
+        (val) => !isOptionEqualToValueLocal(val, optionToDelete)
+      );
+      setSelectedValue(updatedValue);
+      onChange?.(
+        {},
+        updatedValue,
+        "removeOption"
+      );
+    }
+  };
+  const handleRefresh = () => {
+    refresh?.();
+    setOpen(true);
+  };
+  const handleChange = (event, newSelectedValue, reason) => {
+    const updatedValue = multiple ? Array.isArray(newSelectedValue) ? newSelectedValue : [] : newSelectedValue;
+    setSelectedValue(updatedValue);
+    setInputValue(
+      !multiple && updatedValue ? getOptionLabel(updatedValue) : ""
+    );
+    onChange?.(event, updatedValue, reason);
+  };
+  const handleInputChange = (_event, newValue, reason) => {
+    setInputValue(newValue);
+    if (reason === "input" && onChangeFilterParmsLocal) {
+      onChangeFilterParmsLocal(newValue, reason);
+    }
+  };
+  const isOptionEqualToValueLocal = useCallback(
+    (option, val) => {
+      if (val === null || val === void 0) {
+        return false;
+      }
+      return isOptionEqualToValue(option, val);
+    },
+    [isOptionEqualToValue]
+  );
+  const onCloseLocal = (event, reason) => {
+    setOpen(false);
+    if (onClose) {
+      onClose(event, reason);
+    }
+  };
+  const onOpenLocal = (event) => {
+    setOpen((currentState) => !currentState);
+    if (onOpen) {
+      onOpen(event);
+    }
+  };
+  const getOptionLabelLocal = useCallback(
+    (option) => {
+      if (typeof option === "string") {
+        return option;
+      }
+      if (option === null || option === void 0) {
+        return "";
+      }
+      return getOptionLabel(option);
+    },
+    [getOptionLabel]
+  );
+  const getOptionUrlImageLocal = (option) => {
+    if (option === void 0 || option === null || getOptionUrlImage === void 0) {
+      return "";
+    }
+    return getOptionUrlImage(option);
+  };
+  const paletteColor = getPropertyByString(
+    theme.vars.palette,
+    disabled ? "default" : color || "default",
+    theme.vars.palette.default
+  );
+  const ownerState = {
+    size: adjustedSize,
+    variant,
+    disabled,
+    paletteColor,
+    autocompleteColor: color,
+    imageScale: Boolean(imageScale),
+    multiple: Boolean(multiple)
+  };
+  const [inputValue, setInputValue] = useState("");
+  useEffect(() => {
+    if (!open && value === null && inputValue !== "") {
+      setInputValue("");
+    }
+    if (!open && value !== null && options && options.length === 0) {
+      onChangeFilterParmsLocal?.(
+        getOptionLabelLocal(Array.isArray(value) ? value[0] : value),
+        "reset"
+      );
+    }
+  }, [
+    value,
+    open,
+    inputValue,
+    onChangeFilterParmsLocal,
+    getOptionLabelLocal,
+    options
+  ]);
+  const checkKeyDown = (e) => {
+    if (e.code === "Enter") {
+      e.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    AutocompleteStyled,
+    {
+      ownerState: { ...ownerState },
+      tabIndex: 0,
+      disableClearable: true,
+      multiple,
+      onKeyDown: checkKeyDown,
+      size: adjustedSize,
+      ref,
+      autoSelect: false,
+      options,
+      getOptionLabel: getOptionLabelLocal,
+      clearOnBlur: false,
+      PopperComponent: (popperProps) => {
+        const { color: popperColor, ...otherPopperProps } = popperProps;
+        return /* @__PURE__ */ jsx(
+          PopperComponentStyled,
+          {
+            ...otherPopperProps,
+            size: adjustedSize,
+            placement: "bottom-start",
+            ownerState: { ...ownerState }
+          }
+        );
+      },
+      isOptionEqualToValue: isOptionEqualToValueLocal,
+      value: selectedValue,
+      inputValue,
+      onOpen: onOpenLocal,
+      onClose: onCloseLocal,
+      open,
+      onInputChange: handleInputChange,
+      onChange: handleChange,
+      filterOptions: onChangeFilterParmsLocal ? (x) => x : void 0,
+      loading,
+      loadingText: /* @__PURE__ */ jsx(Typography, { variant: "body", size: adjustedSize, children: getLabel("autocomplete.loading_options") }),
+      disabled,
+      noOptionsText: /* @__PURE__ */ jsx(Typography, { variant: "body", size: adjustedSize, children: getLabel("autocomplete.no_options") }),
+      renderOption: (renderProps, option) => {
+        const isSelected = multiple ? Array.isArray(selectedValue) && selectedValue.some((val) => isOptionEqualToValueLocal(option, val)) : isOptionEqualToValueLocal(option, selectedValue);
+        return withRenderOption(color)(renderProps, {
+          ...typeof option === "object" && option !== null ? option : {},
+          label: getOptionLabelLocal(option),
+          selected: isSelected,
+          disabled,
+          size
+        });
+      },
+      renderInput: (params) => {
+        const selectedOption = options.find((option) => {
+          return isOptionEqualToValueLocal(option, selectedValue);
+        });
+        return /* @__PURE__ */ jsx(
+          RenderInputStyled,
+          {
+            ownerState: { ...ownerState },
+            ...params,
+            color,
+            error,
+            size: adjustedSize,
+            variant,
+            InputLabelProps: {
+              ...params.InputLabelProps,
+              shrink: true
+            },
+            fullWidth: true,
+            disabled,
+            SelectProps: { native: true },
+            InputProps: {
+              ...params.InputProps,
+              autoComplete: "off",
+              // Asegura que sea string.
+              startAdornment: multiple ? Array.isArray(selectedValue) ? selectedValue.map((option, index) => /* @__PURE__ */ jsx(
+                ChipStyled,
+                {
+                  size: adjustedSize,
+                  label: getOptionLabelLocal(option),
+                  opacity: true,
+                  onDeleted: () => handleDelete(option),
+                  ownerState: { ...ownerState }
+                },
+                index
+              )) : null : type === "image" && !multiple && selectedOption ? /* @__PURE__ */ jsx(
+                ImageStyled,
+                {
+                  ownerState: { ...ownerState },
+                  src: getOptionUrlImageLocal(selectedOption),
+                  alt: getOptionLabelLocal(selectedOption)
+                }
+              ) : params.InputProps.startAdornment,
+              endAdornment: loading ? /* @__PURE__ */ jsx(
+                CircularProgressStyled,
+                {
+                  ownerState: { ...ownerState },
+                  color,
+                  size: adjustedSize
+                }
+              ) : /* @__PURE__ */ jsx("div", { children: refresh ? /* @__PURE__ */ jsx(
+                IconButtonStyled,
+                {
+                  ownerState: { ...ownerState },
+                  src: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/round_refresh.svg`,
+                  onClick: handleRefresh,
+                  disabled,
+                  size: adjustedSize
+                }
+              ) : /* @__PURE__ */ jsx(
+                IconButtonStyled,
+                {
+                  ownerState: { ...ownerState },
+                  src: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/chevronDown.svg`,
+                  onClick: (event) => onOpenLocal(event),
+                  disabled,
+                  size: adjustedSize
+                }
+              ) })
+            },
+            ...other,
+            ref: params.InputProps.ref
+          }
+        );
+      }
+    }
+  );
+});
+export {
+  Autocomplete as A
+};