@m4l/components 9.2.62-B07072025beta.1 → 9.2.62-B08072025beta.1

package/components/AppBar/AppBar.js

@@ -35,7 +35,7 @@ const AppBar = (props) => {
           {
             src: `${host_static_assets}/${environment_assets}/${PATH_IMG_HAMBURGUER}`,
             onClick: onToggleAnchored,
-            rotationAngle: sidebarAnchored ? 180 : 0,
+            rotationAngle: sidebarAnchored ? 0 : 180,
             variant: "outline",
             role: "anchored-button"
           }

package/components/AppBar/constants.d.ts

@@ -1,2 +1,2 @@
 export declare const APP_BAR_KEY = "M4LAppBar";
-export declare const PATH_IMG_HAMBURGUER = "frontend/components/settings/assets/icons/options.svg";
+export declare const PATH_IMG_HAMBURGUER = "frontend/components/sidebar/assets/icons/panel-left-close.svg";

package/components/AppBar/constants.js

@@ -1,5 +1,5 @@
 const APP_BAR_KEY = "M4LAppBar";
-const PATH_IMG_HAMBURGUER = "frontend/components/settings/assets/icons/options.svg";
+const PATH_IMG_HAMBURGUER = "frontend/components/sidebar/assets/icons/panel-left-close.svg";
 export {
   APP_BAR_KEY as A,
   PATH_IMG_HAMBURGUER as P

package/components/SideBar/constants.d.ts

@@ -4,7 +4,7 @@ export declare const CONTAINER_BTN_ANCHORED = "M4LSideBarButtonAnchored";
 export declare const LIST_MENU_ITEM = "M4LListMenuItem";
 export declare const PATH_ICONS = "/frontend/domain/microfrontends/";
 export declare const PATH_ARROW_DOWN_ICON = "frontend/components/sidebar/assets/icons/ChevronRight.svg";
-export declare const PATH_ARROW_RIGHT_ICON = "frontend/components/sidebar/assets/icons/arrow_right.svg";
+export declare const PATH_ARROW_RIGHT_ICON = "frontend/components/sidebar/assets/icons/panel-left-close.svg";
 export declare const ALL_SIDEBAR_SLOTS: {
     contentComponentRoot: ContentComponentSlots.contentComponentRoot;
     containerTreeItemsHeaderFooter: ContentComponentSlots.containerTreeItemsHeaderFooter;

package/components/SideBar/constants.js

@@ -2,7 +2,7 @@ import { C as ContentComponentSlots, S as SideBarFooterSlots, H as HeaderSidebar
 const SIDEBAR_KEY_COMPONENT = "M4LSideBar";
 const PATH_ICONS = "/frontend/domain/microfrontends/";
 const PATH_ARROW_DOWN_ICON = "frontend/components/sidebar/assets/icons/ChevronRight.svg";
-const PATH_ARROW_RIGHT_ICON = "frontend/components/sidebar/assets/icons/arrow_right.svg";
+const PATH_ARROW_RIGHT_ICON = "frontend/components/sidebar/assets/icons/panel-left-close.svg";
 const ALL_SIDEBAR_SLOTS = {
   ...SideBarDesktopSlots,
   ...SideBarMobileSlots,
@@ -21,8 +21,8 @@ export {
   PATH_ICONS as P,
   SIDEBAR_KEY_COMPONENT as S,
   CLASS_NAME_MENU_ACTIVE as a,
-  CLASS_NAME_ITEM_IN_TREE_ACTIVE as b,
-  PATH_ARROW_RIGHT_ICON as c,
-  PATH_ARROW_DOWN_ICON as d,
-  CLASS_NAME_HAS_CHILDREN as e
+  CLASS_NAME_HAS_CHILDREN as b,
+  CLASS_NAME_ITEM_IN_TREE_ACTIVE as c,
+  PATH_ARROW_RIGHT_ICON as d,
+  PATH_ARROW_DOWN_ICON as e
 };

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

@@ -1,6 +1,5 @@
-import { C as CLASS_NAME_IS_ROOT, a as CLASS_NAME_MENU_ACTIVE, b as CLASS_NAME_ITEM_IN_TREE_ACTIVE } from "../../constants.js";
+import { C as CLASS_NAME_IS_ROOT, a as CLASS_NAME_MENU_ACTIVE, b as CLASS_NAME_HAS_CHILDREN, c as CLASS_NAME_ITEM_IN_TREE_ACTIVE } from "../../constants.js";
 import { g as getTypographyStyles } from "../../../../utils/getTypographyStyles.js";
-import { g as getSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
 const contentComponentStyles = {
   /**
    * Estilos del contenedor principal del sidebar
@@ -32,23 +31,26 @@ const contentComponentStyles = {
       paddingRight: "unset"
     },
     '& [class*="M4LMenuItem-root"], & [class*="M4LMenuItem-skeletonMenuItem"]': {
-      ...getSizeStyles(
-        theme,
-        ownerState?.size || "medium",
-        "container",
-        (size) => ({
-          height: size,
-          minHeight: size,
-          maxHeight: size
-        })
-      )
+      height: "fit-content"
     },
     "& .M4LMenuItem-root": {
       border: "unset",
+      paddingTop: theme.vars.size.baseSpacings.sp2,
+      paddingBottom: theme.vars.size.baseSpacings.sp2,
       paddingLeft: theme.vars.size.baseSpacings.sp2,
       paddingRight: theme.vars.size.baseSpacings.sp2,
+      borderRadius: theme.vars.size.borderRadius["r1-5"],
+      '& [class*="M4LMenuItem-menuItemContainer"]': {
+        gap: theme.vars.size.baseSpacings["sp2-5"],
+        overflow: "visible"
+      },
+      "&.menu-active": {
+        "& .M4LTypography-root": {
+          color: theme.vars.palette.primary.semanticText
+        }
+      },
       "& .M4LTypography-root": {
-        paddingLeft: `${theme.vars.size.baseSpacings.sp2} !important`,
+        paddingLeft: 0,
         ...getTypographyStyles(
           theme.generalSettings.isMobile,
           ownerState?.size || "medium",
@@ -61,7 +63,7 @@ const contentComponentStyles = {
    * Contenedor que contiene grupo menu item desplegable.
    */
   containerNodeMenuItem: ({ theme }) => ({
-    marginLeft: "22px",
+    marginLeft: theme.vars.size.baseSpacings.sp6,
     display: "flex",
     flexDirection: "column",
     overflow: "visible",
@@ -79,6 +81,19 @@ const contentComponentStyles = {
       background: theme.vars.palette.text.primary
     },
     [`& > .M4LMenuItem-root:not(.${CLASS_NAME_IS_ROOT}).${CLASS_NAME_MENU_ACTIVE}`]: {
+      [`&.${CLASS_NAME_HAS_CHILDREN}`]: {
+        '& [class*="M4LMenuItem-menuItemContainer"]:before': {
+          content: '""',
+          borderLeft: "3px solid",
+          borderColor: theme.vars.palette.background.default,
+          width: "3px",
+          height: "50%",
+          bottom: 0,
+          position: "absolute",
+          left: "-5px",
+          zIndex: 1
+        }
+      },
       "&::before": {
         content: '""',
         position: "absolute",
@@ -86,26 +101,28 @@ const contentComponentStyles = {
         height: "5px",
         top: "50%",
         transform: "translateY(-50%)",
-        left: "-3px",
-        borderRadius: "50%",
+        left: "-6px",
+        borderRadius: theme.vars.size.borderRadius["r0-5"],
         backgroundColor: theme.vars.palette.primary.focus,
-        zIndex: 1
+        zIndex: 2
       },
       "&::after": {
         content: '""',
         position: "absolute",
         width: "1px",
-        top: "5px",
-        bottom: "5px",
-        left: "-1px",
-        backgroundImage: `linear-gradient(to bottom, 
-        ${theme.vars.palette.primary.opacityGradient2}, 
-        ${theme.vars.palette.primary.opacityGradient1},
-        ${theme.vars.palette.primary.opacityGradient2})`
+        top: "0px",
+        bottom: "0px",
+        left: "-4px",
+        backgroundImage: `linear-gradient(180deg, 
+        transparent 0%,
+        ${theme.vars.palette.primary.opacityGradient1} 50%,
+        transparent 100%)`
       }
     },
     [`& > .M4LMenuItem-root.${CLASS_NAME_IS_ROOT}.${CLASS_NAME_MENU_ACTIVE}`]: {
-      backgroundColor: theme.vars.palette.primary.opacity
+      backgroundColor: theme.vars.palette.primary.opacity,
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0
     },
     "& .MuiCollapse-wrapperInner": {
       display: "flex",
@@ -117,16 +134,16 @@ const contentComponentStyles = {
         content: '""',
         position: "absolute",
         width: "1px",
-        top: "0",
-        bottom: "0",
-        left: "-1px",
+        top: "-4px",
+        bottom: "-4px",
+        left: "-4px",
         backgroundColor: theme.vars.palette.background.default,
         zIndex: 1
       }
     },
     [`&.${CLASS_NAME_IS_ROOT}.${CLASS_NAME_MENU_ACTIVE}`]: {
       backgroundColor: theme.vars.palette.background.default,
-      borderRadius: theme.vars.size.borderRadius["r1-5"],
+      borderRadius: theme.vars.size.borderRadius.r2,
       border: theme.vars.size.borderStroke.container,
       borderColor: theme.vars.palette.primary.selectedOpacity,
       boxShadow: theme.vars.customShadows.z2,
@@ -141,7 +158,7 @@ const contentComponentStyles = {
       width: "1px",
       top: "5px",
       bottom: "5px",
-      left: "21px",
+      left: "20px",
       borderLeft: theme.vars.size.borderStroke.container,
       borderColor: theme.vars.palette.border.secondary,
       zIndex: 1
@@ -157,6 +174,9 @@ const contentComponentStyles = {
    * Estilos del menu item principal.
    */
   menuItemMain: ({ theme, ownerState }) => ({
+    "& .M4LSideBar-containerArrowIconRoot": {
+      marginLeft: "unset"
+    },
     "&&& .M4LTypography-root": {
       ...getTypographyStyles(
         theme.generalSettings.isMobile,

package/components/SideBar/subcomponents/HeaderComponent/HeaderComponent.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { u as useSideBar } from "../../hooks/useSideBar/index.js";
 import { H as HeaderContainerComponentStyled, B as ButtonAnchoredStyled } from "../../slots/SideBarSlots.js";
 import { useEnvironment } from "@m4l/core";
-import { c as PATH_ARROW_RIGHT_ICON } from "../../constants.js";
+import { d as PATH_ARROW_RIGHT_ICON } from "../../constants.js";
 import { useIsMobile } from "@m4l/graphics";
 const HeaderComponent = () => {
   const {
@@ -24,7 +24,7 @@ const HeaderComponent = () => {
       {
         icon: `${host_static_assets}/${environment_assets}/${PATH_ARROW_RIGHT_ICON}`,
         onClick: handleToggleAnchored,
-        rotationAngle: anchored ? 180 : 0,
+        rotationAngle: anchored ? 0 : 180,
         className: classes.buttonAnchored,
         variant: "outline",
         role: "anchored-button"

package/components/SideBar/subcomponents/HeaderComponent/styles.js

@@ -11,6 +11,7 @@ const headerComponentStyles = {
     gap: theme.vars.size.baseSpacings.sp3,
     paddingLeft: theme.vars.size.baseSpacings.sp4,
     paddingRight: theme.vars.size.baseSpacings.sp4,
+    paddingBottom: theme.vars.size.baseSpacings.sp3,
     transition: "all 0.5s",
     "& > div": {
       transition: "all 0.5s"

package/components/SideBar/subcomponents/SideBarDesktop/styles.js

@@ -21,7 +21,7 @@ const sideBarDesktopStyles = {
     height: "100%",
     width: "100%",
     overflow: "visible",
-    borderRight: `1px solid ${theme.vars.palette.border.default}`,
+    borderRight: `1px solid ${theme.vars.palette.border.secondary}`,
     inset: 0,
     //add hover effect
     zIndex: 999

package/components/SideBar/subcomponents/TreeGroupItems/styles.js

@@ -13,6 +13,7 @@ const contentGroupStyles = {
     alignItems: "center",
     justifyContent: ownerState?.noItems ? "center" : "flex-start",
     transition: "all 0.5s",
+    paddingTop: theme.vars.size.baseSpacings.sp3,
     paddingLeft: theme.vars.size.baseSpacings.sp4,
     paddingRight: theme.vars.size.baseSpacings.sp4,
     gap: theme.vars.size.baseSpacings.sp4,
@@ -78,22 +79,31 @@ const contentGroupStyles = {
   containerAdornmentIcon: ({ theme, ownerState }) => ({
     overflow: "hidden",
     borderRadius: theme.vars.size.borderRadius["r1-5"],
-    padding: "1px",
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
     position: "relative",
-    ...getSizeStyles(
-      theme,
-      ownerState?.size || "medium",
-      "action",
-      (sizeValue) => ({
-        width: sizeValue,
-        height: sizeValue,
-        minWidth: sizeValue,
-        minHeight: sizeValue
-      })
-    ),
+    width: "fit-content",
+    height: "fit-content",
+    padding: "1px",
+    "& .M4LIcon-root": {
+      width: "fit-content",
+      height: "fit-content",
+      padding: theme.vars.size.baseSpacings["sp0-5"],
+      "& .M4LIcon-icon": {
+        ...getSizeStyles(
+          theme,
+          ownerState?.size || "medium",
+          "case",
+          (sizeValue) => ({
+            width: `${sizeValue}!important`,
+            height: `${sizeValue}!important`,
+            minWidth: `${sizeValue}!important`,
+            minHeight: `${sizeValue}!important`
+          })
+        )
+      }
+    },
     ...ownerState?.variant !== "itemActive" && ownerState?.variant !== "normal" && {
       "& .M4LIcon-icon": {
         backgroundColor: `${theme.vars.palette.chips.persianGreen.contained.colorTone}!important`
@@ -111,6 +121,7 @@ const contentGroupStyles = {
       backgroundColor: theme.vars.palette.primary.enabled
     },
     ...ownerState?.variant === "itemActive" && {
+      boxShadow: theme.vars.customShadows.primary2,
       background: `linear-gradient(to bottom, 
       ${theme.vars.palette.primary.opacityGradient1}, 
       ${theme.vars.palette.primary.opacityGradient2})`,

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/ArrowIcon/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useEnvironment } from "@m4l/core";
 import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
 import { g as getNameDataTestId } from "../../../../tests/utils.js";
-import { d as PATH_ARROW_DOWN_ICON } from "../../../../constants.js";
+import { e as PATH_ARROW_DOWN_ICON } from "../../../../constants.js";
 import { k as ContainerArrowIconRootStyled } from "../../../../slots/SideBarSlots.js";
 import { u as useSideBar } from "../../../../hooks/useSideBar/index.js";
 import { I as Icon } from "../../../../../Icon/Icon.js";

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/index.js

@@ -6,7 +6,7 @@ import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
 import { g as getNameDataTestId } from "../../../../tests/utils.js";
 import { A as ArrowIcon } from "../ArrowIcon/index.js";
 import { l as ContainerNodeMenuItemStyled } from "../../../../slots/SideBarSlots.js";
-import { a as CLASS_NAME_MENU_ACTIVE, b as CLASS_NAME_ITEM_IN_TREE_ACTIVE, e as CLASS_NAME_HAS_CHILDREN } from "../../../../constants.js";
+import { a as CLASS_NAME_MENU_ACTIVE, c as CLASS_NAME_ITEM_IN_TREE_ACTIVE, b as CLASS_NAME_HAS_CHILDREN } from "../../../../constants.js";
 import { useModuleSkeleton } from "@m4l/core";
 import { A as AdornmentIcon } from "../AdormentIcon/AdormentIcon.js";
 import { u as useCollapse } from "../../../../hooks/useCollapse/useCollapse.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.62-B07072025beta.1",
+  "version": "9.2.62-B08072025beta.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.0.0",
-    "@m4l/styles": "7.0.0-B07072025beta.1",
+    "@m4l/graphics": "7.1.2-B08072025beta.1",
+    "@m4l/styles": "7.1.30-B08072025beta.1",
     "@microlink/react-json-view": "^1.23.3",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",

package/utils/getSizeStyles/getSizeStyles.d.ts

@@ -24,4 +24,4 @@ export declare const getHeightSizeStyles: (isMobile: boolean, size: Extract<Size
  * @param property - Propiedad CSS que se desea aplicar (por defecto es 'height').
  * @returns Objeto con los estilos calculados.
  */
-export declare const getSizeStyles: (theme: Theme, size: Extract<Sizes, "small" | "medium">, variantSize: SizesComponentsTypes, css?: Record<string, any> | ((sizeValue: string | number) => Record<string, any>), property?: "height" | "width") => any;
+export declare const getSizeStyles: (theme: Theme, size: Sizes, variantSize: SizesComponentsTypes, css?: Record<string, any> | ((sizeValue: string | number) => Record<string, any>), property?: "height" | "width") => any;