@m4l/graphics 7.2.4-beta.0 → 7.2.4-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 (4) hide show
  1. package/components/GlobalStyles/index.d.ts.map +1 -1
  2. package/components/GlobalStyles/index.js +6 -12
  3. package/package.json +1 -1
  4. package/components/GlobalStyles/getDateRangePickerPopupGlobalStyles.js +0 -347
package/components/GlobalStyles/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/graphics/src/components/GlobalStyles/index.tsx"],"names":[],"mappings":"AASA;;;;;;GAMG;AACH,wBAAgB,YAAY,qDAgG3B"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/graphics/src/components/GlobalStyles/index.tsx"],"names":[],"mappings":"AAQA;;;;;;GAMG;AACH,wBAAgB,YAAY,qDA6F3B"}
package/components/GlobalStyles/index.js CHANGED
@@ -1,15 +1,12 @@
1
- import { jsx as e, Fragment as o } from "@emotion/react/jsx-runtime";
2
- import { useTheme as a } from "@mui/material/styles";
3
- import { GlobalStyles as i } from "@mui/material";
1
+ import { jsx as e, Fragment as a } from "@emotion/react/jsx-runtime";
2
+ import { useTheme as o, GlobalStyles as i } from "@mui/material";
4
3
  import { globalRemSize as r } from "@m4l/styles";
