@mui/x-date-pickers 8.3.0 → 8.4.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 (160) hide show
  1. package/AdapterDateFns/AdapterDateFns.js +2 -1
  2. package/AdapterDateFnsJalali/AdapterDateFnsJalali.js +2 -1
  3. package/AdapterDateFnsJalaliV2/AdapterDateFnsJalaliV2.js +5 -1
  4. package/AdapterDateFnsV2/AdapterDateFnsV2.js +5 -1
  5. package/AdapterDayjs/AdapterDayjs.js +12 -9
  6. package/AdapterLuxon/AdapterLuxon.js +3 -2
  7. package/AdapterMoment/AdapterMoment.js +2 -2
  8. package/AdapterMomentHijri/AdapterMomentHijri.js +3 -0
  9. package/AdapterMomentJalaali/AdapterMomentJalaali.js +1 -0
  10. package/CHANGELOG.md +206 -10
  11. package/DateCalendar/DateCalendar.js +1 -0
  12. package/DateField/DateField.js +1 -0
  13. package/DatePicker/DatePicker.js +1 -0
  14. package/DatePicker/DatePickerToolbar.js +1 -0
  15. package/DateTimeField/DateTimeField.js +1 -0
  16. package/DateTimePicker/DateTimePicker.js +1 -0
  17. package/DateTimePicker/DateTimePickerTabs.js +1 -0
  18. package/DateTimePicker/DateTimePickerToolbar.js +1 -0
  19. package/DesktopDatePicker/DesktopDatePicker.js +1 -0
  20. package/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -0
  21. package/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +1 -0
  22. package/DesktopTimePicker/DesktopTimePicker.js +1 -0
  23. package/DigitalClock/DigitalClock.d.ts +1 -1
  24. package/DigitalClock/DigitalClock.js +1 -0
  25. package/LocalizationProvider/LocalizationProvider.js +2 -3
  26. package/MobileDatePicker/MobileDatePicker.js +1 -0
  27. package/MobileDateTimePicker/MobileDateTimePicker.js +1 -0
  28. package/MobileTimePicker/MobileTimePicker.js +1 -0
  29. package/MonthCalendar/MonthCalendar.js +1 -0
  30. package/MonthCalendar/MonthCalendarButton.js +2 -1
  31. package/MultiSectionDigitalClock/MultiSectionDigitalClock.js +5 -4
  32. package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +2 -1
  33. package/PickersActionBar/PickersActionBar.js +2 -1
  34. package/PickersCalendarHeader/PickersCalendarHeader.js +1 -0
  35. package/PickersDay/PickersDay.js +3 -1
  36. package/PickersLayout/PickersLayout.d.ts +2 -2
  37. package/PickersLayout/PickersLayout.js +1 -0
  38. package/PickersSectionList/PickersSectionList.d.ts +1 -1
  39. package/PickersSectionList/PickersSectionList.js +1 -0
  40. package/PickersTextField/PickersFilledInput/PickersFilledInput.js +1 -0
  41. package/PickersTextField/PickersFilledInput/pickersFilledInputClasses.d.ts +6 -6
  42. package/PickersTextField/PickersInput/PickersInput.js +1 -0
  43. package/PickersTextField/PickersInput/pickersInputClasses.d.ts +6 -6
  44. package/PickersTextField/PickersInputBase/PickersInputBase.d.ts +2 -2
  45. package/PickersTextField/PickersInputBase/PickersInputBase.js +1 -0
  46. package/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js +1 -0
  47. package/PickersTextField/PickersOutlinedInput/pickersOutlinedInputClasses.d.ts +5 -5
  48. package/PickersTextField/PickersTextField.js +12 -2
  49. package/PickersTextField/usePickerTextFieldOwnerState.js +1 -0
  50. package/StaticDatePicker/StaticDatePicker.js +1 -0
  51. package/StaticDateTimePicker/StaticDateTimePicker.js +1 -0
  52. package/StaticTimePicker/StaticTimePicker.js +1 -0
  53. package/TimeClock/TimeClock.js +1 -0
  54. package/TimeField/TimeField.js +1 -0
  55. package/TimePicker/TimePicker.js +1 -0
  56. package/YearCalendar/YearCalendar.js +1 -0
  57. package/YearCalendar/YearCalendarButton.js +2 -1
  58. package/YearCalendar/yearCalendarClasses.d.ts +1 -1
  59. package/dateViewRenderers/dateViewRenderers.js +2 -1
  60. package/esm/AdapterDateFns/AdapterDateFns.js +2 -1
  61. package/esm/AdapterDateFnsJalali/AdapterDateFnsJalali.js +2 -1
  62. package/esm/AdapterDateFnsJalaliV2/AdapterDateFnsJalaliV2.js +5 -1
  63. package/esm/AdapterDateFnsV2/AdapterDateFnsV2.js +5 -1
  64. package/esm/AdapterDayjs/AdapterDayjs.js +12 -9
  65. package/esm/AdapterLuxon/AdapterLuxon.js +3 -2
  66. package/esm/AdapterMoment/AdapterMoment.js +2 -2
  67. package/esm/AdapterMomentHijri/AdapterMomentHijri.js +3 -0
  68. package/esm/AdapterMomentJalaali/AdapterMomentJalaali.js +1 -0
  69. package/esm/DateCalendar/DateCalendar.js +1 -0
  70. package/esm/DateField/DateField.js +1 -0
  71. package/esm/DatePicker/DatePicker.js +1 -0
  72. package/esm/DatePicker/DatePickerToolbar.js +1 -0
  73. package/esm/DateTimeField/DateTimeField.js +1 -0
  74. package/esm/DateTimePicker/DateTimePicker.js +1 -0
  75. package/esm/DateTimePicker/DateTimePickerTabs.js +1 -0
  76. package/esm/DateTimePicker/DateTimePickerToolbar.js +1 -0
  77. package/esm/DesktopDatePicker/DesktopDatePicker.js +1 -0
  78. package/esm/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -0
  79. package/esm/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +1 -0
  80. package/esm/DesktopTimePicker/DesktopTimePicker.js +1 -0
  81. package/esm/DigitalClock/DigitalClock.d.ts +1 -1
  82. package/esm/DigitalClock/DigitalClock.js +1 -0
  83. package/esm/LocalizationProvider/LocalizationProvider.js +2 -3
  84. package/esm/MobileDatePicker/MobileDatePicker.js +1 -0
  85. package/esm/MobileDateTimePicker/MobileDateTimePicker.js +1 -0
  86. package/esm/MobileTimePicker/MobileTimePicker.js +1 -0
  87. package/esm/MonthCalendar/MonthCalendar.js +1 -0
  88. package/esm/MonthCalendar/MonthCalendarButton.js +2 -1
  89. package/esm/MultiSectionDigitalClock/MultiSectionDigitalClock.js +1 -0
  90. package/esm/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +2 -1
  91. package/esm/PickersActionBar/PickersActionBar.js +1 -0
  92. package/esm/PickersCalendarHeader/PickersCalendarHeader.js +1 -0
  93. package/esm/PickersDay/PickersDay.js +3 -1
  94. package/esm/PickersLayout/PickersLayout.d.ts +2 -2
  95. package/esm/PickersLayout/PickersLayout.js +1 -0
  96. package/esm/PickersSectionList/PickersSectionList.d.ts +1 -1
  97. package/esm/PickersSectionList/PickersSectionList.js +1 -0
  98. package/esm/PickersTextField/PickersFilledInput/PickersFilledInput.js +1 -0
  99. package/esm/PickersTextField/PickersFilledInput/pickersFilledInputClasses.d.ts +6 -6
  100. package/esm/PickersTextField/PickersInput/PickersInput.js +1 -0
  101. package/esm/PickersTextField/PickersInput/pickersInputClasses.d.ts +6 -6
  102. package/esm/PickersTextField/PickersInputBase/PickersInputBase.d.ts +2 -2
  103. package/esm/PickersTextField/PickersInputBase/PickersInputBase.js +1 -0
  104. package/esm/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js +1 -0
  105. package/esm/PickersTextField/PickersOutlinedInput/pickersOutlinedInputClasses.d.ts +5 -5
  106. package/esm/PickersTextField/PickersTextField.js +12 -2
  107. package/esm/PickersTextField/usePickerTextFieldOwnerState.js +1 -0
  108. package/esm/StaticDatePicker/StaticDatePicker.js +1 -0
  109. package/esm/StaticDateTimePicker/StaticDateTimePicker.js +1 -0
  110. package/esm/StaticTimePicker/StaticTimePicker.js +1 -0
  111. package/esm/TimeClock/TimeClock.js +1 -0
  112. package/esm/TimeField/TimeField.js +1 -0
  113. package/esm/TimePicker/TimePicker.js +1 -0
  114. package/esm/YearCalendar/YearCalendar.js +1 -0
  115. package/esm/YearCalendar/YearCalendarButton.js +2 -1
  116. package/esm/YearCalendar/yearCalendarClasses.d.ts +1 -1
  117. package/esm/dateViewRenderers/dateViewRenderers.js +2 -1
  118. package/esm/hooks/useIsValidValue.js +1 -0
  119. package/esm/hooks/usePickerContext.js +1 -0
  120. package/esm/index.js +1 -1
  121. package/esm/internals/components/PickerFieldUI.js +1 -0
  122. package/esm/internals/components/PickerPopper/PickerPopper.js +1 -0
  123. package/esm/internals/components/PickerProvider.js +2 -0
  124. package/esm/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +2 -1
  125. package/esm/internals/components/PickersArrowSwitcher/pickersArrowSwitcherClasses.d.ts +1 -1
  126. package/esm/internals/components/PickersToolbar.js +2 -1
  127. package/esm/internals/components/PickersToolbarButton.js +2 -1
  128. package/esm/internals/components/PickersToolbarText.js +2 -1
  129. package/esm/internals/components/pickersToolbarClasses.d.ts +1 -1
  130. package/esm/internals/hooks/useDesktopPicker/useDesktopPicker.js +1 -0
  131. package/esm/internals/hooks/useField/useFieldCharacterEditing.js +27 -11
  132. package/esm/internals/hooks/useField/useFieldSectionContainerProps.js +2 -3
  133. package/esm/internals/hooks/useField/useFieldSectionContentProps.js +2 -2
  134. package/esm/internals/hooks/useField/useFieldState.js +2 -2
  135. package/esm/internals/hooks/useMobilePicker/useMobilePicker.js +1 -0
  136. package/esm/internals/hooks/useNullableFieldPrivateContext.js +1 -0
  137. package/esm/internals/hooks/useStaticPicker/useStaticPicker.js +1 -0
  138. package/esm/timeViewRenderers/timeViewRenderers.js +4 -1
  139. package/hooks/useIsValidValue.js +1 -0
  140. package/hooks/usePickerContext.js +1 -0
  141. package/index.js +1 -1
  142. package/internals/components/PickerFieldUI.js +1 -0
  143. package/internals/components/PickerPopper/PickerPopper.js +1 -0
  144. package/internals/components/PickerProvider.js +2 -0
  145. package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +2 -1
  146. package/internals/components/PickersArrowSwitcher/pickersArrowSwitcherClasses.d.ts +1 -1
  147. package/internals/components/PickersToolbar.js +2 -1
  148. package/internals/components/PickersToolbarButton.js +2 -1
  149. package/internals/components/PickersToolbarText.js +2 -1
  150. package/internals/components/pickersToolbarClasses.d.ts +1 -1
  151. package/internals/hooks/useDesktopPicker/useDesktopPicker.js +1 -0
  152. package/internals/hooks/useField/useFieldCharacterEditing.js +27 -11
  153. package/internals/hooks/useField/useFieldSectionContainerProps.js +2 -4
  154. package/internals/hooks/useField/useFieldSectionContentProps.js +2 -2
  155. package/internals/hooks/useField/useFieldState.js +2 -2
  156. package/internals/hooks/useMobilePicker/useMobilePicker.js +1 -0
  157. package/internals/hooks/useNullableFieldPrivateContext.js +1 -0
  158. package/internals/hooks/useStaticPicker/useStaticPicker.js +1 -0
  159. package/package.json +2 -2
  160. package/timeViewRenderers/timeViewRenderers.js +4 -1
