@m4l/components 9.3.19-BE093025-beta.1 → 9.3.19-BE101025-beta.2

package/components/mui_extended/Button/ButtonStyles.js

@@ -1,84 +1,166 @@
 import { g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { B as BUTTON_CLASSES } from "./constants.js";
 const buttonStyles = {
   /**
    * Styles for the root element of the button component.
    */
-  buttonRoot: ({ theme, ownerState }) => ({
-    display: "flex",
-    flexWrap: "nowrap",
-    alignItems: "center",
-    gap: theme.vars.size.baseSpacings.sp1,
-    padding: `0px ${theme.vars.size.baseSpacings.sp2}`,
-    boxShadow: "none",
-    borderRadius: theme.vars.size.borderRadius["r1-5"],
-    maxWidth: "200px",
-    minWidth: "0",
-    flexShrink: 0,
-    "&:hover": {
-      backgroundColor: ownerState?.color === "default" ? ownerState?.paletteColor?.hover : ownerState?.paletteColor?.hoverOpacity,
-      borderColor: ownerState?.paletteColor?.hover
-    },
-    "&:active": {
-      boxShadow: "none",
-      borderColor: ownerState?.paletteColor?.active,
-      backgroundColor: ownerState?.paletteColor?.activeOpacity
-    },
-    "&:focus-visible": {
-      boxShadow: "none",
-      backgroundColor: ownerState?.paletteColor?.activeOpacity
-    },
-    "&:disabled": {
-      backgroundColor: "none",
-      "&&& .M4LIcon-icon": {
-        backgroundColor: theme.vars.palette.text.disabled
-      },
+  buttonRoot: ({ theme, ownerState }) => {
+    const selectionEffect = {
+      boxShadow: `inset 0px 0px 0px 1px ${theme.vars.palette.border.main}`
+    };
+    return {
+      // Configuración general
+      display: "flex",
+      flexWrap: "nowrap",
+      alignItems: "center",
+      gap: theme.vars.size.baseSpacings.sp1,
+      padding: `0px ${theme.vars.size.baseSpacings.sp2}`,
+      borderRadius: theme.vars.size.borderRadius["r1-5"],
+      maxWidth: "200px",
+      minWidth: "0",
+      flexShrink: 0,
+      border: "unset!important",
+      // Tamaño de altura
+      ...getSizeStyles(
+        theme,
+        ownerState?.size || "medium",
+        "action",
+        (size) => {
+          return {
+            height: "auto!important",
+            minHeight: size
+          };
+        }
+      ),
+      // Variante Contained
       ...ownerState?.variant === "contained" && {
-        backgroundColor: ownerState?.paletteColor?.enabled
-      }
-    },
-    ...ownerState?.variant === "contained" && {
-      backgroundColor: ownerState?.paletteColor?.enabled,
-      "&:hover": {
-        backgroundColor: ownerState?.paletteColor?.hover
+        backgroundColor: ownerState?.paletteColor?.enabled,
+        boxShadow: "unset",
+        // Color del texto
+        [`&&& .${BUTTON_CLASSES.textButton}`]: {
+          color: ownerState?.paletteColor?.contrastText
+        },
+        // Color de los adornos laterales
+        "&&& .M4LIcon-icon": {
+          backgroundColor: ownerState?.paletteColor?.contrastText
+        },
+        // Estado Hover
+        "&:hover": {
+          backgroundColor: ownerState?.paletteColor?.hover,
+          boxShadow: "unset"
+        },
+        // Estado Active
+        "&:active": {
+          backgroundColor: ownerState?.paletteColor?.activeOpacity,
+          boxShadow: "unset"
+        },
+        // Estado focus visible
+        "&:focus-visible": {
+          backgroundColor: ownerState?.paletteColor?.activeOpacity,
+          ...selectionEffect
+        }
       },
-      "&:active": {
-        boxShadow: "none",
-        backgroundColor: ownerState?.paletteColor?.active
-      }
-    },
-    ...ownerState?.variant === "outlined" && {
-      borderColor: ownerState?.paletteColor?.enabled,
-      "&&& .M4LIcon-icon": {
-        backgroundColor: ownerState?.paletteColor?.semanticText
-      }
-    },
-    ...ownerState?.variant === "text" && {
-      color: ownerState?.paletteColor?.semanticText,
-      borderColor: ownerState?.paletteColor?.enabled,
-      "&&& .M4LIcon-icon": {
-        backgroundColor: ownerState?.paletteColor?.semanticText
-      }
-    },
-    "& span": {
-      margin: "0px"
-    },
-    ...getSizeStyles(
-      theme,
-      ownerState?.size || "medium",
-      "action",
-      (size) => {
-        return {
-          height: "auto!important",
-          minHeight: size
-        };
+      // Variante Outlined
+      ...ownerState?.variant === "outlined" && {
+        "&&&": {
+          // Borde
+          ...ownerState?.color === "default" ? {
+            outline: `1px solid ${theme.vars.palette.border.default}`,
+            outlineOffset: "-1px"
+          } : {
+            outline: `1px solid ${ownerState?.paletteColor?.enabled}`,
+            outlineOffset: "-1px"
+          },
+          // Color del texto
+          [`& .${BUTTON_CLASSES.textButton}`]: {
+            ...ownerState?.color === "default" ? {
+              color: theme.vars.palette.text.primary
+            } : {
+              color: ownerState?.paletteColor?.semanticText
+            }
+          },
+          // Color de los adornos laterales
+          "& .M4LIcon-icon": {
+            backgroundColor: ownerState?.paletteColor?.semanticText
+          },
+          // Estado Hover
+          "&:hover": {
+            backgroundColor: ownerState?.paletteColor?.hoverOpacity,
+            outline: `1px solid ${ownerState?.paletteColor?.hover}`,
+            outlineOffset: "-1px",
+            boxShadow: "unset"
+          }
+        },
+        // Estado Active
+        "&&&:active": {
+          backgroundColor: ownerState?.paletteColor?.activeOpacity,
+          outline: `1px solid ${ownerState?.paletteColor?.active}`,
+          outlineOffset: "-1px"
+        },
+        // Estado focus visible
+        "&:focus-visible": {
+          backgroundColor: ownerState?.paletteColor?.activeOpacity,
+          outline: "unset!important",
+          //efecto de selección
+          ...selectionEffect
+        }
+      },
+      // Variante Text
+      ...ownerState?.variant === "text" && {
+        "&&&": {
+          backgroundColor: "unset",
+          outline: "unset",
+          // Color del texto
+          [`& .${BUTTON_CLASSES.textButton}`]: {
+            color: ownerState?.paletteColor?.semanticText
+          },
+          // Color de los adornos laterales
+          "& .M4LIcon-icon": {
+            backgroundColor: ownerState?.paletteColor?.semanticText
+          },
+          // Estado Hover
+          "&:hover": {
+            backgroundColor: ownerState?.paletteColor?.hoverOpacity,
+            boxShadow: "unset"
+          },
+          // Estado Active
+          "&:active": {
+            backgroundColor: ownerState?.paletteColor?.activeOpacity
+          },
+          // Estado focus visible
+          "&:focus-visible": {
+            backgroundColor: ownerState?.paletteColor?.activeOpacity,
+            //efecto de selección
+            ...selectionEffect
+          }
+        }
+      },
+      // Estado deshabilitado
+      "&:disabled": {
+        "&&&": {
+          backgroundColor: "unset",
+          // Color del texto
+          [`& .${BUTTON_CLASSES.textButton}`]: {
+            color: theme.vars.palette.text.disabled
+          },
+          // Color de los adornos laterales
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette.text.disabled
+          }
+        }
+      },
+      // Overrides
+      "& span": {
+        margin: "0px"
+      },
+      // Configuración de achura completa
+      ...ownerState?.fullWidth && {
+        width: "100%",
+        maxWidth: "unset",
+        minWidth: "unset"
       }
-    ),
-    ...ownerState?.fullWidth && {
-      width: "100%",
-      maxWidth: "unset",
-      minWidth: "unset"
-    }
-  }),
+    };
+  },
   /**
    * Styles for the text of the button component.
    */
@@ -99,15 +181,6 @@ const buttonStyles = {
       display: "block",
       overflow: "hidden",
       textOverflow: "ellipsis"
-    },
-    ...ownerState.variant === "contained" && {
-      color: ownerState.color === "default" ? ownerState.paletteColor?.semanticText : ownerState.paletteColor?.contrastText
-    },
-    ...(ownerState?.variant === "outlined" || ownerState?.variant === "text") && {
-      color: ownerState?.paletteColor?.semanticText
-    },
-    ...ownerState?.disabled && {
-      color: theme.vars.palette.text.disabled
     }
   }),
   /**

package/components/mui_extended/Button/{constans.d.ts → constants.d.ts}

@@ -6,3 +6,4 @@
  * @default 'M4LButton'
  */
 export declare const BUTTON_KEY_COMPONENT = "M4LButton";
