@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.
Files changed (115) hide show
  1. package/CHANGELOG.md +429 -5
  2. package/DateCalendar/DateCalendar.js +1 -0
  3. package/DatePicker/DatePickerToolbar.js +0 -12
  4. package/DateTimePicker/DateTimePickerToolbar.d.ts +2 -2
  5. package/DateTimePicker/DateTimePickerToolbar.js +6 -15
  6. package/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +0 -12
  7. package/DigitalClock/DigitalClock.js +1 -0
  8. package/MonthCalendar/MonthCalendar.js +1 -0
  9. package/MultiSectionDigitalClock/MultiSectionDigitalClock.js +1 -0
  10. package/PickersLayout/PickersLayout.js +0 -12
  11. package/PickersLayout/PickersLayout.types.d.ts +2 -2
  12. package/PickersLayout/usePickerLayout.js +1 -5
  13. package/PickersTextField/PickersInputBase/PickersInputBase.js +10 -9
  14. package/PickersTextField/PickersTextField.js +2 -2
  15. package/README.md +2 -2
  16. package/TimeClock/Clock.js +1 -0
  17. package/TimeClock/TimeClock.js +1 -0
  18. package/TimePicker/TimePickerToolbar.js +6 -15
  19. package/YearCalendar/YearCalendar.js +1 -0
  20. package/hooks/useSplitFieldProps.d.ts +3 -3
  21. package/index.js +1 -1
  22. package/internals/components/PickerProvider.d.ts +26 -0
  23. package/internals/components/PickerProvider.js +3 -1
  24. package/internals/components/PickersToolbar.js +2 -4
  25. package/internals/hooks/useDesktopPicker/useDesktopPicker.js +1 -1
  26. package/internals/hooks/useField/useField.types.d.ts +2 -2
  27. package/internals/hooks/useField/useField.utils.d.ts +2 -2
  28. package/internals/hooks/useField/useFieldState.js +1 -0
  29. package/internals/hooks/useField/useFieldV7TextField.js +2 -1
  30. package/internals/hooks/useMobilePicker/useMobilePicker.js +1 -1
  31. package/internals/hooks/usePicker/usePicker.d.ts +1 -1
  32. package/internals/hooks/usePicker/usePicker.js +9 -12
  33. package/internals/hooks/usePicker/usePicker.types.d.ts +6 -6
  34. package/internals/hooks/usePicker/usePickerLayoutProps.d.ts +6 -7
  35. package/internals/hooks/usePicker/usePickerLayoutProps.js +2 -5
  36. package/internals/hooks/usePicker/usePickerProvider.d.ts +20 -4
  37. package/internals/hooks/usePicker/usePickerProvider.js +61 -5
  38. package/internals/hooks/usePicker/usePickerValue.d.ts +1 -1
  39. package/internals/hooks/usePicker/usePickerValue.js +18 -6
  40. package/internals/hooks/usePicker/usePickerValue.types.d.ts +8 -7
  41. package/internals/hooks/usePicker/usePickerViews.d.ts +1 -0
  42. package/internals/hooks/usePicker/usePickerViews.js +1 -0
  43. package/internals/hooks/useStaticPicker/useStaticPicker.js +1 -1
  44. package/internals/hooks/useValueWithTimezone.d.ts +19 -15
  45. package/internals/hooks/useValueWithTimezone.js +13 -1
  46. package/internals/index.d.ts +1 -1
  47. package/internals/models/common.d.ts +2 -1
  48. package/internals/models/props/toolbar.d.ts +1 -2
  49. package/internals/utils/date-utils.d.ts +2 -2
  50. package/models/common.d.ts +1 -0
  51. package/models/fields.d.ts +0 -1
  52. package/models/pickers.d.ts +18 -0
  53. package/modern/DateCalendar/DateCalendar.js +1 -0
  54. package/modern/DatePicker/DatePickerToolbar.js +0 -12
  55. package/modern/DateTimePicker/DateTimePickerToolbar.js +6 -15
  56. package/modern/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +0 -12
  57. package/modern/DigitalClock/DigitalClock.js +1 -0
  58. package/modern/MonthCalendar/MonthCalendar.js +1 -0
  59. package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js +1 -0
  60. package/modern/PickersLayout/PickersLayout.js +0 -12
  61. package/modern/PickersLayout/usePickerLayout.js +1 -5
  62. package/modern/PickersTextField/PickersInputBase/PickersInputBase.js +10 -9
  63. package/modern/PickersTextField/PickersTextField.js +2 -2
  64. package/modern/TimeClock/Clock.js +1 -0
  65. package/modern/TimeClock/TimeClock.js +1 -0
  66. package/modern/TimePicker/TimePickerToolbar.js +6 -15
  67. package/modern/YearCalendar/YearCalendar.js +1 -0
  68. package/modern/index.js +1 -1
  69. package/modern/internals/components/PickerProvider.js +3 -1
  70. package/modern/internals/components/PickersToolbar.js +2 -4
  71. package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.js +1 -1
  72. package/modern/internals/hooks/useField/useFieldState.js +1 -0
  73. package/modern/internals/hooks/useField/useFieldV7TextField.js +2 -1
  74. package/modern/internals/hooks/useMobilePicker/useMobilePicker.js +1 -1
  75. package/modern/internals/hooks/usePicker/usePicker.js +9 -12
  76. package/modern/internals/hooks/usePicker/usePickerLayoutProps.js +2 -5
  77. package/modern/internals/hooks/usePicker/usePickerProvider.js +61 -5
  78. package/modern/internals/hooks/usePicker/usePickerValue.js +18 -6
  79. package/modern/internals/hooks/usePicker/usePickerViews.js +1 -0
  80. package/modern/internals/hooks/useStaticPicker/useStaticPicker.js +1 -1
  81. package/modern/internals/hooks/useValueWithTimezone.js +13 -1
  82. package/node/DateCalendar/DateCalendar.js +1 -0
  83. package/node/DatePicker/DatePickerToolbar.js +0 -12
  84. package/node/DateTimePicker/DateTimePickerToolbar.js +6 -15
  85. package/node/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +0 -12
  86. package/node/DigitalClock/DigitalClock.js +1 -0
  87. package/node/MonthCalendar/MonthCalendar.js +1 -0
  88. package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js +1 -0
  89. package/node/PickersLayout/PickersLayout.js +0 -12
  90. package/node/PickersLayout/usePickerLayout.js +1 -5
  91. package/node/PickersTextField/PickersInputBase/PickersInputBase.js +10 -9
  92. package/node/PickersTextField/PickersTextField.js +2 -2
  93. package/node/TimeClock/Clock.js +1 -0
  94. package/node/TimeClock/TimeClock.js +1 -0
  95. package/node/TimePicker/TimePickerToolbar.js +6 -15
  96. package/node/YearCalendar/YearCalendar.js +1 -0
  97. package/node/index.js +1 -1
  98. package/node/internals/components/PickerProvider.js +3 -1
  99. package/node/internals/components/PickersToolbar.js +2 -4
  100. package/node/internals/hooks/useDesktopPicker/useDesktopPicker.js +1 -1
  101. package/node/internals/hooks/useField/useFieldState.js +1 -0
  102. package/node/internals/hooks/useField/useFieldV7TextField.js +2 -1
  103. package/node/internals/hooks/useMobilePicker/useMobilePicker.js +1 -1
  104. package/node/internals/hooks/usePicker/usePicker.js +9 -12
  105. package/node/internals/hooks/usePicker/usePickerLayoutProps.js +2 -5
  106. package/node/internals/hooks/usePicker/usePickerProvider.js +64 -5
  107. package/node/internals/hooks/usePicker/usePickerValue.js +18 -6
  108. package/node/internals/hooks/usePicker/usePickerViews.js +1 -0
  109. package/node/internals/hooks/useStaticPicker/useStaticPicker.js +1 -1
  110. package/node/internals/hooks/useValueWithTimezone.js +13 -1
  111. package/package.json +4 -4
  112. package/internals/hooks/usePicker/usePickerOwnerState.d.ts +0 -10
  113. package/internals/hooks/usePicker/usePickerOwnerState.js +0 -16
  114. package/modern/internals/hooks/usePicker/usePickerOwnerState.js +0 -16
  115. 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: muiFormControl.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,
