@m4l/components 9.3.19-BE171025-beta.1 → 9.3.19-BE241025-beta.2

package/components/MenuActions/MenuActions.js

@@ -34,6 +34,7 @@ function MenuActions(props) {
     className,
     onOpen,
     slots = {},
+    variant = "text",
     ...other
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -41,11 +42,14 @@ function MenuActions(props) {
   const { getLabel } = useModuleDictionary();
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(externalOpen ?? anchorEl);
-  const ownerState = useMemo(() => ({
-    iconSize: currentSize,
-    selected: open,
-    paletteColor: color
-  }), [currentSize, open, color]);
+  const ownerState = useMemo(
+    () => ({
+      iconSize: currentSize,
+      selected: open,
+      paletteColor: color
+    }),
+    [currentSize, open, color]
+  );
   useEffect(() => {
     if (onOpen) {
       onOpen(open);
@@ -60,21 +64,27 @@ function MenuActions(props) {
   const finalIcon = useMemo(() => {
     return icon || urlIcon || `${host_static_assets}/${environment_assets}/${ICON_PATH}/${ICONS.MENU}`;
   }, [urlIcon, icon, host_static_assets, environment_assets]);
-  const handleClick = useCallback((e, menuAction) => {
-    e.stopPropagation();
-    setAnchorEl(null);
-    if (onOpen) {
-      onOpen(false);
-    }
-    menuAction.onClick && menuAction.onClick(e);
-  }, [onOpen]);
-  const handleButtonClick = useCallback((e) => {
-    e.stopPropagation();
-    setAnchorEl(e.currentTarget);
-    if (onOpen) {
-      onOpen(true);
-    }
-  }, [onOpen]);
+  const handleClick = useCallback(
+    (e, menuAction) => {
+      e.stopPropagation();
+      setAnchorEl(null);
+      if (onOpen) {
+        onOpen(false);
+      }
+      menuAction.onClick && menuAction.onClick(e);
+    },
+    [onOpen]
+  );
+  const handleButtonClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      setAnchorEl(e.currentTarget);
+      if (onOpen) {
+        onOpen(true);
+      }
+    },
+    [onOpen]
+  );
   const renderMenuContent = useCallback(() => {
     let processedActions = [];
     let finalActions = [];
@@ -89,7 +99,16 @@ function MenuActions(props) {
       finalActions = processedActions;
     }
     if (finalActions.length === 0) {
-      return /* @__PURE__ */ jsx(MenuItem, { disabled: true, role: "menu-no-actions", label: getLabel(getMenuActionsDictionary(DICTIONARY.no_actions_label)) });
+      return /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          disabled: true,
+          role: "menu-no-actions",
+          label: getLabel(
+            getMenuActionsDictionary(DICTIONARY.no_actions_label)
+          )
+        }
+      );
     }
     const RenderHeader = () => {
       return /* @__PURE__ */ jsx(HeaderMenuActionsStyled, { children: header });
@@ -104,7 +123,14 @@ function MenuActions(props) {
         const key = actionKey ?? index;
         switch (menuAction.type ?? "menuItem") {
           case "divider":
-            return /* @__PURE__ */ jsx(MenuDivider, { variant: "solid", size }, `divider-${key}`);
+            return /* @__PURE__ */ jsx(
+              MenuDivider,
+              {
+                variant: "solid",
+                size
+              },
+              `divider-${key}`
+            );
           case "loader":
             return /* @__PURE__ */ jsx(MenuLoaderStyled, { size, children: /* @__PURE__ */ jsx(CircularProgress, { size }) }, `loader-${key}`);
           case "customNode":
@@ -115,7 +141,9 @@ function MenuActions(props) {
               {
                 size,
                 ...menuAction,
-                label: menuAction.label ?? getLabel(getMenuActionsDictionary(DICTIONARY.no_actions_label)),
+                label: menuAction.label ?? getLabel(
+                  getMenuActionsDictionary(DICTIONARY.no_actions_label)
+                ),
                 onClick: menuAction.onClick ? (e) => handleClick(e, menuAction) : void 0
               },
               `${MENU_ACTIONS_}${menuAction.label ?? key}`
@@ -128,38 +156,60 @@ function MenuActions(props) {
       footer && /* @__PURE__ */ jsx(RenderFooter, {}),
       endListElement && endListElement
     ] });
-  }, [menuActions, header, size, footer, endListElement, objItem, getLabel, actionKey, handleClick]);
-  return /* @__PURE__ */ jsxs(RootStyled, { className: clsx(className, MENU_ACTIONS_CLASSES.root, ownerState.selected && MENU_ACTIONS_CLASSES.selected), ownerState: { ownerState }, children: [
-    /* @__PURE__ */ jsx(
-      IconButtonStyled,
-      {
-        ownerState: { ...ownerState },
-        tooltip: toolTip,
-        size,
-        icon: finalIcon,
-        onClick: handleButtonClick,
-        className: iconButtonClassName,
-        selected: open,
-        disabled,
-        badgeProps: { badgeContent },
-        "aria-label": "menu-actions"
-      }
-    ),
-    open && /* @__PURE__ */ jsx(
-      Popover,
-      {
-        id: "Popover",
-        open,
-        anchorEl,
-        onClose: handleOpenClose,
-        arrowType,
-        ...other,
-        slots: { ...slots },
-        slotProps: { paper: { ...paperProps } },
-        children: renderMenuContent()
-      }
-    )
-  ] });
+  }, [
+    menuActions,
+    header,
+    size,
+    footer,
+    endListElement,
+    objItem,
+    getLabel,
+    actionKey,
+    handleClick
+  ]);
+  return /* @__PURE__ */ jsxs(
+    RootStyled,
+    {
+      className: clsx(
+        className,
+        MENU_ACTIONS_CLASSES.root,
+        ownerState.selected && MENU_ACTIONS_CLASSES.selected
+      ),
+      ownerState: { ownerState },
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButtonStyled,
+          {
+            ownerState: { ...ownerState },
+            tooltip: toolTip,
+            size,
+            icon: finalIcon,
+            onClick: handleButtonClick,
+            className: iconButtonClassName,
+            selected: open,
+            disabled,
+            badgeProps: { badgeContent },
+            "aria-label": other?.["aria-label"] ?? "menu-actions",
+            variant
+          }
+        ),
+        open && /* @__PURE__ */ jsx(
+          Popover,
+          {
+            id: "Popover",
+            open,
+            anchorEl,
+            onClose: handleOpenClose,
+            arrowType,
+            ...other,
+            slots: { ...slots },
+            slotProps: { paper: { ...paperProps } },
+            children: renderMenuContent()
+          }
+        )
+      ]
+    }
+  );
 }
 const MemonizedMenuActions = React.memo(MenuActions);
 export {

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

@@ -4,4 +4,4 @@ import { RHFAutocompleteProps } from './types';
  * @param props - The properties for the RHFAutocomplete component.
  * @returns The RHFAutocomplete component.
  */
-export declare function RHFAutocomplete<T>(props: RHFAutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function RHFAutocomplete<T, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined>(props: RHFAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>): import("react/jsx-runtime").JSX.Element;

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

@@ -25,8 +25,8 @@ function RHFAutocomplete(props) {
     multiple,
     refresh,
     startAdornment,
-    getOptionalStartAdornment,
-    getOptionalEndAdornment,
+    getOptionStartAdornment,
+    getOptionEndAdornment,
     className
     // onChange: onChangeRHF,
   } = props;
@@ -121,8 +121,8 @@ function RHFAutocomplete(props) {
                   value,
                   htmlFor: htmlForId,
                   startAdornment,
-                  getOptionalStartAdornment: getOptionalStartAdornment ? (option) => getOptionalStartAdornment(option) : () => null,
-                  getOptionalEndAdornment: getOptionalEndAdornment ? (option) => getOptionalEndAdornment(option) : () => null
+                  getOptionStartAdornment,
+                  getOptionEndAdornment
                 }
               ),
               error?.message ? /* @__PURE__ */ jsx(HelperError, { message: error?.message }) : null

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

@@ -54,11 +54,11 @@ export interface RHFAutocompleteProps<T = any, Multiple extends boolean | undefi
     /**
      * Icono o adorno inicial que se muestra en cada opción del autocomplete.
      */
-    getOptionalEndAdornment?: AutocompleteProps<T, Multiple>['getOptionalEndAdornment'];
+    getOptionEndAdornment?: AutocompleteProps<T, Multiple>['getOptionEndAdornment'];
     /**
      * Icono o adorno final que se muestra en cada opción del autocomplete.
      */
-    getOptionalStartAdornment?: AutocompleteProps<T, Multiple>['getOptionalStartAdornment'];
+    getOptionStartAdornment?: AutocompleteProps<T, Multiple>['getOptionStartAdornment'];
 }
 /**
  * Represents the owner state of the Autocomplete component for styling purposes.

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

@@ -24,8 +24,8 @@ function RHFAutocompleteAsync(props) {
     skeletonWidth,
     responseToCamelCase,
     startAdornment,
-    getOptionalStartAdornment,
-    getOptionalEndAdornment,
+    getOptionStartAdornment,
+    getOptionEndAdornment,
     className
   } = props;
   const [state, dispatch] = useReducer(
@@ -94,8 +94,8 @@ function RHFAutocompleteAsync(props) {
       onClose: onCloseLocal,
       skeletonWidth,
       startAdornment,
-      getOptionalStartAdornment,
-      getOptionalEndAdornment
+      getOptionStartAdornment,
+      getOptionEndAdornment
     }
   );
 }

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

@@ -1 +1 @@
-export declare const RHFAutocompleteAsyncRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../RHFAutocomplete/types').RHFAutocompleteProps<unknown, undefined, undefined, undefined>, keyof import('../../RHFAutocomplete/types').RHFAutocompleteProps<unknown, undefined, undefined, undefined>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
+export declare const RHFAutocompleteAsyncRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../RHFAutocomplete/types').RHFAutocompleteProps<unknown, boolean | undefined, boolean | undefined, boolean | undefined>, keyof import('../../RHFAutocomplete/types').RHFAutocompleteProps<unknown, boolean | undefined, boolean | undefined, boolean | undefined>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;

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

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

package/components/mui_extended/Autocomplete/Autocomplete.js

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
-import { forwardRef, useMemo } from "react";
+import { forwardRef, useMemo, useCallback } from "react";
 import { r as renderOption } from "./renderOptions/index.js";
 import { u as useValuesAndHandlers } from "./hooks/useValuesAndHandlers.js";
 import { u as useStartAdornments } from "./hooks/useStartAdornments.js";
 import { u as useEndAdornments } from "./hooks/useEndAdornments.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
-import { S as SkeletonAutocompleteStyled, A as AutocompleteRootStyled, R as RenderInputStyled, P as PopperComponentStyled } from "./slots/AutocompleteSlots.js";
+import { P as PopperComponentStyled, R as RenderInputStyled, S as SkeletonAutocompleteStyled, A as AutocompleteRootStyled } from "./slots/AutocompleteSlots.js";
 import { T as Typography } from "../Typography/Typography.js";
-const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
+function AutocompleteComponent(props, ref) {
   const {
     options,
     disabled,
@@ -17,16 +17,14 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     size = "medium",
     onChangeFilterParmsLocal,
     multiple,
-    getOptionUrlImage,
-    // Diferencia
     refresh,
     error = false,
     htmlFor,
     readOnly = false,
     placeholder,
     startAdornment,
-    getOptionalStartAdornment,
-    getOptionalEndAdornment
+    getOptionStartAdornment,
+    getOptionEndAdornment
   } = props;
   const { getLabel } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
@@ -47,6 +45,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     checkKeyDown,
     scrollPositionOptionsRef
   } = useValuesAndHandlers(props);
+  const hasStartAdornment = !!startAdornment;
   const ownerState = useMemo(() => ({
     size: adjustedSize,
     variant,
@@ -54,8 +53,8 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     multiple: Boolean(multiple),
     error,
     readOnly,
-    startAdornment: !!startAdornment
-  }), [adjustedSize, disabled, error, multiple, variant, readOnly, startAdornment]);
+    startAdornment: hasStartAdornment
+  }), [adjustedSize, disabled, error, multiple, variant, readOnly, hasStartAdornment]);
   const startAdornments = useStartAdornments({
     selectedValue,
     multiple,
@@ -65,8 +64,8 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     handleDelete,
     disabled,
     startAdornment,
-    getOptionalStartAdornment,
-    getOptionalEndAdornment
+    getOptionStartAdornment,
+    getOptionEndAdornment
   });
   const endAdornments = useEndAdornments({
     loading,
@@ -79,6 +78,81 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     open,
     readOnly
   });
+  const MemoizedPopperComponent = useCallback((popperProps) => {
+    const { color: popperColor, ...otherPopperProps } = popperProps;
+    return /* @__PURE__ */ jsx(
+      PopperComponentStyled,
+      {
+        ...otherPopperProps,
+        size: adjustedSize,
+        placement: "bottom-start",
+        ownerState: { ...ownerState }
+      }
+    );
+  }, [adjustedSize, ownerState]);
+  const memoizedRenderOption = useCallback((renderProps, option) => {
+    const isSelected = multiple ? Array.isArray(selectedValue) && selectedValue.some((val) => isOptionEqualToValueLocal(option, val)) : isOptionEqualToValueLocal(option, selectedValue);
+    return renderOption(renderProps, {
+      ...typeof option === "object" && option !== null ? option : {},
+      label: getOptionLabelLocal(option),
+      selected: isSelected,
+      disabled,
+      size
+    }, getOptionStartAdornment, getOptionEndAdornment);
+  }, [
+    multiple,
+    selectedValue,
+    isOptionEqualToValueLocal,
+    getOptionLabelLocal,
+    disabled,
+    size,
+    getOptionStartAdornment,
+    getOptionEndAdornment
+  ]);
+  const memoizedRenderInput = useCallback((params) => {
+    const { InputLabelProps, inputProps, InputProps, ...renderInputOhers } = params;
+    const { className: _classNoCount, ...otherInputProps } = InputProps;
+    const { className: _ClassNoCount2, ...otherinputProps } = inputProps;
+    return /* @__PURE__ */ jsx(
+      RenderInputStyled,
+      {
+        variant,
+        ownerState: { ...ownerState },
+        InputLabelProps: {
+          ...InputLabelProps,
+          shrink: true
+        },
+        inputProps: { ...otherinputProps, id: htmlFor },
+        error,
+        ...renderInputOhers,
+        autoComplete: "off",
+        InputProps: {
+          ...otherInputProps,
+          startAdornment: startAdornments,
+          endAdornment: endAdornments,
+          readOnly
+        },
+        SelectProps: { native: true },
+        size: adjustedSize,
+        fullWidth: true,
+        disabled,
+        placeholder
+      }
+    );
+  }, [
+    variant,
+    ownerState,
+    htmlFor,
+    error,
+    startAdornments,
+    endAdornments,
+    readOnly,
+    adjustedSize,
+    disabled,
+    placeholder
+  ]);
+  const memoizedLoadingText = useMemo(() => /* @__PURE__ */ jsx(Typography, { variant: "body", size: adjustedSize, children: getLabel("autocomplete.loading_options") }), [adjustedSize, getLabel]);
+  const memoizedNoOptionsText = useMemo(() => /* @__PURE__ */ jsx(Typography, { variant: "body", size: adjustedSize, children: getLabel("autocomplete.no_options") }), [adjustedSize, getLabel]);
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(
       SkeletonAutocompleteStyled,
@@ -100,18 +174,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
       options,
       getOptionLabel: getOptionLabelLocal,
       clearOnBlur: false,
-      PopperComponent: (popperProps) => {
-        const { color: popperColor, ...otherPopperProps } = popperProps;
-        return /* @__PURE__ */ jsx(
-          PopperComponentStyled,
-          {
-            ...otherPopperProps,
-            size: adjustedSize,
-            placement: "bottom-start",
-            ownerState: { ...ownerState }
-          }
-        );
-      },
+      PopperComponent: MemoizedPopperComponent,
       isOptionEqualToValue: isOptionEqualToValueLocal,
       value: selectedValue,
       inputValue,
@@ -121,20 +184,11 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
       onInputChange: handleInputChange,
       onChange: handleChange,
       loading,
-      loadingText: /* @__PURE__ */ jsx(Typography, { variant: "body", size: adjustedSize, children: getLabel("autocomplete.loading_options") }),
+      loadingText: memoizedLoadingText,
       disabled,
-      noOptionsText: /* @__PURE__ */ jsx(Typography, { variant: "body", size: adjustedSize, children: getLabel("autocomplete.no_options") }),
+      noOptionsText: memoizedNoOptionsText,
       filterOptions: onChangeFilterParmsLocal ? (x) => x : void 0,
-      renderOption: (renderProps, option) => {
-        const isSelected = multiple ? Array.isArray(selectedValue) && selectedValue.some((val) => isOptionEqualToValueLocal(option, val)) : isOptionEqualToValueLocal(option, selectedValue);
-        return renderOption(renderProps, {
-          ...typeof option === "object" && option !== null ? option : {},
-          label: getOptionLabelLocal(option),
-          selected: isSelected,
-          disabled,
-          size
-        });
-      },
+      renderOption: memoizedRenderOption,
       ListboxProps: {
         //Esto para no perder el scroll de la lista de opciones, cuando es multiple, ya que MUI no lo guarda
         onScroll: (event) => {
@@ -149,40 +203,11 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
           }
         }
       },
