@m4l/components 9.2.61 → 9.2.62-B07072025beta.1

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

@@ -0,0 +1,43 @@
+const headerComponentStyles = {
+  /**
+   * Wrapper para el encabezado del sidebar
+   */
+  headerContainerComponent: ({ theme, ownerState }) => ({
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
+    gap: theme.vars.size.baseSpacings.sp3,
+    paddingLeft: theme.vars.size.baseSpacings.sp4,
+    paddingRight: theme.vars.size.baseSpacings.sp4,
+    transition: "all 0.5s",
+    "& > 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,
+      justifyContent: "center",
+      alignItems: "center",
+      paddingLeft: theme.vars.size.baseSpacings.sp2,
+      paddingRight: theme.vars.size.baseSpacings.sp2,
+      gap: "unset",
+      "& > div:not(.M4LSideBar-buttonAnchored)": {
+        visibility: "hidden",
+        transition: "all 0.5s"
+      }
+    }
+  }),
+  /**
+   * Styles applied to the button anchored in the header component
+   */
+  buttonAnchored: {}
+};
+export {
+  headerComponentStyles as h
+};

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 { m as ContainerDesktopContentStyled, n as ContainerDesktopRootStyled } from "../../slots/SideBarSlots.js";
+import { c as ContainerDesktopContentStyled, d 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 } = useSideBar();
+  const { anchored, expandedWidth, variant } = useSideBar();
   const [eventAnchored, setEventAnchored] = useState(anchored);
   const isFirstRender = useFirstRender([anchored]);
   useEffect(() => {
@@ -18,7 +18,8 @@ const SideBarDesktop = () => {
   }, [anchored]);
   const ownerState = {
     anchored: eventAnchored,
-    expandedWidth
+    expandedWidth,
+    variant
   };
   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 : theme.vars.size.baseSpacings.sp4;
+    const width = ownerState?.anchored ? ownerState?.expandedWidth : ownerState?.variant === "host" ? 0 : theme.vars.size.baseSpacings.sp10;
     return {
       height: "100%",
       position: "relative",
@@ -17,46 +17,14 @@ const sideBarDesktopStyles = {
   /**
    * Styles applied to the root element of the `SideBar` component in desktop mode.
    */
-  containerDesktopRoot: ({ ownerState, theme }) => ({
+  containerDesktopRoot: ({ theme }) => ({
     height: "100%",
-    width: "fit-content",
+    width: "100%",
     overflow: "visible",
     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 }) => ({
-    position: "absolute",
-    right: "-20px",
-    top: "20px",
-    zIndex: 1e3,
-    padding: `${theme.vars.size.baseSpacings.sp10} 10px`,
-    "& .MuiButtonBase-root": {
-      background: theme.vars.palette.background.default
-    },
-    "&&& .M4LIconButton-root:hover": {
-      backgroundColor: theme.vars.palette.primary.enabled,
-      "& .M4LIcon-icon": {
-        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 { e 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/TreeGroupItems/index.js

@@ -0,0 +1,51 @@
+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 { f as ContainerTreeGroupItemsStyled, g as ContainerContentGroupsStyled, h 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 { getLabel } = useModuleDictionary();
+  const { size } = contentGroupsProps;
+  const { currentSize } = useComponentSize(size);
+  const isSkeleton = useModuleSkeleton();
+  const ownerState = {
+    noItems: menuData.length === 0,
+    anchored
+  };
+  const renderItemsDisabled = () => {
+    return /* @__PURE__ */ jsx(ContainerContentTitleStyled, { ownerState: { disabled: true }, children: /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        disabled: true,
+        label: getLabel("sidebar.label_no_items")
+      }
+    ) });
+  };
+  return /* @__PURE__ */ jsx(
+    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__ */ jsx(ContainerContentGroupsStyled, { children: /* @__PURE__ */ jsx(
+          NodeMenuItemMain,
+          {
+            item: itemGroup,
+            size: currentSize,
+            defaultOpen: isSkeleton ? false : true
+          }
+        ) }, itemGroup.title)
+      )) : renderItemsDisabled()
+    }
+  );
+};
+export {
+  TreeGroupItems as T
+};

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

@@ -0,0 +1,146 @@
+import { g as getSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
+const contentGroupStyles = {
+  /**
+   * Container for the group items in the sidebar
+   */
+  containerTreeGroupItems: ({ theme, ownerState }) => ({
+    display: "flex",
+    width: "100%",
+    height: "100%",
+    flex: 1,
+    flexDirection: "column",
+    overflowY: "auto",
+    alignItems: "center",
+    justifyContent: ownerState?.noItems ? "center" : "flex-start",
+    transition: "all 0.5s",
+    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"
+    }
+  }),
+  /**
+   * Wrapper for every principal item group in the sidebar
+   */
+  containerContentGroups: () => ({
+    display: "flex",
+    width: "100%",
+    height: "auto",
+    flexDirection: "column"
+  }),
+  /**
+   * Title wrapper for every principal item group in the sidebar
+   */
+  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`
+    }
+  }),
+  /**
+   * Navigation wrapper for every principal item group in the sidebar
+   */
+  containerContentNavItems: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings["sp0-5"],
+    marginRight: theme.vars.size.baseSpacings.sp4
+  }),
+  /**
+   *Container for the items in the sidebar group
+   */
+  containerContentItem: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    rowGap: theme.spacing(0.5),
+    height: "fit-content",
+    alignItems: "center",
+    cursor: "pointer",
+    padding: theme.spacing(0.5)
+  }),
+  /**
+   *Style para el contenedor del icono de flecha que indica si el item está colapsado o descolapsado para los items padres
+   */
+  containerArrowIconRoot: () => ({
+    display: "flex",
+    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"],
+    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
+      })
+    ),
+    ...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" && {
+      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 {
+  contentGroupStyles as c
+};

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

@@ -0,0 +1,7 @@
+import { AdornmentIconProps } from './types';
+/**
+ * Adornment icon component
+ * @param props - Adornment icon props
+ * @returns Adornment icon component
+ */
+export declare const AdornmentIcon: (props: AdornmentIconProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { u as useSideBar } from "../../../../hooks/useSideBar/index.js";
+import { i as ContainerAdornmentIconStyled, j as BackgroundAdornmentIconStyled } from "../../../../slots/SideBarSlots.js";
+import { I as Icon } from "../../../../../Icon/Icon.js";
+const AdornmentIcon = (props) => {
+  const { icon, variant = "main" } = props;
+  const { classes } = useSideBar();
+  return /* @__PURE__ */ jsx(ContainerAdornmentIconStyled, { ownerState: { variant }, children: /* @__PURE__ */ jsx(BackgroundAdornmentIconStyled, { className: classes.backgroundAdornmentIcon, children: /* @__PURE__ */ jsx(Icon, { src: icon }) }) });
+};
+export {
+  AdornmentIcon as A
+};

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

@@ -0,0 +1,4 @@
+export interface AdornmentIconProps {
+    icon: string;
+    variant: 'main' | 'root' | 'itemActive' | 'normal';
+}

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 { d 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,70 @@
+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 { a as CLASS_NAME_MENU_ACTIVE, b 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 { 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,
+    hasChildren,
+    isLastSibling
+  };
+  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,
+              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" }),
+            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, index) => /* @__PURE__ */ jsx(
+          NodeMenuItem,
+          {
+            item: child,
+            size: currentSize,
+            defaultOpen: isSkeleton ? false : child.active,
+            isLastSibling: item.children?.length === index + 1
+          },
+          child.title
+        )) }) : null
+      ]
+    }
+  );
+}
+export {
+  NodeMenuItem as N
+};

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

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

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,61 @@
+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 { C as CLASS_NAME_IS_ROOT } from "../../../../constants.js";
+import clsx from "clsx";
+import { useModuleSkeleton } from "@m4l/core";
+import { u as useSideBar } from "../../../../hooks/useSideBar/index.js";
+import { A as AdornmentIcon } from "../AdormentIcon/AdormentIcon.js";
+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 { urlIconPrefix } = useSideBar();
+  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: /* @__PURE__ */ jsx(AdornmentIcon, { icon: `${urlIconPrefix}${item.iconUrl}`, variant: "main" }),
+            endIcon: 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, index) => /* @__PURE__ */ jsx(
+          NodeMenuItem,
+          {
+            item: child,
+            size: currentSize,
+            className: clsx(CLASS_NAME_IS_ROOT),
+            defaultOpen: isSkeleton ? false : true,
+            isLastSibling: item.children?.length === index + 1,
+            isRoot: 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'>;
+}

package/components/SideBar/types.d.ts

@@ -1,8 +1,9 @@
 import { Sizes } from '@m4l/styles';
-import { ContainerMenuItemsMainSlots, ContentComponentSlots, ContentGroupsSlots, HeaderSidebarSlots, SideBarDesktopSlots, SideBarFooterSlots, SideBarMobileSlots } from './slots/SideBarEnum';
+import { ContentComponentSlots, ContentGroupsSlots, HeaderSidebarSlots, SideBarDesktopSlots, SideBarFooterSlots, SideBarMobileSlots } from './slots/SideBarEnum';
 import { SIDEBAR_KEY_COMPONENT } from './constants';
 import { Theme } from '@mui/material/styles';
 import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { ReactElement } from 'react';
 /**
  * define la estructura de datos para un elemento de menú en la barra lateral.
  */
@@ -50,10 +51,6 @@ export interface SideBarProps {
      * Slogan de la empresa
      */
     companySlogan?: string;
-    /**
-     * Indica la variación de estilo del componente
-     */
-    variantStyle?: 'variantDefault' | 'variantComercial';
     moduleSelectedId?: string | undefined;
     onMenuItemClick: (item: MenuDataType) => void;
     /**
@@ -72,7 +69,20 @@ export interface SideBarProps {
      * Prefijo de la url de los iconos
      */
     urlIconPrefix?: string;
+    /**
+     * Variación del componente, puede ser uno de los valores definidos en 'variantDefault' , 'variantComercial'
+     */
+    variant?: SidebarVariants;
+    /**
+     * Componente que se renderiza en el encabezado del sidebar
+     */
+    headerComponent?: ReactElement;
+    /**
+     * Componente que se renderiza en el pie de página del sidebar
+     */
+    footerComponent?: ReactElement;
 }
+export type SidebarVariants = 'host' | 'microfrontend';
 /**
  * Interface que representa el estado de un elemento de menú en la barra lateral.
  */
@@ -84,15 +94,14 @@ export interface IMenuDataWithState extends MenuDataType {
 /**
  * OwnerState con las propiedades de estado del sideBar
  */
-export type SideBarSlotsType = ContainerMenuItemsMainSlots | SideBarDesktopSlots | ContentGroupsSlots | HeaderSidebarSlots | SideBarFooterSlots | SideBarMobileSlots | ContentComponentSlots;
+export type SideBarSlotsType = SideBarDesktopSlots | ContentGroupsSlots | HeaderSidebarSlots | SideBarFooterSlots | SideBarMobileSlots | ContentComponentSlots;
 export type SideBarOwnerState = Pick<IMenuDataWithState, 'active' | 'itemInTreeActive'> & {
     [key: string]: any;
 };
 export type SideBarStyles = M4LOverridesStyleRules<SideBarSlotsType, typeof SIDEBAR_KEY_COMPONENT, Theme>;
-export type ContainerMenuItemsMainStyles = M4LOverridesStyleRules<ContainerMenuItemsMainSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type SideBarDesktopStyles = M4LOverridesStyleRules<SideBarDesktopSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type ContentGroupsStyles = M4LOverridesStyleRules<ContentGroupsSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
-export type HeaderSidebarStyles = M4LOverridesStyleRules<HeaderSidebarSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
+export type HeaderComponentStyles = M4LOverridesStyleRules<HeaderSidebarSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type SideBarFooterStyles = M4LOverridesStyleRules<SideBarFooterSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type SideBarMobileStyles = M4LOverridesStyleRules<SideBarMobileSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type ContentComponentStyles = M4LOverridesStyleRules<ContentComponentSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;