@m4l/components 9.2.59 → 9.2.60-13062025.beta.1

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

@@ -1,44 +1,188 @@
+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 { a as getHeightSizeStyles, g as getSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
 const contentComponentStyles = {
   /**
    * Estilos del contenedor principal del sidebar
    */
   contentComponentRoot: ({ theme }) => ({
     position: "relative",
-    height: "100%",
-    width: "auto",
-    backgroundColor: theme.vars.palette.background.default,
     display: "flex",
-    flexDirection: "column"
+    flexDirection: "column",
+    height: "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 }) => ({
-    width: "100%",
-    height: "100%",
-    overflow: "hidden",
-    transition: "all 0.5s",
-    flex: 1,
-    ...!ownerState?.anchored && {
-      width: ownerState?.anchored && ownerState?.isDesktop ? ownerState?.expandedWidth : !ownerState?.isDesktop ? "100%" : theme.vars.size.baseSpacings.sp4,
-      "&:hover": {
-        transition: "all 0.5s",
-        width: ownerState?.expandedWidth,
-        contentVisibility: "visible",
-        '& [class*="containerFooter"]': {
-          borderWidth: theme.vars.size.baseSpacings["sp0-5"]
+  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.
    */
-  containerComponent: ({ ownerState }) => ({
+  containerTreeItemsAndPromotion: ({ theme, ownerState }) => ({
     height: "100%",
     width: ownerState?.expandedWidth,
+    flex: 1,
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    paddingLeft: theme.vars.size.baseSpacings.sp4,
+    paddingRight: theme.vars.size.baseSpacings.sp4,
+    '& [class*="M4LMenuItem-root"], & [class*="M4LMenuItem-skeletonMenuItem"]': {
+      ...getSizeStyles(
+        theme,
+        ownerState?.size || "medium",
+        "container",
+        (size) => ({
+          height: size,
+          minHeight: size,
+          maxHeight: size
+        })
+      )
+    },
+    "& .M4LMenuItem-root": {
+      border: "unset",
+      paddingLeft: theme.vars.size.baseSpacings.sp2,
+      paddingRight: theme.vars.size.baseSpacings.sp2,
+      "& .M4LTypography-root": {
+        paddingLeft: `${theme.vars.size.baseSpacings.sp2} !important`,
+        ...getTypographyStyles(
+          theme.generalSettings.isMobile,
+          ownerState?.size || "medium",
+          "caption"
+        )
+      }
+    }
+  }),
+  /**
+   * Contenedor que contiene grupo menu item desplegable.
+   */
+  containerNodeMenuItem: ({ theme, ownerState }) => ({
+    marginLeft: theme.vars.size.baseSpacings.sp4,
     display: "flex",
-    flexDirection: "column"
+    flexDirection: "column",
+    overflow: "hidden",
+    gap: theme.vars.size.baseSpacings.sp1,
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState?.size || "medium",
+      "container",
+      (height) => {
+        return {
+          height: "auto",
+          minHeight: height
+        };
+      }
+    ),
+    [`&.${CLASS_NAME_IS_ROOT}`]: {
+      margin: "unset"
+    },
+    [`& > .M4LMenuItem-root:first-of-type:not(.${CLASS_NAME_MENU_ACTIVE}).${CLASS_NAME_ITEM_IN_TREE_ACTIVE}`]: {
+      borderColor: theme.vars.palette.divider,
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        width: 2,
+        borderLeft: theme.vars.size.borderStroke.container,
+        borderColor: theme.vars.palette.border.default
+      },
+      [`&: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}`]: {
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        height: "50%",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        width: 2,
+        borderLeft: theme.vars.size.borderStroke.container,
+        borderColor: theme.vars.palette.primary.enabled
+      },
+      "&:after": {
+        content: '""',
+        position: "absolute",
+        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
+    },
+    "& .MuiCollapse-wrapperInner": {
+      display: "flex",
+      flexDirection: "column",
+      paddingLeft: 0,
+      paddingBottom: theme.vars.size.baseSpacings.sp1,
+      paddingTop: 0,
+      paddingRight: theme.vars.size.baseSpacings.sp1
+    },
+    [`&.${CLASS_NAME_IS_ROOT}.${CLASS_NAME_MENU_ACTIVE}`]: {
+      backgroundColor: theme.vars.palette.background.base,
+      borderRadius: theme.vars.size.borderRadius["r1-5"]
+    }
+  }),
+  containerNodeMenuItemMain: {},
+  /**
+   * Estilos del menu item principal.
+   */
+  menuItemMain: ({ theme, ownerState }) => ({
+    "& .M4LSideBar-containerArrowIconRoot": {
+      marginLeft: "unset"
+    },
+    "&&& .M4LTypography-root": {
+      ...getTypographyStyles(
+        theme.generalSettings.isMobile,
+        ownerState?.size || "medium",
+        "bodyDens"
+      )
+    }
   })
 };
 export {

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

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

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

@@ -2,32 +2,25 @@ 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 { j as ContainerFooterStyled } from "../../slots/SideBarSlots.js";
-import { I as Image } from "../../../Image/Image.js";
-function FooterSidebar({ anchored }) {
-  const { companyLogoNormalUrl } = useSideBar();
+import { d as ContainerFooterStyled } from "../../slots/SideBarSlots.js";
+function Promotion({ anchored }) {
+  const { promotion } = useSideBar();
   const ownerState = {
     anchored
   };
+  if (!promotion) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(
     ContainerFooterStyled,
     {
       ownerState,
       role: "footer",
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("footer") } : {},
-      children: /* @__PURE__ */ jsx(
-        Image,
-        {
-          width: "auto",
-          height: "40px",
-          src: companyLogoNormalUrl || "",
-          alt: "logo"
-        },
-        "Logo"
-      )
+      children: promotion
     }
   );
 }
 export {
-  FooterSidebar as F
+  Promotion as P
 };

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

@@ -6,10 +6,10 @@ const footerSideBarStyles = {
     height: "auto",
     display: "grid",
     placeItems: "center",
-    padding: `${theme.vars.size.baseSpacings.sp4} ${theme.vars.size.baseSpacings.sp12}`,
     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"
+    transition: "all 0.5s",
+    paddingBottom: theme.vars.size.baseSpacings.sp2
   })
 };
 export {

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

@@ -0,0 +1,5 @@
+export interface PromotionProps {
+    onToggleAnchored: (anchored: boolean) => void;
+    anchored: boolean;
+}
+export type WrapperCollapseButtonProps = Pick<PromotionProps, 'anchored'>;

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useFirstRender } from "@m4l/graphics";
 import { u as useSideBar } from "../../hooks/useSideBar/index.js";
-import { m as ContainerDesktopContentStyled, n 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";

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

@@ -30,14 +30,22 @@ const sideBarDesktopStyles = {
   /**
    * Container button to achores the sidebar.
    */
-  containerBtnAnchored: ({ theme }) => ({
+  containerBtnAnchored: ({ theme, ownerState }) => ({
     position: "absolute",
     right: "-20px",
     top: "20px",
     zIndex: 1e3,
     padding: `${theme.vars.size.baseSpacings.sp10} 10px`,
     "& .MuiButtonBase-root": {
-      background: theme.vars.palette.background.default
+      ...!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,
@@ -45,18 +53,6 @@ const sideBarDesktopStyles = {
         backgroundColor: `${theme.vars.palette.primary.contrastText}!important`
       }
     }
-    // '&:hover': {
-    //   '& .MuiButtonBase-root': {
-    //     border: `1px solid ${theme.palette.border.default}`,
-    //     background: theme.vars.palette.primary.enabled,
-    //     '& [class*="M4LIcon-root"] > div':{
-    //       backgroundColor: theme.vars.palette.background.default,
-    //     },
-    //   },
-    //   '& .MuiButtonBase-root:active': {
-    //     background: theme.vars.palette.primary.active,
-    //   },
-    // },
   })
 };
 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 { o 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.d.ts

@@ -0,0 +1,5 @@
+import { TreeGroupItemsProps } from './types';
+/**
+ * Renderiza el contenido de los grupos
+ */
+export declare const TreeGroupItems: (contentGroupsProps: TreeGroupItemsProps) => import("react/jsx-runtime").JSX.Element;

package/components/SideBar/subcomponents/{ContentGroups → TreeGroupItems}/index.js

@@ -1,27 +1,21 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useModuleDictionary } from "@m4l/core";
+import { jsx } from "react/jsx-runtime";
+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 { d as ContainerContentGroupsRootStyled, e as ContainerContentGroupsStyled, f as ContainerContentTitleStyled, g as ContainerContentNavItemsStyled } from "../../slots/SideBarSlots.js";
-import { C as ContainerMenuItemsMain } from "./subcomponents/ContainerMenuItemsMain/index.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 { T as Typography } from "../../../mui_extended/Typography/Typography.js";
 import { M as MenuItem } from "../../../mui_extended/MenuItem/MenuItem.js";
-const ContentGroups = (contentGroupsProps) => {
+const TreeGroupItems = (contentGroupsProps) => {
   const { menuData } = useSideBar();
   const { getLabel } = useModuleDictionary();
   const { size } = contentGroupsProps;
   const { currentSize } = useComponentSize(size);
+  const isSkeleton = useModuleSkeleton();
   const ownerState = {
     noItems: menuData.length === 0
   };
-  const renderTitle = (title) => {
-    return /* @__PURE__ */ jsx(ContainerContentTitleStyled, { children: /* @__PURE__ */ jsx(Typography, { variant: "bodyDens", skeletonWidth: "100px", children: title }) });
-  };
-  const renderItems = (item) => {
-    return /* @__PURE__ */ jsx(ContainerContentNavItemsStyled, { children: item?.map((list) => /* @__PURE__ */ jsx(ContainerMenuItemsMain, { item: list, openSubItem: true, size: currentSize }, list.title)) });
-  };
   const renderItemsDisabled = () => {
     return /* @__PURE__ */ jsx(ContainerContentTitleStyled, { ownerState: { disabled: true }, children: /* @__PURE__ */ jsx(
       MenuItem,
@@ -32,21 +26,25 @@ const ContentGroups = (contentGroupsProps) => {
     ) });
   };
   return /* @__PURE__ */ jsx(
-    ContainerContentGroupsRootStyled,
+    ContainerTreeGroupItemsStyled,
     {
       ownerState,
       role: "bodysidebar",
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("content-groups") } : {},
       children: menuData.length > 0 ? menuData.map((itemGroup) => (
         /* Render title section in menusidebar */
-        /* @__PURE__ */ jsxs(ContainerContentGroupsStyled, { children: [
-          renderTitle(itemGroup.title),
-          renderItems(itemGroup.children)
-        ] }, itemGroup.title)
+        /* @__PURE__ */ jsx(ContainerContentGroupsStyled, { children: /* @__PURE__ */ jsx(
+          NodeMenuItemMain,
+          {
+            item: itemGroup,
+            size: currentSize,
+            defaultOpen: isSkeleton ? false : true
+          }
+        ) }, itemGroup.title)
       )) : renderItemsDisabled()
     }
   );
 };
 export {
-  ContentGroups as C
+  TreeGroupItems as T
 };

package/components/SideBar/subcomponents/{ContentGroups → TreeGroupItems}/styles.js

@@ -2,10 +2,11 @@ const contentGroupStyles = {
   /**
    * Container for the group items in the sidebar
    */
-  containerContentGroupsRoot: ({ theme, ownerState }) => ({
+  containerTreeGroupItems: ({ theme, ownerState }) => ({
     display: "flex",
     width: "100%",
     height: "100%",
+    flex: 1,
     flexDirection: "column",
     overflowY: "auto",
     padding: `${theme.vars.size.baseSpacings.sp3} 0px 0px 0px`,
@@ -15,14 +16,11 @@ const contentGroupStyles = {
   /**
    * Wrapper for every principal item group in the sidebar
    */
-  containerContentGroups: ({ theme }) => ({
+  containerContentGroups: () => ({
     display: "flex",
     width: "100%",
-    height: "100%",
-    flexDirection: "column",
-    padding: `${theme.vars.size.baseSpacings.sp3} 0px`,
-    flex: 1,
-    overflow: "auto"
+    height: "auto",
+    flexDirection: "column"
   }),
   /**
    * Title wrapper for every principal item group in the sidebar

package/components/SideBar/subcomponents/{ContentGroups/subcomponents/ContainerMenuItemsMain → TreeGroupItems}/subcomponents/ArrowIcon/index.js

@@ -1,23 +1,26 @@
 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 { c as PATH_ARROW_DOWN_ICON } from "../../../../../../constants.js";
-import { i as ContainerArrowIconRootStyled } from "../../../../../../slots/SideBarSlots.js";
-import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
+import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
+import { g as getNameDataTestId } from "../../../../tests/utils.js";
+import { f 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";
 function ArrowIcon(props) {
   const { openState, active } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
+  const { classes } = useSideBar();
   return /* @__PURE__ */ jsx(
     ContainerArrowIconRootStyled,
     {
+      className: classes.containerArrowIconRoot,
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("arrowIconRoot") } : {},
       children: /* @__PURE__ */ jsx(
-        IconButton,
+        Icon,
         {
           src: `${host_static_assets}/${environment_assets}/${PATH_ARROW_DOWN_ICON}`,
           rotationAngle: openState ? 270 : 90,
-          color: active ? "primary" : "default"
+          color: active ? "primary.enabled" : "text.primary"
         }
       )
     }

package/components/SideBar/subcomponents/{ContentGroups/subcomponents/ContainerMenuItemsMain → TreeGroupItems/subcomponents/NodeMenuItem}/index.d.ts

@@ -1,8 +1,8 @@
-import { NavListSubItemProps } from './types';
+import { NodeMenuItemProps } from './types';
 /**
  * MenuItems component renderiza los items del menu con sus respectivos hijos y estados
- * @param {NavListSubItemProps} props - Propiedades del componente
+ * @param {NodeMenuItemProps} props - Propiedades del componente
  * @param {MenuDataType} props.item - Datos del item del menu
  * @param {boolean} props.openSubItem - Estado del item del menu: Abierto - cerrado
  */
-export declare function ContainerMenuItemsMain(props: NavListSubItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function NodeMenuItem(props: NodeMenuItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Collapse } from "@mui/material";
+import clsx from "clsx";
+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 { 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 { 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 } = props;
+  const { urlIconPrefix, classes } = useSideBar();
+  const { isOpen, handlerClick, hasChildren } = useCollapse(item, defaultOpen);
+  const { currentSize } = useComponentSize(size);
+  const isSkeleton = useModuleSkeleton();
+  const ownerState = {
+    active: item.active,
+    itemInTreeActive: item.itemInTreeActive,
+    sidebarSize: currentSize
+  };
+  const CLASS_NAME_ITEM_STATE = clsx(item.active && CLASS_NAME_MENU_ACTIVE, item.itemInTreeActive && CLASS_NAME_ITEM_IN_TREE_ACTIVE);
+  return /* @__PURE__ */ jsxs(
+    ContainerNodeMenuItemStyled,
+    {
+      className: clsx(classes.containerNodeMenuItem, CLASS_NAME_ITEM_STATE, className),
+      role: "listitem",
+      ownerState,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("menuItems") } : {},
+      children: [
+        /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            className: clsx(CLASS_NAME_ITEM_STATE, className, item.children && item.children.length > 0 && CLASS_NAME_HAS_CHILDREN),
+            label: item.title,
+            selected: item.active,
+            startIcon: `${urlIconPrefix}${item.iconUrl}`,
+            endIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: isOpen, active: item.active }) : null,
+            onClick: () => handlerClick(),
+            size: currentSize
+          }
+        ),
+        hasChildren ? /* @__PURE__ */ jsx(Collapse, { in: isOpen, timeout: "auto", unmountOnExit: true, children: (item.children || []).map((child) => /* @__PURE__ */ jsx(NodeMenuItem, { item: child, size: currentSize, defaultOpen: isSkeleton ? false : child.active }, child.title)) }) : null
+      ]
+    }
+  );
+}
+export {
+  NodeMenuItem as N
+};

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

@@ -0,0 +1,8 @@
+import { Sizes } from '@m4l/styles';
+import { IMenuDataWithState } from '../../../../types';
+export type NodeMenuItemProps = {
+    item: IMenuDataWithState;
+    defaultOpen?: boolean;
+    size: Extract<Sizes, 'small' | 'medium'>;
+    className?: string;
+};

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItemMain/NodeMenuItemMain.d.ts

@@ -0,0 +1,5 @@
+import { NodeMenuItemProps } from '../NodeMenuItem/types';
+/**
+ * Componente que representa un nodo menu Item principal.
+ */
+export declare const NodeMenuItemMain: (props: NodeMenuItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { m as ContainerNodeMenuItemMainStyled, 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";
+import { Collapse } from "@mui/material";
+import { N as NodeMenuItem } from "../NodeMenuItem/index.js";
+import { b as CLASS_NAME_IS_ROOT } from "../../../../constants.js";
+import clsx from "clsx";
+import { useModuleSkeleton } from "@m4l/core";
+import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
+import { u as useCollapse } from "../../../../hooks/useCollapse/useCollapse.js";
+const NodeMenuItemMain = (props) => {
+  const { item, size, defaultOpen = false } = props;
+  const { currentSize } = useComponentSize(size);
+  const { isOpen, handlerClick, hasChildren } = useCollapse(item, defaultOpen);
+  const isSkeleton = useModuleSkeleton();
+  const ownerState = {
+    active: item.active,
+    itemInTreeActive: item.itemInTreeActive,
+    sidebarSize: currentSize
+  };
+  return /* @__PURE__ */ jsxs(
+    ContainerNodeMenuItemMainStyled,
+    {
+      role: "treeitem",
+      ownerState,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("menuItems") } : {},
+      children: [
+        /* @__PURE__ */ jsx(
+          MenuItemMainStyled,
+          {
+            label: item.title,
+            startIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: isOpen, active: item.active }) : null,
+            onClick: () => handlerClick(),
+            size: currentSize
+          }
+        ),
+        /* @__PURE__ */ jsx(Collapse, { in: isOpen, timeout: "auto", unmountOnExit: true, children: (item.children || []).map((child) => /* @__PURE__ */ jsx(
+          NodeMenuItem,
+          {
+            item: child,
+            size: currentSize,
+            className: clsx(CLASS_NAME_IS_ROOT),
+            defaultOpen: isSkeleton ? false : true
+          },
+          child.title
+        )) })
+      ]
+    }
+  );
+};
+export {
+  NodeMenuItemMain as N
+};

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItemMain/index.d.ts

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

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

@@ -0,0 +1,4 @@
+import { Sizes } from '@m4l/styles';
+export interface TreeGroupItemsProps {
+    size?: Extract<Sizes, 'small' | 'medium'>;
+}