@mui/x-date-pickers 6.11.2 → 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 (112) 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 +100 -33
  9. package/DateCalendar/DateCalendar.js +3 -3
  10. package/DateCalendar/DateCalendar.types.d.ts +1 -1
  11. package/DateCalendar/DayCalendar.js +2 -2
  12. package/DatePicker/DatePicker.js +1 -1
  13. package/DateTimePicker/DateTimePicker.js +1 -1
  14. package/DesktopDatePicker/DesktopDatePicker.js +1 -1
  15. package/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -1
  16. package/DesktopTimePicker/DesktopTimePicker.js +1 -1
  17. package/MobileDatePicker/MobileDatePicker.js +1 -1
  18. package/MobileDateTimePicker/MobileDateTimePicker.js +1 -1
  19. package/MobileTimePicker/MobileTimePicker.js +1 -1
  20. package/MonthCalendar/PickersMonth.js +1 -1
  21. package/StaticDatePicker/StaticDatePicker.js +1 -1
  22. package/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
  23. package/StaticTimePicker/StaticTimePicker.js +1 -1
  24. package/TimePicker/TimePicker.js +1 -1
  25. package/YearCalendar/YearCalendar.js +5 -2
  26. package/index.js +1 -1
  27. package/internals/components/PickersPopper.d.ts +5 -3
  28. package/internals/components/PickersPopper.js +58 -30
  29. package/internals/hooks/useDefaultReduceAnimations.d.ts +1 -1
  30. package/internals/hooks/useDefaultReduceAnimations.js +7 -2
  31. package/internals/hooks/useDesktopPicker/useDesktopPicker.js +1 -1
  32. package/internals/hooks/useField/useField.js +6 -6
  33. package/internals/hooks/useField/useField.utils.d.ts +0 -1
  34. package/internals/hooks/useField/useField.utils.js +0 -48
  35. package/internals/hooks/useField/useFieldState.js +5 -25
  36. package/internals/hooks/usePicker/usePickerValue.js +1 -1
  37. package/internals/hooks/usePicker/usePickerViews.d.ts +1 -1
  38. package/internals/hooks/usePicker/usePickerViews.js +1 -1
  39. package/internals/hooks/useValidation.d.ts +2 -4
  40. package/internals/hooks/useValueWithTimezone.js +2 -2
  41. package/internals/hooks/useViews.js +1 -1
  42. package/legacy/DateCalendar/DateCalendar.js +3 -3
  43. package/legacy/DateCalendar/DayCalendar.js +2 -2
  44. package/legacy/DatePicker/DatePicker.js +1 -1
  45. package/legacy/DateTimePicker/DateTimePicker.js +1 -1
  46. package/legacy/DesktopDatePicker/DesktopDatePicker.js +1 -1
  47. package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -1
  48. package/legacy/DesktopTimePicker/DesktopTimePicker.js +1 -1
  49. package/legacy/MobileDatePicker/MobileDatePicker.js +1 -1
  50. package/legacy/MobileDateTimePicker/MobileDateTimePicker.js +1 -1
  51. package/legacy/MobileTimePicker/MobileTimePicker.js +1 -1
  52. package/legacy/MonthCalendar/PickersMonth.js +1 -1
  53. package/legacy/StaticDatePicker/StaticDatePicker.js +1 -1
  54. package/legacy/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
  55. package/legacy/StaticTimePicker/StaticTimePicker.js +1 -1
  56. package/legacy/TimePicker/TimePicker.js +1 -1
  57. package/legacy/YearCalendar/YearCalendar.js +5 -2
  58. package/legacy/index.js +1 -1
  59. package/legacy/internals/components/PickersPopper.js +54 -30
  60. package/legacy/internals/hooks/useDefaultReduceAnimations.js +7 -2
  61. package/legacy/internals/hooks/useDesktopPicker/useDesktopPicker.js +1 -1
  62. package/legacy/internals/hooks/useField/useField.js +6 -6
  63. package/legacy/internals/hooks/useField/useField.utils.js +0 -52
  64. package/legacy/internals/hooks/useField/useFieldState.js +4 -24
  65. package/legacy/internals/hooks/usePicker/usePickerValue.js +1 -1
  66. package/legacy/internals/hooks/usePicker/usePickerViews.js +1 -1
  67. package/legacy/internals/hooks/useValueWithTimezone.js +2 -2
  68. package/legacy/internals/hooks/useViews.js +1 -1
  69. package/legacy/tests/describeValue/testControlledUnControlled.js +1 -1
  70. package/models/adapters.d.ts +2 -1
  71. package/modern/DateCalendar/DateCalendar.js +1 -1
  72. package/modern/DatePicker/DatePicker.js +1 -1
  73. package/modern/DateTimePicker/DateTimePicker.js +1 -1
  74. package/modern/DesktopDatePicker/DesktopDatePicker.js +1 -1
  75. package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -1
  76. package/modern/DesktopTimePicker/DesktopTimePicker.js +1 -1
  77. package/modern/MobileDatePicker/MobileDatePicker.js +1 -1
  78. package/modern/MobileDateTimePicker/MobileDateTimePicker.js +1 -1
  79. package/modern/MobileTimePicker/MobileTimePicker.js +1 -1
  80. package/modern/StaticDatePicker/StaticDatePicker.js +1 -1
  81. package/modern/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
  82. package/modern/StaticTimePicker/StaticTimePicker.js +1 -1
  83. package/modern/TimePicker/TimePicker.js +1 -1
  84. package/modern/YearCalendar/YearCalendar.js +4 -1
  85. package/modern/index.js +1 -1
  86. package/modern/internals/components/PickersPopper.js +56 -28
  87. package/modern/internals/hooks/useDefaultReduceAnimations.js +7 -2
  88. package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.js +1 -1
  89. package/modern/internals/hooks/useField/useField.utils.js +0 -48
  90. package/modern/internals/hooks/useField/useFieldState.js +4 -24
  91. package/node/DateCalendar/DateCalendar.js +1 -1
  92. package/node/DatePicker/DatePicker.js +1 -1
  93. package/node/DateTimePicker/DateTimePicker.js +1 -1
  94. package/node/DesktopDatePicker/DesktopDatePicker.js +1 -1
  95. package/node/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -1
  96. package/node/DesktopTimePicker/DesktopTimePicker.js +1 -1
  97. package/node/MobileDatePicker/MobileDatePicker.js +1 -1
  98. package/node/MobileDateTimePicker/MobileDateTimePicker.js +1 -1
  99. package/node/MobileTimePicker/MobileTimePicker.js +1 -1
  100. package/node/StaticDatePicker/StaticDatePicker.js +1 -1
  101. package/node/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
  102. package/node/StaticTimePicker/StaticTimePicker.js +1 -1
  103. package/node/TimePicker/TimePicker.js +1 -1
  104. package/node/YearCalendar/YearCalendar.js +4 -1
  105. package/node/index.js +1 -1
  106. package/node/internals/components/PickersPopper.js +56 -28
  107. package/node/internals/hooks/useDefaultReduceAnimations.js +9 -4
  108. package/node/internals/hooks/useDesktopPicker/useDesktopPicker.js +1 -1
  109. package/node/internals/hooks/useField/useField.utils.js +1 -50
  110. package/node/internals/hooks/useField/useFieldState.js +3 -23
  111. package/package.json +2 -2
  112. package/tests/describeValue/testControlledUnControlled.js +1 -1