@@ -29,7 +29,9 @@ const VARIANT_COMPONENT = {
29
29
  const PickersTextFieldRoot = styled(FormControl, {
30
30
  name: 'MuiPickersTextField',
31
31
  slot: 'Root'
32
- })({});
32
+ })({
33
+ maxWidth: '100%'
34
+ });
33
35
  const useUtilityClasses = (classes, ownerState) => {
34
36
  const {
35
37
  isFieldFocused,
@@ -112,6 +114,13 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
112
114
  }), [fieldOwnerState, areAllSectionsEmpty, focused, error, props.size, color, fullWidth, startAdornment, endAdornment, InputProps?.startAdornment, InputProps?.endAdornment, label]);
113
115
  const classes = useUtilityClasses(classesProp, ownerState);
114
116
  const PickersInputComponent = VARIANT_COMPONENT[variant];
117
+ const inputAdditionalProps = {};
118
+ if (variant === 'outlined') {
119
+ if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
120
+ inputAdditionalProps.notched = InputLabelProps.shrink;
121
+ }
122
+ inputAdditionalProps.label = label;
123
+ }
115
124
  return /*#__PURE__*/_jsx(PickerTextFieldOwnerStateContext.Provider, {
116
125
  value: ownerState,
117
126
  children: /*#__PURE__*/_jsxs(PickersTextFieldRoot, _extends({
@@ -159,7 +168,7 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
159
168
  "aria-describedby": helperTextId,
160
169
  "aria-live": helperTextId ? 'polite' : undefined,
161
170
  "data-active-range-position": dataActiveRangePosition
162
- }, InputProps)), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
171
+ }, inputAdditionalProps, InputProps)), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
163
172
  id: helperTextId
