@m4l/components 9.2.62-B08072025beta.3 → 9.2.62-B09072025beta.1

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

@@ -1,5 +1,6 @@
-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 { b as CLASS_NAME_IS_ROOT, c as CLASS_NAME_MENU_ACTIVE, d as CLASS_NAME_ITEM_IN_TREE_ACTIVE, e as CLASS_NAME_HAS_CHILDREN } 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
@@ -9,48 +10,68 @@ const contentComponentStyles = {
     display: "flex",
     flexDirection: "column",
     height: "100%",
-    width: "100%",
+    width: "fit-content",
     backgroundColor: theme.vars.palette.background.default
   }),
+  /**
+   * Estilos del contenedor que oculta el contenido cuando se encuentra des anclado.
+   */
+  contentComponentHide: ({ theme, ownerState }) => {
+    const width = ownerState?.anchored ? ownerState?.expandedWidth : theme.vars.size.baseSpacings.sp4;
+    return {
+      width: "100%",
+      height: "100%",
+      overflow: "hidden",
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      transition: "all 0.5s",
+      ...!ownerState?.anchored && !theme.generalSettings.isMobile && {
+        width: ownerState?.anchored && ownerState?.isDesktop ? ownerState?.expandedWidth : !ownerState?.isDesktop ? "100%" : theme.vars.size.baseSpacings.sp4,
+        minWidth: width,
+        maxWidth: width,
+        ...ownerState?.isHover && !theme.generalSettings.isMobile && {
+          transition: "all 0.5s",
+          width: `${ownerState?.expandedWidth}!important`,
+          maxWidth: `${ownerState?.expandedWidth}!important`,
+          contentVisibility: "visible",
+          '& [class*="containerFooter"]': {
+            borderWidth: theme.vars.size.baseSpacings["sp0-5"]
+          }
+        }
+      }
+    };
+  },
   /**
    * Contenedor que abraza el contenido del menu en primer lugar.
    */
