@m4l/components 9.3.25 → 9.3.27-BE071125-beta.1

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

@@ -9,8 +9,6 @@ function useValuesAndHandlers(props) {
     onClose,
     onChangeFilterParmsLocal,
     multiple,
-    getOptionUrlImage,
-    // Diferencia
     refresh,
     onChange,
     value,
@@ -27,9 +25,12 @@ function useValuesAndHandlers(props) {
       return;
     }
     const newValue = value || (multiple ? [] : null);
+    if (deepEqual(selectedValue, newValue)) {
+      return;
+    }
     refValue.current = newValue;
     setSelectedValue(newValue);
-  }, [multiple, value]);
+  }, [multiple, value, selectedValue]);
   const isOptionEqualToValueLocal = useCallback(
     (option, val) => {
       if (val === null || val === void 0) {
@@ -112,21 +113,19 @@ function useValuesAndHandlers(props) {
     },
     [getOptionLabel]
   );
-  const getOptionUrlImageLocal = useCallback((option) => {
-    if (option === void 0 || option === null || getOptionUrlImage === void 0) {
-      return "";
-    }
-    return getOptionUrlImage(option);
-  }, [getOptionUrlImage]);
   const [inputValue, setInputValue] = useState("");
   useEffect(() => {
     if (readOnly && value !== null && value !== void 0 && !multiple) {
       const displayValue = getOptionLabelLocal(value);
-      setInputValue(displayValue);
+      if (inputValue !== displayValue) {
+        setInputValue(displayValue);
+      }
     } else if (readOnly && multiple) {
-      setInputValue("");
+      if (inputValue !== "") {
+        setInputValue("");
+      }
     }
-  }, [readOnly, value, getOptionLabelLocal, multiple]);
+  }, [readOnly, value, getOptionLabelLocal, multiple, inputValue]);
   useEffect(() => {
     if (open === false && value === null && inputValue !== "") {
       setInputValue("");
@@ -154,14 +153,10 @@ function useValuesAndHandlers(props) {
       }
     }
   };
-  const selectedOption = options.find((option) => {
-    return isOptionEqualToValueLocal(option, selectedValue);
-  });
   return {
     open,
     inputValue,
     selectedValue,
-    selectedOption,
     isOptionEqualToValueLocal,
     handleDelete,
     handleRefresh,
@@ -170,7 +165,6 @@ function useValuesAndHandlers(props) {
     onCloseLocal,
     onOpenLocal,
     getOptionLabelLocal,
-    getOptionUrlImageLocal,
     checkKeyDown,
     scrollPositionOptionsRef
   };

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

@@ -13,5 +13,6 @@ export declare enum AutocompleteSlots {
     image = "image",
     renderInputText = "renderInputText",
     containerMultipleValues = "containerMultipleValues",
-    containerWrapper = "containerWrapper"
+    containerWrapper = "containerWrapper",
+    wrapperStartAdornment = "wrapperStartAdornment"
 }

package/components/mui_extended/Autocomplete/slots/AutocompleteEnum.js

@@ -14,6 +14,7 @@ var AutocompleteSlots = /* @__PURE__ */ ((AutocompleteSlots2) => {
   AutocompleteSlots2["renderInputText"] = "renderInputText";
   AutocompleteSlots2["containerMultipleValues"] = "containerMultipleValues";
   AutocompleteSlots2["containerWrapper"] = "containerWrapper";
+  AutocompleteSlots2["wrapperStartAdornment"] = "wrapperStartAdornment";
   return AutocompleteSlots2;
 })(AutocompleteSlots || {});
 export {

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

@@ -1,7 +1,7 @@
 export declare const AutocompleteRootStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').AutocompleteProps<unknown, boolean | undefined, boolean | undefined, boolean | undefined, import('react').ElementType<any, keyof import("react").JSX.IntrinsicElements>>, keyof import('@mui/material').AutocompleteProps<unknown, boolean | undefined, boolean | undefined, boolean | undefined, import('react').ElementType<any, keyof import("react").JSX.IntrinsicElements>>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-export declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "instaceDataTestId" | "placement" | "rotationAngle" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeProps" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+export declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "instaceDataTestId" | "placement" | "rotationAngle" | "ariaLabel" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeProps" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
 export declare const ChipStyled: import('@emotion/styled').StyledComponent<Pick<import('../../..').ChipProps & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('../../..').ChipProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
@@ -39,6 +39,9 @@ export declare const RenderInputTextStyled: import('@emotion/styled').StyledComp
 export declare const AdormentsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const WrapperStartAdornmentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const ContainerMultipleValuesStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/mui_extended/Autocomplete/slots/AutocompleteSlots.js

@@ -64,6 +64,10 @@ const AdormentsStyled = styled("div", {
   name: AUTOCOMPLETE_KEY_COMPONENT,
   slot: AutocompleteSlots.adorments
 })(autocompleteSyles?.adorments);
+const WrapperStartAdornmentStyled = styled("div", {
+  name: AUTOCOMPLETE_KEY_COMPONENT,
+  slot: AutocompleteSlots.wrapperStartAdornment
+})(autocompleteSyles?.wrapperStartAdornment);
 const ContainerMultipleValuesStyled = styled("div", {
   name: AUTOCOMPLETE_KEY_COMPONENT,
   slot: AutocompleteSlots.containerMultipleValues
@@ -79,6 +83,7 @@ export {
   PopperComponentStyled as P,
   RenderInputStyled as R,
   SkeletonAutocompleteStyled as S,
+  WrapperStartAdornmentStyled as W,
   AdormentsStyled as a,
   ContainerMultipleValuesStyled as b,
   ContainerWrapperStyled as c,

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

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const LoadingText: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/components/mui_extended/Autocomplete/subcomponents/LoadingText/LoadingText.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { useModuleDictionary } from "@m4l/core";
+import { u as useComponentSize } from "../../../../../hooks/useComponentSize/useComponentSize.js";
+import { T as Typography } from "../../../Typography/Typography.js";
+const LoadingTextComponent = () => {
+  const { currentSize } = useComponentSize();
+  const { getLabel } = useModuleDictionary();
+  return /* @__PURE__ */ jsx(Typography, { variant: "body", size: currentSize, children: getLabel("autocomplete.loading_options") });
+};
+const LoadingText = React.memo(LoadingTextComponent);
+export {
+  LoadingText as L
+};

package/components/mui_extended/Autocomplete/subcomponents/LoadingText/index.d.ts

@@ -0,0 +1 @@
+export { LoadingText } from './LoadingText';

package/components/mui_extended/Autocomplete/subcomponents/LoadingText/index.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const NoOptionsText: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/components/mui_extended/Autocomplete/subcomponents/NoOptionsText/NoOptionsText.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { useModuleDictionary } from "@m4l/core";
+import { u as useComponentSize } from "../../../../../hooks/useComponentSize/useComponentSize.js";
+import { T as Typography } from "../../../Typography/Typography.js";
+const NoOptionsTextComponent = () => {
+  const { currentSize } = useComponentSize();
+  const { getLabel } = useModuleDictionary();
+  return /* @__PURE__ */ jsx(Typography, { variant: "body", size: currentSize, children: getLabel("autocomplete.no_options") });
+};
+const NoOptionsText = React.memo(NoOptionsTextComponent);
+export {
+  NoOptionsText as N
+};

package/components/mui_extended/Autocomplete/subcomponents/NoOptionsText/index.d.ts

@@ -0,0 +1 @@
+export { NoOptionsText } from './NoOptionsText';

package/components/mui_extended/Autocomplete/subcomponents/NoOptionsText/index.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { CustomPopperComponentProps } from './types';
+/**
+ * Componente PopperComponent que se utiliza para renderizar el popper del autocomplete.
+ * Compatible con React.JSXElementConstructor<PopperProps> de MUI.
+ */
+export declare const PopperComponent: ({ currentSize, ownerState, ...popperProps }: CustomPopperComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MemoizedPopperComponent: React.MemoExoticComponent<({ currentSize, ownerState, ...popperProps }: CustomPopperComponentProps) => import("react/jsx-runtime").JSX.Element>;

package/components/mui_extended/Autocomplete/subcomponents/PopperComponent/PopperComponent.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { P as PopperComponentStyled } from "../../slots/AutocompleteSlots.js";
+const PopperComponent = ({
+  currentSize = "medium",
+  ownerState,
+  ...popperProps
+}) => {
+  const { color: popperColor, ...otherPopperProps } = popperProps;
+  return /* @__PURE__ */ jsx(
+    PopperComponentStyled,
+    {
+      ...otherPopperProps,
+      size: currentSize,
+      placement: "bottom-start",
+      ownerState: ownerState ? { ...ownerState } : void 0
+    }
+  );
+};
+React.memo(PopperComponent);
+export {
+  PopperComponent as P
+};

package/components/mui_extended/Autocomplete/subcomponents/PopperComponent/index.d.ts

@@ -0,0 +1,2 @@
+export { PopperComponent } from './PopperComponent';
+export * from './types';

package/components/mui_extended/Autocomplete/subcomponents/PopperComponent/index.js

@@ -0,0 +1 @@
+

package/components/mui_extended/Autocomplete/subcomponents/PopperComponent/types.d.ts

@@ -0,0 +1,7 @@
+import { Sizes } from '@m4l/styles';
+import { AutocompleteOwnerState } from '../../types';
+import { PopperProps } from '@mui/material';
+export interface CustomPopperComponentProps extends PopperProps {
+    currentSize?: Extract<Sizes, 'small' | 'medium'>;
+    ownerState?: AutocompleteOwnerState;
+}

package/components/mui_extended/Autocomplete/subcomponents/PopperComponent/types.js

@@ -0,0 +1 @@
+

package/components/mui_extended/Autocomplete/subcomponents/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/subcomponents/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/subcomponents/renderOptions/index.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+import { ResourceType } from '../../types';
+import { RenderOptionType } from './types';
+/**
+ * Render option for Autocomplete.
+ */
+export declare const renderOption: <T>(optionProps: HTMLAttributes<HTMLLIElement> & {
+    key: string;
+}, option: RenderOptionType<T>, getOptionStartAdornment?: (option: T) => ResourceType | undefined, getOptionEndAdornment?: (option: T) => ResourceType | undefined) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/Autocomplete/subcomponents/renderOptions/index.js

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { r as renderAdornment } from "../RenderAdornment/RenderAdornment.js";
+import { M as MenuItem } from "../../../MenuItem/MenuItem.js";
+const MemoizedMenuItem = memo(MenuItem);
+const RenderOptionComponent = ({
+  optionProps,
+  option,
+  getOptionStartAdornment,
+  getOptionEndAdornment
+}) => {
+  const { className, key, ...otherOptionProps } = optionProps;
+  const processedStartAdornment = useMemo(() => {
+    if (!getOptionStartAdornment) {
+      return null;
+    }
+    const startAdornment = getOptionStartAdornment(option);
+    if (!startAdornment) {
+      return null;
+    }
+    return renderAdornment(startAdornment, option.size);
+  }, [getOptionStartAdornment, option]);
+  const processedEndAdornment = useMemo(() => {
+    if (!getOptionEndAdornment) {
+      return null;
+    }
+    const endAdornment = getOptionEndAdornment(option);
+    if (!endAdornment) {
+      return null;
+    }
+    return renderAdornment(endAdornment, option.size);
+  }, [getOptionEndAdornment, option]);
+  return /* @__PURE__ */ jsx(
+    MemoizedMenuItem,
+    {
+      ...otherOptionProps,
+      selected: option.selected,
+      color: "default",
+      label: option.label,
+      disabled: option.disabled,
+      startIcon: processedStartAdornment,
+      endIcon: processedEndAdornment
+    },
+    option.label
+  );
+};
+const MemoizedRenderOptionComponent = memo(RenderOptionComponent);
+const renderOption = (optionProps, option, getOptionStartAdornment, getOptionEndAdornment) => {
+  return /* @__PURE__ */ jsx(
+    MemoizedRenderOptionComponent,
+    {
+      optionProps,
+      option,
+      getOptionStartAdornment,
+      getOptionEndAdornment
+    }
+  );
+};
+export {
+  renderOption as r
+};

package/components/mui_extended/Autocomplete/subcomponents/renderOptions/types.d.ts

@@ -0,0 +1,7 @@
+import { Sizes } from '@m4l/styles';
+export type RenderOptionType<T> = {
+    label: string;
+    selected?: boolean;
+    disabled?: boolean;
+    size: Extract<Sizes, 'small' | 'medium'>;
+} & T;

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

@@ -1,6 +1,6 @@
 import { AutocompleteChangeReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteProps as MUIAutocompleteProps, Theme } from '@mui/material';
 import { Sizes } from '@m4l/styles';
-import { ChangeEvent } from 'react';
+import { ChangeEvent, ReactElement, ReactNode } from 'react';
 import { TextFieldProps } from '../TextField/types';
 import { AUTOCOMPLETE_KEY_COMPONENT } from './constants';
 import { AutocompleteSlots } from './slots';
@@ -21,6 +21,7 @@ export interface BaseAutocompleteProps {
      */
     dataTestid?: string;
 }
+export type AdornmentType = ReactElement | string;
 /**
  * Props for the unified Autocomplete component.
  * Supports both single and multiple selection, and two types: `text` and `image`.
@@ -47,9 +48,18 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined> exte
      */
     value: T | T[] | null | undefined;
     /**
+     *
      * Function to get the label for a given option.
      */
     getOptionLabel: (option: T | AutocompleteFreeSoloValueMapping<false>) => string;
+    /**
+     * Function to get the start adornment for a given option.
+     */
+    getOptionStartAdornment?: (option: T) => ResourceType;
+    /**
+     * Function to get the end adornment for a given option.
+     */
+    getOptionEndAdornment?: (option: T) => ResourceType;
     /**
      * Function to compare if an option matches the selected value.
      */
@@ -64,6 +74,7 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined> exte
     onChangeFilterParmsLocal?: (newValue: string, reason: AutocompleteInputChangeReason) => void;
     /**
      * Function to get the image URL for a given option (only for `type: 'image'`).
+     * @deprecated Use getOptionStartAdornment or getOptionEndAdornment instead.
      */
     getOptionUrlImage?: (option: T) => string;
     /**
@@ -75,7 +86,15 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined> exte
      * "htmlFor" attribute for the autocomplete field.
      */
     htmlFor?: string;
+    /**
+     * Icono o adorno que se muestra al inicio del autocomplete.
+     */
+    startAdornment?: ReactElement;
 }
+export type ResourceType = {
+    resource: ReactNode;
+    type?: 'icon' | 'image';
+};
 /**
  * Represents the owner state of the Autocomplete component for styling purposes.
  */
@@ -84,6 +103,7 @@ export interface AutocompleteOwnerState extends Pick<BaseAutocompleteProps, 'siz
     disabled?: boolean;
     multiple?: boolean;
     readOnly?: boolean;
+    startAdornment?: boolean;
 }
 /**
  * Defines the types of Slots available for the Autocomplete.

package/components/mui_extended/Button/Button.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
 import { useTheme } from "@mui/material";
-import clsx from "clsx";
 import { forwardRef } from "react";
+import { B as BUTTON_CLASSES } from "./constants.js";
+import clsx from "clsx";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 import { S as SkeletonButtonStyled, B as ButtonRootStyled, T as TextButtonStyled, a as ButtonIconStyled } from "./slots/ButtonSlots.js";
 const Button = forwardRef((props, ref) => {
@@ -58,7 +59,8 @@ const Button = forwardRef((props, ref) => {
           alt: "icon",
           size: currentSize,
           disabled,
-          instaceDataTestId
+          instaceDataTestId,
+          className: BUTTON_CLASSES.buttonIcon
         }
       );
     }
@@ -70,7 +72,7 @@ const Button = forwardRef((props, ref) => {
       role: "button",
       startIcon: renderIcon(startIcon, "ButtonStartIcon"),
       endIcon: renderIcon(endIcon, "ButtonEndIcon"),
-      className: clsx(className),
+      className: clsx(className, BUTTON_CLASSES.buttonRoot),
       variant,
       size,
       disabled,
@@ -80,7 +82,16 @@ const Button = forwardRef((props, ref) => {
       ref,
       ...others,
       children: [
-        /* @__PURE__ */ jsx(TextButtonStyled, { ownerState: { ...ownerState }, color: adjustedColor, size: currentSize, children: label }),
+        /* @__PURE__ */ jsx(
+          TextButtonStyled,
+          {
+            ownerState: { ...ownerState },
+            color: adjustedColor,
+            size: currentSize,
+            className: BUTTON_CLASSES.textButton,
+            children: label
+          }
+        ),
         props.children
       ]
     }