164
173
  }, FormHelperTextProps, {
165
174
  children: helperText
@@ -167,6 +176,7 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
167
176
  }))
168
177
  });
169
178
  });
179
+ if (process.env.NODE_ENV !== "production") PickersTextField.displayName = "PickersTextField";
170
180
  process.env.NODE_ENV !== "production" ? PickersTextField.propTypes = {
171
181
  // ----------------------------- Warning --------------------------------
172
182
  // | These PropTypes are generated from the TypeScript type definitions |
@@ -2,6 +2,7 @@
2
2
 
3
3
  import * as React from 'react';
4
4
  export const PickerTextFieldOwnerStateContext = /*#__PURE__*/React.createContext(null);
5
+ if (process.env.NODE_ENV !== "production") PickerTextFieldOwnerStateContext.displayName = "PickerTextFieldOwnerStateContext";
5
6
  export const usePickerTextFieldOwnerState = () => {
6
7
  const value = React.useContext(PickerTextFieldOwnerStateContext);
7
8
  if (value == null) {
@@ -50,6 +50,7 @@ const StaticDatePicker = /*#__PURE__*/React.forwardRef(function StaticDatePicker
50
50
  });
51
51
  return renderPicker();
52
52
  });
53
+ if (process.env.NODE_ENV !== "production") StaticDatePicker.displayName = "StaticDatePicker";
53
54
  StaticDatePicker.propTypes = {
54
55
  // ----------------------------- Warning --------------------------------
55
56
  // | These PropTypes are generated from the TypeScript type definitions |
@@ -99,6 +99,7 @@ const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTi
99
99
  });
100
100
  return renderPicker();
101
101
  });
102
+ if (process.env.NODE_ENV !== "production") StaticDateTimePicker.displayName = "StaticDateTimePicker";
102
103
  StaticDateTimePicker.propTypes = {
103
104
  // ----------------------------- Warning --------------------------------
104
105
  // | These PropTypes are generated from the TypeScript type definitions |
@@ -52,6 +52,7 @@ const StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTimePicker
52
52
  });