+export declare const BUTTON_CLASSES: Record<"buttonRoot" | "skeletonButton" | "buttonIcon" | "textButton", string>;

package/components/mui_extended/Button/constants.js

@@ -0,0 +1,8 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { B as ButtonSlots } from "./slots/ButtonEnum.js";
+const BUTTON_KEY_COMPONENT = "M4LButton";
+const BUTTON_CLASSES = getComponentClasses(BUTTON_KEY_COMPONENT, ButtonSlots);
+export {
+  BUTTON_CLASSES as B,
+  BUTTON_KEY_COMPONENT as a
+};

package/components/mui_extended/Button/slots/ButtonSlots.js

@@ -1,7 +1,7 @@
 import { Button } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { b as buttonStyles } from "../ButtonStyles.js";
-import { B as BUTTON_KEY_COMPONENT } from "../constans.js";
+import { a as BUTTON_KEY_COMPONENT } from "../constants.js";
 import { B as ButtonSlots } from "./ButtonEnum.js";
 import { S as Skeleton } from "../../Skeleton/Skeleton.js";
 import { T as Typography } from "../../Typography/Typography.js";

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

@@ -1,6 +1,6 @@
 import { ButtonProps as MUIButtonProps, PaletteColor, Theme } from '@mui/material';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
