@mui/x-date-pickers 8.0.0-alpha.0 → 8.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +429 -5
- package/DateCalendar/DateCalendar.js +1 -0
- package/DatePicker/DatePickerToolbar.js +0 -12
- package/DateTimePicker/DateTimePickerToolbar.d.ts +2 -2
- package/DateTimePicker/DateTimePickerToolbar.js +6 -15
- package/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +0 -12
- package/DigitalClock/DigitalClock.js +1 -0
- package/MonthCalendar/MonthCalendar.js +1 -0
- package/MultiSectionDigitalClock/MultiSectionDigitalClock.js +1 -0
- package/PickersLayout/PickersLayout.js +0 -12
- package/PickersLayout/PickersLayout.types.d.ts +2 -2
- package/PickersLayout/usePickerLayout.js +1 -5
- package/PickersTextField/PickersInputBase/PickersInputBase.js +10 -9
- package/PickersTextField/PickersTextField.js +2 -2
- package/README.md +2 -2
- package/TimeClock/Clock.js +1 -0
- package/TimeClock/TimeClock.js +1 -0
- package/TimePicker/TimePickerToolbar.js +6 -15
- package/YearCalendar/YearCalendar.js +1 -0
- package/hooks/useSplitFieldProps.d.ts +3 -3
- package/index.js +1 -1
- package/internals/components/PickerProvider.d.ts +26 -0
- package/internals/components/PickerProvider.js +3 -1
- package/internals/components/PickersToolbar.js +2 -4
- package/internals/hooks/useDesktopPicker/useDesktopPicker.js +1 -1
- package/internals/hooks/useField/useField.types.d.ts +2 -2
- package/internals/hooks/useField/useField.utils.d.ts +2 -2
- package/internals/hooks/useField/useFieldState.js +1 -0
- package/internals/hooks/useField/useFieldV7TextField.js +2 -1
- package/internals/hooks/useMobilePicker/useMobilePicker.js +1 -1
- package/internals/hooks/usePicker/usePicker.d.ts +1 -1
- package/internals/hooks/usePicker/usePicker.js +9 -12
- package/internals/hooks/usePicker/usePicker.types.d.ts +6 -6
- package/internals/hooks/usePicker/usePickerLayoutProps.d.ts +6 -7
- package/internals/hooks/usePicker/usePickerLayoutProps.js +2 -5
- package/internals/hooks/usePicker/usePickerProvider.d.ts +20 -4
- package/internals/hooks/usePicker/usePickerProvider.js +61 -5
- package/internals/hooks/usePicker/usePickerValue.d.ts +1 -1
- package/internals/hooks/usePicker/usePickerValue.js +18 -6
- package/internals/hooks/usePicker/usePickerValue.types.d.ts +8 -7
- package/internals/hooks/usePicker/usePickerViews.d.ts +1 -0
- package/internals/hooks/usePicker/usePickerViews.js +1 -0
- package/internals/hooks/useStaticPicker/useStaticPicker.js +1 -1
- package/internals/hooks/useValueWithTimezone.d.ts +19 -15
- package/internals/hooks/useValueWithTimezone.js +13 -1
- package/internals/index.d.ts +1 -1
- package/internals/models/common.d.ts +2 -1
- package/internals/models/props/toolbar.d.ts +1 -2
- package/internals/utils/date-utils.d.ts +2 -2
- package/models/common.d.ts +1 -0
- package/models/fields.d.ts +0 -1
- package/models/pickers.d.ts +18 -0
- package/modern/DateCalendar/DateCalendar.js +1 -0
- package/modern/DatePicker/DatePickerToolbar.js +0 -12
- package/modern/DateTimePicker/DateTimePickerToolbar.js +6 -15
- package/modern/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +0 -12
- package/modern/DigitalClock/DigitalClock.js +1 -0
- package/modern/MonthCalendar/MonthCalendar.js +1 -0
- package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js +1 -0
- package/modern/PickersLayout/PickersLayout.js +0 -12
- package/modern/PickersLayout/usePickerLayout.js +1 -5
- package/modern/PickersTextField/PickersInputBase/PickersInputBase.js +10 -9
- package/modern/PickersTextField/PickersTextField.js +2 -2
- package/modern/TimeClock/Clock.js +1 -0
- package/modern/TimeClock/TimeClock.js +1 -0
- package/modern/TimePicker/TimePickerToolbar.js +6 -15
- package/modern/YearCalendar/YearCalendar.js +1 -0
- package/modern/index.js +1 -1
- package/modern/internals/components/PickerProvider.js +3 -1
- package/modern/internals/components/PickersToolbar.js +2 -4
- package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.js +1 -1
- package/modern/internals/hooks/useField/useFieldState.js +1 -0
- package/modern/internals/hooks/useField/useFieldV7TextField.js +2 -1
- package/modern/internals/hooks/useMobilePicker/useMobilePicker.js +1 -1
- package/modern/internals/hooks/usePicker/usePicker.js +9 -12
- package/modern/internals/hooks/usePicker/usePickerLayoutProps.js +2 -5
- package/modern/internals/hooks/usePicker/usePickerProvider.js +61 -5
- package/modern/internals/hooks/usePicker/usePickerValue.js +18 -6
- package/modern/internals/hooks/usePicker/usePickerViews.js +1 -0
- package/modern/internals/hooks/useStaticPicker/useStaticPicker.js +1 -1
- package/modern/internals/hooks/useValueWithTimezone.js +13 -1
- package/node/DateCalendar/DateCalendar.js +1 -0
- package/node/DatePicker/DatePickerToolbar.js +0 -12
- package/node/DateTimePicker/DateTimePickerToolbar.js +6 -15
- package/node/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +0 -12
- package/node/DigitalClock/DigitalClock.js +1 -0
- package/node/MonthCalendar/MonthCalendar.js +1 -0
- package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js +1 -0
- package/node/PickersLayout/PickersLayout.js +0 -12
- package/node/PickersLayout/usePickerLayout.js +1 -5
- package/node/PickersTextField/PickersInputBase/PickersInputBase.js +10 -9
- package/node/PickersTextField/PickersTextField.js +2 -2
- package/node/TimeClock/Clock.js +1 -0
- package/node/TimeClock/TimeClock.js +1 -0
- package/node/TimePicker/TimePickerToolbar.js +6 -15
- package/node/YearCalendar/YearCalendar.js +1 -0
- package/node/index.js +1 -1
- package/node/internals/components/PickerProvider.js +3 -1
- package/node/internals/components/PickersToolbar.js +2 -4
- package/node/internals/hooks/useDesktopPicker/useDesktopPicker.js +1 -1
- package/node/internals/hooks/useField/useFieldState.js +1 -0
- package/node/internals/hooks/useField/useFieldV7TextField.js +2 -1
- package/node/internals/hooks/useMobilePicker/useMobilePicker.js +1 -1
- package/node/internals/hooks/usePicker/usePicker.js +9 -12
- package/node/internals/hooks/usePicker/usePickerLayoutProps.js +2 -5
- package/node/internals/hooks/usePicker/usePickerProvider.js +64 -5
- package/node/internals/hooks/usePicker/usePickerValue.js +18 -6
- package/node/internals/hooks/usePicker/usePickerViews.js +1 -0
- package/node/internals/hooks/useStaticPicker/useStaticPicker.js +1 -1
- package/node/internals/hooks/useValueWithTimezone.js +13 -1
- package/package.json +4 -4
- package/internals/hooks/usePicker/usePickerOwnerState.d.ts +0 -10
- package/internals/hooks/usePicker/usePickerOwnerState.js +0 -16
- package/modern/internals/hooks/usePicker/usePickerOwnerState.js +0 -16
- package/node/internals/hooks/usePicker/usePickerOwnerState.js +0 -23
|
@@ -108,6 +108,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
|
|
|
108
108
|
timezone: timezoneProp,
|
|
109
109
|
value: valueProp,
|
|
110
110
|
defaultValue,
|
|
111
|
+
referenceDate: referenceDateProp,
|
|
111
112
|
onChange,
|
|
112
113
|
valueManager: _valueManagers.singleItemValueManager
|
|
113
114
|
});
|
|
@@ -152,12 +152,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
|
|
|
152
152
|
*/
|
|
153
153
|
classes: _propTypes.default.object,
|
|
154
154
|
className: _propTypes.default.string,
|
|
155
|
-
/**
|
|
156
|
-
* If `true`, the component is disabled.
|
|
157
|
-
* When disabled, the value cannot be changed and no interaction is possible.
|
|
158
|
-
* @default false
|
|
159
|
-
*/
|
|
160
|
-
disabled: _propTypes.default.bool,
|
|
161
155
|
isLandscape: _propTypes.default.bool.isRequired,
|
|
162
156
|
/**
|
|
163
157
|
* `true` if the application is in right-to-left direction.
|
|
@@ -178,12 +172,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
|
|
|
178
172
|
* Force rendering in particular orientation.
|
|
179
173
|
*/
|
|
180
174
|
orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
|
|
181
|
-
/**
|
|
182
|
-
* If `true`, the component is read-only.
|
|
183
|
-
* When read-only, the value cannot be changed but the user can interact with the interface.
|
|
184
|
-
* @default false
|
|
185
|
-
*/
|
|
186
|
-
readOnly: _propTypes.default.bool,
|
|
187
175
|
/**
|
|
188
176
|
* The props used for each component slot.
|
|
189
177
|
* @default {}
|
|
@@ -52,8 +52,6 @@ const usePickerLayout = props => {
|
|
|
52
52
|
onSelectShortcut,
|
|
53
53
|
isValid,
|
|
54
54
|
isLandscape,
|
|
55
|
-
disabled,
|
|
56
|
-
readOnly,
|
|
57
55
|
children,
|
|
58
56
|
slots,
|
|
59
57
|
slotProps,
|
|
@@ -97,9 +95,7 @@ const usePickerLayout = props => {
|
|
|
97
95
|
value,
|
|
98
96
|
view,
|
|
99
97
|
onViewChange,
|
|
100
|
-
views
|
|
101
|
-
disabled,
|
|
102
|
-
readOnly
|
|
98
|
+
views
|
|
103
99
|
},
|
|
104
100
|
className: classes.toolbar,
|
|
105
101
|
ownerState
|
|
@@ -22,7 +22,7 @@ var _RtlProvider = require("@mui/system/RtlProvider");
|
|
|
22
22
|
var _pickersInputBaseClasses = require("./pickersInputBaseClasses");
|
|
23
23
|
var _PickersSectionList = require("../../PickersSectionList");
|
|
24
24
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
25
|
-
const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef"];
|
|
25
|
+
const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef", "onFocus", "onBlur"];
|
|
26
26
|
const round = value => Math.round(value * 1e5) / 1e5;
|
|
27
27
|
const PickersInputBaseRoot = exports.PickersInputBaseRoot = (0, _styles.styled)('div', {
|
|
28
28
|
name: 'MuiPickersInputBase',
|
|
@@ -202,7 +202,9 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
|
|
|
202
202
|
readOnly,
|
|
203
203
|
inputProps,
|
|
204
204
|
inputRef,
|
|
205
|
-
sectionListRef
|
|
205
|
+
sectionListRef,
|
|
206
|
+
onFocus,
|
|
207
|
+
onBlur
|
|
206
208
|
} = props,
|
|
207
209
|
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
|
208
210
|
const rootRef = React.useRef(null);
|
|
@@ -214,13 +216,12 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
|
|
|
214
216
|
throw new Error('MUI X: PickersInputBase should always be used inside a PickersTextField component');
|
|
215
217
|
}
|
|
216
218
|
const handleInputFocus = event => {
|
|
217
|
-
// Fix a bug with IE11 where the focus/blur events are triggered
|
|
218
|
-
// while the component is disabled.
|
|
219
|
-
if (muiFormControl.disabled) {
|
|
220
|
-
event.stopPropagation();
|
|
221
|
-
return;
|
|
222
|
-
}
|
|
223
219
|
muiFormControl.onFocus?.(event);
|
|
220
|
+
onFocus?.(event);
|
|
221
|
+
};
|
|
222
|
+
const handleInputBlur = event => {
|
|
223
|
+
muiFormControl.onBlur?.(event);
|
|
224
|
+
onBlur?.(event);
|
|
224
225
|
};
|
|
225
226
|
React.useEffect(() => {
|
|
226
227
|
if (muiFormControl) {
|
|
@@ -262,7 +263,7 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
|
|
|
262
263
|
tabIndex: tabIndex,
|
|
263
264
|
className: classes.sectionsContainer,
|
|
264
265
|
onFocus: handleInputFocus,
|
|
265
|
-
onBlur:
|
|
266
|
+
onBlur: handleInputBlur,
|
|
266
267
|
onInput: onInput,
|
|
267
268
|
onPaste: onPaste,
|
|
268
269
|
onKeyDown: onKeyDown,
|
|
@@ -112,8 +112,6 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
|
|
|
112
112
|
className: (0, _clsx.default)(classes.root, className),
|
|
113
113
|
ref: handleRootRef,
|
|
114
114
|
focused: focused,
|
|
115
|
-
onFocus: onFocus,
|
|
116
|
-
onBlur: onBlur,
|
|
117
115
|
disabled: disabled,
|
|
118
116
|
variant: variant,
|
|
119
117
|
error: error,
|
|
@@ -135,6 +133,8 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
|
|
|
135
133
|
onKeyUp: onKeyUp,
|
|
136
134
|
onInput: onInput,
|
|
137
135
|
onPaste: onPaste,
|
|
136
|
+
onFocus: onFocus,
|
|
137
|
+
onBlur: onBlur,
|
|
138
138
|
endAdornment: endAdornment,
|
|
139
139
|
startAdornment: startAdornment,
|
|
140
140
|
tabIndex: tabIndex,
|
package/node/TimeClock/Clock.js
CHANGED
|
@@ -114,6 +114,7 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
|
|
|
114
114
|
timezone: timezoneProp,
|
|
115
115
|
value: valueProp,
|
|
116
116
|
defaultValue,
|
|
117
|
+
referenceDate: referenceDateProp,
|
|
117
118
|
onChange,
|
|
118
119
|
valueManager: _valueManagers.singleItemValueManager
|
|
119
120
|
});
|
|
@@ -24,8 +24,9 @@ var _useUtils = require("../internals/hooks/useUtils");
|
|
|
24
24
|
var _dateHelpersHooks = require("../internals/hooks/date-helpers-hooks");
|
|
25
25
|
var _timePickerToolbarClasses = require("./timePickerToolbarClasses");
|
|
26
26
|
var _dateUtils = require("../internals/utils/date-utils");
|
|
27
|
+
var _hooks = require("../hooks");
|
|
27
28
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
28
|
-
const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "
|
|
29
|
+
const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "className"];
|
|
29
30
|
const useUtilityClasses = ownerState => {
|
|
30
31
|
const {
|
|
31
32
|
isLandscape,
|
|
@@ -135,14 +136,16 @@ function TimePickerToolbar(inProps) {
|
|
|
135
136
|
view,
|
|
136
137
|
onViewChange,
|
|
137
138
|
views,
|
|
138
|
-
disabled,
|
|
139
|
-
readOnly,
|
|
140
139
|
className
|
|
141
140
|
} = props,
|
|
142
141
|
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
|
143
142
|
const utils = (0, _useUtils.useUtils)();
|
|
144
143
|
const translations = (0, _usePickerTranslations.usePickerTranslations)();
|
|
145
144
|
const isRtl = (0, _RtlProvider.useRtl)();
|
|
145
|
+
const {
|
|
146
|
+
disabled,
|
|
147
|
+
readOnly
|
|
148
|
+
} = (0, _hooks.usePickerContext)();
|
|
146
149
|
const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours'));
|
|
147
150
|
const {
|
|
148
151
|
meridiemMode,
|
|
@@ -223,12 +226,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
|
|
|
223
226
|
*/
|
|
224
227
|
classes: _propTypes.default.object,
|
|
225
228
|
className: _propTypes.default.string,
|
|
226
|
-
/**
|
|
227
|
-
* If `true`, the component is disabled.
|
|
228
|
-
* When disabled, the value cannot be changed and no interaction is possible.
|
|
229
|
-
* @default false
|
|
230
|
-
*/
|
|
231
|
-
disabled: _propTypes.default.bool,
|
|
232
229
|
/**
|
|
233
230
|
* If `true`, show the toolbar even in desktop mode.
|
|
234
231
|
* @default `true` for Desktop, `false` for Mobile.
|
|
@@ -242,12 +239,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
|
|
|
242
239
|
* @param {TView} view The view to open
|
|
243
240
|
*/
|
|
244
241
|
onViewChange: _propTypes.default.func.isRequired,
|
|
245
|
-
/**
|
|
246
|
-
* If `true`, the component is read-only.
|
|
247
|
-
* When read-only, the value cannot be changed but the user can interact with the interface.
|
|
248
|
-
* @default false
|
|
249
|
-
*/
|
|
250
|
-
readOnly: _propTypes.default.bool,
|
|
251
242
|
/**
|
|
252
243
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
253
244
|
*/
|
|
@@ -111,6 +111,7 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
|
|
|
111
111
|
timezone: timezoneProp,
|
|
112
112
|
value: valueProp,
|
|
113
113
|
defaultValue,
|
|
114
|
+
referenceDate: referenceDateProp,
|
|
114
115
|
onChange,
|
|
115
116
|
valueManager: _valueManagers.singleItemValueManager
|
|
116
117
|
});
|
package/node/index.js
CHANGED
|
@@ -15,7 +15,9 @@ const PickerPrivateContext = exports.PickerPrivateContext = /*#__PURE__*/React.c
|
|
|
15
15
|
isPickerDisabled: false,
|
|
16
16
|
isPickerReadOnly: false,
|
|
17
17
|
isPickerValueEmpty: false,
|
|
18
|
-
isPickerOpen: false
|
|
18
|
+
isPickerOpen: false,
|
|
19
|
+
pickerVariant: 'desktop',
|
|
20
|
+
pickerOrientation: 'portrait'
|
|
19
21
|
}
|
|
20
22
|
});
|
|
21
23
|
|
|
@@ -18,13 +18,11 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
18
18
|
const _excluded = ["children", "className", "toolbarTitle", "hidden", "titleId", "isLandscape", "classes", "landscapeDirection"];
|
|
19
19
|
const useUtilityClasses = ownerState => {
|
|
20
20
|
const {
|
|
21
|
-
classes
|
|
22
|
-
isLandscape
|
|
21
|
+
classes
|
|
23
22
|
} = ownerState;
|
|
24
23
|
const slots = {
|
|
25
24
|
root: ['root'],
|
|
26
|
-
content: ['content']
|
|
27
|
-
penIconButton: ['penIconButton', isLandscape && 'penIconButtonLandscape']
|
|
25
|
+
content: ['content']
|
|
28
26
|
};
|
|
29
27
|
return (0, _composeClasses.default)(slots, _pickersToolbarClasses.getPickersToolbarUtilityClass, classes);
|
|
30
28
|
};
|
|
@@ -74,7 +74,7 @@ const useDesktopPicker = _ref => {
|
|
|
74
74
|
localeText,
|
|
75
75
|
autoFocusView: true,
|
|
76
76
|
additionalViewProps: {},
|
|
77
|
-
|
|
77
|
+
variant: 'desktop'
|
|
78
78
|
}));
|
|
79
79
|
const InputAdornment = slots.inputAdornment ?? _InputAdornment.default;
|
|
80
80
|
const _useSlotProps = (0, _useSlotProps3.default)({
|
|
@@ -206,8 +206,9 @@ const useFieldV7TextField = params => {
|
|
|
206
206
|
if (focused || !sectionListRef.current) {
|
|
207
207
|
return;
|
|
208
208
|
}
|
|
209
|
+
const activeElement = (0, _utils.getActiveElement)(document);
|
|
209
210
|
setFocused(true);
|
|
210
|
-
const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement(
|
|
211
|
+
const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement(activeElement) != null;
|
|
211
212
|
if (!isFocusInsideASection) {
|
|
212
213
|
setSelectedSections(sectionOrder.startIndex);
|
|
213
214
|
}
|
|
@@ -8,13 +8,12 @@ var _warning = require("@mui/x-internals/warning");
|
|
|
8
8
|
var _usePickerValue = require("./usePickerValue");
|
|
9
9
|
var _usePickerViews = require("./usePickerViews");
|
|
10
10
|
var _usePickerLayoutProps = require("./usePickerLayoutProps");
|
|
11
|
-
var _usePickerOwnerState = require("./usePickerOwnerState");
|
|
12
11
|
var _usePickerProvider = require("./usePickerProvider");
|
|
13
12
|
const usePicker = ({
|
|
14
13
|
props,
|
|
15
14
|
valueManager,
|
|
16
15
|
valueType,
|
|
17
|
-
|
|
16
|
+
variant,
|
|
18
17
|
additionalViewProps,
|
|
19
18
|
validator,
|
|
20
19
|
autoFocusView,
|
|
@@ -31,7 +30,7 @@ const usePicker = ({
|
|
|
31
30
|
props,
|
|
32
31
|
valueManager,
|
|
33
32
|
valueType,
|
|
34
|
-
|
|
33
|
+
variant,
|
|
35
34
|
validator
|
|
36
35
|
});
|
|
37
36
|
const pickerViewsResponse = (0, _usePickerViews.usePickerViews)({
|
|
@@ -44,19 +43,17 @@ const usePicker = ({
|
|
|
44
43
|
});
|
|
45
44
|
const pickerLayoutResponse = (0, _usePickerLayoutProps.usePickerLayoutProps)({
|
|
46
45
|
props,
|
|
47
|
-
|
|
46
|
+
variant,
|
|
48
47
|
propsFromPickerValue: pickerValueResponse.layoutProps,
|
|
49
48
|
propsFromPickerViews: pickerViewsResponse.layoutProps
|
|
50
49
|
});
|
|
51
|
-
const pickerOwnerState = (0, _usePickerOwnerState.usePickerOwnerState)({
|
|
52
|
-
props,
|
|
53
|
-
pickerValueResponse,
|
|
54
|
-
valueManager
|
|
55
|
-
});
|
|
56
50
|
const providerProps = (0, _usePickerProvider.usePickerProvider)({
|
|
51
|
+
props,
|
|
57
52
|
pickerValueResponse,
|
|
58
|
-
|
|
59
|
-
|
|
53
|
+
localeText,
|
|
54
|
+
valueManager,
|
|
55
|
+
variant,
|
|
56
|
+
views: pickerViewsResponse.views
|
|
60
57
|
});
|
|
61
58
|
return {
|
|
62
59
|
// Picker value
|
|
@@ -72,7 +69,7 @@ const usePicker = ({
|
|
|
72
69
|
// Picker provider
|
|
73
70
|
providerProps,
|
|
74
71
|
// Picker owner state
|
|
75
|
-
ownerState:
|
|
72
|
+
ownerState: providerProps.privateContextValue.ownerState
|
|
76
73
|
};
|
|
77
74
|
};
|
|
78
75
|
exports.usePicker = usePicker;
|
|
@@ -10,7 +10,6 @@ var _RtlProvider = require("@mui/system/RtlProvider");
|
|
|
10
10
|
var _useIsLandscape = require("../useIsLandscape");
|
|
11
11
|
/**
|
|
12
12
|
* Props used to create the layout of the views.
|
|
13
|
-
* Those props are exposed on all the pickers.
|
|
14
13
|
*/
|
|
15
14
|
|
|
16
15
|
/**
|
|
@@ -20,7 +19,7 @@ const usePickerLayoutProps = ({
|
|
|
20
19
|
props,
|
|
21
20
|
propsFromPickerValue,
|
|
22
21
|
propsFromPickerViews,
|
|
23
|
-
|
|
22
|
+
variant
|
|
24
23
|
}) => {
|
|
25
24
|
const {
|
|
26
25
|
orientation
|
|
@@ -30,9 +29,7 @@ const usePickerLayoutProps = ({
|
|
|
30
29
|
const layoutProps = (0, _extends2.default)({}, propsFromPickerViews, propsFromPickerValue, {
|
|
31
30
|
isLandscape,
|
|
32
31
|
isRtl,
|
|
33
|
-
wrapperVariant
|
|
34
|
-
disabled: props.disabled,
|
|
35
|
-
readOnly: props.readOnly
|
|
32
|
+
wrapperVariant: variant
|
|
36
33
|
});
|
|
37
34
|
return {
|
|
38
35
|
layoutProps
|
|
@@ -1,22 +1,76 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
3
4
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
8
|
+
exports.usePickerOrientation = void 0;
|
|
7
9
|
exports.usePickerProvider = usePickerProvider;
|
|
8
10
|
var React = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
|
|
12
|
+
var _useUtils = require("../useUtils");
|
|
13
|
+
var _utils = require("../../utils/utils");
|
|
14
|
+
function getOrientation() {
|
|
15
|
+
if (typeof window === 'undefined') {
|
|
16
|
+
return 'portrait';
|
|
17
|
+
}
|
|
18
|
+
if (window.screen && window.screen.orientation && window.screen.orientation.angle) {
|
|
19
|
+
return Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// Support IOS safari
|
|
23
|
+
if (window.orientation) {
|
|
24
|
+
return Math.abs(Number(window.orientation)) === 90 ? 'landscape' : 'portrait';
|
|
25
|
+
}
|
|
26
|
+
return 'portrait';
|
|
27
|
+
}
|
|
28
|
+
const usePickerOrientation = (views, customOrientation) => {
|
|
29
|
+
const [orientation, setOrientation] = React.useState(getOrientation);
|
|
30
|
+
(0, _useEnhancedEffect.default)(() => {
|
|
31
|
+
const eventHandler = () => {
|
|
32
|
+
setOrientation(getOrientation());
|
|
33
|
+
};
|
|
34
|
+
window.addEventListener('orientationchange', eventHandler);
|
|
35
|
+
return () => {
|
|
36
|
+
window.removeEventListener('orientationchange', eventHandler);
|
|
37
|
+
};
|
|
38
|
+
}, []);
|
|
39
|
+
if ((0, _utils.arrayIncludes)(views, ['hours', 'minutes', 'seconds'])) {
|
|
40
|
+
// could not display 13:34:44 in landscape mode
|
|
41
|
+
return 'portrait';
|
|
42
|
+
}
|
|
43
|
+
return customOrientation ?? orientation;
|
|
44
|
+
};
|
|
45
|
+
exports.usePickerOrientation = usePickerOrientation;
|
|
9
46
|
function usePickerProvider(parameters) {
|
|
10
47
|
const {
|
|
48
|
+
props,
|
|
11
49
|
pickerValueResponse,
|
|
12
|
-
|
|
13
|
-
localeText
|
|
50
|
+
valueManager,
|
|
51
|
+
localeText,
|
|
52
|
+
variant,
|
|
53
|
+
views
|
|
14
54
|
} = parameters;
|
|
55
|
+
const utils = (0, _useUtils.useUtils)();
|
|
56
|
+
const orientation = usePickerOrientation(views, props.orientation);
|
|
57
|
+
const ownerState = React.useMemo(() => ({
|
|
58
|
+
isPickerValueEmpty: valueManager.areValuesEqual(utils, pickerValueResponse.viewProps.value, valueManager.emptyValue),
|
|
59
|
+
isPickerOpen: pickerValueResponse.open,
|
|
60
|
+
isPickerDisabled: props.disabled ?? false,
|
|
61
|
+
isPickerReadOnly: props.readOnly ?? false,
|
|
62
|
+
pickerOrientation: orientation,
|
|
63
|
+
pickerVariant: variant
|
|
64
|
+
}), [utils, valueManager, pickerValueResponse.viewProps.value, pickerValueResponse.open, orientation, variant, props.disabled, props.readOnly]);
|
|
15
65
|
const contextValue = React.useMemo(() => ({
|
|
16
66
|
onOpen: pickerValueResponse.actions.onOpen,
|
|
17
67
|
onClose: pickerValueResponse.actions.onClose,
|
|
18
|
-
open: pickerValueResponse.open
|
|
19
|
-
|
|
68
|
+
open: pickerValueResponse.open,
|
|
69
|
+
disabled: props.disabled ?? false,
|
|
70
|
+
readOnly: props.readOnly ?? false,
|
|
71
|
+
variant,
|
|
72
|
+
orientation
|
|
73
|
+
}), [pickerValueResponse.actions.onOpen, pickerValueResponse.actions.onClose, pickerValueResponse.open, variant, orientation, props.disabled, props.readOnly]);
|
|
20
74
|
const privateContextValue = React.useMemo(() => ({
|
|
21
75
|
ownerState
|
|
22
76
|
}), [ownerState]);
|
|
@@ -25,4 +79,9 @@ function usePickerProvider(parameters) {
|
|
|
25
79
|
contextValue,
|
|
26
80
|
privateContextValue
|
|
27
81
|
};
|
|
28
|
-
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* Props used to create the private context.
|
|
86
|
+
* Those props are exposed on all the pickers.
|
|
87
|
+
*/
|
|
@@ -120,7 +120,7 @@ const usePickerValue = ({
|
|
|
120
120
|
props,
|
|
121
121
|
valueManager,
|
|
122
122
|
valueType,
|
|
123
|
-
|
|
123
|
+
variant,
|
|
124
124
|
validator
|
|
125
125
|
}) => {
|
|
126
126
|
const {
|
|
@@ -128,8 +128,9 @@ const usePickerValue = ({
|
|
|
128
128
|
onChange,
|
|
129
129
|
value: inValueWithoutRenderTimezone,
|
|
130
130
|
defaultValue: inDefaultValue,
|
|
131
|
-
closeOnSelect =
|
|
132
|
-
timezone: timezoneProp
|
|
131
|
+
closeOnSelect = variant === 'desktop',
|
|
132
|
+
timezone: timezoneProp,
|
|
133
|
+
referenceDate
|
|
133
134
|
} = props;
|
|
134
135
|
const {
|
|
135
136
|
current: defaultValue
|
|
@@ -137,6 +138,7 @@ const usePickerValue = ({
|
|
|
137
138
|
const {
|
|
138
139
|
current: isControlled
|
|
139
140
|
} = React.useRef(inValueWithoutRenderTimezone !== undefined);
|
|
141
|
+
const [previousTimezoneProp, setPreviousTimezoneProp] = React.useState(timezoneProp);
|
|
140
142
|
|
|
141
143
|
/* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
|
|
142
144
|
if (process.env.NODE_ENV !== 'production') {
|
|
@@ -167,6 +169,7 @@ const usePickerValue = ({
|
|
|
167
169
|
timezone: timezoneProp,
|
|
168
170
|
value: inValueWithoutRenderTimezone,
|
|
169
171
|
defaultValue,
|
|
172
|
+
referenceDate,
|
|
170
173
|
onChange,
|
|
171
174
|
valueManager
|
|
172
175
|
});
|
|
@@ -183,10 +186,19 @@ const usePickerValue = ({
|
|
|
183
186
|
draft: initialValue,
|
|
184
187
|
lastPublishedValue: initialValue,
|
|
185
188
|
lastCommittedValue: initialValue,
|
|
186
|
-
lastControlledValue:
|
|
189
|
+
lastControlledValue: inValueWithoutRenderTimezone,
|
|
187
190
|
hasBeenModifiedSinceMount: false
|
|
188
191
|
};
|
|
189
192
|
});
|
|
193
|
+
const timezoneFromDraftValue = valueManager.getTimezone(utils, dateState.draft);
|
|
194
|
+
if (previousTimezoneProp !== timezoneProp) {
|
|
195
|
+
setPreviousTimezoneProp(timezoneProp);
|
|
196
|
+
if (timezoneProp && timezoneFromDraftValue && timezoneProp !== timezoneFromDraftValue) {
|
|
197
|
+
setDateState(prev => (0, _extends2.default)({}, prev, {
|
|
198
|
+
draft: valueManager.setTimezone(utils, timezoneProp, prev.draft)
|
|
199
|
+
}));
|
|
200
|
+
}
|
|
201
|
+
}
|
|
190
202
|
const {
|
|
191
203
|
getValidationErrorForNewValue
|
|
192
204
|
} = (0, _validation.useValidation)({
|
|
@@ -236,10 +248,10 @@ const usePickerValue = ({
|
|
|
236
248
|
setIsOpen(false);
|
|
237
249
|
}
|
|
238
250
|
});
|
|
239
|
-
if (
|
|
251
|
+
if (dateState.lastControlledValue !== inValueWithoutRenderTimezone) {
|
|
240
252
|
const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, dateState.draft, inValueWithTimezoneToRender);
|
|
241
253
|
setDateState(prev => (0, _extends2.default)({}, prev, {
|
|
242
|
-
lastControlledValue:
|
|
254
|
+
lastControlledValue: inValueWithoutRenderTimezone
|
|
243
255
|
}, isUpdateComingFromPicker ? {} : {
|
|
244
256
|
lastCommittedValue: inValueWithTimezoneToRender,
|
|
245
257
|
lastPublishedValue: inValueWithTimezoneToRender,
|
|
@@ -56,7 +56,7 @@ const useStaticPicker = _ref => {
|
|
|
56
56
|
fieldRef: undefined,
|
|
57
57
|
localeText,
|
|
58
58
|
additionalViewProps: {},
|
|
59
|
-
|
|
59
|
+
variant: displayStaticWrapperAs
|
|
60
60
|
}));
|
|
61
61
|
const Layout = slots?.layout ?? PickerStaticLayout;
|
|
62
62
|
const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {
|
|
@@ -19,6 +19,7 @@ const useValueWithTimezone = ({
|
|
|
19
19
|
timezone: timezoneProp,
|
|
20
20
|
value: valueProp,
|
|
21
21
|
defaultValue,
|
|
22
|
+
referenceDate,
|
|
22
23
|
onChange,
|
|
23
24
|
valueManager
|
|
24
25
|
}) => {
|
|
@@ -32,7 +33,16 @@ const useValueWithTimezone = ({
|
|
|
32
33
|
}
|
|
33
34
|
return valueManager.setTimezone(utils, inputTimezone, newValue);
|
|
34
35
|
});
|
|
35
|
-
|
|
36
|
+
let timezoneToRender;
|
|
37
|
+
if (timezoneProp) {
|
|
38
|
+
timezoneToRender = timezoneProp;
|
|
39
|
+
} else if (inputTimezone) {
|
|
40
|
+
timezoneToRender = inputTimezone;
|
|
41
|
+
} else if (referenceDate) {
|
|
42
|
+
timezoneToRender = utils.getTimezone(referenceDate);
|
|
43
|
+
} else {
|
|
44
|
+
timezoneToRender = 'default';
|
|
45
|
+
}
|
|
36
46
|
const valueWithTimezoneToRender = React.useMemo(() => valueManager.setTimezone(utils, timezoneToRender, inputValue), [valueManager, utils, timezoneToRender, inputValue]);
|
|
37
47
|
const handleValueChange = (0, _useEventCallback.default)((newValue, ...otherParams) => {
|
|
38
48
|
const newValueWithInputTimezone = setInputTimezone(newValue);
|
|
@@ -54,6 +64,7 @@ const useControlledValueWithTimezone = ({
|
|
|
54
64
|
timezone: timezoneProp,
|
|
55
65
|
value: valueProp,
|
|
56
66
|
defaultValue,
|
|
67
|
+
referenceDate,
|
|
57
68
|
onChange: onChangeProp,
|
|
58
69
|
valueManager
|
|
59
70
|
}) => {
|
|
@@ -71,6 +82,7 @@ const useControlledValueWithTimezone = ({
|
|
|
71
82
|
timezone: timezoneProp,
|
|
72
83
|
value: valueWithInputTimezone,
|
|
73
84
|
defaultValue: undefined,
|
|
85
|
+
referenceDate,
|
|
74
86
|
onChange,
|
|
75
87
|
valueManager
|
|
76
88
|
});
|
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.1",
|
|
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.1"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@emotion/react": "^11.9.0",
|
|
@@ -55,8 +55,8 @@
|
|
|
55
55
|
"moment": "^2.29.4",
|
|
56
56
|
"moment-hijri": "^2.1.2 || ^3.0.0",
|
|
57
57
|
"moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
|
|
58
|
-
"react": "^17.0.0 || ^18.0.0",
|
|
59
|
-
"react-dom": "^17.0.0 || ^18.0.0"
|
|
58
|
+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
59
|
+
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
60
60
|
},
|
|
61
61
|
"peerDependenciesMeta": {
|
|
62
62
|
"@emotion/react": {
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { FieldSection, PickerOwnerState } from '../../../models';
|
|
2
|
-
import type { UsePickerProps } from './usePicker.types';
|
|
3
|
-
import { PickerValueManager, UsePickerValueResponse } from './usePickerValue.types';
|
|
4
|
-
interface UsePickerOwnerStateParameters<TValue> {
|
|
5
|
-
props: UsePickerProps<TValue, any, any, any, any>;
|
|
6
|
-
pickerValueResponse: UsePickerValueResponse<TValue, FieldSection, any>;
|
|
7
|
-
valueManager: PickerValueManager<TValue, any>;
|
|
8
|
-
}
|
|
9
|
-
export declare function usePickerOwnerState<TValue>(parameters: UsePickerOwnerStateParameters<TValue>): PickerOwnerState;
|
|
10
|
-
export {};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { useUtils } from "../useUtils.js";
|
|
3
|
-
export function usePickerOwnerState(parameters) {
|
|
4
|
-
const {
|
|
5
|
-
props,
|
|
6
|
-
pickerValueResponse,
|
|
7
|
-
valueManager
|
|
8
|
-
} = parameters;
|
|
9
|
-
const utils = useUtils();
|
|
10
|
-
return React.useMemo(() => ({
|
|
11
|
-
isPickerValueEmpty: valueManager.areValuesEqual(utils, pickerValueResponse.viewProps.value, valueManager.emptyValue),
|
|
12
|
-
isPickerOpen: pickerValueResponse.open,
|
|
13
|
-
isPickerDisabled: props.disabled ?? false,
|
|
14
|
-
isPickerReadOnly: props.readOnly ?? false
|
|
15
|
-
}), [utils, valueManager, pickerValueResponse.viewProps.value, pickerValueResponse.open, props.disabled, props.readOnly]);
|
|
16
|
-
}
|