53
53
  return renderPicker();
54
54
  });
55
+ if (process.env.NODE_ENV !== "production") StaticTimePicker.displayName = "StaticTimePicker";
55
56
  StaticTimePicker.propTypes = {
56
57
  // ----------------------------- Warning --------------------------------
57
58
  // | These PropTypes are generated from the TypeScript type definitions |
@@ -329,6 +329,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
329
329
  })]
330
330
  }));
331
331
  });
332
+ if (process.env.NODE_ENV !== "production") TimeClock.displayName = "TimeClock";
332
333
  process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
333
334
  // ----------------------------- Warning --------------------------------
334
335
  // | These PropTypes are generated from the TypeScript type definitions |
@@ -43,6 +43,7 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, inRe
43
43
  defaultOpenPickerIcon: ClockIcon
44
44
  });
45
45
  });
46
+ if (process.env.NODE_ENV !== "production") TimeField.displayName = "TimeField";
46
47
  process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
47
48
  // ----------------------------- Warning --------------------------------
48
49
  // | These PropTypes are generated from the TypeScript type definitions |
@@ -45,6 +45,7 @@ const TimePicker = /*#__PURE__*/React.forwardRef(function TimePicker(inProps, re
45
45
  ref: ref
46
46
  }, other));
47
47
  });
48
+ if (process.env.NODE_ENV !== "production") TimePicker.displayName = "TimePicker";
48
49
  process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
49
50
  // ----------------------------- Warning --------------------------------
50
51
  // | These PropTypes are generated from the TypeScript type definitions |
@@ -296,6 +296,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
296
296
  }, (_, index) => /*#__PURE__*/_jsx(YearCalendarButtonFiller, {}, index))]
297
297
  }));
298
298
  });
299
+ if (process.env.NODE_ENV !== "production") YearCalendar.displayName = "YearCalendar";
299
300
  process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
300
301
  // ----------------------------- Warning --------------------------------
301
302
  // | These PropTypes are generated from the TypeScript type definitions |
@@ -112,4 +112,5 @@ export const YearCalendarButton = /*#__PURE__*/React.memo(function YearCalendarB
112
112
  className: classes.button
113
113
  });
114
114
  return /*#__PURE__*/_jsx(YearButton, _extends({}, yearButtonProps));
115
- });
115
+ });
116
+ if (process.env.NODE_ENV !== "production") YearCalendarButton.displayName = "YearCalendarButton";
@@ -10,4 +10,4 @@ export interface YearCalendarClasses {
10
10
  }
11
11
  export type YearCalendarClassKey = keyof YearCalendarClasses;
12
12
  export declare function getYearCalendarUtilityClass(slot: string): string;
13
- export declare const yearCalendarClasses: Record<"button" | "disabled" | "selected" | "root", string>;
13
+ export declare const yearCalendarClasses: Record<"root" | "disabled" | "button" | "selected", string>;
@@ -80,4 +80,5 @@ export const renderDateViewCalendar = ({
80
80
  fixedWeekNumber: fixedWeekNumber,
81
81
  displayWeekNumber: displayWeekNumber,
82
82
  timezone: timezone
83
- });
83
+ });
84
+ if (process.env.NODE_ENV !== "production") renderDateViewCalendar.displayName = "renderDateViewCalendar";
@@ -6,6 +6,7 @@ export const IsValidValueContext = /*#__PURE__*/React.createContext(() => true);
6
6
  /**
7
7
  * Returns a function to check if a value is valid according to the validation props passed to the parent Picker.
8
8
  */
9
+ if (process.env.NODE_ENV !== "production") IsValidValueContext.displayName = "IsValidValueContext";
9
10
  export function useIsValidValue() {
10
11
  return React.useContext(IsValidValueContext);
11
12
  }
@@ -6,6 +6,7 @@ export const PickerContext = /*#__PURE__*/React.createContext(null);
6
6
  /**
7
7
  * Returns the context passed by the Picker wrapping the current component.
8
8
  */
9
+ if (process.env.NODE_ENV !== "production") PickerContext.displayName = "PickerContext";
9
10
  export const usePickerContext = () => {
10
11
  const value = React.useContext(PickerContext);
11
12
  if (value == null) {
package/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-date-pickers v8.3.0
2
+ * @mui/x-date-pickers v8.4.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -95,6 +95,7 @@ export const PickerFieldUIContext = /*#__PURE__*/React.createContext({
95
95
  * Adds the button to open the Picker and the button to clear the value of the field.
96
96
  * @ignore - internal component.
97
97
  */
98
+ if (process.env.NODE_ENV !== "production") PickerFieldUIContext.displayName = "PickerFieldUIContext";
98
99
  export function PickerFieldUI(props) {
99
100
  const {
100
101
  slots,
@@ -197,6 +197,7 @@ const PickerPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
197
197
  children: children
198
198
  }));
199
199
  });
200
+ if (process.env.NODE_ENV !== "production") PickerPopperPaperWrapper.displayName = "PickerPopperPaperWrapper";
200
201
  export function PickerPopper(inProps) {
201
202
  const props = useThemeProps({
202
203
  props: inProps,
@@ -5,6 +5,7 @@ import { PickerFieldPrivateContext } from "../hooks/useNullableFieldPrivateConte
5
5
  import { PickerContext } from "../../hooks/usePickerContext.js";
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
7
  export const PickerActionsContext = /*#__PURE__*/React.createContext(null);
8
+ if (process.env.NODE_ENV !== "production") PickerActionsContext.displayName = "PickerActionsContext";
8
9
  export const PickerPrivateContext = /*#__PURE__*/React.createContext({
9
10
  ownerState: {
10
11
  isPickerDisabled: false,
@@ -34,6 +35,7 @@ export const PickerPrivateContext = /*#__PURE__*/React.createContext({
34
35
  *
35
36
  * @ignore - do not document.
36
37
  */
38
+ if (process.env.NODE_ENV !== "production") PickerPrivateContext.displayName = "PickerPrivateContext";
37
39
  export function PickerProvider(props) {
38
40
  const {
39
41
  contextValue,
@@ -170,4 +170,5 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
170
170
  children: isRtl ? /*#__PURE__*/_jsx(LeftArrowIcon, _extends({}, leftArrowIconProps)) : /*#__PURE__*/_jsx(RightArrowIcon, _extends({}, rightArrowIconProps))
171
171
  }))]
172
172
  }));
173
- });
173
+ });
174
+ if (process.env.NODE_ENV !== "production") PickersArrowSwitcher.displayName = "PickersArrowSwitcher";
@@ -16,4 +16,4 @@ export interface PickersArrowSwitcherClasses {
16
16
  }