-  containerTreeItemsHeaderFooter: ({ theme, ownerState }) => ({
+  containerTreeItemsAndPromotion: ({ theme, ownerState }) => ({
     height: "100%",
-    width: "100%",
+    width: ownerState?.expandedWidth,
     flex: 1,
     overflow: "hidden",
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp4,
-    padding: "3px",
-    paddingBottom: theme.vars.size.baseSpacings.sp4,
-    ...!ownerState?.anchored && ownerState?.variant !== "host" && {
-      transition: "all 0.5s",
-      paddingLeft: "unset",
-      paddingRight: "unset"
-    },
+    paddingLeft: theme.vars.size.baseSpacings.sp4,
+    paddingRight: theme.vars.size.baseSpacings.sp4,
     '& [class*="M4LMenuItem-root"], & [class*="M4LMenuItem-skeletonMenuItem"]': {
-      height: "fit-content"
+      ...getSizeStyles(
+        theme,
+        ownerState?.size || "medium",
+        "container",
+        (size) => ({
+          height: size,
+          minHeight: size,
+          maxHeight: size
+        })
+      )
     },
     "& .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: 0,
+        paddingLeft: `${theme.vars.size.baseSpacings.sp2} !important`,
         ...getTypographyStyles(
           theme.generalSettings.isMobile,
           ownerState?.size || "medium",
@@ -62,71 +83,82 @@ const contentComponentStyles = {
   /**
    * Contenedor que contiene grupo menu item desplegable.
    */
-  containerNodeMenuItem: ({ theme }) => ({
-    marginLeft: theme.vars.size.baseSpacings.sp6,
+  containerNodeMenuItem: ({ theme, ownerState }) => ({
+    marginLeft: theme.vars.size.baseSpacings.sp4,
     display: "flex",
     flexDirection: "column",
     overflow: "visible",
-    position: "relative",
-    gap: theme.vars.size.baseSpacings.sp1,
     '& [class*="M4LMenuItem-root"]:not(.menu-active)': {
       "& .M4LTypography-root": {
         color: `${theme.vars.palette.text.secondary}!important`
+      },
+      "& .M4LIcon-icon": {
+        backgroundColor: `${theme.vars.palette.text.secondary}!important`
       }
     },
     [`&.${CLASS_NAME_IS_ROOT}`]: {
-      margin: "unset",
-      "& > .MuiCollapse-root": {
-        paddingRight: theme.vars.size.baseSpacings["sp0-5"]
+      margin: "unset"
+    },
+    [`& > .M4LMenuItem-root:first-of-type:not(.${CLASS_NAME_MENU_ACTIVE}).${CLASS_NAME_ITEM_IN_TREE_ACTIVE}`]: {
+      borderColor: theme.vars.palette.divider,
+      // Linea de referencia vertical
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        top: "-25%",
+        bottom: "-25%",
+        height: "150%",
+        left: 0,
+        width: 2,
+        borderLeft: theme.vars.size.borderStroke.container,
+        borderColor: theme.vars.palette.border.default,
+        ...ownerState?.isLastSibling && !ownerState?.hasChildren && {
+          height: "75%"
+        }
+      },
+      // Linea de referencia horizontal
+      [`&:not(.${CLASS_NAME_HAS_CHILDREN}):after`]: {
+        content: '""',
+        position: "absolute",
+        margin: "0",
+        left: 1,
+        width: 4,
+        height: 1,
+        borderTop: theme.vars.size.borderStroke.container,
+        borderColor: theme.vars.palette.border.default
       }
     },
     [`&.M4LSidebar-containerNodeMenuItem > .M4LMenuItem-root[class*="${CLASS_NAME_ITEM_IN_TREE_ACTIVE}"] .M4LIconClass-root`]: {
       background: theme.vars.palette.text.primary
     },
     [`& > .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,
-          position: "absolute",
-          left: "-5px",
-          zIndex: 1
-        }
-      },
       "&::before": {
         content: '""',
         position: "absolute",
-        width: "5px",
-        height: "5px",
-        top: "50%",
-        transform: "translateY(-50%)",
-        left: "-6px",
-        borderRadius: theme.vars.size.borderRadius["r0-5"],
-        backgroundColor: theme.vars.palette.primary.focus,
-        zIndex: 2
+        height: "25%",
+        top: "25%",
+        bottom: 0,
+        left: 0,
+        width: 2,
+        borderLeft: theme.vars.size.borderStroke.container,
+        borderColor: theme.vars.palette.primary.enabled,
+        ...!ownerState?.isLastSibling && !ownerState?.hasChildren && {
+          height: "50%"
+        }
       },
-      "&::after": {
+      "&:after": {
         content: '""',
         position: "absolute",
-        width: "1px",
-        top: "0px",
-        bottom: "0px",
-        left: "-4px",
-        backgroundImage: `linear-gradient(180deg, 
-        transparent 0%,
-        ${theme.vars.palette.primary.opacityGradient1} 50%,
-        transparent 100%)`
+        margin: "0",
+        left: 0,
+        width: theme.vars.size.baseSpacings.sp1,
+        height: 1,
+        borderTop: theme.vars.size.borderStroke.container,
+        borderColor: theme.vars.palette.primary.enabled
       }
     },
     [`& > .M4LMenuItem-root.${CLASS_NAME_IS_ROOT}.${CLASS_NAME_MENU_ACTIVE}`]: {
-      backgroundColor: theme.vars.palette.primary.opacity,
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0,
-      paddingRight: "9px"
+      backgroundColor: theme.vars.palette.primary.opacity
     },
     "& .MuiCollapse-wrapperInner": {
       display: "flex",
@@ -134,46 +166,14 @@ const contentComponentStyles = {
       paddingLeft: 0,
       paddingBottom: theme.vars.size.baseSpacings.sp1,
       paddingTop: 0,
-      "&:before": {
-        content: '""',
-        position: "absolute",
-        width: "1px",
-        top: "-4px",
-        bottom: "-4px",
-        left: "-4px",
-        backgroundColor: theme.vars.palette.background.default,
-        zIndex: 1
-      }
+      paddingRight: theme.vars.size.baseSpacings.sp1
     },
     [`&.${CLASS_NAME_IS_ROOT}.${CLASS_NAME_MENU_ACTIVE}`]: {
-      backgroundColor: theme.vars.palette.background.default,
-      borderRadius: theme.vars.size.borderRadius.r2,
-      border: theme.vars.size.borderStroke.container,
-      borderColor: theme.vars.palette.primary.selectedOpacity,
-      boxShadow: theme.vars.customShadows.z2,
-      overflow: "hidden"
-    },
-    "& .MuiCollapse-root:first-of-type": {
-      position: "relative"
-    },
-    "&.menu-active .MuiCollapse-wrapper.MuiCollapse-vertical:first-of-type:before": {
-      content: '""',
-      position: "absolute",
-      width: "1px",
-      top: "5px",
-      bottom: "5px",
-      left: "20px",
-      borderLeft: theme.vars.size.borderStroke.container,
-      borderColor: theme.vars.palette.border.secondary,
-      zIndex: 1
+      backgroundColor: theme.vars.palette.background.base,
+      borderRadius: theme.vars.size.borderRadius["r1-5"]
     }
   }),
-  /**
-   * Contenedor que contiene el menu item principal.
-   */
-  containerNodeMenuItemMain: ({ theme }) => ({
-    gap: theme.vars.size.baseSpacings.sp1
-  }),
+  containerNodeMenuItemMain: {},
   /**
    * Estilos del menu item principal.
    */

package/components/SideBar/subcomponents/HeaderSidebar/index.d.ts

@@ -0,0 +1,6 @@
+import { HeaderSidebarProps } from './types';
+/**
+ * Component HeaderSidebar representa el encabezado de la barra lateral.<
+ */
+declare const HeaderSidebar: ({ srcIcon, title, subtitle }: HeaderSidebarProps) => import("react/jsx-runtime").JSX.Element;
+export default HeaderSidebar;

package/components/SideBar/subcomponents/HeaderSidebar/styles.d.ts

@@ -0,0 +1,2 @@
+import { HeaderSidebarStyles } from '../../types';
+export declare const headerSidebarStyles: HeaderSidebarStyles;

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

@@ -0,0 +1,24 @@
+const headerSidebarStyles = {
+  /**
+   * Container del header del sidebar
+   */
+  containerHeaderSidebarRoot: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    padding: `${theme.vars.size.baseSpacings.sp6} ${theme.vars.size.baseSpacings.sp5}`,
+    gap: `${theme.vars.size.baseSpacings.sp2}`
+  }),
+  /**
+   * Contenedor del título y subtítulo del sidebar
+   */
+  containerTitleSubtitle: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "start",
+    gap: `${theme.vars.size.baseSpacings.sp1}`
+  })
+};
+export {
+  headerSidebarStyles as h
+};

package/components/SideBar/subcomponents/HeaderSidebar/types.d.ts

@@ -0,0 +1,5 @@
+export interface HeaderSidebarProps {
+    srcIcon: string;
+    title: string;
+    subtitle: string;
+}

package/components/SideBar/subcomponents/{FooterComponent → Promotion}/index.d.ts

@@ -6,4 +6,4 @@ import { PromotionProps } from './types';
  * @param {VoidFunction} props.collapsed - Variable que guarda el estado de colapsado en desktop
  * @returns
  */
-export default function FooterComponent({ anchored }: PromotionProps): import("react/jsx-runtime").JSX.Element | null;
+export default function Promotion({ anchored }: PromotionProps): import("react/jsx-runtime").JSX.Element | null;

package/components/SideBar/subcomponents/{FooterComponent → Promotion}/index.js

@@ -2,9 +2,9 @@ import { jsx } from "react/jsx-runtime";
 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 { b as ContainerFooterStyled } from "../../slots/SideBarSlots.js";
-function FooterComponent({ anchored }) {
-  const { footerComponent: promotion } = useSideBar();
+import { d as ContainerFooterStyled } from "../../slots/SideBarSlots.js";
+function Promotion({ anchored }) {
+  const { promotion } = useSideBar();
   const ownerState = {
     anchored
   };
@@ -22,5 +22,5 @@ function FooterComponent({ anchored }) {
   );
 }
 export {
-  FooterComponent as F
+  Promotion as P
 };

package/components/SideBar/subcomponents/{FooterComponent → Promotion}/styles.js

@@ -9,13 +9,7 @@ const footerSideBarStyles = {
     borderTop: `${theme.vars.size.baseSpacings["sp0-5"]} solid ${theme.vars.palette.border.secondary}`,
     borderWidth: ownerState?.anchored ? theme.vars.size.baseSpacings["sp0-5"] : theme.vars.size.baseSpacings.sp0,
     transition: "all 0.5s",
-    paddingBottom: theme.vars.size.baseSpacings.sp2,
-    marginLeft: theme.vars.size.baseSpacings.sp4,
-    marginRight: theme.vars.size.baseSpacings.sp4,
-    ...!ownerState?.anchored && !theme.generalSettings.isMobile && {
-      transition: "all 0.5s",
-      visibility: "hidden"
-    }
+    paddingBottom: theme.vars.size.baseSpacings.sp2
   })
 };
 export {

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

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { useFirstRender } from "@m4l/graphics";
 import { u as useSideBar } from "../../hooks/useSideBar/index.js";
-import { c as ContainerDesktopContentStyled, d as ContainerDesktopRootStyled } from "../../slots/SideBarSlots.js";
+import { e as ContainerDesktopContentStyled, f as ContainerDesktopRootStyled } from "../../slots/SideBarSlots.js";
 import { S as SIDEBAR_KEY_COMPONENT } from "../../constants.js";
 import { C as ContentComponent } from "../ContentComponent/index.js";
 import { useState, useEffect } from "react";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 const SideBarDesktop = () => {
-  const { anchored, expandedWidth, variant } = useSideBar();
+  const { anchored, expandedWidth } = useSideBar();
   const [eventAnchored, setEventAnchored] = useState(anchored);
   const isFirstRender = useFirstRender([anchored]);
   useEffect(() => {
@@ -18,8 +18,7 @@ const SideBarDesktop = () => {
   }, [anchored]);
   const ownerState = {
     anchored: eventAnchored,
-    expandedWidth,
-    variant
+    expandedWidth
   };
   const classRoot = getComponentSlotRoot(SIDEBAR_KEY_COMPONENT);
   return /* @__PURE__ */ jsx(

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

@@ -5,7 +5,7 @@ const sideBarDesktopStyles = {
    * sin que se oculte por el overflow hidden que tiene el contenido del sidebar
    */
   containerDesktopContent: ({ theme, ownerState }) => {
-    const width = ownerState?.anchored ? ownerState?.expandedWidth : ownerState?.variant === "host" ? 0 : theme.vars.size.baseSpacings.sp10;
+    const width = ownerState?.anchored ? ownerState?.expandedWidth : theme.vars.size.baseSpacings.sp4;
     return {
       height: "100%",
       position: "relative",
@@ -17,14 +17,42 @@ const sideBarDesktopStyles = {
   /**
    * Styles applied to the root element of the `SideBar` component in desktop mode.
    */
-  containerDesktopRoot: ({ theme }) => ({
+  containerDesktopRoot: ({ ownerState, theme }) => ({
     height: "100%",
-    width: "100%",
+    width: "fit-content",
     overflow: "visible",
-    borderRight: `1px solid ${theme.vars.palette.border.secondary}`,
+    borderRight: `1px solid ${theme.vars.palette.border.default}`,
+    position: !ownerState?.anchored ? "absolute" : "relative",
     inset: 0,
     //add hover effect
     zIndex: 999
+  }),
+  /**
+   * Container button to achores the sidebar.
+   */
+  containerBtnAnchored: ({ theme, ownerState }) => ({
+    position: "absolute",
+    right: "-20px",
+    top: "20px",
+    zIndex: 1e3,
+    padding: `${theme.vars.size.baseSpacings.sp10} 10px`,
+    "& .MuiButtonBase-root": {
+      ...!ownerState?.anchored && {
+        "&:before": {
+          content: '""',
+          position: "absolute",
+          inset: 0,
+          backgroundColor: theme.vars.palette.background.default,
+          zIndex: -1
+        }
+      }
+    },
+    "&&& .M4LIconButton-root:hover": {
+      backgroundColor: theme.vars.palette.primary.enabled,
+      "& .M4LIcon-icon": {
+        backgroundColor: `${theme.vars.palette.primary.contrastText}!important`
+      }
+    }
   })
 };
 export {

package/components/SideBar/subcomponents/SideBarMobile/index.js

@@ -4,7 +4,7 @@ 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 { D as Drawer } from "./subcomponents/Drawer.js";
-import { e as ContainerSideBarMobileStyled } from "../../slots/SideBarSlots.js";
+import { g as ContainerSideBarMobileStyled } from "../../slots/SideBarSlots.js";
 import { C as ContentComponent } from "../ContentComponent/index.js";
 const SideBarMobile = () => {
   const {

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

@@ -3,19 +3,18 @@ import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 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 { f as ContainerTreeGroupItemsStyled, g as ContainerContentGroupsStyled, h as ContainerContentTitleStyled } from "../../slots/SideBarSlots.js";
+import { h as ContainerTreeGroupItemsStyled, i as ContainerContentGroupsStyled, j as ContainerContentTitleStyled } from "../../slots/SideBarSlots.js";
 import { N as NodeMenuItemMain } from "./subcomponents/NodeMenuItemMain/NodeMenuItemMain.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { M as MenuItem } from "../../../mui_extended/MenuItem/MenuItem.js";
 const TreeGroupItems = (contentGroupsProps) => {
-  const { menuData, anchored } = useSideBar();
+  const { menuData } = useSideBar();
   const { getLabel } = useModuleDictionary();
   const { size } = contentGroupsProps;
   const { currentSize } = useComponentSize(size);
   const isSkeleton = useModuleSkeleton();
   const ownerState = {
-    noItems: menuData.length === 0,
-    anchored
+    noItems: menuData.length === 0
   };
   const renderItemsDisabled = () => {
     return /* @__PURE__ */ jsx(ContainerContentTitleStyled, { ownerState: { disabled: true }, children: /* @__PURE__ */ jsx(

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

@@ -1,4 +1,3 @@
-import { g as getSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
 const contentGroupStyles = {
   /**
    * Container for the group items in the sidebar
@@ -10,17 +9,9 @@ const contentGroupStyles = {
     flex: 1,
     flexDirection: "column",
     overflowY: "auto",
+    padding: `${theme.vars.size.baseSpacings.sp3} 0px 0px 0px`,
     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,
-    ...!ownerState?.anchored && !theme.generalSettings.isMobile && {
-      transition: "all 0.5s",
-      visibility: "hidden"
-    }
+    justifyContent: ownerState?.noItems ? "center" : "flex-start"
   }),
   /**
    * Wrapper for every principal item group in the sidebar
@@ -37,7 +28,6 @@ const contentGroupStyles = {
   containerContentTitle: ({ theme, ownerState }) => ({
     padding: `${theme.vars.size.baseSpacings.sp3} ${theme.vars.size.baseSpacings.sp4} ${theme.vars.size.baseSpacings.sp1}`,
     color: theme.vars.palette.text.primary,
-    width: "100%",
     textAlign: "left",
     "& .MuiTypography-root": {
       color: !ownerState?.disabled ? theme.vars.palette.text.primary : `${theme.vars.palette.text.primary} !important`
@@ -72,84 +62,6 @@ const contentGroupStyles = {
     alignSelf: "center",
     lineHeight: 0,
     marginLeft: "auto"
-  }),
-  /**
-   * Styles applied to the container of the adornment icon in the header component
-   */
-  containerAdornmentIcon: ({ theme, ownerState }) => ({
-    overflow: "hidden",
-    borderRadius: theme.vars.size.borderRadius["r1-5"],
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    position: "relative",
-    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`
-      }
-    },
-    ...ownerState?.variant === "normal" && {
-      "& .M4LIcon-icon": {
-        backgroundColor: `${theme.vars.palette.text.secondary}!important`
-      }
-    },
-    ...ownerState?.variant === "main" && {
-      backgroundColor: theme.vars.palette.chips.persianGreen.contained.backgroundColorTone
-    },
-    ...ownerState?.variant === "root" && {
-      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})`,
-      "& .M4LSideBar-backgroundAdornmentIcon": {
-        background: theme.vars.palette.background.default
-      },
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        inset: "1.4px",
-        background: theme.vars.palette.primary.enabledOpacity,
-        borderRadius: "5px"
-      },
-      "& .M4LIcon-icon": {
-        backgroundColor: `${theme.vars.palette.primary.enabled}!important`
-      }
-    }
-  }),
-  /**
-   * Styles applied to the background of the adornment icon in the header component
-   */
-  backgroundAdornmentIcon: () => ({
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: "5px"
   })
 };
 export {

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

@@ -6,14 +6,13 @@ 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 { c as CLASS_NAME_MENU_ACTIVE, d as CLASS_NAME_ITEM_IN_TREE_ACTIVE, e 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";
 import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
 import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
 function NodeMenuItem(props) {
-  const { item, size, defaultOpen = false, className, isLastSibling = false, isRoot = false } = props;
+  const { item, size, defaultOpen = false, className, isLastSibling = false } = props;
   const { urlIconPrefix, classes } = useSideBar();
   const { isOpen, handlerClick, hasChildren } = useCollapse(item, defaultOpen);
   const { currentSize } = useComponentSize(size);
@@ -41,12 +40,11 @@ function NodeMenuItem(props) {
               CLASS_NAME_ITEM_STATE,
               className,
               item.children && item.children.length > 0 && CLASS_NAME_HAS_CHILDREN,
-              item.itemInTreeActive && CLASS_NAME_ITEM_IN_TREE_ACTIVE,
-              !isOpen && CLASS_NAME_ITEM_CLOSED
+              item.itemInTreeActive && CLASS_NAME_ITEM_IN_TREE_ACTIVE
             ),
             label: item.title,
             selected: item.active,
-            startIcon: /* @__PURE__ */ jsx(AdornmentIcon, { icon: `${urlIconPrefix}${item.iconUrl}`, variant: isRoot && item.itemInTreeActive ? "root" : item.active ? "itemActive" : "normal" }),
+            startIcon: `${urlIconPrefix}${item.iconUrl}`,
             endIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: isOpen, active: item.active }) : null,
             onClick: () => handlerClick(),
             size: currentSize

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/types.d.ts

@@ -6,5 +6,4 @@ export type NodeMenuItemProps = {
     size: Extract<Sizes, 'small' | 'medium'>;
     className?: string;
     isLastSibling?: boolean;
-    isRoot?: boolean;
 };