@m4l/components 9.2.60-13062025.beta.1 → 9.2.60-16062025.beta.1

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 (17) 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 +6 -4
  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 +7 -1
  14. package/components/mui_extended/TabContent/TabContent.styles.js +1 -7
  15. package/components/mui_extended/TextField/TextField.js +1 -1
  16. package/components/mui_extended/TextField/TextField.styles.js +1 -1
  17. 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,8 +85,9 @@ const propertyValueStyles = {
84
85
  width: "100%",
85
86
  display: "flex",
86
87
  justifyContent: "flex-start",
88
+ alignItems: "center",
87
89
  overflow: "hidden",
88
- height: ownerState?.valueHeight ? ownerState?.valueHeight : "auto",
90
+ height: ownerState?.valueHeight ? ownerState?.valueHeight : "20px",
89
91
  ...ownerState?.isForm && {
90
92
  gap: theme.vars.size.baseSpacings["sp0-5"],
91
93
  flexDirection: "column"
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
@@ -101,7 +101,10 @@ const accordionStyles = {
101
101
  * **************************************************************
102
102
  */
103
103
  accordionDetails: ({ theme, ownerState }) => ({
104
- padding: theme.vars.size.baseSpacings.sp3,
104
+ paddingLeft: theme.vars.size.baseSpacings.sp3,
105
+ paddingRight: theme.vars.size.baseSpacings.sp3,
106
+ paddingTop: theme.vars.size.baseSpacings.sp1,
107
+ paddingBottom: theme.vars.size.baseSpacings.sp1,
105
108
  background: theme.vars.palette.background.default,
106
109
  display: "flex",
107
110
  flexDirection: "column",
@@ -111,6 +114,9 @@ const accordionStyles = {
111
114
  ...ownerState?.variant === "outlined" && {
112
115
  borderBottomLeftRadius: theme.size.borderRadius["r1-5"],
113
116
  borderBottomRightRadius: theme.size.borderRadius["r1-5"]
117
+ },
118
+ "& .MuiStack-root .M4LPropertyValue-root:last-of-type": {
119
+ borderBottom: "unset"
114
120
  }
115
121
  })
116
122
  };
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.1",
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": "7.1.2-16062025.beta.1",
15
+ "@m4l/styles": "7.1.29-16062025.beta.1",
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",