17
17
  export type PickersArrowSwitcherClassKey = keyof PickersArrowSwitcherClasses;
18
18
  export declare function getPickersArrowSwitcherUtilityClass(slot: string): string;
19
- export declare const pickersArrowSwitcherClasses: Record<"button" | "root" | "spacer" | "previousIconButton" | "nextIconButton" | "leftArrowIcon" | "rightArrowIcon", string>;
19
+ export declare const pickersArrowSwitcherClasses: Record<"root" | "button" | "spacer" | "previousIconButton" | "nextIconButton" | "leftArrowIcon" | "rightArrowIcon", string>;
@@ -111,4 +111,5 @@ export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersTool
111
111
  children: children
112
112
  })]
113
113
  }));
114
- });
114
+ });
115
+ if (process.env.NODE_ENV !== "production") PickersToolbar.displayName = "PickersToolbar";
@@ -58,4 +58,5 @@ export const PickersToolbarButton = /*#__PURE__*/React.forwardRef(function Picke
58
58
  selected: selected
59
59
  })
60
60
  }));
61
- });
61
+ });
62
+ if (process.env.NODE_ENV !== "production") PickersToolbarButton.displayName = "PickersToolbarButton";
@@ -49,4 +49,5 @@ export const PickersToolbarText = /*#__PURE__*/React.forwardRef(function Pickers
49
49
  }, other, {
50
50
  children: value
51
51
  }));
52
- });
52
+ });
53
+ if (process.env.NODE_ENV !== "production") PickersToolbarText.displayName = "PickersToolbarText";
@@ -8,4 +8,4 @@ export interface PickersToolbarClasses {
8
8
  }
9
9
  export type PickersToolbarClassKey = keyof PickersToolbarClasses;
10
10
  export declare function getPickersToolbarUtilityClass(slot: string): string;
11
- export declare const pickersToolbarClasses: Record<"content" | "title" | "root", string>;
11
+ export declare const pickersToolbarClasses: Record<"root" | "content" | "title", string>;
@@ -91,6 +91,7 @@ export const useDesktopPicker = _ref => {
91
91
  })]
92
92
  })
93
93
  }));
94
+ if (process.env.NODE_ENV !== "production") renderPicker.displayName = "renderPicker";
94
95
  return {
95
96
  renderPicker
96
97
  };
