@mui/x-date-pickers 6.11.1 → 6.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (197) hide show
  1. package/AdapterDateFns/AdapterDateFns.d.ts +2 -2
  2. package/AdapterDateFnsJalali/AdapterDateFnsJalali.d.ts +2 -2
  3. package/AdapterDayjs/AdapterDayjs.d.ts +2 -2
  4. package/AdapterLuxon/AdapterLuxon.d.ts +2 -2
  5. package/AdapterMoment/AdapterMoment.d.ts +2 -2
  6. package/AdapterMomentHijri/AdapterMomentHijri.d.ts +2 -2
  7. package/AdapterMomentJalaali/AdapterMomentJalaali.d.ts +2 -2
  8. package/CHANGELOG.md +154 -31
  9. package/DateCalendar/DateCalendar.js +4 -4
  10. package/DateCalendar/DateCalendar.types.d.ts +2 -2
  11. package/DateCalendar/DayCalendar.js +2 -2
  12. package/DatePicker/DatePicker.js +2 -2
  13. package/DateTimePicker/DateTimePicker.js +2 -2
  14. package/DesktopDatePicker/DesktopDatePicker.js +2 -2
  15. package/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
  16. package/DesktopTimePicker/DesktopTimePicker.js +5 -0
  17. package/DigitalClock/DigitalClock.js +3 -1
  18. package/MobileDatePicker/MobileDatePicker.js +2 -2
  19. package/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  20. package/MobileTimePicker/MobileTimePicker.js +5 -0
  21. package/MonthCalendar/PickersMonth.js +1 -1
  22. package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +3 -1
  23. package/PickersShortcuts/PickersShortcuts.d.ts +2 -1
  24. package/PickersShortcuts/PickersShortcuts.js +9 -4
  25. package/PickersShortcuts/index.d.ts +1 -1
  26. package/StaticDatePicker/StaticDatePicker.js +2 -2
  27. package/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  28. package/StaticTimePicker/StaticTimePicker.js +5 -0
  29. package/TimePicker/TimePicker.js +5 -0
  30. package/YearCalendar/YearCalendar.js +5 -2
  31. package/index.js +1 -1
  32. package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +10 -11
  33. package/internals/components/PickersPopper.d.ts +7 -4
  34. package/internals/components/PickersPopper.js +65 -32
  35. package/internals/components/PickersToolbar.js +13 -13
  36. package/internals/hooks/useDefaultReduceAnimations.d.ts +1 -1
  37. package/internals/hooks/useDefaultReduceAnimations.js +7 -2
  38. package/internals/hooks/useDesktopPicker/useDesktopPicker.js +4 -2
  39. package/internals/hooks/useField/useField.js +6 -6
  40. package/internals/hooks/useField/useField.utils.d.ts +0 -1
  41. package/internals/hooks/useField/useField.utils.js +0 -48
  42. package/internals/hooks/useField/useFieldState.js +5 -25
  43. package/internals/hooks/usePicker/usePickerValue.js +11 -3
  44. package/internals/hooks/usePicker/usePickerValue.types.d.ts +3 -5
  45. package/internals/hooks/usePicker/usePickerViews.d.ts +5 -0
  46. package/internals/hooks/usePicker/usePickerViews.js +1 -1
  47. package/internals/hooks/useValidation.d.ts +2 -4
  48. package/internals/hooks/useValueWithTimezone.js +2 -2
  49. package/internals/hooks/useViews.js +1 -1
  50. package/legacy/DateCalendar/DateCalendar.js +4 -4
  51. package/legacy/DateCalendar/DayCalendar.js +2 -2
  52. package/legacy/DatePicker/DatePicker.js +2 -2
  53. package/legacy/DateTimePicker/DateTimePicker.js +2 -2
  54. package/legacy/DesktopDatePicker/DesktopDatePicker.js +2 -2
  55. package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
  56. package/legacy/DesktopTimePicker/DesktopTimePicker.js +5 -0
  57. package/legacy/DigitalClock/DigitalClock.js +3 -1
  58. package/legacy/MobileDatePicker/MobileDatePicker.js +2 -2
  59. package/legacy/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  60. package/legacy/MobileTimePicker/MobileTimePicker.js +5 -0
  61. package/legacy/MonthCalendar/PickersMonth.js +1 -1
  62. package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +3 -1
  63. package/legacy/PickersShortcuts/PickersShortcuts.js +7 -4
  64. package/legacy/StaticDatePicker/StaticDatePicker.js +2 -2
  65. package/legacy/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  66. package/legacy/StaticTimePicker/StaticTimePicker.js +5 -0
  67. package/legacy/TimePicker/TimePicker.js +5 -0
  68. package/legacy/YearCalendar/YearCalendar.js +5 -2
  69. package/legacy/index.js +1 -1
  70. package/legacy/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +10 -15
  71. package/legacy/internals/components/PickersPopper.js +61 -32
  72. package/legacy/internals/components/PickersToolbar.js +11 -14
  73. package/legacy/internals/hooks/useDefaultReduceAnimations.js +7 -2
  74. package/legacy/internals/hooks/useDesktopPicker/useDesktopPicker.js +4 -2
  75. package/legacy/internals/hooks/useField/useField.js +6 -6
  76. package/legacy/internals/hooks/useField/useField.utils.js +0 -52
  77. package/legacy/internals/hooks/useField/useFieldState.js +4 -24
  78. package/legacy/internals/hooks/usePicker/usePickerValue.js +11 -3
  79. package/legacy/internals/hooks/usePicker/usePickerViews.js +1 -1
  80. package/legacy/internals/hooks/useValueWithTimezone.js +2 -2
  81. package/legacy/internals/hooks/useViews.js +1 -1
  82. package/legacy/models/index.js +2 -1
  83. package/legacy/models/pickers.js +1 -0
  84. package/legacy/tests/describeAdapters/describeAdapters.js +1 -1
  85. package/legacy/tests/describeGregorianAdapter/testCalculations.js +1 -1
  86. package/legacy/tests/describeGregorianAdapter/testLocalization.js +1 -1
  87. package/legacy/tests/describeValidation/testDayViewValidation.js +1 -1
  88. package/legacy/tests/describeValidation/testMinutesViewValidation.js +2 -2
  89. package/legacy/tests/describeValidation/testMonthViewValidation.js +1 -1
  90. package/legacy/tests/describeValidation/testTextFieldValidation.js +1 -1
  91. package/legacy/tests/describeValidation/testYearViewValidation.js +1 -1
  92. package/legacy/tests/describeValue/describeValue.js +1 -1
  93. package/legacy/tests/describeValue/testControlledUnControlled.js +2 -2
  94. package/legacy/tests/describeValue/testPickerActionBar.js +1 -2
  95. package/legacy/tests/describeValue/testPickerOpenCloseLifeCycle.js +1 -1
  96. package/legacy/tests/describeValue/testShortcuts.js +1 -1
  97. package/models/adapters.d.ts +2 -1
  98. package/models/index.d.ts +1 -0
  99. package/models/index.js +2 -1
  100. package/models/pickers.d.ts +9 -0
  101. package/models/pickers.js +1 -0
  102. package/modern/DateCalendar/DateCalendar.js +2 -2
  103. package/modern/DatePicker/DatePicker.js +2 -2
  104. package/modern/DateTimePicker/DateTimePicker.js +2 -2
  105. package/modern/DesktopDatePicker/DesktopDatePicker.js +2 -2
  106. package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
  107. package/modern/DesktopTimePicker/DesktopTimePicker.js +5 -0
  108. package/modern/DigitalClock/DigitalClock.js +3 -1
  109. package/modern/MobileDatePicker/MobileDatePicker.js +2 -2
  110. package/modern/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  111. package/modern/MobileTimePicker/MobileTimePicker.js +5 -0
  112. package/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +3 -1
  113. package/modern/PickersShortcuts/PickersShortcuts.js +9 -4
  114. package/modern/StaticDatePicker/StaticDatePicker.js +2 -2
  115. package/modern/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  116. package/modern/StaticTimePicker/StaticTimePicker.js +5 -0
  117. package/modern/TimePicker/TimePicker.js +5 -0
  118. package/modern/YearCalendar/YearCalendar.js +4 -1
  119. package/modern/index.js +1 -1
  120. package/modern/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +10 -11
  121. package/modern/internals/components/PickersPopper.js +63 -30
  122. package/modern/internals/components/PickersToolbar.js +9 -12
  123. package/modern/internals/hooks/useDefaultReduceAnimations.js +7 -2
  124. package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.js +4 -2
  125. package/modern/internals/hooks/useField/useField.utils.js +0 -48
  126. package/modern/internals/hooks/useField/useFieldState.js +4 -24
  127. package/modern/internals/hooks/usePicker/usePickerValue.js +10 -2
  128. package/modern/models/index.js +2 -1
  129. package/modern/models/pickers.js +1 -0
  130. package/modern/tests/describeAdapters/describeAdapters.js +1 -1
  131. package/modern/tests/describeGregorianAdapter/testCalculations.js +1 -1
  132. package/modern/tests/describeGregorianAdapter/testLocalization.js +1 -1
  133. package/modern/tests/describeValidation/testDayViewValidation.js +1 -1
  134. package/modern/tests/describeValidation/testMinutesViewValidation.js +2 -2
  135. package/modern/tests/describeValidation/testMonthViewValidation.js +1 -1
  136. package/modern/tests/describeValidation/testTextFieldValidation.js +1 -1
  137. package/modern/tests/describeValidation/testYearViewValidation.js +1 -1
  138. package/modern/tests/describeValue/describeValue.js +1 -1
  139. package/modern/tests/describeValue/testControlledUnControlled.js +1 -1
  140. package/modern/tests/describeValue/testPickerActionBar.js +1 -2
  141. package/modern/tests/describeValue/testPickerOpenCloseLifeCycle.js +1 -1
  142. package/modern/tests/describeValue/testShortcuts.js +1 -1
  143. package/node/DateCalendar/DateCalendar.js +2 -2
  144. package/node/DatePicker/DatePicker.js +2 -2
  145. package/node/DateTimePicker/DateTimePicker.js +2 -2
  146. package/node/DesktopDatePicker/DesktopDatePicker.js +2 -2
  147. package/node/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
  148. package/node/DesktopTimePicker/DesktopTimePicker.js +5 -0
  149. package/node/DigitalClock/DigitalClock.js +3 -1
  150. package/node/MobileDatePicker/MobileDatePicker.js +2 -2
  151. package/node/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  152. package/node/MobileTimePicker/MobileTimePicker.js +5 -0
  153. package/node/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +3 -1
  154. package/node/PickersShortcuts/PickersShortcuts.js +9 -4
  155. package/node/StaticDatePicker/StaticDatePicker.js +2 -2
  156. package/node/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  157. package/node/StaticTimePicker/StaticTimePicker.js +5 -0
  158. package/node/TimePicker/TimePicker.js +5 -0
  159. package/node/YearCalendar/YearCalendar.js +4 -1
  160. package/node/index.js +1 -1
  161. package/node/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +10 -11
  162. package/node/internals/components/PickersPopper.js +63 -30
  163. package/node/internals/components/PickersToolbar.js +9 -12
  164. package/node/internals/hooks/useDefaultReduceAnimations.js +9 -4
  165. package/node/internals/hooks/useDesktopPicker/useDesktopPicker.js +4 -2
  166. package/node/internals/hooks/useField/useField.utils.js +1 -50
  167. package/node/internals/hooks/useField/useFieldState.js +3 -23
  168. package/node/internals/hooks/usePicker/usePickerValue.js +10 -2
  169. package/node/models/index.js +11 -0
  170. package/node/models/pickers.js +5 -0
  171. package/node/tests/describeAdapters/describeAdapters.js +3 -3
  172. package/node/tests/describeGregorianAdapter/testCalculations.js +2 -2
  173. package/node/tests/describeGregorianAdapter/testLocalization.js +4 -4
  174. package/node/tests/describeValidation/testDayViewValidation.js +33 -33
  175. package/node/tests/describeValidation/testMinutesViewValidation.js +14 -14
  176. package/node/tests/describeValidation/testMonthViewValidation.js +22 -22
  177. package/node/tests/describeValidation/testTextFieldValidation.js +54 -54
  178. package/node/tests/describeValidation/testYearViewValidation.js +18 -18
  179. package/node/tests/describeValue/describeValue.js +2 -2
  180. package/node/tests/describeValue/testControlledUnControlled.js +3 -3
  181. package/node/tests/describeValue/testPickerActionBar.js +10 -11
  182. package/node/tests/describeValue/testPickerOpenCloseLifeCycle.js +10 -10
  183. package/node/tests/describeValue/testShortcuts.js +6 -6
  184. package/package.json +3 -3
  185. package/tests/describeAdapters/describeAdapters.js +1 -1
  186. package/tests/describeGregorianAdapter/testCalculations.js +1 -1
  187. package/tests/describeGregorianAdapter/testLocalization.js +1 -1
  188. package/tests/describeValidation/testDayViewValidation.js +1 -1
  189. package/tests/describeValidation/testMinutesViewValidation.js +2 -2
  190. package/tests/describeValidation/testMonthViewValidation.js +1 -1
  191. package/tests/describeValidation/testTextFieldValidation.js +1 -1
  192. package/tests/describeValidation/testYearViewValidation.js +1 -1
  193. package/tests/describeValue/describeValue.js +1 -1
  194. package/tests/describeValue/testControlledUnControlled.js +2 -2
  195. package/tests/describeValue/testPickerActionBar.js +1 -2
  196. package/tests/describeValue/testPickerOpenCloseLifeCycle.js +1 -1
  197. package/tests/describeValue/testShortcuts.js +1 -1