-import { BUTTON_KEY_COMPONENT } from './constans';
+import { BUTTON_KEY_COMPONENT } from './constants';
 import { ButtonSlots } from './slots/ButtonEnum';
 import { ComponentPalletColor, Sizes } from '@m4l/styles';
 import { ReactNode } from 'react';

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

@@ -2,4 +2,4 @@ export declare const ICON_BUTTON_KEY_COMPONENT = "M4LIconButton";
 /**
  * Inventario de clases CSS para el componente TextField
  */
-export declare const ICON_BUTTON_CLASSES: Record<string, string>;
+export declare const ICON_BUTTON_CLASSES: Record<"text" | "selected" | "contained" | "skeleton" | "icon" | "outline" | "styledMUIIconButton" | "badgeIconButton", string>;

package/components/mui_extended/IconButton/constants.js

@@ -2,7 +2,10 @@ import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js
 import { I as IconButtonSlots } from "./slots/IconButtonEnum.js";
 const ICON_BUTTON_KEY_COMPONENT = "M4LIconButton";
 const IconButtonComplementaryClasses = {
-  selected: "selected"
+  selected: "selected",
+  contained: "contained",
+  outline: "outline",
+  text: "text"
 };
 const IconButtonCombineClasses = {
   ...IconButtonSlots,

package/components/mui_extended/MenuItem/MenuItem.js

@@ -69,7 +69,7 @@ const MenuItem = (props) => {
         "data-testid": "SkeletonMenuItem",
         width: skeletonWidth,
         ownerState: { ...ownerState },
-        className: MENUITEM_CLASSES.skeleton
+        className: MENUITEM_CLASSES.skeletonMenuItem
       }
     );
   }

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

@@ -9,4 +9,4 @@ export declare const MENUITEM_KEY_COMPONENT = "M4LMenuItem";
 /**
  * Inventario de clases CSS para el componente MenuItem
  */
-export declare const MENUITEM_CLASSES: Record<string, string>;
+export declare const MENUITEM_CLASSES: Record<"root" | "menuItemIcon" | "menuItemIconChecked" | "menuItemContainer" | "skeletonMenuItem" | "menuItemTypography", string>;

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

@@ -11,4 +11,4 @@ export declare const NAV_LINK_SPECIFY = "M4lclassCssSpecificity";
 /**
  * Inventario de clases CSS para el componente Typography.
  */
-export declare const classNavLinkRoot: Record<string, string>;
+export declare const classNavLinkRoot: Record<"root" | "typographyStyled" | "skeletonStyled" | "routerNavLinkStyled", string>;

package/components/mui_extended/Select/Select.js

@@ -91,7 +91,7 @@ const Select = forwardRef(
           {
             src: icon,
             size: adjustedSize,
-            className: SELECT_CLASSES.renderValueStartAdorment,
+            className: SELECT_CLASSES.adorment,
             disabled
           }
         );