@@ -126,7 +126,11 @@ export const useFieldCharacterEditing = ({
126
126
  return applyQuery(params, getFirstSectionValueMatchingWithQuery);
127
127
  };
128
128
  const applyNumericEditing = params => {
129
- const getNewSectionValue = (queryValue, section) => {
129
+ const getNewSectionValue = ({
130
+ queryValue,
131
+ skipIfBelowMinimum,
132
+ section
133
+ }) => {
130
134
  const cleanQueryValue = removeLocalizedDigits(queryValue, localizedDigits);
131
135
  const queryValueNumber = Number(cleanQueryValue);
132
136
  const sectionBoundaries = sectionsValueBoundaries[section.type]({
@@ -143,7 +147,7 @@ export const useFieldCharacterEditing = ({
143
147
  // If the user types `0` on a month section,
144
148
  // It is below the minimum, but we want to store the `0` in the query,
145
149
  // So that when he pressed `1`, it will store `01` and move to the next section.
146
- if (queryValueNumber < sectionBoundaries.minimum) {
150
+ if (skipIfBelowMinimum && queryValueNumber < sectionBoundaries.minimum) {
147
151
  return {
148
152
  saveQuery: true
149
153
  };
@@ -157,20 +161,28 @@ export const useFieldCharacterEditing = ({
157
161
  };
158
162
  const getFirstSectionValueMatchingWithQuery = (queryValue, activeSection) => {
159
163
  if (activeSection.contentType === 'digit' || activeSection.contentType === 'digit-with-letter') {
160
- return getNewSectionValue(queryValue, activeSection);
164
+ return getNewSectionValue({
165
+ queryValue,
166
+ skipIfBelowMinimum: false,
167
+ section: activeSection
168
+ });
161
169
  }
162
170
 
163
171
  // When editing a letter-format month and the user presses a digit,
164
172
  // We can support the numeric editing by using the digit-format month and re-formatting the result.
165
173
  if (activeSection.type === 'month') {
166
174
  const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, 'digit', 'month', 'MM');
167
- const response = getNewSectionValue(queryValue, {
168
- type: activeSection.type,
169
- format: 'MM',
170
- hasLeadingZerosInFormat,
171
- hasLeadingZerosInInput: true,
172
- contentType: 'digit',
173
- maxLength: 2
175
+ const response = getNewSectionValue({
176
+ queryValue,
177
+ skipIfBelowMinimum: true,
178
+ section: {
179
+ type: activeSection.type,
180
+ format: 'MM',
181
+ hasLeadingZerosInFormat,
182
+ hasLeadingZerosInInput: true,
183
+ contentType: 'digit',
184
+ maxLength: 2
185
+ }
174
186
  });
175
187
  if (isQueryResponseWithoutValue(response)) {
176
188
  return response;
@@ -184,7 +196,11 @@ export const useFieldCharacterEditing = ({
184
196
  // When editing a letter-format weekDay and the user presses a digit,
185
197
  // We can support the numeric editing by returning the nth day in the week day array.
186
198
  if (activeSection.type === 'weekDay') {
187
- const response = getNewSectionValue(queryValue, activeSection);
199
+ const response = getNewSectionValue({
200
+ queryValue,
201
+ skipIfBelowMinimum: true,
202
+ section: activeSection
203
+ });
188
204
  if (isQueryResponseWithoutValue(response)) {
189
205
  return response;
190
206
  }
@@ -1,5 +1,4 @@
1
1
  import * as React from 'react';
2
- import useEventCallback from '@mui/utils/useEventCallback';
3
2
  /**
4
3
  * Generate the props to pass to the container element of each section of the field.
5
4
  * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
@@ -17,14 +16,14 @@ export function useFieldSectionContainerProps(parameters) {
17
16
  disabled = false
18
17
  }
19
18
  } = parameters;
20
- const createHandleClick = useEventCallback(sectionIndex => event => {
19
+ const createHandleClick = React.useCallback(sectionIndex => event => {
21
20
  // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
22
21
  // We avoid this by checking if the call to this function is actually intended, or a side effect.
23
22
  if (disabled || event.isDefaultPrevented()) {
24
23
  return;
25
24
  }
26
25
  setSelectedSections(sectionIndex);
27
- });
26
+ }, [disabled, setSelectedSections]);
28
27
  return React.useCallback(sectionIndex => ({
29
28
  'data-sectionindex': sectionIndex,
30
29
  onClick: createHandleClick(sectionIndex)
@@ -128,12 +128,12 @@ export function useFieldSectionContentProps(parameters) {
128
128
  event.preventDefault();
129
129
  event.dataTransfer.dropEffect = 'none';
130
130
  });
131
- const createFocusHandler = useEventCallback(sectionIndex => () => {
131
+ const createFocusHandler = React.useCallback(sectionIndex => () => {
132
132
  if (disabled) {
133
133
  return;
134
134
  }
135
135
  setSelectedSections(sectionIndex);
136
- });
136
+ }, [disabled, setSelectedSections]);
137
137
  return React.useCallback((section, sectionIndex) => {
138
138
  const sectionBoundaries = sectionsValueBoundaries[section.type]({
139
139
  currentDate: fieldValueManager.getDateFromSection(value, section),
@@ -268,10 +268,10 @@ export const useFieldState = parameters => {
268
268
  }
269
269
 
270
270
  /**
271
- * If all the sections are filled but the date is invalid,
271
+ * If all the sections are filled but the date is invalid and the previous date is valid or null,
272
272
  * Then we publish an invalid date.
273
273
  */
274
- if (newActiveDateSections.every(sectionBis => sectionBis.value !== '')) {
274
+ if (newActiveDateSections.every(sectionBis => sectionBis.value !== '') && (activeDate == null || utils.isValid(activeDate))) {
275
275
  setSectionUpdateToApplyOnNextInvalidDate(newSectionValue);
276
276
  return publishValue(fieldValueManager.updateDateInValue(value, section, newActiveDate));
277
277
  }
@@ -91,6 +91,7 @@ export const useMobilePicker = _ref => {
91
91
  })]
92
92
  })
93
93
  }));
94
+ if (process.env.NODE_ENV !== "production") renderPicker.displayName = "renderPicker";
94
95
  return {
95
96
  renderPicker
96
97
  };
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
2
  export const PickerFieldPrivateContext = /*#__PURE__*/React.createContext(null);
3
+ if (process.env.NODE_ENV !== "production") PickerFieldPrivateContext.displayName = "PickerFieldPrivateContext";
3
4
  export function useNullableFieldPrivateContext() {
4
5
  return React.useContext(PickerFieldPrivateContext);
5
6
  }
@@ -63,6 +63,7 @@ export const useStaticPicker = _ref => {
63
63
  children: renderCurrentView()
64
64
  }))
65
65
  }));
66
+ if (process.env.NODE_ENV !== "production") renderPicker.displayName = "renderPicker";
66
67
  return {
67
68
  renderPicker
68
69
  };
@@ -63,6 +63,7 @@ export const renderTimeViewClock = ({
63
63
  disableIgnoringDatePartForTimeValidation: disableIgnoringDatePartForTimeValidation,
64
64
  timezone: timezone
65
65
  });
66
+ if (process.env.NODE_ENV !== "production") renderTimeViewClock.displayName = "renderTimeViewClock";
66
67
  export const renderDigitalClockTimeView = ({
67
68
  view,
68
69
  onViewChange,
@@ -122,6 +123,7 @@ export const renderDigitalClockTimeView = ({
122
123
  skipDisabled: skipDisabled,
123
124
  timezone: timezone
124
125
  });
126
+ if (process.env.NODE_ENV !== "production") renderDigitalClockTimeView.displayName = "renderDigitalClockTimeView";
125
127
  export const renderMultiSectionDigitalClockTimeView = ({
126
128
  view,
127
129
  onViewChange,
@@ -180,4 +182,5 @@ export const renderMultiSectionDigitalClockTimeView = ({
180
182
  timeSteps: timeSteps,
181
183
  skipDisabled: skipDisabled,
182
184
  timezone: timezone
183
- });
185
+ });
186
+ if (process.env.NODE_ENV !== "production") renderMultiSectionDigitalClockTimeView.displayName = "renderMultiSectionDigitalClockTimeView";
@@ -13,6 +13,7 @@ const IsValidValueContext = exports.IsValidValueContext = /*#__PURE__*/React.cre
13
13
  /**
14
14
  * Returns a function to check if a value is valid according to the validation props passed to the parent Picker.
15
15
  */
16
+ if (process.env.NODE_ENV !== "production") IsValidValueContext.displayName = "IsValidValueContext";
16
17
  function useIsValidValue() {
17
18
  return React.useContext(IsValidValueContext);
18
19
  }
@@ -12,6 +12,7 @@ const PickerContext = exports.PickerContext = /*#__PURE__*/React.createContext(n
12
12
  /**
13
13
  * Returns the context passed by the Picker wrapping the current component.
14
14
  */
15
+ if (process.env.NODE_ENV !== "production") PickerContext.displayName = "PickerContext";
15
16
  const usePickerContext = () => {
16
17
  const value = React.useContext(PickerContext);
17
18
  if (value == null) {
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-date-pickers v8.3.0
2
+ * @mui/x-date-pickers v8.4.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -109,6 +109,7 @@ const PickerFieldUIContext = exports.PickerFieldUIContext = /*#__PURE__*/React.c
109
109
  * Adds the button to open the Picker and the button to clear the value of the field.
110
110
  * @ignore - internal component.
111
111
  */
112
+ if (process.env.NODE_ENV !== "production") PickerFieldUIContext.displayName = "PickerFieldUIContext";
112
113
  function PickerFieldUI(props) {
113
114
  const {
114
115
  slots,
@@ -205,6 +205,7 @@ const PickerPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
205
205
  children: children
206
206
  }));
207
207
  });
208
+ if (process.env.NODE_ENV !== "production") PickerPopperPaperWrapper.displayName = "PickerPopperPaperWrapper";
208
209
  function PickerPopper(inProps) {
209
210
  const props = (0, _styles.useThemeProps)({
210
211
  props: inProps,
@@ -13,6 +13,7 @@ var _useNullableFieldPrivateContext = require("../hooks/useNullableFieldPrivateC
13
13
  var _usePickerContext = require("../../hooks/usePickerContext");
14
14
  var _jsxRuntime = require("react/jsx-runtime");
15
15
  const PickerActionsContext = exports.PickerActionsContext = /*#__PURE__*/React.createContext(null);
16
+ if (process.env.NODE_ENV !== "production") PickerActionsContext.displayName = "PickerActionsContext";
16
17
  const PickerPrivateContext = exports.PickerPrivateContext = /*#__PURE__*/React.createContext({
17
18
  ownerState: {
18
19
  isPickerDisabled: false,
@@ -42,6 +43,7 @@ const PickerPrivateContext = exports.PickerPrivateContext = /*#__PURE__*/React.c
42
43
  *
43
44
  * @ignore - do not document.
44
45
  */
46
+ if (process.env.NODE_ENV !== "production") PickerPrivateContext.displayName = "PickerPrivateContext";
45
47
  function PickerProvider(props) {
46
48
  const {
47
49
  contextValue,
@@ -178,4 +178,5 @@ const PickersArrowSwitcher = exports.PickersArrowSwitcher = /*#__PURE__*/React.f
178
178
  children: isRtl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LeftArrowIcon, (0, _extends2.default)({}, leftArrowIconProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(RightArrowIcon, (0, _extends2.default)({}, rightArrowIconProps))
179
179
  }))]
180
180
  }));
181
- });
181
+ });
182
+ if (process.env.NODE_ENV !== "production") PickersArrowSwitcher.displayName = "PickersArrowSwitcher";
@@ -16,4 +16,4 @@ export interface PickersArrowSwitcherClasses {
16
16
  }
17
17
  export type PickersArrowSwitcherClassKey = keyof PickersArrowSwitcherClasses;
18
18
  export declare function getPickersArrowSwitcherUtilityClass(slot: string): string;
19
- export declare const pickersArrowSwitcherClasses: Record<"button" | "root" | "spacer" | "previousIconButton" | "nextIconButton" | "leftArrowIcon" | "rightArrowIcon", string>;
19
+ export declare const pickersArrowSwitcherClasses: Record<"root" | "button" | "spacer" | "previousIconButton" | "nextIconButton" | "leftArrowIcon" | "rightArrowIcon", string>;
@@ -119,4 +119,5 @@ const PickersToolbar = exports.PickersToolbar = /*#__PURE__*/React.forwardRef(fu
119
119
  children: children
120
120
  })]
121
121
  }));
122
- });
122
+ });
123
+ if (process.env.NODE_ENV !== "production") PickersToolbar.displayName = "PickersToolbar";
@@ -66,4 +66,5 @@ const PickersToolbarButton = exports.PickersToolbarButton = /*#__PURE__*/React.f
66
66
  selected: selected
