@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.
- package/components/AppBar/AppBar.js +1 -1
- package/components/AppBar/constants.d.ts +1 -1
- package/components/AppBar/constants.js +1 -1
- package/components/SideBar/constants.d.ts +2 -1
- package/components/SideBar/constants.js +7 -5
- package/components/SideBar/subcomponents/ContentComponent/style.js +55 -31
- package/components/SideBar/subcomponents/HeaderComponent/HeaderComponent.js +2 -2
- package/components/SideBar/subcomponents/HeaderComponent/styles.js +1 -0
- package/components/SideBar/subcomponents/SideBarDesktop/styles.js +1 -1
- package/components/SideBar/subcomponents/TreeGroupItems/styles.js +23 -12
- package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/ArrowIcon/index.js +1 -1
- package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/index.js +3 -2
- package/components/mui_extended/TabContent/TabContent.js +2 -2
- package/components/mui_extended/TabContent/TabContent.styles.js +1 -1
- package/components/mui_extended/TabContent/types.d.ts +1 -1
- package/package.json +3 -3
- package/utils/getSizeStyles/getSizeStyles.d.ts +1 -1
|
@@ -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 ?
|
|
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/
|
|
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/
|
|
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/
|
|
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/
|
|
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
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
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
|
-
|
|
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:
|
|
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:
|
|
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: "-
|
|
90
|
-
borderRadius: "
|
|
107
|
+
left: "-6px",
|
|
108
|
+
borderRadius: theme.vars.size.borderRadius["r0-5"],
|
|
91
109
|
backgroundColor: theme.vars.palette.primary.focus,
|
|
92
|
-
zIndex:
|
|
110
|
+
zIndex: 2
|
|
93
111
|
},
|
|
94
112
|
"&::after": {
|
|
95
113
|
content: '""',
|
|
96
114
|
position: "absolute",
|
|
97
115
|
width: "1px",
|
|
98
|
-
top: "
|
|
99
|
-
bottom: "
|
|
100
|
-
left: "-
|
|
101
|
-
backgroundImage: `linear-gradient(
|
|
102
|
-
|
|
103
|
-
${theme.vars.palette.primary.opacityGradient1}
|
|
104
|
-
|
|
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: "
|
|
121
|
-
bottom: "
|
|
122
|
-
left: "-
|
|
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
|
|
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: "
|
|
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 {
|
|
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 ?
|
|
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.
|
|
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
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
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 {
|
|
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,
|
|
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,
|
|
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: {
|
|
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?.
|
|
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
|
-
|
|
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-
|
|
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": "
|
|
15
|
-
"@m4l/styles": "7.1.30-
|
|
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:
|
|
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;
|