@m4l/components 9.2.60-13062025.beta.1 → 9.2.60-16062025.beta.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.
Files changed (18) hide show
  1. package/components/DataGrid/Datagrid.styles.js +1 -1
  2. package/components/PropertyValue/PropertyValue.js +2 -1
  3. package/components/PropertyValue/PropertyValue.styles.js +5 -3
  4. package/components/PropertyValue/types.d.ts +4 -0
  5. package/components/SideBar/helpers/getMenuDataWithState/index.js +3 -0
  6. package/components/SideBar/subcomponents/ContentComponent/style.js +24 -19
  7. package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/index.js +20 -4
  8. package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/types.d.ts +1 -0
  9. package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItemMain/NodeMenuItemMain.js +3 -2
  10. package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useRightActions.js +21 -21
  11. package/components/extended/React-Resizable/helpers.js +1 -1
  12. package/components/hook-form/RHFAutocomplete/RFHAutocompleteStyles.js +1 -1
  13. package/components/mui_extended/Accordion/styles.js +9 -2
  14. package/components/mui_extended/Tab/Tab.styles.js +2 -1
  15. package/components/mui_extended/TabContent/TabContent.styles.js +1 -7
  16. package/components/mui_extended/TextField/TextField.js +1 -1
  17. package/components/mui_extended/TextField/TextField.styles.js +1 -1
  18. package/package.json +3 -3
package/components/DataGrid/Datagrid.styles.js CHANGED
@@ -84,7 +84,7 @@ const dataGridStyles = {
84
84
  border: theme.vars.size.borderStroke.container,
85
85
  borderColor: theme.vars.palette?.border.disabled,
86
86
  padding: theme.vars.size.baseSpacings.sp1,
87
- boxShadow: theme.customShadows?.z1
87
+ boxShadow: theme.vars.customShadows?.z1
88
88
  }),
89
89
  /**
90
90
  * Estilos para el contenedor de las acciones derecho
package/components/PropertyValue/PropertyValue.js CHANGED
@@ -36,7 +36,8 @@ function PropertyValue(props) {
36
36
  disabled: isForm && disabled ? disabled : false,
37
37
  isForm: isForm ? true : false,
38
38
  semanticWidth,
39
- valueHeight
39
+ valueHeight,
40
+ size: currentSize
40
41
  };
41
42
  const renderIcon = () => {
42
43
  if (!startAdornment) {
package/components/PropertyValue/PropertyValue.styles.js CHANGED
@@ -45,11 +45,11 @@ const propertyValueStyles = {
45
45
  display: "flex",
46
46
  flexDirection: ownerState?.isForm ? "column" : "row",
47
47
  justifyContent: ownerState?.isForm ? "space-between" : "left",
48
- alignItems: "flex-start",
48
+ alignItems: "center",
49
49
  gap: theme.vars.size.baseSpacings["sp1"],
50
50
  width: ownerState?.semanticWidth ? "auto" : "200px",
51
51
  overflow: "hidden",
52
- color: theme.palette.text.primary,
52
+ color: theme.vars.palette.text.primary,
53
53
  paddingTop: !ownerState?.isForm ? theme.vars.size.baseSpacings.sp1 : void 0,
54
54
  paddingBottom: !ownerState?.isForm ? theme.vars.size.baseSpacings.sp1 : void 0,
55
55
  borderBottom: !ownerState?.isForm ? `${theme.vars.palette.border.disabled} solid 1px` : "none",
@@ -62,6 +62,7 @@ const propertyValueStyles = {
62
62
  ...theme.generalSettings.isMobile && {
63
63
  flexDirection: "column"
64
64
  },
65
+ height: "auto",
65
66
  ...semanticStyle
66
67
  };
67
68
  },
@@ -72,7 +73,7 @@ const propertyValueStyles = {
72
73
  display: "flex",
73
74
  alignItems: "center",
74
75
  fontSize: theme.typography.body2.fontSize,
75
- color: theme.palette.text.primary,
76
+ color: theme.vars.palette.text.primary,
76
77
  gap: theme.vars.size.baseSpacings["sp1"],
77
78
  overflow: "hidden",
78
79
  width: "100%"
@@ -84,6 +85,7 @@ const propertyValueStyles = {
84
85
  width: "100%",
85
86
  display: "flex",
86
87
  justifyContent: "flex-start",
88
+ alignItems: "center",
87
89
  overflow: "hidden",
88
90
  height: ownerState?.valueHeight ? ownerState?.valueHeight : "auto",
89
91
  ...ownerState?.isForm && {
package/components/PropertyValue/types.d.ts CHANGED
@@ -91,6 +91,10 @@ export interface PropertyVaLueOwnerState extends Pick<PropertyValueProps, 'disab
91
91
  * Indica si el componente está en modo formulario.
92
92
  */
