@m4l/components 9.3.41 β†’ 9.3.43-BE20251205-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 (2) hide show
  1. package/components/mui_extended/DateTimePicker/DateTimePicker.styles.js +138 -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,140 @@ 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
+ },
173
+ "& .MuiMultiSectionDigitalClockSection-item": {
174
+ borderRadius: theme.vars.size.borderRadius.r1
175
+ },
176
+ "& .MuiDivider-root": {
177
+ borderColor: theme.vars.palette.border.secondary
178
+ },
179
+ // Estilos globales del MuiPickersLayout-root 🌎
180
+ "& .MuiPaper-root": {
181
+ paddingTop: theme.vars.size.baseSpacings.sp3,
182
+ borderRadius: theme.vars.size.borderRadius.r2,
183
+ backgroundColor: theme.vars.palette.background.default,
184
+ boxShadow: theme.vars.customShadows.z4
185
+ },
186
+ // Estilos globales del MuiPickersLayout-root 🌎
187
+ "& .MuiPickersLayout-root": {
188
+ gap: `0px 0px ${theme.vars.size.baseSpacings.sp1} 0px`,
189
+ "& .MuiPickersLayout-contentWrapper": {
190
+ // ↴ Overrides ❌
191
+ // paddingLeft: theme.vars.size.baseSpacings.sp3,
192
+ // paddingRight: theme.vars.size.baseSpacings.sp3,
193
+ // Estilos especΓ­ficos para el primer div hijo directo
194
+ "& > div:first-of-type": {
195
+ height: "265px"
196
+ }
187
197
  }
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,
198
+ },
199
+ // Estilos globales del MuiDateCalendar-root 🌎
200
+ "& .MuiDateCalendar-root": {
201
+ display: "flex",
202
+ width: "fit-content",
203
+ position: "relative",
204
+ top: -1,
205
+ gap: theme.vars.size.baseSpacings.sp3,
206
+ padding: theme.vars.size.baseSpacings.sp1,
207
+ // ↴ Overrides ❌
208
+ "& .MuiYearCalendar-root": {
209
+ // Fix en el height
210
+ height: "218px",
211
+ "& .MuiPickersYear-root": {
212
+ "& .MuiPickersYear-yearButton": {
213
+ width: "fit-content",
214
+ padding: `0px ${theme.vars.size.baseSpacings.sp3}`,
215
+ borderRadius: theme.vars.size.borderRadius.r1,
215
216
  "&:hover": {
216
- background: theme.vars.palette.primary.hover
217
+ background: theme.vars.palette.default.hoverOpacity
217
218
  },
218
219
  "&: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
- )
220
+ background: theme.vars.palette.default.active
221
+ },
222
+ "&.Mui-selected": {
223
+ background: theme.vars.palette.primary.enabled,
224
+ "&:hover": {
225
+ background: theme.vars.palette.primary.hover
226
+ },
227
+ "&:active": {
228
+ background: theme.vars.palette.primary.active
229
+ }
230
+ },
231
+ ...getHeightSizeStyles(
232
+ theme.generalSettings.isMobile,
233
+ ownerState?.size || "small",
234
+ "action",
235
+ (height) => ({
236
+ minHeight: height,
237
+ height,
238
+ maxHeight: height
239
+ })
240
+ ),
241
+ ...getTypographyStyles(
242
+ theme.generalSettings.isMobile,
243
+ ownerState?.size || "medium",
244
+ "body"
245
+ )
246
+ }
247
+ }
248
+ },
249
+ // ↴ Overrides ❌
250
+ "& .MuiDayCalendar-root": {
251
+ width: "fit-content",
252
+ padding: theme.vars.size.baseSpacings.sp2,
253
+ "& .MuiDayCalendar-header": {
254
+ display: "flex",
255
+ gap: theme.vars.size.baseSpacings.sp1,
256
+ "& .MuiTypography-root": {
257
+ margin: 0,
258
+ ...getTypographyStyles(
259
+ theme.generalSettings.isMobile,
260
+ ownerState?.size || "medium",
261
+ "body"
262
+ ),
263
+ ...getHeightSizeStyles(
264
+ theme.generalSettings.isMobile,
265
+ ownerState?.size || "small",
266
+ "action",
267
+ (height) => ({
268
+ minHeight: height,
269
+ height,
270
+ maxHeight: height,
271
+ minWidth: height,
272
+ width: height,
273
+ maxWidth: height
274
+ })
275
+ )
276
+ }
277
+ },
278
+ "& .MuiDayCalendar-weekContainer": {
279
+ display: "flex",
280
+ margin: 0,
281
+ paddingTop: theme.vars.size.baseSpacings.sp1,
282
+ gap: theme.vars.size.baseSpacings.sp1
237
283
  }
238
284
  }
239
285
  },
240
- // ↴ Overrides ❌
241
- "& .MuiDayCalendar-root": {
242
- width: "fit-content",
243
- padding: theme.vars.size.baseSpacings.sp2,
244
- "& .MuiDayCalendar-header": {
286
+ // Estilos globales del MuiMultiSectionDigitalClock-root 🌎
287
+ "& .MuiMultiSectionDigitalClock-root": {
288
+ padding: theme.vars.size.baseSpacings.sp1,
289
+ // ↴ Overrides ❌
290
+ "& .MuiList-root": {
245
291
  display: "flex",
246
- gap: theme.vars.size.baseSpacings.sp1,
247
- "& .MuiTypography-root": {
292
+ width: "fit-content",
293
+ flexDirection: "column",
294
+ overflow: "overlay",
295
+ borderColor: theme.vars.palette.border.secondary,
296
+ paddingRight: theme.vars.size.baseSpacings.sp2,
297
+ paddingLeft: theme.vars.size.baseSpacings.sp2,
298
+ gap: theme.vars.size.baseSpacings.sp2,
299
+ "& .MuiButtonBase-root": {
248
300
  margin: 0,
249
- ...getTypographyStyles(
250
- theme.generalSettings.isMobile,
251
- ownerState?.size || "medium",
252
- "body"
253
- ),
254
301
  ...getHeightSizeStyles(
255
302
  theme.generalSettings.isMobile,
256
303
  ownerState?.size || "small",
@@ -263,30 +310,19 @@ const dateTimePickerStyles = {
263
310
  width: height,
264
311
  maxWidth: height
265
312
  })
313
+ ),
314
+ ...getTypographyStyles(
315
+ theme.generalSettings.isMobile,
316
+ ownerState?.size || "medium",
317
+ "body"
266
318
  )
267
319
  }
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
320
  }
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,
321
+ },
322
+ // Estilos globales del MuiDialogActions-root 🌎
323
+ "& .MuiDialogActions-root": {
324
+ paddingRight: theme.vars.size.baseSpacings.sp3,
325
+ // ↴ Overrides ❌
290
326
  "& .MuiButtonBase-root": {
291
327
  margin: 0,
292
328
  ...getHeightSizeStyles(
@@ -309,32 +345,6 @@ const dateTimePickerStyles = {
309
345
  )
310
346
  }
311
347
  }
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
348
  }
339
349
  }),
340
350
  /**
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.1",
4
4
  "license": "UNLICENSED",
5
5
  "description": "M4L Components",
6
6
  "lint-staged": {