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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -35,7 +35,7 @@ const AppBar = (props) => {
35
35
  {
36
36
  src: `${host_static_assets}/${environment_assets}/${PATH_IMG_HAMBURGUER}`,
37
37
  onClick: onToggleAnchored,
38
- rotationAngle: sidebarAnchored ? 180 : 0,
38
+ rotationAngle: sidebarAnchored ? 0 : 180,
39
39
  variant: "outline",
40
40
  role: "anchored-button"
41
41
  }
@@ -1,2 +1,2 @@
1
1
  export declare const APP_BAR_KEY = "M4LAppBar";
2
- export declare const PATH_IMG_HAMBURGUER = "frontend/components/settings/assets/icons/options.svg";
2
+ export declare const PATH_IMG_HAMBURGUER = "frontend/components/sidebar/assets/icons/panel-left-close.svg";
@@ -1,5 +1,5 @@
1
1
  const APP_BAR_KEY = "M4LAppBar";
2
- const PATH_IMG_HAMBURGUER = "frontend/components/settings/assets/icons/options.svg";
2
+ const PATH_IMG_HAMBURGUER = "frontend/components/sidebar/assets/icons/panel-left-close.svg";
3
3
  export {
4
4
  APP_BAR_KEY as A,
5
5
  PATH_IMG_HAMBURGUER as P
@@ -4,7 +4,7 @@ export declare const CONTAINER_BTN_ANCHORED = "M4LSideBarButtonAnchored";
4
4
  export declare const LIST_MENU_ITEM = "M4LListMenuItem";
5
5
  export declare const PATH_ICONS = "/frontend/domain/microfrontends/";
6
6
  export declare const PATH_ARROW_DOWN_ICON = "frontend/components/sidebar/assets/icons/ChevronRight.svg";
7
- export declare const PATH_ARROW_RIGHT_ICON = "frontend/components/sidebar/assets/icons/arrow_right.svg";
7
+ export declare const PATH_ARROW_RIGHT_ICON = "frontend/components/sidebar/assets/icons/panel-left-close.svg";
8
8
  export declare const ALL_SIDEBAR_SLOTS: {
9
9
  contentComponentRoot: ContentComponentSlots.contentComponentRoot;
10
10
  containerTreeItemsHeaderFooter: ContentComponentSlots.containerTreeItemsHeaderFooter;
@@ -30,3 +30,4 @@ export declare const CLASS_NAME_IS_ROOT = "is-root";
30
30
  export declare const CLASS_NAME_MENU_ACTIVE = "menu-active";
31
31
  export declare const CLASS_NAME_ITEM_IN_TREE_ACTIVE = "item-in-tree-active";
32
32
  export declare const CLASS_NAME_HAS_CHILDREN = "has-children";
33
+ export declare const CLASS_NAME_ITEM_CLOSED = "item-closed";
@@ -2,7 +2,7 @@ import { C as ContentComponentSlots, S as SideBarFooterSlots, H as HeaderSidebar
2
2
  const SIDEBAR_KEY_COMPONENT = "M4LSideBar";
3
3
  const PATH_ICONS = "/frontend/domain/microfrontends/";
4
4
  const PATH_ARROW_DOWN_ICON = "frontend/components/sidebar/assets/icons/ChevronRight.svg";
5
- const PATH_ARROW_RIGHT_ICON = "frontend/components/sidebar/assets/icons/arrow_right.svg";
5
+ const PATH_ARROW_RIGHT_ICON = "frontend/components/sidebar/assets/icons/panel-left-close.svg";
6
6
  const ALL_SIDEBAR_SLOTS = {
7
7
  ...SideBarDesktopSlots,
8
8
  ...SideBarMobileSlots,
@@ -15,14 +15,16 @@ const CLASS_NAME_IS_ROOT = "is-root";
15
15
  const CLASS_NAME_MENU_ACTIVE = "menu-active";
16
16
  const CLASS_NAME_ITEM_IN_TREE_ACTIVE = "item-in-tree-active";
17
17
  const CLASS_NAME_HAS_CHILDREN = "has-children";
18
+ const CLASS_NAME_ITEM_CLOSED = "item-closed";
18
19
  export {
19
20
  ALL_SIDEBAR_SLOTS as A,
20
21
  CLASS_NAME_IS_ROOT as C,
21
22
  PATH_ICONS as P,
22
23
  SIDEBAR_KEY_COMPONENT as S,
23
24
  CLASS_NAME_MENU_ACTIVE as a,
24
- CLASS_NAME_ITEM_IN_TREE_ACTIVE as b,
25
- PATH_ARROW_RIGHT_ICON as c,
26
- PATH_ARROW_DOWN_ICON as d,
27
- CLASS_NAME_HAS_CHILDREN as e
25
+ CLASS_NAME_HAS_CHILDREN as b,
26
+ CLASS_NAME_ITEM_CLOSED as c,
27
+ CLASS_NAME_ITEM_IN_TREE_ACTIVE as d,
28
+ PATH_ARROW_RIGHT_ICON as e,
29
+ PATH_ARROW_DOWN_ICON as f
28
30
  };
@@ -1,6 +1,5 @@
1
- import { C as CLASS_NAME_IS_ROOT, a as CLASS_NAME_MENU_ACTIVE, b as CLASS_NAME_ITEM_IN_TREE_ACTIVE } from "../../constants.js";
1
+ 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";
2
2
  import { g as getTypographyStyles } from "../../../../utils/getTypographyStyles.js";
3
- import { g as getSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
4
3
  const contentComponentStyles = {
5
4
  /**
6
5
  * Estilos del contenedor principal del sidebar
@@ -32,23 +31,26 @@ const contentComponentStyles = {
32
31
  paddingRight: "unset"
33
32
  },
34
33
  '& [class*="M4LMenuItem-root"], & [class*="M4LMenuItem-skeletonMenuItem"]': {
35
- ...getSizeStyles(
36
- theme,
37
- ownerState?.size || "medium",
38
- "container",
39
- (size) => ({
40
- height: size,
41
- minHeight: size,
42
- maxHeight: size
43
- })
44
- )
34
+ height: "fit-content"
45
35
  },
46
36
  "& .M4LMenuItem-root": {
47
37
  border: "unset",
38
+ paddingTop: theme.vars.size.baseSpacings.sp2,
39
+ paddingBottom: theme.vars.size.baseSpacings.sp2,
48
40
  paddingLeft: theme.vars.size.baseSpacings.sp2,
49
41
  paddingRight: theme.vars.size.baseSpacings.sp2,
42
+ borderRadius: theme.vars.size.borderRadius["r1-5"],
43
+ '& [class*="M4LMenuItem-menuItemContainer"]': {
44
+ gap: theme.vars.size.baseSpacings["sp2-5"],
45
+ overflow: "visible"
46
+ },
47
+ "&.menu-active": {
48
+ "& .M4LTypography-root": {
49
+ color: theme.vars.palette.primary.semanticText
50
+ }
51
+ },
50
52
  "& .M4LTypography-root": {
51
- paddingLeft: `${theme.vars.size.baseSpacings.sp2} !important`,
53
+ paddingLeft: 0,
52
54
  ...getTypographyStyles(
53
55
  theme.generalSettings.isMobile,
54
56
  ownerState?.size || "medium",
@@ -61,7 +63,7 @@ const contentComponentStyles = {
61
63
  * Contenedor que contiene grupo menu item desplegable.
62
64
  */
63
65
  containerNodeMenuItem: ({ theme }) => ({
64
- marginLeft: "22px",
66
+ marginLeft: theme.vars.size.baseSpacings.sp6,
65
67
  display: "flex",
66
68
  flexDirection: "column",
67
69
  overflow: "visible",
@@ -73,12 +75,28 @@ const contentComponentStyles = {
73
75
  }
74
76
  },
75
77
  [`&.${CLASS_NAME_IS_ROOT}`]: {
76
- margin: "unset"
78
+ margin: "unset",
79
+ "& > .MuiCollapse-root": {
80
+ paddingRight: theme.vars.size.baseSpacings["sp0-5"]
81
+ }
77
82
  },
78
83
  [`&.M4LSidebar-containerNodeMenuItem > .M4LMenuItem-root[class*="${CLASS_NAME_ITEM_IN_TREE_ACTIVE}"] .M4LIconClass-root`]: {
79
84
  background: theme.vars.palette.text.primary
80
85
  },
81
86
  [`& > .M4LMenuItem-root:not(.${CLASS_NAME_IS_ROOT}).${CLASS_NAME_MENU_ACTIVE}`]: {
87
+ [`&.${CLASS_NAME_HAS_CHILDREN}:not(.${CLASS_NAME_ITEM_CLOSED})`]: {
88
+ '& [class*="M4LMenuItem-menuItemContainer"]:before': {
89
+ content: '""',
90
+ borderLeft: "3px solid",
91
+ borderColor: theme.vars.palette.background.default,
92
+ width: "3px",
93
+ height: "50%",
94
+ bottom: 0,
95
+ position: "absolute",
96
+ left: "-5px",
97
+ zIndex: 1
98
+ }
99
+ },
82
100
  "&::before": {
83
101
  content: '""',
84
102
  position: "absolute",
@@ -86,26 +104,29 @@ const contentComponentStyles = {
86
104
  height: "5px",
87
105
  top: "50%",
88
106
  transform: "translateY(-50%)",
89
- left: "-3px",
90
- borderRadius: "50%",
107
+ left: "-6px",
108
+ borderRadius: theme.vars.size.borderRadius["r0-5"],
91
109
  backgroundColor: theme.vars.palette.primary.focus,
92
- zIndex: 1
110
+ zIndex: 2
93
111
  },
94
112
  "&::after": {
95
113
  content: '""',
96
114
  position: "absolute",
97
115
  width: "1px",
98
- top: "5px",
99
- bottom: "5px",
100
- left: "-1px",
101
- backgroundImage: `linear-gradient(to bottom,
102
- ${theme.vars.palette.primary.opacityGradient2},
103
- ${theme.vars.palette.primary.opacityGradient1},
104
- ${theme.vars.palette.primary.opacityGradient2})`
116
+ top: "0px",
117
+ bottom: "0px",
118
+ left: "-4px",
119
+ backgroundImage: `linear-gradient(180deg,
120
+ transparent 0%,
121
+ ${theme.vars.palette.primary.opacityGradient1} 50%,
122
+ transparent 100%)`
105
123
  }
106
124
  },
107
125
  [`& > .M4LMenuItem-root.${CLASS_NAME_IS_ROOT}.${CLASS_NAME_MENU_ACTIVE}`]: {
108
- backgroundColor: theme.vars.palette.primary.opacity
126
+ backgroundColor: theme.vars.palette.primary.opacity,
127
+ borderBottomLeftRadius: 0,
128
+ borderBottomRightRadius: 0,
129
+ paddingRight: "9px"
109
130
  },
110
131
  "& .MuiCollapse-wrapperInner": {
111
132
  display: "flex",
@@ -117,16 +138,16 @@ const contentComponentStyles = {
117
138
  content: '""',
118
139
  position: "absolute",
119
140
  width: "1px",
120
- top: "0",
121
- bottom: "0",
122
- left: "-1px",
141
+ top: "-4px",
142
+ bottom: "-4px",
143
+ left: "-4px",
123
144
  backgroundColor: theme.vars.palette.background.default,
124
145
  zIndex: 1
125
146
  }
126
147
  },
127
148
  [`&.${CLASS_NAME_IS_ROOT}.${CLASS_NAME_MENU_ACTIVE}`]: {
128
149
  backgroundColor: theme.vars.palette.background.default,
129
- borderRadius: theme.vars.size.borderRadius["r1-5"],
150
+ borderRadius: theme.vars.size.borderRadius.r2,
130
151
  border: theme.vars.size.borderStroke.container,
131
152
  borderColor: theme.vars.palette.primary.selectedOpacity,
132
153
  boxShadow: theme.vars.customShadows.z2,
@@ -141,7 +162,7 @@ const contentComponentStyles = {
141
162
  width: "1px",
142
163
  top: "5px",
143
164
  bottom: "5px",
144
- left: "21px",
165
+ left: "20px",
145
166
  borderLeft: theme.vars.size.borderStroke.container,
146
167
  borderColor: theme.vars.palette.border.secondary,
147
168
  zIndex: 1
@@ -157,6 +178,9 @@ const contentComponentStyles = {
157
178
  * Estilos del menu item principal.
158
179
  */
159
180
  menuItemMain: ({ theme, ownerState }) => ({
181
+ "& .M4LSideBar-containerArrowIconRoot": {
182
+ marginLeft: "unset"
183
+ },
160
184
  "&&& .M4LTypography-root": {
161
185
  ...getTypographyStyles(
162
186
  theme.generalSettings.isMobile,
@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import { u as useSideBar } from "../../hooks/useSideBar/index.js";
3
3
  import { H as HeaderContainerComponentStyled, B as ButtonAnchoredStyled } from "../../slots/SideBarSlots.js";
4
4
  import { useEnvironment } from "@m4l/core";
5
- import { c as PATH_ARROW_RIGHT_ICON } from "../../constants.js";
5
+ import { e as PATH_ARROW_RIGHT_ICON } from "../../constants.js";
6
6
  import { useIsMobile } from "@m4l/graphics";
7
7
  const HeaderComponent = () => {
8
8
  const {
@@ -24,7 +24,7 @@ const HeaderComponent = () => {
24
24
  {
25
25
  icon: `${host_static_assets}/${environment_assets}/${PATH_ARROW_RIGHT_ICON}`,
26
26
  onClick: handleToggleAnchored,
27
- rotationAngle: anchored ? 180 : 0,
27
+ rotationAngle: anchored ? 0 : 180,
28
28
  className: classes.buttonAnchored,
29
29
  variant: "outline",
30
30
  role: "anchored-button"
@@ -11,6 +11,7 @@ const headerComponentStyles = {
11
11
  gap: theme.vars.size.baseSpacings.sp3,
12
12
  paddingLeft: theme.vars.size.baseSpacings.sp4,
13
13
  paddingRight: theme.vars.size.baseSpacings.sp4,
14
+ paddingBottom: theme.vars.size.baseSpacings.sp3,
14
15
  transition: "all 0.5s",
15
16
  "& > div": {
16
17
  transition: "all 0.5s"
@@ -21,7 +21,7 @@ const sideBarDesktopStyles = {
21
21
  height: "100%",
22
22
  width: "100%",
23
23
  overflow: "visible",
24
- borderRight: `1px solid ${theme.vars.palette.border.default}`,
24
+ borderRight: `1px solid ${theme.vars.palette.border.secondary}`,
25
25
  inset: 0,
26
26
  //add hover effect
27
27
  zIndex: 999
@@ -13,6 +13,7 @@ const contentGroupStyles = {
13
13
  alignItems: "center",
14
14
  justifyContent: ownerState?.noItems ? "center" : "flex-start",
15
15
  transition: "all 0.5s",
16
+ paddingTop: theme.vars.size.baseSpacings.sp3,
16
17
  paddingLeft: theme.vars.size.baseSpacings.sp4,
17
18
  paddingRight: theme.vars.size.baseSpacings.sp4,
18
19
  gap: theme.vars.size.baseSpacings.sp4,
@@ -78,22 +79,31 @@ const contentGroupStyles = {
78
79
  containerAdornmentIcon: ({ theme, ownerState }) => ({
79
80
  overflow: "hidden",
80
81
  borderRadius: theme.vars.size.borderRadius["r1-5"],
81
- padding: "1px",
82
82
  display: "flex",
83
83
  justifyContent: "center",
84
84
  alignItems: "center",
85
85
  position: "relative",
86
- ...getSizeStyles(
87
- theme,
88
- ownerState?.size || "medium",
89
- "action",
90
- (sizeValue) => ({
91
- width: sizeValue,
92
- height: sizeValue,
93
- minWidth: sizeValue,
94
- minHeight: sizeValue
95
- })
96
- ),
86
+ width: "fit-content",
87
+ height: "fit-content",
88
+ padding: "1px",
89
+ "& .M4LIcon-root": {
90
+ width: "fit-content",
91
+ height: "fit-content",
92
+ padding: theme.vars.size.baseSpacings["sp0-5"],
93
+ "& .M4LIcon-icon": {
94
+ ...getSizeStyles(
95
+ theme,
96
+ ownerState?.size || "medium",
97
+ "case",
98
+ (sizeValue) => ({
99
+ width: `${sizeValue}!important`,
100
+ height: `${sizeValue}!important`,
101
+ minWidth: `${sizeValue}!important`,
102
+ minHeight: `${sizeValue}!important`
103
+ })
104
+ )
105
+ }
106
+ },
97
107
  ...ownerState?.variant !== "itemActive" && ownerState?.variant !== "normal" && {
98
108
  "& .M4LIcon-icon": {
99
109
  backgroundColor: `${theme.vars.palette.chips.persianGreen.contained.colorTone}!important`
@@ -111,6 +121,7 @@ const contentGroupStyles = {
111
121
  backgroundColor: theme.vars.palette.primary.enabled
112
122
  },
113
123
  ...ownerState?.variant === "itemActive" && {
124
+ boxShadow: theme.vars.customShadows.primary2,
114
125
  background: `linear-gradient(to bottom,
115
126
  ${theme.vars.palette.primary.opacityGradient1},
116
127
  ${theme.vars.palette.primary.opacityGradient2})`,
@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { useEnvironment } from "@m4l/core";
3
3
  import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
4
4
  import { g as getNameDataTestId } from "../../../../tests/utils.js";
5
- import { d as PATH_ARROW_DOWN_ICON } from "../../../../constants.js";
5
+ import { f as PATH_ARROW_DOWN_ICON } from "../../../../constants.js";
6
6
  import { k as ContainerArrowIconRootStyled } from "../../../../slots/SideBarSlots.js";
7
7
  import { u as useSideBar } from "../../../../hooks/useSideBar/index.js";
8
8
  import { I as Icon } from "../../../../../Icon/Icon.js";
@@ -6,7 +6,7 @@ import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
6
6
  import { g as getNameDataTestId } from "../../../../tests/utils.js";
7
7
  import { A as ArrowIcon } from "../ArrowIcon/index.js";
8
8
  import { l as ContainerNodeMenuItemStyled } from "../../../../slots/SideBarSlots.js";
9
- import { a as CLASS_NAME_MENU_ACTIVE, b as CLASS_NAME_ITEM_IN_TREE_ACTIVE, e as CLASS_NAME_HAS_CHILDREN } from "../../../../constants.js";
9
+ 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";
10
10
  import { useModuleSkeleton } from "@m4l/core";
11
11
  import { A as AdornmentIcon } from "../AdormentIcon/AdormentIcon.js";
12
12
  import { u as useCollapse } from "../../../../hooks/useCollapse/useCollapse.js";
@@ -41,7 +41,8 @@ function NodeMenuItem(props) {
41
41
  CLASS_NAME_ITEM_STATE,
42
42
  className,
43
43
  item.children && item.children.length > 0 && CLASS_NAME_HAS_CHILDREN,
44
- item.itemInTreeActive && CLASS_NAME_ITEM_IN_TREE_ACTIVE
44
+ item.itemInTreeActive && CLASS_NAME_ITEM_IN_TREE_ACTIVE,
45
+ !isOpen && CLASS_NAME_ITEM_CLOSED
45
46
  ),
46
47
  label: item.title,
47
48
  selected: item.active,
@@ -3,9 +3,9 @@ import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.j
3
3
  import { T as TAB_CONTENT_KEY_COMPONENT } from "./constants.js";
4
4
  import { T as TabContentRootStyled } from "./slots/TabContentSlots.js";
5
5
  const TabContent = (props) => {
6
- const { children, className, background = false, ...others } = props;
6
+ const { children, className, hasBackground = false, ...others } = props;
7
7
  const root = getComponentSlotRoot(TAB_CONTENT_KEY_COMPONENT);
8
- return /* @__PURE__ */ jsx(TabContentRootStyled, { className: root, ownerState: { background }, ...others, children });
8
+ return /* @__PURE__ */ jsx(TabContentRootStyled, { className: root, ownerState: { hasBackground }, ...others, children });
9
9
  };
10
10
  export {
11
11
  TabContent as T
@@ -20,7 +20,7 @@ const tabContentStyles = {
20
20
  boxSizing: "border-box",
21
21
  zIndex: "0",
22
22
  top: "-1px",
23
- ...ownerState?.background ? {
23
+ ...ownerState?.hasBackground ? {
24
24
  backgroundColor: theme.vars.palette.background.base,
25
25
  paddingLeft: theme.vars.size.baseSpacings.sp2,
26
26
  paddingRight: theme.vars.size.baseSpacings.sp2,
@@ -7,6 +7,6 @@ export interface TabContentProps extends Omit<React.HTMLAttributes<HTMLDivElemen
7
7
  children: React.ReactNode;
8
8
  style?: React.CSSProperties;
9
9
  key?: Key | null | undefined;
10
- background?: boolean;
10
+ hasBackground?: boolean;
11
11
  }
12
12
  export type TabContentStyles = M4LOverridesStyleRules<keyof typeof TabContentSlots, typeof TABS_KEY_COMPONENT, Theme>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "9.2.62-B07072025beta.2",
3
+ "version": "9.2.62-B08072025beta.2",
4
4
  "license": "UNLICENSED",
5
5
  "description": "M4L Components",
6
6
  "lint-staged": {
@@ -11,8 +11,8 @@
11
11
  "@googlemaps/js-api-loader": "^1.16.6",
12
12
  "@hookform/resolvers": "2.9.11",
13
13
  "@m4l/core": "^2.0.0",
14
- "@m4l/graphics": "^7.0.0",
15
- "@m4l/styles": "7.1.30-B07072025beta.2",
14
+ "@m4l/graphics": "7.1.2-B08072025beta.2",
15
+ "@m4l/styles": "7.1.30-B08072025beta.2",
16
16
  "@microlink/react-json-view": "^1.23.3",
17
17
  "@mui/lab": "5.0.0-alpha.173",
18
18
  "@mui/material": "5.16.7",
@@ -24,4 +24,4 @@ export declare const getHeightSizeStyles: (isMobile: boolean, size: Extract<Size
24
24
  * @param property - Propiedad CSS que se desea aplicar (por defecto es 'height').
25
25
  * @returns Objeto con los estilos calculados.
26
26
  */
27
- export declare const getSizeStyles: (theme: Theme, size: Extract<Sizes, "small" | "medium">, variantSize: SizesComponentsTypes, css?: Record<string, any> | ((sizeValue: string | number) => Record<string, any>), property?: "height" | "width") => any;
27
+ export declare const getSizeStyles: (theme: Theme, size: Sizes, variantSize: SizesComponentsTypes, css?: Record<string, any> | ((sizeValue: string | number) => Record<string, any>), property?: "height" | "width") => any;