@m4l/components 9.3.16-JT19092025.beta.1 → 9.3.17

package/components/Stepper/Stepper.styles.js

@@ -24,13 +24,8 @@ const stepperStyles = {
     flexDirection: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "column" : "row",
     gap: theme.vars.size.baseSpacings.sp8
   }),
-  /**
-   * Estilos para el contenido del paso dentro del Stepper.
-   */
   stepContent: ({ ownerState }) => ({
-    height: "100%",
-    display: ownerState?.isStepVisible ? "flex" : "none",
-    flexDirection: "column"
+    display: ownerState?.isStepVisible ? "block" : "none"
   }),
   /**
    * Estilos para la sección que contiene los botones de acción del Stepper.

package/components/Stepper/hooks/useStepperActions/index.js

@@ -2,10 +2,8 @@ import { useCallback } from "react";
 import { u as useStepper } from "../useStepper/index.js";
 import { useFormContext } from "react-hook-form";
 import { shallow } from "zustand/shallow";
-import { u as useDynamicValidation } from "../useDynamicValidation/index.js";
 function useStepperActions() {
   const { trigger, clearErrors, getValues, reset } = useFormContext();
-  const { activateFieldsValidation, clearAllValidation } = useDynamicValidation();
   const {
     nextStep,
     prevStep,
@@ -43,22 +41,9 @@ function useStepperActions() {
       if (fieldsToValidate.length === 0) {
         return true;
       }
-      const result = await trigger(fieldsToValidate);
-      if (!result) {
-        activateFieldsValidation(fieldsToValidate);
-      }
-      return result;
+      return await trigger(fieldsToValidate);
     };
     const success = await nextStep(validateFn, formData);
-    if (success) {
-      const currentStepData = steps[currentStep - 1];
-      const fieldsJustValidated = currentStepData?.validationFields || [];
-      if (fieldsJustValidated.length > 0) {
-        setTimeout(() => {
-          clearAllValidation();
-        }, 100);
-      }
-    }
     if (success && futureFields.length > 0) {
       clearErrors(futureFields);
       setTimeout(() => {
@@ -77,16 +62,13 @@ function useStepperActions() {
     steps,
     currentStep,
     trigger,
-    getValues,
-    activateFieldsValidation,
-    clearAllValidation
+    getValues
   ]);
   const cancelAction = useCallback(() => {
     reset();
     clearErrors();
-    clearAllValidation();
     resetStepper();
-  }, [reset, clearErrors, clearAllValidation, resetStepper]);
+  }, [reset, clearErrors, resetStepper]);
   return { prevStepAction, nextStepAction, cancelAction };
 }
 export {

package/components/Stepper/subcomponents/StepArea/index.js

@@ -5,12 +5,10 @@ import { u as useStepper } from "../../hooks/useStepper/index.js";
 import { e as StepAreaStyled, f as StepStyled, g as StepNameStyled } from "../../slots/StepperSlot.js";
 import { I as Indicator } from "./subcomponents/Inidicator/index.js";
 import { shallow } from "zustand/shallow";
-import { u as useDynamicValidation } from "../../hooks/useDynamicValidation/index.js";
 import { e as evaluateVisibilityStepCondition } from "../../helpers/evaluateVisibilityStepCondition/index.js";
 function StepArea() {
   const { trigger, clearErrors } = useFormContext();
   const formValues = useWatch();
-  const { activateFieldsValidation } = useDynamicValidation();
   const {
     currentStep,
     steps,
@@ -66,7 +64,6 @@ function StepArea() {
         if (!isValid) {
           setCurrentStep(stepOriginalIndex);
           setStepValidationStatus(stepOriginalIndex, false);
-          activateFieldsValidation(step.validationFields || []);
           return;
         }
         setStepValidationStatus(stepOriginalIndex, true);
@@ -79,7 +76,6 @@ function StepArea() {
       const isCurrentValid = await trigger(currentStepData.validationFields);
       if (!isCurrentValid) {
         setStepValidationStatus(currentStepOriginalIndex, false);
-        activateFieldsValidation(currentStepData.validationFields || []);
         return;
       }
       setStepValidationStatus(currentStepOriginalIndex, true);

package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.d.ts

@@ -1,5 +1,4 @@
-import { StepperButtonProps } from '../../../types';
 /**
  * Botón modular para cancelar el proceso del Stepper
  */
