@m4l/components 9.2.62-B08072025beta.1 → 9.2.62-B08072025beta.2

package/components/SideBar/constants.d.ts

@@ -30,3 +30,4 @@ 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";
+export declare const CLASS_NAME_ITEM_CLOSED = "item-closed";

package/components/SideBar/constants.js

@@ -15,6 +15,7 @@ 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";
+const CLASS_NAME_ITEM_CLOSED = "item-closed";
 export {
   ALL_SIDEBAR_SLOTS as A,
   CLASS_NAME_IS_ROOT as C,
@@ -22,7 +23,8 @@ export {
   SIDEBAR_KEY_COMPONENT as S,
   CLASS_NAME_MENU_ACTIVE as a,
   CLASS_NAME_HAS_CHILDREN as b,
-  CLASS_NAME_ITEM_IN_TREE_ACTIVE as c,
-  PATH_ARROW_RIGHT_ICON as d,
-  PATH_ARROW_DOWN_ICON as e
+  CLASS_NAME_ITEM_CLOSED as c,
+  CLASS_NAME_ITEM_IN_TREE_ACTIVE as d,
+  PATH_ARROW_RIGHT_ICON as e,
+  PATH_ARROW_DOWN_ICON as f
 };

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

@@ -1,4 +1,4 @@
-import { C as CLASS_NAME_IS_ROOT, a as CLASS_NAME_MENU_ACTIVE, b as CLASS_NAME_HAS_CHILDREN, c as CLASS_NAME_ITEM_IN_TREE_ACTIVE } from "../../constants.js";
+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 { g as getTypographyStyles } from "../../../../utils/getTypographyStyles.js";
 const contentComponentStyles = {
   /**
@@ -75,13 +75,16 @@ const contentComponentStyles = {
       }
     },
     [`&.${CLASS_NAME_IS_ROOT}`]: {
-      margin: "unset"
+      margin: "unset",
+      "& > .MuiCollapse-root": {
+        paddingRight: theme.vars.size.baseSpacings["sp0-5"]
+      }
     },
     [`&.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}`]: {
+      [`&.${CLASS_NAME_HAS_CHILDREN}:not(.${CLASS_NAME_ITEM_CLOSED})`]: {
         '& [class*="M4LMenuItem-menuItemContainer"]:before': {
           content: '""',
           borderLeft: "3px solid",
@@ -122,7 +125,8 @@ const contentComponentStyles = {
     [`& > .M4LMenuItem-root.${CLASS_NAME_IS_ROOT}.${CLASS_NAME_MENU_ACTIVE}`]: {
       backgroundColor: theme.vars.palette.primary.opacity,
       borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0
+      borderBottomRightRadius: 0,
+      paddingRight: "9px"
     },
     "& .MuiCollapse-wrapperInner": {
       display: "flex",

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { u as useSideBar } from "../../hooks/useSideBar/index.js";
 import { H as HeaderContainerComponentStyled, B as ButtonAnchoredStyled } from "../../slots/SideBarSlots.js";
 import { useEnvironment } from "@m4l/core";
-import { d as PATH_ARROW_RIGHT_ICON } from "../../constants.js";
+import { e as PATH_ARROW_RIGHT_ICON } from "../../constants.js";
 import { useIsMobile } from "@m4l/graphics";
 const HeaderComponent = () => {
   const {

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

@@ -2,7 +2,7 @@ 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 { e as PATH_ARROW_DOWN_ICON } from "../../../../constants.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";

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

@@ -6,7 +6,7 @@ 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, c as CLASS_NAME_ITEM_IN_TREE_ACTIVE, b as CLASS_NAME_HAS_CHILDREN } from "../../../../constants.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 { useModuleSkeleton } from "@m4l/core";
 import { A as AdornmentIcon } from "../AdormentIcon/AdormentIcon.js";
 import { u as useCollapse } from "../../../../hooks/useCollapse/useCollapse.js";
@@ -41,7 +41,8 @@ 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
+              item.itemInTreeActive && CLASS_NAME_ITEM_IN_TREE_ACTIVE,
+              !isOpen && CLASS_NAME_ITEM_CLOSED
             ),
             label: item.title,
             selected: item.active,

package/components/mui_extended/TabContent/TabContent.js

@@ -3,9 +3,9 @@ import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.j
 import { T as TAB_CONTENT_KEY_COMPONENT } from "./constants.js";
 import { T as TabContentRootStyled } from "./slots/TabContentSlots.js";
 const TabContent = (props) => {
-  const { children, className, background = false, ...others } = props;
+  const { children, className, hasBackground = false, ...others } = props;
   const root = getComponentSlotRoot(TAB_CONTENT_KEY_COMPONENT);
-  return /* @__PURE__ */ jsx(TabContentRootStyled, { className: root, ownerState: { background }, ...others, children });
+  return /* @__PURE__ */ jsx(TabContentRootStyled, { className: root, ownerState: { hasBackground }, ...others, children });
 };
 export {
   TabContent as T

package/components/mui_extended/TabContent/TabContent.styles.js

@@ -20,7 +20,7 @@ const tabContentStyles = {
     boxSizing: "border-box",
     zIndex: "0",
     top: "-1px",
-    ...ownerState?.background ? {
+    ...ownerState?.hasBackground ? {
       backgroundColor: theme.vars.palette.background.base,
       paddingLeft: theme.vars.size.baseSpacings.sp2,
       paddingRight: theme.vars.size.baseSpacings.sp2,

package/components/mui_extended/TabContent/types.d.ts

@@ -7,6 +7,6 @@ export interface TabContentProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     children: React.ReactNode;
     style?: React.CSSProperties;
     key?: Key | null | undefined;
-    background?: boolean;
+    hasBackground?: boolean;
 }
 export type TabContentStyles = M4LOverridesStyleRules<keyof typeof TabContentSlots, typeof TABS_KEY_COMPONENT, Theme>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.62-B08072025beta.1",
+  "version": "9.2.62-B08072025beta.2",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -11,8 +11,8 @@
     "@googlemaps/js-api-loader": "^1.16.6",
     "@hookform/resolvers": "2.9.11",
     "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "7.1.2-B08072025beta.1",
-    "@m4l/styles": "7.1.30-B08072025beta.1",
+    "@m4l/graphics": "7.1.2-B08072025beta.2",
+    "@m4l/styles": "7.1.30-B08072025beta.2",
     "@microlink/react-json-view": "^1.23.3",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",