@m4l/components 9.3.11 → 9.3.12-BE080925-beta.1

package/.storybook/utils/getStylesColorsByMode.d.ts

@@ -73,6 +73,7 @@ export declare const colorsLight: {
         readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
@@ -277,6 +278,7 @@ export declare const colorsLight: {
         readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
@@ -482,6 +484,7 @@ export declare const colorsDark: {
         readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
@@ -686,6 +689,7 @@ export declare const colorsDark: {
         readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {

package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js

@@ -17,6 +17,7 @@ function getComparator(columns, sortColumn) {
     return column.customSort;
   }
   switch (typeOrder) {
+    //Si el tipo de dato de la columna es un numerico, retorna una función de ordenamiento numérica
     case "number":
       return (a, b) => {
         try {
@@ -25,6 +26,7 @@ function getComparator(columns, sortColumn) {
           return -1;
         }
       };
+    //Por defecto retorna una función de ordenamiento de string
     default:
       return (a, b) => {
         try {

package/components/NumberInput/hooks/useNumberInput/useNumberInput.js

@@ -56,9 +56,11 @@ const useNumberInput = (parameters) => {
     (event, field, fieldValue, reason) => {
       if (field === "value" && typeof fieldValue !== "string") {
         switch (reason) {
+          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:inputChange":
             onChange?.(event, fieldValue);
             break;
+          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:clamp":
             onChange?.(event, fieldValue);
             break;

package/components/areas/contexts/AreasContext/store.js

@@ -441,8 +441,8 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
                   bounds: {
                     left: MARGIN_GRIDLAYOUT,
                     top: MARGIN_GRIDLAYOUT,
-                    right: -10,
-                    bottom: -10
+                    right: -MARGIN_GRIDLAYOUT,
+                    bottom: -MARGIN_GRIDLAYOUT
                   }
                 });
               }

package/components/hook-form/RHFAutocompleteAsync/reducer/RHFAutocompleteReducer.js

@@ -65,6 +65,11 @@ const RHFAutocompleteAsyncReducer = (onChangeFilterParms) => (state, action) =>
         ...state,
         isOpen: false
       };
+    // case actionsType.SET_SELECTED_OPTIONS_TO_AUTOCOMPLETE:
+    //   return {
+    //     ...state,
+    //     selectedOptions: action.payload,
+    //   };
     default:
       return state;
   }

package/components/mui_extended/Badge/Badge.styles.js

@@ -24,11 +24,13 @@ const badgeStyles = {
       ...theme.generalSettings.isMobile ? {
         height: theme.vars.size.baseSpacings.sp5,
         width: ownerState?.displayBadgeContent ? "26px" : theme.vars.size.baseSpacings.sp5,
-        right: ownerState?.displayBadgeContent ? 4 : 0
+        right: ownerState?.displayBadgeContent ? 0 : 2,
+        top: ownerState?.displayBadgeContent ? 0 : 2
       } : {
         height: theme.vars.size.baseSpacings["sp3-5"],
         width: ownerState?.displayBadgeContent ? "23px" : theme.vars.size.baseSpacings["sp3-5"],
-        right: ownerState?.displayBadgeContent ? 4 : 0
+        right: ownerState?.displayBadgeContent ? 0 : 2,
+        top: ownerState?.displayBadgeContent ? 0 : 2
       },
       // Estilos para variantes
       ...ownerState?.BadgeVariant === "dot" && {

package/components/mui_extended/IconButton/IconButton.styles.js

@@ -13,7 +13,7 @@ const iconButtonStyles = {
         overflow: "hidden",
         cursor: ownerState?.disabled ? "not-allowed" : "pointer",
         color: theme.vars.palette.text.primary,
-        borderRadius: theme.size.borderRadius.r1,
+        borderRadius: theme.size.borderRadius["r1-5"],
         pointerEvents: ownerState?.disabled ? "none" : "auto",
         display: ownerState?.isSkeleton ? "none" : "flex",
         justifyContent: "center",
@@ -47,24 +47,24 @@ const iconButtonStyles = {
           // Estilos para la variante contained
           ...ownerState?.variant === "contained" && {
             // 🎯 Color de fondo según variante y color del componente
-            backgroundColor: ownerState?.variant === "contained" ? ownerState?.color === "error" ? paletteColor.active : ownerState?.color === "default" ? theme.vars.palette.primary.selected : paletteColor.selected : ownerState?.color === "error" ? paletteColor.activeOpacity : paletteColor.selectedOpacity,
+            backgroundColor: ownerState?.variant === "contained" ? ownerState?.color === "error" ? paletteColor.active : ownerState?.color === "default" ? theme.vars.palette.primary.selected : ownerState?.color === "success" ? theme.vars.palette.success.selected : paletteColor.selected : ownerState?.color === "error" ? paletteColor.activeOpacity : paletteColor.selectedOpacity,
             "&&& .M4LIcon-icon": {
               backgroundColor: ownerState?.variant === "contained" ? theme.vars.palette.primary.contrastText : paletteColor.semanticText
             }
           },
           // Estilos para la variante text
           ...ownerState.variant === "outline" && {
-            backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.activeOpacity : paletteColor.activeOpacity,
+            backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.selectedOpacity : paletteColor.selectedOpacity,
             border: theme.vars.size.borderStroke.actionInput,
             borderColor: ownerState.color === "default" ? theme.vars.palette.primary.active : paletteColor.active,
             "&&& .M4LIcon-icon": {
-              backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : paletteColor.selected
+              backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : ownerState.color === "warning" ? paletteColor.active : paletteColor.selected
             }
           },
           ...ownerState.variant === "text" && {
-            backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.activeOpacity : paletteColor.activeOpacity,
+            backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.selectedOpacity : paletteColor.selectedOpacity,
             "&&& .M4LIcon-icon": {
-              backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : paletteColor.selected
+              backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : ownerState.color === "warning" ? paletteColor.active : paletteColor.selected
             }
           }
         } : {
@@ -128,7 +128,7 @@ const iconButtonStyles = {
             backgroundColor: paletteColor.enabled,
             // 🖼️ Color del icono
             "&&& .M4LIcon-icon": {
-              backgroundColor: paletteColor.semanticText
+              backgroundColor: ownerState?.color === "default" ? paletteColor.semanticText : paletteColor.contrastText
             },
             // 🖱️ Estado Hover
             "&:hover": {

package/components/mui_extended/Select/Select.js

@@ -176,6 +176,7 @@ const Select = forwardRef(
               paddingBottom: theme.vars.size.baseSpacings.sp3,
               paddingLeft: 0,
               paddingRight: 0,
+              maxHeight: "200px",
               "& .MuiList-root": {
                 padding: 0,
                 display: "flex",

package/components/mui_extended/Select/Select.styles.js

@@ -35,7 +35,12 @@ const selectStyles = {
         },
         "& .MuiSelect-select": {
           padding: `${theme.vars.size.baseSpacings.sp1}!important`,
-          minHeight: "unset"
+          minHeight: "unset",
+          maxHeight: "80px",
+          overflow: "auto",
+          boxSizing: "border-box",
+          display: "flex",
+          flexDirection: "column"
         },
         // Estilos para la variante text
         [`&.${SELECT_CLASSES.text}`]: {
@@ -69,7 +74,8 @@ const selectStyles = {
           (height) => {
             return {
               minHeight: height,
-              maxHeight: height
+              height: "fit-content",
+              maxHeight: "80px"
             };
           }
         )
@@ -88,7 +94,9 @@ const selectStyles = {
     display: "flex",
     alignItems: "center",
     gap: theme.vars.size.baseSpacings.sp1,
-    flexWrap: "wrap"
+    flexWrap: "wrap",
+    overflow: "auto",
+    flexShrink: 1
   }),
   arrowDown: {},
   renderValueTypography: () => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.11",
+  "version": "9.3.12-BE080925-beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

package/storybook/components/extended/mui/IconButton/IconButton.stories.d.ts

@@ -36,4 +36,7 @@ export declare const WithBadgeDot: Story;
  * Story for IconButton with skeleton.
  */
 export declare const WithSkeleton: Story;
+export declare const allColorsContained: Story;
+export declare const allColorsOutlined: Story;
+export declare const allColorsText: Story;
 export default meta;