93
93
  isForm: boolean;
94
+ /**
95
+ * Tamaño del componente.
96
+ */
97
+ size?: PropertyValueProps['size'];
94
98
  /**
95
99
  * Propiedades adicionales para estilos o comportamientos personalizados.
96
100
  */
package/components/SideBar/helpers/getMenuDataWithState/index.js CHANGED
@@ -14,6 +14,9 @@ const getMenuDataWithState = ({ menuData, moduleSelectedId, initialLevel = 0 })
14
14
  if (child.active) {
15
15
  return { ...child, itemInTreeActive: false };
16
16
  }
17
+ if (!child.active && !(child.children?.length ?? 0 > 0)) {
18
+ return { ...child, itemInTreeActive: true, active: false };
19
+ }
17
20
  if (index <= indexTrue) {
18
21
  return {
19
22
  ...child,
package/components/SideBar/subcomponents/ContentComponent/style.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { b as CLASS_NAME_IS_ROOT, c as CLASS_NAME_MENU_ACTIVE, d as CLASS_NAME_ITEM_IN_TREE_ACTIVE, e as CLASS_NAME_HAS_CHILDREN } from "../../constants.js";
2
2
  import { g as getTypographyStyles } from "../../../../utils/getTypographyStyles.js";
3
- import { a as getHeightSizeStyles, g as getSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
3
+ import { g as getSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
4
4
  const contentComponentStyles = {
5
5
  /**
6
6
  * Estilos del contenedor principal del sidebar
@@ -87,34 +87,36 @@ const contentComponentStyles = {
87
87
  marginLeft: theme.vars.size.baseSpacings.sp4,
88
88
  display: "flex",
89
89
  flexDirection: "column",
90
- overflow: "hidden",
91
- gap: theme.vars.size.baseSpacings.sp1,
92
- ...getHeightSizeStyles(
93
- theme.generalSettings.isMobile,
94
- ownerState?.size || "medium",
95
- "container",
96
- (height) => {
97
- return {
98
- height: "auto",
99
- minHeight: height
100
- };
90
+ overflow: "visible",
91
+ '& [class*="M4LMenuItem-root"]:not(.menu-active)': {
92
+ "& .M4LTypography-root": {
93
+ color: `${theme.vars.palette.text.secondary}!important`
94
+ },
95
+ "& .M4LIcon-icon": {
96
+ backgroundColor: `${theme.vars.palette.text.secondary}!important`
101
97
  }
102
- ),
98
+ },
103
99
  [`&.${CLASS_NAME_IS_ROOT}`]: {
104
100
  margin: "unset"
105
101
  },
106
102
  [`& > .M4LMenuItem-root:first-of-type:not(.${CLASS_NAME_MENU_ACTIVE}).${CLASS_NAME_ITEM_IN_TREE_ACTIVE}`]: {
107
103
  borderColor: theme.vars.palette.divider,
104
+ // Linea de referencia vertical
108
105
  "&::before": {
109
106
  content: '""',
110
107
  position: "absolute",
111
- top: 0,
112
- bottom: 0,
108
+ top: "-25%",
109
+ bottom: "-25%",
110
+ height: "150%",
113
111
  left: 0,
114
112
  width: 2,
115
113
  borderLeft: theme.vars.size.borderStroke.container,
116
- borderColor: theme.vars.palette.border.default
114
+ borderColor: theme.vars.palette.border.default,
115
+ ...ownerState?.isLastSibling && !ownerState?.hasChildren && {
116
+ height: "75%"
117
+ }
117
118
  },
119
+ // Linea de referencia horizontal
118
120
  [`&:not(.${CLASS_NAME_HAS_CHILDREN}):after`]: {
119
121
  content: '""',
120
122
  position: "absolute",
@@ -133,13 +135,16 @@ const contentComponentStyles = {
133
135
  "&::before": {
134
136
  content: '""',
135
137
  position: "absolute",
136
- height: "50%",
137
- top: 0,
138
+ height: "25%",
139
+ top: "25%",
138
140
  bottom: 0,
139
141
  left: 0,
140
142
  width: 2,
141
143
  borderLeft: theme.vars.size.borderStroke.container,
142
- borderColor: theme.vars.palette.primary.enabled
144
+ borderColor: theme.vars.palette.primary.enabled,
145
+ ...!ownerState?.isLastSibling && !ownerState?.hasChildren && {
146
+ height: "50%"
147
+ }
143
148
  },
144
149
  "&:after": {
145
150
  content: '""',
package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/index.js CHANGED
@@ -12,7 +12,7 @@ import { u as useCollapse } from "../../../../hooks/useCollapse/useCollapse.js";
12
12
  import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
13
13
  import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
14
14
  function NodeMenuItem(props) {
15
- const { item, size, defaultOpen = false, className } = props;
15
+ const { item, size, defaultOpen = false, className, isLastSibling = false } = props;
16
16
  const { urlIconPrefix, classes } = useSideBar();
17
17
  const { isOpen, handlerClick, hasChildren } = useCollapse(item, defaultOpen);
18
18
  const { currentSize } = useComponentSize(size);
@@ -20,7 +20,9 @@ function NodeMenuItem(props) {
20
20
  const ownerState = {
21
21
  active: item.active,
22
22
  itemInTreeActive: item.itemInTreeActive,
23
- sidebarSize: currentSize
23
+ sidebarSize: currentSize,
24
+ hasChildren,
25
+ isLastSibling
24
26
  };
25
27
  const CLASS_NAME_ITEM_STATE = clsx(item.active && CLASS_NAME_MENU_ACTIVE, item.itemInTreeActive && CLASS_NAME_ITEM_IN_TREE_ACTIVE);
26
28
  return /* @__PURE__ */ jsxs(
@@ -34,7 +36,12 @@ function NodeMenuItem(props) {
34
36
  /* @__PURE__ */ jsx(
35
37
  MenuItem,
36
38
  {
37
- className: clsx(CLASS_NAME_ITEM_STATE, className, item.children && item.children.length > 0 && CLASS_NAME_HAS_CHILDREN),
39
+ className: clsx(
40
+ CLASS_NAME_ITEM_STATE,
41
+ className,
42
+ item.children && item.children.length > 0 && CLASS_NAME_HAS_CHILDREN,
43
+ item.itemInTreeActive && CLASS_NAME_ITEM_IN_TREE_ACTIVE
44
+ ),
38
45
  label: item.title,
39
46
  selected: item.active,
40
47
  startIcon: `${urlIconPrefix}${item.iconUrl}`,
@@ -43,7 +50,16 @@ function NodeMenuItem(props) {
43
50
  size: currentSize
44
51
  }
45
52
  ),
46
- hasChildren ? /* @__PURE__ */ jsx(Collapse, { in: isOpen, timeout: "auto", unmountOnExit: true, children: (item.children || []).map((child) => /* @__PURE__ */ jsx(NodeMenuItem, { item: child, size: currentSize, defaultOpen: isSkeleton ? false : child.active }, child.title)) }) : null
53
+ hasChildren ? /* @__PURE__ */ jsx(Collapse, { in: isOpen, timeout: "auto", unmountOnExit: true, children: (item.children || []).map((child, index) => /* @__PURE__ */ jsx(
54
+ NodeMenuItem,
55
+ {
56
+ item: child,
57
+ size: currentSize,
58
+ defaultOpen: isSkeleton ? false : child.active,
59
+ isLastSibling: item.children?.length === index + 1
60
+ },
61
+ child.title
62
+ )) }) : null
47
63
  ]
48
64
  }
49
65
  );
package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/types.d.ts CHANGED
@@ -5,4 +5,5 @@ export type NodeMenuItemProps = {
5
5
  defaultOpen?: boolean;
6
6
  size: Extract<Sizes, 'small' | 'medium'>;
7
7
  className?: string;
8
+ isLastSibling?: boolean;
8
9
  };
package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItemMain/NodeMenuItemMain.js CHANGED
@@ -36,13 +36,14 @@ const NodeMenuItemMain = (props) => {
36
36
  size: currentSize
37
37
  }
38
38
  ),
39
- /* @__PURE__ */ jsx(Collapse, { in: isOpen, timeout: "auto", unmountOnExit: true, children: (item.children || []).map((child) => /* @__PURE__ */ jsx(
39
+ /* @__PURE__ */ jsx(Collapse, { in: isOpen, timeout: "auto", unmountOnExit: true, children: (item.children || []).map((child, index) => /* @__PURE__ */ jsx(
40
40
  NodeMenuItem,
41
41
  {
42
42
  item: child,
43
43
  size: currentSize,
44
44
  className: clsx(CLASS_NAME_IS_ROOT),
45
- defaultOpen: isSkeleton ? false : true
45
+ defaultOpen: isSkeleton ? false : true,
46
+ isLastSibling: item.children?.length === index + 1
46
47
  },
47
48
  child.title
48
49
  )) })
package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useRightActions.js CHANGED
@@ -31,46 +31,46 @@ const useRightActions = ({
31
31
  const actions = [];
32
32
  actions.push({
33
33
  place: "right",
34
- key: "maximize",
35
- iconUrl: maximizedId ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NORMALIZE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.MAXIMIZE}`,
36
- label: maximizedId ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_minimize_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_maximize_window)),
37
- placement: "bottom-end",
34
+ key: "collapseToggle",
35
+ iconUrl: !collapsed ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.COLLAPSE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.UNCOLLPASE}`,
36
+ label: !collapsed ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_collapse_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_uncollapse_window)),
38
37
  /**
39
- * Acción de maximize/normalize.
38
+ * Acción de collapse/expand.
40
39
  */
41
40
  onClick: () => {
42
41
  if (areaId) {
43
- if (maximizedId) {
44
- normalizeLayouts(areaId);
42
+ if (collapsed) {
43
+ unColapseLayoutItem(areaId, windowId);
45
44
  } else {
46
- maximizeLayout(areaId, windowId);
45
+ colapseLayoutItem(areaId, windowId);
47
46
  }
48
47
  }
49
48
  },
50
- disabled: false,
51
- color: "info",
52
- className: "expand-toggle window-actions"
49
+ disabled: !(maximizedId === void 0),
50
+ color: "warning",
51
+ className: "collapse-toggle window-actions"
53
52
  });
54
53
  actions.push({
55
54
  place: "right",
56
- key: "collapseToggle",
57
- iconUrl: !collapsed ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.COLLAPSE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.UNCOLLPASE}`,
58
- label: !collapsed ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_collapse_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_uncollapse_window)),
55
+ key: "maximize",
56
+ iconUrl: maximizedId ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NORMALIZE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.MAXIMIZE}`,
57
+ label: maximizedId ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_minimize_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_maximize_window)),
58
+ placement: "bottom-end",
59
59
  /**
60
- * Acción de collapse/expand.
60
+ * Acción de maximize/normalize.
61
61
  */
62
62
  onClick: () => {
63
63
  if (areaId) {
64
- if (collapsed) {
65
- unColapseLayoutItem(areaId, windowId);
64
+ if (maximizedId) {
65
+ normalizeLayouts(areaId);
66
66
  } else {
67
- colapseLayoutItem(areaId, windowId);
67
+ maximizeLayout(areaId, windowId);
68
68
  }
69
69
  }
70
70
  },
71
- disabled: !(maximizedId === void 0),
72
- color: "warning",
73
- className: "collapse-toggle window-actions"
71
+ disabled: false,
72
+ color: "info",
73
+ className: "expand-toggle window-actions"
74
74
  });
75
75
  return actions;
76
76
  }, [
package/components/extended/React-Resizable/helpers.js CHANGED
@@ -6,7 +6,7 @@ const getReactResizableStyles = (theme, ownerState) => {
6
6
  borderStyle: "solid",
7
7
  borderWidth: `${borderWith}px`,
8
8
  display: ownerState?.disabled ? "none" : "block",
9
- borderColor: theme.palette.border.default,
9
+ borderColor: theme.vars.palette.border.default,
10
10
  borderRadius: "0%",
11
11
  backgroundImage: "none",
12
12
  position: "absolute",
package/components/hook-form/RHFAutocomplete/RFHAutocompleteStyles.js CHANGED
@@ -16,7 +16,7 @@ const rhfAutocompleteSyles = {
16
16
  */
17
17
  label: ({ theme, ownerState }) => ({
18
18
  ...ownerState?.disabled === true && {
19
- theme: theme.palette.text.disabled
19
+ theme: theme.vars.palette.text.disabled
20
20
  }
21
21
  })
22
22
  };
package/components/mui_extended/Accordion/styles.js CHANGED
@@ -84,7 +84,8 @@ const accordionStyles = {
84
84
  * *******************************************************************
85
85
  */
86
86
  accordionLabel: ({ theme }) => ({
87
- color: theme.vars.palette.text.primary
87
+ color: theme.vars.palette.text.primary,
88
+ paddingLeft: theme.vars.size.baseSpacings.sp1
88
89
  }),
89
90
  /**
90
91
  * *************************************************
@@ -101,7 +102,10 @@ const accordionStyles = {
101
102
  * **************************************************************
102
103
  */
103
104
  accordionDetails: ({ theme, ownerState }) => ({
104
- padding: theme.vars.size.baseSpacings.sp3,
105
+ paddingLeft: theme.vars.size.baseSpacings.sp3,
106
+ paddingRight: theme.vars.size.baseSpacings.sp3,
107
+ paddingTop: theme.vars.size.baseSpacings.sp1,
108
+ paddingBottom: theme.vars.size.baseSpacings.sp1,
105
109
  background: theme.vars.palette.background.default,
106
110
  display: "flex",
107
111
  flexDirection: "column",
@@ -111,6 +115,9 @@ const accordionStyles = {
111
115
  ...ownerState?.variant === "outlined" && {
112
116
  borderBottomLeftRadius: theme.size.borderRadius["r1-5"],
113
117
  borderBottomRightRadius: theme.size.borderRadius["r1-5"]
118
+ },
119
+ "& .MuiStack-root .M4LPropertyValue-root:last-of-type": {
120
+ borderBottom: "unset"
114
121
  }
115
122
  })
116
123
  };
package/components/mui_extended/Tab/Tab.styles.js CHANGED
@@ -124,8 +124,9 @@ const tabStyles = {
124
124
  * Slot de Tipografía:
125
125
  * - **Estilos Generales**: Configura el color base del texto, aplicando especificidad para clases específicas.
126
126
  */
127
- tipography: ({ ownerState }) => ({
127
+ tipography: ({ theme, ownerState }) => ({
128
128
  cursor: "pointer",
129
+ paddingLeft: theme.vars.size.baseSpacings.sp1,
129
130
  ...ownerState?.tabSkeleton && {
130
131
  width: "32px"
131
132
  }
package/components/mui_extended/TabContent/TabContent.styles.js CHANGED
@@ -25,13 +25,7 @@ const tabContentStyles = {
25
25
  paddingLeft: theme.vars.size.baseSpacings.sp2,
26
26
  paddingRight: theme.vars.size.baseSpacings.sp2,
27
27
  paddingBottom: theme.vars.size.baseSpacings.sp2
28
- } : {},
29
- "& .M4LStack-root": {
30
- gap: `${theme.vars.size.baseSpacings.sp2} !important`
31
- },
32
- "&.M4LTabContent-root > div": {
33
- gap: theme.vars.size.baseSpacings.sp3
34
- }
28
+ } : {}
35
29
  })
36
30
  };
37
31
  export {
package/components/mui_extended/TextField/TextField.js CHANGED
@@ -25,7 +25,7 @@ const TextField = forwardRef(function TextField2(props, ref) {
25
25
  const { currentSize } = useComponentSize(size);
26
26
  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
27
27
  const theme = useTheme();
28
- const paletteColor = error && theme.palette.error || theme.palette.primary;
28
+ const paletteColor = error && theme.vars.palette.error || theme.vars.palette.primary;
29
29
  const ownerState = {
30
30
  size: adjustedSize,
31
31
  disabled,
package/components/mui_extended/TextField/TextField.styles.js CHANGED
@@ -59,7 +59,7 @@ const textFieldStyles = {
59
59
  "body"
60
60
  ),
61
61
  "&::placeholder": {
62
- color: theme.palette.text.disabled
62
+ color: theme.vars.palette.text.disabled
63
63
  },
64
64
  "&:-webkit-autofill": {
65
65
  backgroundColor: "transparent!important"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "9.2.60-13062025.beta.1",
3
+ "version": "9.2.60-16062025.beta.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.1.2-13062025.beta.1",
15
- "@m4l/styles": "7.1.29-13062025.beta.1",
14
+ "@m4l/graphics": "9.2.60-16062025.beta.2",
15
+ "@m4l/styles": "7.1.29-16062025.beta.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",