@m4l/graphics 7.2.2-BE20260203-1 → 7.2.2-BE20260205-4

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 (5) hide show
  1. package/components/GlobalStyles/getDateRangePickerPopupGlobalStyles.d.ts +20 -4
  2. package/components/GlobalStyles/getDateRangePickerPopupGlobalStyles.js +21 -24
  3. package/components/GlobalStyles/index.js +76 -88
  4. package/package.json +1 -1
  5. package/components/GlobalStyles/rsuiteStyles.min.js +0 -4
package/components/GlobalStyles/getDateRangePickerPopupGlobalStyles.d.ts CHANGED
@@ -1,11 +1,30 @@
1
1
  import { Theme } from '@mui/material/styles';
2
+ /**
3
+ * Tipo extendido del Theme de MUI que incluye las propiedades personalizadas del tema de M4L
4
+ */
5
+ export type ExtendedTheme = Theme & {
6
+ vars: {
7
+ size: {
8
+ [key: string]: {
9
+ [key: string]: {
10
+ [key: string]: string | number;
11
+ };
12
+ };
13
+ };
14
+ palette: Record<string, any>;
15
+ customShadows: Record<string, any>;
16
+ };
17
+ generalSettings: {
18
+ isMobile: boolean;
19
+ };
20
+ };
2
21
  /**
3
22
  * Genera los estilos globales para el popup del DateRangePicker de rsuite.
4
23
  * Estos estilos se aplican globalmente a todos los popups de DateRangePicker.
5
24
  * @param theme - Tema de MUI
6
25
  * @returns Objeto con los estilos del popup
7
26
  */