67
67
  })
68
68
  }));
69
- });
69
+ });
70
+ if (process.env.NODE_ENV !== "production") PickersToolbarButton.displayName = "PickersToolbarButton";
@@ -57,4 +57,5 @@ const PickersToolbarText = exports.PickersToolbarText = /*#__PURE__*/React.forwa
57
57
  }, other, {
58
58
  children: value
59
59
  }));
60
- });
60
+ });
61
+ if (process.env.NODE_ENV !== "production") PickersToolbarText.displayName = "PickersToolbarText";
@@ -8,4 +8,4 @@ export interface PickersToolbarClasses {
8
8
  }
9
9
  export type PickersToolbarClassKey = keyof PickersToolbarClasses;
10
10
  export declare function getPickersToolbarUtilityClass(slot: string): string;
11
- export declare const pickersToolbarClasses: Record<"content" | "title" | "root", string>;
11
+ export declare const pickersToolbarClasses: Record<"root" | "content" | "title", string>;
@@ -98,6 +98,7 @@ const useDesktopPicker = _ref => {
98
98
  })]
99
99
  })
100
100
  }));
101
+ if (process.env.NODE_ENV !== "production") renderPicker.displayName = "renderPicker";
101
102
  return {
102
103
  renderPicker
103
104
  };
@@ -133,7 +133,11 @@ const useFieldCharacterEditing = ({
133
133
  return applyQuery(params, getFirstSectionValueMatchingWithQuery);
134
134
  };
135
135
  const applyNumericEditing = params => {
136
- const getNewSectionValue = (queryValue, section) => {
136
+ const getNewSectionValue = ({
137
+ queryValue,
138
+ skipIfBelowMinimum,
139
+ section
140
+ }) => {
137
141
  const cleanQueryValue = (0, _useField.removeLocalizedDigits)(queryValue, localizedDigits);
138
142
  const queryValueNumber = Number(cleanQueryValue);
139
143
  const sectionBoundaries = sectionsValueBoundaries[section.type]({
@@ -150,7 +154,7 @@ const useFieldCharacterEditing = ({
150
154
  // If the user types `0` on a month section,
151
155
  // It is below the minimum, but we want to store the `0` in the query,
152
156
  // So that when he pressed `1`, it will store `01` and move to the next section.
153
- if (queryValueNumber < sectionBoundaries.minimum) {
157
+ if (skipIfBelowMinimum && queryValueNumber < sectionBoundaries.minimum) {
154
158
  return {
155
159
  saveQuery: true
156
160
  };
@@ -164,20 +168,28 @@ const useFieldCharacterEditing = ({
164
168
  };
165
169
  const getFirstSectionValueMatchingWithQuery = (queryValue, activeSection) => {
166
170
  if (activeSection.contentType === 'digit' || activeSection.contentType === 'digit-with-letter') {
167
- return getNewSectionValue(queryValue, activeSection);
171
+ return getNewSectionValue({
172
+ queryValue,
173
+ skipIfBelowMinimum: false,
174
+ section: activeSection
175
+ });
168
176
  }
169
177
 
170
178
  // When editing a letter-format month and the user presses a digit,
171
179
  // We can support the numeric editing by using the digit-format month and re-formatting the result.
172
180
  if (activeSection.type === 'month') {
173
181
  const hasLeadingZerosInFormat = (0, _useField.doesSectionFormatHaveLeadingZeros)(utils, 'digit', 'month', 'MM');
174
- const response = getNewSectionValue(queryValue, {
175
- type: activeSection.type,
176
- format: 'MM',
177
- hasLeadingZerosInFormat,
178
- hasLeadingZerosInInput: true,
179
- contentType: 'digit',
180
- maxLength: 2
182
+ const response = getNewSectionValue({
183
+ queryValue,
184
+ skipIfBelowMinimum: true,
185
+ section: {
186
+ type: activeSection.type,
187
+ format: 'MM',
188
+ hasLeadingZerosInFormat,
189
+ hasLeadingZerosInInput: true,
190
+ contentType: 'digit',
191
+ maxLength: 2
192
+ }
181
193
  });
182
194
  if (isQueryResponseWithoutValue(response)) {
183
195
  return response;
@@ -191,7 +203,11 @@ const useFieldCharacterEditing = ({
191
203
  // When editing a letter-format weekDay and the user presses a digit,
192
204
  // We can support the numeric editing by returning the nth day in the week day array.
193
205
  if (activeSection.type === 'weekDay') {
194
- const response = getNewSectionValue(queryValue, activeSection);
206
+ const response = getNewSectionValue({
207
+ queryValue,
208
+ skipIfBelowMinimum: true,
209
+ section: activeSection
210
+ });
195
211
  if (isQueryResponseWithoutValue(response)) {
196
212
  return response;
197
213
  }