@@ -215,7 +215,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
215
215
  readOnly: PropTypes.bool,
216
216
  /**
217
217
  * If `true`, disable heavy animations.
218
- * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
218
+ * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
219
219
  */
220
220
  reduceAnimations: PropTypes.bool,
221
221
  /**
@@ -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.2
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
@@ -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.
@@ -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
  */
@@ -64,3 +65,4 @@ export interface PickerPopperProps extends UsePickerValueActions {
64
65
  reduceAnimations?: boolean;
65
66
  }
66
67
  export declare function PickersPopper(inProps: PickerPopperProps): React.JSX.Element;
68
+ export {};
@@ -1,4 +1,6 @@
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';
@@ -38,9 +40,9 @@ const PickersPopperPaper = styled(MuiPaper, {
38
40
  })(({
39
41
  ownerState
40
42
  }) => _extends({
41
- transformOrigin: 'top center',
42
- outline: 0
43
- }, ownerState.placement === 'top' && {
43
+ outline: 0,
44
+ transformOrigin: 'top center'
45
+ }, ownerState.placement.includes('top') && {
44
46
  transformOrigin: 'bottom center'
45
47
  }));
46
48
  function clickedRootScrollbar(event, doc) {
@@ -158,6 +160,49 @@ function useClickAwayListener(active, onClickAway) {
158
160
  }, [active, handleClickAway]);
