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

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

@@ -8,7 +8,7 @@ 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 { 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,
@@ -133,7 +132,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
           selected: isSelected,
           disabled,
           size
-        });
+        }, getOptionStartAdornment, getOptionEndAdornment);
       },
       ListboxProps: {
         //Esto para no perder el scroll de la lista de opciones, cuando es multiple, ya que MUI no lo guarda
@@ -182,7 +181,8 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
       }
     }
   );
-});
+}
+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",

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;

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

@@ -1,5 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { useMemo } from "react";
+import { r as renderAdornment } from "../RenderAdornment/RenderAdornment.js";
 import { b as ContainerMultipleValuesStyled, c as ContainerWrapperStyled, d as ChipStyled, W as WrapperStartAdornmentStyled } from "../slots/AutocompleteSlots.js";
 function useStartAdornments(props) {
   const {
@@ -11,30 +12,68 @@ function useStartAdornments(props) {
     handleDelete,
     disabled,
     startAdornment,
-    getOptionalStartAdornment,
-    getOptionalEndAdornment
+    getOptionStartAdornment,
+    getOptionEndAdornment
   } = props;
-  const startAdornmentClone = startAdornment ? React.cloneElement(startAdornment, {
-    size: adjustedSize
-  }) : null;
+  const startAdornmentClone = useMemo(() => {
+    if (!startAdornment) {
+      return null;
+    }
+    try {
+      return React.cloneElement(startAdornment, {
+        size: adjustedSize
+      });
+    } catch (error) {
+      console.warn("Error cloning startAdornment:", error);
+      return null;
+    }
+  }, [startAdornment, adjustedSize]);
+  const memoizedIcons = useMemo(() => {
+    if (!Array.isArray(selectedValue) || !multiple || selectedValue.length === 0) {
+      return null;
+    }
+    const iconMap = /* @__PURE__ */ new Map();
+    selectedValue.forEach((option) => {
+      const optionKey = getOptionLabelLocal(option);
+      const startAdornmentResource = getOptionStartAdornment?.(option);
+      const endAdornmentResource = getOptionEndAdornment?.(option);
+      if (startAdornmentResource) {
+        iconMap.set(`${optionKey}-start`, renderAdornment(startAdornmentResource, adjustedSize));
+      }
+      if (endAdornmentResource) {
+        iconMap.set(`${optionKey}-end`, renderAdornment(endAdornmentResource, adjustedSize));
+      }
+    });
+    return iconMap;
+  }, [
+    selectedValue,
+    multiple,
+    getOptionLabelLocal,
+    getOptionStartAdornment,
+    getOptionEndAdornment,
+    adjustedSize
+  ]);
   const internalAdornments = useMemo(() => {
     if (!(Array.isArray(selectedValue) && multiple)) {
       return null;
     }
-    return /* @__PURE__ */ jsx(ContainerMultipleValuesStyled, { children: /* @__PURE__ */ jsx(ContainerWrapperStyled, { children: selectedValue.map((option, index) => /* @__PURE__ */ jsx(
-      ChipStyled,
-      {
-        size: adjustedSize,
-        label: getOptionLabelLocal(option),
-        opacity: true,
-        onDeleted: () => handleDelete(option),
-        disabledDeleteButton: disabled,
-        ownerState: { ...ownerState },
-        startIcon: getOptionalStartAdornment?.(option),
-        endIcon: getOptionalEndAdornment?.(option)
-      },
-      `${option}-${index}`
-    )) }) });
+    return /* @__PURE__ */ jsx(ContainerMultipleValuesStyled, { role: "list", "aria-label": "Selected options", children: /* @__PURE__ */ jsx(ContainerWrapperStyled, { children: selectedValue.map((option, index) => {
+      const optionKey = getOptionLabelLocal(option);
+      return /* @__PURE__ */ jsx(
+        ChipStyled,
+        {
+          size: adjustedSize,
+          label: optionKey,
+          opacity: true,
+          onDeleted: () => handleDelete(option),
+          disabledDeleteButton: disabled,
+          ownerState: { ...ownerState },
+          startIcon: memoizedIcons?.get(`${optionKey}-start`),
+          endIcon: memoizedIcons?.get(`${optionKey}-end`)
+        },
+        `${optionKey}-${index}`
+      );
+    }) }) });
   }, [
     selectedValue,
     multiple,
@@ -43,16 +82,26 @@ function useStartAdornments(props) {
     handleDelete,
     disabled,
     ownerState,
-    getOptionalStartAdornment,
-    getOptionalEndAdornment
+    memoizedIcons
   ]);
   if (startAdornmentClone && internalAdornments) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(WrapperStartAdornmentStyled, { children: startAdornmentClone }),
+      /* @__PURE__ */ jsx(WrapperStartAdornmentStyled, { role: "img", "aria-hidden": "true", children: startAdornmentClone }),
       internalAdornments
     ] });
   }
-  return startAdornment ? /* @__PURE__ */ jsx(WrapperStartAdornmentStyled, { children: startAdornmentClone }) : internalAdornments;
+  if (startAdornmentClone) {
+    return /* @__PURE__ */ jsx(WrapperStartAdornmentStyled, { role: "img", "aria-hidden": "true", children: startAdornmentClone });
+  }
+  if (!getOptionLabelLocal) {
+    console.error("useStartAdornments: getOptionLabelLocal is required");
+    return null;
+  }
+  if (!handleDelete) {
+    console.error("useStartAdornments: handleDelete is required");
+    return null;
+  }
+  return internalAdornments;
 }
 export {
   useStartAdornments as u

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

@@ -8,7 +8,6 @@ export declare function useValuesAndHandlers<T, Multiple extends boolean | undef
     open: boolean;
     inputValue: string;
     selectedValue: T | T[] | null;
-    selectedOption: T | undefined;
     isOptionEqualToValueLocal: (option: unknown, val: unknown) => boolean;
     handleDelete: (optionToDelete: T) => void;
     handleRefresh: () => void;
@@ -17,7 +16,6 @@ export declare function useValuesAndHandlers<T, Multiple extends boolean | undef
     onCloseLocal: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
     onOpenLocal: (event: React.SyntheticEvent) => void;
     getOptionLabelLocal: (option: unknown) => string;
-    getOptionUrlImageLocal: (option: T | null) => string;
     checkKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
     scrollPositionOptionsRef: import('react').MutableRefObject<number>;
 };