-export declare function StepperCancelButton(props: StepperButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepperCancelButton(): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.js

@@ -1,55 +1,22 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback } from "react";
-import { useFormContext, useFormState } from "react-hook-form";
 import { u as useStepperActions } from "../../../hooks/useStepperActions/index.js";
-import { D as DICTIONARY$1 } from "../../../dictionary.js";
-import { D as DICTIONARY } from "../../../../CommonActions/dictionary.js";
+import { D as DICTIONARY } from "../../../dictionary.js";
 import { useModuleDictionary } from "@m4l/core";
-import { u as useModal } from "../../../../../hooks/useModal/index.js";
-import { u as useWindowToolsMF } from "../../../../WindowBase/hooks/useWindowToolsMF/index.js";
-import { W as WindowConfirm } from "../../../../WindowConfirm/WindowConfirm.js";
 import { B as Button } from "../../../../mui_extended/Button/Button.js";
-function StepperCancelButton(props) {
-  const { label, ...rest } = props;
+function StepperCancelButton() {
   const { getLabel } = useModuleDictionary();
   const { cancelAction } = useStepperActions();
-  const { openModal } = useModal();
-  const { close: closeWindow } = useWindowToolsMF();
-  const { control } = useFormContext();
-  const { isDirty } = useFormState({
-    control
-  });
-  const onConfirmQuit = useCallback(() => {
+  const handleCancel = () => {
     cancelAction();
-    closeWindow();
-  }, [cancelAction, closeWindow]);
-  const handleCancel = useCallback(() => {
-    if (isDirty) {
-      openModal({
-        window: /* @__PURE__ */ jsx(
-          WindowConfirm,
-          {
-            variant: "warning",
-            title: getLabel(DICTIONARY.CONFIRM_QUIT_TITLE),
-            msg: getLabel(DICTIONARY.CONFIRM_QUIT_MSG),
-            onClickIntro: onConfirmQuit
-          }
-        ),
-        variant: "warning"
-      });
-    } else {
-      onConfirmQuit();
-    }
-  }, [getLabel, isDirty, openModal, onConfirmQuit]);
+  };
   return /* @__PURE__ */ jsx(
     Button,
     {
       type: "button",
-      label: label || getLabel(DICTIONARY$1.LABEL_CANCEL_BUTTON),
+      label: getLabel(DICTIONARY.LABEL_CANCEL_BUTTON),
       variant: "outlined",
       color: "default",
-      onClick: handleCancel,
-      ...rest
+      onClick: handleCancel
     }
   );
 }

package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.d.ts

@@ -1,5 +1,4 @@
-import { StepperButtonProps } from '../../../types';
 /**
  * Botón modular para avanzar al siguiente step del Stepper
  */
-export declare function StepperNextButton(props: StepperButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepperNextButton(): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.js

@@ -6,8 +6,7 @@ import { D as DICTIONARY } from "../../../dictionary.js";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
 import { B as Button } from "../../../../mui_extended/Button/Button.js";
-function StepperNextButton(props) {
-  const { label, ...rest } = props;
+function StepperNextButton() {
   const { nextStepAction } = useStepperActions();
   const isMobile = useIsMobile();
   const { getLabel } = useModuleDictionary();
@@ -29,13 +28,12 @@ function StepperNextButton(props) {
     Button,
     {
       type: "button",
-      label: label || getLabel(DICTIONARY.LABEL_NEXT_BUTTON),
+      label: getLabel(DICTIONARY.LABEL_NEXT_BUTTON),
       variant: "contained",
       color: "primary",
       onClick: handleNext,
       endIcon: `${host_static_assets}/${environment_assets}/${pathIcons.arrowRight}`,
-      "data-testid": "stepper-next-button",
-      ...rest
+      "data-testid": "stepper-next-button"
     }
   );
 }

package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.d.ts

@@ -1,5 +1,4 @@
-import { StepperButtonProps } from '../../../types';
 /**
  * Botón modular para ir al step anterior del Stepper
  */
-export declare function StepperPrevButton(props: StepperButtonProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function StepperPrevButton(): import("react/jsx-runtime").JSX.Element | null;

package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.js

@@ -7,8 +7,7 @@ import { useIsMobile } from "@m4l/graphics";
 import { D as DICTIONARY } from "../../../dictionary.js";
 import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
 import { B as Button } from "../../../../mui_extended/Button/Button.js";
-function StepperPrevButton(props) {
-  const { label, ...rest } = props;
+function StepperPrevButton() {
   const { currentStep } = useStepper((state) => ({
     currentStep: state.currentStep
   }));
@@ -36,13 +35,12 @@ function StepperPrevButton(props) {
     Button,
     {
       type: "button",
-      label: label || getLabel(DICTIONARY.LABEL_PREV_BUTTON),
+      label: !isMobile ? getLabel(DICTIONARY.LABEL_PREV_BUTTON) : "",
       variant: "outlined",
       color: "default",
       onClick: handlePrev,
       startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.arrowLeft}`,
-      "data-testid": "stepper-prev-button",
-      ...rest
+      "data-testid": "stepper-prev-button"
     }
   );
 }

package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.d.ts

@@ -1,5 +1,4 @@
-import { StepperButtonProps } from '../../../types';
 /**
  * Botón modular para finalizar el Stepper y ejecutar onFinalSubmit
  */
-export declare function StepperSubmitButton(props: StepperButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepperSubmitButton(): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.js

@@ -2,18 +2,16 @@ import { jsx } from "react/jsx-runtime";
 import { D as DICTIONARY } from "../../../dictionary.js";
 import { useModuleDictionary } from "@m4l/core";
 import { B as Button } from "../../../../mui_extended/Button/Button.js";
-function StepperSubmitButton(props) {
-  const { label, ...rest } = props;
+function StepperSubmitButton() {
   const { getLabel } = useModuleDictionary();
   return /* @__PURE__ */ jsx(
     Button,
     {
       type: "submit",
-      label: label || getLabel(DICTIONARY.LABEL_SUBMIT_BUTTON),
+      label: getLabel(DICTIONARY.LABEL_SUBMIT_BUTTON),
       variant: "contained",
       color: "primary",
-      "data-testid": "stepper-submit-button",
-      ...rest
+      "data-testid": "stepper-submit-button"
     }
   );
 }

package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.js

@@ -2,26 +2,18 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useMemo } from "react";
 import { u as useIsLastVisibleValidStep } from "../../../../hooks/useIsLastVisibleValidStep/index.js";
 import { m as StepperFooterRightActionsStyled } from "../../../../slots/StepperSlot.js";
-import { S as StepperSubmitButton } from "../../../StepperButtons/StepperSubmitButton/index.js";
 import { S as StepperNextButton } from "../../../StepperButtons/StepperNextButton/index.js";
+import { S as StepperSubmitButton } from "../../../StepperButtons/StepperSubmitButton/index.js";
 function StepperFooterRightActions(props) {
   const { children } = props;
   const isLastVisibleValidStep = useIsLastVisibleValidStep();
-  const hasCustomSubmitButton = useMemo(() => {
-    return React.Children.toArray(children).some((child) => {
-      if (React.isValidElement(child)) {
-        return child.type === StepperSubmitButton;
-      }
-      return false;
-    });
-  }, [children]);
-  const filteredChildren = useMemo(() => {
+  const childrenWithoutNextButton = useMemo(() => {
+    if (!isLastVisibleValidStep) {
+      return children;
+    }
     return React.Children.toArray(children).filter((child) => {
       if (React.isValidElement(child)) {
-        if (!isLastVisibleValidStep && child.type === StepperSubmitButton) {
-          return false;
-        }
-        if (isLastVisibleValidStep && child.type === StepperNextButton) {
+        if (child.type === StepperNextButton) {
           return false;
         }
       }
@@ -29,10 +21,10 @@ function StepperFooterRightActions(props) {
     });
   }, [children, isLastVisibleValidStep]);
   const submitButton = useMemo(() => {
-    return isLastVisibleValidStep && !hasCustomSubmitButton ? /* @__PURE__ */ jsx(StepperSubmitButton, {}) : null;
-  }, [isLastVisibleValidStep, hasCustomSubmitButton]);
+    return isLastVisibleValidStep ? /* @__PURE__ */ jsx(StepperSubmitButton, {}) : null;
+  }, [isLastVisibleValidStep]);
   return /* @__PURE__ */ jsxs(StepperFooterRightActionsStyled, { children: [
-    filteredChildren,
+    childrenWithoutNextButton,
     submitButton
   ] });
 }

package/components/Stepper/types.d.ts

@@ -5,7 +5,6 @@ import { ContentAreaSlots, ContentSlots, StepperFooterSlots, StepperSlots } from
 import { STEPPER_PREFIX_NAME } from './constants';
 import { M4LOverridesStyleRules } from '../../@types/augmentations';
 import { Step as StepComponent } from './subcomponents/StepperContent/subcomponents/Step';
-import { ButtonProps } from '../mui_extended/Button';
 export type Orientation = 'horizontal' | 'vertical';
 export type IndicatorType = 'number' | 'dot';
 export type FormData = Record<string, string | number | boolean | null | undefined>;
@@ -146,12 +145,6 @@ export interface StepperFooterProps {
 export interface StepperFooterLeftActionsProps {
     children?: ReactNode;
 }
-/**
- * Props para los botones del Stepper que extienden las props de Button de mui_extended
- */
-export interface StepperButtonProps extends Omit<ButtonProps, 'label'> {
-    label?: string;
-}
 /**
  * Props del StepperFooterRightActions
  */

package/components/areas/icons.js

@@ -1,6 +1,6 @@
 const ICONS = {
   MAXIMIZE: "window_expand.svg",
-  NORMALIZE: "window_normalize.svg",
+  NORMALIZE: "window_minimize.svg",
   COLLAPSE: "window_collapse.svg",
   UNCOLLPASE: "window_uncollapse.svg",
   RESET_COOKIES: "reset_cookies.svg",

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

@@ -1,7 +1,4 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { getPropertyByString } from "@m4l/core";
-import { useIsMobile } from "@m4l/graphics";
-import { useTheme } from "@mui/material";
 import { useId, useState, useCallback, useEffect } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import { A as AutocompleteRootStyled, L as LabelStyled } from "./slots/RHFAutocompleteSlots.js";
@@ -13,28 +10,22 @@ function RHFAutocomplete(props) {
     getOptionLabel,
     isOptionEqualToValue,
     label,
-    color,
     options,
     disabled,
     onOpen,
     onClose,
     loading,
-    variant,
     helperMessage,
     size,
     onChangeFilterParmsLocal,
     mandatory,
     mandatoryMessage,
     multiple,
-    imageScale = true,
-    imageRepeat,
     refresh
     // onChange: onChangeRHF,
   } = props;
   const htmlForId = useId();
-  const theme = useTheme();
   const [open, setOpen] = useState(false);
-  const isDesktop = !useIsMobile();
   const onCloseLocal = useCallback((event, reason) => {
     setOpen(false);
     if (onClose) {
@@ -59,34 +50,11 @@ function RHFAutocomplete(props) {
     },
     [getOptionLabel]
   );
-  const paletteColor = getPropertyByString(
-    theme.vars.palette,
-    disabled ? "default" : color || "default",
-    theme.vars.palette.default
-  );
   const {
-    control,
-    formState: { errors }
+    control
   } = useFormContext();
-  const [currentVariant, setCurrentVariant] = useState(null);
-  useEffect(() => {
-    const hasError = errors[nameRHF];
-    if (hasError) {
-      setCurrentVariant("error");
-    } else if (variant) {
-      setCurrentVariant(variant);
-    } else {
-      setCurrentVariant(null);
-    }
-  }, [errors, nameRHF, variant, control]);
   const ownerState = {
-    size: !isDesktop ? "medium" : size,
-    semantics: currentVariant,
-    disabled,
-    multiple: Boolean(multiple),
-    imageScale: Boolean(imageScale),
-    imageRepeat: Boolean(imageRepeat),
-    paletteColor
+    disabled
   };
   return /* @__PURE__ */ jsx(
     AutocompleteRootStyled,
@@ -147,7 +115,7 @@ function RHFAutocomplete(props) {
                   htmlFor: htmlForId
                 }
               ),
-              currentVariant === "error" ? /* @__PURE__ */ jsx(HelperError, { message: error?.message }) : null
+              error?.message ? /* @__PURE__ */ jsx(HelperError, { message: error?.message }) : null
             ] });
           }
         }

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

@@ -1,4 +1,4 @@
-import { AutocompleteCloseReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteProps as MUIAutocompleteProps, Theme, PaletteColor, PopperProps } from '@mui/material';
+import { AutocompleteCloseReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteProps as MUIAutocompleteProps, Theme, PopperProps } from '@mui/material';
 import { ComponentPalletColor, Sizes } from '@m4l/styles';
 import { TextFieldProps } from '../../mui_extended/TextField/types';
 import { RFHAUTOCOMPLETE_KEY_COMPONENT } from './constants';
@@ -52,11 +52,6 @@ export interface RHFAutocompleteProps<T = any, Multiple extends boolean | undefi
  */
 export interface RHFAutocompleteOwnerState extends Pick<RHFAutocompleteProps<any>, 'size' | 'disabled' | 'variant'> {
     disabled?: boolean;
-    semantics: RHFAutocompleteVariants | 'error' | null;
-    multiple: boolean;
-    imageScale?: boolean;
-    imageRepeat?: boolean;
-    paletteColor: PaletteColor;
 }
 /**
  * Defines the types of Slots available for the Autocomplete.

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

@@ -3,7 +3,7 @@ import { CustomFormArguments, FormProviderCustomProps, FormProviderProps } from
 /**
  * TODO: Documentar
  */
-export declare function useCustomForm({ validationSchema, values, statusLoad, mode, }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
+export declare function useCustomForm({ validationSchema, values, statusLoad, mode }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
 /**
  * TODO: Documentar
  */

package/components/hook-form/RHFormContext/index.js

@@ -6,12 +6,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { F as FormProviderRoot } from "./styles.js";
 import { R as RHFormProviderUtilityClasses } from "./classes/index.js";
 const classes = RHFormProviderUtilityClasses();
-function useCustomForm({
-  validationSchema,
-  values,
-  statusLoad,
-  mode
-}) {
+function useCustomForm({ validationSchema, values, statusLoad, mode }) {
   const formMethods = useForm({
     resolver: yupResolver(validationSchema),
     defaultValues: values,
@@ -44,31 +39,11 @@ function useCustomForm({
 }
 function FormProviderCustom(props) {
   const { children, onSubmit, className, handleSubmit } = props;
-  return /* @__PURE__ */ jsx(FormProvider, { ...props, children: /* @__PURE__ */ jsx(
-    FormProviderRoot,
-    {
-      className: clsx(classes.root, className),
-      onSubmit: handleSubmit(onSubmit),
-      children
-    }
-  ) });
+  return /* @__PURE__ */ jsx(FormProvider, { ...props, children: /* @__PURE__ */ jsx(FormProviderRoot, { className: clsx(classes.root, className), onSubmit: handleSubmit(onSubmit), children }) });
 }
 function RHFormProvider(props) {
-  const {
-    children,
-    onSubmit,
-    values,
-    validationSchema,
-    statusLoad = "ready",
-    className,
-    mode
-  } = props;
-  const formMethods = useCustomForm({
-    validationSchema,
-    statusLoad,
-    values,
-    mode
-  });
+  const { children, onSubmit, values, validationSchema, statusLoad = "ready", className, mode } = props;
+  const formMethods = useCustomForm({ validationSchema, statusLoad, values, mode });
   return /* @__PURE__ */ jsx(
     FormProviderCustom,
     {

package/components/index.d.ts

@@ -6,6 +6,7 @@ export * from './areas';
 export * from './BaseModule';
 export * from './Card';
 export * from './Chip';
+export * from './Card';
 export * from './commercial';
 export * from './CommonActions/';
 export * from './ContainerFlow';

package/components/mui_extended/Autocomplete/Autocomplete.js

@@ -21,7 +21,9 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     // Diferencia
     refresh,
     error = false,
-    htmlFor
+    htmlFor,
+    readOnly = false,
+    placeholder
   } = props;
   const { getLabel } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
@@ -47,8 +49,9 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     variant,
     disabled,
     multiple: Boolean(multiple),
-    error
-  }), [adjustedSize, disabled, error, multiple, variant]);
+    error,
+    readOnly
+  }), [adjustedSize, disabled, error, multiple, variant, readOnly]);
   const startAdornments = useStartAdornments({
     selectedValue,
     multiple,
@@ -66,7 +69,8 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     handleRefresh,
     disabled,
     onOpenLocal,
-    open
+    open,
+    readOnly
   });
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(
@@ -158,12 +162,14 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
             InputProps: {
               ...otherInputProps,
               startAdornment: startAdornments,
-              endAdornment: endAdornments
+              endAdornment: endAdornments,
+              readOnly
             },
             SelectProps: { native: true },
             size: adjustedSize,
             fullWidth: true,
-            disabled
+            disabled,
+            placeholder
           }
         );
       }

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

@@ -10,7 +10,20 @@ const autocompleteSyles = {
   /**
    * Styles for the icon button component.
    */
-  iconButton: {},
+  iconButton: ({ ownerState }) => ({
+    ...ownerState?.readOnly && {
+      "&:hover": {
+        backgroundColor: "unset!important"
+      },
+      "&:active": {
+        backgroundColor: "unset!important"
+      },
+      "&:focus-visible": {
+        backgroundColor: "unset!important",
+        outline: "none!important"
+      }
+    }
+  }),
   /**
    * Styles for the input component.
    */
@@ -79,10 +92,22 @@ const autocompleteSyles = {
   /**
    * Styles for the popper component.
    */
-  popper: ({ theme }) => ({
-    ...theme.typography.body1,
+  popper: () => ({
+    width: "fit-content!important",
+    maxWidth: "calc(100vw - 20px)",
     "& .MuiPaper-root": {
-      width: "100%"
+      minWidth: "100%",
+      maxHeight: "200px",
+      "& .MuiAutocomplete-listbox": {
+        height: "100%",
+        "& .M4LMenuItem-root ": {
+          width: "fit-content",
+          "& .M4LTypography-root": {
+            width: "fit-content",
+            overflow: "unset"
+          }
+        }
+      }
     }
   }),
   /**
@@ -106,7 +131,25 @@ const autocompleteSyles = {
       )
     };
   },
-  renderInputText: {}
+  renderInputText: {},
+  /**
+   * Styles for the container multiple values component.
+   */
+  containerMultipleValues: () => ({
+    display: "flex",
+    overflow: "auto",
+    width: "100%",
+    flex: 1,
+    maxHeight: "80px"
+  }),
+  /**
+   * Styles for the container wrapper component.
+   */
+  containerWrapper: ({ theme }) => ({
+    display: "flex",
+    flexWrap: "wrap",
+    gap: theme.vars.size.baseSpacings.sp1
+  })
 };
 export {
   autocompleteSyles as a

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

@@ -8,6 +8,7 @@ export type UseAdornmentsProps = {
     disabled?: boolean;
     onOpenLocal: (event: React.MouseEvent<HTMLButtonElement>) => void;
     open: boolean;
+    readOnly?: boolean;
 };
 /**
  * Hook para el componente Autocomplete local