159
161
  return [nodeRef, handleSynthetic, handleSynthetic];
160
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
+ });
161
206
  export function PickersPopper(inProps) {
162
207
  var _slots$desktopTransit, _slots$desktopTrapFoc, _slots$desktopPaper, _slots$popper;
163
208
  const props = useThemeProps({
@@ -225,18 +270,6 @@ export function PickersPopper(inProps) {
225
270
  const Transition = ((_slots$desktopTransit = slots == null ? void 0 : slots.desktopTransition) != null ? _slots$desktopTransit : reduceAnimations) ? Fade : Grow;
226
271
  const TrapFocus = (_slots$desktopTrapFoc = slots == null ? void 0 : slots.desktopTrapFocus) != null ? _slots$desktopTrapFoc : MuiTrapFocus;
227
272
  const Paper = (_slots$desktopPaper = slots == null ? void 0 : slots.desktopPaper) != null ? _slots$desktopPaper : PickersPopperPaper;
228
- const paperProps = useSlotProps({
229
- elementType: Paper,
230
- externalSlotProps: slotProps == null ? void 0 : slotProps.desktopPaper,
231
- additionalProps: {
232
- tabIndex: -1,
233
- elevation: 8,
234
- ref: handlePaperRef
235
- },
236
- className: classes.paper,
237
- ownerState: {} // Is overridden below to use `placement
238
- });
239
-
240
273
  const Popper = (_slots$popper = slots == null ? void 0 : slots.popper) != null ? _slots$popper : PickersPopperRoot;
241
274
  const popperProps = useSlotProps({
242
275
  elementType: Popper,
@@ -268,22 +301,17 @@ export function PickersPopper(inProps) {
268
301
  isEnabled: () => true
269
302
  }, slotProps == null ? void 0 : slotProps.desktopTrapFocus, {
270
303
  children: /*#__PURE__*/_jsx(Transition, _extends({}, TransitionProps, slotProps == null ? void 0 : slotProps.desktopTransition, {
271
- children: /*#__PURE__*/_jsx(Paper, _extends({}, paperProps, {
272
- onClick: event => {
273
- var _paperProps$onClick;
274
- onPaperClick(event);
275
- (_paperProps$onClick = paperProps.onClick) == null ? void 0 : _paperProps$onClick.call(paperProps, event);
276
- },
277
- onTouchStart: event => {
278
- var _paperProps$onTouchSt;
279
- onPaperTouchStart(event);
280
- (_paperProps$onTouchSt = paperProps.onTouchStart) == null ? void 0 : _paperProps$onTouchSt.call(paperProps, event);
281
- },
282
- ownerState: _extends({}, ownerState, {
283
- placement: popperPlacement
284
- }),
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,
285
313
  children: children
286
- }))
314
+ })
287
315
  }))
288
316
  }))
289
317
  }));
@@ -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
  };