@@ -230,6 +230,7 @@ function Clock(inProps) {
230
230
  setTime(event, 'finish');
231
231
  isMoving.current = false;
232
232
  }
233
+ event.preventDefault();
233
234
  };
234
235
  const handleMouseMove = event => {
235
236
  // event.buttons & PRIMARY_MOUSE_BUTTON
@@ -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", "disabled", "readOnly", "className"];
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
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-date-pickers v8.0.0-alpha.0
2
+ * @mui/x-date-pickers v8.0.0-alpha.1
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -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
- wrapperVariant: 'desktop'
77
+ variant: 'desktop'
78
78
  }));
79
79
  const InputAdornment = slots.inputAdornment ?? _InputAdornment.default;
80
80
  const _useSlotProps = (0, _useSlotProps3.default)({
@@ -49,6 +49,7 @@ const useFieldState = params => {
49
49
  timezone: timezoneProp,
50
50
  value: valueProp,
51
51
  defaultValue,
52
+ referenceDate: referenceDateProp,
52
53
  onChange,
53
54
  valueManager
54
55
  });
@@ -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((0, _utils.getActiveElement)(document)) != null;
211
+ const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement(activeElement) != null;
211
212
  if (!isFocusInsideASection) {
212
213
  setSelectedSections(sectionOrder.startIndex);
213
214
  }
@@ -66,7 +66,7 @@ const useMobilePicker = _ref => {
66
66
  localeText,
67
67
  autoFocusView: true,
68
68
  additionalViewProps: {},
69
- wrapperVariant: 'mobile'
69
+ variant: 'mobile'
70
70
  }));