@@ -305,8 +305,8 @@ MobileDateTimePicker.propTypes = {
305
305
  orientation: PropTypes.oneOf(['landscape', 'portrait']),
306
306
  readOnly: PropTypes.bool,
307
307
  /**
308
- * Disable heavy animations.
309
- * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
308
+ * If `true`, disable heavy animations.
309
+ * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
310
310
  */
311
311
  reduceAnimations: PropTypes.bool,
312
312
  /**
@@ -232,6 +232,11 @@ MobileTimePicker.propTypes = {
232
232
  */
233
233
  orientation: PropTypes.oneOf(['landscape', 'portrait']),
234
234
  readOnly: PropTypes.bool,
235
+ /**
236
+ * If `true`, disable heavy animations.
237
+ * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
238
+ */
239
+ reduceAnimations: PropTypes.bool,
235
240
  /**
236
241
  * The currently selected sections.
237
242
  * This prop accept four formats:
@@ -100,7 +100,7 @@ export const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProp
100
100
  useEnhancedEffect(() => {
101
101
  if (autoFocus) {
102
102
  var _ref$current;
103
- (_ref$current = ref.current) == null ? void 0 : _ref$current.focus();
103
+ (_ref$current = ref.current) == null || _ref$current.focus();
104
104
  }
105
105
  }, [autoFocus]);
106
106
  return /*#__PURE__*/_jsx(PickersMonthRoot, _extends({
@@ -33,7 +33,9 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
33
33
  width: 56,
34
34
  padding: 0,
35
35
  overflow: 'hidden',
36
- scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto',
36
+ '@media (prefers-reduced-motion: no-preference)': {
37
+ scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto'
38
+ },
37
39
  '&:hover': {
38
40
  overflowY: 'auto'
39
41
  },
@@ -7,6 +7,7 @@ export interface PickersShortcutsItem<TValue> {
7
7
  label: string;
8
8
  getValue: (params: PickersShortcutsItemGetValueParams<TValue>) => TValue;
9
9
  }
10
+ export type PickersShortcutsItemContext = Omit<PickersShortcutsItem<unknown>, 'getValue'>;
10
11
  export type PickerShortcutChangeImportance = 'set' | 'accept';
11
12
  export interface ExportedPickersShortcutProps<TValue> extends Omit<ListProps, 'onChange'> {
12
13
  /**
@@ -25,7 +26,7 @@ export interface ExportedPickersShortcutProps<TValue> extends Omit<ListProps, 'o
25
26
  }
26
27
  export interface PickersShortcutsProps<TValue> extends ExportedPickersShortcutProps<TValue> {
27
28
  isLandscape: boolean;
28
- onChange: (newValue: TValue, changeImportance?: PickerShortcutChangeImportance) => void;
29
+ onChange: (newValue: TValue, changeImportance?: PickerShortcutChangeImportance, shortcut?: PickersShortcutsItemContext) => void;
29
30
  isValid: (value: TValue) => boolean;
30
31
  }
31
32
  declare function PickersShortcuts<TValue>(props: PickersShortcutsProps<TValue>): React.JSX.Element | null;
@@ -1,6 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
- const _excluded = ["items", "changeImportance", "isLandscape", "onChange", "isValid"];
3
+ const _excluded = ["items", "changeImportance", "isLandscape", "onChange", "isValid"],
4
+ _excluded2 = ["getValue"];
4
5
  import * as React from 'react';
5
6
  import PropTypes from 'prop-types';
6
7
  import List from '@mui/material/List';
@@ -19,14 +20,18 @@ function PickersShortcuts(props) {
19
20
  if (items == null || items.length === 0) {
20
21
  return null;
21
22
  }
22
- const resolvedItems = items.map(item => {
23
- const newValue = item.getValue({
23
+ const resolvedItems = items.map(_ref => {
24
+ let {
25
+ getValue
26
+ } = _ref,
27
+ item = _objectWithoutPropertiesLoose(_ref, _excluded2);
28
+ const newValue = getValue({
24
29
  isValid
25
30
  });
26
31
  return {
27
32
  label: item.label,
28
33
  onClick: () => {
29
- onChange(newValue, changeImportance);
34
+ onChange(newValue, changeImportance, item);
30
35
  },
31
36
  disabled: !isValid(newValue)
32
37
  };
@@ -1,2 +1,2 @@
1
1
  export { PickersShortcuts } from './PickersShortcuts';
2
- export type { PickersShortcutsProps, PickersShortcutsItem, PickerShortcutChangeImportance, } from './PickersShortcuts';
2
+ export type { PickersShortcutsProps, PickersShortcutsItem, PickersShortcutsItemContext, PickerShortcutChangeImportance, } from './PickersShortcuts';
@@ -201,8 +201,8 @@ StaticDatePicker.propTypes = {
201
201
  orientation: PropTypes.oneOf(['landscape', 'portrait']),
202
202
  readOnly: PropTypes.bool,
203
203
  /**
204
- * Disable heavy animations.
205
- * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
204
+ * If `true`, disable heavy animations.
205
+ * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
206
206
  */
207
207
  reduceAnimations: PropTypes.bool,
208
208
  /**
@@ -249,8 +249,8 @@ StaticDateTimePicker.propTypes = {
249
249
  orientation: PropTypes.oneOf(['landscape', 'portrait']),
250
250
  readOnly: PropTypes.bool,
251
251
  /**
252
- * Disable heavy animations.
253
- * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
252
+ * If `true`, disable heavy animations.
253
+ * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
254
254
  */
255
255
  reduceAnimations: PropTypes.bool,
256
256
  /**
@@ -175,6 +175,11 @@ StaticTimePicker.propTypes = {
175
175
  */
176
176
  orientation: PropTypes.oneOf(['landscape', 'portrait']),
177
177
  readOnly: PropTypes.bool,
178
+ /**
179
+ * If `true`, disable heavy animations.
180
+ * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
181
+ */
182
+ reduceAnimations: PropTypes.bool,
178
183
  /**
179
184
  * Disable specific clock time.
180
185
  * @param {number} clockValue The value to check.
@@ -213,6 +213,11 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
213
213
  */
214
214
  orientation: PropTypes.oneOf(['landscape', 'portrait']),
215
215
  readOnly: PropTypes.bool,
216
+ /**
217
+ * If `true`, disable heavy animations.
218
+ * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
219
+ */
220
+ reduceAnimations: PropTypes.bool,
216
221
  /**
217
222
  * The currently selected sections.
218
223
  * This prop accept four formats:
@@ -51,7 +51,10 @@ const YearCalendarRoot = styled('div', {
51
51
  height: '100%',
52
52
  padding: '0 4px',
53
53
  width: 320,
54
- maxHeight: 304
54
+ maxHeight: 304,
55
+ // avoid padding increasing width over defined
56
+ boxSizing: 'border-box',
57
+ position: 'relative'
55
58
  });
56
59
  export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(inProps, ref) {
57
60
  const props = useYearCalendarDefaultizedProps(inProps, 'MuiYearCalendar');
@@ -157,7 +160,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
157
160
  if (!isYearDisabled(utils.setYear(value != null ? value : referenceDate, year))) {
158
161
  setFocusedYear(year);
159
162
  changeHasFocus(true);
160
- onYearFocus == null ? void 0 : onYearFocus(year);
163
+ onYearFocus == null || onYearFocus(year);
161
164
  }
162
165
  });
163
166
  React.useEffect(() => {
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-date-pickers v6.11.1
2
+ * @mui/x-date-pickers v6.12.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -87,21 +87,20 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
87
87
  goTo: onGoToPrevious,
88
88
  label: previousLabel
89
89
  };
90
- const [leftProps, rightProps] = isRTL ? [nextProps, previousProps] : [previousProps, nextProps];
91
90
  const PreviousIconButton = (_slots$previousIconBu = slots == null ? void 0 : slots.previousIconButton) != null ? _slots$previousIconBu : PickersArrowSwitcherButton;
92
91
  const previousIconButtonProps = useSlotProps({
93
92
  elementType: PreviousIconButton,
94
93
  externalSlotProps: slotProps == null ? void 0 : slotProps.previousIconButton,
95
94
  additionalProps: {
96
95
  size: 'medium',
97
- title: leftProps.label,
98
- 'aria-label': leftProps.label,
99
- disabled: leftProps.isDisabled,
96
+ title: previousProps.label,
97
+ 'aria-label': previousProps.label,
98
+ disabled: previousProps.isDisabled,
100
99
  edge: 'end',
101
- onClick: leftProps.goTo
100
+ onClick: previousProps.goTo
102
101
  },
103
102
  ownerState: _extends({}, ownerState, {
104
- hidden: leftProps.isHidden
103
+ hidden: previousProps.isHidden
105
104
  }),
106
105
  className: classes.button
107
106
  });
@@ -111,14 +110,14 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
111
110
  externalSlotProps: slotProps == null ? void 0 : slotProps.nextIconButton,
112
111
  additionalProps: {
113
112
  size: 'medium',
114
- title: rightProps.label,
115
- 'aria-label': rightProps.label,
116
- disabled: rightProps.isDisabled,
113
+ title: nextProps.label,
114
+ 'aria-label': nextProps.label,
115
+ disabled: nextProps.isDisabled,
117
116
  edge: 'start',
118
- onClick: rightProps.goTo
117
+ onClick: nextProps.goTo
119
118
  },
120
119
  ownerState: _extends({}, ownerState, {
121
- hidden: rightProps.isHidden
120
+ hidden: nextProps.isHidden
122
121
  }),
123
122
  className: classes.button
124
123
  });
@@ -7,6 +7,9 @@ import { TransitionProps as MuiTransitionProps } from '@mui/material/transitions
7
7
  import { PickersPopperClasses } from './pickersPopperClasses';
8
8
  import { UncapitalizeObjectKeys } from '../utils/slots-migration';
9
9
  import { UsePickerValueActions } from '../hooks/usePicker/usePickerValue.types';
10
+ interface PickersPopperOwnerState extends PickerPopperProps {
11
+ placement: PopperPlacementType;
12
+ }
10
13
  export interface PickersPopperSlotsComponent {
11
14
  /**
12
15
  * Custom component for the paper rendered inside the desktop picker's Popper.
@@ -15,7 +18,7 @@ export interface PickersPopperSlotsComponent {
15
18
  DesktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
16
19
  /**
17
20
  * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
18
- * @default Grow from '@mui/material'.
21
+ * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
19
22
  */
20
23
  DesktopTransition?: React.JSXElementConstructor<MuiTransitionProps>;
21
24
  /**
@@ -33,9 +36,7 @@ export interface PickersPopperSlotsComponentsProps {
33
36
  /**
34
37
  * Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component.
35
38
  */
36
- desktopPaper?: SlotComponentProps<typeof MuiPaper, {}, PickerPopperProps & {
37
- placement: PopperPlacementType | undefined;
38
- }>;
39
+ desktopPaper?: SlotComponentProps<typeof MuiPaper, {}, PickersPopperOwnerState>;
39
40
  /**
40
41
  * Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component.
41
42
  */
@@ -61,5 +62,7 @@ export interface PickerPopperProps extends UsePickerValueActions {
61
62
  slotProps?: PickersPopperSlotsComponentsProps;
62
63
  classes?: Partial<PickersPopperClasses>;
63
64
  shouldRestoreFocus?: () => boolean;
65
+ reduceAnimations?: boolean;
64
66
  }
65
67
  export declare function PickersPopper(inProps: PickerPopperProps): React.JSX.Element;
68
+ export {};
@@ -1,7 +1,10 @@
1
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
1
2
  import _extends from "@babel/runtime/helpers/esm/extends";
3
+ const _excluded = ["PaperComponent", "popperPlacement", "ownerState", "children", "paperSlotProps", "paperClasses", "onPaperClick", "onPaperTouchStart"];
2
4
  import * as React from 'react';
3
5
  import { useSlotProps } from '@mui/base/utils';
4
6
  import Grow from '@mui/material/Grow';
7
+ import Fade from '@mui/material/Fade';
5
8
  import MuiPaper from '@mui/material/Paper';
6
9
  import MuiPopper from '@mui/material/Popper';
7
10
  import MuiTrapFocus from '@mui/material/Unstable_TrapFocus';
@@ -9,6 +12,7 @@ import { unstable_useForkRef as useForkRef, unstable_useEventCallback as useEven
9
12
  import { styled, useThemeProps } from '@mui/material/styles';
10
13
  import { getPickersPopperUtilityClass } from './pickersPopperClasses';
11
14
  import { getActiveElement } from '../utils/utils';
15
+ import { useDefaultReduceAnimations } from '../hooks/useDefaultReduceAnimations';
12
16
  import { jsx as _jsx } from "react/jsx-runtime";
13
17
  const useUtilityClasses = ownerState => {
14
18
  const {
@@ -36,9 +40,9 @@ const PickersPopperPaper = styled(MuiPaper, {
36
40
  })(({
37
41
  ownerState
38
42
  }) => _extends({
39
- transformOrigin: 'top center',
40
- outline: 0
41
- }, ownerState.placement === 'top' && {
43
+ outline: 0,
44
+ transformOrigin: 'top center'
45
+ }, ownerState.placement.includes('top') && {
42
46
  transformOrigin: 'bottom center'
43
47
  }));
44
48
  function clickedRootScrollbar(event, doc) {
@@ -156,6 +160,49 @@ function useClickAwayListener(active, onClickAway) {
156
160
  }, [active, handleClickAway]);
157
161
  return [nodeRef, handleSynthetic, handleSynthetic];
158
162
  }
163
+ const PickersPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
164
+ const {
165
+ PaperComponent,
166
+ popperPlacement,
167
+ ownerState: inOwnerState,
168
+ children,
169
+ paperSlotProps,
170
+ paperClasses,
171
+ onPaperClick,
172
+ onPaperTouchStart
173
+ // picks up the style props provided by `Transition`
174
+ // https://mui.com/material-ui/transitions/#child-requirement
175
+ } = props,
176
+ other = _objectWithoutPropertiesLoose(props, _excluded);
177
+ const ownerState = _extends({}, inOwnerState, {
178
+ placement: popperPlacement
179
+ });
180
+ const paperProps = useSlotProps({
181
+ elementType: PaperComponent,
182
+ externalSlotProps: paperSlotProps,
183
+ additionalProps: {
184
+ tabIndex: -1,
185
+ elevation: 8,
186
+ ref
187
+ },
188
+ className: paperClasses,
189
+ ownerState
190
+ });
191
+ return /*#__PURE__*/_jsx(PaperComponent, _extends({}, other, paperProps, {
192
+ onClick: event => {
193
+ var _paperProps$onClick;
194
+ onPaperClick(event);
195
+ (_paperProps$onClick = paperProps.onClick) == null || _paperProps$onClick.call(paperProps, event);
196
+ },
197
+ onTouchStart: event => {
198
+ var _paperProps$onTouchSt;
199
+ onPaperTouchStart(event);
200
+ (_paperProps$onTouchSt = paperProps.onTouchStart) == null || _paperProps$onTouchSt.call(paperProps, event);
201
+ },
202
+ ownerState: ownerState,
203
+ children: children
204
+ }));
205
+ });
159
206
  export function PickersPopper(inProps) {
160
207
  var _slots$desktopTransit, _slots$desktopTrapFoc, _slots$desktopPaper, _slots$popper;
161
208
  const props = useThemeProps({
@@ -173,7 +220,8 @@ export function PickersPopper(inProps) {
173
220
  role,
174
221
  placement,
175
222
  slots,
176
- slotProps
223
+ slotProps,
224
+ reduceAnimations: inReduceAnimations
177
225
  } = props;
178
226
  React.useEffect(() => {
179
227
  function handleKeyDown(nativeEvent) {
@@ -210,6 +258,8 @@ export function PickersPopper(inProps) {
210
258
  const handlePaperRef = useForkRef(handleRef, clickAwayRef);
211
259
  const ownerState = props;
212
260
  const classes = useUtilityClasses(ownerState);
261
+ const defaultReduceAnimations = useDefaultReduceAnimations();
262
+ const reduceAnimations = inReduceAnimations != null ? inReduceAnimations : defaultReduceAnimations;
213
263
  const handleKeyDown = event => {
214
264
  if (event.key === 'Escape') {
215
265
  // stop the propagation to avoid closing parent modal
@@ -217,21 +267,9 @@ export function PickersPopper(inProps) {
217
267
  onDismiss();
218
268
  }
219
269
  };
220
- const Transition = (_slots$desktopTransit = slots == null ? void 0 : slots.desktopTransition) != null ? _slots$desktopTransit : Grow;
270
+ const Transition = ((_slots$desktopTransit = slots == null ? void 0 : slots.desktopTransition) != null ? _slots$desktopTransit : reduceAnimations) ? Fade : Grow;
221
271
  const TrapFocus = (_slots$desktopTrapFoc = slots == null ? void 0 : slots.desktopTrapFocus) != null ? _slots$desktopTrapFoc : MuiTrapFocus;
222
272
  const Paper = (_slots$desktopPaper = slots == null ? void 0 : slots.desktopPaper) != null ? _slots$desktopPaper : PickersPopperPaper;
223
- const paperProps = useSlotProps({
224
- elementType: Paper,
225
- externalSlotProps: slotProps == null ? void 0 : slotProps.desktopPaper,
226
- additionalProps: {
227
- tabIndex: -1,
228
- elevation: 8,
229
- ref: handlePaperRef
230
- },
231
- className: classes.paper,
232
- ownerState: {} // Is overridden below to use `placement
233
- });
234
-
235
273
  const Popper = (_slots$popper = slots == null ? void 0 : slots.popper) != null ? _slots$popper : PickersPopperRoot;
236
274
  const popperProps = useSlotProps({
237
275
  elementType: Popper,
@@ -263,22 +301,17 @@ export function PickersPopper(inProps) {
263
301
  isEnabled: () => true
264
302
  }, slotProps == null ? void 0 : slotProps.desktopTrapFocus, {
265
303
  children: /*#__PURE__*/_jsx(Transition, _extends({}, TransitionProps, slotProps == null ? void 0 : slotProps.desktopTransition, {
266
- children: /*#__PURE__*/_jsx(Paper, _extends({}, paperProps, {
267
- onClick: event => {
268
- var _paperProps$onClick;
269
- onPaperClick(event);
270
- (_paperProps$onClick = paperProps.onClick) == null ? void 0 : _paperProps$onClick.call(paperProps, event);
271
- },
272
- onTouchStart: event => {
273
- var _paperProps$onTouchSt;
274
- onPaperTouchStart(event);
275
- (_paperProps$onTouchSt = paperProps.onTouchStart) == null ? void 0 : _paperProps$onTouchSt.call(paperProps, event);
276
- },
277
- ownerState: _extends({}, ownerState, {
278
- placement: popperPlacement
279
- }),
304
+ children: /*#__PURE__*/_jsx(PickersPopperPaperWrapper, {
305
+ PaperComponent: Paper,
306
+ ownerState: ownerState,
307
+ popperPlacement: popperPlacement,
308
+ ref: handlePaperRef,
309
+ onPaperClick: onPaperClick,
310
+ onPaperTouchStart: onPaperTouchStart,
311
+ paperClasses: classes.paper,
312
+ paperSlotProps: slotProps == null ? void 0 : slotProps.desktopPaper,
280
313
  children: children
281
- }))
314
+ })
282
315
  }))
283
316
  }))
284
317
  }));
@@ -1,7 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import * as React from 'react';
3
3
  import clsx from 'clsx';
4
- import Grid from '@mui/material/Grid';
5
4
  import Typography from '@mui/material/Typography';
6
5
  import { styled, useThemeProps } from '@mui/material/styles';
7
6
  import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -40,17 +39,24 @@ const PickersToolbarRoot = styled('div', {
40
39
  justifyContent: 'flex-start',
41
40
  flexWrap: 'wrap'
42
41
  }));
43
- const PickersToolbarContent = styled(Grid, {
42
+ const PickersToolbarContent = styled('div', {
44
43
  name: 'MuiPickersToolbar',
45
44
  slot: 'Content',
46
45
  overridesResolver: (props, styles) => styles.content
47
46
  })(({
48
47
  ownerState
49
- }) => _extends({
50
- flex: 1
51
- }, !ownerState.isLandscape && {
52
- alignItems: 'center'
53
- }));
48
+ }) => {
49
+ var _ownerState$landscape;
50
+ return {
51
+ display: 'flex',
52
+ flexWrap: 'wrap',
53
+ width: '100%',
54
+ justifyContent: ownerState.isLandscape ? 'flex-start' : 'space-between',
55
+ flexDirection: ownerState.isLandscape ? (_ownerState$landscape = ownerState.landscapeDirection) != null ? _ownerState$landscape : 'column' : 'row',
56
+ flex: 1,
57
+ alignItems: ownerState.isLandscape ? 'flex-start' : 'center'
58
+ };
59
+ });
54
60
  export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersToolbar(inProps, ref) {
55
61
  const props = useThemeProps({
56
62
  props: inProps,
@@ -59,8 +65,6 @@ export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersTool
59
65
  const {
60
66
  children,
61
67
  className,
62
- isLandscape,
63
- landscapeDirection = 'column',
64
68
  toolbarTitle,
65
69
  hidden,
66
70
  titleId
@@ -80,12 +84,8 @@ export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersTool
80
84
  id: titleId,
81
85
  children: toolbarTitle
82
86
  }), /*#__PURE__*/_jsx(PickersToolbarContent, {
83
- container: true,
84
- justifyContent: isLandscape ? 'flex-start' : 'space-between',
85
87
  className: classes.content,
86
88
  ownerState: ownerState,
87
- direction: isLandscape ? landscapeDirection : 'row',
88
- alignItems: isLandscape ? 'flex-start' : 'flex-end',
89
89
  children: children
90
90
  })]
91
91
  });
@@ -1,2 +1,2 @@
1
- export declare const defaultReduceAnimations: boolean;
1
+ export declare const slowAnimationDevices: boolean;
2
2
  export declare const useDefaultReduceAnimations: () => boolean;
@@ -1,9 +1,14 @@
1
1
  import useMediaQuery from '@mui/material/useMediaQuery';
2
2
  const PREFERS_REDUCED_MOTION = '@media (prefers-reduced-motion: reduce)';
3
- export const defaultReduceAnimations = typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent);
3
+
4
+ // detect if user agent has Android version < 10 or iOS version < 13
5
+ const mobileVersionMatches = typeof navigator !== 'undefined' && navigator.userAgent.match(/android\s(\d+)|OS\s(\d+)/i);
6
+ const androidVersion = mobileVersionMatches && mobileVersionMatches[1] ? parseInt(mobileVersionMatches[1], 10) : null;
7
+ const iOSVersion = mobileVersionMatches && mobileVersionMatches[2] ? parseInt(mobileVersionMatches[2], 10) : null;
8
+ export const slowAnimationDevices = androidVersion && androidVersion < 10 || iOSVersion && iOSVersion < 13 || false;
4
9
  export const useDefaultReduceAnimations = () => {
5
10
  const prefersReduced = useMediaQuery(PREFERS_REDUCED_MOTION, {
6
11
  defaultMatches: false
7
12
  });
8
- return prefersReduced || defaultReduceAnimations;
13
+ return prefersReduced || slowAnimationDevices;
9
14
  };
@@ -42,7 +42,8 @@ export const useDesktopPicker = _ref => {
42
42
  readOnly,
43
43
  disabled,
44
44
  autoFocus,
45
- localeText
45
+ localeText,
46
+ reduceAnimations
46
47
  } = props;
47
48
  const utils = useUtils();
48
49
  const internalInputRef = React.useRef(null);
@@ -80,7 +81,7 @@ export const useDesktopPicker = _ref => {
80
81
  externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.openPickerButton,
81
82
  additionalProps: {
82
83
  disabled: disabled || readOnly,
83
- onClick: actions.onOpen,
84
+ onClick: open ? actions.onClose : actions.onOpen,
84
85
  'aria-label': getOpenDialogAriaText(pickerFieldProps.value, utils),
85
86
  edge: inputAdornmentProps.position
86
87
  },
@@ -156,6 +157,7 @@ export const useDesktopPicker = _ref => {
156
157
  slots: slots,
157
158
  slotProps: slotProps,
158
159
  shouldRestoreFocus: shouldRestoreFocus,
160
+ reduceAnimations: reduceAnimations,
159
161
  children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps == null ? void 0 : slotProps.layout, {
160
162
  slots: slots,
161
163
  slotProps: slotProps,
@@ -86,17 +86,17 @@ export const useField = params => {
86
86
  setSelectedSections(sectionIndex);
87
87
  };
88
88
  const handleInputClick = useEventCallback((...args) => {
89
- onClick == null ? void 0 : onClick(...args);
89
+ onClick == null || onClick(...args);
90
90
  syncSelectionFromDOM();
91
91
  });
92
92
  const handleInputMouseUp = useEventCallback(event => {
93
- onMouseUp == null ? void 0 : onMouseUp(event);
93
+ onMouseUp == null || onMouseUp(event);
94
94
 
95
95
  // Without this, the browser will remove the selected when clicking inside an already-selected section.
96
96
  event.preventDefault();
97
97
  });
98
98
  const handleInputFocus = useEventCallback((...args) => {
99
- onFocus == null ? void 0 : onFocus(...args);
99
+ onFocus == null || onFocus(...args);
100
100
  // The ref is guaranteed to be resolved at this point.
101
101
  const input = inputRef.current;
102
102
  window.clearTimeout(focusTimeoutRef.current);
@@ -118,11 +118,11 @@ export const useField = params => {
118
118
  });
119
119
  });
120
120
  const handleInputBlur = useEventCallback((...args) => {
121
- onBlur == null ? void 0 : onBlur(...args);
121
+ onBlur == null || onBlur(...args);
122
122
  setSelectedSections(null);
123
123
  });
124
124
  const handleInputPaste = useEventCallback(event => {
125
- onPaste == null ? void 0 : onPaste(event);
125
+ onPaste == null || onPaste(event);
126
126
  if (readOnly) {
127
127
  event.preventDefault();
128
128
  return;
@@ -203,7 +203,7 @@ export const useField = params => {
203
203
  });
204
204
  });
205
205
  const handleInputKeyDown = useEventCallback(event => {
206
- onKeyDown == null ? void 0 : onKeyDown(event);
206
+ onKeyDown == null || onKeyDown(event);
207
207
 
208
208
  // eslint-disable-next-line default-case
209
209
  switch (true) {
@@ -27,5 +27,4 @@ export declare const getSectionsBoundaries: <TDate>(utils: MuiPickersAdapter<TDa
27
27
  export declare const validateSections: <TSection extends FieldSection>(sections: TSection[], valueType: FieldValueType) => void;
28
28
  export declare const mergeDateIntoReferenceDate: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, dateToTransferFrom: TDate, sections: FieldSectionWithoutPosition[], referenceDate: TDate, shouldLimitToEditedSections: boolean) => TDate;
29
29
  export declare const isAndroid: () => boolean;
30
- export declare const clampDaySectionIfPossible: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, sections: TSection[], sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>) => TSection[] | null;
31
30
  export declare const getSectionOrder: (sections: FieldSectionWithoutPosition[], isRTL: boolean) => SectionOrdering;
@@ -645,54 +645,6 @@ export const mergeDateIntoReferenceDate = (utils, timezone, dateToTransferFrom,
645
645
  return mergedDate;
646
646
  }, referenceDate);
647
647
  export const isAndroid = () => navigator.userAgent.toLowerCase().indexOf('android') > -1;
648
- export const clampDaySectionIfPossible = (utils, timezone, sections, sectionsValueBoundaries) => {
649
- // We can only clamp the day value if:
650
- // 1. if all the sections are filled (except the week day section which can be empty)
651
- // 2. there is a day section
652
- const canClamp = sections.every(section => section.type === 'weekDay' || section.value !== '') && sections.some(section => section.type === 'day');
653
- if (!canClamp) {
654
- return null;
655
- }
656
-
657
- // We try to generate a valid date representing the start of the month of the invalid date typed by the user.
658
- const sectionsForStartOfMonth = sections.map(section => {
659
- if (section.type !== 'day') {
660
- return section;
661
- }
662
- const dayBoundaries = sectionsValueBoundaries.day({
663
- currentDate: null,
664
- format: section.format,
665
- contentType: section.contentType
666
- });
667
- return _extends({}, section, {
668
- value: cleanDigitSectionValue(utils, timezone, dayBoundaries.minimum, dayBoundaries, section)
669
- });
670
- });
671
- const startOfMonth = getDateFromDateSections(utils, sectionsForStartOfMonth);
672
-
673
- // Even the start of the month is invalid, we probably have other invalid sections, the clamping failed.
674
- if (startOfMonth == null || !utils.isValid(startOfMonth)) {
675
- return null;
676
- }
677
-
678
- // The only invalid section was the day of the month, we replace its value with the maximum boundary for the correct month.
679
- return sections.map(section => {
680
- if (section.type !== 'day') {
681
- return section;
682
- }
683
- const dayBoundaries = sectionsValueBoundaries.day({
684
- currentDate: startOfMonth,
685
- format: section.format,
686
- contentType: section.contentType
687
- });
688
- if (Number(section.value) <= dayBoundaries.maximum) {
689
- return section;
690
- }
691
- return _extends({}, section, {
692
- value: dayBoundaries.maximum.toString()
693
- });
694
- });
695
- };
696
648
  export const getSectionOrder = (sections, isRTL) => {
697
649
  const neighbors = {};
698
650
  if (!isRTL) {