@m4l/graphics 7.2.2-BE20260202-1 → 7.2.2-BE20260203-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 (3) hide show
  1. package/components/GlobalStyles/getDateRangePickerPopupGlobalStyles.d.ts +51 -13
  2. package/components/GlobalStyles/getDateRangePickerPopupGlobalStyles.js +79 -48
  3. package/package.json +1 -1
package/components/GlobalStyles/getDateRangePickerPopupGlobalStyles.d.ts CHANGED
@@ -21,6 +21,7 @@ export declare function getDateRangePickerPopupGlobalStyles(theme: Theme): {
21
21
  borderColor: string;
22
22
  };
23
23
  '& .rs-picker-daterange-calendar-group': {
24
+ height: string;
24
25
  '& .rs-calendar-header': {
25
26
  '& .rs-btn-icon:not([data-with-text])': {
26
27
  '&:hover': {
@@ -60,6 +61,9 @@ export declare function getDateRangePickerPopupGlobalStyles(theme: Theme): {
60
61
  alignItems: string;
61
62
  justifyContent: string;
62
63
  gap: string;
64
+ '& .rs-calendar-table-row, & .rs-calendar-table-row': {
65
+ gap: string;
66
+ };
63
67
  '& .rs-calendar-table-header-row': {
64
68
  display: string;
65
69
  justifyContent: string;
@@ -72,11 +76,22 @@ export declare function getDateRangePickerPopupGlobalStyles(theme: Theme): {
72
76
  };
73
77
  };
74
78
  '& .rs-calendar-table-cell': {
75
- padding: string;
76
79
  width: string;
77
80
  height: string;
78
81
  borderTop: string;
79
82
  borderBottom: string;
83
+ '&:hover .rs-calendar-table-cell-content': {
84
+ backgroundColor: string;
85
+ '& .rs-calendar-table-cell-day': {
86
+ color: string;
87
+ };
88
+ };
89
+ '&:active .rs-calendar-table-cell-content': {
90
+ backgroundColor: string;
91
+ '& .rs-calendar-table-cell-day': {
92
+ color: string;
93
+ };
94
+ };
80
95
  '& .rs-calendar-table-cell-content': any;
81
96
  '&.rs-calendar-table-cell-un-same-month': {
82
97
  '& .rs-calendar-table-cell-content': {
@@ -85,6 +100,11 @@ export declare function getDateRangePickerPopupGlobalStyles(theme: Theme): {
85
100
  };
86
101
  };
87
102
  };
103
+ '&.rs-calendar-table-cell-is-today': {
104
+ '& .rs-calendar-table-cell-content': {
105
+ boxShadow: string;
106
+ };
107
+ };
88
108
  '&.rs-calendar-table-cell-in-range': {
89
109
  borderRadius: number;
90
110
  borderTop: string;
@@ -102,30 +122,42 @@ export declare function getDateRangePickerPopupGlobalStyles(theme: Theme): {
102
122
  '&.rs-calendar-table-cell-selected-start': {
103
123
  borderTopLeftRadius: string;
104
124
  borderBottomLeftRadius: string;
105
- '& .rs-calendar-table-cell-content': {
106
- boxShadow: string;
125
+ '&:hover .rs-calendar-table-cell-content': {
107
126
  backgroundColor: string;
108
- '&:hover': {
109
- backgroundColor: string;
127
+ '& .rs-calendar-table-cell-day': {
128
+ color: string;
110
129
  };
111
- '&:active': {
112
- backgroundColor: string;
130
+ };
131
+ '&:active .rs-calendar-table-cell-content': {
132
+ backgroundColor: string;
133
+ '& .rs-calendar-table-cell-day': {
134
+ color: string;
113
135
  };
114
136
  };
137
+ '& .rs-calendar-table-cell-content': {
138
+ boxShadow: string;
139
+ backgroundColor: string;
140
+ };
115
141
  };
116
142
  '&.rs-calendar-table-cell-selected-end': {
117
143
  borderTopRightRadius: string;
118
144
  borderBottomRightRadius: string;
119
- '& .rs-calendar-table-cell-content': {
120
- boxShadow: string;
145
+ '&:hover .rs-calendar-table-cell-content': {
121
146
  backgroundColor: string;
122
- '&:hover': {
123
- backgroundColor: string;
147
+ '& .rs-calendar-table-cell-day': {
148
+ color: string;
124
149
  };
125
- '&:active': {
126
- backgroundColor: string;
150
+ };
151
+ '&:active .rs-calendar-table-cell-content': {
152
+ backgroundColor: string;
153
+ '& .rs-calendar-table-cell-day': {
154
+ color: string;
127
155
  };
128
156
  };
157
+ '& .rs-calendar-table-cell-content': {
158
+ boxShadow: string;
159
+ backgroundColor: string;
160
+ };
129
161
  };
130
162
  };
131
163
  };
@@ -239,6 +271,7 @@ export declare function getDateRangePickerPopupGlobalStyles(theme: Theme): {
239
271
  };
240
272
  '& .rs-calendar': {
241
273
  borderColor: string;
274
+ height: string;
242
275
  };
243
276
  };
244
277
  '& .rs-picker-toolbar': {
@@ -247,6 +280,11 @@ export declare function getDateRangePickerPopupGlobalStyles(theme: Theme): {
247
280
  display: string;
248
281
  alignItems: string;
249
282
  justifyContent: string;
283
+ '& .rs-picker-toolbar-ranges': {
284
+ '& .rs-btn': {
285
+ color: string;
286
+ };
287
+ };
250
288
  '& .rs-btn': {
251
289
  fontSize: string;
252
290
  lineHeight: string;
package/components/GlobalStyles/getDateRangePickerPopupGlobalStyles.js CHANGED
@@ -1,16 +1,16 @@
1
- import { TYPOGRAPHY_SIZES_MOBILE as c, TYPOGRAPHY_SIZES_DESKTOP as i } from "@m4l/styles";
2
- function l(r, a, o, e, n = "height") {
3
- const d = r.vars.size[r.generalSettings.isMobile ? "mobile" : "desktop"][a][o], s = typeof e == "function" ? e(d) : e;
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;
4
4
  return {
5
5
  [n]: d,
6
- ...s
6
+ ...c
7
7
  };
8
8
  }
9
- function t(r, a, o) {
10
- return (r ? c : i)[a][o];
9
+ function t(r, a, e) {
10
+ return (r ? s : i)[a][e];
11
11
  }
12
12
  function b(r) {
13
- const a = "medium", o = r.generalSettings.isMobile;
13
+ const a = "medium", e = r.generalSettings.isMobile;
14
14
  return {
15
15
  // Estilos globales para el popup del DateRangePicker de rsuite
16
16
  ".rs-picker-popup": {
@@ -23,10 +23,11 @@ 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(o, a, "body")
26
+ ...t(e, a, "body")
27
27
  },
28
28
  // Body
29
29
  "& .rs-picker-daterange-calendar-group": {
30
+ height: "fit-content",
30
31
  "& .rs-calendar-header": {
31
32
  // arrow buttons
32
33
  "& .rs-btn-icon:not([data-with-text])": {
@@ -43,7 +44,7 @@ function b(r) {
43
44
  // button title month
44
45
  "& .rs-calendar-header-title": {
45
46
  color: r.vars.palette.text.primary,
46
- ...t(o, a, "body"),
47
+ ...t(e, a, "body"),
47
48
  "&:hover": {
48
49
  backgroundColor: r.vars.palette.default.hoverOpacity
49
50
  },
@@ -67,6 +68,9 @@ function b(r) {
67
68
  alignItems: "center",
68
69
  justifyContent: "center",
69
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
+ },
70
74
  // table header
71
75
  "& .rs-calendar-table-header-row": {
72
76
  display: "flex",
@@ -77,14 +81,14 @@ function b(r) {
77
81
  height: "fit-content",
78
82
  "& .rs-calendar-table-header-cell-content": {
79
83
  color: r.vars.palette.text.secondary,
80
- ...t(o, a, "body"),
84
+ ...t(e, a, "body"),
81
85
  ...l(
82
86
  r,
83
87
  a,
84
88
  "action",
85
- (e) => ({
86
- minWidth: e,
87
- maxWidth: e,
89
+ (o) => ({
90
+ minWidth: o,
91
+ maxWidth: o,
88
92
  height: "auto"
89
93
  })
90
94
  )
@@ -94,13 +98,23 @@ function b(r) {
94
98
  },
95
99
  // button days
96
100
  "& .rs-calendar-table-cell": {
97
- padding: "1px",
98
101
  width: "fit-content",
99
102
  height: "fit-content",
100
103
  borderTop: "1px dashed transparent",
101
104
  borderBottom: "1px dashed transparent",
105
+ "&:hover .rs-calendar-table-cell-content": {
106
+ backgroundColor: r.vars.palette.default.hoverOpacity,
107
+ "& .rs-calendar-table-cell-day": {
108
+ color: r.vars.palette.primary.enabled
109
+ }
110
+ },
111
+ "&:active .rs-calendar-table-cell-content": {
112
+ backgroundColor: r.vars.palette.default.activeOpacity,
113
+ "& .rs-calendar-table-cell-day": {
114
+ color: r.vars.palette.primary.enabled
115
+ }
116
+ },
102
117
  "& .rs-calendar-table-cell-content": {
103
- transition: "all 0.3s ease",
104
118
  borderRadius: r.vars.size.borderRadius.r2,
105
119
  display: "flex",
106
120
  alignItems: "center",
@@ -109,21 +123,15 @@ function b(r) {
109
123
  r,
110
124
  a,
111
125
  "action",
112
- (e) => ({
113
- minHeight: e,
114
- maxHeight: e,
115
- minWidth: e,
116
- maxWidth: e
126
+ (o) => ({
127
+ minHeight: o,
128
+ maxHeight: o,
129
+ minWidth: o,
130
+ maxWidth: o
117
131
  })
118
132
  ),
119
- "&:hover": {
120
- backgroundColor: r.vars.palette.default.hoverOpacity
121
- },
122
- "&:active": {
123
- backgroundColor: r.vars.palette.default.activeOpacity
124
- },
125
133
  "& .rs-calendar-table-cell-day": {
126
- ...t(o, a, "body")
134
+ ...t(e, a, "body")
127
135
  }
128
136
  },
129
137
  "&.rs-calendar-table-cell-un-same-month": {
@@ -133,6 +141,11 @@ function b(r) {
133
141
  }
134
142
  }
135
143
  },
144
+ "&.rs-calendar-table-cell-is-today": {
145
+ "& .rs-calendar-table-cell-content": {
146
+ boxShadow: `0 0 0 1px ${r.vars.palette.primary.enabled}`
147
+ }
148
+ },
136
149
  "&.rs-calendar-table-cell-in-range": {
137
150
  borderRadius: 0,
138
151
  borderTop: `1px dashed ${r.vars.palette.border.secondary}`,
@@ -152,15 +165,21 @@ function b(r) {
152
165
  // para que el contenido interno no se vea cortado en las esquinas
153
166
  borderTopLeftRadius: `calc(${r.vars.size.borderRadius.r2} + 1px)`,
154
167
  borderBottomLeftRadius: `calc(${r.vars.size.borderRadius.r2} + 1px)`,
168
+ "&:hover .rs-calendar-table-cell-content": {
169
+ backgroundColor: `${r.vars.palette.primary.hover} !important`,
170
+ "& .rs-calendar-table-cell-day": {
171
+ color: `${r.vars.palette.primary.contrastText} !important`
172
+ }
173
+ },
174
+ "&:active .rs-calendar-table-cell-content": {
175
+ backgroundColor: `${r.vars.palette.primary.active} !important`,
176
+ "& .rs-calendar-table-cell-day": {
177
+ color: `${r.vars.palette.primary.contrastText} !important`
178
+ }
179
+ },
155
180
  "& .rs-calendar-table-cell-content": {
156
181
  boxShadow: `0 0 0 1px ${r.vars.palette.primary.activeOpacity}`,
157
- backgroundColor: r.vars.palette.primary.enabled,
158
- "&:hover": {
159
- backgroundColor: r.vars.palette.primary.hover
160
- },
161
- "&:active": {
162
- backgroundColor: r.vars.palette.primary.active
163
- }
182
+ backgroundColor: r.vars.palette.primary.enabled
164
183
  }
165
184
  },
166
185
  "&.rs-calendar-table-cell-selected-end": {
@@ -168,15 +187,21 @@ function b(r) {
168
187
  // para que el contenido interno no se vea cortado en las esquinas
169
188
  borderTopRightRadius: `calc(${r.vars.size.borderRadius.r2} + 1px)`,
170
189
  borderBottomRightRadius: `calc(${r.vars.size.borderRadius.r2} + 1px)`,
190
+ "&:hover .rs-calendar-table-cell-content": {
191
+ backgroundColor: `${r.vars.palette.primary.hover} !important`,
192
+ "& .rs-calendar-table-cell-day": {
193
+ color: `${r.vars.palette.primary.contrastText} !important`
194
+ }
195
+ },
196
+ "&:active .rs-calendar-table-cell-content": {
197
+ backgroundColor: `${r.vars.palette.primary.active} !important`,
198
+ "& .rs-calendar-table-cell-day": {
199
+ color: `${r.vars.palette.primary.contrastText} !important`
200
+ }
201
+ },
171
202
  "& .rs-calendar-table-cell-content": {
172
203
  boxShadow: `0 0 0 1px ${r.vars.palette.primary.activeOpacity}`,
173
- backgroundColor: r.vars.palette.primary.enabled,
174
- "&:hover": {
175
- backgroundColor: r.vars.palette.primary.hover
176
- },
177
- "&:active": {
178
- backgroundColor: r.vars.palette.primary.active
179
- }
204
+ backgroundColor: r.vars.palette.primary.enabled
180
205
  }
181
206
  }
182
207
  }
@@ -193,7 +218,7 @@ function b(r) {
193
218
  // year title
194
219
  "& .rs-calendar-month-dropdown-year": {
195
220
  color: r.vars.palette.text.primary,
196
- ...t(o, a, "body"),
221
+ ...t(e, a, "body"),
197
222
  "&.rs-calendar-month-dropdown-year-active": {
198
223
  color: r.vars.palette.primary.enabled
199
224
  }
@@ -205,7 +230,7 @@ function b(r) {
205
230
  justifyContent: "center",
206
231
  "& .rs-calendar-month-dropdown-cell-content": {
207
232
  color: r.vars.palette.text.primary,
208
- ...t(o, a, "body"),
233
+ ...t(e, a, "body"),
209
234
  "&:hover": {
210
235
  backgroundColor: r.vars.palette.default.hoverOpacity,
211
236
  color: r.vars.palette.primary.enabled
@@ -218,7 +243,7 @@ function b(r) {
218
243
  "&.rs-calendar-month-dropdown-cell-active .rs-calendar-month-dropdown-cell-content": {
219
244
  backgroundColor: r.vars.palette.primary.enabled,
220
245
  color: r.vars.palette.primary.contrastText,
221
- ...t(o, a, "body"),
246
+ ...t(e, a, "body"),
222
247
  "&:hover": {
223
248
  backgroundColor: r.vars.palette.primary.hover
224
249
  },
@@ -236,14 +261,14 @@ function b(r) {
236
261
  "& .rs-calendar-time-dropdown-column-title": {
237
262
  backgroundColor: "transparent",
238
263
  color: r.vars.palette.text.primary,
239
- ...t(o, a, "body")
264
+ ...t(e, a, "body")
240
265
  },
241
266
  "& .rs-scroll-view-custom-scrollbar": {
242
267
  "& li": {
243
268
  "& .rs-calendar-time-dropdown-cell": {
244
269
  borderRadius: r.vars.size.borderRadius.r2,
245
270
  color: r.vars.palette.text.primary,
246
- ...t(o, a, "body"),
271
+ ...t(e, a, "body"),
247
272
  "&:hover": {
248
273
  backgroundColor: r.vars.palette.default.hoverOpacity
249
274
  },
@@ -280,7 +305,8 @@ function b(r) {
280
305
  }
281
306
  },
282
307
  "& .rs-calendar": {
283
- borderColor: r.vars.palette.border.disabled
308
+ borderColor: r.vars.palette.border.disabled,
309
+ height: "fit-content"
284
310
  }
285
311
  },
286
312
  // toolbar
@@ -290,8 +316,13 @@ function b(r) {
290
316
  display: "flex",
291
317
  alignItems: "center",
292
318
  justifyContent: "space-between",
319
+ "& .rs-picker-toolbar-ranges": {
320
+ "& .rs-btn": {
321
+ color: r.vars.palette.primary.enabled
322
+ }
323
+ },
293
324
  "& .rs-btn": {
294
- ...t(o, a, "body")
325
+ ...t(e, a, "body")
295
326
  },
296
327
  "& .rs-picker-toolbar-right": {
297
328
  display: "flex",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/graphics",
3
- "version": "7.2.2-BE20260202-1+PR665-dateRangePicker",
3
+ "version": "7.2.2-BE20260203-1+PR665-dateRangePicker",
4
4
  "license": "UNLICENSED",
5
5
  "author": "M4L Team*",
6
6
  "type": "module",