71
71
  const Field = slots.field;
72
72
  const fieldProps = (0, _useSlotProps.default)({
@@ -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
- wrapperVariant,
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
- wrapperVariant,
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
- wrapperVariant,
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
- ownerState: pickerOwnerState,
59
- localeText
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: pickerOwnerState
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
- wrapperVariant
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
- ownerState,
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
- }), [pickerValueResponse.actions.onOpen, pickerValueResponse.actions.onClose, pickerValueResponse.open]);
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
- wrapperVariant,
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 = wrapperVariant === 'desktop',
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: inValueWithTimezoneToRender,
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 (inValueWithTimezoneToRender !== undefined && (dateState.lastControlledValue === undefined || !valueManager.areValuesEqual(utils, dateState.lastControlledValue, inValueWithTimezoneToRender))) {
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: inValueWithTimezoneToRender
254
+ lastControlledValue: inValueWithoutRenderTimezone
243
255
  }, isUpdateComingFromPicker ? {} : {
244
256
  lastCommittedValue: inValueWithTimezoneToRender,
245
257
  lastPublishedValue: inValueWithTimezoneToRender,
@@ -141,6 +141,7 @@ const usePickerViews = ({
141
141
  };
142
142
  return {
143
143
  hasUIView,
144
+ views,
144
145
  shouldRestoreFocus,
145
146
  layoutProps,
146
147
  renderCurrentView: () => {
@@ -56,7 +56,7 @@ const useStaticPicker = _ref => {
56
56
  fieldRef: undefined,
57
57
  localeText,
58
58
  additionalViewProps: {},
59
- wrapperVariant: displayStaticWrapperAs
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
- const timezoneToRender = timezoneProp ?? inputTimezone ?? 'default';
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.0",
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.0"
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
- }