@m4l/components 9.67.0 → 9.67.1-beta-chore-videoplayer-videojs-rc4.0

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 (3) hide show
  1. package/components/Chip/ChipStyles.d.ts.map +1 -1
  2. package/components/Chip/ChipStyles.js +81 -66
  3. package/package.json +8 -8
package/components/Chip/ChipStyles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChipStyles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Chip/ChipStyles.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrD,eAAO,MAAM,UAAU,EAAE,UA6NxB,CAAC"}
1
+ {"version":3,"file":"ChipStyles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Chip/ChipStyles.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrD,eAAO,MAAM,UAAU,EAAE,UA4OxB,CAAC"}
package/components/Chip/ChipStyles.js CHANGED
@@ -1,32 +1,32 @@
1
1
  import { getIconPaintStyles as d } from "@m4l/base";
2
- import { getSizeStyles as a } from "../../utils/getSizeStyles/getSizeStyles.js";
2
+ import { getSizeStyles as o } from "../../utils/getSizeStyles/getSizeStyles.js";
3
3
  import { getColors as l } from "./helpers.js";
4
- const x = {
4
+ const f = {
5
5
  /**
6
6
  * Styles for the root element of the chip.
7
7
  */
8
- root: ({ theme: n, ownerState: i }) => {
9
- const { color: s, finalPalette: o } = l(n, i), r = n.vars.palette.chips.default.contained.backgroundColor, e = i?.hasDescription ? r : i?.opacity ? o.backgroundColor : o.backgroundColorTone, g = i?.hasDescription ? r : i?.opacity ? o.backgroundHover : o.backgroundHoverTone, c = i?.hasDescription ? r : i?.opacity ? o.backgroundActive : o.backgroundActiveTone, b = i?.variant === "contained" && i?.opacity === !1, p = d(s), h = n.vars.palette.chips.error.contained.backgroundColorTone, v = d(h);
8
+ root: ({ theme: s, ownerState: i }) => {
9
+ const { color: n, finalPalette: a } = l(s, i), t = s.vars.palette.chips.default.contained.backgroundColor, e = i?.hasDescription ? t : i?.opacity ? a.backgroundColor : a.backgroundColorTone, g = i?.hasDescription ? t : i?.opacity ? a.backgroundHover : a.backgroundHoverTone, c = i?.hasDescription ? t : i?.opacity ? a.backgroundActive : a.backgroundActiveTone, b = i?.variant === "contained" && i?.opacity === !1, p = d(n), h = s.vars.palette.chips.error.contained.backgroundColorTone, m = d(h);
10
10
  return {
11
11
  display: "flex",
12
12
  alignItems: "center",
13
- padding: i?.hasDescription ? n.vars.size.baseSpacings.sp2 : n.vars.size.baseSpacings.sp1,
14
- borderRadius: n.vars.size.borderRadius["r1-5"],
15
- gap: i?.hasDescription ? n.vars.size.baseSpacings.sp2 : n.vars.size.baseSpacings["sp0-5"],
13
+ padding: i?.hasDescription ? s.vars.size.baseSpacings.sp2 : s.vars.size.baseSpacings.sp1,
14
+ borderRadius: s.vars.size.borderRadius["r1-5"],
15
+ gap: i?.hasDescription ? s.vars.size.baseSpacings.sp2 : s.vars.size.baseSpacings["sp0-5"],
16
16
  width: "max-content",
17
17
  ...i?.ellipsis && {
18
18
  maxWidth: "100%"
19
19
  },
20
20
  cursor: "pointer",
21
- color: s,
21
+ color: n,
22
22
  backgroundColor: i?.variant !== "outlined" ? e : "transparent",
23
- ...a(
24
- n,
23
+ ...o(
24
+ s,
25
25
  i?.size || "medium",
26
26
  "base",
27
- (t) => ({
28
- height: i?.hasDescription ? "fit-content" : t,
29
- minHeight: t
27
+ (r) => ({
28
+ height: i?.hasDescription ? "fit-content" : r,
29
+ minHeight: r
30
30
  })
31
31
  ),
32
32
  //TODO: OJO no OLVIDAR interactive ************ JUAN
@@ -39,24 +39,24 @@ const x = {
39
39
  },
40
40
  "&:focus-visible": {
41
41
  boxShadow: "none",
42
- outline: `${n.vars.size.borderStroke.container} ${n.vars.palette.border.main}`,
42
+ outline: `${s.vars.size.borderStroke.container} ${s.vars.palette.border.main}`,
43
43
  backgroundColor: c
44
44
  }
45
45
  },
46
46
  ...i?.variant === "outlined" && {
47
- border: `${n.vars.size.borderStroke.container}`,
47
+ border: `${s.vars.size.borderStroke.container}`,
48
48
  borderColor: e
49
49
  },
50
50
  "&&& .M4LChip-closeIcon": {
51
51
  ...p,
52
- "&:hover, &:focus-visible, &:active": b ? p : v,
53
- ...a(
54
- n,
52
+ "&:hover, &:focus-visible, &:active": b ? p : m,
53
+ ...o(
54
+ s,
55
55
  i?.size || "medium",
56
56
  "base",
57
- (t) => ({
58
- height: t,
59
- width: t
57
+ (r) => ({
58
+ height: r,
59
+ width: r
60
60
  })
61
61
  )
62
62
  },
@@ -66,71 +66,86 @@ const x = {
66
66
  /**
67
67
  * Styles for the text chip element.
68
68
  */
69
- textChip: ({ theme: n, ownerState: i }) => ({
69
+ textChip: ({ theme: s, ownerState: i }) => ({
70
70
  whiteSpace: "nowrap",
71
- paddingLeft: i?.hasDescription ? 0 : n.vars.size.baseSpacings.sp1,
72
- paddingRight: i?.hasDescription ? 0 : n.vars.size.baseSpacings.sp1,
71
+ paddingLeft: i?.hasDescription ? 0 : s.vars.size.baseSpacings.sp1,
72
+ paddingRight: i?.hasDescription ? 0 : s.vars.size.baseSpacings.sp1,
73
+ // `textWrapper` aligns its children to `flex-start`, which sizes a `nowrap` text to its
74
+ // max-content width whatever the wrapper measures. Without this cap the Typography is never
75
+ // narrower than its text, so its ellipsis `overflow: hidden` has nothing to clip and the
76
+ // label paints past the chip. `border-box` keeps the horizontal padding inside the cap.
77
+ ...i?.ellipsis && {
78
+ minWidth: 0,
79
+ maxWidth: "100%",
80
+ boxSizing: "border-box"
81
+ },
73
82
  ...i?.hasDescription && {
74
- color: n.vars.palette.text.primary
83
+ color: s.vars.palette.text.primary
75
84
  }
76
85
  }),
77
86
  /**
78
87
  * Styles for the chip description text.
79
88
  */
80
- descriptionChip: ({ theme: n, ownerState: i }) => ({
89
+ descriptionChip: ({ theme: s, ownerState: i }) => ({
81
90
  whiteSpace: "nowrap",
82
- color: n.vars.palette.text.secondary,
83
- paddingLeft: i?.hasDescription ? 0 : n.vars.size.baseSpacings.sp1,
84
- paddingRight: i?.hasDescription ? 0 : n.vars.size.baseSpacings.sp1
91
+ color: s.vars.palette.text.secondary,
92
+ paddingLeft: i?.hasDescription ? 0 : s.vars.size.baseSpacings.sp1,
93
+ paddingRight: i?.hasDescription ? 0 : s.vars.size.baseSpacings.sp1,
94
+ // Same bound as `textChip`, so a long description truncates instead of overflowing.
95
+ ...i?.ellipsis && {
96
+ minWidth: 0,
97
+ maxWidth: "100%",
98
+ boxSizing: "border-box"
99
+ }
85
100
  }),
86
101
  /**
87
102
  * Styles for label + description wrapper.
88
103
  */
89
- textWrapper: ({ theme: n }) => ({
104
+ textWrapper: ({ theme: s }) => ({
90
105
  display: "flex",
91
106
  flexDirection: "column",
92
- gap: n.vars.size.baseSpacings["sp0-5"],
107
+ gap: s.vars.size.baseSpacings["sp0-5"],
93
108
  minWidth: 0,
94
109
  alignItems: "flex-start"
95
110
  }),
96
111
  /**
97
112
  * Styles for the chip icon element.
98
113
  */
99
- chipIcon: ({ theme: n, ownerState: i }) => {
100
- const { color: s } = l(n, i);
114
+ chipIcon: ({ theme: s, ownerState: i }) => {
115
+ const { color: n } = l(s, i);
101
116
  return {
102
117
  "& .M4LIcon-icon": {
103
- backgroundColor: i?.hasDescription ? n.vars.palette.text.primary : `${s} !important`
118
+ backgroundColor: i?.hasDescription ? s.vars.palette.text.primary : `${n} !important`
104
119
  }
105
120
  };
106
121
  },
107
122
  /**
108
123
  * Styles for image-only start adornment wrapper.
109
124
  */
110
- startAdornmentImageWrapper: ({ theme: n, ownerState: i }) => ({
111
- marginRight: n.vars.size.baseSpacings["sp0-5"],
125
+ startAdornmentImageWrapper: ({ theme: s, ownerState: i }) => ({
126
+ marginRight: s.vars.size.baseSpacings["sp0-5"],
112
127
  display: "inline-flex",
113
128
  alignItems: "center",
114
129
  "& .M4LImage-root": {
115
130
  width: i?.hasDescription ? "fit-content" : "16px!important",
116
131
  height: i?.hasDescription ? "fit-content" : "16px!important"
117
132
  },
118
- ...a(
119
- n,
133
+ ...o(
134
+ s,
120
135
  i?.size || "medium",
121
136
  "container",
122
- (s) => ({
123
- maxWidth: s,
124
- maxHeight: s
137
+ (n) => ({
138
+ maxWidth: n,
139
+ maxHeight: n
125
140
  })
126
141
  ),
127
- ...a(
128
- n,
142
+ ...o(
143
+ s,
129
144
  i?.size || "medium",
130
145
  "base",
131
- (s) => ({
132
- minWidth: s,
133
- minHeight: s,
146
+ (n) => ({
147
+ minWidth: n,
148
+ minHeight: n,
134
149
  height: "fit-content",
135
150
  width: "fit-content"
136
151
  })
@@ -139,30 +154,30 @@ const x = {
139
154
  /**
140
155
  * Styles for image-only end adornment wrapper.
141
156
  */
142
- endAdornmentImageWrapper: ({ theme: n, ownerState: i }) => ({
143
- marginLeft: n.vars.size.baseSpacings["sp0-5"],
157
+ endAdornmentImageWrapper: ({ theme: s, ownerState: i }) => ({
158
+ marginLeft: s.vars.size.baseSpacings["sp0-5"],
144
159
  display: "inline-flex",
145
160
  alignItems: "center",
146
161
  "& .M4LImage-root": {
147
162
  width: i?.hasDescription ? "fit-content" : "16px!important",
148
163
  height: i?.hasDescription ? "fit-content" : "16px!important"
149
164
  },
150
- ...a(
151
- n,
165
+ ...o(
166
+ s,
152
167
  i?.size || "medium",
153
168
  "container",
154
- (s) => ({
155
- maxWidth: s,
156
- maxHeight: s
169
+ (n) => ({
170
+ maxWidth: n,
171
+ maxHeight: n
157
172
  })
158
173
  ),
159
- ...a(
160
- n,
174
+ ...o(
175
+ s,
161
176
  i?.size || "medium",
162
177
  "base",
163
- (s) => ({
164
- minWidth: s,
165
- minHeight: s,
178
+ (n) => ({
179
+ minWidth: n,
180
+ minHeight: n,
166
181
  height: "fit-content",
167
182
  width: "fit-content"
168
183
  })
@@ -189,20 +204,20 @@ const x = {
189
204
  /**
190
205
  * Styles for the skeleton chip element.
191
206
  */
192
- skeletonChip: ({ theme: n, ownerState: i }) => ({
207
+ skeletonChip: ({ theme: s, ownerState: i }) => ({
193
208
  width: "100%",
194
- background: n.vars.palette.skeleton.default,
195
- ...a(
196
- n,
209
+ background: s.vars.palette.skeleton.default,
210
+ ...o(
211
+ s,
197
212
  i?.size || "medium",
198
213
  "base",
199
- (s) => ({
200
- height: `${s}!important`,
201
- minHeight: `${s}!important`
214
+ (n) => ({
215
+ height: `${n}!important`,
216
+ minHeight: `${n}!important`
202
217
  })
203
218
  )
204
219
  })
205
220
  };
206
221
  export {
207
- x as chipStyles
222
+ f as chipStyles
208
223
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "9.67.0",
3
+ "version": "9.67.1-beta-chore-videoplayer-videojs-rc4.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -55,22 +55,22 @@
55
55
  "react-transition-group": "4.4.5",
56
56
  "react-rnd": "10.5.2",
57
57
  "react-draggable": "4.5.0",
58
- "@tanstack/react-virtual": "3.13.23",
59
- "@mui/x-date-pickers": "6.20.2",
60
- "react-dropzone": "14.4.1",
61
58
  "react-color": "2.19.3",
59
+ "@mui/x-date-pickers": "6.20.2",
62
60
  "react-spinners": "0.13.8",
63
- "react-resizable-panels": "2.1.9",
64
- "react-simple-code-editor": "0.14.1",
61
+ "react-dropzone": "14.4.1",
62
+ "@tanstack/react-virtual": "3.13.23",
65
63
  "chart.js": "4.5.1",
66
64
  "chartjs-chart-error-bars": "4.4.5",
67
65
  "qrcode.react": "3.2.0",
68
66
  "simplebar-react": "3.2.6",
67
+ "react-resizable-panels": "2.1.9",
68
+ "react-simple-code-editor": "0.14.1",
69
69
  "react-data-grid": "7.0.0-beta.47",
70
70
  "react-dnd": "16.0.1",
71
71
  "react-dnd-html5-backend": "16.0.1",
72
+ "date-fns": "2.30.0",
72
73
  "react-window": "1.8.11",
73
- "react-resizable": "3.1.3",
74
- "date-fns": "2.30.0"
74
+ "react-resizable": "3.1.3"
75
75
  }
76
76
  }