@m4l/components 9.3.2-B04082025-beta.3 → 9.3.2-B11082025-beta.2

package/components/SettingsLayout/subcomponents/SettingsLayoutBase/SettingsLayoutBase.js

@@ -0,0 +1,76 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { AnimatePresence } from "framer-motion";
+import { useModuleDictionary } from "@m4l/core";
+import { P as PATH_ICONS } from "../../icons.js";
+import { B as BackdropStyled, g as SettingsLayoutRootStyled, H as HeaderContainerStyled, T as TypographyStyled, h as HeaderActionsStyled, i as BodyContentStyled } from "../../slots/SettingsLayoutSlots.js";
+import { S as SettingDirection } from "../SettingDirection/SettingDirection.js";
+import { D as DICTIONARY } from "../../dictionary.js";
+import { useThemeSettingsStore } from "@m4l/graphics";
+import { b as SETTINGS_LAYOUT_CLASSES } from "../../constants.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
+import { S as SettingMode } from "../SettingMode/SettingMode.js";
+import { S as SettingColorPresets } from "../SettingColorPresets/SettingColorPresets.js";
+import { S as SettingFullscreen } from "../SettingFullscreen/SettingFullscreen.js";
+const SettingsLayoutBase = (props) => {
+  const {
+    open,
+    themeUserSettings,
+    settingsActions
+  } = useThemeSettingsStore((state) => state);
+  const { prefixPathIcon, width } = props;
+  const { themeDirection } = themeUserSettings;
+  const { onResetSetting, handleOpen } = settingsActions;
+  const { getLabel } = useModuleDictionary();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BackdropStyled,
+      {
+        ownerState: {},
+        open,
+        onClick: () => handleOpen()
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(SettingsLayoutRootStyled, { role: "form", "aria-label": "settings-layout", ownerState: { themeDirection, width }, className: SETTINGS_LAYOUT_CLASSES.root, children: [
+      /* @__PURE__ */ jsxs(HeaderContainerStyled, { ownerState: {}, className: SETTINGS_LAYOUT_CLASSES.headerContainer, children: [
+        /* @__PURE__ */ jsx(
+          TypographyStyled,
+          {
+            ownerState: {},
+            variant: "subtitleDens",
+            ellipsis: true,
+            children: getLabel(DICTIONARY.MODULE_NAME)
+          }
+        ),
+        /* @__PURE__ */ jsxs(HeaderActionsStyled, { children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              src: `${prefixPathIcon}/${PATH_ICONS.REFRESH}`,
+              onClick: onResetSetting,
+              role: "button",
+              "aria-label": "reset-setting"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              src: `${prefixPathIcon}/${PATH_ICONS.CLOSE}`,
+              onClick: () => handleOpen(),
+              role: "button",
+              "aria-label": "close-settings"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(BodyContentStyled, { ownerState: {}, children: [
+        /* @__PURE__ */ jsx(SettingMode, { prefixPathIcon }),
+        /* @__PURE__ */ jsx(SettingDirection, { prefixPathIcon }),
+        /* @__PURE__ */ jsx(SettingColorPresets, { prefixPathIcon }),
+        /* @__PURE__ */ jsx(SettingFullscreen, { prefixPathIcon })
+      ] })
+    ] }) })
+  ] });
+};
+export {
+  SettingsLayoutBase as S
+};

package/components/SettingsLayout/subcomponents/SettingsLayoutBase/index.d.ts

@@ -0,0 +1 @@
+export { SettingsLayoutBase } from './SettingsLayoutBase';

package/components/SettingsLayout/subcomponents/SettingsLayoutBase/index.js

@@ -0,0 +1 @@
+

package/components/SettingsLayout/subcomponents/SettingsLayoutBase/types.d.ts

@@ -0,0 +1,5 @@
+import { SettingsLayoutProps } from '../../types';
+export interface SettingsLayoutBaseProps {
+    prefixPathIcon: string;
+    width: SettingsLayoutProps['width'];
+}

package/components/SettingsLayout/test/SettingsLayout.test.d.ts

@@ -0,0 +1,18 @@
+export declare const mockThemeUserSettings: {
+    themeMode: string;
+    themeColor: string;
+    themeDirection: string;
+    themeLayout: string;
+    themeStretch: boolean;
+};
+export declare const mockSettingsActions: {
+    init: import('vitest').Mock<(...args: any[]) => any>;
+    onChangeMode: import('vitest').Mock<(...args: any[]) => any>;
+    onChangeColor: import('vitest').Mock<(...args: any[]) => any>;
+    onChangeDirection: import('vitest').Mock<(...args: any[]) => any>;
+    onChangeLayout: import('vitest').Mock<(...args: any[]) => any>;
+    onToggleStretch: import('vitest').Mock<(...args: any[]) => any>;
+    onResetSetting: import('vitest').Mock<(...args: any[]) => any>;
+    handleOpen: import('vitest').Mock<(...args: any[]) => any>;
+    setThemeSettings: import('vitest').Mock<(...args: any[]) => any>;
+};

package/components/SettingsLayout/types.d.ts

@@ -0,0 +1,47 @@
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { SettingsLayoutSlots } from './slots/SettingsLayoutEnum';
+import { SETTINGS_LAYOUT_COMPONENT_KEY } from './constants';
+import { Theme } from '@mui/material';
+import { Sizes, ThemeUserColor } from '@m4l/styles';
+import { ThemeSettingsStore } from '@m4l/graphics';
+export interface SettingsLayoutProps {
+    /**
+     * Propiedad que define el ancho del componente.
+     */
+    width?: number;
+    /**
+     * Medida de tamaño para el componente.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Nombre de clase css.
+     */
+    className?: string;
+    /**
+     * Identificador usado para pruebas del componente.
+     */
+    dataTestId?: string;
+}
+/**
+ * Tipo para las ranuras del componente.
+ * Este tipo se refiere a las claves dentro de `SettingsLayoutSlots`, que determinan los diferentes elementos
+ * estilizados dentro del componente, como el `root`, `backdrop`, etc.
+ */
+export type SettingsLayoutSlotsType = keyof typeof SettingsLayoutSlots;
+/**
+ * Combinación de las propiedades del componente y su estado propietario.
+ * Este tipo se utiliza para describir el estado completo del componente , incluyendo
+ * las propiedades pasadas al componente y el estado calculado.
+ */
+export interface SettingsLayoutOwnerState extends Pick<ThemeSettingsStore['themeUserSettings'], 'themeDirection'> {
+    width: SettingsLayoutProps['width'];
+    size: SettingsLayoutProps['size'];
+    color?: ThemeUserColor;
+    [key: string]: unknown;
+}
+/**
+ * Tipos de estilos para el componente.
+ * Esta interfaz extiende las reglas de estilo personalizadas para las ranuras del componente (`SettingsLayoutSlots`)
+ * y permite su sobrescritura.
+ */
+export type SettingsLayoutstyles = M4LOverridesStyleRules<SettingsLayoutSlots, typeof SETTINGS_LAYOUT_COMPONENT_KEY, Theme>;

package/components/SideBar/subcomponents/ContentComponent/style.js

@@ -142,6 +142,9 @@ const contentComponentStyles = {
     [`&.${CLASS_NAME_IS_ROOT}.${CLASS_NAME_MENU_ACTIVE}.${CLASS_NAME_ITEM_IN_TREE_ACTIVE} > .M4LSideBar-wrapperMenuItem`]: {
       backgroundColor: theme.vars.palette.primary.opacity
     },
+    [`&.${CLASS_NAME_IS_ROOT}.${CLASS_NAME_MENU_ACTIVE} > .M4LSideBar-wrapperMenuItem`]: {
+      backgroundColor: theme.vars.palette.primary.opacity
+    },
     [`&.${CLASS_NAME_IS_ROOT} > .M4LSideBar-wrapperMenuItem`]: {
       paddingRight: "7px",
       paddingTop: theme.vars.size.baseSpacings.sp1,

package/components/ToastContainer/ToastContainer.js

@@ -3,7 +3,6 @@ import { ToastContainer as ToastContainer$1 } from "react-toastify";
 import { D as DEFAULT_CLOSE_TIME, T as TOAST_KEY_COMPONENT } from "./constants.js";
 import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { ModuleSkeletonProvider } from "@m4l/core";
-import "react-toastify/dist/ReactToastify.min.css";
 import { R as RootStyled } from "./slots/toastContainerSlots.js";
 import { T as ToastContainerSlots } from "./slots/ToastContainerEnum.js";
 const ToastContainer = (props) => {

package/components/ToastContainer/ToastContainer.styles.js

@@ -1,132 +1,136 @@
+import { a as TOAST_NATIVE_STYLES } from "./constants.js";
 const toastStyles = {
   /** Root del componente ToastContainer */
   root: ({ theme, ownerState }) => ({
-    "--toastify-color-light": theme.vars.palette.background.default,
-    "--toastify-color-dark": theme.vars.palette.background.default,
-    "--toastify-color-info": theme.vars.palette.info.enabled,
-    "--toastify-color-success": theme.vars.palette.success.enabled,
-    "--toastify-color-warning": theme.vars.palette.warning.enabled,
-    "--toastify-color-error": theme.vars.palette.error.enabled,
-    "--toastify-color-transparent": "rgba(255, 255, 255, 0.7)",
-    "--toastify-icon-color-info": "var(--toastify-color-info)",
-    "--toastify-icon-color-success": "var(--toastify-color-success)",
-    "--toastify-icon-color-warning": "var(--toastify-color-warning)",
-    "--toastify-icon-color-error": "var(--toastify-color-error)",
-    "--toastify-toast-width": "320px",
-    "--toastify-toast-background": "#fff",
-    "--toastify-toast-min-height": "64px",
-    "--toastify-toast-max-height": "800px",
-    "--toastify-font-family": "sans-serif",
-    "--toastify-z-index": "9999",
-    "--toastify-text-color-light": "#757575",
-    "--toastify-text-color-dark": "#fff",
-    //Used only for colored theme
-    "--toastify-text-color-info": "#fff",
-    "--toastify-text-color-success": "#fff",
-    "--toastify-text-color-warning": "#fff",
-    "--toastify-text-color-error": "#fff",
-    "--toastify-spinner-color": "#616161",
-    "--toastify-spinner-color-empty-area": "#e0e0e0",
-    // Used when no type is provided
-    // toast("**hello**")
-    // '--toastify-color-progress-light': 'var(--toastify-color-info)',
-    // // Used when no type is provided
-    // '--toastify-color-progress-dark': 'var(--toastify-color-info)',
-    // '--toastify-color-progress-info': 'var(--toastify-color-info)',
-    // '--toastify-color-progress-success': 'var(--toastify-color-success)',
-    // '--toastify-color-progress-warning': 'var(--toastify-color-warning)',
-    // '--toastify-color-progress-error': 'var(--toastify-color-error)',
-    "--toastify-toast-bd-radius": "8px",
-    // used to control the opacity of the progress trail
-    "--toastify-color-progress-bgo": ".2",
-    ...ownerState?.fixed === false ? {
-      top: 0,
-      position: "absolute",
-      zIndex: theme.vars.zIndex.snackbar,
-      "@supports (position: sticky)": {
-        position: "sticky"
-      }
-    } : {},
-    "& .Toastify": {
-      margin: 0,
-      padding: 0,
-      height: 0
-    },
-    "& .Toastify__toast-container": {
-      display: "flex",
-      flexDirection: "column",
-      gap: "16px",
+    ...TOAST_NATIVE_STYLES,
+    "&&&": {
+      "--toastify-color-light": theme.vars.palette.background.default,
+      "--toastify-color-dark": theme.vars.palette.background.default,
+      "--toastify-color-info": theme.vars.palette.info.enabled,
+      "--toastify-color-success": theme.vars.palette.success.enabled,
+      "--toastify-color-warning": theme.vars.palette.warning.enabled,
+      "--toastify-color-error": theme.vars.palette.error.enabled,
+      "--toastify-color-transparent": "rgba(255, 255, 255, 0.7)",
+      "--toastify-icon-color-info": "var(--toastify-color-info)",
+      "--toastify-icon-color-success": "var(--toastify-color-success)",
+      "--toastify-icon-color-warning": "var(--toastify-color-warning)",
+      "--toastify-icon-color-error": "var(--toastify-color-error)",
+      "--toastify-toast-width": "320px",
+      "--toastify-toast-background": "#fff",
+      "--toastify-toast-min-height": "64px",
+      "--toastify-toast-max-height": "800px",
+      "--toastify-font-family": "sans-serif",
+      "--toastify-z-index": "9999",
+      "--toastify-text-color-light": "#757575",
+      "--toastify-text-color-dark": "#fff",
+      //Used only for colored theme
+      "--toastify-text-color-info": "#fff",
+      "--toastify-text-color-success": "#fff",
+      "--toastify-text-color-warning": "#fff",
+      "--toastify-text-color-error": "#fff",
+      "--toastify-spinner-color": "#616161",
+      "--toastify-spinner-color-empty-area": "#e0e0e0",
+      // Used when no type is provided
+      // toast("**hello**")
+      // '--toastify-color-progress-light': 'var(--toastify-color-info)',
+      // // Used when no type is provided
+      // '--toastify-color-progress-dark': 'var(--toastify-color-info)',
+      // '--toastify-color-progress-info': 'var(--toastify-color-info)',
+      // '--toastify-color-progress-success': 'var(--toastify-color-success)',
+      // '--toastify-color-progress-warning': 'var(--toastify-color-warning)',
+      // '--toastify-color-progress-error': 'var(--toastify-color-error)',
+      "--toastify-toast-bd-radius": "8px",
+      // used to control the opacity of the progress trail
+      "--toastify-color-progress-bgo": ".2",
       ...ownerState?.fixed === false ? {
-        top: "20px",
-        position: "absolute"
+        top: 0,
+        position: "absolute",
+        zIndex: theme.vars.zIndex.snackbar,
+        "@supports (position: sticky)": {
+          position: "sticky"
+        }
       } : {},
-      [theme.breakpoints.down(480)]: {
-        width: "100%",
-        minWidth: "100%",
-        padding: "0"
-      }
-    },
-    /** Used to define the position of the ToastContainer */
-    // '.Toastify__toast-container--top-left': {},
-    // '.Toastify__toast-container--top-center': {},
-    // '.Toastify__toast-container--top-right': {},
-    // '.Toastify__toast-container--bottom-left': {},
-    // '.Toastify__toast-container--bottom-center': {},
-    // '.Toastify__toast-container--bottom-right': {},
-    "& .Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > *": {
-      opacity: 0.2
-    },
-    /** Classes for the displayed toast */
-    "& .Toastify__toast": {
-      minHeight: "min-content",
-      margin: "0",
-      padding: "0",
-      backgroundColor: theme.vars.palette.background.default,
-      boxShadow: theme.customShadows?.z4,
-      borderRadius: "4px",
-      border: `1px solid ${theme.vars.palette.border.default}`,
-      [theme.breakpoints.down(480)]: {
-        margin: "1%",
-        width: "98% !important"
+      "& .Toastify": {
+        margin: 0,
+        padding: 0,
+        height: 0
+      },
+      "& .Toastify__toast-container": {
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px",
+        ...ownerState?.fixed === false ? {
+          top: "20px",
+          position: "absolute"
+        } : {},
+        [theme.breakpoints.down(480)]: {
+          width: "100%",
+          minWidth: "100%",
+          padding: "0"
+        }
+      },
+      /** Used to define the position of the ToastContainer */
+      // '.Toastify__toast-container--top-left': {},
+      // '.Toastify__toast-container--top-center': {},
+      // '.Toastify__toast-container--top-right': {},
+      // '.Toastify__toast-container--bottom-left': {},
+      // '.Toastify__toast-container--bottom-center': {},
+      // '.Toastify__toast-container--bottom-right': {},
+      "& .Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > *": {
+        opacity: 0.2
+      },
+      /** Classes for the displayed toast */
+      "& .Toastify__toast": {
+        minHeight: "min-content",
+        margin: "0",
+        padding: "0",
+        backgroundColor: theme.vars.palette.background.default,
+        boxShadow: theme.customShadows?.z4,
+        borderRadius: "4px",
+        border: `1px solid ${theme.vars.palette.border.default}`,
+        [theme.breakpoints.down(480)]: {
+          margin: "1%",
+          width: "98% !important"
+        }
+      },
+      ".Toastify__toast--rtl": {},
+      "& .Toastify__toast-body": {
+        margin: "0px",
+        padding: "0px"
+      },
+      /** Used to position the icon */
+      // '& .Toastify__toast-icon': {},
+      /** handle the notification color and the text color based on the theme */
+      // '& .Toastify__toast-theme--dark': {},
+      // '& .Toastify__toast-theme--light': {},
+      // '& .Toastify__toast-theme--colored.Toastify__toast--default': {},
+      // '& .Toastify__toast-theme--colored.Toastify__toast--info': {},
+      // '& .Toastify__toast-theme--colored.Toastify__toast--success': {},
+      // '& .Toastify__toast-theme--colored.Toastify__toast--warning': {},
+      // '& .Toastify__toast-theme--colored.Toastify__toast--error': {},
+      "& .Toastify__progress-bar--wrp": {
+        position: "absolute",
+        top: 0,
+        height: "2px",
+        borderTopLeftRadius: "2px",
+        borderTopRightRadius: "2px",
+        borderBottomLeftRadius: "0",
+        borderBottomRightRadius: "0",
+        overflow: "hidden"
+      },
+      "& .Toastify__progress-bar": {
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "0",
+        borderBottomRightRadius: "0"
       }
-    },
-    ".Toastify__toast--rtl": {},
-    "& .Toastify__toast-body": {
-      margin: "0px",
-      padding: "0px"
-    },
-    /** Used to position the icon */
-    // '& .Toastify__toast-icon': {},
-    /** handle the notification color and the text color based on the theme */
-    // '& .Toastify__toast-theme--dark': {},
-    // '& .Toastify__toast-theme--light': {},
-    // '& .Toastify__toast-theme--colored.Toastify__toast--default': {},
-    // '& .Toastify__toast-theme--colored.Toastify__toast--info': {},
-    // '& .Toastify__toast-theme--colored.Toastify__toast--success': {},
-    // '& .Toastify__toast-theme--colored.Toastify__toast--warning': {},
-    // '& .Toastify__toast-theme--colored.Toastify__toast--error': {},
-    "& .Toastify__progress-bar--wrp": {
-      position: "absolute",
-      top: 0,
-      height: "2px",
-      borderTopLeftRadius: "2px",
-      borderTopRightRadius: "2px",
-      borderBottomLeftRadius: "0",
-      borderBottomRightRadius: "0",
-      overflow: "hidden"
-    },
-    "& .Toastify__progress-bar": {
-      borderTopLeftRadius: "2px",
-      borderBottomLeftRadius: "0",
-      borderBottomRightRadius: "0"
+      // '& .Toastify__progress-bar--rtl': {},
+      // '& .Toastify__progress-bar-theme--light': {},
+      // '& .Toastify__progress-bar-theme--dark': {},
+      // '& .Toastify__progress-bar--info': {},
+      // '& .Toastify__progress-bar--success': {},
+      // '& .Toastify__progress-bar--warning': {},
+      // '& .Toastify__progress-bar--error': {},
     }
-    // '& .Toastify__progress-bar--rtl': {},
-    // '& .Toastify__progress-bar-theme--light': {},
-    // '& .Toastify__progress-bar-theme--dark': {},
-    // '& .Toastify__progress-bar--info': {},
-    // '& .Toastify__progress-bar--success': {},
-    // '& .Toastify__progress-bar--warning': {},
-    // '& .Toastify__progress-bar--error': {},
   }),
   /** 📦 Contenedor Principal del Toast 📦 */
   messageRoot: ({ theme }) => ({