@m4l/components 9.3.41 β†’ 9.3.43-BE20251205-beta.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 (2) hide show
  1. package/components/mui_extended/DateTimePicker/DateTimePicker.styles.js +153 -128
  2. package/package.json +1 -1
package/components/mui_extended/DateTimePicker/DateTimePicker.styles.js CHANGED
@@ -20,7 +20,7 @@ const dateTimePickerStyles = {
20
20
  "& .MuiInputBase-root": {
21
21
  height: "100%",
22
22
  padding: 0,
23
- borderRadius: theme.vars.size.borderRadius.r1,
23
+ borderRadius: theme.vars.size.borderRadius.r2,
24
24
  paddingLeft: theme.vars.size.baseSpacings.sp1,
25
25
  "& input": {
26
26
  padding: 0,
@@ -61,7 +61,7 @@ const dateTimePickerStyles = {
61
61
  border: 0,
62
62
  borderBottom: theme.vars.size.borderStroke.actionInput
63
63
  },
64
- borderColor: ownerState?.error ? theme.vars.palette.error.hover : ownerState?.disabled ? `${theme.vars.palette.border.secondary}` : theme.vars.palette.border.default,
64
+ borderColor: ownerState?.error ? theme.vars.palette.error.hover : theme.vars.palette.border.secondary,
65
65
  borderRadius: theme.vars.size.borderRadius.r1,
66
66
  borderWidth: 1
67
67
  },
@@ -111,7 +111,7 @@ const dateTimePickerStyles = {
111
111
  "& .MuiInputBase-root": {
112
112
  height: "100%",
113
113
  padding: 0,
114
- borderRadius: theme.vars.size.borderRadius.r1,
114
+ borderRadius: theme.vars.size.borderRadius.r2,
115
115
  paddingLeft: theme.vars.size.baseSpacings.sp1,
116
116
  "& input": {
117
117
  padding: 0,
@@ -164,93 +164,155 @@ const dateTimePickerStyles = {
164
164
  * Estilos para el popper de Material UI
165
165
  */
166
166
  popper: ({ theme, ownerState }) => ({
167
- zIndex: theme.vars.zIndex.modal,
168
- "& .MuiDivider-root": {
169
- borderColor: theme.vars.palette.border.secondary
170
- },
171
- // Estilos globales del MuiPickersLayout-root 🌎
172
- "& .MuiPaper-root": {
173
- boxShadow: theme.vars.customShadows.z4,
174
- paddingTop: theme.vars.size.baseSpacings.sp3,
175
- borderRadius: theme.vars.size.borderRadius.r1
176
- },
177
- // Estilos globales del MuiPickersLayout-root 🌎
178
- "& .MuiPickersLayout-root": {
179
- gap: `0px 0px ${theme.vars.size.baseSpacings.sp1} 0px`,
180
- "& .MuiPickersLayout-contentWrapper": {
181
- // ↴ Overrides ❌
182
- // paddingLeft: theme.vars.size.baseSpacings.sp3,
183
- // paddingRight: theme.vars.size.baseSpacings.sp3,
184
- // Estilos especΓ­ficos para el primer div hijo directo
185
- "& > div:first-of-type": {
186
- height: "265px"
167
+ "&&&": {
168
+ zIndex: theme.vars.zIndex.modal,
169
+ marginTop: `${theme.vars.size.baseSpacings.sp2} !important`,
170
+ "& .MuiPickersDay-root.Mui-selected": {
171
+ backgroundColor: theme.vars.palette.primary.enabled,
172
+ "&:hover": {
173
+ backgroundColor: theme.vars.palette.primary.hover
174
+ },
175
+ "&:active": {
176
+ backgroundColor: theme.vars.palette.primary.active
187
177
  }
188
- }
189
- },
190
- // Estilos globales del MuiDateCalendar-root 🌎
191
- "& .MuiDateCalendar-root": {
192
- display: "flex",
193
- width: "fit-content",
194
- position: "relative",
195
- top: -1,
196
- gap: theme.vars.size.baseSpacings.sp3,
197
- padding: theme.vars.size.baseSpacings.sp1,
198
- // ↴ Overrides ❌
199
- "& .MuiYearCalendar-root": {
200
- // Fix en el height
201
- height: "218px",
202
- "& .MuiPickersYear-root": {
203
- "& .MuiPickersYear-yearButton": {
204
- width: "fit-content",
205
- padding: `0px ${theme.vars.size.baseSpacings.sp3}`,
206
- borderRadius: theme.vars.size.borderRadius.r1,
207
- "&:hover": {
208
- background: theme.vars.palette.default.hoverOpacity
209
- },
210
- "&:active": {
211
- background: theme.vars.palette.default.active
212
- },
213
- "&.Mui-selected": {
214
- background: theme.vars.palette.primary.enabled,
178
+ },
179
+ "& .MuiMultiSectionDigitalClockSection-item": {
180
+ borderRadius: theme.vars.size.borderRadius.r1,
181
+ "&.Mui-selected": {
182
+ backgroundColor: theme.vars.palette.primary.enabled,
183
+ "&:hover": {
184
+ backgroundColor: theme.vars.palette.primary.hover
185
+ },
186
+ "&:active": {
187
+ backgroundColor: theme.vars.palette.primary.active
188
+ }
189
+ }
190
+ },
191
+ "& .MuiDivider-root": {
192
+ borderColor: theme.vars.palette.border.secondary
193
+ },
194
+ // Estilos globales del MuiPickersLayout-root 🌎
195
+ "& .MuiPaper-root": {
196
+ paddingTop: theme.vars.size.baseSpacings.sp3,
197
+ borderRadius: theme.vars.size.borderRadius.r2,
198
+ backgroundColor: theme.vars.palette.background.default,
199
+ boxShadow: theme.vars.customShadows.z4
200
+ },
201
+ // Estilos globales del MuiPickersLayout-root 🌎
202
+ "& .MuiPickersLayout-root": {
203
+ gap: `0px 0px ${theme.vars.size.baseSpacings.sp1} 0px`,
204
+ "& .MuiPickersLayout-contentWrapper": {
205
+ // ↴ Overrides ❌
206
+ // paddingLeft: theme.vars.size.baseSpacings.sp3,
207
+ // paddingRight: theme.vars.size.baseSpacings.sp3,
208
+ // Estilos especΓ­ficos para el primer div hijo directo
209
+ "& > div:first-of-type": {
210
+ height: "265px"
211
+ }
212
+ }
213
+ },
214
+ // Estilos globales del MuiDateCalendar-root 🌎
215
+ "& .MuiDateCalendar-root": {
216
+ display: "flex",
217
+ width: "fit-content",
218
+ position: "relative",
219
+ top: -1,
220
+ gap: theme.vars.size.baseSpacings.sp3,
221
+ padding: theme.vars.size.baseSpacings.sp1,
222
+ // ↴ Overrides ❌
223
+ "& .MuiYearCalendar-root": {
224
+ // Fix en el height
225
+ height: "218px",
226
+ "& .MuiPickersYear-root": {
227
+ "& .MuiPickersYear-yearButton": {
228
+ width: "fit-content",
229
+ padding: `0px ${theme.vars.size.baseSpacings.sp3}`,
230
+ borderRadius: theme.vars.size.borderRadius.r1,
215
231
  "&:hover": {
216
- background: theme.vars.palette.primary.hover
232
+ background: theme.vars.palette.default.hoverOpacity
217
233
  },
218
234
  "&:active": {
219
- background: theme.vars.palette.primary.active
220
- }
221
- },
222
- ...getHeightSizeStyles(
223
- theme.generalSettings.isMobile,
224
- ownerState?.size || "small",
225
- "action",
226
- (height) => ({
227
- minHeight: height,
228
- height,
229
- maxHeight: height
230
- })
231
- ),
232
- ...getTypographyStyles(
233
- theme.generalSettings.isMobile,
234
- ownerState?.size || "medium",
235
- "body"
236
- )
235
+ background: theme.vars.palette.default.active
236
+ },
237
+ "&.Mui-selected": {
238
+ background: theme.vars.palette.primary.enabled,
239
+ "&:hover": {
240
+ background: theme.vars.palette.primary.hover
241
+ },
242
+ "&:active": {
243
+ background: theme.vars.palette.primary.active
244
+ }
245
+ },
246
+ ...getHeightSizeStyles(
247
+ theme.generalSettings.isMobile,
248
+ ownerState?.size || "small",
249
+ "action",
250
+ (height) => ({
251
+ minHeight: height,
252
+ height,
253
+ maxHeight: height
254
+ })
255
+ ),
256
+ ...getTypographyStyles(
257
+ theme.generalSettings.isMobile,
258
+ ownerState?.size || "medium",
259
+ "body"
260
+ )
261
+ }
262
+ }
263
+ },
264
+ // ↴ Overrides ❌
265
+ "& .MuiDayCalendar-root": {
266
+ width: "fit-content",
267
+ padding: theme.vars.size.baseSpacings.sp2,
268
+ "& .MuiDayCalendar-header": {
269
+ display: "flex",
270
+ gap: theme.vars.size.baseSpacings.sp1,
271
+ "& .MuiTypography-root": {
272
+ margin: 0,
273
+ ...getTypographyStyles(
274
+ theme.generalSettings.isMobile,
275
+ ownerState?.size || "medium",
276
+ "body"
277
+ ),
278
+ ...getHeightSizeStyles(
279
+ theme.generalSettings.isMobile,
280
+ ownerState?.size || "small",
281
+ "action",
282
+ (height) => ({
283
+ minHeight: height,
284
+ height,
285
+ maxHeight: height,
286
+ minWidth: height,
287
+ width: height,
288
+ maxWidth: height
289
+ })
290
+ )
291
+ }
292
+ },
293
+ "& .MuiDayCalendar-weekContainer": {
294
+ display: "flex",
295
+ margin: 0,
296
+ paddingTop: theme.vars.size.baseSpacings.sp1,
297
+ gap: theme.vars.size.baseSpacings.sp1
237
298
  }
238
299
  }
239
300
  },
240
- // ↴ Overrides ❌
241
- "& .MuiDayCalendar-root": {
242
- width: "fit-content",
243
- padding: theme.vars.size.baseSpacings.sp2,
244
- "& .MuiDayCalendar-header": {
301
+ // Estilos globales del MuiMultiSectionDigitalClock-root 🌎
302
+ "& .MuiMultiSectionDigitalClock-root": {
303
+ padding: theme.vars.size.baseSpacings.sp1,
304
+ // ↴ Overrides ❌
305
+ "& .MuiList-root": {
245
306
  display: "flex",
246
- gap: theme.vars.size.baseSpacings.sp1,
247
- "& .MuiTypography-root": {
307
+ width: "fit-content",
308
+ flexDirection: "column",
309
+ overflow: "overlay",
310
+ borderColor: theme.vars.palette.border.secondary,
311
+ paddingRight: theme.vars.size.baseSpacings.sp2,
312
+ paddingLeft: theme.vars.size.baseSpacings.sp2,
313
+ gap: theme.vars.size.baseSpacings.sp2,
314
+ "& .MuiButtonBase-root": {
248
315
  margin: 0,
249
- ...getTypographyStyles(
250
- theme.generalSettings.isMobile,
251
- ownerState?.size || "medium",
252
- "body"
253
- ),
254
316
  ...getHeightSizeStyles(
255
317
  theme.generalSettings.isMobile,
256
318
  ownerState?.size || "small",
@@ -263,30 +325,19 @@ const dateTimePickerStyles = {
263
325
  width: height,
264
326
  maxWidth: height
265
327
  })
328
+ ),
329
+ ...getTypographyStyles(
330
+ theme.generalSettings.isMobile,
331
+ ownerState?.size || "medium",
332
+ "body"
266
333
  )
267
334
  }
268
- },
269
- "& .MuiDayCalendar-weekContainer": {
270
- display: "flex",
271
- margin: 0,
272
- paddingTop: theme.vars.size.baseSpacings.sp1,
273
- gap: theme.vars.size.baseSpacings.sp1
274
335
  }
275
- }
276
- },
277
- // Estilos globales del MuiMultiSectionDigitalClock-root 🌎
278
- "& .MuiMultiSectionDigitalClock-root": {
279
- padding: theme.vars.size.baseSpacings.sp1,
280
- // ↴ Overrides ❌
281
- "& .MuiList-root": {
282
- display: "flex",
283
- width: "fit-content",
284
- flexDirection: "column",
285
- overflow: "overlay",
286
- borderColor: theme.vars.palette.border.secondary,
287
- paddingRight: theme.vars.size.baseSpacings.sp2,
288
- paddingLeft: theme.vars.size.baseSpacings.sp2,
289
- gap: theme.vars.size.baseSpacings.sp2,
336
+ },
337
+ // Estilos globales del MuiDialogActions-root 🌎
338
+ "& .MuiDialogActions-root": {
339
+ paddingRight: theme.vars.size.baseSpacings.sp3,
340
+ // ↴ Overrides ❌
290
341
  "& .MuiButtonBase-root": {
291
342
  margin: 0,
292
343
  ...getHeightSizeStyles(
@@ -309,32 +360,6 @@ const dateTimePickerStyles = {
309
360
  )
310
361
  }
311
362
  }
312
- },
313
- // Estilos globales del MuiDialogActions-root 🌎
314
- "& .MuiDialogActions-root": {
315
- paddingRight: theme.vars.size.baseSpacings.sp3,
316
- // ↴ Overrides ❌
317
- "& .MuiButtonBase-root": {
318
- margin: 0,
319
- ...getHeightSizeStyles(
320
- theme.generalSettings.isMobile,
321
- ownerState?.size || "small",
322
- "action",
323
- (height) => ({
324
- minHeight: height,
325
- height,
326
- maxHeight: height,
327
- minWidth: height,
328
- width: height,
329
- maxWidth: height
330
- })
331
- ),
332
- ...getTypographyStyles(
333
- theme.generalSettings.isMobile,
334
- ownerState?.size || "medium",
335
- "body"
336
- )
337
- }
338
363
  }
339
364
  }),
340
365
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "9.3.41",
3
+ "version": "9.3.43-BE20251205-beta.2",
4
4
  "license": "UNLICENSED",
5
5
  "description": "M4L Components",
6
6
  "lint-staged": {