@mui/x-date-pickers 8.5.3 → 8.6.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/CHANGELOG.md +107 -0
- package/DateCalendar/DateCalendar.js +16 -16
- package/DateCalendar/DayCalendar.js +48 -48
- package/DateCalendar/useCalendarState.js +25 -25
- package/DateCalendar/useIsDateDisabled.js +2 -2
- package/DatePicker/DatePickerToolbar.js +7 -9
- package/DateTimeField/DateTimeField.js +1 -1
- package/DateTimePicker/DateTimePicker.js +1 -1
- package/DateTimePicker/DateTimePickerToolbar.js +12 -13
- package/DateTimePicker/shared.js +3 -3
- package/DesktopDatePicker/DesktopDatePicker.js +3 -3
- package/DesktopDateTimePicker/DesktopDateTimePicker.js +4 -4
- package/DesktopTimePicker/DesktopTimePicker.js +4 -4
- package/DigitalClock/DigitalClock.d.ts +1 -1
- package/DigitalClock/DigitalClock.js +16 -16
- package/LocalizationProvider/LocalizationProvider.d.ts +9 -3
- package/LocalizationProvider/LocalizationProvider.js +28 -19
- package/MobileDatePicker/MobileDatePicker.js +3 -3
- package/MobileDateTimePicker/MobileDateTimePicker.js +4 -4
- package/MobileTimePicker/MobileTimePicker.js +4 -4
- package/MonthCalendar/MonthCalendar.js +19 -18
- package/MultiSectionDigitalClock/MultiSectionDigitalClock.js +32 -32
- package/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.d.ts +4 -4
- package/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js +7 -7
- package/PickerDay2/PickerDay2.js +3 -3
- package/PickersActionBar/PickersActionBar.d.ts +2 -2
- package/PickersActionBar/PickersActionBar.js +2 -2
- package/PickersCalendarHeader/PickersCalendarHeader.js +7 -8
- package/PickersDay/PickersDay.js +3 -3
- package/PickersDay/usePickerDayOwnerState.js +5 -5
- package/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
- package/StaticTimePicker/StaticTimePicker.js +1 -1
- package/TimeClock/Clock.js +8 -9
- package/TimeClock/ClockNumbers.d.ts +3 -3
- package/TimeClock/ClockNumbers.js +5 -5
- package/TimeClock/TimeClock.js +29 -29
- package/TimeField/TimeField.js +1 -1
- package/TimePicker/TimePicker.js +1 -1
- package/TimePicker/TimePickerToolbar.js +7 -9
- package/TimePicker/shared.js +3 -3
- package/YearCalendar/YearCalendar.js +19 -18
- package/esm/DateCalendar/DateCalendar.js +16 -16
- package/esm/DateCalendar/DayCalendar.js +48 -48
- package/esm/DateCalendar/useCalendarState.js +25 -25
- package/esm/DateCalendar/useIsDateDisabled.js +2 -2
- package/esm/DatePicker/DatePickerToolbar.js +6 -8
- package/esm/DateTimeField/DateTimeField.js +1 -1
- package/esm/DateTimePicker/DateTimePicker.js +1 -1
- package/esm/DateTimePicker/DateTimePickerToolbar.js +11 -12
- package/esm/DateTimePicker/shared.js +3 -3
- package/esm/DesktopDatePicker/DesktopDatePicker.js +3 -3
- package/esm/DesktopDateTimePicker/DesktopDateTimePicker.js +4 -4
- package/esm/DesktopTimePicker/DesktopTimePicker.js +4 -4
- package/esm/DigitalClock/DigitalClock.d.ts +1 -1
- package/esm/DigitalClock/DigitalClock.js +16 -16
- package/esm/LocalizationProvider/LocalizationProvider.d.ts +9 -3
- package/esm/LocalizationProvider/LocalizationProvider.js +27 -18
- package/esm/MobileDatePicker/MobileDatePicker.js +3 -3
- package/esm/MobileDateTimePicker/MobileDateTimePicker.js +4 -4
- package/esm/MobileTimePicker/MobileTimePicker.js +4 -4
- package/esm/MonthCalendar/MonthCalendar.js +20 -19
- package/esm/MultiSectionDigitalClock/MultiSectionDigitalClock.js +32 -32
- package/esm/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.d.ts +4 -4
- package/esm/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js +7 -7
- package/esm/PickerDay2/PickerDay2.js +3 -3
- package/esm/PickersActionBar/PickersActionBar.d.ts +2 -2
- package/esm/PickersActionBar/PickersActionBar.js +2 -2
- package/esm/PickersCalendarHeader/PickersCalendarHeader.js +6 -7
- package/esm/PickersDay/PickersDay.js +3 -3
- package/esm/PickersDay/usePickerDayOwnerState.js +5 -5
- package/esm/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
- package/esm/StaticTimePicker/StaticTimePicker.js +1 -1
- package/esm/TimeClock/Clock.js +7 -8
- package/esm/TimeClock/ClockNumbers.d.ts +3 -3
- package/esm/TimeClock/ClockNumbers.js +5 -5
- package/esm/TimeClock/TimeClock.js +29 -29
- package/esm/TimeField/TimeField.js +1 -1
- package/esm/TimePicker/TimePicker.js +1 -1
- package/esm/TimePicker/TimePickerToolbar.js +6 -8
- package/esm/TimePicker/shared.js +3 -3
- package/esm/YearCalendar/YearCalendar.js +20 -19
- package/esm/hooks/index.d.ts +2 -1
- package/esm/hooks/index.js +2 -1
- package/esm/hooks/useParsedFormat.js +6 -6
- package/esm/hooks/usePickerAdapter.d.ts +7 -0
- package/esm/hooks/usePickerAdapter.js +20 -0
- package/esm/hooks/usePickerTranslations.js +1 -1
- package/esm/index.js +1 -1
- package/esm/internals/components/pickersToolbarClasses.d.ts +1 -1
- package/esm/internals/demo/DemoContainer.d.ts +2 -3
- package/esm/internals/demo/DemoContainer.js +3 -2
- package/esm/internals/hooks/date-helpers-hooks.js +16 -16
- package/esm/internals/hooks/useClockReferenceDate.d.ts +2 -2
- package/esm/internals/hooks/useClockReferenceDate.js +3 -3
- package/esm/internals/hooks/useControlledValue.js +8 -7
- package/esm/internals/hooks/useField/buildSectionsFromFormat.d.ts +1 -1
- package/esm/internals/hooks/useField/buildSectionsFromFormat.js +17 -17
- package/esm/internals/hooks/useField/useField.types.d.ts +2 -2
- package/esm/internals/hooks/useField/useField.utils.d.ts +10 -10
- package/esm/internals/hooks/useField/useField.utils.js +69 -69
- package/esm/internals/hooks/useField/useFieldCharacterEditing.js +11 -11
- package/esm/internals/hooks/useField/useFieldRootHandleKeyDown.js +7 -7
- package/esm/internals/hooks/useField/useFieldSectionContentProps.js +15 -16
- package/esm/internals/hooks/useField/useFieldState.js +22 -24
- package/esm/internals/hooks/usePicker/hooks/useValueAndOpenStates.js +6 -6
- package/esm/internals/hooks/usePicker/usePicker.js +5 -6
- package/esm/internals/hooks/useUtils.d.ts +1 -8
- package/esm/internals/hooks/useUtils.js +3 -19
- package/esm/internals/index.d.ts +2 -1
- package/esm/internals/index.js +2 -1
- package/esm/internals/models/manager.d.ts +14 -14
- package/esm/internals/models/props/time.d.ts +1 -1
- package/esm/internals/utils/date-time-utils.d.ts +1 -1
- package/esm/internals/utils/date-time-utils.js +5 -5
- package/esm/internals/utils/date-utils.d.ts +11 -11
- package/esm/internals/utils/date-utils.js +34 -34
- package/esm/internals/utils/getDefaultReferenceDate.d.ts +2 -2
- package/esm/internals/utils/getDefaultReferenceDate.js +16 -16
- package/esm/internals/utils/time-utils.d.ts +5 -5
- package/esm/internals/utils/time-utils.js +12 -12
- package/esm/internals/utils/valueManagers.js +4 -4
- package/esm/managers/useDateManager.js +12 -12
- package/esm/managers/useDateTimeManager.js +13 -13
- package/esm/managers/useTimeManager.js +9 -10
- package/esm/validation/useValidation.d.ts +2 -3
- package/esm/validation/useValidation.js +2 -2
- package/esm/validation/validateDate.js +6 -6
- package/esm/validation/validateTime.js +6 -6
- package/hooks/index.d.ts +2 -1
- package/hooks/index.js +8 -1
- package/hooks/useParsedFormat.js +6 -6
- package/hooks/usePickerAdapter.d.ts +7 -0
- package/hooks/usePickerAdapter.js +29 -0
- package/hooks/usePickerTranslations.js +2 -2
- package/index.js +1 -1
- package/internals/components/pickersToolbarClasses.d.ts +1 -1
- package/internals/demo/DemoContainer.d.ts +2 -3
- package/internals/demo/DemoContainer.js +3 -2
- package/internals/hooks/date-helpers-hooks.js +16 -16
- package/internals/hooks/useClockReferenceDate.d.ts +2 -2
- package/internals/hooks/useClockReferenceDate.js +3 -3
- package/internals/hooks/useControlledValue.js +7 -7
- package/internals/hooks/useField/buildSectionsFromFormat.d.ts +1 -1
- package/internals/hooks/useField/buildSectionsFromFormat.js +17 -17
- package/internals/hooks/useField/useField.types.d.ts +2 -2
- package/internals/hooks/useField/useField.utils.d.ts +10 -10
- package/internals/hooks/useField/useField.utils.js +69 -69
- package/internals/hooks/useField/useFieldCharacterEditing.js +11 -11
- package/internals/hooks/useField/useFieldRootHandleKeyDown.js +7 -7
- package/internals/hooks/useField/useFieldSectionContentProps.js +14 -15
- package/internals/hooks/useField/useFieldState.js +23 -25
- package/internals/hooks/usePicker/hooks/useValueAndOpenStates.js +6 -6
- package/internals/hooks/usePicker/usePicker.js +5 -6
- package/internals/hooks/useUtils.d.ts +1 -8
- package/internals/hooks/useUtils.js +5 -24
- package/internals/index.d.ts +2 -1
- package/internals/index.js +2 -7
- package/internals/models/manager.d.ts +14 -14
- package/internals/models/props/time.d.ts +1 -1
- package/internals/utils/date-time-utils.d.ts +1 -1
- package/internals/utils/date-time-utils.js +5 -5
- package/internals/utils/date-utils.d.ts +11 -11
- package/internals/utils/date-utils.js +34 -34
- package/internals/utils/getDefaultReferenceDate.d.ts +2 -2
- package/internals/utils/getDefaultReferenceDate.js +16 -16
- package/internals/utils/time-utils.d.ts +5 -5
- package/internals/utils/time-utils.js +12 -12
- package/internals/utils/valueManagers.js +4 -4
- package/managers/useDateManager.js +12 -12
- package/managers/useDateTimeManager.js +13 -13
- package/managers/useTimeManager.js +10 -11
- package/package.json +2 -2
- package/validation/useValidation.d.ts +2 -3
- package/validation/useValidation.js +2 -2
- package/validation/validateDate.js +6 -6
- package/validation/validateTime.js +6 -6
|
@@ -4,8 +4,7 @@ import useControlled from '@mui/utils/useControlled';
|
|
|
4
4
|
import useTimeout from '@mui/utils/useTimeout';
|
|
5
5
|
import useEventCallback from '@mui/utils/useEventCallback';
|
|
6
6
|
import { useRtl } from '@mui/system/RtlProvider';
|
|
7
|
-
import { usePickerTranslations } from "../../../hooks/
|
|
8
|
-
import { useUtils, useLocalizationContext } from "../useUtils.js";
|
|
7
|
+
import { usePickerAdapter, usePickerTranslations } from "../../../hooks/index.js";
|
|
9
8
|
import { mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections, parseSelectedSections, getLocalizedDigits, getSectionOrder } from "./useField.utils.js";
|
|
10
9
|
import { buildSectionsFromFormat } from "./buildSectionsFromFormat.js";
|
|
11
10
|
import { useValidation } from "../../../validation/index.js";
|
|
@@ -13,9 +12,8 @@ import { useControlledValue } from "../useControlledValue.js";
|
|
|
13
12
|
import { getSectionTypeGranularity } from "../../utils/getDefaultReferenceDate.js";
|
|
14
13
|
const QUERY_LIFE_DURATION_MS = 5000;
|
|
15
14
|
export const useFieldState = parameters => {
|
|
16
|
-
const
|
|
15
|
+
const adapter = usePickerAdapter();
|
|
17
16
|
const translations = usePickerTranslations();
|
|
18
|
-
const adapter = useLocalizationContext();
|
|
19
17
|
const isRtl = useRtl();
|
|
20
18
|
const {
|
|
21
19
|
manager: {
|
|
@@ -76,10 +74,10 @@ export const useFieldState = parameters => {
|
|
|
76
74
|
}
|
|
77
75
|
return hasValidationError;
|
|
78
76
|
}, [hasValidationError, errorProp]);
|
|
79
|
-
const localizedDigits = React.useMemo(() => getLocalizedDigits(
|
|
80
|
-
const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(
|
|
77
|
+
const localizedDigits = React.useMemo(() => getLocalizedDigits(adapter), [adapter]);
|
|
78
|
+
const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(adapter, localizedDigits, timezone), [adapter, localizedDigits, timezone]);
|
|
81
79
|
const getSectionsFromValue = React.useCallback(valueToAnalyze => fieldValueManager.getSectionsFromValue(valueToAnalyze, date => buildSectionsFromFormat({
|
|
82
|
-
|
|
80
|
+
adapter,
|
|
83
81
|
localeText: translations,
|
|
84
82
|
localizedDigits,
|
|
85
83
|
format,
|
|
@@ -88,7 +86,7 @@ export const useFieldState = parameters => {
|
|
|
88
86
|
shouldRespectLeadingZeros,
|
|
89
87
|
enableAccessibleFieldDOMStructure,
|
|
90
88
|
isRtl
|
|
91
|
-
})), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros,
|
|
89
|
+
})), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros, adapter, formatDensity, enableAccessibleFieldDOMStructure]);
|
|
92
90
|
const [state, setState] = React.useState(() => {
|
|
93
91
|
const sections = getSectionsFromValue(value);
|
|
94
92
|
validateSections(sections, valueType);
|
|
@@ -98,7 +96,7 @@ export const useFieldState = parameters => {
|
|
|
98
96
|
lastSectionsDependencies: {
|
|
99
97
|
format,
|
|
100
98
|
isRtl,
|
|
101
|
-
locale:
|
|
99
|
+
locale: adapter.locale
|
|
102
100
|
},
|
|
103
101
|
tempValueStrAndroid: null,
|
|
104
102
|
characterQuery: null
|
|
@@ -107,7 +105,7 @@ export const useFieldState = parameters => {
|
|
|
107
105
|
const referenceValue = valueManager.getInitialReferenceValue({
|
|
108
106
|
referenceDate: referenceDateProp,
|
|
109
107
|
value,
|
|
110
|
-
|
|
108
|
+
adapter,
|
|
111
109
|
props: internalPropsWithDefaults,
|
|
112
110
|
granularity,
|
|
113
111
|
timezone
|
|
@@ -164,7 +162,7 @@ export const useFieldState = parameters => {
|
|
|
164
162
|
});
|
|
165
163
|
};
|
|
166
164
|
const clearValue = () => {
|
|
167
|
-
if (valueManager.areValuesEqual(
|
|
165
|
+
if (valueManager.areValuesEqual(adapter, value, valueManager.emptyValue)) {
|
|
168
166
|
setState(prevState => _extends({}, prevState, {
|
|
169
167
|
sections: prevState.sections.map(section => _extends({}, section, {
|
|
170
168
|
value: ''
|
|
@@ -203,12 +201,12 @@ export const useFieldState = parameters => {
|
|
|
203
201
|
};
|
|
204
202
|
const updateValueFromValueStr = valueStr => {
|
|
205
203
|
const parseDateStr = (dateStr, referenceDate) => {
|
|
206
|
-
const date =
|
|
207
|
-
if (!
|
|
204
|
+
const date = adapter.parse(dateStr, format);
|
|
205
|
+
if (!adapter.isValid(date)) {
|
|
208
206
|
return null;
|
|
209
207
|
}
|
|
210
208
|
const sections = buildSectionsFromFormat({
|
|
211
|
-
|
|
209
|
+
adapter,
|
|
212
210
|
localeText: translations,
|
|
213
211
|
localizedDigits,
|
|
214
212
|
format,
|
|
@@ -218,7 +216,7 @@ export const useFieldState = parameters => {
|
|
|
218
216
|
enableAccessibleFieldDOMStructure,
|
|
219
217
|
isRtl
|
|
220
218
|
});
|
|
221
|
-
return mergeDateIntoReferenceDate(
|
|
219
|
+
return mergeDateIntoReferenceDate(adapter, date, sections, referenceDate, false);
|
|
222
220
|
};
|
|
223
221
|
const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);
|
|
224
222
|
publishValue(newValue);
|
|
@@ -245,15 +243,15 @@ export const useFieldState = parameters => {
|
|
|
245
243
|
*/
|
|
246
244
|
const newSections = setSectionValue(activeSectionIndex, newSectionValue);
|
|
247
245
|
const newActiveDateSections = fieldValueManager.getDateSectionsFromValue(newSections, section);
|
|
248
|
-
const newActiveDate = getDateFromDateSections(
|
|
246
|
+
const newActiveDate = getDateFromDateSections(adapter, newActiveDateSections, localizedDigits);
|
|
249
247
|
|
|
250
248
|
/**
|
|
251
249
|
* If the new date is valid,
|
|
252
250
|
* Then we merge the value of the modified sections into the reference date.
|
|
253
251
|
* This makes sure that we don't lose some information of the initial date (like the time on a date field).
|
|
254
252
|
*/
|
|
255
|
-
if (
|
|
256
|
-
const mergedDate = mergeDateIntoReferenceDate(
|
|
253
|
+
if (adapter.isValid(newActiveDate)) {
|
|
254
|
+
const mergedDate = mergeDateIntoReferenceDate(adapter, newActiveDate, newActiveDateSections, fieldValueManager.getDateFromSection(state.referenceValue, section), true);
|
|
257
255
|
if (activeDate == null) {
|
|
258
256
|
cleanActiveDateSectionsIfValueNullTimeout.start(0, () => {
|
|
259
257
|
if (valueRef.current === value) {
|
|
@@ -271,7 +269,7 @@ export const useFieldState = parameters => {
|
|
|
271
269
|
* If all the sections are filled but the date is invalid and the previous date is valid or null,
|
|
272
270
|
* Then we publish an invalid date.
|
|
273
271
|
*/
|
|
274
|
-
if (newActiveDateSections.every(sectionBis => sectionBis.value !== '') && (activeDate == null ||
|
|
272
|
+
if (newActiveDateSections.every(sectionBis => sectionBis.value !== '') && (activeDate == null || adapter.isValid(activeDate))) {
|
|
275
273
|
setSectionUpdateToApplyOnNextInvalidDate(newSectionValue);
|
|
276
274
|
return publishValue(fieldValueManager.updateDateInValue(value, section, newActiveDate));
|
|
277
275
|
}
|
|
@@ -306,7 +304,7 @@ export const useFieldState = parameters => {
|
|
|
306
304
|
// If `prop.value` changes, we update the state to reflect the new value
|
|
307
305
|
if (value !== state.lastExternalValue) {
|
|
308
306
|
let sections;
|
|
309
|
-
if (sectionToUpdateOnNextInvalidDateRef.current != null && !
|
|
307
|
+
if (sectionToUpdateOnNextInvalidDateRef.current != null && !adapter.isValid(fieldValueManager.getDateFromSection(value, state.sections[sectionToUpdateOnNextInvalidDateRef.current.sectionIndex]))) {
|
|
310
308
|
sections = setSectionValue(sectionToUpdateOnNextInvalidDateRef.current.sectionIndex, sectionToUpdateOnNextInvalidDateRef.current.value);
|
|
311
309
|
} else {
|
|
312
310
|
sections = getSectionsFromValue(value);
|
|
@@ -317,20 +315,20 @@ export const useFieldState = parameters => {
|
|
|
317
315
|
sectionsDependencies: {
|
|
318
316
|
format,
|
|
319
317
|
isRtl,
|
|
320
|
-
locale:
|
|
318
|
+
locale: adapter.locale
|
|
321
319
|
},
|
|
322
|
-
referenceValue: fieldValueManager.updateReferenceValue(
|
|
320
|
+
referenceValue: fieldValueManager.updateReferenceValue(adapter, value, prevState.referenceValue),
|
|
323
321
|
tempValueStrAndroid: null
|
|
324
322
|
}));
|
|
325
323
|
}
|
|
326
|
-
if (isRtl !== state.lastSectionsDependencies.isRtl || format !== state.lastSectionsDependencies.format ||
|
|
324
|
+
if (isRtl !== state.lastSectionsDependencies.isRtl || format !== state.lastSectionsDependencies.format || adapter.locale !== state.lastSectionsDependencies.locale) {
|
|
327
325
|
const sections = getSectionsFromValue(value);
|
|
328
326
|
validateSections(sections, valueType);
|
|
329
327
|
setState(prevState => _extends({}, prevState, {
|
|
330
328
|
lastSectionsDependencies: {
|
|
331
329
|
format,
|
|
332
330
|
isRtl,
|
|
333
|
-
locale:
|
|
331
|
+
locale: adapter.locale
|
|
334
332
|
},
|
|
335
333
|
sections,
|
|
336
334
|
tempValueStrAndroid: null,
|
|
@@ -3,7 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import { warnOnce } from '@mui/x-internals/warning';
|
|
4
4
|
import useEventCallback from '@mui/utils/useEventCallback';
|
|
5
5
|
import { useControlledValue } from "../../useControlledValue.js";
|
|
6
|
-
import {
|
|
6
|
+
import { usePickerAdapter } from "../../../../hooks/usePickerAdapter.js";
|
|
7
7
|
import { useValidation } from "../../../../validation/index.js";
|
|
8
8
|
export function useValueAndOpenStates(parameters) {
|
|
9
9
|
const {
|
|
@@ -32,7 +32,7 @@ export function useValueAndOpenStates(parameters) {
|
|
|
32
32
|
const {
|
|
33
33
|
current: isOpenControlled
|
|
34
34
|
} = React.useRef(openProp !== undefined);
|
|
35
|
-
const
|
|
35
|
+
const adapter = usePickerAdapter();
|
|
36
36
|
if (process.env.NODE_ENV !== 'production') {
|
|
37
37
|
if (props.renderInput != null) {
|
|
38
38
|
warnOnce(['MUI X: The `renderInput` prop has been removed in version 6.0 of the Date and Time Pickers.', 'You can replace it with the `textField` component slot in most cases.', 'For more information, please have a look at the migration guide (https://mui.com/x/migration/migration-pickers-v5/#input-renderer-required-in-v5).']);
|
|
@@ -113,13 +113,13 @@ export function useValueAndOpenStates(parameters) {
|
|
|
113
113
|
shouldFireOnChange = true;
|
|
114
114
|
shouldFireOnAccept = changeImportance === 'accept';
|
|
115
115
|
} else {
|
|
116
|
-
shouldFireOnChange = !valueManager.areValuesEqual(
|
|
117
|
-
shouldFireOnAccept = changeImportance === 'accept' && !valueManager.areValuesEqual(
|
|
116
|
+
shouldFireOnChange = !valueManager.areValuesEqual(adapter, newValue, value);
|
|
117
|
+
shouldFireOnAccept = changeImportance === 'accept' && !valueManager.areValuesEqual(adapter, newValue, state.lastCommittedValue);
|
|
118
118
|
}
|
|
119
119
|
setState(prevState => _extends({}, prevState, {
|
|
120
120
|
// We reset the shallow value whenever we fire onChange.
|
|
121
121
|
clockShallowValue: shouldFireOnChange ? undefined : prevState.clockShallowValue,
|
|
122
|
-
lastCommittedValue: shouldFireOnAccept ?
|
|
122
|
+
lastCommittedValue: shouldFireOnAccept ? newValue : prevState.lastCommittedValue,
|
|
123
123
|
hasBeenModifiedSinceMount: true
|
|
124
124
|
}));
|
|
125
125
|
let cachedContext = null;
|
|
@@ -179,7 +179,7 @@ export function useValueAndOpenStates(parameters) {
|
|
|
179
179
|
}));
|
|
180
180
|
}
|
|
181
181
|
}, [isOpenControlled, openProp]);
|
|
182
|
-
const viewValue = React.useMemo(() => valueManager.cleanValue(
|
|
182
|
+
const viewValue = React.useMemo(() => valueManager.cleanValue(adapter, state.clockShallowValue === undefined ? value : state.clockShallowValue), [adapter, valueManager, state.clockShallowValue, value]);
|
|
183
183
|
return {
|
|
184
184
|
timezone,
|
|
185
185
|
state,
|
|
@@ -6,7 +6,7 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
|
|
|
6
6
|
import useEventCallback from '@mui/utils/useEventCallback';
|
|
7
7
|
import useForkRef from '@mui/utils/useForkRef';
|
|
8
8
|
import useId from '@mui/utils/useId';
|
|
9
|
-
import {
|
|
9
|
+
import { usePickerAdapter } from "../../../hooks/usePickerAdapter.js";
|
|
10
10
|
import { useReduceAnimations } from "../useReduceAnimations.js";
|
|
11
11
|
import { isTimeView } from "../../utils/time-utils.js";
|
|
12
12
|
import { useViews } from "../useViews.js";
|
|
@@ -62,8 +62,7 @@ export const usePicker = ({
|
|
|
62
62
|
* TODO: Improve how we generate the aria-label and aria-labelledby attributes.
|
|
63
63
|
*/
|
|
64
64
|
const labelId = useId();
|
|
65
|
-
const
|
|
66
|
-
const adapter = useLocalizationContext();
|
|
65
|
+
const adapter = usePickerAdapter();
|
|
67
66
|
const reduceAnimations = useReduceAnimations(reduceAnimationsProp);
|
|
68
67
|
const orientation = useOrientation(views, orientationProp);
|
|
69
68
|
const {
|
|
@@ -111,7 +110,7 @@ export const usePicker = ({
|
|
|
111
110
|
getStepNavigation
|
|
112
111
|
});
|
|
113
112
|
const clearValue = useEventCallback(() => setValue(valueManager.emptyValue));
|
|
114
|
-
const setValueToToday = useEventCallback(() => setValue(valueManager.getTodayValue(
|
|
113
|
+
const setValueToToday = useEventCallback(() => setValue(valueManager.getTodayValue(adapter, timezone, valueType)));
|
|
115
114
|
const acceptValueChanges = useEventCallback(() => setValue(value));
|
|
116
115
|
const cancelValueChanges = useEventCallback(() => setValue(state.lastCommittedValue, {
|
|
117
116
|
skipPublicationIfPristine: true
|
|
@@ -181,13 +180,13 @@ export const usePicker = ({
|
|
|
181
180
|
}, [state.open]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
182
181
|
|
|
183
182
|
const ownerState = React.useMemo(() => ({
|
|
184
|
-
isPickerValueEmpty: valueManager.areValuesEqual(
|
|
183
|
+
isPickerValueEmpty: valueManager.areValuesEqual(adapter, value, valueManager.emptyValue),
|
|
185
184
|
isPickerOpen: state.open,
|
|
186
185
|
isPickerDisabled: props.disabled ?? false,
|
|
187
186
|
isPickerReadOnly: props.readOnly ?? false,
|
|
188
187
|
pickerOrientation: orientation,
|
|
189
188
|
pickerVariant: variant
|
|
190
|
-
}), [
|
|
189
|
+
}), [adapter, valueManager, value, state.open, orientation, variant, props.disabled, props.readOnly]);
|
|
191
190
|
const triggerStatus = React.useMemo(() => {
|
|
192
191
|
if (disableOpenPicker || !hasUIView) {
|
|
193
192
|
return 'hidden';
|
|
@@ -1,13 +1,6 @@
|
|
|
1
|
-
import { MuiPickersAdapterContextValue } from "../../LocalizationProvider/LocalizationProvider.js";
|
|
2
|
-
import { PickersLocaleText } from "../../locales/utils/pickersLocaleTextApi.js";
|
|
3
1
|
import { PickersTimezone, PickerValidDate } from "../../models/index.js";
|
|
4
|
-
export declare const useLocalizationContext: () => UseLocalizationContextReturnValue;
|
|
5
|
-
export declare const useUtils: () => import("@mui/x-date-pickers/models").MuiPickersAdapter<any>;
|
|
6
2
|
export declare const useDefaultDates: () => {
|
|
7
3
|
minDate: PickerValidDate;
|
|
8
4
|
maxDate: PickerValidDate;
|
|
9
5
|
};
|
|
10
|
-
export declare const useNow: (timezone: PickersTimezone) => PickerValidDate;
|
|
11
|
-
export interface UseLocalizationContextReturnValue extends Omit<MuiPickersAdapterContextValue, 'localeText'> {
|
|
12
|
-
localeText: PickersLocaleText;
|
|
13
|
-
}
|
|
6
|
+
export declare const useNow: (timezone: PickersTimezone) => PickerValidDate;
|
|
@@ -1,27 +1,11 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
1
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
4
|
-
import { DEFAULT_LOCALE } from "../../locales/enUS.js";
|
|
5
|
-
export const useLocalizationContext = () => {
|
|
6
|
-
const localization = React.useContext(MuiPickersAdapterContext);
|
|
7
|
-
if (localization === null) {
|
|
8
|
-
throw new Error(['MUI X: Can not find the date and time pickers localization context.', 'It looks like you forgot to wrap your component in LocalizationProvider.', 'This can also happen if you are bundling multiple versions of the `@mui/x-date-pickers` package'].join('\n'));
|
|
9
|
-
}
|
|
10
|
-
if (localization.utils === null) {
|
|
11
|
-
throw new Error(['MUI X: Can not find the date and time pickers adapter from its localization context.', 'It looks like you forgot to pass a `dateAdapter` to your LocalizationProvider.'].join('\n'));
|
|
12
|
-
}
|
|
13
|
-
const localeText = React.useMemo(() => _extends({}, DEFAULT_LOCALE, localization.localeText), [localization.localeText]);
|
|
14
|
-
return React.useMemo(() => _extends({}, localization, {
|
|
15
|
-
localeText
|
|
16
|
-
}), [localization, localeText]);
|
|
17
|
-
};
|
|
18
|
-
export const useUtils = () => useLocalizationContext().utils;
|
|
2
|
+
import { useLocalizationContext, usePickerAdapter } from "../../hooks/usePickerAdapter.js";
|
|
19
3
|
export const useDefaultDates = () => useLocalizationContext().defaultDates;
|
|
20
4
|
export const useNow = timezone => {
|
|
21
|
-
const
|
|
5
|
+
const adapter = usePickerAdapter();
|
|
22
6
|
const now = React.useRef(undefined);
|
|
23
7
|
if (now.current === undefined) {
|
|
24
|
-
now.current =
|
|
8
|
+
now.current = adapter.date(undefined, timezone);
|
|
25
9
|
}
|
|
26
10
|
return now.current;
|
|
27
11
|
};
|
package/esm/internals/index.d.ts
CHANGED
|
@@ -39,7 +39,8 @@ export { useStaticPicker } from "./hooks/useStaticPicker/index.js";
|
|
|
39
39
|
export type { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "./hooks/useStaticPicker/index.js";
|
|
40
40
|
export { useToolbarOwnerState } from "./hooks/useToolbarOwnerState.js";
|
|
41
41
|
export type { PickerToolbarOwnerState } from "./hooks/useToolbarOwnerState.js";
|
|
42
|
-
export {
|
|
42
|
+
export { useDefaultDates, useNow } from "./hooks/useUtils.js";
|
|
43
|
+
export { useLocalizationContext } from "../hooks/usePickerAdapter.js";
|
|
43
44
|
export type { ExportedUseViewsOptions, UseViewsOptions } from "./hooks/useViews.js";
|
|
44
45
|
export { useViews } from "./hooks/useViews.js";
|
|
45
46
|
export { usePreviousMonthDisabled, useNextMonthDisabled } from "./hooks/date-helpers-hooks.js";
|
package/esm/internals/index.js
CHANGED
|
@@ -21,7 +21,8 @@ export { usePicker } from "./hooks/usePicker/index.js";
|
|
|
21
21
|
export { usePickerPrivateContext } from "./hooks/usePickerPrivateContext.js";
|
|
22
22
|
export { useStaticPicker } from "./hooks/useStaticPicker/index.js";
|
|
23
23
|
export { useToolbarOwnerState } from "./hooks/useToolbarOwnerState.js";
|
|
24
|
-
export {
|
|
24
|
+
export { useDefaultDates, useNow } from "./hooks/useUtils.js";
|
|
25
|
+
export { useLocalizationContext } from "../hooks/usePickerAdapter.js";
|
|
25
26
|
export { useViews } from "./hooks/useViews.js";
|
|
26
27
|
export { usePreviousMonthDisabled, useNextMonthDisabled } from "./hooks/date-helpers-hooks.js";
|
|
27
28
|
export { createStepNavigation } from "./utils/createStepNavigation.js";
|
|
@@ -20,12 +20,12 @@ export interface PickerValueManager<TValue extends PickerValidValue, TError> {
|
|
|
20
20
|
/**
|
|
21
21
|
* Determines if two values are equal.
|
|
22
22
|
* @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
|
|
23
|
-
* @param {MuiPickersAdapter}
|
|
23
|
+
* @param {MuiPickersAdapter} adapter The Picker date adapter instance.
|
|
24
24
|
* @param {TValue} valueLeft The first value to compare.
|
|
25
25
|
* @param {TValue} valueRight The second value to compare.
|
|
26
26
|
* @returns {boolean} A boolean indicating if the two values are equal.
|
|
27
27
|
*/
|
|
28
|
-
areValuesEqual: (
|
|
28
|
+
areValuesEqual: (adapter: MuiPickersAdapter, valueLeft: TValue, valueRight: TValue) => boolean;
|
|
29
29
|
/**
|
|
30
30
|
* Value to set when clicking the "Clear" button.
|
|
31
31
|
*/
|
|
@@ -33,12 +33,12 @@ export interface PickerValueManager<TValue extends PickerValidValue, TError> {
|
|
|
33
33
|
/**
|
|
34
34
|
* Method returning the value to set when clicking the "Today" button.
|
|
35
35
|
* @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
|
|
36
|
-
* @param {MuiPickersAdapter}
|
|
36
|
+
* @param {MuiPickersAdapter} adapter The Picker date adapter instance.
|
|
37
37
|
* @param {PickersTimezone} timezone The current timezone.
|
|
38
38
|
* @param {PickerValueType} valueType The type of the value being edited.
|
|
39
39
|
* @returns {TValue} The value to set when clicking the "Today" button.
|
|
40
40
|
*/
|
|
41
|
-
getTodayValue: (
|
|
41
|
+
getTodayValue: (adapter: MuiPickersAdapter, timezone: PickersTimezone, valueType: PickerValueType) => TValue;
|
|
42
42
|
/**
|
|
43
43
|
* @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
|
|
44
44
|
* Method returning the reference value to use when mounting the component.
|
|
@@ -46,7 +46,7 @@ export interface PickerValueManager<TValue extends PickerValidValue, TError> {
|
|
|
46
46
|
* @param {PickerValidDate | undefined} params.referenceDate The referenceDate provided by the user.
|
|
47
47
|
* @param {TValue} params.value The value provided by the user.
|
|
48
48
|
* @param {GetDefaultReferenceDateProps} params.props The validation props needed to compute the reference value.
|
|
49
|
-
* @param {MuiPickersAdapter} params.
|
|
49
|
+
* @param {MuiPickersAdapter} params.adapter The Picker date adapter instance.
|
|
50
50
|
* @param {number} params.granularity The granularity of the selection possible on this component.
|
|
51
51
|
* @param {PickersTimezone} params.timezone The current timezone.
|
|
52
52
|
* @param {() => PickerValidDate} params.getTodayDate The reference date to use if no reference date is passed to the component.
|
|
@@ -56,7 +56,7 @@ export interface PickerValueManager<TValue extends PickerValidValue, TError> {
|
|
|
56
56
|
referenceDate: PickerValidDate | undefined;
|
|
57
57
|
value: TValue;
|
|
58
58
|
props: GetDefaultReferenceDateProps;
|
|
59
|
-
|
|
59
|
+
adapter: MuiPickersAdapter;
|
|
60
60
|
granularity: number;
|
|
61
61
|
timezone: PickersTimezone;
|
|
62
62
|
getTodayDate?: () => PickerValidDate;
|
|
@@ -64,20 +64,20 @@ export interface PickerValueManager<TValue extends PickerValidValue, TError> {
|
|
|
64
64
|
/**
|
|
65
65
|
* Method parsing the input value to replace all invalid dates by `null`.
|
|
66
66
|
* @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
|
|
67
|
-
* @param {MuiPickersAdapter}
|
|
67
|
+
* @param {MuiPickersAdapter} adapter The Picker date adapter instance.
|
|
68
68
|
* @param {TValue} value The value to parse.
|
|
69
69
|
* @returns {TValue} The value without invalid date.
|
|
70
70
|
*/
|
|
71
|
-
cleanValue: (
|
|
71
|
+
cleanValue: (adapter: MuiPickersAdapter, value: TValue) => TValue;
|
|
72
72
|
/**
|
|
73
73
|
* Generates the new value, given the previous value and the new proposed value.
|
|
74
74
|
* @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
|
|
75
|
-
* @param {MuiPickersAdapter}
|
|
75
|
+
* @param {MuiPickersAdapter} adapter The Picker date adapter instance.
|
|
76
76
|
* @param {TValue} lastValidDateValue The last valid value.
|
|
77
77
|
* @param {TValue} value The proposed value.
|
|
78
78
|
* @returns {TValue} The new value.
|
|
79
79
|
*/
|
|
80
|
-
valueReducer?: (
|
|
80
|
+
valueReducer?: (adapter: MuiPickersAdapter, lastValidDateValue: TValue, value: TValue) => TValue;
|
|
81
81
|
/**
|
|
82
82
|
* Compare two errors to know if they are equal.
|
|
83
83
|
* @template TError
|
|
@@ -101,19 +101,19 @@ export interface PickerValueManager<TValue extends PickerValidValue, TError> {
|
|
|
101
101
|
* Return the timezone of the date inside a value.
|
|
102
102
|
* When used on a range Picker, throw an error if both values don't have the same timezone.
|
|
103
103
|
* @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
|
|
104
|
-
@param {MuiPickersAdapter}
|
|
104
|
+
@param {MuiPickersAdapter} adapter The Picker date adapter instance.
|
|
105
105
|
@param {TValue} value The current value.
|
|
106
106
|
@returns {string | null} The timezone of the current value.
|
|
107
107
|
*/
|
|
108
|
-
getTimezone: (
|
|
108
|
+
getTimezone: (adapter: MuiPickersAdapter, value: TValue) => string | null;
|
|
109
109
|
/**
|
|
110
110
|
* Change the timezone of the dates inside a value.
|
|
111
111
|
* @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
|
|
112
|
-
@param {MuiPickersAdapter}
|
|
112
|
+
@param {MuiPickersAdapter} adapter The Picker date adapter instance.
|
|
113
113
|
@param {PickersTimezone} timezone The current timezone.
|
|
114
114
|
@param {TValue} value The value to convert.
|
|
115
115
|
@returns {TValue} The value with the new dates in the new timezone.
|
|
116
116
|
*/
|
|
117
|
-
setTimezone: (
|
|
117
|
+
setTimezone: (adapter: MuiPickersAdapter, timezone: PickersTimezone, value: TValue) => TValue;
|
|
118
118
|
}
|
|
119
119
|
export {};
|
|
@@ -2,7 +2,7 @@ import { DefaultizedProps } from '@mui/x-internals/types';
|
|
|
2
2
|
import { DateOrTimeView, MuiPickersAdapter } from "../../models/index.js";
|
|
3
3
|
import { DateOrTimeViewWithMeridiem } from "../models/index.js";
|
|
4
4
|
import { DigitalTimePickerProps } from "../models/props/time.js";
|
|
5
|
-
export declare const resolveDateTimeFormat: (
|
|
5
|
+
export declare const resolveDateTimeFormat: (adapter: MuiPickersAdapter, {
|
|
6
6
|
views,
|
|
7
7
|
format,
|
|
8
8
|
...other
|
|
@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
|
|
|
3
3
|
const _excluded = ["views", "format"];
|
|
4
4
|
import { resolveTimeFormat, isTimeView, isInternalTimeView } from "./time-utils.js";
|
|
5
5
|
import { isDatePickerView, resolveDateFormat } from "./date-utils.js";
|
|
6
|
-
export const resolveDateTimeFormat = (
|
|
6
|
+
export const resolveDateTimeFormat = (adapter, _ref, ignoreDateResolving) => {
|
|
7
7
|
let {
|
|
8
8
|
views,
|
|
9
9
|
format
|
|
@@ -22,19 +22,19 @@ export const resolveDateTimeFormat = (utils, _ref, ignoreDateResolving) => {
|
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
24
|
if (timeViews.length === 0) {
|
|
25
|
-
return resolveDateFormat(
|
|
25
|
+
return resolveDateFormat(adapter, _extends({
|
|
26
26
|
views: dateViews
|
|
27
27
|
}, other), false);
|
|
28
28
|
}
|
|
29
29
|
if (dateViews.length === 0) {
|
|
30
|
-
return resolveTimeFormat(
|
|
30
|
+
return resolveTimeFormat(adapter, _extends({
|
|
31
31
|
views: timeViews
|
|
32
32
|
}, other));
|
|
33
33
|
}
|
|
34
|
-
const timeFormat = resolveTimeFormat(
|
|
34
|
+
const timeFormat = resolveTimeFormat(adapter, _extends({
|
|
35
35
|
views: timeViews
|
|
36
36
|
}, other));
|
|
37
|
-
const dateFormat = ignoreDateResolving ?
|
|
37
|
+
const dateFormat = ignoreDateResolving ? adapter.formats.keyboardDate : resolveDateFormat(adapter, _extends({
|
|
38
38
|
views: dateViews
|
|
39
39
|
}, other), false);
|
|
40
40
|
return `${dateFormat} ${timeFormat}`;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DateView, MuiPickersAdapter, PickersTimezone, PickerValidDate, PickerValueType } from "../../models/index.js";
|
|
2
2
|
import { DateOrTimeViewWithMeridiem } from "../models/index.js";
|
|
3
|
-
export declare const mergeDateAndTime: (
|
|
3
|
+
export declare const mergeDateAndTime: (adapter: MuiPickersAdapter, dateParam: PickerValidDate, timeParam: PickerValidDate) => PickerValidDate;
|
|
4
4
|
interface FindClosestDateParams {
|
|
5
5
|
date: PickerValidDate;
|
|
6
6
|
disableFuture?: boolean;
|
|
@@ -8,7 +8,7 @@ interface FindClosestDateParams {
|
|
|
8
8
|
maxDate: PickerValidDate;
|
|
9
9
|
minDate: PickerValidDate;
|
|
10
10
|
isDateDisabled: (date: PickerValidDate) => boolean;
|
|
11
|
-
|
|
11
|
+
adapter: MuiPickersAdapter;
|
|
12
12
|
timezone: PickersTimezone;
|
|
13
13
|
}
|
|
14
14
|
export declare const findClosestEnabledDate: ({
|
|
@@ -18,23 +18,23 @@ export declare const findClosestEnabledDate: ({
|
|
|
18
18
|
maxDate,
|
|
19
19
|
minDate,
|
|
20
20
|
isDateDisabled,
|
|
21
|
-
|
|
21
|
+
adapter,
|
|
22
22
|
timezone
|
|
23
23
|
}: FindClosestDateParams) => PickerValidDate | null;
|
|
24
|
-
export declare const replaceInvalidDateByNull: (
|
|
25
|
-
export declare const applyDefaultDate: (
|
|
26
|
-
export declare const areDatesEqual: (
|
|
27
|
-
export declare const getMonthsInYear: (
|
|
28
|
-
export declare const getTodayDate: (
|
|
29
|
-
export declare const formatMeridiem: (
|
|
24
|
+
export declare const replaceInvalidDateByNull: (adapter: MuiPickersAdapter, value: PickerValidDate | null) => PickerValidDate | null;
|
|
25
|
+
export declare const applyDefaultDate: (adapter: MuiPickersAdapter, value: PickerValidDate | null | undefined, defaultValue: PickerValidDate) => PickerValidDate;
|
|
26
|
+
export declare const areDatesEqual: (adapter: MuiPickersAdapter, a: PickerValidDate | null, b: PickerValidDate | null) => boolean;
|
|
27
|
+
export declare const getMonthsInYear: (adapter: MuiPickersAdapter, year: PickerValidDate) => PickerValidDate[];
|
|
28
|
+
export declare const getTodayDate: (adapter: MuiPickersAdapter, timezone: PickersTimezone, valueType?: PickerValueType) => PickerValidDate;
|
|
29
|
+
export declare const formatMeridiem: (adapter: MuiPickersAdapter, meridiem: "am" | "pm") => string;
|
|
30
30
|
export declare const DATE_VIEWS: readonly ["year", "month", "day"];
|
|
31
31
|
export declare const isDatePickerView: (view: DateOrTimeViewWithMeridiem) => view is DateView;
|
|
32
|
-
export declare const resolveDateFormat: (
|
|
32
|
+
export declare const resolveDateFormat: (adapter: MuiPickersAdapter, {
|
|
33
33
|
format,
|
|
34
34
|
views
|
|
35
35
|
}: {
|
|
36
36
|
format?: string;
|
|
37
37
|
views: readonly DateView[];
|
|
38
38
|
}, isInToolbar: boolean) => string;
|
|
39
|
-
export declare const getWeekdays: (
|
|
39
|
+
export declare const getWeekdays: (adapter: MuiPickersAdapter, date: PickerValidDate) => PickerValidDate[];
|
|
40
40
|
export {};
|