@m4l/components 9.3.14 → 9.3.15-BE100925-beta.1

package/components/MenuActions/MenuActions.js

@@ -4,9 +4,10 @@ import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
 import { P as Popover } from "../mui_extended/Popover/Popover.js";
 import { M as MenuItem } from "../mui_extended/MenuItem/MenuItem.js";
-import { I as ICON_PATH, a as ICONS, M as MENU_ACTIONS_ } from "./constants.js";
+import { I as ICON_PATH, a as ICONS, M as MENU_ACTIONS_, b as MENU_ACTIONS_CLASSES } from "./constants.js";
 import { a as getMenuActionsDictionary, D as DICTIONARY } from "./dictionary.js";
 import { M as MenuDivider } from "../mui_extended/MenuDivider/MenuDivider.js";
+import clsx from "clsx";
 import { M as MenuListStyled, a as MenuLoaderStyled, R as RootStyled, I as IconButtonStyled, H as HeaderMenuActionsStyled, F as FooterMenuActionsStyled } from "./slots/MenuActionsSlots.js";
 import { C as CircularProgress } from "../mui_extended/CircularProgress/CircularProgress.js";
 function MenuActions(props) {
@@ -128,7 +129,7 @@ function MenuActions(props) {
       endListElement && endListElement
     ] });
   }, [menuActions, header, size, footer, endListElement, objItem, getLabel, actionKey, handleClick]);
