@m4l/graphics 7.2.2-BE20260202-1 → 7.2.2-BE20260202-2

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 +48 -13
  2. package/components/GlobalStyles/getDateRangePickerPopupGlobalStyles.js +76 -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': {
@@ -72,11 +73,22 @@ export declare function getDateRangePickerPopupGlobalStyles(theme: Theme): {
72
73
  };
73
74
  };
74
75
  '& .rs-calendar-table-cell': {
75
- padding: string;
76
76
  width: string;
77
77
  height: string;
78
78
  borderTop: string;
79
79
  borderBottom: string;
80
+ '&:hover .rs-calendar-table-cell-content': {
81
+ backgroundColor: string;
82
+ '& .rs-calendar-table-cell-day': {
83
+ color: string;
84
+ };
85
+ };
86
+ '&:active .rs-calendar-table-cell-content': {
87
+ backgroundColor: string;
88
+ '& .rs-calendar-table-cell-day': {
89
+ color: string;
90
+ };
91
+ };
80
92
  '& .rs-calendar-table-cell-content': any;
81
93
  '&.rs-calendar-table-cell-un-same-month': {
82
94
  '& .rs-calendar-table-cell-content': {
@@ -85,6 +97,11 @@ export declare function getDateRangePickerPopupGlobalStyles(theme: Theme): {
85
97
  };
86
98
  };
87
99
  };
100
+ '&.rs-calendar-table-cell-is-today': {
101
+ '& .rs-calendar-table-cell-content': {
102
+ boxShadow: string;
103
+ };
104
+ };
88
105
  '&.rs-calendar-table-cell-in-range': {
89
106
  borderRadius: number;
90
107
  borderTop: string;
@@ -102,30 +119,42 @@ export declare function getDateRangePickerPopupGlobalStyles(theme: Theme): {
102
119
  '&.rs-calendar-table-cell-selected-start': {
103
120
  borderTopLeftRadius: string;
104
121
  borderBottomLeftRadius: string;
105
- '& .rs-calendar-table-cell-content': {
106
- boxShadow: string;
122
+ '&:hover .rs-calendar-table-cell-content': {
107
123
  backgroundColor: string;
108
- '&:hover': {
109
- backgroundColor: string;
124
+ '& .rs-calendar-table-cell-day': {
125
+ color: string;
110
126
  };
111
- '&:active': {
112
- backgroundColor: string;
127
+ };
128
+ '&:active .rs-calendar-table-cell-content': {
129
+ backgroundColor: string;
130
+ '& .rs-calendar-table-cell-day': {
131
+ color: string;
113
132
  };
114
133
  };
134
+ '& .rs-calendar-table-cell-content': {
135
+ boxShadow: string;
136
+ backgroundColor: string;
137
+ };
115
138
  };
116
139
  '&.rs-calendar-table-cell-selected-end': {
117
140
  borderTopRightRadius: string;
118
141
  borderBottomRightRadius: string;
119
- '& .rs-calendar-table-cell-content': {
120
- boxShadow: string;
142
+ '&:hover .rs-calendar-table-cell-content': {
121
143
  backgroundColor: string;
122
- '&:hover': {
123
- backgroundColor: string;
144
+ '& .rs-calendar-table-cell-day': {
145
+ color: string;
124
146
  };
125
- '&:active': {
126
- backgroundColor: string;
147
+ };
148
+ '&:active .rs-calendar-table-cell-content': {
149
+ backgroundColor: string;
150
+ '& .rs-calendar-table-cell-day': {
151
+ color: string;
127
152
  };
128
153
  };
154
+ '& .rs-calendar-table-cell-content': {
155
+ boxShadow: string;
156
+ backgroundColor: string;
157
+ };
129
158
  };
130
159
  };
131
160
  };
@@ -239,6 +268,7 @@ export declare function getDateRangePickerPopupGlobalStyles(theme: Theme): {
239
268
  };
240
269
  '& .rs-calendar': {
241
270
  borderColor: string;
271
+ height: string;
242
272
  };
243
273
  };
244
274
  '& .rs-picker-toolbar': {
@@ -247,6 +277,11 @@ export declare function getDateRangePickerPopupGlobalStyles(theme: Theme): {
247
277
  display: string;
248
278
  alignItems: string;
249
279
  justifyContent: string;
280
+ '& .rs-picker-toolbar-ranges': {
281
+ '& .rs-btn': {
282
+ color: string;
283
+ };
284
+ };
250
285
  '& .rs-btn': {
251
286
  fontSize: string;
252
287
  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, 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
- ...s
6
+ ...c
7
7
  };
8
8
  }
9
- function t(r, a, o) {
10
- return (r ? c : i)[a][o];
9
+ function o(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
+ ...o(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
+ ...o(e, a, "body"),
47
48
  "&:hover": {
48
49
  backgroundColor: r.vars.palette.default.hoverOpacity
49
50
  },
@@ -77,14 +78,14 @@ function b(r) {
77
78
  height: "fit-content",
78
79
  "& .rs-calendar-table-header-cell-content": {
79
80
  color: r.vars.palette.text.secondary,
80
- ...t(o, a, "body"),
81
+ ...o(e, a, "body"),
81
82
  ...l(
82
83
  r,
83
84
  a,
84
85
  "action",
85
- (e) => ({
86
- minWidth: e,
87
- maxWidth: e,
86
+ (t) => ({
87
+ minWidth: t,
88
+ maxWidth: t,
88
89
  height: "auto"
89
90
  })
90
91
  )
@@ -94,13 +95,23 @@ function b(r) {
94
95
  },
95
96
  // button days
96
97
  "& .rs-calendar-table-cell": {
97
- padding: "1px",
98
98
  width: "fit-content",
99
99
  height: "fit-content",
100
100
  borderTop: "1px dashed transparent",
101
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
+ },
102
114
  "& .rs-calendar-table-cell-content": {
103
- transition: "all 0.3s ease",
104
115
  borderRadius: r.vars.size.borderRadius.r2,
105
116
  display: "flex",
106
117
  alignItems: "center",
@@ -109,21 +120,15 @@ function b(r) {
109
120
  r,
110
121
  a,
111
122
  "action",
112
- (e) => ({
113
- minHeight: e,
114
- maxHeight: e,
115
- minWidth: e,
116
- maxWidth: e
123
+ (t) => ({
124
+ minHeight: t,
125
+ maxHeight: t,
126
+ minWidth: t,
127
+ maxWidth: t
117
128
  })
118
129
  ),
119
- "&:hover": {
120
- backgroundColor: r.vars.palette.default.hoverOpacity
121
- },
122
- "&:active": {
123
- backgroundColor: r.vars.palette.default.activeOpacity
124
- },
125
130
  "& .rs-calendar-table-cell-day": {
126
- ...t(o, a, "body")
131
+ ...o(e, a, "body")
127
132
  }
128
133
  },
129
134
  "&.rs-calendar-table-cell-un-same-month": {
@@ -133,6 +138,11 @@ function b(r) {
133
138
  }
134
139
  }
135
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
+ },
136
146
  "&.rs-calendar-table-cell-in-range": {
137
147
  borderRadius: 0,
138
148
  borderTop: `1px dashed ${r.vars.palette.border.secondary}`,
@@ -152,15 +162,21 @@ function b(r) {
152
162
  // para que el contenido interno no se vea cortado en las esquinas
153
163
  borderTopLeftRadius: `calc(${r.vars.size.borderRadius.r2} + 1px)`,
154
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
+ },
155
177
  "& .rs-calendar-table-cell-content": {
156
178
  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
- }
179
+ backgroundColor: r.vars.palette.primary.enabled
164
180
  }
165
181
  },
166
182
  "&.rs-calendar-table-cell-selected-end": {
@@ -168,15 +184,21 @@ function b(r) {
168
184
  // para que el contenido interno no se vea cortado en las esquinas
169
185
  borderTopRightRadius: `calc(${r.vars.size.borderRadius.r2} + 1px)`,
170
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
+ },
171
199
  "& .rs-calendar-table-cell-content": {
172
200
  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
- }
201
+ backgroundColor: r.vars.palette.primary.enabled
180
202
  }
181
203
  }
182
204
  }
@@ -193,7 +215,7 @@ function b(r) {
193
215
  // year title
194
216
  "& .rs-calendar-month-dropdown-year": {
195
217
  color: r.vars.palette.text.primary,
196
- ...t(o, a, "body"),
218
+ ...o(e, a, "body"),
197
219
  "&.rs-calendar-month-dropdown-year-active": {
198
220
  color: r.vars.palette.primary.enabled
199
221
  }
@@ -205,7 +227,7 @@ function b(r) {
205
227
  justifyContent: "center",
206
228
  "& .rs-calendar-month-dropdown-cell-content": {
207
229
  color: r.vars.palette.text.primary,
208
- ...t(o, a, "body"),
230
+ ...o(e, a, "body"),
209
231
  "&:hover": {
210
232
  backgroundColor: r.vars.palette.default.hoverOpacity,
211
233
  color: r.vars.palette.primary.enabled
@@ -218,7 +240,7 @@ function b(r) {
218
240
  "&.rs-calendar-month-dropdown-cell-active .rs-calendar-month-dropdown-cell-content": {
219
241
  backgroundColor: r.vars.palette.primary.enabled,
220
242
  color: r.vars.palette.primary.contrastText,
221
- ...t(o, a, "body"),
243
+ ...o(e, a, "body"),
222
244
  "&:hover": {
223
245
  backgroundColor: r.vars.palette.primary.hover
224
246
  },
@@ -236,14 +258,14 @@ function b(r) {
236
258
  "& .rs-calendar-time-dropdown-column-title": {
237
259
  backgroundColor: "transparent",
238
260
  color: r.vars.palette.text.primary,
239
- ...t(o, a, "body")
261
+ ...o(e, a, "body")
240
262
  },
241
263
  "& .rs-scroll-view-custom-scrollbar": {
242
264
  "& li": {
243
265
  "& .rs-calendar-time-dropdown-cell": {
244
266
  borderRadius: r.vars.size.borderRadius.r2,
245
267
  color: r.vars.palette.text.primary,
246
- ...t(o, a, "body"),
268
+ ...o(e, a, "body"),
247
269
  "&:hover": {
248
270
  backgroundColor: r.vars.palette.default.hoverOpacity
249
271
  },
@@ -280,7 +302,8 @@ function b(r) {
280
302
  }
281
303
  },
282
304
  "& .rs-calendar": {
283
- borderColor: r.vars.palette.border.disabled
305
+ borderColor: r.vars.palette.border.disabled,
306
+ height: "fit-content"
284
307
  }
285
308
  },
286
309
  // toolbar
@@ -290,8 +313,13 @@ function b(r) {
290
313
  display: "flex",
291
314
  alignItems: "center",
292
315
  justifyContent: "space-between",
316
+ "& .rs-picker-toolbar-ranges": {
317
+ "& .rs-btn": {
318
+ color: r.vars.palette.primary.enabled
319
+ }
320
+ },
293
321
  "& .rs-btn": {
294
- ...t(o, a, "body")
322
+ ...o(e, a, "body")
295
323
  },
296
324
  "& .rs-picker-toolbar-right": {
297
325
  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-BE20260202-2+PR665-dateRangePicker",
4
4
  "license": "UNLICENSED",
5
5
  "author": "M4L Team*",
6
6
  "type": "module",