8
- export declare function getDateRangePickerPopupGlobalStyles(theme: Theme): {
27
+ export declare function getDateRangePickerPopupGlobalStyles(theme: ExtendedTheme): {
9
28
  '.rs-picker-popup': {
10
29
  backgroundColor: string;
11
30
  borderRadius: string;
@@ -61,9 +80,6 @@ export declare function getDateRangePickerPopupGlobalStyles(theme: Theme): {
61
80
  alignItems: string;
62
81
  justifyContent: string;
63
82
  gap: string;
64
- '& .rs-calendar-table-row, & .rs-calendar-table-row': {
65
- gap: string;
66
- };
67
83
  '& .rs-calendar-table-header-row': {
68
84
  display: string;
69
85
  justifyContent: string;
package/components/GlobalStyles/getDateRangePickerPopupGlobalStyles.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { TYPOGRAPHY_SIZES_MOBILE as s, TYPOGRAPHY_SIZES_DESKTOP as i } from "@m4l/styles";
2
- function l(r, a, e, o, n = "height") {
3
- const d = r.vars.size[r.generalSettings.isMobile ? "mobile" : "desktop"][a][e], c = typeof o == "function" ? o(d) : o;
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
4
  return {
5
5
  [n]: d,
6
6
  ...c
7
7
  };
8
8
  }
9
- function t(r, a, e) {
9
+ function o(r, a, e) {
10
10
  return (r ? s : i)[a][e];
11
11
  }
12
12
  function b(r) {
@@ -23,7 +23,7 @@ function b(r) {
23
23
  "& .rs-picker-daterange-header": {
24
24
  color: r.vars.palette.text.primary,
25
25
  borderColor: r.vars.palette.border.disabled,
26
- ...t(e, a, "body")
26
+ ...o(e, a, "body")
27
27
  },
28
28
  // Body
29
29
  "& .rs-picker-daterange-calendar-group": {
@@ -44,7 +44,7 @@ function b(r) {
44
44
  // button title month
45
45
  "& .rs-calendar-header-title": {
46
46
  color: r.vars.palette.text.primary,
47
- ...t(e, a, "body"),
47
+ ...o(e, a, "body"),
48
48
  "&:hover": {
49
49
  backgroundColor: r.vars.palette.default.hoverOpacity
50
50
  },
@@ -68,9 +68,6 @@ function b(r) {
68
68
  alignItems: "center",
69
69
  justifyContent: "center",
70
70
  gap: r.vars.size.baseSpacings["sp0-5"],
71
- "& .rs-calendar-table-row, & .rs-calendar-table-row": {
72
- gap: r.vars.size.baseSpacings["sp0-5"]
73
- },
74
71
  // table header
75
72
  "& .rs-calendar-table-header-row": {
76
73
  display: "flex",
@@ -81,14 +78,14 @@ function b(r) {
81
78
  height: "fit-content",
82
79
  "& .rs-calendar-table-header-cell-content": {
83
80
  color: r.vars.palette.text.secondary,
84
- ...t(e, a, "body"),
81
+ ...o(e, a, "body"),
85
82
  ...l(
86
83
  r,
87
84
  a,
88
85
  "action",
89
- (o) => ({
90
- minWidth: o,
91
- maxWidth: o,
86
+ (t) => ({
87
+ minWidth: t,
88
+ maxWidth: t,
92
89
  height: "auto"
93
90
  })
94
91
  )
@@ -123,15 +120,15 @@ function b(r) {
123
120
  r,
124
121
  a,
125
122
  "action",
126
- (o) => ({
127
- minHeight: o,
128
- maxHeight: o,
129
- minWidth: o,
130
- maxWidth: o
123
+ (t) => ({
124
+ minHeight: t,
125
+ maxHeight: t,
126
+ minWidth: t,
127
+ maxWidth: t
131
128
  })
132
129
  ),
133
130
  "& .rs-calendar-table-cell-day": {
134
- ...t(e, a, "body")
131
+ ...o(e, a, "body")
135
132
  }
136
133
  },
137
134
  "&.rs-calendar-table-cell-un-same-month": {
@@ -218,7 +215,7 @@ function b(r) {
218
215
  // year title
219
216
  "& .rs-calendar-month-dropdown-year": {
220
217
  color: r.vars.palette.text.primary,
221
- ...t(e, a, "body"),
218
+ ...o(e, a, "body"),
222
219
  "&.rs-calendar-month-dropdown-year-active": {
223
220
  color: r.vars.palette.primary.enabled
224
221
  }
@@ -230,7 +227,7 @@ function b(r) {
230
227
  justifyContent: "center",
231
228
  "& .rs-calendar-month-dropdown-cell-content": {
232
229
  color: r.vars.palette.text.primary,
233
- ...t(e, a, "body"),
230
+ ...o(e, a, "body"),
234
231
  "&:hover": {
235
232
  backgroundColor: r.vars.palette.default.hoverOpacity,
236
233
  color: r.vars.palette.primary.enabled
@@ -243,7 +240,7 @@ function b(r) {
243
240
  "&.rs-calendar-month-dropdown-cell-active .rs-calendar-month-dropdown-cell-content": {
244
241
  backgroundColor: r.vars.palette.primary.enabled,
245
242
  color: r.vars.palette.primary.contrastText,
246
- ...t(e, a, "body"),
243
+ ...o(e, a, "body"),
247
244
  "&:hover": {
248
245
  backgroundColor: r.vars.palette.primary.hover
249
246
  },
@@ -261,14 +258,14 @@ function b(r) {
261
258
  "& .rs-calendar-time-dropdown-column-title": {
262
259
  backgroundColor: "transparent",
263
260
  color: r.vars.palette.text.primary,
264
- ...t(e, a, "body")
261
+ ...o(e, a, "body")
265
262
  },
266
263
  "& .rs-scroll-view-custom-scrollbar": {
267
264
  "& li": {
268
265
  "& .rs-calendar-time-dropdown-cell": {
269
266
  borderRadius: r.vars.size.borderRadius.r2,
270
267
  color: r.vars.palette.text.primary,
271
- ...t(e, a, "body"),
268
+ ...o(e, a, "body"),
272
269
  "&:hover": {
273
270
  backgroundColor: r.vars.palette.default.hoverOpacity
274
271
  },
@@ -322,7 +319,7 @@ function b(r) {
322
319
  }
323
320
  },
324
321
  "& .rs-btn": {
325
- ...t(e, a, "body")
322
+ ...o(e, a, "body")
326
323
  },
327
324
  "& .rs-picker-toolbar-right": {
328
325
  display: "flex",
package/components/GlobalStyles/index.js CHANGED
@@ -1,99 +1,87 @@
1
- import { jsxs as o, Fragment as a, jsx as e } from "react/jsx-runtime";
2
- import { useTheme as i } from "@mui/material/styles";
3
- import { GlobalStyles as s } from "@mui/material";
1
+ import { jsx as e, Fragment as o } from "react/jsx-runtime";
2
+ import { useTheme as a } from "@mui/material/styles";
3
+ import { GlobalStyles as i } from "@mui/material";
4
4
  import { globalRemSize as r } from "@m4l/styles";
5
- import { Global as l, css as n } from "@emotion/react";
6
- import { r as p } from "./rsuiteStyles.min.js";
7
- import { g as m } from "./getDateRangePickerPopupGlobalStyles.js";
8
- function w() {
9
- const t = i();
10
- return /* @__PURE__ */ o(a, { children: [
11
- /* @__PURE__ */ e(
12
- l,
13
- {
14
- styles: n`
15
- ${p}
16
- `
17
- }
18
- ),
19
- /* @__PURE__ */ e(
20
- s,
21
- {
22
- styles: {
23
- ...m(t),
24
- body: {
25
- fontFamily: 'Inter, "Segoe UI", Roboto, "Helvetica Neue", sans-serif, Open Sans',
26
- textRendering: "geometricPrecision",
27
- width: "100%",
28
- height: "100vh",
29
- ".rs-drawer .rs-drawer-dialog": {
30
- backgroundColor: "transparent!important"
31
- },
32
- "#rootIsolation": {
33
- width: "100vw",
34
- height: "100vh"
35
- },
36
- "*::-webkit-scrollbar": {
37
- width: `${t.vars.size.baseSpacings.sp1}!important`,
38
- height: `${t.vars.size.baseSpacings.sp1}!important`
39
- },
40
- "*::-webkit-scrollbar-track": {
41
- backgroundColor: "transparent"
42
- },
43
- "*::-webkit-scrollbar-thumb": {
44
- backgroundColor: `${t.vars.palette.default.focusOpacity}!important`,
45
- borderRadius: `${t.vars.size.borderRadius["r0-5"]}!important`
46
- },
47
- "input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active": {
48
- color: t.vars.palette.text.primary
49
- },
50
- "& #root": {
51
- width: "100%",
52
- height: "100%"
53
- }
5
+ import { g as s } from "./getDateRangePickerPopupGlobalStyles.js";
6
+ function b() {
7
+ const t = a();
8
+ return /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
9
+ i,
10
+ {
11
+ styles: {
12
+ ...s(t),
13
+ body: {
14
+ fontFamily: 'Inter, "Segoe UI", Roboto, "Helvetica Neue", sans-serif, Open Sans',
15
+ textRendering: "geometricPrecision",
16
+ width: "100%",
17
+ height: "100vh",
18
+ ".rs-drawer .rs-drawer-dialog": {
19
+ backgroundColor: "transparent!important"
20
+ },
21
+ "#rootIsolation": {
22
+ width: "100vw",
23
+ height: "100vh"
54
24
  },
55
- "#nprogress": {
56
- pointerEvents: "none",
57
- "& .bar": {
58
- top: 0,
59
- left: 0,
60
- height: 2,
61
- width: "100%",
62
- position: "fixed",
63
- zIndex: t.zIndex.snackbar,
64
- backgroundColor: t.vars.palette.primary.main,
65
- boxShadow: `0 0 2px ${t.vars.palette.primary.main}`
66
- },
67
- "& .peg": {
68
- right: 0,
69
- opacity: 1,
70
- width: 100,
71
- height: "100%",
72
- display: "block",
73
- position: "absolute",
74
- transform: "rotate(3deg) translate(0px, -4px)",
75
- boxShadow: `0 0 10px ${t.vars.palette.primary.main}, 0 0 5px ${t.vars.palette.primary.main}`
76
- }
25
+ "*::-webkit-scrollbar": {
26
+ width: `${t.vars.size.baseSpacings.sp1}!important`,
27
+ height: `${t.vars.size.baseSpacings.sp1}!important`
77
28
  },
78
- "& html": {
79
- fontSize: r.desktop,
80
- [t.breakpoints.down("sm")]: {
81
- fontSize: r.mobile
82
- }
29
+ "*::-webkit-scrollbar-track": {
30
+ backgroundColor: "transparent"
83
31
  },
84
- // Global styles for native tags html
85
- img: {
86
- width: "100%"
32
+ "*::-webkit-scrollbar-thumb": {
33
+ backgroundColor: `${t.vars.palette.default.focusOpacity}!important`,
34
+ borderRadius: `${t.vars.size.borderRadius["r0-5"]}!important`
87
35
  },
88
- // Global styles for native tags h1, h2, h3, h4, h5, h6
89
- "h1, h2, h3, h4, h5, h6, p": {
90
- margin: "unset"
36
+ "input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active": {
37
+ color: t.vars.palette.text.primary
38
+ },
39
+ "& #root": {
40
+ width: "100%",
41
+ height: "100%"
42
+ }
43
+ },
44
+ "#nprogress": {
45
+ pointerEvents: "none",
46
+ "& .bar": {
47
+ top: 0,
48
+ left: 0,
49
+ height: 2,
50
+ width: "100%",
51
+ position: "fixed",
52
+ zIndex: t.zIndex.snackbar,
53
+ backgroundColor: t.vars.palette.primary.main,
54
+ boxShadow: `0 0 2px ${t.vars.palette.primary.main}`
55
+ },
56
+ "& .peg": {
57
+ right: 0,
58
+ opacity: 1,
59
+ width: 100,
60
+ height: "100%",
61
+ display: "block",
62
+ position: "absolute",
63
+ transform: "rotate(3deg) translate(0px, -4px)",
64
+ boxShadow: `0 0 10px ${t.vars.palette.primary.main}, 0 0 5px ${t.vars.palette.primary.main}`
65
+ }
66
+ },
67
+ "& html": {
68
+ fontSize: r.desktop,
69
+ [t.breakpoints.down("sm")]: {
70
+ fontSize: r.mobile
91
71
  }
72
+ },
73
+ // Global styles for native tags html
74
+ img: {
75
+ width: "100%"
76
+ },
77
+ // Global styles for native tags h1, h2, h3, h4, h5, h6
78
+ "h1, h2, h3, h4, h5, h6, p": {
79
+ margin: "unset"
92
80
  }
93
81
  }
94
- )
95
- ] });
82
+ }
83
+ ) });
96
84
  }
97
85
  export {
98
- w as G
86
+ b as G
99
87
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/graphics",
3
- "version": "7.2.2-BE20260203-1+PR665-dateRangePicker",
3
+ "version": "7.2.2-BE20260205-4+PR665-dateRangePicker",
4
4
  "license": "UNLICENSED",
5
5
  "author": "M4L Team*",
6
6
  "type": "module",