@m4l/components 9.2.60-24062025.beta.1 → 9.2.60-J18062025.beta.1

package/components/PropertyValue/PropertyValue.styles.js

@@ -9,8 +9,7 @@ const propertyValueStyles = {
       minWidth: `${maxWidth}px`,
       [`@container ${CONTAINER_QUERY_NAME} (max-width: ${maxWidth - 1}px)`]: {
         minWidth: "100px",
-        maxWidth: "100%",
-        width: "100%"
+        maxWidth: "100%"
       }
     });
     const semanticStylesMap = {
@@ -45,11 +44,11 @@ const propertyValueStyles = {
       display: "flex",
       flexDirection: ownerState?.isForm ? "column" : "row",
       justifyContent: ownerState?.isForm ? "space-between" : "left",
-      alignItems: "center",
+      alignItems: "flex-start",
       gap: theme.vars.size.baseSpacings["sp1"],
       width: ownerState?.semanticWidth ? "auto" : "200px",
       overflow: "hidden",
-      color: theme.vars.palette.text.primary,
+      color: theme.palette.text.primary,
       paddingTop: !ownerState?.isForm ? theme.vars.size.baseSpacings.sp1 : void 0,
       paddingBottom: !ownerState?.isForm ? theme.vars.size.baseSpacings.sp1 : void 0,
       borderBottom: !ownerState?.isForm ? `${theme.vars.palette.border.disabled} solid 1px` : "none",
@@ -62,7 +61,6 @@ const propertyValueStyles = {
       ...theme.generalSettings.isMobile && {
         flexDirection: "column"
       },
-      minHeight: theme.vars.size.baseSpacings.sp5,
       ...semanticStyle
     };
   },
@@ -73,7 +71,7 @@ const propertyValueStyles = {
     display: "flex",
     alignItems: "center",
     fontSize: theme.typography.body2.fontSize,
-    color: theme.vars.palette.text.primary,
+    color: theme.palette.text.primary,
     gap: theme.vars.size.baseSpacings["sp1"],
     overflow: "hidden",
     width: "100%"
@@ -85,7 +83,6 @@ const propertyValueStyles = {
     width: "100%",
     display: "flex",
     justifyContent: "flex-start",
-    alignItems: "center",
     overflow: "hidden",
     height: ownerState?.valueHeight ? ownerState?.valueHeight : "auto",
     ...ownerState?.isForm && {

package/components/PropertyValue/types.d.ts

@@ -91,10 +91,6 @@ export interface PropertyVaLueOwnerState extends Pick<PropertyValueProps, 'disab
      * Indica si el componente está en modo formulario.
      */
     isForm: boolean;
-    /**
-     * Tamaño del componente.
-     */
-    size?: PropertyValueProps['size'];
     /**
      * Propiedades adicionales para estilos o comportamientos personalizados.
      */

package/components/SideBar/SideBar.js

@@ -23,8 +23,7 @@ const SideBar = memo((props) => {
     expandedWidth = "230px",
     companyName,
     companySlogan,
-    urlIconPrefix = `${host_static_assets}/${environment_assets}${PATH_ICONS}`,
-    promotion
+    urlIconPrefix = `${host_static_assets}/${environment_assets}${PATH_ICONS}`
   } = props;
   const menuDataWithState = useMemo(() => getMenuDataWithState({ menuData: menuData ?? getDataToSkeleton(), moduleSelectedId }), [menuData, moduleSelectedId]);
   const isMobile = useIsMobile();
@@ -45,8 +44,7 @@ const SideBar = memo((props) => {
         expandedWidth,
         companyName,
         companySlogan,
-        urlIconPrefix,
-        promotion
+        urlIconPrefix
       },
       children: !isMobile ? /* @__PURE__ */ jsx(SideBarDesktop, {}) : /* @__PURE__ */ jsx(SideBarMobile, {})
     }

package/components/SideBar/constants.d.ts

@@ -1,32 +1,8 @@
-import { HeaderSidebarSlots, ContentGroupsSlots, SideBarDesktopSlots, SideBarFooterSlots, SideBarMobileSlots, ContentComponentSlots } from './slots/SideBarEnum';
 export declare const SIDEBAR_KEY_COMPONENT = "M4LSideBar";
 export declare const CONTAINER_BTN_ANCHORED = "M4LSideBarButtonAnchored";
 export declare const LIST_MENU_ITEM = "M4LListMenuItem";
+export declare const ITEM_ACTIVE = "M4LItemActive";
+export declare const ITEM_IN_TREE_ACTIVE = "M4LItemInTreeActive";
 export declare const PATH_ICONS = "/frontend/domain/microfrontends/";
 export declare const PATH_ARROW_DOWN_ICON = "frontend/components/sidebar/assets/icons/ChevronRight.svg";
 export declare const PATH_ARROW_RIGHT_ICON = "frontend/components/sidebar/assets/icons/arrow_right.svg";
-export declare const ALL_SIDEBAR_SLOTS: {
-    contentComponentRoot: ContentComponentSlots.contentComponentRoot;
-    contentComponentHide: ContentComponentSlots.contentComponentHide;
-    containerTreeItemsAndPromotion: ContentComponentSlots.containerTreeItemsAndPromotion;
-    containerNodeMenuItem: ContentComponentSlots.containerNodeMenuItem;
-    containerNodeMenuItemMain: ContentComponentSlots.containerNodeMenuItemMain;
-    menuItemMain: ContentComponentSlots.menuItemMain;
-    containerFooter: SideBarFooterSlots.containerFooter;
-    containerHeaderSidebarRoot: HeaderSidebarSlots.containerHeaderSidebarRoot;
-    containerTitleSubtitle: HeaderSidebarSlots.containerTitleSubtitle;
-    containerTreeGroupItems: ContentGroupsSlots.containerTreeGroupItems;
-    containerContentGroups: ContentGroupsSlots.containerContentGroups;
-    containerContentTitle: ContentGroupsSlots.containerContentTitle;
-    containerContentNavItems: ContentGroupsSlots.containerContentNavItems;
-    containerContentItem: ContentGroupsSlots.containerContentItem;
-    containerArrowIconRoot: ContentGroupsSlots.containerArrowIconRoot;
-    containerSideBarMobile: SideBarMobileSlots.containerSideBarMobile;
-    containerDesktopRoot: SideBarDesktopSlots.containerDesktopRoot;
-    containerDesktopContent: SideBarDesktopSlots.containerDesktopContent;
-    containerBtnAnchored: SideBarDesktopSlots.containerBtnAnchored;
-};
-export declare const CLASS_NAME_IS_ROOT = "is-root";
-export declare const CLASS_NAME_MENU_ACTIVE = "menu-active";
-export declare const CLASS_NAME_ITEM_IN_TREE_ACTIVE = "item-in-tree-active";
-export declare const CLASS_NAME_HAS_CHILDREN = "has-children";

package/components/SideBar/constants.js

@@ -1,30 +1,18 @@
-import { C as ContentComponentSlots, S as SideBarFooterSlots, H as HeaderSidebarSlots, a as ContentGroupsSlots, b as SideBarMobileSlots, c as SideBarDesktopSlots } from "./slots/SideBarEnum.js";
 const SIDEBAR_KEY_COMPONENT = "M4LSideBar";
 const CONTAINER_BTN_ANCHORED = "M4LSideBarButtonAnchored";
+const LIST_MENU_ITEM = "M4LListMenuItem";
+const ITEM_ACTIVE = "M4LItemActive";
+const ITEM_IN_TREE_ACTIVE = "M4LItemInTreeActive";
 const PATH_ICONS = "/frontend/domain/microfrontends/";
 const PATH_ARROW_DOWN_ICON = "frontend/components/sidebar/assets/icons/ChevronRight.svg";
 const PATH_ARROW_RIGHT_ICON = "frontend/components/sidebar/assets/icons/arrow_right.svg";
-const ALL_SIDEBAR_SLOTS = {
-  ...SideBarDesktopSlots,
-  ...SideBarMobileSlots,
-  ...ContentGroupsSlots,
-  ...HeaderSidebarSlots,
-  ...SideBarFooterSlots,
-  ...ContentComponentSlots
-};
-const CLASS_NAME_IS_ROOT = "is-root";
-const CLASS_NAME_MENU_ACTIVE = "menu-active";
-const CLASS_NAME_ITEM_IN_TREE_ACTIVE = "item-in-tree-active";
-const CLASS_NAME_HAS_CHILDREN = "has-children";
 export {
-  ALL_SIDEBAR_SLOTS as A,
   CONTAINER_BTN_ANCHORED as C,
+  ITEM_ACTIVE as I,
+  LIST_MENU_ITEM as L,
   PATH_ICONS as P,
   SIDEBAR_KEY_COMPONENT as S,
   PATH_ARROW_RIGHT_ICON as a,
-  CLASS_NAME_IS_ROOT as b,
-  CLASS_NAME_MENU_ACTIVE as c,
-  CLASS_NAME_ITEM_IN_TREE_ACTIVE as d,
-  CLASS_NAME_HAS_CHILDREN as e,
-  PATH_ARROW_DOWN_ICON as f
+  ITEM_IN_TREE_ACTIVE as b,
+  PATH_ARROW_DOWN_ICON as c
 };

package/components/SideBar/context/sideBarContext/index.js

@@ -1,8 +1,5 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { useState, createContext } from "react";
-import { g as getComponentClasses } from "../../../../utils/getComponentSlotRoot.js";
-import { A as ALL_SIDEBAR_SLOTS, S as SIDEBAR_KEY_COMPONENT } from "../../constants.js";
-const classes = getComponentClasses(SIDEBAR_KEY_COMPONENT, ALL_SIDEBAR_SLOTS);
+import { jsx } from "react/jsx-runtime";
+import { createContext } from "react";
 const initialState = {
   anchored: false,
   visible: true,
@@ -17,17 +14,11 @@ const initialState = {
   },
   expandedWidth: "",
   companyName: "",
-  companySlogan: "",
-  classes,
-  promotion: /* @__PURE__ */ jsx(Fragment, {}),
-  isHover: false,
-  setIsHover: (_isHover) => {
-  }
+  companySlogan: ""
 };
 const SideBarContext = createContext(initialState);
 const SideBarProvider = (props) => {
   const { value, children } = props;
-  const [isHover, setIsHover] = useState(false);
   const {
     anchored,
     visible,
@@ -41,8 +32,7 @@ const SideBarProvider = (props) => {
     moduleSelectedId,
     companyName,
     companySlogan,
-    urlIconPrefix,
-    promotion
+    urlIconPrefix
   } = value;
   return (
     // Proporcionar el contexto con las propiedades desestructuradas
@@ -62,11 +52,7 @@ const SideBarProvider = (props) => {
           expandedWidth,
           companyName,
           companySlogan,
-          urlIconPrefix,
-          classes,
-          promotion,
-          isHover,
-          setIsHover
+          urlIconPrefix
         },
         children
       }

package/components/SideBar/context/sideBarContext/types.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { IMenuDataWithState, SideBarProps } from '../../types';
-import { ALL_SIDEBAR_SLOTS } from '../../constants';
 /**
  * Valor proporcionado por el proveedor del contexto Sidebar.
  */
@@ -10,33 +9,13 @@ export interface SideBarProviderValue extends SideBarProps {
      */
     anchored: boolean;
     menuData: Array<IMenuDataWithState>;
-    /**
-     * Las clases asociadas al proveedor del contexto Sidebar.
-     */
-    classes: Record<keyof typeof ALL_SIDEBAR_SLOTS, string>;
-    /**
-     * Promoción del sidebar, se renderiza en el footer del sidebar
-     */
-    promotion: SideBarProps['promotion'];
-    /**
-     * Indica si el sidebar está siendo hoverado
-     */
-    isHover: boolean;
-    /**
-     * Función para establecer el estado de hover
-     */
-    setIsHover: (value: boolean) => void;
 }
 /**
  * Propiedades para el proveedor del contexto Sidebar.
  */
 export interface SideBarProviderProps {
     /** value contendrá el valor que se proporcionará en el contexto*/
-    value: Omit<SideBarProviderValue, 'collapsed' | 'classes' | 'isHover' | 'setIsHover'>;
+    value: Omit<SideBarProviderValue, 'collapsed'>;
     /** children contendrá los elementos secundarios que estarán dentro del ámbito del proveedor del contexto.*/
     children: ReactNode;
-    /**
-     * Promoción del sidebar, se renderiza en el footer del sidebar
-     */
-    promotion?: SideBarProps['promotion'];
 }

package/components/SideBar/helpers/getMenuDataWithState/index.js

@@ -1,39 +1,22 @@
 const getMenuDataWithState = ({ menuData, moduleSelectedId, initialLevel = 0 }) => {
   const newMenuDataItems = menuData.map((item) => {
     if (!item.children && item.moduleId === moduleSelectedId) {
-      return { ...item, active: true, itemInTreeActive: false };
+      return { ...item, active: true, itemInTreeActive: true };
     }
     if (item.children) {
       let childrenItem = getMenuDataWithState({ menuData: item.children, moduleSelectedId, initialLevel: initialLevel + 1 });
       const indexTrue = childrenItem.findIndex((child) => child.active === true);
       if (initialLevel === 0) {
-        return { ...item, children: childrenItem, active: false, itemInTreeActive: false };
+        return { ...item, children: childrenItem };
       }
       if (indexTrue !== -1) {
-        childrenItem = childrenItem.map((child, index) => {
-          if (child.active) {
-            return { ...child, itemInTreeActive: false };
-          }
-          if (!child.active && !(child.children?.length ?? 0 > 0)) {
-            return { ...child, itemInTreeActive: true, active: false };
-          }
-          if (index <= indexTrue) {
-            return {
-              ...child,
-              itemInTreeActive: true,
-              active: false
-            };
-          }
-          return { ...child, itemInTreeActive: false, active: false };
-        });
+        childrenItem = childrenItem.map((child, index) => ({
+          ...child,
+          itemInTreeActive: index <= indexTrue ? true : false
+        }));
       }
-      const status = indexTrue >= 0;
-      return {
-        ...item,
-        children: childrenItem,
-        itemInTreeActive: status,
-        active: status && !!item.children
-      };
+      const status = indexTrue >= 0 ? true : false;
+      return { ...item, children: childrenItem, itemInTreeActive: status, active: status };
     }
     return { ...item, active: false, itemInTreeActive: false };
   });

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

@@ -7,7 +7,7 @@ export declare enum SideBarMobileSlots {
     containerSideBarMobile = "containerSideBarMobile"
 }
 export declare enum ContentGroupsSlots {
-    containerTreeGroupItems = "containerTreeGroupItems",
+    containerContentGroupsRoot = "containerContentGroupsRoot",
     containerContentGroups = "containerContentGroups",
     containerContentTitle = "containerContentTitle",
     containerContentNavItems = "containerContentNavItems",
@@ -24,8 +24,8 @@ export declare enum SideBarFooterSlots {
 export declare enum ContentComponentSlots {
     contentComponentRoot = "contentComponentRoot",
     contentComponentHide = "contentComponentHide",
-    containerTreeItemsAndPromotion = "containerTreeItemsAndPromotion",
-    containerNodeMenuItem = "containerNodeMenuItem",
-    containerNodeMenuItemMain = "containerNodeMenuItemMain",
-    menuItemMain = "menuItemMain"
+    containerComponent = "containerComponent"
+}
+export declare enum ContainerMenuItemsMainSlots {
+    containerMenuItems = "containerMenuItems"
 }

package/components/SideBar/slots/SideBarEnum.js

@@ -9,7 +9,7 @@ var SideBarMobileSlots = /* @__PURE__ */ ((SideBarMobileSlots2) => {
   return SideBarMobileSlots2;
 })(SideBarMobileSlots || {});
 var ContentGroupsSlots = /* @__PURE__ */ ((ContentGroupsSlots2) => {
-  ContentGroupsSlots2["containerTreeGroupItems"] = "containerTreeGroupItems";
+  ContentGroupsSlots2["containerContentGroupsRoot"] = "containerContentGroupsRoot";
   ContentGroupsSlots2["containerContentGroups"] = "containerContentGroups";
   ContentGroupsSlots2["containerContentTitle"] = "containerContentTitle";
   ContentGroupsSlots2["containerContentNavItems"] = "containerContentNavItems";
@@ -29,17 +29,19 @@ var SideBarFooterSlots = /* @__PURE__ */ ((SideBarFooterSlots2) => {
 var ContentComponentSlots = /* @__PURE__ */ ((ContentComponentSlots2) => {
   ContentComponentSlots2["contentComponentRoot"] = "contentComponentRoot";
   ContentComponentSlots2["contentComponentHide"] = "contentComponentHide";
-  ContentComponentSlots2["containerTreeItemsAndPromotion"] = "containerTreeItemsAndPromotion";
-  ContentComponentSlots2["containerNodeMenuItem"] = "containerNodeMenuItem";
-  ContentComponentSlots2["containerNodeMenuItemMain"] = "containerNodeMenuItemMain";
-  ContentComponentSlots2["menuItemMain"] = "menuItemMain";
+  ContentComponentSlots2["containerComponent"] = "containerComponent";
   return ContentComponentSlots2;
 })(ContentComponentSlots || {});
+var ContainerMenuItemsMainSlots = /* @__PURE__ */ ((ContainerMenuItemsMainSlots2) => {
+  ContainerMenuItemsMainSlots2["containerMenuItems"] = "containerMenuItems";
+  return ContainerMenuItemsMainSlots2;
+})(ContainerMenuItemsMainSlots || {});
 export {
   ContentComponentSlots as C,
   HeaderSidebarSlots as H,
-  SideBarFooterSlots as S,
-  ContentGroupsSlots as a,
-  SideBarMobileSlots as b,
-  SideBarDesktopSlots as c
+  SideBarDesktopSlots as S,
+  SideBarMobileSlots as a,
+  SideBarFooterSlots as b,
+  ContentGroupsSlots as c,
+  ContainerMenuItemsMainSlots as d
 };

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

@@ -7,7 +7,7 @@ export declare const ContainerDesktopContentStyled: import('@emotion/styled').St
 export declare const ContainerBtnAnchoredStyled: 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 ContainerTreeGroupItemsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+export declare const ContainerContentGroupsRootStyled: 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 ContainerContentGroupsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
@@ -43,15 +43,9 @@ export declare const ContentComponentRootStyled: import('@emotion/styled').Style
 export declare const ContentComponentHideStyled: 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 ContainerTreeItemsAndPromotionStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+export declare const ContainerComponentStyled: 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 ContainerNodeMenuItemStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+export declare const ContainerMenuItemsStyled: 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 ContainerNodeMenuItemMainStyled: 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 MenuItemMainStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/MenuItem').MenuItemProps, keyof import('../../mui_extended/MenuItem').MenuItemProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
-}, {}, {}>;

package/components/SideBar/slots/SideBarSlots.js

@@ -1,8 +1,7 @@
 import { styled } from "@mui/material/styles";
-import { c as SideBarDesktopSlots, b as SideBarMobileSlots, C as ContentComponentSlots, S as SideBarFooterSlots, a as ContentGroupsSlots, H as HeaderSidebarSlots } from "./SideBarEnum.js";
+import { S as SideBarDesktopSlots, a as SideBarMobileSlots, C as ContentComponentSlots, b as SideBarFooterSlots, H as HeaderSidebarSlots, c as ContentGroupsSlots, d as ContainerMenuItemsMainSlots } from "./SideBarEnum.js";
 import { S as SIDEBAR_KEY_COMPONENT } from "../constants.js";
 import { s as sideBarStyles } from "../styles.js";
-import { M as MenuItem } from "../../mui_extended/MenuItem/MenuItem.js";
 const ContainerDesktopRootStyled = styled("section", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: SideBarDesktopSlots.containerDesktopRoot
@@ -15,10 +14,10 @@ const ContainerBtnAnchoredStyled = styled("div", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: SideBarDesktopSlots.containerBtnAnchored
 })(sideBarStyles?.containerBtnAnchored);
-const ContainerTreeGroupItemsStyled = styled("section", {
+const ContainerContentGroupsRootStyled = styled("section", {
   name: SIDEBAR_KEY_COMPONENT,
-  slot: ContentGroupsSlots.containerTreeGroupItems
-})(sideBarStyles?.containerTreeGroupItems);
+  slot: ContentGroupsSlots.containerContentGroupsRoot
+})(sideBarStyles?.containerContentGroupsRoot);
 const ContainerContentGroupsStyled = styled("section", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: ContentGroupsSlots.containerContentGroups
@@ -27,7 +26,7 @@ const ContainerContentTitleStyled = styled("div", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: ContentGroupsSlots.containerContentTitle
 })(sideBarStyles?.containerContentTitle);
-styled("nav", {
+const ContainerContentNavItemsStyled = styled("nav", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: ContentGroupsSlots.containerContentNavItems
 })(sideBarStyles?.containerContentNavItems);
@@ -39,11 +38,11 @@ const ContainerArrowIconRootStyled = styled("div", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: ContentGroupsSlots.containerArrowIconRoot
 })(sideBarStyles?.containerArrowIconRoot);
-styled("section", {
+const ContainerHeaderSidebarRootStyled = styled("section", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: HeaderSidebarSlots.containerHeaderSidebarRoot
 })(sideBarStyles?.containerHeaderSidebarRoot);
-styled("div", {
+const ContainerTitleSubtitleStyled = styled("div", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: HeaderSidebarSlots.containerTitleSubtitle
 })(sideBarStyles?.containerTitleSubtitle);
@@ -63,36 +62,29 @@ const ContentComponentHideStyled = styled("div", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: ContentComponentSlots.contentComponentHide
 })(sideBarStyles?.contentComponentHide);
-const ContainerTreeItemsAndPromotionStyled = styled("div", {
-  name: SIDEBAR_KEY_COMPONENT,
-  slot: ContentComponentSlots.containerTreeItemsAndPromotion
-})(sideBarStyles?.containerTreeItemsAndPromotion);
-const ContainerNodeMenuItemStyled = styled("div", {
-  name: SIDEBAR_KEY_COMPONENT,
-  slot: ContentComponentSlots.containerNodeMenuItem
-})(sideBarStyles?.containerNodeMenuItem);
-const ContainerNodeMenuItemMainStyled = styled("div", {
+const ContainerComponentStyled = styled("div", {
   name: SIDEBAR_KEY_COMPONENT,
-  slot: ContentComponentSlots.containerNodeMenuItemMain
-})(sideBarStyles?.containerNodeMenuItemMain);
-const MenuItemMainStyled = styled(MenuItem, {
+  slot: ContentComponentSlots.containerComponent
+})(sideBarStyles?.containerComponent);
+const ContainerMenuItemsStyled = styled("div", {
   name: SIDEBAR_KEY_COMPONENT,
-  slot: ContentComponentSlots.menuItemMain
-})(sideBarStyles?.menuItemMain);
+  slot: ContainerMenuItemsMainSlots.containerMenuItems
+})(sideBarStyles?.containerMenuItems);
 export {
   ContentComponentRootStyled as C,
-  MenuItemMainStyled as M,
-  ContainerBtnAnchoredStyled as a,
-  ContentComponentHideStyled as b,
-  ContainerTreeItemsAndPromotionStyled as c,
-  ContainerFooterStyled as d,
-  ContainerDesktopContentStyled as e,
-  ContainerDesktopRootStyled as f,
-  ContainerSideBarMobileStyled as g,
-  ContainerTreeGroupItemsStyled as h,
-  ContainerContentGroupsStyled as i,
-  ContainerContentTitleStyled as j,
-  ContainerArrowIconRootStyled as k,
-  ContainerNodeMenuItemStyled as l,
-  ContainerNodeMenuItemMainStyled as m
+  ContentComponentHideStyled as a,
+  ContainerComponentStyled as b,
+  ContainerBtnAnchoredStyled as c,
+  ContainerContentGroupsRootStyled as d,
+  ContainerContentGroupsStyled as e,
+  ContainerContentTitleStyled as f,
+  ContainerContentNavItemsStyled as g,
+  ContainerMenuItemsStyled as h,
+  ContainerArrowIconRootStyled as i,
+  ContainerFooterStyled as j,
+  ContainerHeaderSidebarRootStyled as k,
+  ContainerTitleSubtitleStyled as l,
+  ContainerDesktopContentStyled as m,
+  ContainerDesktopRootStyled as n,
+  ContainerSideBarMobileStyled as o
 };

package/components/SideBar/styles.js

@@ -1,10 +1,12 @@
 import { s as sideBarDesktopStyles } from "./subcomponents/SideBarDesktop/styles.js";
-import { c as contentGroupStyles } from "./subcomponents/TreeGroupItems/styles.js";
+import { c as contentGroupStyles } from "./subcomponents/ContentGroups/styles.js";
 import { h as headerSidebarStyles } from "./subcomponents/HeaderSidebar/styles.js";
-import { f as footerSideBarStyles } from "./subcomponents/Promotion/styles.js";
+import { f as footerSideBarStyles } from "./subcomponents/FooterSidebar/styles.js";
 import { c as contentComponentStyles } from "./subcomponents/ContentComponent/style.js";
+import { c as containerMenuItemsMainStyles } from "./subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/styles.js";
 import { s as sideBarMobileStyles } from "./subcomponents/SideBarMobile/styles.js";
 const sideBarStyles = {
+  ...containerMenuItemsMainStyles,
   ...sideBarDesktopStyles,
   ...sideBarMobileStyles,
   ...contentGroupStyles,

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

@@ -2,22 +2,20 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useIsMobile } from "@m4l/graphics";
 import { useEnvironment } from "@m4l/core";
 import { u as useSideBar } from "../../hooks/useSideBar/index.js";
-import { C as ContentComponentRootStyled, a as ContainerBtnAnchoredStyled, b as ContentComponentHideStyled, c as ContainerTreeItemsAndPromotionStyled } from "../../slots/SideBarSlots.js";
-import { T as TreeGroupItems } from "../TreeGroupItems/index.js";
-import { P as Promotion } from "../Promotion/index.js";
+import { C as ContentComponentRootStyled, a as ContentComponentHideStyled, b as ContainerComponentStyled, c as ContainerBtnAnchoredStyled } from "../../slots/SideBarSlots.js";
+import { C as ContentGroups } from "../ContentGroups/index.js";
+import { F as FooterSidebar } from "../FooterSidebar/index.js";
+import { H as HeaderSidebar } from "../HeaderSidebar/index.js";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 import { a as PATH_ARROW_RIGHT_ICON, C as CONTAINER_BTN_ANCHORED } from "../../constants.js";
-import { useRef } from "react";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
 const ContentComponent = () => {
-  const { anchored, onToggleAnchored, expandedWidth, size, classes, isHover, setIsHover } = useSideBar();
+  const { anchored, onToggleAnchored, companyName, companySlogan, companyLogoSmallUrl, expandedWidth, size } = useSideBar();
   const ownerState = {
     expandedWidth,
     anchored
   };
-  const btnAnchoredRef = useRef(null);
-  const contentRef = useRef(null);
   const { host_static_assets, environment_assets } = useEnvironment();
   const isDesktop = !useIsMobile();
   const { currentSize } = useComponentSize(size);
@@ -26,52 +24,34 @@ const ContentComponent = () => {
     onToggleAnchored(!anchored);
   };
   return /* @__PURE__ */ jsxs(ContentComponentRootStyled, { ownerState, children: [
+    /* @__PURE__ */ jsx(ContentComponentHideStyled, { ownerState: { ...ownerState, isDesktop }, role: "complementary", "aria-label": "hidden content", children: /* @__PURE__ */ jsxs(ContainerComponentStyled, { ownerState, children: [
+      /* @__PURE__ */ jsx(
+        HeaderSidebar,
+        {
+          title: companyName ?? "",
+          subtitle: companySlogan ?? "",
+          srcIcon: companyLogoSmallUrl ?? ""
+        }
+      ),
+      /* @__PURE__ */ jsx(ContentGroups, { size: currentSize }),
+      /* @__PURE__ */ jsx(FooterSidebar, { onToggleAnchored, anchored })
+    ] }) }),
     isDesktop && /* @__PURE__ */ jsx(
       ContainerBtnAnchoredStyled,
       {
-        ref: btnAnchoredRef,
         className: classRootBtnAnchored,
         ownerState,
-        onMouseLeave: (event) => {
-          if (!anchored && contentRef.current && !contentRef.current.contains(event.relatedTarget)) {
-            setIsHover(false);
-          }
-        },
         children: /* @__PURE__ */ jsx(
           IconButton,
           {
             role: "anchored-button",
-            variant: anchored ? "contained" : "outline",
+            variant: "outline",
             rotationAngle: !anchored ? 0 : 180,
             onClick: handlerAnchoredButton,
-            src: `${host_static_assets}/${environment_assets}/${PATH_ARROW_RIGHT_ICON}`,
-            color: anchored ? "primary" : "default"
+            src: `${host_static_assets}/${environment_assets}/${PATH_ARROW_RIGHT_ICON}`
           }
         )
       }
-    ),
-    /* @__PURE__ */ jsx(
-      ContentComponentHideStyled,
-      {
-        ref: contentRef,
-        ownerState: { ...ownerState, isDesktop, isHover },
-        className: classes.contentComponentHide,
-        role: "complementary",
-        "aria-label": "hidden content",
-        onMouseEnter: () => {
-          !anchored && setIsHover(true);
-        },
-        onMouseLeave: (event) => {
-          if (!anchored && btnAnchoredRef.current && btnAnchoredRef.current.contains(event.relatedTarget)) {
-            return;
-          }
-          setIsHover(false);
-        },
-        children: /* @__PURE__ */ jsxs(ContainerTreeItemsAndPromotionStyled, { ownerState, children: [
-          /* @__PURE__ */ jsx(TreeGroupItems, { size: currentSize }),
-          /* @__PURE__ */ jsx(Promotion, { onToggleAnchored, anchored })
-        ] })
-      }
     )
   ] });
 };