@mui/x-date-pickers 7.0.0-beta.7 → 7.1.0
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.
- package/AdapterDateFns/AdapterDateFns.js +1 -1
- package/AdapterDateFnsBase/AdapterDateFnsBase.js +1 -2
- package/AdapterDateFnsJalali/AdapterDateFnsJalali.js +2 -4
- package/AdapterDateFnsV3/AdapterDateFnsV3.js +1 -1
- package/AdapterDayjs/AdapterDayjs.js +2 -4
- package/AdapterLuxon/AdapterLuxon.js +12 -9
- package/AdapterMoment/AdapterMoment.js +5 -6
- package/CHANGELOG.md +266 -12
- package/DateCalendar/DateCalendar.js +14 -16
- package/DateCalendar/DayCalendar.js +5 -6
- package/DateField/DateField.js +3 -4
- package/DatePicker/DatePicker.js +1 -1
- package/DatePicker/DatePickerToolbar.js +11 -6
- package/DatePicker/shared.d.ts +2 -1
- package/DatePicker/shared.js +3 -5
- package/DateTimeField/DateTimeField.js +3 -4
- package/DateTimePicker/DateTimePicker.js +1 -1
- package/DateTimePicker/DateTimePickerToolbar.js +98 -46
- package/DateTimePicker/shared.d.ts +2 -1
- package/DateTimePicker/shared.js +11 -13
- package/DayCalendarSkeleton/DayCalendarSkeleton.js +12 -8
- package/DesktopDatePicker/DesktopDatePicker.js +7 -11
- package/DesktopDateTimePicker/DesktopDateTimePicker.js +72 -37
- package/DesktopDateTimePicker/DesktopDateTimePickerLayout.d.ts +12 -0
- package/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +101 -0
- package/DesktopDateTimePicker/index.d.ts +1 -0
- package/DesktopDateTimePicker/index.js +2 -1
- package/DesktopTimePicker/DesktopTimePicker.js +8 -12
- package/DigitalClock/DigitalClock.js +16 -9
- package/LocalizationProvider/LocalizationProvider.js +1 -2
- package/MobileDatePicker/MobileDatePicker.js +6 -10
- package/MobileDateTimePicker/MobileDateTimePicker.js +8 -12
- package/MobileTimePicker/MobileTimePicker.js +6 -10
- package/MonthCalendar/MonthCalendar.js +4 -4
- package/MonthCalendar/PickersMonth.js +13 -8
- package/MultiSectionDigitalClock/MultiSectionDigitalClock.js +1 -1
- package/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js +1 -1
- package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +16 -9
- package/PickersActionBar/PickersActionBar.js +1 -1
- package/PickersCalendarHeader/PickersCalendarHeader.js +17 -14
- package/PickersDay/PickersDay.js +30 -15
- package/PickersLayout/PickersLayout.js +31 -17
- package/PickersLayout/usePickerLayout.js +8 -9
- package/PickersSectionList/PickersSectionList.js +9 -11
- package/PickersTextField/PickersFilledInput/PickersFilledInput.js +138 -74
- package/PickersTextField/PickersInput/PickersInput.js +77 -55
- package/PickersTextField/PickersInputBase/PickersInputBase.js +67 -28
- package/PickersTextField/PickersInputBase/PickersInputBase.types.d.ts +7 -0
- package/PickersTextField/PickersOutlinedInput/Outline.js +58 -41
- package/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js +33 -14
- package/README.md +1 -1
- package/StaticDatePicker/StaticDatePicker.js +4 -5
- package/StaticDateTimePicker/StaticDateTimePicker.js +6 -7
- package/StaticTimePicker/StaticTimePicker.js +3 -4
- package/TimeClock/Clock.js +48 -35
- package/TimeClock/ClockNumber.js +12 -7
- package/TimeClock/ClockPointer.js +23 -13
- package/TimeClock/TimeClock.js +1 -1
- package/TimeField/TimeField.js +2 -3
- package/TimePicker/TimePickerToolbar.js +25 -16
- package/TimePicker/shared.d.ts +2 -1
- package/TimePicker/shared.js +5 -7
- package/YearCalendar/PickersYear.js +12 -6
- package/YearCalendar/YearCalendar.js +5 -6
- package/hooks/useClearableField.js +6 -7
- package/index.js +1 -1
- package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +19 -15
- package/internals/components/PickersModalDialog.js +6 -7
- package/internals/components/PickersPopper.js +25 -24
- package/internals/components/PickersToolbar.js +42 -24
- package/internals/hooks/date-helpers-hooks.js +1 -1
- package/internals/hooks/defaultizedFieldProps.js +15 -18
- package/internals/hooks/useClockReferenceDate.js +1 -1
- package/internals/hooks/useDesktopPicker/index.d.ts +1 -1
- package/internals/hooks/useDesktopPicker/useDesktopPicker.js +11 -12
- package/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts +2 -2
- package/internals/hooks/useField/buildSectionsFromFormat.js +35 -31
- package/internals/hooks/useField/useField.js +6 -4
- package/internals/hooks/useField/useField.types.d.ts +1 -0
- package/internals/hooks/useField/useField.utils.js +4 -7
- package/internals/hooks/useField/useFieldCharacterEditing.js +1 -2
- package/internals/hooks/useField/useFieldState.js +1 -1
- package/internals/hooks/useField/useFieldV6TextField.js +17 -18
- package/internals/hooks/useField/useFieldV7TextField.js +9 -11
- package/internals/hooks/useMobilePicker/useMobilePicker.js +7 -8
- package/internals/hooks/useOpenState.js +1 -1
- package/internals/hooks/usePicker/index.d.ts +1 -0
- package/internals/hooks/usePicker/usePickerViews.d.ts +4 -2
- package/internals/hooks/usePicker/usePickerViews.js +1 -2
- package/internals/hooks/useStaticPicker/useStaticPicker.js +13 -17
- package/internals/hooks/useValueWithTimezone.js +5 -6
- package/internals/hooks/useViews.js +3 -4
- package/internals/index.d.ts +1 -1
- package/internals/models/validation.d.ts +1 -1
- package/internals/utils/convertFieldResponseIntoMuiTextFieldProps.js +3 -3
- package/internals/utils/date-time-utils.js +2 -5
- package/internals/utils/fields.js +1 -1
- package/internals/utils/getDefaultReferenceDate.js +2 -6
- package/internals/utils/views.js +1 -1
- package/locales/csCZ.js +1 -4
- package/locales/daDK.js +1 -4
- package/locales/deDE.js +1 -4
- package/locales/huHU.js +1 -4
- package/locales/itIT.js +16 -20
- package/locales/jaJP.js +1 -4
- package/locales/roRO.js +1 -4
- package/locales/skSK.js +1 -4
- package/locales/zhHK.js +14 -17
- package/modern/AdapterLuxon/AdapterLuxon.js +9 -4
- package/modern/DateCalendar/DateCalendar.js +1 -1
- package/modern/DateField/DateField.js +1 -1
- package/modern/DatePicker/DatePicker.js +1 -1
- package/modern/DatePicker/DatePickerToolbar.js +11 -6
- package/modern/DateTimeField/DateTimeField.js +1 -1
- package/modern/DateTimePicker/DateTimePicker.js +1 -1
- package/modern/DateTimePicker/DateTimePickerToolbar.js +97 -45
- package/modern/DayCalendarSkeleton/DayCalendarSkeleton.js +12 -8
- package/modern/DesktopDatePicker/DesktopDatePicker.js +1 -1
- package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +64 -25
- package/modern/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +101 -0
- package/modern/DesktopDateTimePicker/index.js +2 -1
- package/modern/DigitalClock/DigitalClock.js +14 -6
- package/modern/MobileDatePicker/MobileDatePicker.js +1 -1
- package/modern/MobileDateTimePicker/MobileDateTimePicker.js +1 -1
- package/modern/MonthCalendar/PickersMonth.js +12 -6
- package/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +13 -4
- package/modern/PickersCalendarHeader/PickersCalendarHeader.js +13 -9
- package/modern/PickersDay/PickersDay.js +30 -15
- package/modern/PickersLayout/PickersLayout.js +31 -17
- package/modern/PickersTextField/PickersFilledInput/PickersFilledInput.js +137 -72
- package/modern/PickersTextField/PickersInput/PickersInput.js +76 -54
- package/modern/PickersTextField/PickersInputBase/PickersInputBase.js +64 -24
- package/modern/PickersTextField/PickersOutlinedInput/Outline.js +58 -41
- package/modern/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js +31 -12
- package/modern/StaticDatePicker/StaticDatePicker.js +1 -1
- package/modern/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
- package/modern/TimeClock/Clock.js +48 -35
- package/modern/TimeClock/ClockNumber.js +12 -7
- package/modern/TimeClock/ClockPointer.js +23 -13
- package/modern/TimePicker/TimePickerToolbar.js +25 -16
- package/modern/YearCalendar/PickersYear.js +12 -6
- package/modern/index.js +1 -1
- package/modern/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +11 -6
- package/modern/internals/components/PickersPopper.js +13 -9
- package/modern/internals/components/PickersToolbar.js +39 -18
- package/modern/internals/hooks/useField/buildSectionsFromFormat.js +34 -30
- package/modern/internals/hooks/useField/useField.js +4 -2
- package/modern/internals/hooks/useField/useFieldV6TextField.js +8 -3
- package/modern/internals/hooks/useField/useFieldV7TextField.js +1 -1
- package/modern/internals/hooks/useOpenState.js +1 -1
- package/modern/internals/utils/fields.js +1 -1
- package/modern/locales/itIT.js +16 -20
- package/modern/locales/zhHK.js +14 -17
- package/node/AdapterLuxon/AdapterLuxon.js +9 -4
- package/node/DateCalendar/DateCalendar.js +1 -1
- package/node/DateField/DateField.js +1 -1
- package/node/DatePicker/DatePicker.js +1 -1
- package/node/DatePicker/DatePickerToolbar.js +11 -6
- package/node/DateTimeField/DateTimeField.js +1 -1
- package/node/DateTimePicker/DateTimePicker.js +1 -1
- package/node/DateTimePicker/DateTimePickerToolbar.js +97 -45
- package/node/DayCalendarSkeleton/DayCalendarSkeleton.js +12 -8
- package/node/DesktopDatePicker/DesktopDatePicker.js +1 -1
- package/node/DesktopDateTimePicker/DesktopDateTimePicker.js +63 -25
- package/node/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +108 -0
- package/node/DesktopDateTimePicker/index.js +8 -1
- package/node/DigitalClock/DigitalClock.js +14 -6
- package/node/MobileDatePicker/MobileDatePicker.js +1 -1
- package/node/MobileDateTimePicker/MobileDateTimePicker.js +1 -1
- package/node/MonthCalendar/PickersMonth.js +12 -6
- package/node/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +13 -4
- package/node/PickersCalendarHeader/PickersCalendarHeader.js +13 -9
- package/node/PickersDay/PickersDay.js +30 -15
- package/node/PickersLayout/PickersLayout.js +31 -17
- package/node/PickersTextField/PickersFilledInput/PickersFilledInput.js +137 -72
- package/node/PickersTextField/PickersInput/PickersInput.js +76 -54
- package/node/PickersTextField/PickersInputBase/PickersInputBase.js +64 -24
- package/node/PickersTextField/PickersOutlinedInput/Outline.js +58 -41
- package/node/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js +31 -12
- package/node/StaticDatePicker/StaticDatePicker.js +1 -1
- package/node/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
- package/node/TimeClock/Clock.js +48 -35
- package/node/TimeClock/ClockNumber.js +12 -7
- package/node/TimeClock/ClockPointer.js +23 -13
- package/node/TimePicker/TimePickerToolbar.js +25 -16
- package/node/YearCalendar/PickersYear.js +12 -6
- package/node/index.js +1 -1
- package/node/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +11 -6
- package/node/internals/components/PickersPopper.js +13 -9
- package/node/internals/components/PickersToolbar.js +39 -18
- package/node/internals/hooks/useField/buildSectionsFromFormat.js +34 -30
- package/node/internals/hooks/useField/useField.js +4 -2
- package/node/internals/hooks/useField/useFieldV6TextField.js +8 -3
- package/node/internals/hooks/useField/useFieldV7TextField.js +1 -1
- package/node/internals/hooks/useOpenState.js +1 -1
- package/node/internals/utils/fields.js +1 -1
- package/node/locales/itIT.js +16 -20
- package/node/locales/zhHK.js +14 -17
- package/package.json +5 -5
- package/timeViewRenderers/timeViewRenderers.js +1 -1
- package/dateTimeViewRenderers/dateTimeViewRenderers.d.ts +0 -15
- package/dateTimeViewRenderers/dateTimeViewRenderers.js +0 -163
- package/dateTimeViewRenderers/index.d.ts +0 -2
- package/dateTimeViewRenderers/index.js +0 -1
- package/dateTimeViewRenderers/package.json +0 -6
- package/modern/dateTimeViewRenderers/dateTimeViewRenderers.js +0 -162
- package/modern/dateTimeViewRenderers/index.js +0 -1
- package/node/dateTimeViewRenderers/dateTimeViewRenderers.js +0 -171
- package/node/dateTimeViewRenderers/index.js +0 -12
|
@@ -79,7 +79,7 @@ export class AdapterDateFns extends AdapterDateFnsBase {
|
|
|
79
79
|
throw new Error(['MUI: The `date-fns` package v3.x is not compatible with this adapter.', 'Please, install v2.x of the package or use the `AdapterDateFnsV3` instead.'].join('\n'));
|
|
80
80
|
}
|
|
81
81
|
super({
|
|
82
|
-
locale: locale
|
|
82
|
+
locale: locale ?? defaultLocale,
|
|
83
83
|
formats,
|
|
84
84
|
longFormatters
|
|
85
85
|
});
|
|
@@ -249,8 +249,7 @@ export class AdapterDateFnsBase {
|
|
|
249
249
|
return value;
|
|
250
250
|
};
|
|
251
251
|
this.getCurrentLocaleCode = () => {
|
|
252
|
-
|
|
253
|
-
return ((_this$locale = this.locale) == null ? void 0 : _this$locale.code) || 'en-US';
|
|
252
|
+
return this.locale?.code || 'en-US';
|
|
254
253
|
};
|
|
255
254
|
// Note: date-fns input types are more lenient than this adapter, so we need to expose our more
|
|
256
255
|
// strict signature and delegate to the more lenient signature. Otherwise, we have downstream type errors upon usage.
|
|
@@ -315,8 +315,7 @@ export class AdapterDateFnsJalali {
|
|
|
315
315
|
});
|
|
316
316
|
};
|
|
317
317
|
this.getCurrentLocaleCode = () => {
|
|
318
|
-
|
|
319
|
-
return ((_this$locale = this.locale) == null ? void 0 : _this$locale.code) || 'fa-IR';
|
|
318
|
+
return this.locale?.code || 'fa-IR';
|
|
320
319
|
};
|
|
321
320
|
// Note: date-fns input types are more lenient than this adapter, so we need to expose our more
|
|
322
321
|
// strict signature and delegate to the more lenient signature. Otherwise, we have downstream type errors upon usage.
|
|
@@ -329,10 +328,9 @@ export class AdapterDateFnsJalali {
|
|
|
329
328
|
return true;
|
|
330
329
|
};
|
|
331
330
|
this.expandFormat = format => {
|
|
332
|
-
var _this$locale2;
|
|
333
331
|
// @see https://github.com/date-fns/date-fns/blob/master/src/format/index.js#L31
|
|
334
332
|
const longFormatRegexp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g;
|
|
335
|
-
const locale =
|
|
333
|
+
const locale = this.locale ?? defaultLocale;
|
|
336
334
|
return format.match(longFormatRegexp).map(token => {
|
|
337
335
|
const firstCharacter = token[0];
|
|
338
336
|
if (firstCharacter === 'p' || firstCharacter === 'P') {
|
|
@@ -87,7 +87,7 @@ export class AdapterDateFns extends AdapterDateFnsBase {
|
|
|
87
87
|
throw new Error('MUI: The minimum supported `date-fns` package version compatible with this adapter is `3.2.x`.');
|
|
88
88
|
}
|
|
89
89
|
super({
|
|
90
|
-
locale: locale
|
|
90
|
+
locale: locale ?? enUS,
|
|
91
91
|
formats,
|
|
92
92
|
longFormatters
|
|
93
93
|
});
|
|
@@ -251,10 +251,9 @@ export class AdapterDayjs {
|
|
|
251
251
|
}
|
|
252
252
|
const timezone = this.getTimezone(value);
|
|
253
253
|
if (timezone !== 'UTC') {
|
|
254
|
-
var _fixedValue$$offset, _value$$offset;
|
|
255
254
|
const fixedValue = value.tz(this.cleanTimezone(timezone), true);
|
|
256
255
|
// @ts-ignore
|
|
257
|
-
if ((
|
|
256
|
+
if ((fixedValue.$offset ?? 0) === (value.$offset ?? 0)) {
|
|
258
257
|
return value;
|
|
259
258
|
}
|
|
260
259
|
return fixedValue;
|
|
@@ -281,9 +280,8 @@ export class AdapterDayjs {
|
|
|
281
280
|
this.getInvalidDate = () => defaultDayjs(new Date('Invalid date'));
|
|
282
281
|
this.getTimezone = value => {
|
|
283
282
|
if (this.hasTimezonePlugin()) {
|
|
284
|
-
var _value$$x;
|
|
285
283
|
// @ts-ignore
|
|
286
|
-
const zone =
|
|
284
|
+
const zone = value.$x?.$timezone;
|
|
287
285
|
if (zone) {
|
|
288
286
|
return zone;
|
|
289
287
|
}
|
|
@@ -229,18 +229,21 @@ export class AdapterLuxon {
|
|
|
229
229
|
};
|
|
230
230
|
/* istanbul ignore next */
|
|
231
231
|
this.is12HourCycleInCurrentLocale = () => {
|
|
232
|
-
var _Intl$DateTimeFormat;
|
|
233
232
|
if (typeof Intl === 'undefined' || typeof Intl.DateTimeFormat === 'undefined') {
|
|
234
233
|
return true; // Luxon defaults to en-US if Intl not found
|
|
235
234
|
}
|
|
236
|
-
return Boolean(
|
|
235
|
+
return Boolean(new Intl.DateTimeFormat(this.locale, {
|
|
237
236
|
hour: 'numeric'
|
|
238
|
-
})
|
|
237
|
+
})?.resolvedOptions()?.hour12);
|
|
239
238
|
};
|
|
240
239
|
this.expandFormat = format => {
|
|
241
240
|
// Extract escaped section to avoid extending them
|
|
242
241
|
const catchEscapedSectionsRegexp = /''|'(''|[^'])+('|$)|[^']*/g;
|
|
243
242
|
|
|
243
|
+
// This RegExp tests if a string is only mad of supported tokens
|
|
244
|
+
const validTokens = [...Object.keys(this.formatTokenMap), 'yyyyy'];
|
|
245
|
+
const isWordComposedOfTokens = new RegExp(`^(${validTokens.join('|')})+$`);
|
|
246
|
+
|
|
244
247
|
// Extract words to test if they are a token or a word to escape.
|
|
245
248
|
const catchWordsRegexp = /(?:^|[^a-z])([a-z]+)(?:[^a-z]|$)|([a-z]+)/gi;
|
|
246
249
|
return format.match(catchEscapedSectionsRegexp).map(token => {
|
|
@@ -251,12 +254,13 @@ export class AdapterLuxon {
|
|
|
251
254
|
const expandedToken = DateTime.expandFormat(token, {
|
|
252
255
|
locale: this.locale
|
|
253
256
|
});
|
|
254
|
-
return expandedToken.replace(catchWordsRegexp, (
|
|
257
|
+
return expandedToken.replace(catchWordsRegexp, (substring, g1, g2) => {
|
|
255
258
|
const word = g1 || g2; // words are either in group 1 or group 2
|
|
256
|
-
|
|
257
|
-
|
|
259
|
+
|
|
260
|
+
if (isWordComposedOfTokens.test(word)) {
|
|
261
|
+
return substring;
|
|
258
262
|
}
|
|
259
|
-
return `'${
|
|
263
|
+
return `'${substring}'`;
|
|
260
264
|
});
|
|
261
265
|
}).join('')
|
|
262
266
|
// The returned format can contain `yyyyy` which means year between 4 and 6 digits.
|
|
@@ -476,8 +480,7 @@ export class AdapterLuxon {
|
|
|
476
480
|
return weeks;
|
|
477
481
|
};
|
|
478
482
|
this.getWeekNumber = value => {
|
|
479
|
-
|
|
480
|
-
return (_value$localWeekNumbe = value.localWeekNumber) != null ? _value$localWeekNumbe : value.weekNumber;
|
|
483
|
+
return value.localWeekNumber ?? value.weekNumber;
|
|
481
484
|
};
|
|
482
485
|
this.getDayOfWeek = value => {
|
|
483
486
|
return value.weekday;
|
|
@@ -211,17 +211,15 @@ export class AdapterMoment {
|
|
|
211
211
|
};
|
|
212
212
|
this.getInvalidDate = () => this.moment(new Date('Invalid Date'));
|
|
213
213
|
this.getTimezone = value => {
|
|
214
|
-
var _value$_z, _ref, _this$moment$defaultZ;
|
|
215
214
|
// @ts-ignore
|
|
216
215
|
// eslint-disable-next-line no-underscore-dangle
|
|
217
|
-
const zone =
|
|
216
|
+
const zone = value._z?.name;
|
|
218
217
|
const defaultZone = value.isUTC() ? 'UTC' : 'system';
|
|
219
218
|
|
|
220
219
|
// @ts-ignore
|
|
221
|
-
return
|
|
220
|
+
return zone ?? this.moment.defaultZone?.name ?? defaultZone;
|
|
222
221
|
};
|
|
223
222
|
this.setTimezone = (value, timezone) => {
|
|
224
|
-
var _this$moment$defaultZ2, _this$moment$defaultZ3;
|
|
225
223
|
if (this.getTimezone(value) === timezone) {
|
|
226
224
|
return value;
|
|
227
225
|
}
|
|
@@ -238,8 +236,9 @@ export class AdapterMoment {
|
|
|
238
236
|
}
|
|
239
237
|
return value;
|
|
240
238
|
}
|
|
241
|
-
const cleanZone = timezone === 'default' ?
|
|
242
|
-
|
|
239
|
+
const cleanZone = timezone === 'default' ?
|
|
240
|
+
// @ts-ignore
|
|
241
|
+
this.moment.defaultZone?.name ?? 'system' : timezone;
|
|
243
242
|
if (cleanZone === 'system') {
|
|
244
243
|
return value.clone().local();
|
|
245
244
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,260 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 7.1.0
|
|
7
|
+
|
|
8
|
+
_Mar 28, 2024_
|
|
9
|
+
|
|
10
|
+
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
|
|
11
|
+
|
|
12
|
+
- 🚀 Add `resizeThrottleMs` prop (#12556) @romgrk
|
|
13
|
+
- 🌍 Improve Chinese (Hong Kong) (zh-HK) and Italian (it-IT) locale on the Pickers
|
|
14
|
+
- 🐞 Bugfixes
|
|
15
|
+
- 📚 Documentation improvements
|
|
16
|
+
|
|
17
|
+
### Data Grid
|
|
18
|
+
|
|
19
|
+
#### `@mui/x-data-grid@7.1.0`
|
|
20
|
+
|
|
21
|
+
- [DataGrid] Add `resizeThrottleMs` prop (#12556) @romgrk
|
|
22
|
+
- [DataGrid] Do not publish `rowEditStop` event if row has fields with errors (#11383) @cherniavskii
|
|
23
|
+
- [DataGrid] Fix bug in suspense (#12553) @romgrk
|
|
24
|
+
- [DataGrid] Fix missing class name in the `GridToolbarQuickFilter` component (#12484) @jhawkins11
|
|
25
|
+
|
|
26
|
+
#### `@mui/x-data-grid-pro@7.1.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
27
|
+
|
|
28
|
+
Same changes as in `@mui/x-data-grid@7.1.0`.
|
|
29
|
+
|
|
30
|
+
#### `@mui/x-data-grid-premium@7.1.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
31
|
+
|
|
32
|
+
Same changes as in `@mui/x-data-grid-pro@7.1.0`.
|
|
33
|
+
|
|
34
|
+
### Date and Time Pickers
|
|
35
|
+
|
|
36
|
+
#### `@mui/x-date-pickers@7.1.0`
|
|
37
|
+
|
|
38
|
+
- [fields] Fix placeholder override (#12589) @flaviendelangle
|
|
39
|
+
- [l10n] Improve Chinese (Hong Kong) (zh-HK) locale (#12547) @samchiu90
|
|
40
|
+
- [l10n] Improve Italian (it-IT) locale (#12549) @antomanc
|
|
41
|
+
- [pickers] Prepare compatibility with `@mui/zero-runtime` (stop using `ownerState` in `styled`) (#12003) @flaviendelangle
|
|
42
|
+
|
|
43
|
+
#### `@mui/x-date-pickers-pro@7.1.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
44
|
+
|
|
45
|
+
Same changes as in `@mui/x-date-pickers@7.1.0`, plus:
|
|
46
|
+
|
|
47
|
+
- [DateRangePicker] Fix selection behavior with single input field when `readOnly` (#12593) @LukasTy
|
|
48
|
+
|
|
49
|
+
### Charts
|
|
50
|
+
|
|
51
|
+
#### `@mui/x-charts@7.1.0`
|
|
52
|
+
|
|
53
|
+
- [charts] Fix tooltip causing crash on data change (#12571) @Rishi556
|
|
54
|
+
|
|
55
|
+
### Tree View
|
|
56
|
+
|
|
57
|
+
#### `@mui/x-tree-view@7.1.0`
|
|
58
|
+
|
|
59
|
+
- [TreeView] Do not use outdated version of the state to compute new label first char in `RichTreeView` (#12512) @flaviendelangle
|
|
60
|
+
|
|
61
|
+
### Docs
|
|
62
|
+
|
|
63
|
+
- [docs] Add example to add a second icon next to the field's opening button (#12524) @flaviendelangle
|
|
64
|
+
- [docs] Add missing note to Data Grid migration guide (#12557) @romgrk
|
|
65
|
+
- [docs] Fix Charts title for SEO (#12545) @oliviertassinari
|
|
66
|
+
- [docs] Fix small typo (#12558) @diogoparente
|
|
67
|
+
- [docs] Improve codemod related documentation (#12582) @MBilalShafi
|
|
68
|
+
- [docs] Reduce noise in migration docs side navigation (#12552) @cherniavskii
|
|
69
|
+
- [docs] Sync static images from core repository (#12525) @LukasTy
|
|
70
|
+
|
|
71
|
+
### Core
|
|
72
|
+
|
|
73
|
+
- [core] Fix `l10n` script on Windows (#12550) @LukasTy
|
|
74
|
+
- [core] Include `DateTimeRangePicker` tag in `releaseChangelog` (#12526) @LukasTy
|
|
75
|
+
- [core] Upgrade monorepo (#12536) @cherniavskii
|
|
76
|
+
|
|
77
|
+
## v7.0.0
|
|
78
|
+
|
|
79
|
+
_Mar 22, 2024_
|
|
80
|
+
|
|
81
|
+
We're excited to [announce the first v7 stable release](https://mui.com/blog/mui-x-v7/)! 🎉🚀
|
|
82
|
+
|
|
83
|
+
This is now the officially supported major version, where we'll keep rolling out new features, bug fixes, and improvements.
|
|
84
|
+
Migration guides are available with a complete list of the breaking changes:
|
|
85
|
+
|
|
86
|
+
- [Data Grid](https://mui.com/x/migration/migration-data-grid-v6/)
|
|
87
|
+
- [Date and Time Pickers](https://mui.com/x/migration/migration-pickers-v6/)
|
|
88
|
+
- [Tree View](https://mui.com/x/migration/migration-tree-view-v6/)
|
|
89
|
+
- [Charts](https://mui.com/x/migration/migration-charts-v6/)
|
|
90
|
+
|
|
91
|
+
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
|
|
92
|
+
|
|
93
|
+
- 🚀 Improve the usage of custom `viewRenderers` on `DateTimePicker` (#12441) @LukasTy
|
|
94
|
+
- ✨ Set focus on the focused Tree Item instead of the Tree View (#12226) @flaviendelangle
|
|
95
|
+
- 🕹️ Support controlled `density` for the Data Grid (#12332) @MBilalShafi
|
|
96
|
+
- 🎁 Dynamic virtualization range for the Data Grid (#12353) @romgrk
|
|
97
|
+
- 🐞 Bugfixes
|
|
98
|
+
- 📚 Documentation improvements
|
|
99
|
+
|
|
100
|
+
### Data Grid
|
|
101
|
+
|
|
102
|
+
#### Breaking changes
|
|
103
|
+
|
|
104
|
+
- The `density` is a [controlled prop](https://mui.com/x/react-data-grid/accessibility/#set-the-density-programmatically) now, if you were previously passing the `density` prop to the Data Grid, you will need to do one of the following:
|
|
105
|
+
|
|
106
|
+
1. Move it to the `initialState.density` to initialize it.
|
|
107
|
+
|
|
108
|
+
```diff
|
|
109
|
+
<DataGrid
|
|
110
|
+
- density="compact"
|
|
111
|
+
+ initialState={{ density: "compact" }}
|
|
112
|
+
/>
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
2. Move it to the state and use `onDensityChange` callback to update the `density` prop accordingly for it to work as expected.
|
|
116
|
+
|
|
117
|
+
```diff
|
|
118
|
+
+ const [density, setDensity] = React.useState<GridDensity>('compact');
|
|
119
|
+
<DataGrid
|
|
120
|
+
- density="compact"
|
|
121
|
+
+ density={density}
|
|
122
|
+
+ onDensityChange={(newDensity) => setDensity(newDensity)}
|
|
123
|
+
/>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
- The selector `gridDensityValueSelector` was removed, use the `gridDensitySelector` instead.
|
|
127
|
+
|
|
128
|
+
- The props `rowBuffer` and `columnBuffer` were renamed to `rowBufferPx` and `columnBufferPx`.
|
|
129
|
+
Their value is now a pixel value rather than a number of items. Their default value is now `150`.
|
|
130
|
+
|
|
131
|
+
- The props `rowThreshold` and `columnThreshold` have been removed.
|
|
132
|
+
If you had the `rowThreshold` prop set to `0` to force new rows to be rendered more often – this is no longer necessary.
|
|
133
|
+
|
|
134
|
+
#### `@mui/x-data-grid@7.0.0`
|
|
135
|
+
|
|
136
|
+
- [DataGrid] Allow to control the grid density (#12332) @MBilalShafi
|
|
137
|
+
- [DataGrid] Dynamic virtualization range (#12353) @romgrk
|
|
138
|
+
- [DataGrid] Fix `ElementType` usage (#12479) @cherniavskii
|
|
139
|
+
- [DataGrid] Fix cell value formatting on copy (#12357) @sai6855
|
|
140
|
+
- [DataGrid] Fix checkbox selection is keeping selection when filtering (#11751) @g1mishra
|
|
141
|
+
- [DataGrid] Make `rows` an optional prop (#12478) @MBilalShafi
|
|
142
|
+
|
|
143
|
+
#### `@mui/x-data-grid-pro@7.0.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
144
|
+
|
|
145
|
+
Same changes as in `@mui/x-data-grid@7.0.0`.
|
|
146
|
+
|
|
147
|
+
#### `@mui/x-data-grid-premium@7.0.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
148
|
+
|
|
149
|
+
Same changes as in `@mui/x-data-grid-pro@7.0.0`, plus:
|
|
150
|
+
|
|
151
|
+
- [DataGridPremium] Add support for confirmation before clipboard paste (#12225) @cherniavskii
|
|
152
|
+
- [DataGridPremium] Fix single grouping column sorting (#9679) @cherniavskii
|
|
153
|
+
- [DataGridPremium] Fix boolean cell not rendered in group rows (#12492) @sai6855
|
|
154
|
+
|
|
155
|
+
### Date and Time Pickers
|
|
156
|
+
|
|
157
|
+
#### Breaking changes
|
|
158
|
+
|
|
159
|
+
- The `DesktopDateTimePicker` view rendering has been optimized by using the same technique as for `DesktopDateTimeRangePicker`.
|
|
160
|
+
- The `dateTimeViewRenderers` have been removed in favor of reusing existing time view renderers (`renderTimeViewClock`, `renderDigitalClockTimeView` and `renderMultiSectionDigitalClockTimeView`) and date view renderer (`renderDateViewCalendar`).
|
|
161
|
+
- Passing `renderTimeViewClock` to time view renderers will no longer revert to the old behavior of rendering only date or time view.
|
|
162
|
+
|
|
163
|
+
#### `@mui/x-date-pickers@7.0.0`
|
|
164
|
+
|
|
165
|
+
- [fields] Allow to override the separator between the start and the end date in all range fields (#12174) @flaviendelangle
|
|
166
|
+
- [fields] Support format without separator (#12489) @flaviendelangle
|
|
167
|
+
- [pickers] Use renderer interceptor on `DesktopDateTimePicker` (#12441) @LukasTy
|
|
168
|
+
|
|
169
|
+
#### `@mui/x-date-pickers-pro@7.0.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
170
|
+
|
|
171
|
+
Same changes as in `@mui/x-date-pickers@7.0.0`, plus:
|
|
172
|
+
|
|
173
|
+
- [DateTimeRangePicker] Add component `JSDoc` (#12518) @LukasTy
|
|
174
|
+
- [DateTimeRangePicker] Fix views behavior regression (#12529) @LukasTy
|
|
175
|
+
|
|
176
|
+
### Charts
|
|
177
|
+
|
|
178
|
+
#### `@mui/x-charts@7.0.0`
|
|
179
|
+
|
|
180
|
+
- [charts] Fix small typo in `CartesianContextProvider` (#12461) @Janpot
|
|
181
|
+
|
|
182
|
+
### Tree View
|
|
183
|
+
|
|
184
|
+
#### Breaking changes
|
|
185
|
+
|
|
186
|
+
- The required `nodeId` prop used by the `TreeItem` has been renamed to `itemId` for consistency:
|
|
187
|
+
|
|
188
|
+
```diff
|
|
189
|
+
<TreeView>
|
|
190
|
+
- <TreeItem label="Item 1" nodeId="one">
|
|
191
|
+
+ <TreeItem label="Item 1" itemId="one">
|
|
192
|
+
</TreeView>
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
- The focus is now applied to the Tree Item root element instead of the Tree View root element.
|
|
196
|
+
|
|
197
|
+
This change will allow new features that require the focus to be on the Tree Item,
|
|
198
|
+
like the drag and drop reordering of items.
|
|
199
|
+
It also solves several issues with focus management,
|
|
200
|
+
like the inability to scroll to the focused item when a lot of items are rendered.
|
|
201
|
+
|
|
202
|
+
This will mostly impact how you write tests to interact with the Tree View:
|
|
203
|
+
|
|
204
|
+
For example, if you were writing a test with `react-testing-library`, here is what the changes could look like:
|
|
205
|
+
|
|
206
|
+
```diff
|
|
207
|
+
it('test example on first item', () => {
|
|
208
|
+
- const { getByRole } = render(
|
|
209
|
+
+ const { getAllByRole } = render(
|
|
210
|
+
<SimpleTreeView>
|
|
211
|
+
<TreeItem nodeId="one" />
|
|
212
|
+
<TreeItem nodeId="two" />
|
|
213
|
+
</SimpleTreeView>
|
|
214
|
+
);
|
|
215
|
+
|
|
216
|
+
- const tree = getByRole('tree');
|
|
217
|
+
+ const firstTreeItem = getAllByRole('treeitem')[0];
|
|
218
|
+
act(() => {
|
|
219
|
+
- tree.focus();
|
|
220
|
+
+ firstTreeItem.focus();
|
|
221
|
+
});
|
|
222
|
+
- fireEvent.keyDown(tree, { key: 'ArrowDown' });
|
|
223
|
+
+ fireEvent.keyDown(firstTreeItem, { key: 'ArrowDown' });
|
|
224
|
+
})
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
#### `@mui/x-tree-view@7.0.0`
|
|
228
|
+
|
|
229
|
+
- [TreeView] Rename `nodeId` to `itemId` (#12418) @noraleonte
|
|
230
|
+
- [TreeView] Set focus on the focused Tree Item instead of the Tree View (#12226) @flaviendelangle
|
|
231
|
+
- [TreeView] Update JSDoc of the `ContentComponent` prop to avoid using the word "node" (#12476) @flaviendelangle
|
|
232
|
+
|
|
233
|
+
### `@mui/x-codemod@7.0.0`
|
|
234
|
+
|
|
235
|
+
- [codemod] Add a codemod and update the grid migration guide (#12488) @MBilalShafi
|
|
236
|
+
|
|
237
|
+
### Docs
|
|
238
|
+
|
|
239
|
+
- [docs] Finalize migration guide (#12501) @noraleonte
|
|
240
|
+
- [docs] Fix nested cells alignment in the popular features demo (#12450) @cherniavskii
|
|
241
|
+
- [docs] Fix some Vale errors (#12469) @oliviertassinari
|
|
242
|
+
- [docs] Remove mentions of pre release (#12513) @noraleonte
|
|
243
|
+
- [docs] Update branch name and tags (#12498) @cherniavskii
|
|
244
|
+
- [docs] Update links to v6 (#12496) @cherniavskii
|
|
245
|
+
- [docs] Update links to v7 docs (#12500) @noraleonte
|
|
246
|
+
- [docs] Update supported versions (#12508) @joserodolfofreitas
|
|
247
|
+
- [docs] Update "What's new in MUI X" page #12527 @cherniavskii
|
|
248
|
+
|
|
249
|
+
### Core
|
|
250
|
+
|
|
251
|
+
- [core] Bump `@mui/material` peer dependency for all packages (#12516) @LukasTy
|
|
252
|
+
- [core] Fix `no-restricted-imports` ESLint rule not working for Data Grid packages (#12477) @cherniavskii
|
|
253
|
+
- [core] Lower the frequency of `no-response` action runs (#12491) @michaldudak
|
|
254
|
+
- [core] Remove leftover `legacy` `browserlistrc` entry (#12415) @LukasTy
|
|
255
|
+
- [core] Update NPM tag (#12511) @cherniavskii
|
|
256
|
+
- [core] Update supported browsers (browserlistrc) (#12521) @LukasTy
|
|
257
|
+
- [core] Use Circle CI context @oliviertassinari
|
|
258
|
+
- [license] Fix grammar on expired license error message (#12460) @joserodolfofreitas
|
|
259
|
+
|
|
6
260
|
## 7.0.0-beta.7
|
|
7
261
|
|
|
8
262
|
_Mar 14, 2024_
|
|
@@ -90,7 +344,7 @@ The `onNodeFocus` callback has been renamed to `onItemFocus` for consistency:
|
|
|
90
344
|
- [docs] Add `legacy` bundle drop mention in migration pages (#12424) @LukasTy
|
|
91
345
|
- [docs] Add missing luxon `Info` import (#12427) @LukasTy
|
|
92
346
|
- [docs] Improve slots definitions for charts (#12408) @alexfauquette
|
|
93
|
-
- [docs] Polish What's new in MUI
|
|
347
|
+
- [docs] Polish What's new in MUI X blog titles (#12309) @oliviertassinari
|
|
94
348
|
- [docs] Replace `rel="noreferrer"` by `rel="noopener"` @oliviertassinari
|
|
95
349
|
- [docs] Update `date-fns` `weekStarsOn` overriding example (#12416) @LukasTy
|
|
96
350
|
|
|
@@ -252,7 +506,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-beta.5`.
|
|
|
252
506
|
### Docs
|
|
253
507
|
|
|
254
508
|
- [docs] Fix image layout shift when loading @oliviertassinari
|
|
255
|
-
- [docs] Match Material
|
|
509
|
+
- [docs] Match Material UI repo comment for redirections @oliviertassinari
|
|
256
510
|
- [docs] Non breaking spaces @oliviertassinari
|
|
257
511
|
- [docs] Polish the Date Picker playground (#11869) @zanivan
|
|
258
512
|
- [docs] Standardize WAI-ARIA references @oliviertassinari
|
|
@@ -263,9 +517,9 @@ Same changes as in `@mui/x-date-pickers@7.0.0-beta.5`.
|
|
|
263
517
|
- [core] Remove grid folder from `getComponentInfo` RegExp (#12241) @flaviendelangle
|
|
264
518
|
- [core] Remove `window.` reference for common globals @oliviertassinari
|
|
265
519
|
- [core] Use runtime agnostic setTimeout type @oliviertassinari
|
|
266
|
-
- [docs-infra] Fix Stack
|
|
520
|
+
- [docs-infra] Fix Stack Overflow breaking space @oliviertassinari
|
|
267
521
|
- [docs-infra] Fix missing non breaking spaces @oliviertassinari
|
|
268
|
-
- [
|
|
522
|
+
- [infra] Update `no-response` workflow (#12193) @MBilalShafi
|
|
269
523
|
- [infra] Fix missing permission reset @oliviertassinari
|
|
270
524
|
|
|
271
525
|
## 7.0.0-beta.4
|
|
@@ -282,7 +536,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
|
|
|
282
536
|
|
|
283
537
|
### Breaking changes
|
|
284
538
|
|
|
285
|
-
- The support for IE11 has been removed from all MUI
|
|
539
|
+
- The support for IE11 has been removed from all MUI X packages. The `legacy` bundle that used to support old browsers like IE11 is no longer included.
|
|
286
540
|
|
|
287
541
|
### Data Grid
|
|
288
542
|
|
|
@@ -324,7 +578,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`.
|
|
|
324
578
|
- The headless field hooks (e.g.: `useDateField`) now returns a new prop called `enableAccessibleFieldDOMStructure`.
|
|
325
579
|
This property is utilized to determine whether the anticipated UI is constructed using an accessible DOM structure. Learn more about this new [accessible DOM structure](/x/react-date-pickers/fields/#accessible-dom-structure).
|
|
326
580
|
|
|
327
|
-
|
|
581
|
+
When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove `enableAccessibleFieldDOMStructure` before it is passed to the DOM:
|
|
328
582
|
|
|
329
583
|
```diff
|
|
330
584
|
function MyCustomTextField(props) {
|
|
@@ -392,7 +646,7 @@ These components are no longer exported from `@mui/x-charts`:
|
|
|
392
646
|
### Docs
|
|
393
647
|
|
|
394
648
|
- [docs] Add recipe for hiding separator on non-resizable columns (#12134) @michelengelen
|
|
395
|
-
- [docs] Add small improvements to the Gauge
|
|
649
|
+
- [docs] Add small improvements to the Gauge page (#12076) @danilo-leal
|
|
396
650
|
- [docs] Add the 'point' scaleType to the axis documentation (#12179) @alexfauquette
|
|
397
651
|
- [docs] Clarify Pickers 'Component composition' section (#12097) @LukasTy
|
|
398
652
|
- [docs] Fix "Licensing" page link (#12156) @LukasTy
|
|
@@ -975,7 +1229,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.9`.
|
|
|
975
1229
|
|
|
976
1230
|
- [charts] Do not propagate `innerRadius` and `outerRadius` to the DOM (#11689) @alexfauquette
|
|
977
1231
|
- [charts] Fix default `stackOffset` for `LineChart` (#11647) @alexfauquette
|
|
978
|
-
- [charts] Remove a
|
|
1232
|
+
- [charts] Remove a TypeScript ignore (#11688) @alexfauquette
|
|
979
1233
|
|
|
980
1234
|
### Tree View
|
|
981
1235
|
|
|
@@ -1404,7 +1658,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.7`.
|
|
|
1404
1658
|
- [core] Fix release changelog (#11496) @romgrk
|
|
1405
1659
|
- [core] Fix use of ::before & ::after (#11515) @oliviertassinari
|
|
1406
1660
|
- [core] Localize the issue template to MUI X (#11511) @oliviertassinari
|
|
1407
|
-
- [core]
|
|
1661
|
+
- [core] Regenerate API files (#11542) @flaviendelangle
|
|
1408
1662
|
- [core] Remove issue emoji @oliviertassinari
|
|
1409
1663
|
- [core] Sync the release instructions with MUI Core @oliviertassinari
|
|
1410
1664
|
- [core] Yaml format match most common convention @oliviertassinari
|
|
@@ -1447,7 +1701,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
|
|
|
1447
1701
|
|
|
1448
1702
|
- The `filterModel` now supports `Date` objects as values for `date` and `dateTime` column types.
|
|
1449
1703
|
The `filterModel` still accepts strings as values for `date` and `dateTime` column types,
|
|
1450
|
-
but all updates to the `filterModel` coming from the UI (
|
|
1704
|
+
but all updates to the `filterModel` coming from the UI (for example filter panel) will set the value as a `Date` object.
|
|
1451
1705
|
|
|
1452
1706
|
#### `@mui/x-data-grid@7.0.0-alpha.6`
|
|
1453
1707
|
|
|
@@ -1658,7 +1912,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.5`, plus:
|
|
|
1658
1912
|
### Core
|
|
1659
1913
|
|
|
1660
1914
|
- [core] Automate cherry-pick of PRs from `next` -> `master` (#11382) @MBilalShafi
|
|
1661
|
-
- [
|
|
1915
|
+
- [infra] Update `no-response` workflow (#11369) @MBilalShafi
|
|
1662
1916
|
- [test] Fix flaky screenshots (#11388) @cherniavskii
|
|
1663
1917
|
|
|
1664
1918
|
## 7.0.0-alpha.4
|
|
@@ -1896,7 +2150,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.3`.
|
|
|
1896
2150
|
|
|
1897
2151
|
- [charts] Adjusted `defaultizeValueFormatter` util to accept an optional `series.valueFormatter` value (#11144) @michelengelen
|
|
1898
2152
|
- [charts] Apply `labelStyle` and `tickLabelStyle` props on `<ChartsYAxis />` (#11180) @akamfoad
|
|
1899
|
-
- [charts] Fix
|
|
2153
|
+
- [charts] Fix TypeScript config (#11259) @alexfauquette
|
|
1900
2154
|
- [charts] Fix error with empty dataset (#11063) @alexfauquette
|
|
1901
2155
|
- [charts] Fix export strategy (#11235) @alexfauquette
|
|
1902
2156
|
- [charts] Remove outdated prop-types (#11045) @alexfauquette
|
|
@@ -35,7 +35,6 @@ const useUtilityClasses = ownerState => {
|
|
|
35
35
|
return composeClasses(slots, getDateCalendarUtilityClass, classes);
|
|
36
36
|
};
|
|
37
37
|
function useDateCalendarDefaultizedProps(props, name) {
|
|
38
|
-
var _themeProps$loading, _themeProps$disablePa, _themeProps$disableFu, _themeProps$openTo, _themeProps$views, _themeProps$reduceAni, _themeProps$renderLoa;
|
|
39
38
|
const utils = useUtils();
|
|
40
39
|
const defaultDates = useDefaultDates();
|
|
41
40
|
const defaultReduceAnimations = useDefaultReduceAnimations();
|
|
@@ -44,15 +43,15 @@ function useDateCalendarDefaultizedProps(props, name) {
|
|
|
44
43
|
name
|
|
45
44
|
});
|
|
46
45
|
return _extends({}, themeProps, {
|
|
47
|
-
loading:
|
|
48
|
-
disablePast:
|
|
49
|
-
disableFuture:
|
|
50
|
-
openTo:
|
|
51
|
-
views:
|
|
52
|
-
reduceAnimations:
|
|
53
|
-
renderLoading:
|
|
46
|
+
loading: themeProps.loading ?? false,
|
|
47
|
+
disablePast: themeProps.disablePast ?? false,
|
|
48
|
+
disableFuture: themeProps.disableFuture ?? false,
|
|
49
|
+
openTo: themeProps.openTo ?? 'day',
|
|
50
|
+
views: themeProps.views ?? ['year', 'day'],
|
|
51
|
+
reduceAnimations: themeProps.reduceAnimations ?? defaultReduceAnimations,
|
|
52
|
+
renderLoading: themeProps.renderLoading ?? (() => /*#__PURE__*/_jsx("span", {
|
|
54
53
|
children: "..."
|
|
55
|
-
}),
|
|
54
|
+
})),
|
|
56
55
|
minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
|
|
57
56
|
maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate)
|
|
58
57
|
});
|
|
@@ -83,7 +82,6 @@ const DateCalendarViewTransitionContainer = styled(PickersFadeTransitionGroup, {
|
|
|
83
82
|
* - [DateCalendar API](https://mui.com/x/api/date-pickers/date-calendar/)
|
|
84
83
|
*/
|
|
85
84
|
export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps, ref) {
|
|
86
|
-
var _slots$calendarHeader;
|
|
87
85
|
const utils = useUtils();
|
|
88
86
|
const id = useId();
|
|
89
87
|
const props = useDateCalendarDefaultizedProps(inProps, 'MuiDateCalendar');
|
|
@@ -181,10 +179,10 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
|
|
|
181
179
|
const maxDateWithDisabled = disabled && value || maxDate;
|
|
182
180
|
const gridLabelId = `${id}-grid-label`;
|
|
183
181
|
const hasFocus = focusedView !== null;
|
|
184
|
-
const CalendarHeader =
|
|
182
|
+
const CalendarHeader = slots?.calendarHeader ?? PickersCalendarHeader;
|
|
185
183
|
const calendarHeaderProps = useSlotProps({
|
|
186
184
|
elementType: CalendarHeader,
|
|
187
|
-
externalSlotProps: slotProps
|
|
185
|
+
externalSlotProps: slotProps?.calendarHeader,
|
|
188
186
|
additionalProps: {
|
|
189
187
|
views,
|
|
190
188
|
view,
|
|
@@ -222,7 +220,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
|
|
|
222
220
|
}) : newDate;
|
|
223
221
|
if (closestEnabledDate) {
|
|
224
222
|
setValueAndGoToNextView(closestEnabledDate, 'finish');
|
|
225
|
-
onMonthChange
|
|
223
|
+
onMonthChange?.(startOfMonth);
|
|
226
224
|
} else {
|
|
227
225
|
goToNextView();
|
|
228
226
|
changeMonth(startOfMonth);
|
|
@@ -244,7 +242,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
|
|
|
244
242
|
}) : newDate;
|
|
245
243
|
if (closestEnabledDate) {
|
|
246
244
|
setValueAndGoToNextView(closestEnabledDate, 'finish');
|
|
247
|
-
onYearChange
|
|
245
|
+
onYearChange?.(closestEnabledDate);
|
|
248
246
|
} else {
|
|
249
247
|
goToNextView();
|
|
250
248
|
changeMonth(startOfYear);
|
|
@@ -254,7 +252,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
|
|
|
254
252
|
const handleSelectedDayChange = useEventCallback(day => {
|
|
255
253
|
if (day) {
|
|
256
254
|
// If there is a date already selected, then we want to keep its time
|
|
257
|
-
return handleValueChange(mergeDateAndTime(utils, day, value
|
|
255
|
+
return handleValueChange(mergeDateAndTime(utils, day, value ?? referenceDate), 'finish', view);
|
|
258
256
|
}
|
|
259
257
|
return handleValueChange(day, 'finish', view);
|
|
260
258
|
});
|
|
@@ -489,7 +487,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
|
|
|
489
487
|
/**
|
|
490
488
|
* Disable specific date.
|
|
491
489
|
*
|
|
492
|
-
* Warning: This function can be called multiple times (
|
|
490
|
+
* Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
|
|
493
491
|
*
|
|
494
492
|
* @template TDate
|
|
495
493
|
* @param {TDate} day The date to test.
|
|
@@ -133,7 +133,6 @@ const PickersCalendarWeek = styled('div', {
|
|
|
133
133
|
justifyContent: 'center'
|
|
134
134
|
});
|
|
135
135
|
function WrappedDay(_ref) {
|
|
136
|
-
var _slots$day;
|
|
137
136
|
let {
|
|
138
137
|
parentProps,
|
|
139
138
|
day,
|
|
@@ -158,11 +157,11 @@ function WrappedDay(_ref) {
|
|
|
158
157
|
const isFocusableDay = focusableDay !== null && utils.isSameDay(day, focusableDay);
|
|
159
158
|
const isSelected = selectedDays.some(selectedDay => utils.isSameDay(selectedDay, day));
|
|
160
159
|
const isToday = utils.isSameDay(day, now);
|
|
161
|
-
const Day =
|
|
160
|
+
const Day = slots?.day ?? PickersDay;
|
|
162
161
|
// We don't want to pass to ownerState down, to avoid re-rendering all the day whenever a prop changes.
|
|
163
162
|
const _useSlotProps = useSlotProps({
|
|
164
163
|
elementType: Day,
|
|
165
|
-
externalSlotProps: slotProps
|
|
164
|
+
externalSlotProps: slotProps?.day,
|
|
166
165
|
additionalProps: _extends({
|
|
167
166
|
disableHighlightToday,
|
|
168
167
|
showDaysOutsideCurrentMonth,
|
|
@@ -268,7 +267,7 @@ export function DayCalendar(inProps) {
|
|
|
268
267
|
name: 'DayCalendar',
|
|
269
268
|
state: 'hasFocus',
|
|
270
269
|
controlled: hasFocus,
|
|
271
|
-
default: autoFocus
|
|
270
|
+
default: autoFocus ?? false
|
|
272
271
|
});
|
|
273
272
|
const [internalFocusedDay, setInternalFocusedDay] = React.useState(() => focusedDay || now);
|
|
274
273
|
const handleDaySelect = useEventCallback(day => {
|
|
@@ -281,7 +280,7 @@ export function DayCalendar(inProps) {
|
|
|
281
280
|
if (!isDateDisabled(day)) {
|
|
282
281
|
onFocusedDayChange(day);
|
|
283
282
|
setInternalFocusedDay(day);
|
|
284
|
-
onFocusedViewChange
|
|
283
|
+
onFocusedViewChange?.(true);
|
|
285
284
|
setInternalHasFocus(true);
|
|
286
285
|
}
|
|
287
286
|
};
|
|
@@ -350,7 +349,7 @@ export function DayCalendar(inProps) {
|
|
|
350
349
|
const handleFocus = useEventCallback((event, day) => focusDay(day));
|
|
351
350
|
const handleBlur = useEventCallback((event, day) => {
|
|
352
351
|
if (internalHasFocus && utils.isSameDay(internalFocusedDay, day)) {
|
|
353
|
-
onFocusedViewChange
|
|
352
|
+
onFocusedViewChange?.(false);
|
|
354
353
|
}
|
|
355
354
|
});
|
|
356
355
|
const currentMonthNumber = utils.getMonth(currentMonth);
|