-      renderInput: (params) => {
-        const { InputLabelProps, inputProps, InputProps, ...renderInputOhers } = params;
-        const { className: _classNoCount, ...otherInputProps } = InputProps;
-        const { className: _ClassNoCount2, ...otherinputProps } = inputProps;
-        return /* @__PURE__ */ jsx(
-          RenderInputStyled,
-          {
-            variant,
-            ownerState: { ...ownerState },
-            InputLabelProps: {
-              ...InputLabelProps,
-              shrink: true
-            },
-            inputProps: { ...otherinputProps, id: htmlFor },
-            error,
-            ...renderInputOhers,
-            autoComplete: "off",
-            InputProps: {
-              ...otherInputProps,
-              startAdornment: startAdornments,
-              endAdornment: endAdornments,
-              readOnly
-            },
-            SelectProps: { native: true },
-            size: adjustedSize,
-            fullWidth: true,
-            disabled,
-            placeholder
-          }
-        );
-      }
+      renderInput: memoizedRenderInput
     }
   );
-});
+}
+const Autocomplete = forwardRef(AutocompleteComponent);
 export {
   Autocomplete as A
 };

package/components/mui_extended/Autocomplete/Autocomplete.styles.js

@@ -3,9 +3,13 @@ const autocompleteSyles = {
   /**
    * Styles for the root component.
    */
-  root: () => ({
+  root: ({ theme }) => ({
     width: "100%",
-    padding: 0
+    padding: 0,
+    "& .M4LImage-root": {
+      width: theme.vars.size.baseSpacings["sp3-5"],
+      height: theme.vars.size.baseSpacings["sp3-5"]
+    }
   }),
   /**
    * Styles for the icon button component.
@@ -81,7 +85,7 @@ const autocompleteSyles = {
         ...ownerState?.startAdornment ? {
           padding: `${sp1} ${sp7} ${sp1} ${sp5}!important`
         } : {
-          padding: `${sp1} ${sp7} ${sp1} 0px!important`
+          padding: `${sp1} ${sp7} ${sp1} ${sp1}!important`
         },
         gap: sp1,
         flexWrap: "wrap",
@@ -104,9 +108,11 @@ const autocompleteSyles = {
       minWidth: "100%",
       maxHeight: "200px",
       "& .MuiAutocomplete-listbox": {
+        display: "grid",
+        gridTemplateColumns: "auto",
         height: "100%",
         "& .M4LMenuItem-root ": {
-          width: "fit-content",
+          width: "100%",
           "& .M4LTypography-root": {
             width: "fit-content",
             overflow: "unset"
@@ -116,7 +122,7 @@ const autocompleteSyles = {
     }
   }),
   /**
-   * Styles for the popover component.
+   * styles for the circular progress component.
    */
   circularProgress: {},
   /**

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

@@ -0,0 +1,6 @@
+import { Sizes } from '@m4l/styles';
+import { ResourceType } from '../types';
+/**
+ * Render adornment function similar to useStartAdornments
+ */
+export declare const renderAdornment: (propsResource: ResourceType, adjustedSize: Extract<Sizes, "small" | "medium">) => import("react/jsx-runtime").JSX.Element | null;

package/components/mui_extended/Autocomplete/RenderAdornment/RenderAdornment.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { I as Image } from "../../../Image/Image.js";
+import { I as Icon } from "../../../Icon/Icon.js";
+const renderAdornment = (propsResource, adjustedSize) => {
+  const { resource, type } = propsResource;
+  if (!resource) {
+    return null;
+  }
+  if (React.isValidElement(resource)) {
+    try {
+      return React.cloneElement(resource, {
+        size: adjustedSize
+      });
+    } catch (error) {
+      console.warn("Error cloning React element:", error);
+      return null;
+    }
+  }
+  if (typeof resource === "string") {
+    if (type === "image") {
+      return /* @__PURE__ */ jsx(
+        Image,
+        {
+          src: resource,
+          width: 14,
+          height: 14
+        }
+      );
+    } else {
+      return /* @__PURE__ */ jsx(
+        Icon,
+        {
+          src: resource,
+          size: adjustedSize
+        }
+      );
+    }
+  }
+  console.warn("Invalid icon type provided to renderAdornment:", typeof resource);
+  return null;
+};
+export {
+  renderAdornment as r
+};

package/components/mui_extended/Autocomplete/hooks/useEndAdornments.js

@@ -40,7 +40,8 @@ function useEndAdornments(props) {
         onClick: (event) => !readOnly ? onOpenLocal(event) : void 0,
         disabled,
         size: adjustedSize,
-        rotationAngle: open ? 180 : 0
+        rotationAngle: open ? 180 : 0,
+        "aria-label": "toggle Autocomplete"
       }
     )
   ] });

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

