@mui/x-date-pickers 8.0.0-beta.0 → 8.0.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +171 -0
- package/DateCalendar/DateCalendar.js +4 -8
- package/DateCalendar/DayCalendar.d.ts +3 -7
- package/DateCalendar/DayCalendar.js +18 -10
- package/DateCalendar/index.d.ts +0 -1
- package/DateField/useDateField.d.ts +1 -1
- package/DateField/useDateField.js +2 -16
- package/DatePicker/DatePicker.js +1 -0
- package/DatePicker/shared.js +3 -9
- package/DateTimeField/useDateTimeField.d.ts +1 -1
- package/DateTimeField/useDateTimeField.js +2 -16
- package/DateTimePicker/DateTimePicker.js +1 -0
- package/DateTimePicker/shared.js +3 -13
- package/DesktopDatePicker/DesktopDatePicker.js +1 -0
- package/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -0
- package/DesktopTimePicker/DesktopTimePicker.js +1 -0
- package/MobileDatePicker/MobileDatePicker.js +1 -0
- package/MobileDateTimePicker/MobileDateTimePicker.js +1 -0
- package/MobileTimePicker/MobileTimePicker.js +1 -0
- package/MonthCalendar/MonthCalendar.js +4 -9
- package/PickersDay/PickersDay.d.ts +1 -72
- package/PickersDay/PickersDay.js +30 -28
- package/PickersDay/PickersDay.types.d.ts +114 -0
- package/PickersDay/PickersDay.types.js +5 -0
- package/PickersDay/index.d.ts +1 -1
- package/PickersDay/usePickerDayOwnerState.d.ts +14 -0
- package/PickersDay/usePickerDayOwnerState.js +40 -0
- package/PickersSectionList/PickersSectionList.d.ts +1 -1
- package/PickersSectionList/PickersSectionList.types.d.ts +2 -6
- package/TimeField/useTimeField.d.ts +1 -1
- package/TimeField/useTimeField.js +2 -16
- package/TimePicker/TimePicker.js +1 -0
- package/TimePicker/shared.js +3 -3
- package/YearCalendar/YearCalendar.js +4 -10
- package/esm/DateCalendar/DateCalendar.js +6 -10
- package/esm/DateCalendar/DayCalendar.d.ts +3 -7
- package/esm/DateCalendar/DayCalendar.js +18 -10
- package/esm/DateCalendar/index.d.ts +0 -1
- package/esm/DateField/useDateField.d.ts +1 -1
- package/esm/DateField/useDateField.js +3 -17
- package/esm/DatePicker/DatePicker.js +1 -0
- package/esm/DatePicker/shared.js +3 -9
- package/esm/DateTimeField/useDateTimeField.d.ts +1 -1
- package/esm/DateTimeField/useDateTimeField.js +3 -17
- package/esm/DateTimePicker/DateTimePicker.js +1 -0
- package/esm/DateTimePicker/shared.js +4 -14
- package/esm/DesktopDatePicker/DesktopDatePicker.js +1 -0
- package/esm/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -0
- package/esm/DesktopTimePicker/DesktopTimePicker.js +1 -0
- package/esm/MobileDatePicker/MobileDatePicker.js +1 -0
- package/esm/MobileDateTimePicker/MobileDateTimePicker.js +1 -0
- package/esm/MobileTimePicker/MobileTimePicker.js +1 -0
- package/esm/MonthCalendar/MonthCalendar.js +6 -11
- package/esm/PickersDay/PickersDay.d.ts +1 -72
- package/esm/PickersDay/PickersDay.js +30 -28
- package/esm/PickersDay/PickersDay.types.d.ts +114 -0
- package/esm/PickersDay/PickersDay.types.js +1 -0
- package/esm/PickersDay/index.d.ts +1 -1
- package/esm/PickersDay/usePickerDayOwnerState.d.ts +14 -0
- package/esm/PickersDay/usePickerDayOwnerState.js +32 -0
- package/esm/PickersSectionList/PickersSectionList.d.ts +1 -1
- package/esm/PickersSectionList/PickersSectionList.types.d.ts +2 -6
- package/esm/TimeField/useTimeField.d.ts +1 -1
- package/esm/TimeField/useTimeField.js +3 -17
- package/esm/TimePicker/TimePicker.js +1 -0
- package/esm/TimePicker/shared.js +3 -3
- package/esm/YearCalendar/YearCalendar.js +5 -11
- package/esm/hooks/useSplitFieldProps.d.ts +1 -1
- package/esm/index.js +1 -1
- package/esm/internals/components/PickerFieldUI.d.ts +5 -5
- package/esm/internals/hooks/useField/buildSectionsFromFormat.d.ts +2 -2
- package/esm/internals/hooks/useField/buildSectionsFromFormat.js +9 -9
- package/esm/internals/hooks/useField/index.d.ts +1 -1
- package/esm/internals/hooks/useField/syncSelectionToDOM.d.ts +9 -0
- package/esm/internals/hooks/useField/syncSelectionToDOM.js +50 -0
- package/esm/internals/hooks/useField/useField.d.ts +2 -4
- package/esm/internals/hooks/useField/useField.js +5 -229
- package/esm/internals/hooks/useField/useField.types.d.ts +55 -68
- package/esm/internals/hooks/useField/useField.utils.d.ts +3 -8
- package/esm/internals/hooks/useField/useField.utils.js +7 -149
- package/esm/internals/hooks/useField/useFieldCharacterEditing.d.ts +19 -26
- package/esm/internals/hooks/useField/useFieldCharacterEditing.js +42 -60
- package/esm/internals/hooks/useField/useFieldHiddenInputProps.d.ts +20 -0
- package/esm/internals/hooks/useField/useFieldHiddenInputProps.js +31 -0
- package/esm/internals/hooks/useField/useFieldInternalPropsWithDefaults.js +8 -10
- package/esm/internals/hooks/useField/useFieldRootHandleKeyDown.d.ts +16 -0
- package/esm/internals/hooks/useField/useFieldRootHandleKeyDown.js +205 -0
- package/esm/internals/hooks/useField/useFieldRootProps.d.ts +32 -0
- package/esm/internals/hooks/useField/useFieldRootProps.js +150 -0
- package/esm/internals/hooks/useField/useFieldSectionContainerProps.d.ts +15 -0
- package/esm/internals/hooks/useField/useFieldSectionContainerProps.js +29 -0
- package/esm/internals/hooks/useField/useFieldSectionContentProps.d.ts +23 -0
- package/esm/internals/hooks/useField/useFieldSectionContentProps.js +226 -0
- package/esm/internals/hooks/useField/useFieldState.d.ts +23 -13
- package/esm/internals/hooks/useField/useFieldState.js +103 -30
- package/esm/internals/hooks/useField/useFieldV6TextField.d.ts +3 -3
- package/esm/internals/hooks/useField/useFieldV6TextField.js +202 -135
- package/esm/internals/hooks/useField/useFieldV7TextField.d.ts +3 -2
- package/esm/internals/hooks/useField/useFieldV7TextField.js +200 -367
- package/esm/internals/hooks/usePicker/usePicker.types.d.ts +1 -0
- package/esm/internals/index.d.ts +6 -5
- package/esm/internals/index.js +4 -3
- package/esm/locales/deDE.js +2 -3
- package/esm/managers/useDateManager.d.ts +4 -13
- package/esm/managers/useDateManager.js +21 -31
- package/esm/managers/useDateTimeManager.d.ts +4 -13
- package/esm/managers/useDateTimeManager.js +26 -36
- package/esm/managers/useTimeManager.d.ts +4 -13
- package/esm/managers/useTimeManager.js +17 -27
- package/esm/models/fields.d.ts +2 -2
- package/esm/models/manager.d.ts +6 -10
- package/esm/validation/validateDate.js +3 -4
- package/hooks/useSplitFieldProps.d.ts +1 -1
- package/index.js +1 -1
- package/internals/components/PickerFieldUI.d.ts +5 -5
- package/internals/hooks/useField/buildSectionsFromFormat.d.ts +2 -2
- package/internals/hooks/useField/buildSectionsFromFormat.js +9 -9
- package/internals/hooks/useField/index.d.ts +1 -1
- package/internals/hooks/useField/syncSelectionToDOM.d.ts +9 -0
- package/internals/hooks/useField/syncSelectionToDOM.js +56 -0
- package/internals/hooks/useField/useField.d.ts +2 -4
- package/internals/hooks/useField/useField.js +5 -231
- package/internals/hooks/useField/useField.types.d.ts +55 -68
- package/internals/hooks/useField/useField.utils.d.ts +3 -8
- package/internals/hooks/useField/useField.utils.js +9 -154
- package/internals/hooks/useField/useFieldCharacterEditing.d.ts +19 -26
- package/internals/hooks/useField/useFieldCharacterEditing.js +41 -59
- package/internals/hooks/useField/useFieldHiddenInputProps.d.ts +20 -0
- package/internals/hooks/useField/useFieldHiddenInputProps.js +39 -0
- package/internals/hooks/useField/useFieldInternalPropsWithDefaults.js +8 -10
- package/internals/hooks/useField/useFieldRootHandleKeyDown.d.ts +16 -0
- package/internals/hooks/useField/useFieldRootHandleKeyDown.js +211 -0
- package/internals/hooks/useField/useFieldRootProps.d.ts +32 -0
- package/internals/hooks/useField/useFieldRootProps.js +156 -0
- package/internals/hooks/useField/useFieldSectionContainerProps.d.ts +15 -0
- package/internals/hooks/useField/useFieldSectionContainerProps.js +37 -0
- package/internals/hooks/useField/useFieldSectionContentProps.d.ts +23 -0
- package/internals/hooks/useField/useFieldSectionContentProps.js +234 -0
- package/internals/hooks/useField/useFieldState.d.ts +23 -13
- package/internals/hooks/useField/useFieldState.js +102 -29
- package/internals/hooks/useField/useFieldV6TextField.d.ts +3 -3
- package/internals/hooks/useField/useFieldV6TextField.js +202 -135
- package/internals/hooks/useField/useFieldV7TextField.d.ts +3 -2
- package/internals/hooks/useField/useFieldV7TextField.js +200 -367
- package/internals/hooks/usePicker/usePicker.types.d.ts +1 -0
- package/internals/index.d.ts +6 -5
- package/internals/index.js +25 -18
- package/locales/deDE.js +2 -3
- package/managers/useDateManager.d.ts +4 -13
- package/managers/useDateManager.js +21 -31
- package/managers/useDateTimeManager.d.ts +4 -13
- package/managers/useDateTimeManager.js +26 -36
- package/managers/useTimeManager.d.ts +4 -13
- package/managers/useTimeManager.js +18 -28
- package/models/fields.d.ts +2 -2
- package/models/manager.d.ts +6 -10
- package/modern/DateCalendar/DateCalendar.js +6 -10
- package/modern/DateCalendar/DayCalendar.d.ts +3 -7
- package/modern/DateCalendar/DayCalendar.js +18 -10
- package/modern/DateCalendar/index.d.ts +0 -1
- package/modern/DateField/useDateField.d.ts +1 -1
- package/modern/DateField/useDateField.js +3 -17
- package/modern/DatePicker/DatePicker.js +1 -0
- package/modern/DatePicker/shared.js +3 -9
- package/modern/DateTimeField/useDateTimeField.d.ts +1 -1
- package/modern/DateTimeField/useDateTimeField.js +3 -17
- package/modern/DateTimePicker/DateTimePicker.js +1 -0
- package/modern/DateTimePicker/shared.js +4 -14
- package/modern/DesktopDatePicker/DesktopDatePicker.js +1 -0
- package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -0
- package/modern/DesktopTimePicker/DesktopTimePicker.js +1 -0
- package/modern/MobileDatePicker/MobileDatePicker.js +1 -0
- package/modern/MobileDateTimePicker/MobileDateTimePicker.js +1 -0
- package/modern/MobileTimePicker/MobileTimePicker.js +1 -0
- package/modern/MonthCalendar/MonthCalendar.js +6 -11
- package/modern/PickersDay/PickersDay.d.ts +1 -72
- package/modern/PickersDay/PickersDay.js +30 -28
- package/modern/PickersDay/PickersDay.types.d.ts +114 -0
- package/modern/PickersDay/PickersDay.types.js +1 -0
- package/modern/PickersDay/index.d.ts +1 -1
- package/modern/PickersDay/usePickerDayOwnerState.d.ts +14 -0
- package/modern/PickersDay/usePickerDayOwnerState.js +32 -0
- package/modern/PickersSectionList/PickersSectionList.d.ts +1 -1
- package/modern/PickersSectionList/PickersSectionList.types.d.ts +2 -6
- package/modern/TimeField/useTimeField.d.ts +1 -1
- package/modern/TimeField/useTimeField.js +3 -17
- package/modern/TimePicker/TimePicker.js +1 -0
- package/modern/TimePicker/shared.js +3 -3
- package/modern/YearCalendar/YearCalendar.js +5 -11
- package/modern/hooks/useSplitFieldProps.d.ts +1 -1
- package/modern/index.js +1 -1
- package/modern/internals/components/PickerFieldUI.d.ts +5 -5
- package/modern/internals/hooks/useField/buildSectionsFromFormat.d.ts +2 -2
- package/modern/internals/hooks/useField/buildSectionsFromFormat.js +9 -9
- package/modern/internals/hooks/useField/index.d.ts +1 -1
- package/modern/internals/hooks/useField/syncSelectionToDOM.d.ts +9 -0
- package/modern/internals/hooks/useField/syncSelectionToDOM.js +50 -0
- package/modern/internals/hooks/useField/useField.d.ts +2 -4
- package/modern/internals/hooks/useField/useField.js +5 -229
- package/modern/internals/hooks/useField/useField.types.d.ts +55 -68
- package/modern/internals/hooks/useField/useField.utils.d.ts +3 -8
- package/modern/internals/hooks/useField/useField.utils.js +7 -149
- package/modern/internals/hooks/useField/useFieldCharacterEditing.d.ts +19 -26
- package/modern/internals/hooks/useField/useFieldCharacterEditing.js +42 -60
- package/modern/internals/hooks/useField/useFieldHiddenInputProps.d.ts +20 -0
- package/modern/internals/hooks/useField/useFieldHiddenInputProps.js +31 -0
- package/modern/internals/hooks/useField/useFieldInternalPropsWithDefaults.js +8 -10
- package/modern/internals/hooks/useField/useFieldRootHandleKeyDown.d.ts +16 -0
- package/modern/internals/hooks/useField/useFieldRootHandleKeyDown.js +205 -0
- package/modern/internals/hooks/useField/useFieldRootProps.d.ts +32 -0
- package/modern/internals/hooks/useField/useFieldRootProps.js +150 -0
- package/modern/internals/hooks/useField/useFieldSectionContainerProps.d.ts +15 -0
- package/modern/internals/hooks/useField/useFieldSectionContainerProps.js +29 -0
- package/modern/internals/hooks/useField/useFieldSectionContentProps.d.ts +23 -0
- package/modern/internals/hooks/useField/useFieldSectionContentProps.js +226 -0
- package/modern/internals/hooks/useField/useFieldState.d.ts +23 -13
- package/modern/internals/hooks/useField/useFieldState.js +103 -30
- package/modern/internals/hooks/useField/useFieldV6TextField.d.ts +3 -3
- package/modern/internals/hooks/useField/useFieldV6TextField.js +202 -135
- package/modern/internals/hooks/useField/useFieldV7TextField.d.ts +3 -2
- package/modern/internals/hooks/useField/useFieldV7TextField.js +200 -367
- package/modern/internals/hooks/usePicker/usePicker.types.d.ts +1 -0
- package/modern/internals/index.d.ts +6 -5
- package/modern/internals/index.js +4 -3
- package/modern/locales/deDE.js +2 -3
- package/modern/managers/useDateManager.d.ts +4 -13
- package/modern/managers/useDateManager.js +21 -31
- package/modern/managers/useDateTimeManager.d.ts +4 -13
- package/modern/managers/useDateTimeManager.js +26 -36
- package/modern/managers/useTimeManager.d.ts +4 -13
- package/modern/managers/useTimeManager.js +17 -27
- package/modern/models/fields.d.ts +2 -2
- package/modern/models/manager.d.ts +6 -10
- package/modern/validation/validateDate.js +3 -4
- package/package.json +2 -2
- package/tsconfig.build.tsbuildinfo +1 -1
- package/validation/validateDate.js +3 -4
package/modern/locales/deDE.js
CHANGED
|
@@ -31,8 +31,7 @@ const deDEPickers = {
|
|
|
31
31
|
dateTimePickerToolbarTitle: 'Datum & Uhrzeit auswählen',
|
|
32
32
|
timePickerToolbarTitle: 'Uhrzeit auswählen',
|
|
33
33
|
dateRangePickerToolbarTitle: 'Datumsbereich auswählen',
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
timeRangePickerToolbarTitle: 'Zeitspanne auswählen',
|
|
36
35
|
// Clock labels
|
|
37
36
|
clockLabelText: (view, formattedTime) => `${timeViews[view] ?? view} auswählen. ${!formattedTime ? 'Keine Uhrzeit ausgewählt' : `Gewählte Uhrzeit ist ${formattedTime}`}`,
|
|
38
37
|
hoursClockNumberText: hours => `${hours} ${timeViews.hours}`,
|
|
@@ -48,7 +47,7 @@ const deDEPickers = {
|
|
|
48
47
|
// Open Picker labels
|
|
49
48
|
openDatePickerDialogue: formattedDate => formattedDate ? `Datum auswählen, gewähltes Datum ist ${formattedDate}` : 'Datum auswählen',
|
|
50
49
|
openTimePickerDialogue: formattedTime => formattedTime ? `Uhrzeit auswählen, gewählte Uhrzeit ist ${formattedTime}` : 'Uhrzeit auswählen',
|
|
51
|
-
|
|
50
|
+
openRangePickerDialogue: formattedRange => formattedRange ? `Zeitspanne auswählen, die aktuell ausgewählte Zeitspanne ist ${formattedRange}` : 'Zeitspanne auswählen',
|
|
52
51
|
fieldClearLabel: 'Wert leeren',
|
|
53
52
|
// Table labels
|
|
54
53
|
timeTableLabel: 'Uhrzeit auswählen',
|
|
@@ -1,23 +1,14 @@
|
|
|
1
1
|
import type { MakeOptional } from '@mui/x-internals/types';
|
|
2
2
|
import { PickerManager, DateValidationError } from "../models/index.js";
|
|
3
3
|
import { UseFieldInternalProps } from "../internals/hooks/useField/index.js";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import { PickerManagerFieldInternalPropsWithDefaults, PickerValue } from "../internals/models/index.js";
|
|
4
|
+
import { ExportedValidateDateProps, ValidateDateProps } from "../validation/validateDate.js";
|
|
5
|
+
import { PickerValue } from "../internals/models/index.js";
|
|
7
6
|
export declare function useDateManager<TEnableAccessibleFieldDOMStructure extends boolean = true>(parameters?: UseDateManagerParameters<TEnableAccessibleFieldDOMStructure>): UseDateManagerReturnValue<TEnableAccessibleFieldDOMStructure>;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
* Is used by the `useDateManager` and `useDateRangeManager` hooks.
|
|
11
|
-
*/
|
|
12
|
-
export declare function getDateFieldInternalPropsDefaults(parameters: GetDateFieldInternalPropsDefaultsParameters): GetDateFieldInternalPropsDefaultsReturnValue;
|
|
7
|
+
type SharedDateAndDateRangeValidationProps = 'disablePast' | 'disableFuture' | 'minDate' | 'maxDate';
|
|
8
|
+
export declare function useApplyDefaultValuesToDateValidationProps(props: Pick<ExportedValidateDateProps, SharedDateAndDateRangeValidationProps>): Pick<ValidateDateProps, SharedDateAndDateRangeValidationProps>;
|
|
13
9
|
export interface UseDateManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> {
|
|
14
10
|
enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
|
|
15
11
|
}
|
|
16
12
|
export type UseDateManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerValue, TEnableAccessibleFieldDOMStructure, DateValidationError, ValidateDateProps, DateManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>>;
|
|
17
13
|
export interface DateManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateValidationError>, 'format'>, ExportedValidateDateProps {}
|
|
18
|
-
type DateManagerFieldPropsToDefault = 'format' | ValidateDatePropsToDefault;
|
|
19
|
-
interface GetDateFieldInternalPropsDefaultsParameters extends Pick<MuiPickersAdapterContextValue, 'defaultDates' | 'utils'> {
|
|
20
|
-
internalProps: Pick<DateManagerFieldInternalProps<true>, DateManagerFieldPropsToDefault>;
|
|
21
|
-
}
|
|
22
|
-
interface GetDateFieldInternalPropsDefaultsReturnValue extends Pick<PickerManagerFieldInternalPropsWithDefaults<UseDateManagerReturnValue<true>>, DateManagerFieldPropsToDefault> {}
|
|
23
14
|
export {};
|
|
@@ -5,7 +5,7 @@ import * as React from 'react';
|
|
|
5
5
|
import { applyDefaultDate } from "../internals/utils/date-utils.js";
|
|
6
6
|
import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
|
|
7
7
|
import { validateDate } from "../validation/index.js";
|
|
8
|
-
import { useUtils } from "../internals/hooks/useUtils.js";
|
|
8
|
+
import { useDefaultDates, useUtils } from "../internals/hooks/useUtils.js";
|
|
9
9
|
import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
|
|
10
10
|
export function useDateManager(parameters = {}) {
|
|
11
11
|
const {
|
|
@@ -17,42 +17,32 @@ export function useDateManager(parameters = {}) {
|
|
|
17
17
|
internal_valueManager: singleItemValueManager,
|
|
18
18
|
internal_fieldValueManager: singleItemFieldValueManager,
|
|
19
19
|
internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
|
|
20
|
-
|
|
21
|
-
internalProps,
|
|
22
|
-
utils,
|
|
23
|
-
defaultDates
|
|
24
|
-
}) => _extends({}, internalProps, getDateFieldInternalPropsDefaults({
|
|
25
|
-
defaultDates,
|
|
26
|
-
utils,
|
|
27
|
-
internalProps
|
|
28
|
-
})),
|
|
20
|
+
internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToDateFieldInternalProps,
|
|
29
21
|
internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
|
|
30
22
|
}), [enableAccessibleFieldDOMStructure]);
|
|
31
23
|
}
|
|
32
|
-
function useOpenPickerButtonAriaLabel() {
|
|
24
|
+
function useOpenPickerButtonAriaLabel(value) {
|
|
33
25
|
const utils = useUtils();
|
|
34
26
|
const translations = usePickerTranslations();
|
|
35
|
-
return React.
|
|
27
|
+
return React.useMemo(() => {
|
|
36
28
|
const formattedValue = utils.isValid(value) ? utils.format(value, 'fullDate') : null;
|
|
37
29
|
return translations.openDatePickerDialogue(formattedValue);
|
|
38
|
-
}, [translations, utils]);
|
|
30
|
+
}, [value, translations, utils]);
|
|
39
31
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
maxDate: applyDefaultDate(utils, internalProps.maxDate, defaultDates.maxDate)
|
|
57
|
-
};
|
|
32
|
+
function useApplyDefaultValuesToDateFieldInternalProps(internalProps) {
|
|
33
|
+
const utils = useUtils();
|
|
34
|
+
const validationProps = useApplyDefaultValuesToDateValidationProps(internalProps);
|
|
35
|
+
return React.useMemo(() => _extends({}, internalProps, validationProps, {
|
|
36
|
+
format: internalProps.format ?? utils.formats.keyboardDate
|
|
37
|
+
}), [internalProps, validationProps, utils]);
|
|
38
|
+
}
|
|
39
|
+
export function useApplyDefaultValuesToDateValidationProps(props) {
|
|
40
|
+
const utils = useUtils();
|
|
41
|
+
const defaultDates = useDefaultDates();
|
|
42
|
+
return React.useMemo(() => ({
|
|
43
|
+
disablePast: props.disablePast ?? false,
|
|
44
|
+
disableFuture: props.disableFuture ?? false,
|
|
45
|
+
minDate: applyDefaultDate(utils, props.minDate, defaultDates.minDate),
|
|
46
|
+
maxDate: applyDefaultDate(utils, props.maxDate, defaultDates.maxDate)
|
|
47
|
+
}), [props.minDate, props.maxDate, props.disableFuture, props.disablePast, utils, defaultDates]);
|
|
58
48
|
}
|
|
@@ -1,24 +1,15 @@
|
|
|
1
1
|
import type { MakeOptional } from '@mui/x-internals/types';
|
|
2
2
|
import { PickerManager, DateTimeValidationError } from "../models/index.js";
|
|
3
3
|
import { UseFieldInternalProps } from "../internals/hooks/useField/index.js";
|
|
4
|
-
import { MuiPickersAdapterContextValue } from "../LocalizationProvider/LocalizationProvider.js";
|
|
5
4
|
import { AmPmProps } from "../internals/models/props/time.js";
|
|
6
|
-
import { ExportedValidateDateTimeProps, ValidateDateTimeProps
|
|
7
|
-
import {
|
|
5
|
+
import { ExportedValidateDateTimeProps, ValidateDateTimeProps } from "../validation/validateDateTime.js";
|
|
6
|
+
import { PickerValue } from "../internals/models/index.js";
|
|
8
7
|
export declare function useDateTimeManager<TEnableAccessibleFieldDOMStructure extends boolean = true>(parameters?: UseDateTimeManagerParameters<TEnableAccessibleFieldDOMStructure>): UseDateTimeManagerReturnValue<TEnableAccessibleFieldDOMStructure>;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
* Is used by the `useDateTimeManager` and `useDateTimeRangeManager` hooks.
|
|
12
|
-
*/
|
|
13
|
-
export declare function getDateTimeFieldInternalPropsDefaults(parameters: GetDateTimeFieldInternalPropsDefaultsParameters): GetDateTimeFieldInternalPropsDefaultsReturnValue;
|
|
8
|
+
type SharedDateTimeAndDateTimeRangeValidationProps = 'disablePast' | 'disableFuture' | 'minTime' | 'maxTime' | 'minDate' | 'maxDate';
|
|
9
|
+
export declare function useApplyDefaultValuesToDateTimeValidationProps(props: Pick<ExportedValidateDateTimeProps, SharedDateTimeAndDateTimeRangeValidationProps | 'minDateTime' | 'maxDateTime'>): Pick<ValidateDateTimeProps, SharedDateTimeAndDateTimeRangeValidationProps>;
|
|
14
10
|
export interface UseDateTimeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> {
|
|
15
11
|
enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
|
|
16
12
|
}
|
|
17
13
|
export type UseDateTimeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerValue, TEnableAccessibleFieldDOMStructure, DateTimeValidationError, ValidateDateTimeProps, DateTimeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>>;
|
|
18
14
|
export interface DateTimeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateTimeValidationError>, 'format'>, ExportedValidateDateTimeProps, AmPmProps {}
|
|
19
|
-
type DateTimeManagerFieldPropsToDefault = 'format' | 'minTime' | 'maxTime' | ValidateDateTimePropsToDefault;
|
|
20
|
-
interface GetDateTimeFieldInternalPropsDefaultsParameters extends Pick<MuiPickersAdapterContextValue, 'defaultDates' | 'utils'> {
|
|
21
|
-
internalProps: Pick<DateTimeManagerFieldInternalProps<true>, DateTimeManagerFieldPropsToDefault | 'minDateTime' | 'maxDateTime' | 'ampm'>;
|
|
22
|
-
}
|
|
23
|
-
interface GetDateTimeFieldInternalPropsDefaultsReturnValue extends Pick<PickerManagerFieldInternalPropsWithDefaults<UseDateTimeManagerReturnValue<true>>, DateTimeManagerFieldPropsToDefault | 'disableIgnoringDatePartForTimeValidation'> {}
|
|
24
15
|
export {};
|
|
@@ -5,7 +5,7 @@ import * as React from 'react';
|
|
|
5
5
|
import { applyDefaultDate } from "../internals/utils/date-utils.js";
|
|
6
6
|
import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
|
|
7
7
|
import { validateDateTime } from "../validation/index.js";
|
|
8
|
-
import { useUtils } from "../internals/hooks/useUtils.js";
|
|
8
|
+
import { useDefaultDates, useUtils } from "../internals/hooks/useUtils.js";
|
|
9
9
|
import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
|
|
10
10
|
export function useDateTimeManager(parameters = {}) {
|
|
11
11
|
const {
|
|
@@ -17,47 +17,37 @@ export function useDateTimeManager(parameters = {}) {
|
|
|
17
17
|
internal_valueManager: singleItemValueManager,
|
|
18
18
|
internal_fieldValueManager: singleItemFieldValueManager,
|
|
19
19
|
internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
|
|
20
|
-
|
|
21
|
-
internalProps,
|
|
22
|
-
utils,
|
|
23
|
-
defaultDates
|
|
24
|
-
}) => _extends({}, internalProps, getDateTimeFieldInternalPropsDefaults({
|
|
25
|
-
internalProps,
|
|
26
|
-
utils,
|
|
27
|
-
defaultDates
|
|
28
|
-
})),
|
|
20
|
+
internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToDateTimeFieldInternalProps,
|
|
29
21
|
internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
|
|
30
22
|
}), [enableAccessibleFieldDOMStructure]);
|
|
31
23
|
}
|
|
32
|
-
function useOpenPickerButtonAriaLabel() {
|
|
24
|
+
function useOpenPickerButtonAriaLabel(value) {
|
|
33
25
|
const utils = useUtils();
|
|
34
26
|
const translations = usePickerTranslations();
|
|
35
|
-
return React.
|
|
27
|
+
return React.useMemo(() => {
|
|
36
28
|
const formattedValue = utils.isValid(value) ? utils.format(value, 'fullDate') : null;
|
|
37
29
|
return translations.openDatePickerDialogue(formattedValue);
|
|
38
|
-
}, [translations, utils]);
|
|
30
|
+
}, [value, translations, utils]);
|
|
39
31
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
maxTime: internalProps.maxDateTime ?? internalProps.maxTime
|
|
62
|
-
};
|
|
32
|
+
function useApplyDefaultValuesToDateTimeFieldInternalProps(internalProps) {
|
|
33
|
+
const utils = useUtils();
|
|
34
|
+
const validationProps = useApplyDefaultValuesToDateTimeValidationProps(internalProps);
|
|
35
|
+
const ampm = React.useMemo(() => internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(), [internalProps.ampm, utils]);
|
|
36
|
+
return React.useMemo(() => _extends({}, internalProps, validationProps, {
|
|
37
|
+
format: internalProps.format ?? (ampm ? utils.formats.keyboardDateTime12h : utils.formats.keyboardDateTime24h)
|
|
38
|
+
}), [internalProps, validationProps, ampm, utils]);
|
|
39
|
+
}
|
|
40
|
+
export function useApplyDefaultValuesToDateTimeValidationProps(props) {
|
|
41
|
+
const utils = useUtils();
|
|
42
|
+
const defaultDates = useDefaultDates();
|
|
43
|
+
return React.useMemo(() => ({
|
|
44
|
+
disablePast: props.disablePast ?? false,
|
|
45
|
+
disableFuture: props.disableFuture ?? false,
|
|
46
|
+
// TODO: Explore if we can remove it from the public API
|
|
47
|
+
disableIgnoringDatePartForTimeValidation: !!props.minDateTime || !!props.maxDateTime || !!props.disableFuture || !!props.disablePast,
|
|
48
|
+
minDate: applyDefaultDate(utils, props.minDateTime ?? props.minDate, defaultDates.minDate),
|
|
49
|
+
maxDate: applyDefaultDate(utils, props.maxDateTime ?? props.maxDate, defaultDates.maxDate),
|
|
50
|
+
minTime: props.minDateTime ?? props.minTime,
|
|
51
|
+
maxTime: props.maxDateTime ?? props.maxTime
|
|
52
|
+
}), [props.minDateTime, props.maxDateTime, props.minTime, props.maxTime, props.minDate, props.maxDate, props.disableFuture, props.disablePast, utils, defaultDates]);
|
|
63
53
|
}
|
|
@@ -1,24 +1,15 @@
|
|
|
1
1
|
import type { MakeOptional } from '@mui/x-internals/types';
|
|
2
2
|
import { PickerManager, TimeValidationError } from "../models/index.js";
|
|
3
3
|
import { UseFieldInternalProps } from "../internals/hooks/useField/index.js";
|
|
4
|
-
import { MuiPickersAdapterContextValue } from "../LocalizationProvider/LocalizationProvider.js";
|
|
5
4
|
import { AmPmProps } from "../internals/models/props/time.js";
|
|
6
|
-
import { ExportedValidateTimeProps, ValidateTimeProps
|
|
7
|
-
import {
|
|
5
|
+
import { ExportedValidateTimeProps, ValidateTimeProps } from "../validation/validateTime.js";
|
|
6
|
+
import { PickerValue } from "../internals/models/index.js";
|
|
8
7
|
export declare function useTimeManager<TEnableAccessibleFieldDOMStructure extends boolean = true>(parameters?: UseTimeManagerParameters<TEnableAccessibleFieldDOMStructure>): UseTimeManagerReturnValue<TEnableAccessibleFieldDOMStructure>;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
* Is used by the `useTimeManager` and `useTimeRangeManager` hooks.
|
|
12
|
-
*/
|
|
13
|
-
export declare function getTimeFieldInternalPropsDefaults(parameters: GetTimeFieldInternalPropsDefaultsParameters): GetTimeFieldInternalPropsDefaultsReturnValue;
|
|
8
|
+
type SharedTimeAndTimeRangeValidationProps = 'disablePast' | 'disableFuture';
|
|
9
|
+
export declare function useApplyDefaultValuesToTimeValidationProps(props: Pick<ExportedValidateTimeProps, SharedTimeAndTimeRangeValidationProps>): Pick<ValidateTimeProps, SharedTimeAndTimeRangeValidationProps>;
|
|
14
10
|
export interface UseTimeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> extends AmPmProps {
|
|
15
11
|
enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
|
|
16
12
|
}
|
|
17
13
|
export type UseTimeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerValue, TEnableAccessibleFieldDOMStructure, TimeValidationError, ValidateTimeProps, TimeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>>;
|
|
18
14
|
export interface TimeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, TimeValidationError>, 'format'>, ExportedValidateTimeProps, AmPmProps {}
|
|
19
|
-
type TimeManagerFieldPropsToDefault = 'format' | ValidateTimePropsToDefault;
|
|
20
|
-
interface GetTimeFieldInternalPropsDefaultsParameters extends Pick<MuiPickersAdapterContextValue, 'utils'> {
|
|
21
|
-
internalProps: Pick<TimeManagerFieldInternalProps<true>, TimeManagerFieldPropsToDefault | 'ampm'>;
|
|
22
|
-
}
|
|
23
|
-
interface GetTimeFieldInternalPropsDefaultsReturnValue extends Pick<PickerManagerFieldInternalPropsWithDefaults<UseTimeManagerReturnValue<true>>, TimeManagerFieldPropsToDefault> {}
|
|
24
15
|
export {};
|
|
@@ -17,42 +17,32 @@ export function useTimeManager(parameters = {}) {
|
|
|
17
17
|
internal_valueManager: singleItemValueManager,
|
|
18
18
|
internal_fieldValueManager: singleItemFieldValueManager,
|
|
19
19
|
internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
|
|
20
|
-
|
|
21
|
-
internalProps,
|
|
22
|
-
utils
|
|
23
|
-
}) => _extends({}, internalProps, getTimeFieldInternalPropsDefaults({
|
|
24
|
-
utils,
|
|
25
|
-
internalProps
|
|
26
|
-
})),
|
|
20
|
+
internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToTimeFieldInternalProps,
|
|
27
21
|
internal_useOpenPickerButtonAriaLabel: createUseOpenPickerButtonAriaLabel(ampm)
|
|
28
22
|
}), [ampm, enableAccessibleFieldDOMStructure]);
|
|
29
23
|
}
|
|
30
24
|
function createUseOpenPickerButtonAriaLabel(ampm) {
|
|
31
|
-
return function useOpenPickerButtonAriaLabel() {
|
|
25
|
+
return function useOpenPickerButtonAriaLabel(value) {
|
|
32
26
|
const utils = useUtils();
|
|
33
27
|
const translations = usePickerTranslations();
|
|
34
|
-
return React.
|
|
28
|
+
return React.useMemo(() => {
|
|
35
29
|
const formatKey = ampm ?? utils.is12HourCycleInCurrentLocale() ? 'fullTime12h' : 'fullTime24h';
|
|
36
30
|
const formattedValue = utils.isValid(value) ? utils.format(value, formatKey) : null;
|
|
37
31
|
return translations.openTimePickerDialogue(formattedValue);
|
|
38
|
-
}, [translations, utils]);
|
|
32
|
+
}, [value, translations, utils]);
|
|
39
33
|
};
|
|
40
34
|
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
disablePast: internalProps.disablePast ?? false,
|
|
55
|
-
disableFuture: internalProps.disableFuture ?? false,
|
|
56
|
-
format: internalProps.format ?? defaultFormat
|
|
57
|
-
};
|
|
35
|
+
function useApplyDefaultValuesToTimeFieldInternalProps(internalProps) {
|
|
36
|
+
const utils = useUtils();
|
|
37
|
+
const validationProps = useApplyDefaultValuesToTimeValidationProps(internalProps);
|
|
38
|
+
const ampm = React.useMemo(() => internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(), [internalProps.ampm, utils]);
|
|
39
|
+
return React.useMemo(() => _extends({}, internalProps, validationProps, {
|
|
40
|
+
format: internalProps.format ?? (ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h)
|
|
41
|
+
}), [internalProps, validationProps, ampm, utils]);
|
|
42
|
+
}
|
|
43
|
+
export function useApplyDefaultValuesToTimeValidationProps(props) {
|
|
44
|
+
return React.useMemo(() => ({
|
|
45
|
+
disablePast: props.disablePast ?? false,
|
|
46
|
+
disableFuture: props.disableFuture ?? false
|
|
47
|
+
}), [props.disablePast, props.disableFuture]);
|
|
58
48
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { TextFieldProps } from '@mui/material/TextField';
|
|
3
3
|
import type { ExportedPickersSectionListProps } from '../PickersSectionList';
|
|
4
|
-
import type { UseFieldInternalProps,
|
|
4
|
+
import type { UseFieldInternalProps, UseFieldReturnValue } from '../internals/hooks/useField';
|
|
5
5
|
import type { PickersTextFieldProps } from '../PickersTextField';
|
|
6
6
|
import { BaseSingleInputFieldProps, FieldRangeSection, PickerRangeValue, PickerValidValue } from "../internals/models/index.js";
|
|
7
7
|
import { PickerOwnerState } from "./pickers.js";
|
|
@@ -131,7 +131,7 @@ export type PickerFieldSlotProps<TValue extends PickerValidValue, TEnableAccessi
|
|
|
131
131
|
* Props the text field receives when used inside a single input Picker.
|
|
132
132
|
* Only contains what the MUI components are passing to the text field, not what users can pass using the `props.slotProps.field` and `props.slotProps.textField`.
|
|
133
133
|
*/
|
|
134
|
-
export type BaseSingleInputPickersTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = Omit<
|
|
134
|
+
export type BaseSingleInputPickersTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = Omit<UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, BaseSingleInputFieldProps>, 'slots' | 'slotProps' | 'clearable' | 'onClear' | 'openPickerButtonPosition' | 'clearButtonPosition' | 'openPickerAriaLabel'>;
|
|
135
135
|
/**
|
|
136
136
|
* Props the built-in text field component can receive.
|
|
137
137
|
*/
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { FieldValueManager, UseFieldInternalProps } from '../internals/hooks/useField';
|
|
2
|
-
import type { UseLocalizationContextReturnValue } from '../internals/hooks/useUtils';
|
|
3
2
|
import type { PickerValidValue, PickerValueManager } from '../internals/models';
|
|
4
3
|
import type { Validator } from '../validation';
|
|
5
4
|
import type { PickerValueType } from './common';
|
|
@@ -66,17 +65,14 @@ export interface PickerManager<TValue extends PickerValidValue, TEnableAccessibl
|
|
|
66
65
|
* - a default format to display the value in the field
|
|
67
66
|
* - some default validation props that are needed to validate the value (e.g: minDate, maxDate)
|
|
68
67
|
* This property is not part of the public API and should not be used directly.
|
|
69
|
-
* @param {
|
|
68
|
+
* @param {TFieldInternalProps<TFieldInternalProps>} internalProps The field internal props to apply the defaults to.
|
|
70
69
|
* @returns {TFieldInternalPropsWithDefaults} The field internal props with the defaults applied.
|
|
71
70
|
*/
|
|
72
|
-
|
|
71
|
+
internal_useApplyDefaultValuesToFieldInternalProps: (internalProps: TFieldInternalProps) => UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, TError> & TValidationProps;
|
|
73
72
|
/**
|
|
74
73
|
* Returns a hook that creates the aria-label to apply on the button that opens the Picker.
|
|
75
|
-
* @
|
|
74
|
+
* @param {TValue} value The value of the Picker.
|
|
75
|
+
* @returns {string} The aria-label to apply on the button that opens the Picker.
|
|
76
76
|
*/
|
|
77
|
-
internal_useOpenPickerButtonAriaLabel: (
|
|
78
|
-
}
|
|
79
|
-
interface ApplyDefaultsToFieldInternalPropsParameters<TFieldInternalProps extends {}> extends UseLocalizationContextReturnValue {
|
|
80
|
-
internalProps: TFieldInternalProps;
|
|
81
|
-
}
|
|
82
|
-
export {};
|
|
77
|
+
internal_useOpenPickerButtonAriaLabel: (value: TValue) => string;
|
|
78
|
+
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { applyDefaultDate } from "../internals/utils/date-utils.js";
|
|
2
1
|
import { singleItemValueManager } from "../internals/utils/valueManagers.js";
|
|
3
2
|
|
|
4
3
|
/**
|
|
@@ -27,11 +26,11 @@ export const validateDate = ({
|
|
|
27
26
|
shouldDisableMonth,
|
|
28
27
|
shouldDisableYear,
|
|
29
28
|
disablePast,
|
|
30
|
-
disableFuture
|
|
29
|
+
disableFuture,
|
|
30
|
+
minDate,
|
|
31
|
+
maxDate
|
|
31
32
|
} = props;
|
|
32
33
|
const now = adapter.utils.date(undefined, timezone);
|
|
33
|
-
const minDate = applyDefaultDate(adapter.utils, props.minDate, adapter.defaultDates.minDate);
|
|
34
|
-
const maxDate = applyDefaultDate(adapter.utils, props.maxDate, adapter.defaultDates.maxDate);
|
|
35
34
|
switch (true) {
|
|
36
35
|
case !adapter.utils.isValid(value):
|
|
37
36
|
return 'invalidDate';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/x-date-pickers",
|
|
3
|
-
"version": "8.0.0-beta.
|
|
3
|
+
"version": "8.0.0-beta.2",
|
|
4
4
|
"description": "The community edition of the Date and Time Picker components (MUI X).",
|
|
5
5
|
"author": "MUI Team",
|
|
6
6
|
"main": "./index.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"clsx": "^2.1.1",
|
|
42
42
|
"prop-types": "^15.8.1",
|
|
43
43
|
"react-transition-group": "^4.4.5",
|
|
44
|
-
"@mui/x-internals": "8.0.0-beta.
|
|
44
|
+
"@mui/x-internals": "8.0.0-beta.2"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@emotion/react": "^11.9.0",
|