-  return /* @__PURE__ */ jsxs(RootStyled, { className, ownerState: { ownerState }, children: [
+  return /* @__PURE__ */ jsxs(RootStyled, { className: clsx(className, MENU_ACTIONS_CLASSES.root, ownerState.selected && MENU_ACTIONS_CLASSES.selected), ownerState: { ownerState }, children: [
     /* @__PURE__ */ jsx(
       IconButtonStyled,
       {

package/components/MenuActions/MenuActions.styles.js

@@ -38,7 +38,7 @@ const menuActionsStyles = {
     "& active": {
       backgroundColor: theme.vars.palette[ownerState?.paletteColor ?? "default"].selectedOpacity
     },
-    '& [class*="M4LIcon-icon"]': {
+    "& .M4LIcon-icon": {
       backgroundColor: ownerState?.selected ? theme.vars.palette[ownerState?.paletteColor ?? "default"].selected : void 0
     }
   }),

package/components/MenuActions/constants.d.ts

@@ -20,3 +20,4 @@ export declare const MENU_ACTIONS_EMPTY = "menu_action_empty";
  * Prefijo de la clave que se utiliza cuando un ítem del menú está cargando en React.
  */
 export declare const MENU_ACTIONS_ = "menu_action_";
+export declare const MENU_ACTIONS_CLASSES: Record<string, string>;

package/components/MenuActions/constants.js

@@ -1,12 +1,23 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { M as MenuActionsSlots } from "./slots/MenuActionsEnum.js";
 const ICON_PATH = "frontend/components/menu_actions/assets/icons";
 const ICONS = {
   MENU: "menu.svg"
 };
 const MENU_ACTIONS_KEY_COMPONENT = "M4LMenuActions";
 const MENU_ACTIONS_ = "menu_action_";
+const MenuActionsComplementaryClasses = {
+  selected: "selected"
+};
+const MENU_ACTIONS_COMBINATE_CLASSES = {
+  ...MenuActionsSlots,
+  ...MenuActionsComplementaryClasses
+};
+const MENU_ACTIONS_CLASSES = getComponentClasses(MENU_ACTIONS_KEY_COMPONENT, MENU_ACTIONS_COMBINATE_CLASSES);
 export {
   ICON_PATH as I,
   MENU_ACTIONS_ as M,
   ICONS as a,
-  MENU_ACTIONS_KEY_COMPONENT as b
+  MENU_ACTIONS_CLASSES as b,
+  MENU_ACTIONS_KEY_COMPONENT as c
 };

package/components/MenuActions/slots/MenuActionsSlots.js

@@ -1,6 +1,6 @@
 import { MenuList } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { b as MENU_ACTIONS_KEY_COMPONENT } from "../constants.js";
+import { c as MENU_ACTIONS_KEY_COMPONENT } from "../constants.js";
 import { m as menuActionsStyles } from "../MenuActions.styles.js";
 import { M as MenuActionsSlots } from "./MenuActionsEnum.js";
 import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";

package/components/WindowBase/WindowBase.styles.js

@@ -291,7 +291,7 @@ const windowBaseStyles = {
           }
         }
       },
-      "&.MuiButtonBase-root:not(:hover, :active, :focus) .M4LIcon-root .M4LIcon-icon": {
+      "&.MuiButtonBase-root:not(:hover, :active, :focus, .M4LIconButton-selected) .M4LIcon-root .M4LIcon-icon": {
         backgroundColor: `${theme.vars.palette.text.disabled} !important`
       }
     },

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/mui_extended/Autocomplete/types.d.ts

@@ -8,30 +8,72 @@ import { M4LOverridesStyleRules } from '../../../@types/augmentations';
 export type GetOptionString<T> = (option: T | null) => string;
 export type AutocompleteVariants = 'outlined' | 'text';
 export interface BaseAutocompleteProps {
+    /**
+     * The size of the autocomplete input field.
+     */
     size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * The variant of the autocomplete (e.g., outlined, contained, text).
+     */
     variant?: AutocompleteVariants;
+    /**
+     * Custom data-testid for testing purposes.
+     */
     dataTestid?: string;
 }
 /**
  * Props for the unified Autocomplete component.
  * Supports both single and multiple selection, and two types: `text` and `image`.
  */
-export interface AutocompleteProps<T, Multiple extends boolean | undefined> extends Pick<MUIAutocompleteProps<T, Multiple, undefined, false>, 'options' | 'onOpen' | 'onClose' | 'loading' | 'disabled'>, Pick<TextFieldProps, 'error'>, BaseAutocompleteProps {
+export interface AutocompleteProps<T, Multiple extends boolean | undefined> extends Pick<MUIAutocompleteProps<T, Multiple, undefined, false>, 'options' | 'onOpen' | 'onClose' | 'loading' | 'disabled' | 'open'>, Pick<TextFieldProps, 'error' | 'focused'>, BaseAutocompleteProps {
+    /**
+     * Indica si el campo de texto está en modo de solo lectura.
+     * readOnly={true}
+     */
+    readOnly?: boolean;
+    /**
+     * The placeholder of the autocomplete.
+     * placeholder={}
+     */
+    placeholder?: string;
+    /**
+     * Whether multiple selections are allowed.
+     * multiple={true}
+     */
     multiple?: boolean;
     /**
      * The value of the autocomplete, supports single or multiple selection.
      * Extended to include `null` for controlled components.
      */
-    value: T | T[] | null | null | undefined;
+    value: T | T[] | null | undefined;
+    /**
+     * Function to get the label for a given option.
+     */
     getOptionLabel: (option: T | AutocompleteFreeSoloValueMapping<false>) => string;
+    /**
+     * Function to compare if an option matches the selected value.
+     */
     isOptionEqualToValue: (option: T, value: T) => boolean;
     /**
      * Function to refresh the options.
      */
     refresh?: () => void;
+    /**
+     * Callback for filtering options based on user input.
+     */
     onChangeFilterParmsLocal?: (newValue: string, reason: AutocompleteInputChangeReason) => void;
+    /**
+     * Function to get the image URL for a given option (only for `type: 'image'`).
+     */
     getOptionUrlImage?: (option: T) => string;
+    /**
+     * se cambia el nativo de Autocomplete por este, debido a que el value esta disponible para procesar
+     * Handler for when the selected value changes.
+     */
     onChange: (event: ChangeEvent<{}> | undefined, value: T | T[] | null, reason: AutocompleteChangeReason) => void;
+    /**
+     * "htmlFor" attribute for the autocomplete field.
+     */
     htmlFor?: string;
 }
 /**
@@ -41,6 +83,7 @@ export interface AutocompleteOwnerState extends Pick<BaseAutocompleteProps, 'siz
     error?: boolean;
     disabled?: boolean;
     multiple?: boolean;
+    readOnly?: boolean;
 }
 /**
  * Defines the types of Slots available for the Autocomplete.

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.js

@@ -88,7 +88,12 @@ const IconButton = forwardRef((props, ref) => {
           color,
           role: "button",
           ...other,
-          className: clsx(ICON_BUTTON_CLASSES[variant], ICON_BUTTON_CLASSES.styledMUIIconButton, className),
+          className: clsx(
+            ICON_BUTTON_CLASSES[variant],
+            ICON_BUTTON_CLASSES.styledMUIIconButton,
+            selected && ICON_BUTTON_CLASSES.selected,
+            className
+          ),
           children: renderIcon(icon || src)
         }
       )
@@ -104,7 +109,12 @@ const IconButton = forwardRef((props, ref) => {
       "data-testid": "IconButtonRoot",
       color,
       ...other,
-      className: clsx(ICON_BUTTON_CLASSES[variant], ICON_BUTTON_CLASSES.styledMUIIconButton, className),
+      className: clsx(
+        ICON_BUTTON_CLASSES[variant],
+        ICON_BUTTON_CLASSES.styledMUIIconButton,
+        selected && ICON_BUTTON_CLASSES.selected,
+        className
+      ),
       children: renderIcon(icon || src)
     }
   );

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/IconButton/constants.js

@@ -1,7 +1,14 @@
 import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
 import { I as IconButtonSlots } from "./slots/IconButtonEnum.js";
 const ICON_BUTTON_KEY_COMPONENT = "M4LIconButton";
-const ICON_BUTTON_CLASSES = getComponentClasses(ICON_BUTTON_KEY_COMPONENT, IconButtonSlots);
+const IconButtonComplementaryClasses = {
+  selected: "selected"
+};
+const IconButtonCombineClasses = {
+  ...IconButtonSlots,
+  ...IconButtonComplementaryClasses
+};
+const ICON_BUTTON_CLASSES = getComponentClasses(ICON_BUTTON_KEY_COMPONENT, IconButtonCombineClasses);
 export {
   ICON_BUTTON_CLASSES as I,
   ICON_BUTTON_KEY_COMPONENT as a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.14",
+  "version": "9.3.15-BE100925-beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {