@m4l/components 9.2.60-19062025.beta.1 → 9.2.60-24062025.beta.1

package/components/Chip/Chip.js

@@ -28,16 +28,14 @@ const Chip = forwardRef((props, ref) => {
   const { currentSize } = useComponentSize(size);
   const isSkeleton = useModuleSkeleton();
   const { host_static_assets, environment_assets } = useEnvironment();
-  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const ownerState = useMemo(() => ({
     interactive: !!onClick,
-    size: adjustedSize,
-    chipSize: adjustedSize,
+    size: currentSize,
     variant,
     color,
     opacity,
     externalColor
-  }), [adjustedSize, variant, color, opacity, externalColor, onClick]);
+  }), [currentSize, variant, color, opacity, externalColor, onClick]);
   const renderIcon = useMemo(() => (icon, instaceDataTestId) => {
     if (!icon) {
       return null;
@@ -50,12 +48,12 @@ const Chip = forwardRef((props, ref) => {
         {
           ownerState: { ...ownerState },
           src: icon,
-          size: adjustedSize,
+          size: currentSize,
           instaceDataTestId
         }
       );
     }
-  }, [ownerState, adjustedSize]);
+  }, [ownerState, currentSize]);
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(
       SkeletonChipStyled,
@@ -75,7 +73,7 @@ const Chip = forwardRef((props, ref) => {
     ChipRootStyled,
     {
       role: "button-chip",
-      size: adjustedSize,
+      size: currentSize,
       onClick,
       ownerState: { ...ownerState },
       className: clsx(className, CHIP_CLASSES.root),
@@ -85,17 +83,18 @@ const Chip = forwardRef((props, ref) => {
       ...others,
       children: [
         renderIcon(startIcon, "ChipStartIcon"),
-        /* @__PURE__ */ jsx(TextChipStyled, { size: adjustedSize, ownerState: { ...ownerState }, color, children: label }),
+        /* @__PURE__ */ jsx(TextChipStyled, { size: currentSize, ownerState: { ...ownerState }, color, children: label }),
         renderIcon(endIcon, "ChipEndIcon"),
         onDeleted && /* @__PURE__ */ jsx(
           IconButtonStyled,
           {
             ...iconButtonProps,
             src: iconClose,
-            size: adjustedSize,
+            size: currentSize,
             ownerState: { ...ownerState },
             onClick: handleDelete,
-            disabled: disabledDeleteButton
+            disabled: disabledDeleteButton,
+            className: CHIP_CLASSES.closeIcon
           }
         )
       ]

package/components/Chip/ChipStyles.js

@@ -43,8 +43,8 @@ const chipStyles = {
       display: "flex",
       alignItems: "center",
       padding: theme.vars.size.baseSpacings.sp1,
-      paddingRight: 0,
       borderRadius: theme.vars.size.borderRadius["r0-5"],
+      gap: theme.vars.size.baseSpacings["sp0-5"],
       width: "max-content",
       cursor: "pointer",
       color,
@@ -72,6 +72,17 @@ const chipStyles = {
         border: `${theme.vars.size.borderStroke.container}`,
         borderColor: bgColor
       },
+      "&&& .M4LChip-closeIcon": {
+        ...getSizeStyles(
+          theme,
+          ownerState?.size || "medium",
+          "base",
+          (size) => ({
+            height: size,
+            width: size
+          })
+        )
+      },
       variants: []
     };
   },
@@ -81,7 +92,7 @@ const chipStyles = {
   textChip: ({ theme }) => ({
     whiteSpace: "nowrap",
     paddingLeft: theme.vars.size.baseSpacings.sp1,
-    paddingRight: theme.vars.size.baseSpacings.sp2
+    paddingRight: theme.vars.size.baseSpacings.sp1
   }),
   /**
    * Styles for the chip icon element.

package/components/Chip/constants.d.ts

@@ -1,3 +1,4 @@
+import { ChipSlots, ChipComplementaryClasses } from './slots/ChipEnum';
 /**
  * Clave de identificación del componente Chip dentro del sistema.
  *
@@ -6,6 +7,14 @@
  * @default 'M4LChip'
  */
 export declare const CHIP_KEY_COMPONENT = "M4LChip";
+export declare const COMBINED_CHIP_ENUMS: {
+    closeIcon: ChipComplementaryClasses.closeIcon;
+    root: ChipSlots.root;
+    skeletonChip: ChipSlots.skeletonChip;
+    chipIcon: ChipSlots.chipIcon;
+    textChip: ChipSlots.textChip;
+    iconButton: ChipSlots.iconButton;
+};
 /**
  * Inventario de clases CSS para el componente Chip
  */

package/components/Chip/constants.js

@@ -1,7 +1,11 @@
 import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
-import { C as ChipSlots } from "./slots/ChipEnum.js";
+import { C as ChipComplementaryClasses, a as ChipSlots } from "./slots/ChipEnum.js";
 const CHIP_KEY_COMPONENT = "M4LChip";
-const CHIP_CLASSES = getComponentClasses(CHIP_KEY_COMPONENT, ChipSlots);
+const COMBINED_CHIP_ENUMS = {
+  ...ChipSlots,
+  ...ChipComplementaryClasses
+};
+const CHIP_CLASSES = getComponentClasses(CHIP_KEY_COMPONENT, COMBINED_CHIP_ENUMS);
 export {
   CHIP_CLASSES as C,
   CHIP_KEY_COMPONENT as a

package/components/Chip/slots/ChipEnum.d.ts

@@ -5,3 +5,6 @@ export declare enum ChipSlots {
     textChip = "text",
     iconButton = "iconButton"
 }
+export declare enum ChipComplementaryClasses {
+    closeIcon = "closeIcon"
+}

package/components/Chip/slots/ChipEnum.js

@@ -6,6 +6,11 @@ var ChipSlots = /* @__PURE__ */ ((ChipSlots2) => {
   ChipSlots2["iconButton"] = "iconButton";
   return ChipSlots2;
 })(ChipSlots || {});
+var ChipComplementaryClasses = /* @__PURE__ */ ((ChipComplementaryClasses2) => {
+  ChipComplementaryClasses2["closeIcon"] = "closeIcon";
+  return ChipComplementaryClasses2;
+})(ChipComplementaryClasses || {});
 export {
-  ChipSlots as C
+  ChipComplementaryClasses as C,
+  ChipSlots as a
 };

package/components/Chip/slots/ChipSlots.js

@@ -1,7 +1,7 @@
 import { styled } from "@mui/material/styles";
 import { c as chipStyles } from "../ChipStyles.js";
 import { a as CHIP_KEY_COMPONENT } from "../constants.js";
-import { C as ChipSlots } from "./ChipEnum.js";
+import { a as ChipSlots } from "./ChipEnum.js";
 import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
 import { T as Typography } from "../../mui_extended/Typography/Typography.js";
 import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";

package/components/DataGrid/Datagrid.styles.js

@@ -68,6 +68,9 @@ const dataGridStyles = {
     borderRadius: theme.vars.size.borderRadius.r1,
     gap: theme.vars.size.baseSpacings.sp1,
     height: "fit-content",
+    ...theme.generalSettings.isMobile && {
+      minHeight: theme.vars.size.baseSpacings.sp10
+    },
     "& .mobile-menu-actions": {
       marginRight: "auto"
     }

package/components/DynamicFilter/DynamicFilter.styles.js

@@ -33,7 +33,7 @@ const dynamicFilterStyles = {
     height: "fit-content",
     borderRadius: theme.vars.size.borderRadius.r2,
     background: theme.vars.palette.background.default,
-    boxShadow: ownerState?.isValid ? `inset 0px 0px 0px 1px ${theme.vars.palette.border.secondary}` : `inset 0px 0px 0px 1px ${theme.vars.palette.error.enabled}`,
+    boxShadow: ownerState?.isValid ? `inset 0px 0px 0px 1px ${theme.vars.palette.border.default}` : `inset 0px 0px 0px 1px ${theme.vars.palette.error.enabled}`,
     overflow: "hidden",
     '&:has([aria-expanded="true"])': {
       boxShadow: ownerState?.isValid ? `inset 0px 0px 0px 1.3px ${theme.vars.palette.border.main}` : `inset 0px 0px 0px 1px ${theme.vars.palette.error.enabled}`
@@ -173,7 +173,7 @@ const dynamicFilterStyles = {
     alignItems: "center",
     borderTopRightRadius: theme.vars.size.borderRadius.r1,
     borderBottomRightRadius: theme.vars.size.borderRadius.r1,
-    boxShadow: `inset 1px 0px 0px 0px ${theme.vars.palette.border.secondary}`,
+    boxShadow: `inset 1px 0px 0px 0px ${theme.vars.palette.border.default}`,
     ...!ownerState?.visibleRefresh && !ownerState?.isDirty && {
       display: "none"
     },

package/components/DynamicSort/DynamicSort.styles.js

@@ -33,7 +33,7 @@ const dynamicSortStyles = {
     height: "fit-content",
     borderRadius: theme.vars.size.borderRadius.r2,
     background: theme.vars.palette.background.default,
-    boxShadow: ownerState?.isValid ? `inset 0px 0px 0px 1px ${theme.vars.palette.border.secondary}` : `inset 0px 0px 0px 1px ${theme.vars.palette.error.enabled}`,
+    boxShadow: ownerState?.isValid ? `inset 0px 0px 0px 1px ${theme.vars.palette.border.default}` : `inset 0px 0px 0px 1px ${theme.vars.palette.error.enabled}`,
     overflow: "hidden",
     '&:has([aria-expanded="true"])': {
       boxShadow: ownerState?.isValid ? `inset 0px 0px 0px 1.3px ${theme.vars.palette.border.main}` : `inset 0px 0px 0px 1px ${theme.vars.palette.error.enabled}`
@@ -172,7 +172,7 @@ const dynamicSortStyles = {
     alignItems: "center",
     borderTopRightRadius: theme.vars.size.borderRadius.r1,
     borderBottomRightRadius: theme.vars.size.borderRadius.r1,
-    boxShadow: `inset 1px 0px 0px 0px ${theme.vars.palette.border.secondary}`,
+    boxShadow: `inset 1px 0px 0px 0px ${theme.vars.palette.border.default}`,
     ...!ownerState?.visibleRefresh && !ownerState?.isDirty && {
       display: "none"
     },

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

@@ -87,6 +87,7 @@ const RHFTextField = forwardRef((props, ref) => {
                   InputLabelProps: { shrink: true },
                   autoComplete,
                   onChange: onInternalChange,
+                  variant,
                   value: type === "number" ? isNaN(parseFloat(value)) ? "" : value : value || "",
                   fullWidth: true,
                   error: !!error,

package/components/mui_extended/Button/Button.js

@@ -16,6 +16,7 @@ const Button = forwardRef((props, ref) => {
     size,
     variant = "contained",
     skeletonWidth = "15%",
+    fullWidth = false,
     ...others
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -31,7 +32,8 @@ const Button = forwardRef((props, ref) => {
     variant,
     disabled,
     paletteColor,
-    color
+    color,
+    fullWidth
   };
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(SkeletonButtonStyled, { "data-testid": "SkeletonButton", width: skeletonWidth, ownerState: { ...ownerState } });

package/components/mui_extended/Button/ButtonStyles.js

@@ -74,7 +74,12 @@ const buttonStyles = {
           minHeight: size
         };
       }
-    )
+    ),
+    ...ownerState?.fullWidth && {
+      width: "100%",
+      maxWidth: "unset",
+      minWidth: "unset"
+    }
   }),
   /**
    * Styles for the text of the button component.

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

@@ -21,7 +21,7 @@ export interface ButtonProps extends Omit<MUIButtonProps, 'size' | 'variant' | '
 /**
  * Owner state of the `Button` used to define internal style and behavior properties.
  */
-export interface ButtonOwnerState extends Pick<ButtonProps, 'size' | 'variant' | 'color' | 'disabled'> {
+export interface ButtonOwnerState extends Pick<ButtonProps, 'size' | 'variant' | 'color' | 'disabled' | 'fullWidth'> {
     disabled?: boolean;
     paletteColor: PaletteColor;
 }

package/components/mui_extended/NavLink/NavLink.js

@@ -15,6 +15,7 @@ const NavLink = (props) => {
     skeletonWidth,
     color,
     dataTestId,
+    whiteSpace = false,
     ...others
   } = props;
   const isSkeleton = useModuleSkeleton();
@@ -22,7 +23,8 @@ const NavLink = (props) => {
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const ownerState = {
     disabled,
-    size
+    size,
+    whiteSpace
   };
   return /* @__PURE__ */ jsx(
     RouterNavLinkRootStyled,

package/components/mui_extended/NavLink/NavLink.styles.js

@@ -25,7 +25,8 @@ const navLinkStyles = {
         theme.generalSettings.isMobile,
         ownerState?.size || "small",
         "body"
-      )
+      ),
+      whiteSpace: ownerState?.whiteSpace ? "normal" : "nowrap"
     }
   }),
   /**

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

@@ -22,9 +22,11 @@ export interface NavLinkProps extends RouterNavLinkProps, Pick<TypographyProps,
     disabled?: boolean;
     /**  Estilos personalizados para el componente. */
     dataTestId?: string;
+    /** Define el white space del texto. Por defecto es 'normal'. */
+    whiteSpace?: boolean;
 }
 /** Estado del propietario del NavLink.*/
-export type NavLinkOwnerState = Pick<NavLinkProps, 'color'> & {
+export type NavLinkOwnerState = Pick<NavLinkProps, 'color' | 'whiteSpace'> & {
     /** Indica si el NavLink está deshabilitado. */
     disabled?: boolean;
     /** Define el tamaño de la etiqueta. Puede ser 'small' o 'medium'. Por defecto es 'medium'.*/

package/components/mui_extended/TextField/TextField.styles.js

@@ -92,7 +92,7 @@ const textFieldStyles = {
       }
     },
     "&:not(.M4LTextField-readOnly ) .MuiInputBase-root:hover": {
-      backgroundColor: ownerState?.paletteColor?.hoverOpacity,
+      backgroundColor: theme.vars.palette.default.hoverOpacity,
       ...ownerState?.error && {
         borderColor: `${ownerState?.paletteColor?.hover}!important`,
         "& .MuiInputAdornment-root .M4LIcon-icon": {
@@ -127,13 +127,13 @@ const textFieldStyles = {
     ...ownerState?.variant === "contained" && {
       [`&.${TEXT_FIELD_CLASSES.contained} .MuiInputBase-root`]: {
         border: "none",
-        backgroundColor: ownerState?.readOnly ? theme.vars.palette.background.neutral : theme.vars.palette[ownerState?.color || "default"][ownerState?.error ? "toneOpacity" : "enabled"]
+        backgroundColor: ownerState?.readOnly ? theme.vars.palette.background.neutral : theme.vars.palette[ownerState?.color || "default"][ownerState?.error ? "toneOpacity" : "enabledOpacity"]
       },
       ...ownerState?.error && !ownerState?.readOnly && {
         border: theme.vars.size.borderStroke.actionInput,
         borderColor: `${ownerState?.paletteColor?.enabled}!important`
       },
-      "&:not(.M4LTextField-readOnly ) .MuiInputBase-root:focus-within": {
+      "&:not(.M4LTextField-readOnly) .MuiInputBase-root:focus-within": {
         border: theme.vars.size.borderStroke.actionInput,
         borderColor: `${ownerState?.paletteColor?.enabled}!important`
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.60-19062025.beta.1",
+  "version": "9.2.60-24062025.beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -11,8 +11,8 @@
     "@googlemaps/js-api-loader": "^1.16.6",
     "@hookform/resolvers": "2.9.11",
     "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "7.1.2-19062025.beta.1",
-    "@m4l/styles": "7.1.29-19062025.beta.1",
+    "@m4l/graphics": "7.1.2-24062025.beta.1",
+    "@m4l/styles": "7.1.29-24062025.beta.1",
     "@microlink/react-json-view": "^1.23.3",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",