@@ -81,7 +81,7 @@ export const useDesktopPicker = _ref => {
81
81
  externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.openPickerButton,
82
82
  additionalProps: {
83
83
  disabled: disabled || readOnly,
84
- onClick: actions.onOpen,
84
+ onClick: open ? actions.onClose : actions.onOpen,
85
85
  'aria-label': getOpenDialogAriaText(pickerFieldProps.value, utils),
86
86
  edge: inputAdornmentProps.position
87
87
  },
@@ -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) {
@@ -3,7 +3,7 @@ import * as React from 'react';
3
3
  import useControlled from '@mui/utils/useControlled';
4
4
  import { useTheme } from '@mui/material/styles';
5
5
  import { useUtils, useLocaleText, useLocalizationContext } from '../useUtils';
6
- import { addPositionPropertiesToSections, splitFormatIntoSections, clampDaySectionIfPossible, mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections } from './useField.utils';
6
+ import { addPositionPropertiesToSections, splitFormatIntoSections, mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections } from './useField.utils';
7
7
  import { useValueWithTimezone } from '../useValueWithTimezone';
8
8
  import { getSectionTypeGranularity } from '../../utils/getDefaultReferenceDate';
9
9
  export const useFieldState = params => {
@@ -75,7 +75,7 @@ export const useFieldState = params => {
75
75
  });
76
76
  const setSelectedSections = newSelectedSections => {
77
77
  innerSetSelectedSections(newSelectedSections);
78
- onSelectedSectionsChange == null ? void 0 : onSelectedSectionsChange(newSelectedSections);
78
+ onSelectedSectionsChange == null || onSelectedSectionsChange(newSelectedSections);
79
79
  setState(prevState => _extends({}, prevState, {
80
80
  selectedSectionQuery: null
81
81
  }));
@@ -209,21 +209,7 @@ export const useFieldState = params => {
209
209
  const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
210
210
  const newSections = setSectionValue(selectedSectionIndexes.startIndex, newSectionValue);
211
211
  const newActiveDateSections = activeDateManager.getSections(newSections);
212
- let newActiveDate = getDateFromDateSections(utils, newActiveDateSections);
213
- let shouldRegenSections = false;
214
-
215
- /**
216
- * If the date is invalid,
217
- * Then we can try to clamp the day section to see if that produces a valid date.
218
- * This can be useful if the month has fewer days than the day value currently provided.
219
- */
220
- if (!utils.isValid(newActiveDate)) {
221
- const clampedSections = clampDaySectionIfPossible(utils, timezone, newActiveDateSections, sectionsValueBoundaries);
222
- if (clampedSections != null) {
223
- shouldRegenSections = true;
224
- newActiveDate = getDateFromDateSections(utils, clampedSections);
225
- }
226
- }
212
+ const newActiveDate = getDateFromDateSections(utils, newActiveDateSections);
227
213
  let values;
228
214
  let shouldPublish;
229
215
 
@@ -241,22 +227,16 @@ export const useFieldState = params => {
241
227
  shouldPublish = (newActiveDate != null && !utils.isValid(newActiveDate)) !== (activeDateManager.date != null && !utils.isValid(activeDateManager.date));
242
228
  }
243
229
 
244
- /**
245
- * If the value has been modified (to clamp the day).
246
- * Then we need to re-generate the sections to make sure they also have this change.
247
- */
248
- const sections = shouldRegenSections ? getSectionsFromValue(values.value, state.sections) : newSections;
249
-
250
230
  /**
251
231
  * Publish or update the internal state with the new value and sections.
252
232
  */
253
233
  if (shouldPublish) {
254
234
  return publishValue(_extends({}, values, {
255
- sections
235
+ sections: newSections
256
236
  }));
257
237
  }
258
238
  return setState(prevState => _extends({}, prevState, values, {
259
- sections,
239
+ sections: newSections,
260
240
  tempValueStrAndroid: null
261
241
  }));
262
242
  };
@@ -303,7 +303,7 @@ export const usePickerValue = ({
303
303
  }));
304
304
  const handleFieldSelectedSectionsChange = useEventCallback(newSelectedSections => {
305
305
  setSelectedSections(newSelectedSections);
306
- onSelectedSectionsChange == null ? void 0 : onSelectedSectionsChange(newSelectedSections);
306
+ onSelectedSectionsChange == null || onSelectedSectionsChange(newSelectedSections);
307
307
  });
308
308
  const actions = {
309
309
  onClear: handleClear,
@@ -33,7 +33,7 @@ export interface UsePickerViewsBaseProps<TValue, TView extends DateOrTimeViewWit
33
33
  viewRenderers: PickerViewRendererLookup<TValue, TView, TExternalProps, TAdditionalProps>;
34
34
  /**
35
35
  * If `true`, disable heavy animations.
36
- * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
36
+ * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
37
37
  */
38
38
  reduceAnimations?: boolean;
39
39
  }
@@ -102,7 +102,7 @@ export const usePickerViews = ({
102
102
  setTimeout(() => {
103
103
  // focusing the input before the range selection is done
104
104
  // calling `onSelectedSectionsChange` outside of timeout results in an inconsistent behavior between Safari And Chrome
105
- inputRef == null ? void 0 : inputRef.current.focus();
105
+ inputRef == null || inputRef.current.focus();
106
106
  onSelectedSectionsChange(view);
107
107
  });
108
108
  }
@@ -1,12 +1,9 @@
1
1
  import { MuiPickersAdapterContextValue } from '../../LocalizationProvider/LocalizationProvider';
2
- export interface ValidationCommonProps<TError, TValue> {
2
+ interface ValidationCommonProps<TError, TValue> {
3
3
  /**
4
4
  * Callback that fired when input value or new `value` prop validation returns **new** validation error (or value is valid after error).
5
5
  * In case of validation error detected `reason` prop return non-null value and `TextField` must be displayed in `error` state.
6
6
  * This can be used to render appropriate form error.
7
- *
8
- * [Read the guide](https://next.material-ui-pickers.dev/guides/forms) about form integration and error displaying.
9
- *
10
7
  * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
11
8
  * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
12
9
  * @param {TError} reason The reason why the current value is not valid.
@@ -23,3 +20,4 @@ export type Validator<TValue, TDate, TError, TValidationProps> = (params: {
23
20
  props: Omit<TValidationProps, 'value' | 'onError'>;
24
21
  }) => TError;
25
22
  export declare function useValidation<TValue, TDate, TError, TValidationProps extends {}>(props: ValidationProps<TError, TValue, TValidationProps>, validate: Validator<TValue, TDate, TError, TValidationProps>, isSameError: (a: TError, b: TError | null) => boolean, defaultErrorState: TError): TError;
23
+ export {};
@@ -29,7 +29,7 @@ export const useValueWithTimezone = ({
29
29
  const valueWithTimezoneToRender = React.useMemo(() => valueManager.setTimezone(utils, timezoneToRender, inputValue), [valueManager, utils, timezoneToRender, inputValue]);
30
30
  const handleValueChange = useEventCallback((newValue, ...otherParams) => {
31
31
  const newValueWithInputTimezone = setInputTimezone(newValue);
32
- onChange == null ? void 0 : onChange(newValueWithInputTimezone, ...otherParams);
32
+ onChange == null || onChange(newValueWithInputTimezone, ...otherParams);
33
33
  });
34
34
  return {
35
35
  value: valueWithTimezoneToRender,
@@ -57,7 +57,7 @@ export const useControlledValueWithTimezone = ({
57
57
  });
58
58
  const onChange = useEventCallback((newValue, ...otherParams) => {
59
59
  setValue(newValue);
60
- onChangeProp == null ? void 0 : onChangeProp(newValue, ...otherParams);
60
+ onChangeProp == null || onChangeProp(newValue, ...otherParams);
61
61
  });
62
62
  return useValueWithTimezone({
63
63
  timezone: timezoneProp,
@@ -62,7 +62,7 @@ export function useViews({
62
62
  );
63
63
  }
64
64
 
65
- onFocusedViewChange == null ? void 0 : onFocusedViewChange(viewToFocus, hasFocus);
65
+ onFocusedViewChange == null || onFocusedViewChange(viewToFocus, hasFocus);
66
66
  });
67
67
  const handleChangeView = useEventCallback(newView => {
68
68
  if (newView === view) {
@@ -224,7 +224,7 @@ export var DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(in
224
224
  }) : newDate;
225
225
  if (closestEnabledDate) {
226
226
  setValueAndGoToNextView(closestEnabledDate, 'finish');
227
- onMonthChange == null ? void 0 : onMonthChange(startOfMonth);
227
+ onMonthChange == null || onMonthChange(startOfMonth);
228
228
  } else {
229
229
  goToNextView();
230
230
  changeMonth(startOfMonth);
@@ -246,7 +246,7 @@ export var DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(in
246
246
  }) : newDate;
247
247
  if (closestEnabledDate) {
248
248
  setValueAndGoToNextView(closestEnabledDate, 'finish');
249
- onYearChange == null ? void 0 : onYearChange(closestEnabledDate);
249
+ onYearChange == null || onYearChange(closestEnabledDate);
250
250
  } else {
251
251
  goToNextView();
252
252
  changeMonth(startOfYear);
@@ -496,7 +496,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
496
496
  readOnly: PropTypes.bool,
497
497
  /**
498
498
  * If `true`, disable heavy animations.
499
- * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
499
+ * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
500
500
  */
501
501
  reduceAnimations: PropTypes.bool,
502
502
  /**
@@ -311,7 +311,7 @@ export function DayCalendar(inProps) {
311
311
  if (!isDateDisabled(day)) {
312
312
  onFocusedDayChange(day);
313
313
  setInternalFocusedDay(day);
314
- onFocusedViewChange == null ? void 0 : onFocusedViewChange(true);
314
+ onFocusedViewChange == null || onFocusedViewChange(true);
315
315
  setInternalHasFocus(true);
316
316
  }
317
317
  };
@@ -382,7 +382,7 @@ export function DayCalendar(inProps) {
382
382
  });
383
383
  var handleBlur = useEventCallback(function (event, day) {
384
384
  if (internalHasFocus && utils.isSameDay(internalFocusedDay, day)) {
385
- onFocusedViewChange == null ? void 0 : onFocusedViewChange(false);
385
+ onFocusedViewChange == null || onFocusedViewChange(false);
386
386
  }
387
387
  });
388
388
  var currentMonthNumber = utils.getMonth(currentMonth);
@@ -241,7 +241,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
241
241
  readOnly: PropTypes.bool,
242
242
  /**
243
243
  * If `true`, disable heavy animations.
244
- * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
244
+ * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
245
245
  */
246
246
  reduceAnimations: PropTypes.bool,
247
247
  /**
@@ -279,7 +279,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
279
279
  readOnly: PropTypes.bool,
280
280
  /**
281
281
  * If `true`, disable heavy animations.
282
- * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
282
+ * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
283
283
  */
284
284
  reduceAnimations: PropTypes.bool,
285
285
  /**
@@ -259,7 +259,7 @@ DesktopDatePicker.propTypes = {
259
259
  readOnly: PropTypes.bool,
260
260
  /**
261
261
  * If `true`, disable heavy animations.
262
- * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
262
+ * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
263
263
  */
264
264
  reduceAnimations: PropTypes.bool,
265
265
  /**
@@ -334,7 +334,7 @@ DesktopDateTimePicker.propTypes = {
334
334
  readOnly: PropTypes.bool,
335
335
  /**
336
336
  * If `true`, disable heavy animations.
337
- * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
337
+ * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
338
338
  */
339
339
  reduceAnimations: PropTypes.bool,
340
340
  /**
@@ -256,7 +256,7 @@ DesktopTimePicker.propTypes = {
256
256
  readOnly: PropTypes.bool,
257
257
  /**
258
258
  * If `true`, disable heavy animations.
259
- * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
259
+ * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
260
260
  */
261
261
  reduceAnimations: PropTypes.bool,
262
262
  /**
@@ -256,7 +256,7 @@ MobileDatePicker.propTypes = {
256
256
  readOnly: PropTypes.bool,
257
257
  /**
258
258
  * If `true`, disable heavy animations.
259
- * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
259
+ * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
260
260
  */
261
261
  reduceAnimations: PropTypes.bool,
262
262
  /**
@@ -305,7 +305,7 @@ MobileDateTimePicker.propTypes = {
305
305
  readOnly: PropTypes.bool,
306
306
  /**
307
307
  * If `true`, disable heavy animations.
308
- * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
308
+ * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
309
309
  */
310
310
  reduceAnimations: PropTypes.bool,
311
311
  /**
@@ -233,7 +233,7 @@ MobileTimePicker.propTypes = {
233
233
  readOnly: PropTypes.bool,
234
234
  /**
235
235
  * If `true`, disable heavy animations.
236
- * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
236
+ * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
237
237
  */
238
238
  reduceAnimations: PropTypes.bool,
239
239
  /**
@@ -99,7 +99,7 @@ export var PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProps)
99
99
  useEnhancedEffect(function () {
100
100
  if (autoFocus) {
101
101
  var _ref$current;
102
- (_ref$current = ref.current) == null ? void 0 : _ref$current.focus();
102
+ (_ref$current = ref.current) == null || _ref$current.focus();
103
103
  }
104
104
  }, [autoFocus]);
105
105
  return /*#__PURE__*/_jsx(PickersMonthRoot, _extends({
@@ -201,7 +201,7 @@ StaticDatePicker.propTypes = {
201
201
  readOnly: PropTypes.bool,
202
202
  /**
203
203
  * If `true`, disable heavy animations.
204
- * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
204
+ * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
205
205
  */
206
206
  reduceAnimations: PropTypes.bool,
207
207
  /**
@@ -249,7 +249,7 @@ StaticDateTimePicker.propTypes = {
249
249
  readOnly: PropTypes.bool,
250
250
  /**
251
251
  * If `true`, disable heavy animations.
252
- * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
252
+ * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
253
253
  */
254
254
  reduceAnimations: PropTypes.bool,
255
255
  /**