@@ -201,7 +201,7 @@ const Select = forwardRef(
             return /* @__PURE__ */ jsx(
               MenuItemListStyled,
               {
-                className: SELECT_CLASSES.menuItemList,
+                className: SELECT_CLASSES.menuItem,
                 ownerState: { ...ownerState },
                 size: adjustedSize,
                 value: option.id,

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

@@ -28,4 +28,4 @@ export declare const COMBINATED_TEXTFIELD_ENUMS: {
 /**
  * Inventario de clases CSS para el componente Select
  */
-export declare const SELECT_CLASSES: Record<string, string>;
+export declare const SELECT_CLASSES: Record<"text" | "menuItem" | "outlined" | "root" | "adorment" | "menuItemNoOptions" | "renderValueContainer" | "arrowDown" | "renderValueTypography" | "labelOption" | "labelPlaceholer" | "skeletonSelect", string>;

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

@@ -15,4 +15,4 @@ export declare const COMBINATED_TEXTFIELD_ENUMS: {
 /**
  * Inventario de clases CSS para el componente TextField
  */
-export declare const TEXT_FIELD_CLASSES: Record<string, string>;
+export declare const TEXT_FIELD_CLASSES: Record<"text" | "contained" | "outlined" | "skeleton" | "root" | "readOnly" | "limitContainer" | "limitTextFirst" | "limitTextSeparator" | "limitTextSecond", string>;

package/components/mui_extended/Tooltip/Tooltip.styles.js

@@ -23,7 +23,14 @@ const tooltipStyles = {
     padding: theme.vars.size.baseSpacings.sp2,
     borderRadius: theme.vars.size.borderRadius.r1,
     boxShadow: theme.vars.customShadows.z3,
-    ".MuiTooltip-arrow": {
+    "&.MuiTooltip-tooltipPlacementLeft .MuiTooltip-arrow": {
+      marginRight: "-0.6em"
+    },
+    "&.MuiTooltip-tooltipPlacementTop .MuiTooltip-arrow": {
+      marginBottom: "-0.6em"
+    },
+    "&&& .MuiTooltip-arrow": {
+      overflow: "visible",
       "&::before": {
         backgroundColor: theme.vars.palette.background.contrastDefault,
         borderRadius: theme.vars.size.borderRadius["r1"],

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

@@ -2,7 +2,7 @@ export declare const TOOLTIP_KEY_COMPONENT = "M4LTooltip";
 /**
  * Clases del componente Tooltip
  */
-export declare const TOOLTIP_CLASSES: Record<string, string>;
+export declare const TOOLTIP_CLASSES: Record<"text" | "tooltip" | "root", string>;
 /**
  * Desplazamiento predeterminado del tooltip (X, Y)
  */

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

@@ -10,7 +10,7 @@ export declare const TYPOGRAPHY_CLASS_NAME_SPECIFY = "M4lclassCssSpecificity";
 /**
  * Inventario de clases CSS para el componente Typography.
  */
-export declare const TYPOGRAPHY_CLASSES: Record<string, string>;
+export declare const TYPOGRAPHY_CLASSES: Record<"skeleton" | "root", string>;
 export declare const TYPOGRAPHY_FONTS: {
     Inter: string;
     Jura: string;

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

@@ -3,7 +3,7 @@ import { Sizes, TypographyVariants } from '@m4l/styles';
 import { TypographySlots } from './slots/typographyEnum';
 import { TYPOGRAPHY_KEY_COMPONENT } from './constants';
 import { M4LOverridesStyleRules } from '../../../@types/augmentations';
-import { DeepKeyOf } from 'src/utils/types';
+import { DeepKeyOf } from '../../../utils/types';
 /**
  * Define los colores de tipografía disponibles para el componente.
  */

package/contexts/AppearanceComponentContext/AppearanceComponentContext.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, useRef } from "react";
+import { createContext, useRef, useEffect } from "react";
 import { DEFAULT_SIZE } from "@m4l/styles";
 import { c as createAppearanceComponentStore } from "./AppearanceComponentStore.js";
 const AppearanceComponentContext = createContext(null);
@@ -12,6 +12,11 @@ function AppearanceComponentProvider(props) {
       storeId
     }, storeDevtoolsEnabled);
   }
+  useEffect(() => {
+    if (appearanceComponentStoreRef.current && defaultSize) {
+      appearanceComponentStoreRef.current.getState().actions.setDefaultSize(defaultSize);
+    }
+  }, [defaultSize]);
   return /* @__PURE__ */ jsx(AppearanceComponentContext.Provider, { value: appearanceComponentStoreRef.current, children });
 }
 export {

package/index.js

@@ -164,7 +164,8 @@ import { g as g22 } from "./components/LoadingError/dictionary.js";
 import { g as g23 } from "./components/MenuActions/dictionary.js";
 import { a as a9, M as M3 } from "./components/MenuActions/MenuActions.js";
 import { M as M4 } from "./components/MFIsolationApp/MFIsolationApp.js";
-import { M as M5 } from "./components/MFLoader/MFLoader.js";
+import { M as M5 } from "./components/MFIsolationAppStorybook/MFIsolationAppStorybook.js";
+import { M as M6 } from "./components/MFLoader/MFLoader.js";
 import { g as g24 } from "./components/MFLoader/dictionary.js";
 import { I as I6 } from "./components/ImageText/ImageText.js";
 import { N as N4 } from "./components/NoItemSelected/NoItemSelected.js";
@@ -187,12 +188,12 @@ import { T as T18 } from "./components/ToastContainer/subcomponents/ToastMessage
 import { W as W2 } from "./components/WindowBase/WindowBase.js";
 import { u as u14 } from "./components/WindowBase/hooks/useWindowToolsMF/index.js";
 import { u as u15, a as a11 } from "./components/WindowBase/hooks/useDynamicMFParameters/index.js";
-import { M as M6, W as W3, a as a12 } from "./components/WindowBase/contexts/WindowToolsMFContext/WindowToolsMFContext.js";
+import { M as M7, W as W3, a as a12 } from "./components/WindowBase/contexts/WindowToolsMFContext/WindowToolsMFContext.js";
 import { c as c3 } from "./components/WindowBase/contexts/DynamicMFParmsContext/store.js";
-import { D as D10, a as a13, M as M7 } from "./components/WindowBase/contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
+import { D as D10, a as a13, M as M8 } from "./components/WindowBase/contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
 import { W as W4 } from "./components/WindowConfirm/WindowConfirm.js";
 import { a as a14, g as g28 } from "./components/ModalDialog/dictionary.js";
-import { M as M8 } from "./components/ModalDialog/ModalDialog.js";
+import { M as M9 } from "./components/ModalDialog/ModalDialog.js";
 import { S as S10 } from "./components/SettingsLayout/SettingsLayout.js";
 import { P as P13 } from "./components/Pager/Pager.js";
 import { u as u16 } from "./components/Stepper/hooks/useStepper/index.js";
@@ -212,7 +213,7 @@ import { F as F3, R as R23, u as u17 } from "./components/hook-form/RHFormContex
 import { g as g30 } from "./components/hook-form/RHFormContext/dictionary.js";
 import { u as u18 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
 import { A as A16 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
-import { a as a15, M as M9 } from "./contexts/ModalContext/index.js";
+import { a as a15, M as M10 } from "./contexts/ModalContext/index.js";
 import { u as u19 } from "./hooks/useFormAddEdit/index.js";
 import { u as u20 } from "./hooks/useModal/index.js";
 import { u as u21 } from "./hooks/useTab/index.js";
@@ -322,14 +323,15 @@ export {
   L10 as LoadingError,
   L as LoadingScreen,
   M4 as MFIsolationApp,
-  M5 as MFLoader,
-  M7 as MemonizedDynamicMFParmsProvider,
+  M5 as MFIsolationAppStorybook,
+  M6 as MFLoader,
+  M8 as MemonizedDynamicMFParmsProvider,
   a9 as MemonizedMenuActions,
-  M6 as MemonizedWindowToolsMFContext,
+  M7 as MemonizedWindowToolsMFContext,
   M3 as MenuActions,
   a15 as ModalContext,
-  M8 as ModalDialog,
-  M9 as ModalProvider,
+  M9 as ModalDialog,
+  M10 as ModalProvider,
   M as MotionContainer,
   M2 as MotionLazyContainer,
   N2 as NavLink,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.19-BE093025-beta.1",
+  "version": "9.3.19-BE101025-beta.2",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

package/utils/getComponentSlotRoot.d.ts

@@ -3,7 +3,9 @@
  * Esta función es utilizada para asignar un asignar un className a un componente
  */
 export declare function getComponentSlotRoot(componentKey: string): string;
+type ComponentSlots = Record<string, string> | readonly string[];
 /**
  * Función para construir el nombre del slot para className de un componente.
  */
-export declare const getComponentClasses: <T extends Record<string, string> | string[]>(componentName: string, slotList: T) => Record<string, string>;
+export declare const getComponentClasses: <T extends ComponentSlots>(componentName: string, slotList: T) => T extends readonly string[] ? Record<T[number], string> : Record<keyof T, string>;
+export {};

package/components/mui_extended/Button/constans.js

@@ -1,4 +0,0 @@
-const BUTTON_KEY_COMPONENT = "M4LButton";
-export {
-  BUTTON_KEY_COMPONENT as B
-};