@mui/x-date-pickers 8.0.0-alpha.7 → 8.0.0-alpha.8
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 +115 -0
- package/DateField/DateField.js +26 -31
- package/DateField/DateField.types.d.ts +6 -15
- package/DateField/useDateField.d.ts +1 -1
- package/DateField/useDateField.js +2 -1
- package/DateTimeField/DateTimeField.js +26 -31
- package/DateTimeField/DateTimeField.types.d.ts +6 -15
- package/DateTimeField/useDateTimeField.d.ts +1 -1
- package/DateTimeField/useDateTimeField.js +2 -1
- package/DesktopDatePicker/DesktopDatePicker.js +0 -11
- package/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -12
- package/DesktopTimePicker/DesktopTimePicker.js +1 -12
- package/MobileDatePicker/MobileDatePicker.js +0 -9
- package/MobileDateTimePicker/MobileDateTimePicker.js +0 -9
- package/MobileTimePicker/MobileTimePicker.js +0 -9
- package/TimeField/TimeField.js +25 -30
- package/TimeField/TimeField.types.d.ts +6 -15
- package/TimeField/useTimeField.d.ts +1 -1
- package/TimeField/useTimeField.js +2 -1
- package/hooks/useParsedFormat.d.ts +8 -6
- package/hooks/useParsedFormat.js +10 -12
- package/hooks/usePickerActionsContext.d.ts +1 -1
- package/hooks/usePickerContext.d.ts +4 -2
- package/hooks/usePickerContext.js +2 -1
- package/hooks/useSplitFieldProps.d.ts +12 -3
- package/hooks/useSplitFieldProps.js +8 -3
- package/index.js +1 -1
- package/internals/components/PickerFieldUI.d.ts +132 -0
- package/internals/components/PickerFieldUI.js +306 -0
- package/internals/components/PickerProvider.d.ts +25 -4
- package/internals/components/PickerProvider.js +11 -6
- package/internals/hooks/useDesktopPicker/useDesktopPicker.d.ts +1 -1
- package/internals/hooks/useDesktopPicker/useDesktopPicker.js +21 -94
- package/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts +8 -31
- package/internals/hooks/useField/index.d.ts +3 -1
- package/internals/hooks/useField/index.js +3 -2
- package/internals/hooks/useField/useField.d.ts +1 -10
- package/internals/hooks/useField/useField.js +11 -19
- package/internals/hooks/useField/useField.types.d.ts +11 -4
- package/internals/hooks/useField/useFieldInternalPropsWithDefaults.d.ts +15 -0
- package/internals/hooks/useField/useFieldInternalPropsWithDefaults.js +46 -0
- package/internals/hooks/useField/useFieldV7TextField.js +3 -3
- package/internals/hooks/useFieldOwnerState.d.ts +1 -2
- package/internals/hooks/useMobilePicker/useMobilePicker.d.ts +1 -1
- package/internals/hooks/useMobilePicker/useMobilePicker.js +20 -49
- package/internals/hooks/useMobilePicker/useMobilePicker.types.d.ts +6 -14
- package/internals/hooks/useNullablePickerContext.d.ts +5 -0
- package/internals/hooks/useNullablePickerContext.js +10 -0
- package/internals/hooks/usePicker/usePicker.d.ts +1 -2
- package/internals/hooks/usePicker/usePicker.js +0 -3
- package/internals/hooks/usePicker/usePicker.types.d.ts +2 -3
- package/internals/hooks/usePicker/usePickerProvider.d.ts +8 -2
- package/internals/hooks/usePicker/usePickerProvider.js +22 -2
- package/internals/hooks/usePicker/usePickerValue.js +5 -11
- package/internals/hooks/usePicker/usePickerValue.types.d.ts +5 -2
- package/internals/hooks/useUtils.d.ts +4 -3
- package/internals/index.d.ts +6 -3
- package/internals/index.js +1 -1
- package/internals/models/fields.d.ts +3 -16
- package/internals/models/manager.d.ts +3 -0
- package/internals/models/props/basePickerProps.d.ts +0 -12
- package/locales/utils/getPickersLocalization.d.ts +0 -7
- package/locales/utils/getPickersLocalization.js +0 -13
- package/managers/index.d.ts +3 -3
- package/managers/useDateManager.d.ts +1 -1
- package/managers/useDateManager.js +9 -1
- package/managers/useDateTimeManager.d.ts +1 -1
- package/managers/useDateTimeManager.js +9 -1
- package/managers/useTimeManager.d.ts +1 -1
- package/managers/useTimeManager.js +9 -1
- package/models/fields.d.ts +4 -4
- package/models/manager.d.ts +12 -3
- package/modern/DateField/DateField.js +26 -31
- package/modern/DateField/useDateField.js +2 -1
- package/modern/DateTimeField/DateTimeField.js +26 -31
- package/modern/DateTimeField/useDateTimeField.js +2 -1
- package/modern/DesktopDatePicker/DesktopDatePicker.js +0 -11
- package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -12
- package/modern/DesktopTimePicker/DesktopTimePicker.js +1 -12
- package/modern/MobileDatePicker/MobileDatePicker.js +0 -9
- package/modern/MobileDateTimePicker/MobileDateTimePicker.js +0 -9
- package/modern/MobileTimePicker/MobileTimePicker.js +0 -9
- package/modern/TimeField/TimeField.js +25 -30
- package/modern/TimeField/useTimeField.js +2 -1
- package/modern/hooks/useParsedFormat.js +10 -12
- package/modern/hooks/usePickerContext.js +2 -1
- package/modern/hooks/useSplitFieldProps.js +8 -3
- package/modern/index.js +1 -1
- package/modern/internals/components/PickerFieldUI.js +306 -0
- package/modern/internals/components/PickerProvider.js +11 -6
- package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.js +21 -94
- package/modern/internals/hooks/useField/index.js +3 -2
- package/modern/internals/hooks/useField/useField.js +11 -19
- package/modern/internals/hooks/useField/useFieldInternalPropsWithDefaults.js +46 -0
- package/modern/internals/hooks/useField/useFieldV7TextField.js +3 -3
- package/modern/internals/hooks/useMobilePicker/useMobilePicker.js +20 -49
- package/modern/internals/hooks/useNullablePickerContext.js +10 -0
- package/modern/internals/hooks/usePicker/usePicker.js +0 -3
- package/modern/internals/hooks/usePicker/usePickerProvider.js +22 -2
- package/modern/internals/hooks/usePicker/usePickerValue.js +5 -11
- package/modern/internals/index.js +1 -1
- package/modern/locales/utils/getPickersLocalization.js +0 -13
- package/modern/managers/useDateManager.js +9 -1
- package/modern/managers/useDateTimeManager.js +9 -1
- package/modern/managers/useTimeManager.js +9 -1
- package/node/DateField/DateField.js +26 -31
- package/node/DateField/useDateField.js +2 -1
- package/node/DateTimeField/DateTimeField.js +26 -31
- package/node/DateTimeField/useDateTimeField.js +2 -1
- package/node/DesktopDatePicker/DesktopDatePicker.js +0 -11
- package/node/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -12
- package/node/DesktopTimePicker/DesktopTimePicker.js +1 -12
- package/node/MobileDatePicker/MobileDatePicker.js +0 -9
- package/node/MobileDateTimePicker/MobileDateTimePicker.js +0 -9
- package/node/MobileTimePicker/MobileTimePicker.js +0 -9
- package/node/TimeField/TimeField.js +25 -30
- package/node/TimeField/useTimeField.js +2 -1
- package/node/hooks/useParsedFormat.js +10 -12
- package/node/hooks/usePickerContext.js +4 -3
- package/node/hooks/useSplitFieldProps.js +7 -2
- package/node/index.js +1 -1
- package/node/internals/components/PickerFieldUI.js +318 -0
- package/node/internals/components/PickerProvider.js +13 -8
- package/node/internals/hooks/useDesktopPicker/useDesktopPicker.js +23 -96
- package/node/internals/hooks/useField/index.js +3 -2
- package/node/internals/hooks/useField/useField.js +12 -21
- package/node/internals/hooks/useField/useFieldInternalPropsWithDefaults.js +55 -0
- package/node/internals/hooks/useField/useFieldV7TextField.js +3 -3
- package/node/internals/hooks/useMobilePicker/useMobilePicker.js +20 -49
- package/node/internals/hooks/useNullablePickerContext.js +16 -0
- package/node/internals/hooks/usePicker/usePicker.js +0 -3
- package/node/internals/hooks/usePicker/usePickerProvider.js +22 -2
- package/node/internals/hooks/usePicker/usePickerValue.js +5 -11
- package/node/internals/index.js +21 -3
- package/node/locales/utils/getPickersLocalization.js +2 -16
- package/node/managers/useDateManager.js +9 -1
- package/node/managers/useDateTimeManager.js +9 -1
- package/node/managers/useTimeManager.js +9 -1
- package/package.json +2 -2
- package/internals/utils/convertFieldResponseIntoMuiTextFieldProps.d.ts +0 -3
- package/internals/utils/convertFieldResponseIntoMuiTextFieldProps.js +0 -44
- package/modern/internals/utils/convertFieldResponseIntoMuiTextFieldProps.js +0 -44
- package/node/internals/utils/convertFieldResponseIntoMuiTextFieldProps.js +0 -52
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.PickerFieldPrivateContext = void 0;
|
|
9
|
+
exports.useFieldInternalPropsWithDefaults = useFieldInternalPropsWithDefaults;
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
var React = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _useUtils = require("../useUtils");
|
|
13
|
+
var _useNullablePickerContext = require("../useNullablePickerContext");
|
|
14
|
+
const PickerFieldPrivateContext = exports.PickerFieldPrivateContext = /*#__PURE__*/React.createContext(null);
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Applies the default values to the field internal props.
|
|
18
|
+
* This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults.
|
|
19
|
+
* It is only here to allow the migration to be done in smaller steps.
|
|
20
|
+
*/
|
|
21
|
+
function useFieldInternalPropsWithDefaults({
|
|
22
|
+
manager,
|
|
23
|
+
internalProps
|
|
24
|
+
}) {
|
|
25
|
+
const localizationContext = (0, _useUtils.useLocalizationContext)();
|
|
26
|
+
const pickerContext = (0, _useNullablePickerContext.useNullablePickerContext)();
|
|
27
|
+
const fieldPrivateContext = React.useContext(PickerFieldPrivateContext);
|
|
28
|
+
const setValue = pickerContext?.setValue;
|
|
29
|
+
const handleChangeFromPicker = React.useCallback((newValue, ctx) => {
|
|
30
|
+
return setValue?.(newValue, {
|
|
31
|
+
validationError: ctx.validationError
|
|
32
|
+
});
|
|
33
|
+
}, [setValue]);
|
|
34
|
+
return React.useMemo(() => {
|
|
35
|
+
let internalPropsWithDefaultsFromContext = internalProps;
|
|
36
|
+
// If one of the context is null,
|
|
37
|
+
// Then the field is used as a standalone component and the other context will be null as well.
|
|
38
|
+
if (fieldPrivateContext != null && pickerContext != null) {
|
|
39
|
+
internalPropsWithDefaultsFromContext = (0, _extends2.default)({
|
|
40
|
+
value: pickerContext.value,
|
|
41
|
+
onChange: handleChangeFromPicker,
|
|
42
|
+
timezone: pickerContext.timezone,
|
|
43
|
+
disabled: pickerContext.disabled,
|
|
44
|
+
format: pickerContext.fieldFormat,
|
|
45
|
+
formatDensity: fieldPrivateContext.formatDensity,
|
|
46
|
+
enableAccessibleFieldDOMStructure: fieldPrivateContext.enableAccessibleFieldDOMStructure,
|
|
47
|
+
selectedSections: fieldPrivateContext.selectedSections,
|
|
48
|
+
onSelectedSectionsChange: fieldPrivateContext.onSelectedSectionsChange
|
|
49
|
+
}, internalProps);
|
|
50
|
+
}
|
|
51
|
+
return manager.internal_applyDefaultsToFieldInternalProps((0, _extends2.default)({}, localizationContext, {
|
|
52
|
+
internalProps: internalPropsWithDefaultsFromContext
|
|
53
|
+
}));
|
|
54
|
+
}, [manager, localizationContext, pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker]);
|
|
55
|
+
}
|
|
@@ -19,7 +19,8 @@ const useFieldV7TextField = params => {
|
|
|
19
19
|
const {
|
|
20
20
|
internalProps: {
|
|
21
21
|
disabled,
|
|
22
|
-
readOnly = false
|
|
22
|
+
readOnly = false,
|
|
23
|
+
autoFocus = false
|
|
23
24
|
},
|
|
24
25
|
forwardedProps: {
|
|
25
26
|
sectionListRef: inSectionListRef,
|
|
@@ -28,8 +29,7 @@ const useFieldV7TextField = params => {
|
|
|
28
29
|
onFocus,
|
|
29
30
|
onInput,
|
|
30
31
|
onPaste,
|
|
31
|
-
focused: focusedProp
|
|
32
|
-
autoFocus = false
|
|
32
|
+
focused: focusedProp
|
|
33
33
|
},
|
|
34
34
|
fieldValueManager,
|
|
35
35
|
applyCharacterEditing,
|
|
@@ -14,11 +14,11 @@ var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
|
|
|
14
14
|
var _useId = _interopRequireDefault(require("@mui/utils/useId"));
|
|
15
15
|
var _PickersModalDialog = require("../../components/PickersModalDialog");
|
|
16
16
|
var _usePicker = require("../usePicker");
|
|
17
|
-
var _utils = require("../../utils/utils");
|
|
18
17
|
var _PickersLayout = require("../../../PickersLayout");
|
|
19
18
|
var _PickerProvider = require("../../components/PickerProvider");
|
|
19
|
+
var _PickerFieldUI = require("../../components/PickerFieldUI");
|
|
20
20
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
21
|
-
const _excluded = ["props"
|
|
21
|
+
const _excluded = ["props"];
|
|
22
22
|
/**
|
|
23
23
|
* Hook managing all the single-date mobile pickers:
|
|
24
24
|
* - MobileDatePicker
|
|
@@ -27,8 +27,7 @@ const _excluded = ["props", "getOpenDialogAriaText"];
|
|
|
27
27
|
*/
|
|
28
28
|
const useMobilePicker = _ref => {
|
|
29
29
|
let {
|
|
30
|
-
props
|
|
31
|
-
getOpenDialogAriaText
|
|
30
|
+
props
|
|
32
31
|
} = _ref,
|
|
33
32
|
pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
|
|
34
33
|
const {
|
|
@@ -36,17 +35,11 @@ const useMobilePicker = _ref => {
|
|
|
36
35
|
slotProps: innerSlotProps,
|
|
37
36
|
className,
|
|
38
37
|
sx,
|
|
39
|
-
format,
|
|
40
|
-
formatDensity,
|
|
41
|
-
enableAccessibleFieldDOMStructure,
|
|
42
|
-
selectedSections,
|
|
43
|
-
onSelectedSectionsChange,
|
|
44
|
-
timezone,
|
|
45
38
|
name,
|
|
46
39
|
label,
|
|
47
40
|
inputRef,
|
|
48
41
|
readOnly,
|
|
49
|
-
|
|
42
|
+
autoFocus,
|
|
50
43
|
localeText
|
|
51
44
|
} = props;
|
|
52
45
|
const fieldRef = React.useRef(null);
|
|
@@ -55,7 +48,6 @@ const useMobilePicker = _ref => {
|
|
|
55
48
|
const {
|
|
56
49
|
providerProps,
|
|
57
50
|
renderCurrentView,
|
|
58
|
-
fieldProps: pickerFieldProps,
|
|
59
51
|
ownerState
|
|
60
52
|
} = (0, _usePicker.usePicker)((0, _extends2.default)({}, pickerParams, {
|
|
61
53
|
props,
|
|
@@ -70,44 +62,21 @@ const useMobilePicker = _ref => {
|
|
|
70
62
|
externalSlotProps: innerSlotProps?.field,
|
|
71
63
|
additionalProps: (0, _extends2.default)({
|
|
72
64
|
// Internal props
|
|
73
|
-
readOnly
|
|
74
|
-
|
|
75
|
-
format,
|
|
76
|
-
formatDensity,
|
|
77
|
-
enableAccessibleFieldDOMStructure,
|
|
78
|
-
selectedSections,
|
|
79
|
-
onSelectedSectionsChange,
|
|
80
|
-
timezone
|
|
81
|
-
}, pickerFieldProps, {
|
|
82
|
-
// onChange and value
|
|
83
|
-
|
|
65
|
+
readOnly,
|
|
66
|
+
autoFocus: autoFocus && !props.open,
|
|
84
67
|
// Forwarded props
|
|
85
68
|
className,
|
|
86
69
|
sx,
|
|
87
70
|
label,
|
|
88
|
-
name
|
|
71
|
+
name,
|
|
72
|
+
focused: providerProps.contextValue.open ? true : undefined
|
|
89
73
|
}, isToolbarHidden && {
|
|
90
74
|
id: labelId
|
|
91
|
-
}, !(disabled || readOnly) && {
|
|
92
|
-
// These direct access to `providerProps` will go away in https://github.com/mui/mui-x/pull/15671
|
|
93
|
-
onClick: event => {
|
|
94
|
-
event.preventDefault();
|
|
95
|
-
providerProps.contextValue.setOpen(true);
|
|
96
|
-
},
|
|
97
|
-
onKeyDown: (0, _utils.onSpaceOrEnter)(() => providerProps.contextValue.setOpen(true))
|
|
98
75
|
}, !!inputRef && {
|
|
99
76
|
inputRef
|
|
100
77
|
}),
|
|
101
78
|
ownerState
|
|
102
79
|
});
|
|
103
|
-
|
|
104
|
-
// TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged
|
|
105
|
-
fieldProps.inputProps = (0, _extends2.default)({}, fieldProps.inputProps, {
|
|
106
|
-
'aria-label': getOpenDialogAriaText(pickerFieldProps.value)
|
|
107
|
-
});
|
|
108
|
-
const slotsForField = (0, _extends2.default)({
|
|
109
|
-
textField: slots.textField
|
|
110
|
-
}, fieldProps.slots);
|
|
111
80
|
const Layout = slots.layout ?? _PickersLayout.PickersLayout;
|
|
112
81
|
let labelledById = labelId;
|
|
113
82
|
if (isToolbarHidden) {
|
|
@@ -126,20 +95,22 @@ const useMobilePicker = _ref => {
|
|
|
126
95
|
}, innerSlotProps?.mobilePaper)
|
|
127
96
|
});
|
|
128
97
|
const handleFieldRef = (0, _useForkRef.default)(fieldRef, fieldProps.unstableFieldRef);
|
|
129
|
-
const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.
|
|
130
|
-
children:
|
|
131
|
-
slots: slotsForField,
|
|
132
|
-
slotProps: slotProps,
|
|
133
|
-
unstableFieldRef: handleFieldRef
|
|
134
|
-
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersModalDialog.PickersModalDialog, {
|
|
98
|
+
const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {
|
|
99
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickerFieldUI.PickerFieldUIContextProvider, {
|
|
135
100
|
slots: slots,
|
|
136
101
|
slotProps: slotProps,
|
|
137
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
102
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps, {
|
|
103
|
+
unstableFieldRef: handleFieldRef
|
|
104
|
+
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersModalDialog.PickersModalDialog, {
|
|
138
105
|
slots: slots,
|
|
139
106
|
slotProps: slotProps,
|
|
140
|
-
children:
|
|
141
|
-
|
|
142
|
-
|
|
107
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {
|
|
108
|
+
slots: slots,
|
|
109
|
+
slotProps: slotProps,
|
|
110
|
+
children: renderCurrentView()
|
|
111
|
+
}))
|
|
112
|
+
})]
|
|
113
|
+
})
|
|
143
114
|
}));
|
|
144
115
|
return {
|
|
145
116
|
renderPicker
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.useNullablePickerContext = void 0;
|
|
9
|
+
var React = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _usePickerContext = require("../../hooks/usePickerContext");
|
|
11
|
+
/**
|
|
12
|
+
* Returns the context passed by the picker that wraps the current component.
|
|
13
|
+
* If the context is not found, returns `null`.
|
|
14
|
+
*/
|
|
15
|
+
const useNullablePickerContext = () => React.useContext(_usePickerContext.PickerContext);
|
|
16
|
+
exports.useNullablePickerContext = useNullablePickerContext;
|
|
@@ -46,11 +46,8 @@ const usePicker = ({
|
|
|
46
46
|
paramsFromUsePickerViews: pickerViewsResponse.provider
|
|
47
47
|
});
|
|
48
48
|
return {
|
|
49
|
-
// Picker value
|
|
50
|
-
fieldProps: pickerValueResponse.fieldProps,
|
|
51
49
|
// Picker views
|
|
52
50
|
renderCurrentView: pickerViewsResponse.renderCurrentView,
|
|
53
|
-
hasUIView: pickerViewsResponse.provider.hasUIView,
|
|
54
51
|
shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
|
|
55
52
|
// Picker provider
|
|
56
53
|
providerProps,
|
|
@@ -55,6 +55,7 @@ function usePickerProvider(parameters) {
|
|
|
55
55
|
} = parameters;
|
|
56
56
|
const utils = (0, _useUtils.useUtils)();
|
|
57
57
|
const orientation = usePickerOrientation(paramsFromUsePickerViews.views, props.orientation);
|
|
58
|
+
const triggerRef = React.useRef(null);
|
|
58
59
|
const ownerState = React.useMemo(() => ({
|
|
59
60
|
isPickerValueEmpty: valueManager.areValuesEqual(utils, paramsFromUsePickerValue.value, valueManager.emptyValue),
|
|
60
61
|
isPickerOpen: paramsFromUsePickerValue.contextValue.open,
|
|
@@ -63,21 +64,40 @@ function usePickerProvider(parameters) {
|
|
|
63
64
|
pickerOrientation: orientation,
|
|
64
65
|
pickerVariant: variant
|
|
65
66
|
}), [utils, valueManager, paramsFromUsePickerValue.value, paramsFromUsePickerValue.contextValue.open, orientation, variant, props.disabled, props.readOnly]);
|
|
67
|
+
const triggerStatus = React.useMemo(() => {
|
|
68
|
+
if (props.disableOpenPicker || !paramsFromUsePickerViews.hasUIView) {
|
|
69
|
+
return 'hidden';
|
|
70
|
+
}
|
|
71
|
+
if (props.disabled || props.readOnly) {
|
|
72
|
+
return 'disabled';
|
|
73
|
+
}
|
|
74
|
+
return 'enabled';
|
|
75
|
+
}, [props.disableOpenPicker, paramsFromUsePickerViews.hasUIView, props.disabled, props.readOnly]);
|
|
66
76
|
const contextValue = React.useMemo(() => (0, _extends2.default)({}, paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, {
|
|
67
77
|
disabled: props.disabled ?? false,
|
|
68
78
|
readOnly: props.readOnly ?? false,
|
|
69
79
|
variant,
|
|
70
|
-
orientation
|
|
71
|
-
|
|
80
|
+
orientation,
|
|
81
|
+
triggerRef,
|
|
82
|
+
triggerStatus,
|
|
83
|
+
fieldFormat: props.format ?? ''
|
|
84
|
+
}), [paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, variant, orientation, props.disabled, props.readOnly, triggerRef, triggerStatus, props.format]);
|
|
72
85
|
const privateContextValue = React.useMemo(() => (0, _extends2.default)({}, paramsFromUsePickerValue.privateContextValue, {
|
|
73
86
|
ownerState
|
|
74
87
|
}), [paramsFromUsePickerValue, ownerState]);
|
|
75
88
|
const actionsContextValue = React.useMemo(() => (0, _extends2.default)({}, paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue), [paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue]);
|
|
89
|
+
const fieldPrivateContextValue = React.useMemo(() => ({
|
|
90
|
+
formatDensity: props.formatDensity,
|
|
91
|
+
enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure,
|
|
92
|
+
selectedSections: props.selectedSections,
|
|
93
|
+
onSelectedSectionsChange: props.onSelectedSectionsChange
|
|
94
|
+
}), [props.formatDensity, props.enableAccessibleFieldDOMStructure, props.selectedSections, props.onSelectedSectionsChange]);
|
|
76
95
|
return {
|
|
77
96
|
localeText,
|
|
78
97
|
contextValue,
|
|
79
98
|
privateContextValue,
|
|
80
99
|
actionsContextValue,
|
|
100
|
+
fieldPrivateContextValue,
|
|
81
101
|
isValidContextValue: paramsFromUsePickerValue.isValidContextValue
|
|
82
102
|
};
|
|
83
103
|
}
|
|
@@ -184,12 +184,6 @@ const usePickerValue = ({
|
|
|
184
184
|
skipPublicationIfPristine: true
|
|
185
185
|
});
|
|
186
186
|
});
|
|
187
|
-
const fieldResponse = {
|
|
188
|
-
value: dateState.draft,
|
|
189
|
-
onChange: (newValue, context) => setValue(newValue, {
|
|
190
|
-
validationError: context.validationError
|
|
191
|
-
})
|
|
192
|
-
};
|
|
193
187
|
const setValueFromView = (0, _useEventCallback.default)((newValue, selectionState = 'partial') => {
|
|
194
188
|
// TODO: Expose a new method (private?) like `setView` that only updates the draft value.
|
|
195
189
|
if (selectionState === 'shallow') {
|
|
@@ -218,21 +212,21 @@ const usePickerValue = ({
|
|
|
218
212
|
cancelValueChanges
|
|
219
213
|
}), [setValue, setOpen, clearValue, setValueToToday, acceptValueChanges, cancelValueChanges]);
|
|
220
214
|
const contextValue = React.useMemo(() => (0, _extends2.default)({}, actionsContextValue, {
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
215
|
+
value: dateState.draft,
|
|
216
|
+
timezone,
|
|
217
|
+
open
|
|
218
|
+
}), [actionsContextValue, timezone, open, dateState.draft]);
|
|
224
219
|
const privateContextValue = React.useMemo(() => ({
|
|
225
220
|
dismissViews
|
|
226
221
|
}), [dismissViews]);
|
|
227
222
|
const providerParams = {
|
|
228
|
-
value:
|
|
223
|
+
value: dateState.draft,
|
|
229
224
|
contextValue,
|
|
230
225
|
actionsContextValue,
|
|
231
226
|
privateContextValue,
|
|
232
227
|
isValidContextValue: isValid
|
|
233
228
|
};
|
|
234
229
|
return {
|
|
235
|
-
fieldProps: fieldResponse,
|
|
236
230
|
viewProps: viewResponse,
|
|
237
231
|
provider: providerParams
|
|
238
232
|
};
|
package/node/internals/index.js
CHANGED
|
@@ -33,6 +33,18 @@ Object.defineProperty(exports, "DayCalendar", {
|
|
|
33
33
|
return _DayCalendar.DayCalendar;
|
|
34
34
|
}
|
|
35
35
|
});
|
|
36
|
+
Object.defineProperty(exports, "PickerFieldUI", {
|
|
37
|
+
enumerable: true,
|
|
38
|
+
get: function () {
|
|
39
|
+
return _PickerFieldUI.PickerFieldUI;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
Object.defineProperty(exports, "PickerFieldUIContextProvider", {
|
|
43
|
+
enumerable: true,
|
|
44
|
+
get: function () {
|
|
45
|
+
return _PickerFieldUI.PickerFieldUIContextProvider;
|
|
46
|
+
}
|
|
47
|
+
});
|
|
36
48
|
Object.defineProperty(exports, "PickerProvider", {
|
|
37
49
|
enumerable: true,
|
|
38
50
|
get: function () {
|
|
@@ -93,10 +105,10 @@ Object.defineProperty(exports, "areDatesEqual", {
|
|
|
93
105
|
return _dateUtils.areDatesEqual;
|
|
94
106
|
}
|
|
95
107
|
});
|
|
96
|
-
Object.defineProperty(exports, "
|
|
108
|
+
Object.defineProperty(exports, "cleanFieldResponse", {
|
|
97
109
|
enumerable: true,
|
|
98
110
|
get: function () {
|
|
99
|
-
return
|
|
111
|
+
return _PickerFieldUI.cleanFieldResponse;
|
|
100
112
|
}
|
|
101
113
|
});
|
|
102
114
|
Object.defineProperty(exports, "createDateStrForV6InputFromSections", {
|
|
@@ -279,6 +291,12 @@ Object.defineProperty(exports, "useFieldOwnerState", {
|
|
|
279
291
|
return _useFieldOwnerState.useFieldOwnerState;
|
|
280
292
|
}
|
|
281
293
|
});
|
|
294
|
+
Object.defineProperty(exports, "useFieldTextFieldProps", {
|
|
295
|
+
enumerable: true,
|
|
296
|
+
get: function () {
|
|
297
|
+
return _PickerFieldUI.useFieldTextFieldProps;
|
|
298
|
+
}
|
|
299
|
+
});
|
|
282
300
|
Object.defineProperty(exports, "useLocalizationContext", {
|
|
283
301
|
enumerable: true,
|
|
284
302
|
get: function () {
|
|
@@ -340,6 +358,7 @@ Object.defineProperty(exports, "useViews", {
|
|
|
340
358
|
}
|
|
341
359
|
});
|
|
342
360
|
var _PickersArrowSwitcher = require("./components/PickersArrowSwitcher/PickersArrowSwitcher");
|
|
361
|
+
var _PickerFieldUI = require("./components/PickerFieldUI");
|
|
343
362
|
var _PickerProvider = require("./components/PickerProvider");
|
|
344
363
|
var _PickersModalDialog = require("./components/PickersModalDialog");
|
|
345
364
|
var _PickersPopper = require("./components/PickersPopper");
|
|
@@ -361,7 +380,6 @@ var _useToolbarOwnerState = require("./hooks/useToolbarOwnerState");
|
|
|
361
380
|
var _useUtils = require("./hooks/useUtils");
|
|
362
381
|
var _useViews = require("./hooks/useViews");
|
|
363
382
|
var _dateHelpersHooks = require("./hooks/date-helpers-hooks");
|
|
364
|
-
var _convertFieldResponseIntoMuiTextFieldProps = require("./utils/convertFieldResponseIntoMuiTextFieldProps");
|
|
365
383
|
var _dateUtils = require("./utils/date-utils");
|
|
366
384
|
var _dateTimeUtils = require("./utils/date-time-utils");
|
|
367
385
|
var _getDefaultReferenceDate = require("./utils/getDefaultReferenceDate");
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.getPickersLocalization =
|
|
7
|
+
exports.getPickersLocalization = void 0;
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
9
|
const getPickersLocalization = pickersTranslations => {
|
|
10
10
|
return {
|
|
@@ -17,18 +17,4 @@ const getPickersLocalization = pickersTranslations => {
|
|
|
17
17
|
}
|
|
18
18
|
};
|
|
19
19
|
};
|
|
20
|
-
exports.getPickersLocalization = getPickersLocalization;
|
|
21
|
-
const buildGetOpenDialogAriaText = params => {
|
|
22
|
-
const {
|
|
23
|
-
utils,
|
|
24
|
-
formatKey,
|
|
25
|
-
contextTranslation,
|
|
26
|
-
propsTranslation
|
|
27
|
-
} = params;
|
|
28
|
-
return value => {
|
|
29
|
-
const formattedValue = utils.isValid(value) ? utils.format(value, formatKey) : null;
|
|
30
|
-
const translation = propsTranslation ?? contextTranslation;
|
|
31
|
-
return translation(formattedValue);
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
exports.buildGetOpenDialogAriaText = buildGetOpenDialogAriaText;
|
|
20
|
+
exports.getPickersLocalization = getPickersLocalization;
|
|
@@ -31,7 +31,15 @@ function useDateManager(parameters = {}) {
|
|
|
31
31
|
defaultDates,
|
|
32
32
|
utils,
|
|
33
33
|
internalProps
|
|
34
|
-
}))
|
|
34
|
+
})),
|
|
35
|
+
internal_getOpenPickerButtonAriaLabel: ({
|
|
36
|
+
value,
|
|
37
|
+
utils,
|
|
38
|
+
localeText
|
|
39
|
+
}) => {
|
|
40
|
+
const formattedValue = utils.isValid(value) ? utils.format(value, 'fullDate') : null;
|
|
41
|
+
return localeText.openDatePickerDialogue(formattedValue);
|
|
42
|
+
}
|
|
35
43
|
}), [enableAccessibleFieldDOMStructure]);
|
|
36
44
|
}
|
|
37
45
|
|
|
@@ -31,7 +31,15 @@ function useDateTimeManager(parameters = {}) {
|
|
|
31
31
|
internalProps,
|
|
32
32
|
utils,
|
|
33
33
|
defaultDates
|
|
34
|
-
}))
|
|
34
|
+
})),
|
|
35
|
+
internal_getOpenPickerButtonAriaLabel: ({
|
|
36
|
+
value,
|
|
37
|
+
utils,
|
|
38
|
+
localeText
|
|
39
|
+
}) => {
|
|
40
|
+
const formattedValue = utils.isValid(value) ? utils.format(value, 'fullDate') : null;
|
|
41
|
+
return localeText.openDatePickerDialogue(formattedValue);
|
|
42
|
+
}
|
|
35
43
|
}), [enableAccessibleFieldDOMStructure]);
|
|
36
44
|
}
|
|
37
45
|
|
|
@@ -28,7 +28,15 @@ function useTimeManager(parameters = {}) {
|
|
|
28
28
|
}) => (0, _extends2.default)({}, internalProps, getTimeFieldInternalPropsDefaults({
|
|
29
29
|
utils,
|
|
30
30
|
internalProps
|
|
31
|
-
}))
|
|
31
|
+
})),
|
|
32
|
+
internal_getOpenPickerButtonAriaLabel: ({
|
|
33
|
+
value,
|
|
34
|
+
utils,
|
|
35
|
+
localeText
|
|
36
|
+
}) => {
|
|
37
|
+
const formattedValue = utils.isValid(value) ? utils.format(value, 'fullTime') : null;
|
|
38
|
+
return localeText.openTimePickerDialogue(formattedValue);
|
|
39
|
+
}
|
|
32
40
|
}), [enableAccessibleFieldDOMStructure]);
|
|
33
41
|
}
|
|
34
42
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/x-date-pickers",
|
|
3
|
-
"version": "8.0.0-alpha.
|
|
3
|
+
"version": "8.0.0-alpha.8",
|
|
4
4
|
"description": "The community edition of the Date and Time Picker components (MUI X).",
|
|
5
5
|
"author": "MUI Team",
|
|
6
6
|
"main": "./node/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-alpha.
|
|
44
|
+
"@mui/x-internals": "8.0.0-alpha.8"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@emotion/react": "^11.9.0",
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import { TextFieldProps } from '@mui/material/TextField';
|
|
2
|
-
import { UseFieldResponse } from '../hooks/useField';
|
|
3
|
-
export declare const convertFieldResponseIntoMuiTextFieldProps: <TFieldResponse extends UseFieldResponse<any, any>>({ enableAccessibleFieldDOMStructure, ...fieldResponse }: TFieldResponse) => TextFieldProps;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
const _excluded = ["enableAccessibleFieldDOMStructure"],
|
|
4
|
-
_excluded2 = ["InputProps", "readOnly"],
|
|
5
|
-
_excluded3 = ["onPaste", "onKeyDown", "inputMode", "readOnly", "InputProps", "inputProps", "inputRef"];
|
|
6
|
-
export const convertFieldResponseIntoMuiTextFieldProps = _ref => {
|
|
7
|
-
let {
|
|
8
|
-
enableAccessibleFieldDOMStructure
|
|
9
|
-
} = _ref,
|
|
10
|
-
fieldResponse = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
11
|
-
if (enableAccessibleFieldDOMStructure) {
|
|
12
|
-
const {
|
|
13
|
-
InputProps,
|
|
14
|
-
readOnly
|
|
15
|
-
} = fieldResponse,
|
|
16
|
-
other = _objectWithoutPropertiesLoose(fieldResponse, _excluded2);
|
|
17
|
-
return _extends({}, other, {
|
|
18
|
-
InputProps: _extends({}, InputProps ?? {}, {
|
|
19
|
-
readOnly
|
|
20
|
-
})
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
const {
|
|
24
|
-
onPaste,
|
|
25
|
-
onKeyDown,
|
|
26
|
-
inputMode,
|
|
27
|
-
readOnly,
|
|
28
|
-
InputProps,
|
|
29
|
-
inputProps,
|
|
30
|
-
inputRef
|
|
31
|
-
} = fieldResponse,
|
|
32
|
-
other = _objectWithoutPropertiesLoose(fieldResponse, _excluded3);
|
|
33
|
-
return _extends({}, other, {
|
|
34
|
-
InputProps: _extends({}, InputProps ?? {}, {
|
|
35
|
-
readOnly
|
|
36
|
-
}),
|
|
37
|
-
inputProps: _extends({}, inputProps ?? {}, {
|
|
38
|
-
inputMode,
|
|
39
|
-
onPaste,
|
|
40
|
-
onKeyDown,
|
|
41
|
-
ref: inputRef
|
|
42
|
-
})
|
|
43
|
-
});
|
|
44
|
-
};
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
const _excluded = ["enableAccessibleFieldDOMStructure"],
|
|
4
|
-
_excluded2 = ["InputProps", "readOnly"],
|
|
5
|
-
_excluded3 = ["onPaste", "onKeyDown", "inputMode", "readOnly", "InputProps", "inputProps", "inputRef"];
|
|
6
|
-
export const convertFieldResponseIntoMuiTextFieldProps = _ref => {
|
|
7
|
-
let {
|
|
8
|
-
enableAccessibleFieldDOMStructure
|
|
9
|
-
} = _ref,
|
|
10
|
-
fieldResponse = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
11
|
-
if (enableAccessibleFieldDOMStructure) {
|
|
12
|
-
const {
|
|
13
|
-
InputProps,
|
|
14
|
-
readOnly
|
|
15
|
-
} = fieldResponse,
|
|
16
|
-
other = _objectWithoutPropertiesLoose(fieldResponse, _excluded2);
|
|
17
|
-
return _extends({}, other, {
|
|
18
|
-
InputProps: _extends({}, InputProps ?? {}, {
|
|
19
|
-
readOnly
|
|
20
|
-
})
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
const {
|
|
24
|
-
onPaste,
|
|
25
|
-
onKeyDown,
|
|
26
|
-
inputMode,
|
|
27
|
-
readOnly,
|
|
28
|
-
InputProps,
|
|
29
|
-
inputProps,
|
|
30
|
-
inputRef
|
|
31
|
-
} = fieldResponse,
|
|
32
|
-
other = _objectWithoutPropertiesLoose(fieldResponse, _excluded3);
|
|
33
|
-
return _extends({}, other, {
|
|
34
|
-
InputProps: _extends({}, InputProps ?? {}, {
|
|
35
|
-
readOnly
|
|
36
|
-
}),
|
|
37
|
-
inputProps: _extends({}, inputProps ?? {}, {
|
|
38
|
-
inputMode,
|
|
39
|
-
onPaste,
|
|
40
|
-
onKeyDown,
|
|
41
|
-
ref: inputRef
|
|
42
|
-
})
|
|
43
|
-
});
|
|
44
|
-
};
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.convertFieldResponseIntoMuiTextFieldProps = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
10
|
-
const _excluded = ["enableAccessibleFieldDOMStructure"],
|
|
11
|
-
_excluded2 = ["InputProps", "readOnly"],
|
|
12
|
-
_excluded3 = ["onPaste", "onKeyDown", "inputMode", "readOnly", "InputProps", "inputProps", "inputRef"];
|
|
13
|
-
const convertFieldResponseIntoMuiTextFieldProps = _ref => {
|
|
14
|
-
let {
|
|
15
|
-
enableAccessibleFieldDOMStructure
|
|
16
|
-
} = _ref,
|
|
17
|
-
fieldResponse = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
|
|
18
|
-
if (enableAccessibleFieldDOMStructure) {
|
|
19
|
-
const {
|
|
20
|
-
InputProps,
|
|
21
|
-
readOnly
|
|
22
|
-
} = fieldResponse,
|
|
23
|
-
other = (0, _objectWithoutPropertiesLoose2.default)(fieldResponse, _excluded2);
|
|
24
|
-
return (0, _extends2.default)({}, other, {
|
|
25
|
-
InputProps: (0, _extends2.default)({}, InputProps ?? {}, {
|
|
26
|
-
readOnly
|
|
27
|
-
})
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
const {
|
|
31
|
-
onPaste,
|
|
32
|
-
onKeyDown,
|
|
33
|
-
inputMode,
|
|
34
|
-
readOnly,
|
|
35
|
-
InputProps,
|
|
36
|
-
inputProps,
|
|
37
|
-
inputRef
|
|
38
|
-
} = fieldResponse,
|
|
39
|
-
other = (0, _objectWithoutPropertiesLoose2.default)(fieldResponse, _excluded3);
|
|
40
|
-
return (0, _extends2.default)({}, other, {
|
|
41
|
-
InputProps: (0, _extends2.default)({}, InputProps ?? {}, {
|
|
42
|
-
readOnly
|
|
43
|
-
}),
|
|
44
|
-
inputProps: (0, _extends2.default)({}, inputProps ?? {}, {
|
|
45
|
-
inputMode,
|
|
46
|
-
onPaste,
|
|
47
|
-
onKeyDown,
|
|
48
|
-
ref: inputRef
|
|
49
|
-
})
|
|
50
|
-
});
|
|
51
|
-
};
|
|
52
|
-
exports.convertFieldResponseIntoMuiTextFieldProps = convertFieldResponseIntoMuiTextFieldProps;
|