@m4l/components 9.2.62-B10072025beta.1 → 9.2.62-B11072025beta.1

package/components/Chip/ChipStyles.js

@@ -43,7 +43,7 @@ const chipStyles = {
       display: "flex",
       alignItems: "center",
       padding: theme.vars.size.baseSpacings.sp1,
-      borderRadius: theme.vars.size.borderRadius["r0-5"],
+      borderRadius: theme.vars.size.borderRadius["r1-5"],
       gap: theme.vars.size.baseSpacings["sp0-5"],
       width: "max-content",
       cursor: "pointer",

package/components/SideBar/constants.d.ts

@@ -21,6 +21,7 @@ export declare const ALL_SIDEBAR_SLOTS: {
     containerContentItem: ContentGroupsSlots.containerContentItem;
     containerArrowIconRoot: ContentGroupsSlots.containerArrowIconRoot;
     containerAdornmentIcon: ContentGroupsSlots.containerAdornmentIcon;
+    wrapperMenuItem: ContentGroupsSlots.wrapperMenuItem;
     backgroundAdornmentIcon: ContentGroupsSlots.backgroundAdornmentIcon;
     containerSideBarMobile: SideBarMobileSlots.containerSideBarMobile;
     containerDesktopRoot: SideBarDesktopSlots.containerDesktopRoot;

package/components/SideBar/constants.js

@@ -22,9 +22,9 @@ export {
   PATH_ICONS as P,
   SIDEBAR_KEY_COMPONENT as S,
   CLASS_NAME_MENU_ACTIVE as a,
-  CLASS_NAME_HAS_CHILDREN as b,
-  CLASS_NAME_ITEM_CLOSED as c,
-  CLASS_NAME_ITEM_IN_TREE_ACTIVE as d,
+  CLASS_NAME_ITEM_IN_TREE_ACTIVE as b,
+  CLASS_NAME_HAS_CHILDREN as c,
+  CLASS_NAME_ITEM_CLOSED as d,
   PATH_ARROW_RIGHT_ICON as e,
   PATH_ARROW_DOWN_ICON as f
 };

package/components/SideBar/slots/SideBarEnum.d.ts

@@ -13,6 +13,7 @@ export declare enum ContentGroupsSlots {
     containerContentItem = "containerContentItem",
     containerArrowIconRoot = "containerArrowIconRoot",
     containerAdornmentIcon = "containerAdornmentIcon",
+    wrapperMenuItem = "wrapperMenuItem",
     backgroundAdornmentIcon = "backgroundAdornmentIcon"
 }
 export declare enum HeaderSidebarSlots {

package/components/SideBar/slots/SideBarEnum.js

@@ -15,6 +15,7 @@ var ContentGroupsSlots = /* @__PURE__ */ ((ContentGroupsSlots2) => {
   ContentGroupsSlots2["containerContentItem"] = "containerContentItem";
   ContentGroupsSlots2["containerArrowIconRoot"] = "containerArrowIconRoot";
   ContentGroupsSlots2["containerAdornmentIcon"] = "containerAdornmentIcon";
+  ContentGroupsSlots2["wrapperMenuItem"] = "wrapperMenuItem";
   ContentGroupsSlots2["backgroundAdornmentIcon"] = "backgroundAdornmentIcon";
   return ContentGroupsSlots2;
 })(ContentGroupsSlots || {});

package/components/SideBar/slots/SideBarSlots.d.ts

@@ -25,6 +25,9 @@ export declare const ContainerArrowIconRootStyled: import('@emotion/styled').Sty
 export declare const HeaderContainerComponentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, keyof import('react').HTMLAttributes<HTMLElement> | keyof import('react').ClassAttributes<HTMLElement>>, {}>;
+export declare const WrapperMenuItemStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const ContainerAdornmentIconStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/SideBar/slots/SideBarSlots.js

@@ -40,6 +40,10 @@ const HeaderContainerComponentStyled = styled("section", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: HeaderSidebarSlots.headerContainerComponent
 })(sideBarStyles?.headerContainerComponent);
+const WrapperMenuItemStyled = styled("div", {
+  name: SIDEBAR_KEY_COMPONENT,
+  slot: ContentGroupsSlots.wrapperMenuItem
+})(sideBarStyles?.wrapperMenuItem);
 const ContainerAdornmentIconStyled = styled("div", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: ContentGroupsSlots.containerAdornmentIcon
@@ -85,6 +89,7 @@ export {
   ContentComponentRootStyled as C,
   HeaderContainerComponentStyled as H,
   MenuItemMainStyled as M,
+  WrapperMenuItemStyled as W,
   ContainerTreeItemsHeaderFooterStyled as a,
   ContainerFooterStyled as b,
   ContainerDesktopContentStyled as c,

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

@@ -1,4 +1,4 @@
-import { C as CLASS_NAME_IS_ROOT, a as CLASS_NAME_MENU_ACTIVE, b as CLASS_NAME_HAS_CHILDREN, c as CLASS_NAME_ITEM_CLOSED, d 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_ITEM_IN_TREE_ACTIVE, c as CLASS_NAME_HAS_CHILDREN, d as CLASS_NAME_ITEM_CLOSED } from "../../constants.js";
 import { g as getTypographyStyles } from "../../../../utils/getTypographyStyles.js";
 const contentComponentStyles = {
   /**
@@ -35,10 +35,7 @@ const contentComponentStyles = {
     },
     "& .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,
+      padding: 0,
       borderRadius: theme.vars.size.borderRadius["r1-5"],
       '& [class*="M4LMenuItem-menuItemContainer"]': {
         gap: theme.vars.size.baseSpacings["sp2-5"],
@@ -63,7 +60,7 @@ const contentComponentStyles = {
    * Contenedor que contiene grupo menu item desplegable.
    */
   containerNodeMenuItem: ({ theme }) => ({
-    marginLeft: theme.vars.size.baseSpacings.sp6,
+    marginLeft: theme.vars.size.baseSpacings["sp7-5"],
     display: "flex",
     flexDirection: "column",
     overflow: "visible",
@@ -74,6 +71,9 @@ const contentComponentStyles = {
         color: `${theme.vars.palette.text.secondary}!important`
       }
     },
+    "& .MuiCollapse-root": {
+      position: "relative"
+    },
     [`&.${CLASS_NAME_IS_ROOT}`]: {
       margin: "unset",
       border: theme.vars.size.borderStroke.container,
@@ -82,35 +82,35 @@ const contentComponentStyles = {
         paddingRight: theme.vars.size.baseSpacings["sp0-5"]
       }
     },
-    [`&.M4LSidebar-containerNodeMenuItem > .M4LMenuItem-root[class*="${CLASS_NAME_ITEM_IN_TREE_ACTIVE}"] .M4LIconClass-root`]: {
+    [`&.M4LSidebar-containerNodeMenuItem > M4LSideBar-wrapperMenuItem > .M4LMenuItem-root[class*="${CLASS_NAME_ITEM_IN_TREE_ACTIVE}"] .M4LIconClass-root`]: {
       background: theme.vars.palette.text.primary
     },
-    [`& > .MuiCollapse-root > .MuiCollapse-wrapper .MuiCollapse-wrapperInner > .M4LSideBar-containerNodeMenuItem:last-child > .M4LMenuItem-root:not(.${CLASS_NAME_IS_ROOT}).${CLASS_NAME_MENU_ACTIVE}`]: {
+    [`& > .MuiCollapse-root > .MuiCollapse-wrapper .MuiCollapse-wrapperInner > .M4LSideBar-containerNodeMenuItem:last-child > .M4LSideBar-wrapperMenuItem > .M4LMenuItem-root:not(.${CLASS_NAME_IS_ROOT}).${CLASS_NAME_MENU_ACTIVE}`]: {
       "& .M4LMenuItem-menuItemContainer": {
         "&::before": {
           content: '""',
           borderLeft: "3px solid",
           borderColor: theme.vars.palette.background.default,
           width: "3px",
-          height: "50%",
-          bottom: 0,
+          height: "90%",
+          bottom: "-10px",
           position: "absolute",
-          left: "-5px",
+          left: "-19px",
           zIndex: 1
         }
       }
     },
-    [`& > .M4LMenuItem-root:not(.${CLASS_NAME_IS_ROOT}).${CLASS_NAME_MENU_ACTIVE}`]: {
+    [`& > .M4LSideBar-wrapperMenuItem > .M4LMenuItem-root:not(.${CLASS_NAME_IS_ROOT}).${CLASS_NAME_MENU_ACTIVE}`]: {
       [`&.${CLASS_NAME_HAS_CHILDREN}:not(.${CLASS_NAME_ITEM_CLOSED})`]: {
         '& [class*="M4LMenuItem-menuItemContainer"]:before': {
           content: '""',
           borderLeft: "3px solid",
           borderColor: theme.vars.palette.background.default,
           width: "3px",
-          height: "50%",
-          bottom: 0,
+          height: "90%",
+          bottom: "-10px",
           position: "absolute",
-          left: "-5px",
+          left: "-19px",
           zIndex: 1
         }
       },
@@ -121,7 +121,7 @@ const contentComponentStyles = {
         height: "5px",
         top: "50%",
         transform: "translateY(-50%)",
-        left: "-6px",
+        left: "-20px",
         borderRadius: theme.vars.size.borderRadius["r0-5"],
         backgroundColor: theme.vars.palette.primary.focus,
         zIndex: 2
@@ -132,18 +132,23 @@ const contentComponentStyles = {
         width: "1px",
         top: "0px",
         bottom: "0px",
-        left: "-4px",
+        left: "-18px",
         backgroundImage: `linear-gradient(180deg, 
         transparent 0%,
         ${theme.vars.palette.primary.opacityGradient1} 50%,
         transparent 100%)`
       }
     },
-    [`& > .M4LMenuItem-root.${CLASS_NAME_IS_ROOT}`]: {
-      paddingRight: "11px"
+    [`&.${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} > .M4LSideBar-wrapperMenuItem`]: {
+      paddingRight: "7px",
+      paddingTop: theme.vars.size.baseSpacings.sp1,
+      paddingBottom: theme.vars.size.baseSpacings.sp1,
+      paddingLeft: theme.vars.size.baseSpacings.sp1
     },
-    [`& > .M4LMenuItem-root.${CLASS_NAME_IS_ROOT}.${CLASS_NAME_MENU_ACTIVE}`]: {
-      backgroundColor: theme.vars.palette.primary.opacity,
+    [`& > .M4LSideBar-wrapperMenuItem > .M4LMenuItem-root.${CLASS_NAME_IS_ROOT}.${CLASS_NAME_MENU_ACTIVE}`]: {
       borderBottomLeftRadius: 0,
       borderBottomRightRadius: 0
     },
@@ -159,7 +164,7 @@ const contentComponentStyles = {
         width: "1px",
         top: "-4px",
         bottom: "-4px",
-        left: "-4px",
+        left: "-14px",
         backgroundColor: theme.vars.palette.background.default,
         zIndex: 1
       }
@@ -169,7 +174,7 @@ const contentComponentStyles = {
       borderRadius: theme.vars.size.borderRadius.r2,
       border: theme.vars.size.borderStroke.container,
       borderColor: theme.vars.palette.primary.selectedOpacity,
-      boxShadow: theme.vars.customShadows.z2,
+      boxShadow: theme.vars.customShadows.z1,
       overflow: "hidden"
     },
     "& .MuiCollapse-root:first-of-type": {
@@ -181,7 +186,7 @@ const contentComponentStyles = {
       width: "1px",
       top: "5px",
       bottom: "5px",
-      left: "20px",
+      left: "16px",
       borderLeft: theme.vars.size.borderStroke.container,
       borderColor: theme.vars.palette.border.secondary,
       zIndex: 1
@@ -191,7 +196,10 @@ const contentComponentStyles = {
    * Contenedor que contiene el menu item principal.
    */
   containerNodeMenuItemMain: ({ theme }) => ({
-    gap: theme.vars.size.baseSpacings.sp1
+    gap: theme.vars.size.baseSpacings.sp1,
+    "& .M4LSideBar-wrapperMenuItem": {
+      padding: theme.vars.size.baseSpacings.sp1
+    }
   }),
   /**
    * Estilos del menu item principal.

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

@@ -16,10 +16,6 @@ const headerComponentStyles = {
     "& > div": {
       transition: "all 0.5s"
     },
-    "& > div:first-of-type .M4LImage-root": {
-      //minWidth: '140px',
-      minHeight: theme.vars.size.baseSpacings.sp10
-    },
     ...!ownerState?.anchored && ownerState?.variant !== "host" && {
       transition: "all 0.5s",
       height: theme.vars.size.baseSpacings.sp14,

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

@@ -73,6 +73,26 @@ const contentGroupStyles = {
     lineHeight: 0,
     marginLeft: "auto"
   }),
+  /**
+   * Wrapper for the menu item
+   */
+  wrapperMenuItem: ({ theme, ownerState }) => ({
+    display: "flex",
+    position: "relative",
+    paddingTop: theme.vars.size.baseSpacings.sp2,
+    paddingBottom: theme.vars.size.baseSpacings.sp2,
+    paddingLeft: theme.vars.size.baseSpacings.sp2,
+    paddingRight: theme.vars.size.baseSpacings.sp2,
+    ...getSizeStyles(
+      theme,
+      ownerState?.size || "medium",
+      "container",
+      (size) => ({
+        minHeight: size,
+        height: "auto"
+      })
+    )
+  }),
   /**
    * Styles applied to the container of the adornment icon in the header component
    */
@@ -85,6 +105,8 @@ const contentGroupStyles = {
     position: "relative",
     width: "fit-content",
     height: "fit-content",
+    minWidth: "fit-content",
+    minHeight: "fit-content",
     padding: "1px",
     "& .M4LIcon-root": {
       width: "fit-content",

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

@@ -5,8 +5,8 @@ import { u as useSideBar } from "../../../../hooks/useSideBar/index.js";
 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, d as CLASS_NAME_ITEM_IN_TREE_ACTIVE, b as CLASS_NAME_HAS_CHILDREN, c as CLASS_NAME_ITEM_CLOSED } from "../../../../constants.js";
+import { l as ContainerNodeMenuItemStyled, W as WrapperMenuItemStyled } from "../../../../slots/SideBarSlots.js";
+import { a as CLASS_NAME_MENU_ACTIVE, b as CLASS_NAME_ITEM_IN_TREE_ACTIVE, c as CLASS_NAME_HAS_CHILDREN, d as CLASS_NAME_ITEM_CLOSED } 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";
@@ -34,7 +34,7 @@ function NodeMenuItem(props) {
       ownerState,
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("menuItems") } : {},
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(WrapperMenuItemStyled, { ownerState, className: classes.wrapperMenuItem, children: /* @__PURE__ */ jsx(
           MenuItem,
           {
             className: clsx(
@@ -51,7 +51,7 @@ function NodeMenuItem(props) {
             onClick: () => handlerClick(),
             size: currentSize
           }
-        ),
+        ) }),
         hasChildren ? /* @__PURE__ */ jsx(Collapse, { in: isOpen, timeout: "auto", unmountOnExit: true, children: (item.children || []).map((child, index) => /* @__PURE__ */ jsx(
           NodeMenuItem,
           {

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { m as ContainerNodeMenuItemMainStyled, M as MenuItemMainStyled } from "../../../../slots/SideBarSlots.js";
+import { m as ContainerNodeMenuItemMainStyled, W as WrapperMenuItemStyled, M as MenuItemMainStyled } from "../../../../slots/SideBarSlots.js";
 import { g as getNameDataTestId } from "../../../../tests/utils.js";
 import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
 import { A as ArrowIcon } from "../ArrowIcon/index.js";
@@ -14,7 +14,7 @@ import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/
 import { u as useCollapse } from "../../../../hooks/useCollapse/useCollapse.js";
 const NodeMenuItemMain = (props) => {
   const { item, size, defaultOpen = false } = props;
-  const { urlIconPrefix } = useSideBar();
+  const { urlIconPrefix, classes } = useSideBar();
   const { currentSize } = useComponentSize(size);
   const { isOpen, handlerClick, hasChildren } = useCollapse(item, defaultOpen);
   const isSkeleton = useModuleSkeleton();
@@ -30,7 +30,7 @@ const NodeMenuItemMain = (props) => {
       ownerState,
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("menuItems") } : {},
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(WrapperMenuItemStyled, { ownerState, className: classes.wrapperMenuItem, children: /* @__PURE__ */ jsx(
           MenuItemMainStyled,
           {
             label: item.title,
@@ -39,7 +39,7 @@ const NodeMenuItemMain = (props) => {
             onClick: () => handlerClick(),
             size: currentSize
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsx(Collapse, { in: isOpen, timeout: "auto", unmountOnExit: true, children: (item.children || []).map((child, index) => /* @__PURE__ */ jsx(
           NodeMenuItem,
           {

package/package.json

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