5
- import { getDateRangePickerPopupGlobalStyles as s } from "./getDateRangePickerPopupGlobalStyles.js";
6
- function b() {
7
- const t = a();
8
- return /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
4
+ function p() {
5
+ const t = o();
6
+ return /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(
9
7
  i,
10
8
  {
11
9
  styles: {
12
- ...s(t),
13
10
  body: {
14
11
  fontFamily: 'Inter, "Segoe UI", Roboto, "Helvetica Neue", sans-serif, Open Sans',
15
12
  textRendering: "geometricPrecision",
@@ -18,9 +15,6 @@ function b() {
18
15
  ".rs-drawer .rs-drawer-dialog": {
19
16
  backgroundColor: "transparent!important"
20
17
  },
21
- ".rs-picker-popup": {
22
- zIndex: t.vars.zIndex.modal || 1300
23
- },
24
18
  "#rootIsolation": {
25
19
  width: "100vw",
26
20
  height: "100vh"
@@ -86,5 +80,5 @@ function b() {
86
80
  ) });
87
81
  }
88
82
  export {
89
- b as GlobalStyles
83
+ p as GlobalStyles
90
84
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/graphics",
3
- "version": "7.2.4-beta.0",
3
+ "version": "7.2.4-beta.1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
package/components/GlobalStyles/getDateRangePickerPopupGlobalStyles.js DELETED
@@ -1,347 +0,0 @@
1
- import { TYPOGRAPHY_SIZES_MOBILE as s, TYPOGRAPHY_SIZES_DESKTOP as i } from "@m4l/styles";
2
- function l(r, a, e, t, n = "height") {
3
- const d = r.vars.size[r.generalSettings.isMobile ? "mobile" : "desktop"][a][e], c = typeof t == "function" ? t(d) : t;
4
- return {
5
- [n]: d,
6
- ...c
7
- };
8
- }
9
- function o(r, a, e) {
10
- return (r ? s : i)[a][e];
11
- }
12
- function b(r) {
13
- const a = "medium", e = r.generalSettings.isMobile;
14
- return {
15
- // Estilos globales para el popup del DateRangePicker de rsuite
16
- ".rs-picker-popup": {
17
- backgroundColor: r.vars.palette.background.default,
18
- borderRadius: r.vars.size.borderRadius.r3,
19
- marginTop: r.vars.size.baseSpacings.sp1,
20
- boxShadow: r.vars.customShadows.z4,
21
- color: r.vars.palette.text.primary,
22
- // Header
23
- "& .rs-picker-daterange-header": {
24
- color: r.vars.palette.text.primary,
25
- borderColor: r.vars.palette.border.disabled,
26
- ...o(e, a, "body")
27
- },
28
- // Body
29
- "& .rs-picker-daterange-calendar-group": {
30
- height: "fit-content",
31
- "& .rs-calendar-header": {
32
- // arrow buttons
33
- "& .rs-btn-icon:not([data-with-text])": {
34
- "&:hover": {
35
- backgroundColor: r.vars.palette.default.hoverOpacity
36
- },
37
- "&:active": {
38
- backgroundColor: r.vars.palette.default.activeOpacity
39
- },
40
- "& svg": {
41
- fill: r.vars.palette.text.primary
42
- }
43
- },
44
- // button title month
45
- "& .rs-calendar-header-title": {
46
- color: r.vars.palette.text.primary,
47
- ...o(e, a, "body"),
48
- "&:hover": {
49
- backgroundColor: r.vars.palette.default.hoverOpacity
50
- },
51
- "&:active": {
52
- backgroundColor: r.vars.palette.default.activeOpacity
53
- }
54
- }
55
- },
56
- // calendar start
57
- "& .rs-calendar:first-child": {
58
- borderColor: r.vars.palette.border.disabled
59
- },
60
- // calendar body
61
- "& .rs-calendar-body": {
62
- display: "flex",
63
- alignItems: "center",
64
- justifyContent: "center",
65
- "& .rs-calendar-table": {
66
- display: "flex",
67
- flexDirection: "column",
68
- alignItems: "center",
69
- justifyContent: "center",
70
- gap: r.vars.size.baseSpacings["sp0-5"],
71
- // table header
72
- "& .rs-calendar-table-header-row": {
73
- display: "flex",
74
- justifyContent: "space-between",
75
- width: "100%",
76
- "& .rs-calendar-table-header-cell": {
77
- width: "fit-content",
78
- height: "fit-content",
79
- "& .rs-calendar-table-header-cell-content": {
80
- color: r.vars.palette.text.secondary,
81
- ...o(e, a, "body"),
82
- ...l(
83
- r,
84
- a,
85
- "action",
86
- (t) => ({
87
- minWidth: t,
88
- maxWidth: t,
89
- height: "auto"
90
- })
91
- )
92
- }
93
- }
94
- }
95
- },
96
- // button days
97
- "& .rs-calendar-table-cell": {
98
- width: "fit-content",
99
- height: "fit-content",
100
- borderTop: "1px dashed transparent",
101
- borderBottom: "1px dashed transparent",
102
- "&:hover .rs-calendar-table-cell-content": {
103
- backgroundColor: r.vars.palette.default.hoverOpacity,
104
- "& .rs-calendar-table-cell-day": {
105
- color: r.vars.palette.primary.enabled
106
- }
107
- },
108
- "&:active .rs-calendar-table-cell-content": {
109
- backgroundColor: r.vars.palette.default.activeOpacity,
110
- "& .rs-calendar-table-cell-day": {
111
- color: r.vars.palette.primary.enabled
112
- }
113
- },
114
- "& .rs-calendar-table-cell-content": {
115
- borderRadius: r.vars.size.borderRadius.r2,
116
- display: "flex",
117
- alignItems: "center",
118
- justifyContent: "center",
119
- ...l(
120
- r,
121
- a,
122
- "action",
123
- (t) => ({
124
- minHeight: t,
125
- maxHeight: t,
126
- minWidth: t,
127
- maxWidth: t
128
- })
129
- ),
130
- "& .rs-calendar-table-cell-day": {
131
- ...o(e, a, "body")
132
- }
133
- },
134
- "&.rs-calendar-table-cell-un-same-month": {
135
- "& .rs-calendar-table-cell-content": {
136
- "& .rs-calendar-table-cell-day": {
137
- color: r.vars.palette.text.secondary
138
- }
139
- }
140
- },
141
- "&.rs-calendar-table-cell-is-today": {
142
- "& .rs-calendar-table-cell-content": {
143
- boxShadow: `0 0 0 1px ${r.vars.palette.primary.enabled}`
144
- }
145
- },
146
- "&.rs-calendar-table-cell-in-range": {
147
- borderRadius: 0,
148
- borderTop: `1px dashed ${r.vars.palette.border.secondary}`,
149
- borderBottom: `1px dashed ${r.vars.palette.border.secondary}`,
150
- "&:before": {
151
- height: "unset",
152
- margin: "unset",
153
- backgroundColor: r.vars.palette.default.hoverOpacity,
154
- inset: 0
155
- },
156
- "& .rs-calendar-table-cell-content": {
157
- backgroundColor: "transparent"
158
- }
159
- },
160
- "&.rs-calendar-table-cell-selected-start": {
161
- // Radio exterior = radio interior (r2 = 8px) + grosor del borde (1px) = 9px
162
- // para que el contenido interno no se vea cortado en las esquinas
163
- borderTopLeftRadius: `calc(${r.vars.size.borderRadius.r2} + 1px)`,
164
- borderBottomLeftRadius: `calc(${r.vars.size.borderRadius.r2} + 1px)`,
165
- "&:hover .rs-calendar-table-cell-content": {
166
- backgroundColor: `${r.vars.palette.primary.hover} !important`,
167
- "& .rs-calendar-table-cell-day": {
168
- color: `${r.vars.palette.primary.contrastText} !important`
169
- }
170
- },
171
- "&:active .rs-calendar-table-cell-content": {
172
- backgroundColor: `${r.vars.palette.primary.active} !important`,
173
- "& .rs-calendar-table-cell-day": {
174
- color: `${r.vars.palette.primary.contrastText} !important`
175
- }
176
- },
177
- "& .rs-calendar-table-cell-content": {
178
- boxShadow: `0 0 0 1px ${r.vars.palette.primary.activeOpacity}`,
179
- backgroundColor: r.vars.palette.primary.enabled
180
- }
181
- },
182
- "&.rs-calendar-table-cell-selected-end": {
183
- // Radio exterior = radio interior (r2 = 8px) + grosor del borde (1px) = 9px
184
- // para que el contenido interno no se vea cortado en las esquinas
185
- borderTopRightRadius: `calc(${r.vars.size.borderRadius.r2} + 1px)`,
186
- borderBottomRightRadius: `calc(${r.vars.size.borderRadius.r2} + 1px)`,
187
- "&:hover .rs-calendar-table-cell-content": {
188
- backgroundColor: `${r.vars.palette.primary.hover} !important`,
189
- "& .rs-calendar-table-cell-day": {
190
- color: `${r.vars.palette.primary.contrastText} !important`
191
- }
192
- },
193
- "&:active .rs-calendar-table-cell-content": {
194
- backgroundColor: `${r.vars.palette.primary.active} !important`,
195
- "& .rs-calendar-table-cell-day": {
196
- color: `${r.vars.palette.primary.contrastText} !important`
197
- }
198
- },
199
- "& .rs-calendar-table-cell-content": {
200
- boxShadow: `0 0 0 1px ${r.vars.palette.primary.activeOpacity}`,
201
- backgroundColor: r.vars.palette.primary.enabled
202
- }
203
- }
204
- }
205
- },
206
- // calendar month dropdown
207
- "& .rs-calendar-month-dropdown": {
208
- backgroundColor: r.vars.palette.background.default,
209
- borderColor: r.vars.palette.border.disabled,
210
- "& .rs-calendar-month-dropdown-row": {
211
- borderColor: r.vars.palette.border.disabled,
212
- "& .rs-calendar-month-dropdown-list": {
213
- height: "100%"
214
- },
215
- // year title
216
- "& .rs-calendar-month-dropdown-year": {
217
- color: r.vars.palette.text.primary,
218
- ...o(e, a, "body"),
219
- "&.rs-calendar-month-dropdown-year-active": {
220
- color: r.vars.palette.primary.enabled
221
- }
222
- },
223
- // month title
224
- "& .rs-calendar-month-dropdown-cell": {
225
- display: "flex",
226
- alignItems: "center",
227
- justifyContent: "center",
228
- "& .rs-calendar-month-dropdown-cell-content": {
229
- color: r.vars.palette.text.primary,
230
- ...o(e, a, "body"),
231
- "&:hover": {
232
- backgroundColor: r.vars.palette.default.hoverOpacity,
233
- color: r.vars.palette.primary.enabled
234
- },
235
- "&:active": {
236
- backgroundColor: r.vars.palette.default.activeOpacity,
237
- color: r.vars.palette.primary.enabled
238
- }
239
- },
240
- "&.rs-calendar-month-dropdown-cell-active .rs-calendar-month-dropdown-cell-content": {
241
- backgroundColor: r.vars.palette.primary.enabled,
242
- color: r.vars.palette.primary.contrastText,
243
- ...o(e, a, "body"),
244
- "&:hover": {
245
- backgroundColor: r.vars.palette.primary.hover
246
- },
247
- "&:active": {
248
- backgroundColor: r.vars.palette.primary.active
249
- }
250
- }
251
- }
252
- }
253
- },
254
- // calendar hours dropdown
255
- "& .rs-calendar-time-dropdown": {
256
- backgroundColor: r.vars.palette.background.default,
257
- borderColor: r.vars.palette.border.disabled,
258
- "& .rs-calendar-time-dropdown-column-title": {
259
- backgroundColor: "transparent",
260
- color: r.vars.palette.text.primary,
261
- ...o(e, a, "body")
262
- },
263
- "& .rs-scroll-view-custom-scrollbar": {
264
- "& li": {
265
- "& .rs-calendar-time-dropdown-cell": {
266
- borderRadius: r.vars.size.borderRadius.r2,
267
- color: r.vars.palette.text.primary,
268
- ...o(e, a, "body"),
269
- "&:hover": {
270
- backgroundColor: r.vars.palette.default.hoverOpacity
271
- },
272
- "&:active": {
273
- backgroundColor: r.vars.palette.default.activeOpacity
274
- },
275
- "&.rs-calendar-time-dropdown-cell-active": {
276
- backgroundColor: r.vars.palette.primary.enabled,
277
- color: r.vars.palette.primary.contrastText,
278
- "&:hover": {
279
- backgroundColor: r.vars.palette.primary.hover
280
- },
281
- "&:active": {
282
- backgroundColor: r.vars.palette.primary.active
283
- }
284
- }
285
- }
286
- }
287
- }
288
- },
289
- // calendar close button dropdown
290
- "& .rs-calendar-btn-close": {
291
- backgroundColor: r.vars.palette.background.default,
292
- "&:hover": {
293
- backgroundColor: r.vars.palette.background.hover,
294
- borderColor: r.vars.palette.border.disabled,
295
- color: r.vars.palette.text.primary
296
- },
297
- "&:active": {
298
- backgroundColor: r.vars.palette.background.hover
299
- },
300
- "& svg": {
301
- fill: r.vars.palette.text.primary
302
- }
303
- },
304
- "& .rs-calendar": {
305
- borderColor: r.vars.palette.border.disabled,
306
- height: "fit-content"
307
- }
308
- },
309
- // toolbar
310
- "& .rs-picker-toolbar": {
311
- backgroundColor: r.vars.palette.background.default,
312
- borderColor: r.vars.palette.border.disabled,
313
- display: "flex",
314
- alignItems: "center",
315
- justifyContent: "space-between",
316
- "& .rs-picker-toolbar-ranges": {
317
- "& .rs-btn": {
318
- color: r.vars.palette.primary.enabled
319
- }
320
- },
321
- "& .rs-btn": {
322
- ...o(e, a, "body")
323
- },
324
- "& .rs-picker-toolbar-right": {
325
- display: "flex",
326
- alignItems: "center",
327
- justifyContent: "center",
328
- "& .rs-btn": {
329
- backgroundColor: r.vars.palette.primary.enabled,
330
- borderRadius: r.vars.size.borderRadius["r1-5"],
331
- color: r.vars.palette.primary.contrastText,
332
- ...l(r, a, "action"),
333
- "&:hover": {
334
- backgroundColor: r.vars.palette.primary.hover
335
- },
336
- "&:active": {
337
- backgroundColor: r.vars.palette.primary.active
338
- }
339
- }
340
- }
341
- }
342
- }
343
- };
344
- }
345
- export {
346
- b as getDateRangePickerPopupGlobalStyles
347
- };