@@ -1,25 +1,17 @@
-import { default as React } from 'react';
 import { AutocompleteOwnerState, AutocompleteProps } from '../types';
-export type UseAdornmentsProps<T> = {
+export type UseAdornmentsProps<T, Multiple extends boolean | undefined = undefined> = {
     selectedValue: T | T[] | null;
     multiple?: boolean;
-    loading?: boolean;
     adjustedSize: 'small' | 'medium';
     getOptionLabelLocal: (option: T) => string;
-    getOptionalStartAdornment?: (option: T) => React.ReactNode;
-    getOptionalEndAdornment?: (option: T) => React.ReactNode;
+    getOptionStartAdornment?: AutocompleteProps<T, Multiple>['getOptionStartAdornment'];
+    getOptionEndAdornment?: AutocompleteProps<T, Multiple>['getOptionEndAdornment'];
     ownerState: AutocompleteOwnerState;
     handleDelete: (option: T) => void;
-    getOptionUrlImage?: (option: T) => string;
-    selectedOption?: T;
-    getOptionUrlImageLocal: (option: T) => string;
-    refresh?: () => void;
-    handleRefresh: () => void;
     disabled?: boolean;
-    onOpenLocal: (event: React.MouseEvent<HTMLButtonElement>) => void;
     startAdornment?: AutocompleteProps<unknown, true>['startAdornment'];
 };
 /**
  * Hook para el componente Autocomplete local
  */
-export declare function useStartAdornments<T>(props: UseAdornmentsProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare function useStartAdornments<T, Multiple extends boolean | undefined = undefined>(props: UseAdornmentsProps<T, Multiple>): import("react/jsx-runtime").JSX.Element | null;