@m4l/components 9.1.54 → 9.1.56

package/components/mui_extended/Autocomplete/Autocomplete.js

@@ -3,6 +3,7 @@ import { useModuleDictionary, useModuleSkeleton, useEnvironment, getPropertyBySt
 import { useTheme } from "@mui/material";
 import { forwardRef, useState, useMemo, useEffect, useCallback } from "react";
 import { w as withRenderOption } from "./renderOptions/index.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 import { A as AutocompleteStyled, P as PopperComponentStyled, R as RenderInputStyled, C as ChipStyled, I as ImageStyled, a as CircularProgressStyled, b as IconButtonStyled } from "./slots /AutocompleteSlots.js";
 import { T as Typography } from "../Typography/Typography.js";
 const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
@@ -40,6 +41,8 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
   const theme = useTheme();
   const { host_static_assets, environment_assets } = useEnvironment();
   const [open, setOpen] = useState(false);
+  const { currentSize } = useComponentSize(size);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   useMemo(
     () => getOptionUrlImage !== void 0,
     [getOptionUrlImage]
@@ -133,7 +136,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     theme.vars.palette.default
   );
   const ownerState = {
-    size,
+    size: adjustedSize,
     variant,
     disabled,
     paletteColor,
@@ -173,7 +176,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
       disableClearable: true,
       multiple,
       onKeyDown: checkKeyDown,
-      size,
+      size: adjustedSize,
       ref,
       autoSelect: false,
       options,
@@ -185,6 +188,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
           PopperComponentStyled,
           {
             ...otherPopperProps,
+            size: adjustedSize,
             placement: "bottom-start",
             ownerState: { ...ownerState }
           }
@@ -200,9 +204,9 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
       onChange: handleChange,
       filterOptions: onChangeFilterParmsLocal ? (x) => x : void 0,
       loading,
-      loadingText: /* @__PURE__ */ jsx(Typography, { variant: "body", children: getLabel("autocomplete.loading_options") }),
+      loadingText: /* @__PURE__ */ jsx(Typography, { variant: "body", size: adjustedSize, children: getLabel("autocomplete.loading_options") }),
       disabled,
-      noOptionsText: getLabel("autocomplete.no_options"),
+      noOptionsText: /* @__PURE__ */ jsx(Typography, { variant: "body", size: adjustedSize, children: getLabel("autocomplete.no_options") }),
       renderOption: (renderProps, option) => {
         const isSelected = multiple ? Array.isArray(selectedValue) && selectedValue.some((val) => isOptionEqualToValueLocal(option, val)) : isOptionEqualToValueLocal(option, selectedValue);
         return withRenderOption(color)(renderProps, {
@@ -224,7 +228,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
             ...params,
             color,
             error,
-            size,
+            size: adjustedSize,
             variant,
             InputLabelProps: {
               ...params.InputLabelProps,
@@ -240,7 +244,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
               startAdornment: multiple ? Array.isArray(selectedValue) ? selectedValue.map((option, index) => /* @__PURE__ */ jsx(
                 ChipStyled,
                 {
-                  size,
+                  size: adjustedSize,
                   label: getOptionLabelLocal(option),
                   opacity: true,
                   onDeleted: () => handleDelete(option),
@@ -260,7 +264,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
                 {
                   ownerState: { ...ownerState },
                   color,
-                  size
+                  size: adjustedSize
                 }
               ) : /* @__PURE__ */ jsx("div", { children: refresh ? /* @__PURE__ */ jsx(
                 IconButtonStyled,
@@ -269,7 +273,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
                   src: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/round_refresh.svg`,
                   onClick: handleRefresh,
                   disabled,
-                  size
+                  size: adjustedSize
                 }
               ) : /* @__PURE__ */ jsx(
                 IconButtonStyled,
@@ -278,7 +282,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
                   src: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/chevronDown.svg`,
                   onClick: (event) => onOpenLocal(event),
                   disabled,
-                  size
+                  size: adjustedSize
                 }
               ) })
             },

package/components/mui_extended/Autocomplete/AutocompleteStyles.js

@@ -6,16 +6,11 @@ const autocompleteSyles = {
    * @updatedAt 2024-12-10 15:24:11 - automatic
    * @updatedUser SebastianM - automatic
    */
-  iconButton: ({ theme, ownerState }) => ({
+  iconButton: () => ({
     position: "absolute",
     top: "50%",
-    right: theme.vars.size.baseSpacings["sp0-5"],
-    transform: "translateY(-50%)",
-    ...ownerState.disabled && {
-      "& .M4LIconClass-root": {
-        backgroundColor: theme.vars.palette.text.disabled
-      }
-    }
+    right: 0,
+    transform: "translateY(-50%)"
   }),
   /**
    * Styles for the autocomplete component.
@@ -26,58 +21,19 @@ const autocompleteSyles = {
    * @updatedAt 2024-12-10 15:24:11 - automatic
    * @updatedUser SebastianM - automatic
    */
-  autocomplete: ({ theme, ownerState }) => ({
-    "& .MuiFormControl-root": {
-      height: "auto",
-      paddingLeft: theme.vars.size.baseSpacings.sp1,
-      paddingRight: theme.vars.size.baseSpacings.sp1,
-      "& .MuiInputBase-root": {
-        paddingLeft: theme.vars.size.baseSpacings.sp1,
-        paddingRight: theme.vars.size.baseSpacings.sp0,
-        gap: theme.vars.size.baseSpacings.sp1,
-        ":focus-within": {
-          '&:focus-within .MuiIconButton-root:not([role="button-chip"] .MuiIconButton-root)': {
-            "& .M4LIconClass-root": {
-              transform: "rotate(180deg)",
-              transition: "transform 0.3s ease"
-            }
-          }
-        }
-      }
-    },
-    ...ownerState.disabled && {
-      "& .MuiInputBase-root": {
-        borderColor: theme.vars.palette.text.disabled
-      }
-    }
-  }),
+  autocomplete: {},
   /**
    * Styles for the typography component.
    */
-  typography: ({ theme, ownerState }) => ({
-    // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.small.action,
-        minHeight: theme.vars.size.mobile.small.action
-      } : {
-        height: theme.vars.size.desktop.small.action,
-        minHeight: theme.vars.size.desktop.small.action
-      }
-    },
-    // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.medium.action,
-        minHeight: theme.vars.size.mobile.medium.action
-      } : {
-        height: theme.vars.size.desktop.medium.action,
-        minHeight: theme.vars.size.desktop.medium.action
-      }
-    }
+  typography: {},
+  menuList: {},
+  /**
+   * Styles for the menu item component.
+   */
+  menuItem: ({ theme }) => ({
+    padding: `${theme.vars.size.baseSpacings.sp1}!important`,
+    borderRadius: `${theme.vars.size.borderRadius.r0}!important`
   }),
-  menuList: () => ({}),
-  menuItem: () => ({}),
   /**
    * Styles for the image component.
    * @author SebastianM - automatic
@@ -108,9 +64,13 @@ const autocompleteSyles = {
    * @updatedAt 2024-12-10 15:24:11 - automatic
    * @updatedUser SebastianM - automatic
    */
-  textField: () => ({
+  textField: ({ theme }) => ({
     position: "relative",
-    height: "auto"
+    height: "auto",
+    "& .MuiInputBase-root": {
+      padding: theme.vars.size.baseSpacings.sp1,
+      gap: theme.vars.size.baseSpacings.sp1
+    }
   }),
   /**
    * Styles for the popper component.

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

@@ -1,3 +1 @@
-import { Dictionary } from '@m4l/core';
 export declare function getAutocompleteComponentsDictionary(): string[];
-export declare const defaultAutocompleteDictionary: Dictionary;

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

@@ -15,5 +15,5 @@ export declare function withRenderOption<T>(color?: 'primary' | 'default' | 'err
     disabled?: boolean;
     startAdornment?: ReactNode;
     endAdornment?: ReactNode;
-    size?: Extract<Sizes, "small" | "medium">;
+    size: Extract<Sizes, "small" | "medium">;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,11 @@
 import { createElement } from "react";
-import { M as MenuItem } from "../../MenuItem/MenuItem.js";
+import { M as MenuItemStyled } from "../slots /AutocompleteSlots.js";
 function withRenderOption(color) {
   return function RenderOption(optionProps, option) {
     return /* @__PURE__ */ createElement(
-      MenuItem,
+      MenuItemStyled,
       {
+        ownerState: {},
         ...optionProps,
         selected: option.selected,
         color,

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

@@ -6,12 +6,12 @@ import { a as autocompleteSyles } from "../AutocompleteStyles.js";
 import { A as AUTOCOMPLETE_KEY_COMPONENT } from "../constants.js";
 import { A as AutocompleteSlots } from "./AutocompleteEnum.js";
 import { I as IconButton } from "../../IconButton/IconButton.js";
+import { M as MenuItem } from "../../MenuItem/MenuItem.js";
 import { C as CircularProgress } from "../../CircularProgress/CircularProgress.js";
 import { T as TextField } from "../../TextField/TextField.js";
 import { T as Typography } from "../../Typography/Typography.js";
 import { S as Skeleton } from "../../Skeleton/Skeleton.js";
 import { P as Popper } from "../../Popper/Popper.js";
-import { M as MenuItem } from "../../MenuItem/MenuItem.js";
 const IconButtonStyled = styled(IconButton, {
   name: AUTOCOMPLETE_KEY_COMPONENT,
   slot: AutocompleteSlots.iconButton
@@ -24,7 +24,7 @@ const ChipStyled = styled(Chip, {
   name: AUTOCOMPLETE_KEY_COMPONENT,
   slot: AutocompleteSlots.chip
 })(autocompleteSyles?.chip);
-styled(MenuItem, {
+const MenuItemStyled = styled(MenuItem, {
   name: AUTOCOMPLETE_KEY_COMPONENT,
   slot: AutocompleteSlots.menuItem
 })(autocompleteSyles?.menuItem);
@@ -64,6 +64,7 @@ export {
   AutocompleteStyled as A,
   ChipStyled as C,
   ImageStyled as I,
+  MenuItemStyled as M,
   PopperComponentStyled as P,
   RenderInputStyled as R,
   CircularProgressStyled as a,

package/components/mui_extended/MenuItem/MenuItem.js

@@ -3,7 +3,7 @@ import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
 import { useTheme } from "@mui/material";
 import clsx from "clsx";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
-import { M as MENUITEM_KEY_COMPONENT } from "./constants.js";
+import { M as MENUITEM_CLASSES } from "./constants.js";
 import { M as MenuItemSkeletonStyled, a as MenuItemRootStyled, b as MenuItemIconCheckedStyled, c as MenuItemContainerStyled, d as MenuItemTypographyStyled, e as MenuItemIconStyled } from "./slots/MenuItemSlots.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 const MenuItem = (props) => {
@@ -18,6 +18,7 @@ const MenuItem = (props) => {
     disabled = false,
     size = "medium",
     checked = false,
+    className,
     ...other
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -42,11 +43,12 @@ const MenuItem = (props) => {
       {
         "data-testid": "SkeletonMenuItem",
         width: skeletonWidth,
-        ownerState: { ...ownerState }
+        ownerState: { ...ownerState },
+        className: MENUITEM_CLASSES.skeleton
       }
     );
   }
-  const renderIcon = (icon, instaceDataTestId, className) => {
+  const renderIcon = (icon, instaceDataTestId, classNameIcon) => {
     if (!icon) {
       return null;
     }
@@ -62,14 +64,13 @@ const MenuItem = (props) => {
           size: adjustedSize,
           disabled,
           instaceDataTestId,
-          className
+          className: classNameIcon
         }
       );
     }
   };
   const checkedIcon = "https://s3.us-east-1.amazonaws.com/static.made4labs/environments/d1/frontend/components/menu_item/checked.svg";
   const hasCheckedIcon = checked && checkedIcon;
-  const classRoot = getComponentSlotRoot(MENUITEM_KEY_COMPONENT);
   return /* @__PURE__ */ jsxs(
     MenuItemRootStyled,
     {
@@ -79,7 +80,7 @@ const MenuItem = (props) => {
       disabled,
       disableRipple: true,
       size: adjustedSize,
-      className: clsx("M4LMenuItemRoot", classRoot),
+      className: clsx(className, MENUITEM_CLASSES.root),
       "data-testid": "MenuItemRoot",
       children: [
         hasCheckedIcon && /* @__PURE__ */ jsx(

package/components/mui_extended/MenuItem/MenuItem.styles.js

@@ -1,3 +1,4 @@
+import { g as getHeightSizeStyles } from "../../../utils/getHeightSizeStyles.js";
 const menuItemStyles = {
   /**
    * Estilos para el contenedor de los items del menú
@@ -14,80 +15,85 @@ const menuItemStyles = {
    * @createdAt 2024-12-27 08:28:33 - automatic
    * @author Andrés Quintero - automatic
    */
-  menuItemRoot: ({ theme, ownerState }) => ({
+  root: ({ theme, ownerState }) => ({
     width: "100%",
     gap: theme.vars.size.baseSpacings.sp3,
     padding: theme.vars.size.baseSpacings.sp1,
     borderRadius: theme.vars.size.borderRadius.r0,
     ...ownerState.selected && {
-      ...ownerState.color === "primary" && {
-        borderLeft: theme.vars.size.borderStroke.container,
-        borderColor: ownerState.paletteColor?.main
-      },
-      "& .M4lclassCssSpecificity.M4lclassCssSpecificity": {
+      borderLeft: theme.vars.size.borderStroke.container,
+      borderColor: ownerState.paletteColor?.main,
+      "& .M4LTypography-root": {
         color: ownerState.paletteColor?.enabled
       },
-      "& .M4LIconClass-root": {
+      "& .M4LIcon-icon": {
         backgroundColor: ownerState.paletteColor?.enabled
       },
       "&:hover": {
         backgroundColor: ownerState.paletteColor?.hoverOpacity,
-        "&:active": {
-          backgroundColor: ownerState.paletteColor?.activeOpacity,
-          "& .M4lclassCssSpecificity": {
-            color: ownerState.paletteColor?.active
-          },
-          "& .M4LIconClass-root": {
-            color: ownerState.paletteColor?.active
-          }
+        "& .M4LIcon-icon": {
+          backgroundColor: ownerState.paletteColor?.hover
+        },
+        "& .M4LTypography-root": {
+          color: ownerState.paletteColor?.hover
+        }
+      },
+      "&:active": {
+        backgroundColor: ownerState.paletteColor?.activeOpacity,
+        "& .M4LIcon-icon": {
+          backgroundColor: ownerState.paletteColor?.active
+        },
+        "& .M4LTypography-root": {
+          color: ownerState.paletteColor?.active
+        }
+      },
+      "&:focus-visible": {
+        backgroundColor: ownerState.paletteColor?.activeOpacity,
+        outline: theme.vars.size.borderStroke.container,
+        outlineColor: theme.vars.palette.border.main,
+        outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
+        "& .M4LIcon-icon": {
+          color: ownerState.paletteColor?.active
         }
       }
     },
     ...ownerState.color === "default" && {
-      "& .M4lclassCssSpecificity": {
+      "& .M4LTypography-root": {
         color: theme.vars.palette.text.primary
       },
-      "& .M4LIconClass-root": {
+      "& .M4LIcon-icon": {
         backgroundColor: theme.vars.palette.text.primary
       },
       "&:hover": {
-        backgroundColor: ownerState.paletteColor?.hoverOpacity,
-        "&:active": {
-          backgroundColor: ownerState.paletteColor?.activeOpacity,
-          "&.M4lclassCssSpecificity": {
-            color: theme.vars.palette.text.primary
-          },
-          "& .M4LIconClass-root": {
-            backgroundColor: theme.vars.palette.text.primary
-          }
+        backgroundColor: ownerState.paletteColor?.hoverOpacity
+      },
+      "&:active": {
+        backgroundColor: ownerState.paletteColor?.activeOpacity,
+        "& .M4LIcon-icon": {
+          backgroundColor: theme.vars.palette.text.primary
         }
       }
     },
     ...ownerState.disabled && {
       pointerEvents: "none",
-      "& .M4lclassCssSpecificity.M4lclassCssSpecificity": {
+      "& .M4LTypography-root": {
         color: theme.vars.palette.text.disabled
       },
-      "& .M4LIconClass-root": {
+      "& .M4LIcon-icon": {
         backgroundColor: theme.vars.palette.text.disabled
       }
     },
-    // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
-      ...theme.generalSettings.isMobile ? {
-        minHeight: theme.vars.size.mobile.small.action
-      } : {
-        minHeight: theme.vars.size.desktop.small.action
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "action",
+      (height) => {
+        return {
+          height: "auto!important",
+          minHeight: `${height}!important`
+        };
       }
-    },
-    // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? {
-        minHeight: theme.vars.size.mobile.medium.action
-      } : {
-        minHeight: theme.vars.size.desktop.medium.action
-      }
-    }
+    )
   }),
   /**
    * Estilos para el icono de los items del menú
@@ -110,7 +116,7 @@ const menuItemStyles = {
    */
   menuItemIconChecked: ({ ownerState }) => ({
     ...ownerState.selected && {
-      "& .M4LIconClass-root": {
+      "& .M4LIcon-icon": {
         backgroundColor: ownerState.paletteColor?.main
       }
     }
@@ -146,26 +152,11 @@ const menuItemStyles = {
     display: "flex",
     alignItems: "center",
     background: theme.vars.palette.skeleton.transition,
-    // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.small.action,
-        minHeight: theme.vars.size.mobile.small.action
-      } : {
-        height: theme.vars.size.desktop.small.action,
-        minHeight: theme.vars.size.desktop.small.action
-      }
-    },
-    // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.medium.action,
-        minHeight: theme.vars.size.mobile.medium.action
-      } : {
-        height: theme.vars.size.desktop.medium.action,
-        minHeight: theme.vars.size.desktop.medium.action
-      }
-    }
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "action"
+    )
   })
 };
 export {

package/components/mui_extended/MenuItem/constants.d.ts

@@ -6,3 +6,7 @@
  * @default 'M4LMenuItem'
  */
 export declare const MENUITEM_KEY_COMPONENT = "M4LMenuItem";
+/**
+ * Inventario de clases CSS para el componente MenuItem
+ */
+export declare const MENUITEM_CLASSES: Record<string, string>;

package/components/mui_extended/MenuItem/constants.js

@@ -1,4 +1,8 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { M as MenuItemSlots } from "./slots/MenuItemEnum.js";
 const MENUITEM_KEY_COMPONENT = "M4LMenuItem";
+const MENUITEM_CLASSES = getComponentClasses(MENUITEM_KEY_COMPONENT, MenuItemSlots);
 export {
-  MENUITEM_KEY_COMPONENT as M
+  MENUITEM_CLASSES as M,
+  MENUITEM_KEY_COMPONENT as a
 };

package/components/mui_extended/MenuItem/slots/MenuItemEnum.d.ts

@@ -1,5 +1,5 @@
 export declare enum MenuItemSlots {
-    menuItemRoot = "menuItemRoot",
+    root = "menuItemRoot",
     menuItemIcon = "menuItemIcon",
     menuItemIconChecked = "menuItemIconChecked",
     menuItemContainer = "menuItemContainer",

package/components/mui_extended/MenuItem/slots/MenuItemEnum.js

@@ -1,5 +1,5 @@
 var MenuItemSlots = /* @__PURE__ */ ((MenuItemSlots2) => {
-  MenuItemSlots2["menuItemRoot"] = "menuItemRoot";
+  MenuItemSlots2["root"] = "menuItemRoot";
   MenuItemSlots2["menuItemIcon"] = "menuItemIcon";
   MenuItemSlots2["menuItemIconChecked"] = "menuItemIconChecked";
   MenuItemSlots2["menuItemContainer"] = "menuItemContainer";

package/components/mui_extended/MenuItem/slots/MenuItemSlots.js

@@ -1,6 +1,6 @@
 import { styled } from "@mui/material/styles";
 import { MenuItem } from "@mui/material";
-import { M as MENUITEM_KEY_COMPONENT } from "../constants.js";
+import { a as MENUITEM_KEY_COMPONENT } from "../constants.js";
 import { m as menuItemStyles } from "../MenuItem.styles.js";
 import { M as MenuItemSlots } from "./MenuItemEnum.js";
 import { T as Typography } from "../../Typography/Typography.js";
@@ -8,8 +8,8 @@ import { S as Skeleton } from "../../Skeleton/Skeleton.js";
 import { I as Icon } from "../../../Icon/Icon.js";
 const MenuItemRootStyled = styled(MenuItem, {
   name: MENUITEM_KEY_COMPONENT,
-  slot: MenuItemSlots.menuItemRoot
-})(menuItemStyles?.menuItemRoot);
+  slot: MenuItemSlots.root
+})(menuItemStyles?.root);
 const MenuItemContainerStyled = styled("div", {
   name: MENUITEM_KEY_COMPONENT,
   slot: MenuItemSlots.menuItemContainer

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

@@ -5,27 +5,48 @@ import { MenuItemSlots } from './slots';
 import { MENUITEM_KEY_COMPONENT } from './constants';
 import { ReactNode } from 'react';
 /**
- * Props para el componente `MenuItem`, extendiendo las propiedades originales de Material UI.
- * Omit<MUIMenuItemProps, 'size' | 'color'>
- * [startIcon] - Prop opcional para el ícono a la izquierda en el `MenuItem`.
- * [endIcon] - Prop opcional para el ícono a la derecha en el `MenuItem`.
- * label - Texto que describe el `MenuItem`.
- * [selected] - Indica si el item está seleccionado.
- * [componentPaletteColor] - Personalización del color de la paleta del componente.
- * [color] - Define el color del `MenuItem` (solo 'primary' permitido).
- * [disabled] - Indica si el `MenuItem` está deshabilitado.
- * [size] - Tamaño del `MenuItem` (por defecto 'medium').
+ * Propiedades del componente `MenuItem`.
  */
 export interface MenuItemProps extends Omit<MUIMenuItemProps, 'size' | 'color'> {
+    /**
+     * Prop opcional para el ícono a la izquierda en el `MenuItem`
+     */
     startIcon?: ReactNode;
+    /**
+     * Prop opcional para el ícono a la derecha en el `MenuItem`
+     */
     endIcon?: ReactNode;
+    /**
+     * Texto que describe el `MenuItem`
+     */
     label: string;
+    /**
+     * Indica si el item está seleccionado
+     */
     selected?: boolean;
+    /**
+     * Define el color del `MenuItem`
+     */
     color?: Extract<ComponentPalletColor, 'primary' | 'default' | 'error'>;
+    /**
+     * Personalización del color de la paleta del componente
+     */
     componentPaletteColor?: ComponentPalletColor;
+    /**
+     * Indica si el `MenuItem` está deshabilitado
+     */
     disabled?: boolean;
+    /**
+     * Define el tamaño del `MenuItem`
+     */
     size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Define el with of skeleton mode
+     */
     skeletonWidth?: string | number;
+    /**
+     * Define si el ícono de check está activo
+     */
     checked?: boolean;
 }
 /**
@@ -43,4 +64,4 @@ export type MenuItemSlotsType = keyof typeof MenuItemSlots;
 /**
  * Estilos aplicables al `MenuItem` utilizando temas y slots personalizados.
  */
-export type MenuItemStyles = Partial<OverridesStyleRules<MenuItemSlotsType, typeof MENUITEM_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type MenuItemStyles = OverridesStyleRules<MenuItemSlotsType, typeof MENUITEM_KEY_COMPONENT, Theme>;

package/components/mui_extended/TextField/TextField.js

@@ -47,11 +47,12 @@ const TextField = (props) => {
     TextFieldRootStyled,
     {
       ownerState: { ...ownerState },
-      className: clsx(TEXT_FIELD_CLASSES.root, TEXT_FIELD_CLASSES[variant], className),
+      className: clsx(TEXT_FIELD_CLASSES.root, TEXT_FIELD_CLASSES.variant, className),
       ...getPropDataTestId(TEXT_FIELD_KEY_COMPONENT, TextFieldSlots.root, dataTestId),
       autoComplete,
       value,
       inputMode: "numeric",
+      disabled,
       inputProps: {
         ...inputProps,
         disabled,