@mui/x-date-pickers 8.5.2 → 8.6.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 (186) hide show
  1. package/CHANGELOG.md +203 -11
  2. package/DateCalendar/DateCalendar.js +16 -16
  3. package/DateCalendar/DayCalendar.js +48 -48
  4. package/DateCalendar/useCalendarState.js +25 -25
  5. package/DateCalendar/useIsDateDisabled.js +2 -2
  6. package/DatePicker/DatePickerToolbar.js +7 -9
  7. package/DateTimeField/DateTimeField.js +1 -1
  8. package/DateTimePicker/DateTimePicker.js +1 -1
  9. package/DateTimePicker/DateTimePickerToolbar.js +12 -13
  10. package/DateTimePicker/shared.js +3 -3
  11. package/DesktopDatePicker/DesktopDatePicker.js +3 -3
  12. package/DesktopDateTimePicker/DesktopDateTimePicker.js +4 -4
  13. package/DesktopTimePicker/DesktopTimePicker.js +4 -4
  14. package/DigitalClock/DigitalClock.d.ts +1 -1
  15. package/DigitalClock/DigitalClock.js +16 -16
  16. package/LocalizationProvider/LocalizationProvider.d.ts +9 -3
  17. package/LocalizationProvider/LocalizationProvider.js +28 -19
  18. package/MobileDatePicker/MobileDatePicker.js +3 -3
  19. package/MobileDateTimePicker/MobileDateTimePicker.js +4 -4
  20. package/MobileTimePicker/MobileTimePicker.js +4 -4
  21. package/MonthCalendar/MonthCalendar.js +19 -18
  22. package/MultiSectionDigitalClock/MultiSectionDigitalClock.js +32 -32
  23. package/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.d.ts +4 -4
  24. package/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js +7 -7
  25. package/PickerDay2/PickerDay2.js +3 -3
  26. package/PickersActionBar/PickersActionBar.d.ts +2 -2
  27. package/PickersActionBar/PickersActionBar.js +2 -2
  28. package/PickersCalendarHeader/PickersCalendarHeader.js +7 -8
  29. package/PickersDay/PickersDay.js +3 -3
  30. package/PickersDay/usePickerDayOwnerState.js +5 -5
  31. package/PickersTextField/PickersFilledInput/pickersFilledInputClasses.d.ts +1 -0
  32. package/PickersTextField/PickersInput/pickersInputClasses.d.ts +1 -0
  33. package/PickersTextField/PickersInputBase/pickersInputBaseClasses.d.ts +2 -0
  34. package/PickersTextField/PickersInputBase/pickersInputBaseClasses.js +1 -1
  35. package/PickersTextField/PickersOutlinedInput/pickersOutlinedInputClasses.d.ts +1 -0
  36. package/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
  37. package/StaticTimePicker/StaticTimePicker.js +1 -1
  38. package/TimeClock/Clock.js +8 -9
  39. package/TimeClock/ClockNumbers.d.ts +3 -3
  40. package/TimeClock/ClockNumbers.js +5 -5
  41. package/TimeClock/TimeClock.js +29 -29
  42. package/TimeField/TimeField.js +1 -1
  43. package/TimePicker/TimePicker.js +1 -1
  44. package/TimePicker/TimePickerToolbar.js +7 -9
  45. package/TimePicker/shared.js +3 -3
  46. package/YearCalendar/YearCalendar.js +19 -18
  47. package/esm/DateCalendar/DateCalendar.js +16 -16
  48. package/esm/DateCalendar/DayCalendar.js +48 -48
  49. package/esm/DateCalendar/useCalendarState.js +25 -25
  50. package/esm/DateCalendar/useIsDateDisabled.js +2 -2
  51. package/esm/DatePicker/DatePickerToolbar.js +6 -8
  52. package/esm/DateTimeField/DateTimeField.js +1 -1
  53. package/esm/DateTimePicker/DateTimePicker.js +1 -1
  54. package/esm/DateTimePicker/DateTimePickerToolbar.js +11 -12
  55. package/esm/DateTimePicker/shared.js +3 -3
  56. package/esm/DesktopDatePicker/DesktopDatePicker.js +3 -3
  57. package/esm/DesktopDateTimePicker/DesktopDateTimePicker.js +4 -4
  58. package/esm/DesktopTimePicker/DesktopTimePicker.js +4 -4
  59. package/esm/DigitalClock/DigitalClock.d.ts +1 -1
  60. package/esm/DigitalClock/DigitalClock.js +16 -16
  61. package/esm/LocalizationProvider/LocalizationProvider.d.ts +9 -3
  62. package/esm/LocalizationProvider/LocalizationProvider.js +27 -18
  63. package/esm/MobileDatePicker/MobileDatePicker.js +3 -3
  64. package/esm/MobileDateTimePicker/MobileDateTimePicker.js +4 -4
  65. package/esm/MobileTimePicker/MobileTimePicker.js +4 -4
  66. package/esm/MonthCalendar/MonthCalendar.js +20 -19
  67. package/esm/MultiSectionDigitalClock/MultiSectionDigitalClock.js +32 -32
  68. package/esm/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.d.ts +4 -4
  69. package/esm/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js +7 -7
  70. package/esm/PickerDay2/PickerDay2.js +3 -3
  71. package/esm/PickersActionBar/PickersActionBar.d.ts +2 -2
  72. package/esm/PickersActionBar/PickersActionBar.js +2 -2
  73. package/esm/PickersCalendarHeader/PickersCalendarHeader.js +6 -7
  74. package/esm/PickersDay/PickersDay.js +3 -3
  75. package/esm/PickersDay/usePickerDayOwnerState.js +5 -5
  76. package/esm/PickersTextField/PickersFilledInput/pickersFilledInputClasses.d.ts +1 -0
  77. package/esm/PickersTextField/PickersInput/pickersInputClasses.d.ts +1 -0
  78. package/esm/PickersTextField/PickersInputBase/pickersInputBaseClasses.d.ts +2 -0
  79. package/esm/PickersTextField/PickersInputBase/pickersInputBaseClasses.js +1 -1
  80. package/esm/PickersTextField/PickersOutlinedInput/pickersOutlinedInputClasses.d.ts +1 -0
  81. package/esm/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
  82. package/esm/StaticTimePicker/StaticTimePicker.js +1 -1
  83. package/esm/TimeClock/Clock.js +7 -8
  84. package/esm/TimeClock/ClockNumbers.d.ts +3 -3
  85. package/esm/TimeClock/ClockNumbers.js +5 -5
  86. package/esm/TimeClock/TimeClock.js +29 -29
  87. package/esm/TimeField/TimeField.js +1 -1
  88. package/esm/TimePicker/TimePicker.js +1 -1
  89. package/esm/TimePicker/TimePickerToolbar.js +6 -8
  90. package/esm/TimePicker/shared.js +3 -3
  91. package/esm/YearCalendar/YearCalendar.js +20 -19
  92. package/esm/hooks/index.d.ts +2 -1
  93. package/esm/hooks/index.js +2 -1
  94. package/esm/hooks/useParsedFormat.js +6 -6
  95. package/esm/hooks/usePickerAdapter.d.ts +7 -0
  96. package/esm/hooks/usePickerAdapter.js +20 -0
  97. package/esm/hooks/usePickerTranslations.js +1 -1
  98. package/esm/index.js +1 -1
  99. package/esm/internals/components/pickersToolbarClasses.d.ts +1 -1
  100. package/esm/internals/demo/DemoContainer.d.ts +2 -3
  101. package/esm/internals/demo/DemoContainer.js +3 -2
  102. package/esm/internals/hooks/date-helpers-hooks.js +16 -16
  103. package/esm/internals/hooks/useClockReferenceDate.d.ts +2 -2
  104. package/esm/internals/hooks/useClockReferenceDate.js +3 -3
  105. package/esm/internals/hooks/useControlledValue.js +8 -7
  106. package/esm/internals/hooks/useField/buildSectionsFromFormat.d.ts +1 -1
  107. package/esm/internals/hooks/useField/buildSectionsFromFormat.js +17 -17
  108. package/esm/internals/hooks/useField/useField.types.d.ts +2 -2
  109. package/esm/internals/hooks/useField/useField.utils.d.ts +10 -10
  110. package/esm/internals/hooks/useField/useField.utils.js +69 -69
  111. package/esm/internals/hooks/useField/useFieldCharacterEditing.js +11 -11
  112. package/esm/internals/hooks/useField/useFieldRootHandleKeyDown.js +7 -7
  113. package/esm/internals/hooks/useField/useFieldSectionContentProps.js +15 -16
  114. package/esm/internals/hooks/useField/useFieldState.js +22 -24
  115. package/esm/internals/hooks/usePicker/hooks/useValueAndOpenStates.js +6 -6
  116. package/esm/internals/hooks/usePicker/usePicker.js +5 -6
  117. package/esm/internals/hooks/useUtils.d.ts +1 -8
  118. package/esm/internals/hooks/useUtils.js +3 -19
  119. package/esm/internals/index.d.ts +2 -1
  120. package/esm/internals/index.js +2 -1
  121. package/esm/internals/models/manager.d.ts +14 -14
  122. package/esm/internals/models/props/time.d.ts +1 -1
  123. package/esm/internals/utils/date-time-utils.d.ts +1 -1
  124. package/esm/internals/utils/date-time-utils.js +5 -5
  125. package/esm/internals/utils/date-utils.d.ts +11 -11
  126. package/esm/internals/utils/date-utils.js +34 -34
  127. package/esm/internals/utils/getDefaultReferenceDate.d.ts +2 -2
  128. package/esm/internals/utils/getDefaultReferenceDate.js +16 -16
  129. package/esm/internals/utils/time-utils.d.ts +5 -5
  130. package/esm/internals/utils/time-utils.js +12 -12
  131. package/esm/internals/utils/valueManagers.js +4 -4
  132. package/esm/managers/useDateManager.js +12 -12
  133. package/esm/managers/useDateTimeManager.js +13 -13
  134. package/esm/managers/useTimeManager.js +9 -10
  135. package/esm/validation/useValidation.d.ts +2 -3
  136. package/esm/validation/useValidation.js +2 -2
  137. package/esm/validation/validateDate.js +6 -6
  138. package/esm/validation/validateTime.js +6 -6
  139. package/hooks/index.d.ts +2 -1
  140. package/hooks/index.js +8 -1
  141. package/hooks/useParsedFormat.js +6 -6
  142. package/hooks/usePickerAdapter.d.ts +7 -0
  143. package/hooks/usePickerAdapter.js +29 -0
  144. package/hooks/usePickerTranslations.js +2 -2
  145. package/index.js +1 -1
  146. package/internals/components/pickersToolbarClasses.d.ts +1 -1
  147. package/internals/demo/DemoContainer.d.ts +2 -3
  148. package/internals/demo/DemoContainer.js +3 -2
  149. package/internals/hooks/date-helpers-hooks.js +16 -16
  150. package/internals/hooks/useClockReferenceDate.d.ts +2 -2
  151. package/internals/hooks/useClockReferenceDate.js +3 -3
  152. package/internals/hooks/useControlledValue.js +7 -7
  153. package/internals/hooks/useField/buildSectionsFromFormat.d.ts +1 -1
  154. package/internals/hooks/useField/buildSectionsFromFormat.js +17 -17
  155. package/internals/hooks/useField/useField.types.d.ts +2 -2
  156. package/internals/hooks/useField/useField.utils.d.ts +10 -10
  157. package/internals/hooks/useField/useField.utils.js +69 -69
  158. package/internals/hooks/useField/useFieldCharacterEditing.js +11 -11
  159. package/internals/hooks/useField/useFieldRootHandleKeyDown.js +7 -7
  160. package/internals/hooks/useField/useFieldSectionContentProps.js +14 -15
  161. package/internals/hooks/useField/useFieldState.js +23 -25
  162. package/internals/hooks/usePicker/hooks/useValueAndOpenStates.js +6 -6
  163. package/internals/hooks/usePicker/usePicker.js +5 -6
  164. package/internals/hooks/useUtils.d.ts +1 -8
  165. package/internals/hooks/useUtils.js +5 -24
  166. package/internals/index.d.ts +2 -1
  167. package/internals/index.js +2 -7
  168. package/internals/models/manager.d.ts +14 -14
  169. package/internals/models/props/time.d.ts +1 -1
  170. package/internals/utils/date-time-utils.d.ts +1 -1
  171. package/internals/utils/date-time-utils.js +5 -5
  172. package/internals/utils/date-utils.d.ts +11 -11
  173. package/internals/utils/date-utils.js +34 -34
  174. package/internals/utils/getDefaultReferenceDate.d.ts +2 -2
  175. package/internals/utils/getDefaultReferenceDate.js +16 -16
  176. package/internals/utils/time-utils.d.ts +5 -5
  177. package/internals/utils/time-utils.js +12 -12
  178. package/internals/utils/valueManagers.js +4 -4
  179. package/managers/useDateManager.js +12 -12
  180. package/managers/useDateTimeManager.js +13 -13
  181. package/managers/useTimeManager.js +10 -11
  182. package/package.json +2 -2
  183. package/validation/useValidation.d.ts +2 -3
  184. package/validation/useValidation.js +2 -2
  185. package/validation/validateDate.js +6 -6
  186. package/validation/validateTime.js +6 -6
@@ -1,7 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import useEventCallback from '@mui/utils/useEventCallback';
3
- import { useUtils } from "../useUtils.js";
4
3
  import { changeSectionValueFormat, cleanDigitSectionValue, doesSectionFormatHaveLeadingZeros, getDateSectionConfigFromFormatToken, getDaysInWeekStr, getLetterEditingOptions, applyLocalizedDigits, removeLocalizedDigits, isStringNumber } from "./useField.utils.js";
4
+ import { usePickerAdapter } from "../../../hooks/usePickerAdapter.js";
5
5
  const isQueryResponseWithoutValue = response => response.saveQuery != null;
6
6
 
7
7
  /**
@@ -24,7 +24,7 @@ export const useFieldCharacterEditing = ({
24
24
  updateSectionValue
25
25
  }
26
26
  }) => {
27
- const utils = useUtils();
27
+ const adapter = usePickerAdapter();
28
28
  const applyQuery = ({
29
29
  keyPressed,
30
30
  sectionIndex
@@ -75,7 +75,7 @@ export const useFieldCharacterEditing = ({
75
75
  };
76
76
  };
77
77
  const testQueryOnFormatAndFallbackFormat = (queryValue, activeSection, fallbackFormat, formatFallbackValue) => {
78
- const getOptions = format => getLetterEditingOptions(utils, timezone, activeSection.type, format);
78
+ const getOptions = format => getLetterEditingOptions(adapter, timezone, activeSection.type, format);
79
79
  if (activeSection.contentType === 'letter') {
80
80
  return findMatchingOptions(activeSection.format, getOptions(activeSection.format), queryValue);
81
81
  }
@@ -83,7 +83,7 @@ export const useFieldCharacterEditing = ({
83
83
  // When editing a digit-format month / weekDay and the user presses a letter,
84
84
  // We can support the letter editing by using the letter-format month / weekDay and re-formatting the result.
85
85
  // We just have to make sure that the default month / weekDay format is a letter format,
86
- if (fallbackFormat && formatFallbackValue != null && getDateSectionConfigFromFormatToken(utils, fallbackFormat).contentType === 'letter') {
86
+ if (fallbackFormat && formatFallbackValue != null && getDateSectionConfigFromFormatToken(adapter, fallbackFormat).contentType === 'letter') {
87
87
  const fallbackOptions = getOptions(fallbackFormat);
88
88
  const response = findMatchingOptions(fallbackFormat, fallbackOptions, queryValue);
89
89
  if (isQueryResponseWithoutValue(response)) {
@@ -103,13 +103,13 @@ export const useFieldCharacterEditing = ({
103
103
  switch (activeSection.type) {
104
104
  case 'month':
105
105
  {
106
- const formatFallbackValue = fallbackValue => changeSectionValueFormat(utils, fallbackValue, utils.formats.month, activeSection.format);
107
- return testQueryOnFormatAndFallbackFormat(queryValue, activeSection, utils.formats.month, formatFallbackValue);
106
+ const formatFallbackValue = fallbackValue => changeSectionValueFormat(adapter, fallbackValue, adapter.formats.month, activeSection.format);
107
+ return testQueryOnFormatAndFallbackFormat(queryValue, activeSection, adapter.formats.month, formatFallbackValue);
108
108
  }
109
109
  case 'weekDay':
110
110
  {
111
111
  const formatFallbackValue = (fallbackValue, fallbackOptions) => fallbackOptions.indexOf(fallbackValue).toString();
112
- return testQueryOnFormatAndFallbackFormat(queryValue, activeSection, utils.formats.weekday, formatFallbackValue);
112
+ return testQueryOnFormatAndFallbackFormat(queryValue, activeSection, adapter.formats.weekday, formatFallbackValue);
113
113
  }
114
114
  case 'meridiem':
115
115
  {
@@ -153,7 +153,7 @@ export const useFieldCharacterEditing = ({
153
153
  };
154
154
  }
155
155
  const shouldGoToNextSection = queryValueNumber * 10 > sectionBoundaries.maximum || cleanQueryValue.length === sectionBoundaries.maximum.toString().length;
156
- const newSectionValue = cleanDigitSectionValue(utils, queryValueNumber, sectionBoundaries, localizedDigits, section);
156
+ const newSectionValue = cleanDigitSectionValue(adapter, queryValueNumber, sectionBoundaries, localizedDigits, section);
157
157
  return {
158
158
  sectionValue: newSectionValue,
159
159
  shouldGoToNextSection
@@ -171,7 +171,7 @@ export const useFieldCharacterEditing = ({
171
171
  // When editing a letter-format month and the user presses a digit,
172
172
  // We can support the numeric editing by using the digit-format month and re-formatting the result.
173
173
  if (activeSection.type === 'month') {
174
- const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, 'digit', 'month', 'MM');
174
+ const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(adapter, 'digit', 'month', 'MM');
175
175
  const response = getNewSectionValue({
176
176
  queryValue,
177
177
  skipIfBelowMinimum: true,
@@ -187,7 +187,7 @@ export const useFieldCharacterEditing = ({
187
187
  if (isQueryResponseWithoutValue(response)) {
188
188
  return response;
189
189
  }
190
- const formattedValue = changeSectionValueFormat(utils, response.sectionValue, 'MM', activeSection.format);
190
+ const formattedValue = changeSectionValueFormat(adapter, response.sectionValue, 'MM', activeSection.format);
191
191
  return _extends({}, response, {
192
192
  sectionValue: formattedValue
193
193
  });
@@ -204,7 +204,7 @@ export const useFieldCharacterEditing = ({
204
204
  if (isQueryResponseWithoutValue(response)) {
205
205
  return response;
206
206
  }
207
- const formattedValue = getDaysInWeekStr(utils, activeSection.format)[Number(response.sectionValue) - 1];
207
+ const formattedValue = getDaysInWeekStr(adapter, activeSection.format)[Number(response.sectionValue) - 1];
208
208
  return _extends({}, response, {
209
209
  sectionValue: formattedValue
210
210
  });
@@ -1,12 +1,12 @@
1
1
  import useEventCallback from '@mui/utils/useEventCallback';
2
- import { useUtils } from "../useUtils.js";
3
2
  import { cleanDigitSectionValue, getLetterEditingOptions, removeLocalizedDigits } from "./useField.utils.js";
3
+ import { usePickerAdapter } from "../../../hooks/usePickerAdapter.js";
4
4
 
5
5
  /**
6
6
  * Returns the `onKeyDown` handler to pass to the root element of the field.
7
7
  */
8
8
  export function useFieldRootHandleKeyDown(parameters) {
9
- const utils = useUtils();
9
+ const adapter = usePickerAdapter();
10
10
  const {
11
11
  manager: {
12
12
  internal_fieldValueManager: fieldValueManager
@@ -112,7 +112,7 @@ export function useFieldRootHandleKeyDown(parameters) {
112
112
  setSelectedSections(activeSectionIndex);
113
113
  }
114
114
  const activeSection = state.sections[activeSectionIndex];
115
- const newSectionValue = adjustSectionValue(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, fieldValueManager.getDateFromSection(value, activeSection), {
115
+ const newSectionValue = adjustSectionValue(adapter, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, fieldValueManager.getDateFromSection(value, activeSection), {
116
116
  minutesStep
117
117
  });
118
118
  updateSectionValue({
@@ -139,7 +139,7 @@ function getDeltaFromKeyCode(keyCode) {
139
139
  return 0;
140
140
  }
141
141
  }
142
- function adjustSectionValue(utils, timezone, section, keyCode, sectionsValueBoundaries, localizedDigits, activeDate, stepsAttributes) {
142
+ function adjustSectionValue(adapter, timezone, section, keyCode, sectionsValueBoundaries, localizedDigits, activeDate, stepsAttributes) {
143
143
  const delta = getDeltaFromKeyCode(keyCode);
144
144
  const isStart = keyCode === 'Home';
145
145
  const isEnd = keyCode === 'End';
@@ -150,12 +150,12 @@ function adjustSectionValue(utils, timezone, section, keyCode, sectionsValueBoun
150
150
  format: section.format,
151
151
  contentType: section.contentType
152
152
  });
153
- const getCleanValue = value => cleanDigitSectionValue(utils, value, sectionBoundaries, localizedDigits, section);
153
+ const getCleanValue = value => cleanDigitSectionValue(adapter, value, sectionBoundaries, localizedDigits, section);
154
154
  const step = section.type === 'minutes' && stepsAttributes?.minutesStep ? stepsAttributes.minutesStep : 1;
155
155
  let newSectionValueNumber;
156
156
  if (shouldSetAbsolute) {
157
157
  if (section.type === 'year' && !isEnd && !isStart) {
158
- return utils.formatByString(utils.date(undefined, timezone), section.format);
158
+ return adapter.formatByString(adapter.date(undefined, timezone), section.format);
159
159
  }
160
160
  if (delta > 0 || isStart) {
161
161
  newSectionValueNumber = sectionBoundaries.minimum;
@@ -183,7 +183,7 @@ function adjustSectionValue(utils, timezone, section, keyCode, sectionsValueBoun
183
183
  return getCleanValue(newSectionValueNumber);
184
184
  };
185
185
  const adjustLetterSection = () => {
186
- const options = getLetterEditingOptions(utils, timezone, section.type, section.format);
186
+ const options = getLetterEditingOptions(adapter, timezone, section.type, section.format);
187
187
  if (options.length === 0) {
188
188
  return section.value;
189
189
  }
@@ -1,8 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import useEventCallback from '@mui/utils/useEventCallback';
3
3
  import useId from '@mui/utils/useId';
4
- import { useUtils } from "../useUtils.js";
5
- import { usePickerTranslations } from "../../../hooks/index.js";
4
+ import { usePickerAdapter, usePickerTranslations } from "../../../hooks/index.js";
6
5
  import { syncSelectionToDOM } from "./syncSelectionToDOM.js";
7
6
  /**
8
7
  * Generate the props to pass to the content element of each section of the field.
@@ -12,7 +11,7 @@ import { syncSelectionToDOM } from "./syncSelectionToDOM.js";
12
11
  * @returns {UseFieldRootPropsReturnValue} The props to forward to the content element of each section of the field.
13
12
  */
14
13
  export function useFieldSectionContentProps(parameters) {
15
- const utils = useUtils();
14
+ const adapter = usePickerAdapter();
16
15
  const translations = usePickerTranslations();
17
16
  const id = useId();
18
17
  const {
@@ -150,10 +149,10 @@ export function useFieldSectionContentProps(parameters) {
150
149
  // Aria attributes
151
150
  'aria-labelledby': `${id}-${section.type}`,
152
151
  'aria-readonly': readOnly,
153
- 'aria-valuenow': getSectionValueNow(section, utils),
152
+ 'aria-valuenow': getSectionValueNow(section, adapter),
154
153
  'aria-valuemin': sectionBoundaries.minimum,
155
154
  'aria-valuemax': sectionBoundaries.maximum,
156
- 'aria-valuetext': section.value ? getSectionValueText(section, utils) : translations.empty,
155
+ 'aria-valuetext': section.value ? getSectionValueText(section, adapter) : translations.empty,
157
156
  'aria-label': translations[section.type],
158
157
  'aria-disabled': disabled,
159
158
  // Other
@@ -168,9 +167,9 @@ export function useFieldSectionContentProps(parameters) {
168
167
  children: section.value || section.placeholder,
169
168
  inputMode: section.contentType === 'letter' ? 'text' : 'numeric'
170
169
  };
171
- }, [sectionsValueBoundaries, id, isContainerEditable, disabled, readOnly, isEditable, translations, utils, handleInput, handlePaste, handleMouseUp, handleDragOver, createFocusHandler, fieldValueManager, value]);
170
+ }, [sectionsValueBoundaries, id, isContainerEditable, disabled, readOnly, isEditable, translations, adapter, handleInput, handlePaste, handleMouseUp, handleDragOver, createFocusHandler, fieldValueManager, value]);
172
171
  }
173
- function getSectionValueText(section, utils) {
172
+ function getSectionValueText(section, adapter) {
174
173
  if (!section.value) {
175
174
  return undefined;
176
175
  }
@@ -178,13 +177,13 @@ function getSectionValueText(section, utils) {
178
177
  case 'month':
179
178
  {
180
179
  if (section.contentType === 'digit') {
181
- return utils.format(utils.setMonth(utils.date(), Number(section.value) - 1), 'month');
180
+ return adapter.format(adapter.setMonth(adapter.date(), Number(section.value) - 1), 'month');
182
181
  }
183
- const parsedDate = utils.parse(section.value, section.format);
184
- return parsedDate ? utils.format(parsedDate, 'month') : undefined;
182
+ const parsedDate = adapter.parse(section.value, section.format);
183
+ return parsedDate ? adapter.format(parsedDate, 'month') : undefined;
185
184
  }
186
185
  case 'day':
187
- return section.contentType === 'digit' ? utils.format(utils.setDate(utils.startOfYear(utils.date()), Number(section.value)), 'dayOfMonthFull') : section.value;
186
+ return section.contentType === 'digit' ? adapter.format(adapter.setDate(adapter.startOfYear(adapter.date()), Number(section.value)), 'dayOfMonthFull') : section.value;
188
187
  case 'weekDay':
189
188
  // TODO: improve by providing the label of the week day
190
189
  return undefined;
@@ -192,7 +191,7 @@ function getSectionValueText(section, utils) {
192
191
  return undefined;
193
192
  }
194
193
  }
195
- function getSectionValueNow(section, utils) {
194
+ function getSectionValueNow(section, adapter) {
196
195
  if (!section.value) {
197
196
  return undefined;
198
197
  }
@@ -207,9 +206,9 @@ function getSectionValueNow(section, utils) {
207
206
  }
208
207
  case 'meridiem':
209
208
  {
210
- const parsedDate = utils.parse(`01:00 ${section.value}`, `${utils.formats.hours12h}:${utils.formats.minutes} ${section.format}`);
209
+ const parsedDate = adapter.parse(`01:00 ${section.value}`, `${adapter.formats.hours12h}:${adapter.formats.minutes} ${section.format}`);
211
210
  if (parsedDate) {
212
- return utils.getHours(parsedDate) >= 12 ? 1 : 0;
211
+ return adapter.getHours(parsedDate) >= 12 ? 1 : 0;
213
212
  }
214
213
  return undefined;
215
214
  }
@@ -220,8 +219,8 @@ function getSectionValueNow(section, utils) {
220
219
  if (section.contentType === 'digit') {
221
220
  return Number(section.value);
222
221
  }
223
- const parsedDate = utils.parse(section.value, section.format);
224
- return parsedDate ? utils.getMonth(parsedDate) + 1 : undefined;
222
+ const parsedDate = adapter.parse(section.value, section.format);
223
+ return parsedDate ? adapter.getMonth(parsedDate) + 1 : undefined;
225
224
  }
226
225
  default:
227
226
  return section.contentType !== 'letter' ? Number(section.value) : undefined;
@@ -4,8 +4,7 @@ import useControlled from '@mui/utils/useControlled';
4
4
  import useTimeout from '@mui/utils/useTimeout';
5
5
  import useEventCallback from '@mui/utils/useEventCallback';
6
6
  import { useRtl } from '@mui/system/RtlProvider';
7
- import { usePickerTranslations } from "../../../hooks/usePickerTranslations.js";
8
- import { useUtils, useLocalizationContext } from "../useUtils.js";
7
+ import { usePickerAdapter, usePickerTranslations } from "../../../hooks/index.js";
9
8
  import { mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections, parseSelectedSections, getLocalizedDigits, getSectionOrder } from "./useField.utils.js";
10
9
  import { buildSectionsFromFormat } from "./buildSectionsFromFormat.js";
11
10
  import { useValidation } from "../../../validation/index.js";
@@ -13,9 +12,8 @@ import { useControlledValue } from "../useControlledValue.js";
13
12
  import { getSectionTypeGranularity } from "../../utils/getDefaultReferenceDate.js";
14
13
  const QUERY_LIFE_DURATION_MS = 5000;
15
14
  export const useFieldState = parameters => {
16
- const utils = useUtils();
15
+ const adapter = usePickerAdapter();
17
16
  const translations = usePickerTranslations();
18
- const adapter = useLocalizationContext();
19
17
  const isRtl = useRtl();
20
18
  const {
21
19
  manager: {
@@ -76,10 +74,10 @@ export const useFieldState = parameters => {
76
74
  }
77
75
  return hasValidationError;
78
76
  }, [hasValidationError, errorProp]);
79
- const localizedDigits = React.useMemo(() => getLocalizedDigits(utils), [utils]);
80
- const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils, localizedDigits, timezone), [utils, localizedDigits, timezone]);
77
+ const localizedDigits = React.useMemo(() => getLocalizedDigits(adapter), [adapter]);
78
+ const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(adapter, localizedDigits, timezone), [adapter, localizedDigits, timezone]);
81
79
  const getSectionsFromValue = React.useCallback(valueToAnalyze => fieldValueManager.getSectionsFromValue(valueToAnalyze, date => buildSectionsFromFormat({
82
- utils,
80
+ adapter,
83
81
  localeText: translations,
84
82
  localizedDigits,
85
83
  format,
@@ -88,7 +86,7 @@ export const useFieldState = parameters => {
88
86
  shouldRespectLeadingZeros,
89
87
  enableAccessibleFieldDOMStructure,
90
88
  isRtl
91
- })), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros, utils, formatDensity, enableAccessibleFieldDOMStructure]);
89
+ })), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros, adapter, formatDensity, enableAccessibleFieldDOMStructure]);
92
90
  const [state, setState] = React.useState(() => {
93
91
  const sections = getSectionsFromValue(value);
94
92
  validateSections(sections, valueType);
@@ -98,7 +96,7 @@ export const useFieldState = parameters => {
98
96
  lastSectionsDependencies: {
99
97
  format,
100
98
  isRtl,
101
- locale: utils.locale
99
+ locale: adapter.locale
102
100
  },
103
101
  tempValueStrAndroid: null,
104
102
  characterQuery: null
@@ -107,7 +105,7 @@ export const useFieldState = parameters => {
107
105
  const referenceValue = valueManager.getInitialReferenceValue({
108
106
  referenceDate: referenceDateProp,
109
107
  value,
110
- utils,
108
+ adapter,
111
109
  props: internalPropsWithDefaults,
112
110
  granularity,
113
111
  timezone
@@ -164,7 +162,7 @@ export const useFieldState = parameters => {
164
162
  });
165
163
  };
166
164
  const clearValue = () => {
167
- if (valueManager.areValuesEqual(utils, value, valueManager.emptyValue)) {
165
+ if (valueManager.areValuesEqual(adapter, value, valueManager.emptyValue)) {
168
166
  setState(prevState => _extends({}, prevState, {
169
167
  sections: prevState.sections.map(section => _extends({}, section, {
170
168
  value: ''
@@ -203,12 +201,12 @@ export const useFieldState = parameters => {
203
201
  };
204
202
  const updateValueFromValueStr = valueStr => {
205
203
  const parseDateStr = (dateStr, referenceDate) => {
206
- const date = utils.parse(dateStr, format);
207
- if (!utils.isValid(date)) {
204
+ const date = adapter.parse(dateStr, format);
205
+ if (!adapter.isValid(date)) {
208
206
  return null;
209
207
  }
210
208
  const sections = buildSectionsFromFormat({
211
- utils,
209
+ adapter,
212
210
  localeText: translations,
213
211
  localizedDigits,
214
212
  format,
@@ -218,7 +216,7 @@ export const useFieldState = parameters => {
218
216
  enableAccessibleFieldDOMStructure,
219
217
  isRtl
220
218
  });
221
- return mergeDateIntoReferenceDate(utils, date, sections, referenceDate, false);
219
+ return mergeDateIntoReferenceDate(adapter, date, sections, referenceDate, false);
222
220
  };
223
221
  const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);
224
222
  publishValue(newValue);
@@ -245,15 +243,15 @@ export const useFieldState = parameters => {
245
243
  */
246
244
  const newSections = setSectionValue(activeSectionIndex, newSectionValue);
247
245
  const newActiveDateSections = fieldValueManager.getDateSectionsFromValue(newSections, section);
248
- const newActiveDate = getDateFromDateSections(utils, newActiveDateSections, localizedDigits);
246
+ const newActiveDate = getDateFromDateSections(adapter, newActiveDateSections, localizedDigits);
249
247
 
250
248
  /**
251
249
  * If the new date is valid,
252
250
  * Then we merge the value of the modified sections into the reference date.
253
251
  * This makes sure that we don't lose some information of the initial date (like the time on a date field).
254
252
  */
255
- if (utils.isValid(newActiveDate)) {
256
- const mergedDate = mergeDateIntoReferenceDate(utils, newActiveDate, newActiveDateSections, fieldValueManager.getDateFromSection(state.referenceValue, section), true);
253
+ if (adapter.isValid(newActiveDate)) {
254
+ const mergedDate = mergeDateIntoReferenceDate(adapter, newActiveDate, newActiveDateSections, fieldValueManager.getDateFromSection(state.referenceValue, section), true);
257
255
  if (activeDate == null) {
258
256
  cleanActiveDateSectionsIfValueNullTimeout.start(0, () => {
259
257
  if (valueRef.current === value) {
@@ -271,7 +269,7 @@ export const useFieldState = parameters => {
271
269
  * If all the sections are filled but the date is invalid and the previous date is valid or null,
272
270
  * Then we publish an invalid date.
273
271
  */
274
- if (newActiveDateSections.every(sectionBis => sectionBis.value !== '') && (activeDate == null || utils.isValid(activeDate))) {
272
+ if (newActiveDateSections.every(sectionBis => sectionBis.value !== '') && (activeDate == null || adapter.isValid(activeDate))) {
275
273
  setSectionUpdateToApplyOnNextInvalidDate(newSectionValue);
276
274
  return publishValue(fieldValueManager.updateDateInValue(value, section, newActiveDate));
277
275
  }
@@ -306,7 +304,7 @@ export const useFieldState = parameters => {
306
304
  // If `prop.value` changes, we update the state to reflect the new value
307
305
  if (value !== state.lastExternalValue) {
308
306
  let sections;
309
- if (sectionToUpdateOnNextInvalidDateRef.current != null && !utils.isValid(fieldValueManager.getDateFromSection(value, state.sections[sectionToUpdateOnNextInvalidDateRef.current.sectionIndex]))) {
307
+ if (sectionToUpdateOnNextInvalidDateRef.current != null && !adapter.isValid(fieldValueManager.getDateFromSection(value, state.sections[sectionToUpdateOnNextInvalidDateRef.current.sectionIndex]))) {
310
308
  sections = setSectionValue(sectionToUpdateOnNextInvalidDateRef.current.sectionIndex, sectionToUpdateOnNextInvalidDateRef.current.value);
311
309
  } else {
312
310
  sections = getSectionsFromValue(value);
@@ -317,20 +315,20 @@ export const useFieldState = parameters => {
317
315
  sectionsDependencies: {
318
316
  format,
319
317
  isRtl,
320
- locale: utils.locale
318
+ locale: adapter.locale
321
319
  },
322
- referenceValue: fieldValueManager.updateReferenceValue(utils, value, prevState.referenceValue),
320
+ referenceValue: fieldValueManager.updateReferenceValue(adapter, value, prevState.referenceValue),
323
321
  tempValueStrAndroid: null
324
322
  }));
325
323
  }
326
- if (isRtl !== state.lastSectionsDependencies.isRtl || format !== state.lastSectionsDependencies.format || utils.locale !== state.lastSectionsDependencies.locale) {
324
+ if (isRtl !== state.lastSectionsDependencies.isRtl || format !== state.lastSectionsDependencies.format || adapter.locale !== state.lastSectionsDependencies.locale) {
327
325
  const sections = getSectionsFromValue(value);
328
326
  validateSections(sections, valueType);
329
327
  setState(prevState => _extends({}, prevState, {
330
328
  lastSectionsDependencies: {
331
329
  format,
332
330
  isRtl,
333
- locale: utils.locale
331
+ locale: adapter.locale
334
332
  },
335
333
  sections,
336
334
  tempValueStrAndroid: null,
@@ -3,7 +3,7 @@ import * as React from 'react';
3
3
  import { warnOnce } from '@mui/x-internals/warning';
4
4
  import useEventCallback from '@mui/utils/useEventCallback';
5
5
  import { useControlledValue } from "../../useControlledValue.js";
6
- import { useUtils } from "../../useUtils.js";
6
+ import { usePickerAdapter } from "../../../../hooks/usePickerAdapter.js";
7
7
  import { useValidation } from "../../../../validation/index.js";
8
8
  export function useValueAndOpenStates(parameters) {
9
9
  const {
@@ -32,7 +32,7 @@ export function useValueAndOpenStates(parameters) {
32
32
  const {
33
33
  current: isOpenControlled
34
34
  } = React.useRef(openProp !== undefined);
35
- const utils = useUtils();
35
+ const adapter = usePickerAdapter();
36
36
  if (process.env.NODE_ENV !== 'production') {
37
37
  if (props.renderInput != null) {
38
38
  warnOnce(['MUI X: The `renderInput` prop has been removed in version 6.0 of the Date and Time Pickers.', 'You can replace it with the `textField` component slot in most cases.', 'For more information, please have a look at the migration guide (https://mui.com/x/migration/migration-pickers-v5/#input-renderer-required-in-v5).']);
@@ -113,13 +113,13 @@ export function useValueAndOpenStates(parameters) {
113
113
  shouldFireOnChange = true;
114
114
  shouldFireOnAccept = changeImportance === 'accept';
115
115
  } else {
116
- shouldFireOnChange = !valueManager.areValuesEqual(utils, newValue, value);
117
- shouldFireOnAccept = changeImportance === 'accept' && !valueManager.areValuesEqual(utils, newValue, state.lastCommittedValue);
116
+ shouldFireOnChange = !valueManager.areValuesEqual(adapter, newValue, value);
117
+ shouldFireOnAccept = changeImportance === 'accept' && !valueManager.areValuesEqual(adapter, newValue, state.lastCommittedValue);
118
118
  }
119
119
  setState(prevState => _extends({}, prevState, {
120
120
  // We reset the shallow value whenever we fire onChange.
121
121
  clockShallowValue: shouldFireOnChange ? undefined : prevState.clockShallowValue,
122
- lastCommittedValue: shouldFireOnAccept ? value : prevState.lastCommittedValue,
122
+ lastCommittedValue: shouldFireOnAccept ? newValue : prevState.lastCommittedValue,
123
123
  hasBeenModifiedSinceMount: true
124
124
  }));
125
125
  let cachedContext = null;
@@ -179,7 +179,7 @@ export function useValueAndOpenStates(parameters) {
179
179
  }));
180
180
  }
181
181
  }, [isOpenControlled, openProp]);
182
- const viewValue = React.useMemo(() => valueManager.cleanValue(utils, state.clockShallowValue === undefined ? value : state.clockShallowValue), [utils, valueManager, state.clockShallowValue, value]);
182
+ const viewValue = React.useMemo(() => valueManager.cleanValue(adapter, state.clockShallowValue === undefined ? value : state.clockShallowValue), [adapter, valueManager, state.clockShallowValue, value]);
183
183
  return {
184
184
  timezone,
185
185
  state,
@@ -6,7 +6,7 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
6
6
  import useEventCallback from '@mui/utils/useEventCallback';
7
7
  import useForkRef from '@mui/utils/useForkRef';
8
8
  import useId from '@mui/utils/useId';
9
- import { useLocalizationContext, useUtils } from "../useUtils.js";
9
+ import { usePickerAdapter } from "../../../hooks/usePickerAdapter.js";
10
10
  import { useReduceAnimations } from "../useReduceAnimations.js";
11
11
  import { isTimeView } from "../../utils/time-utils.js";
12
12
  import { useViews } from "../useViews.js";
@@ -62,8 +62,7 @@ export const usePicker = ({
62
62
  * TODO: Improve how we generate the aria-label and aria-labelledby attributes.
63
63
  */
64
64
  const labelId = useId();
65
- const utils = useUtils();
66
- const adapter = useLocalizationContext();
65
+ const adapter = usePickerAdapter();
67
66
  const reduceAnimations = useReduceAnimations(reduceAnimationsProp);
68
67
  const orientation = useOrientation(views, orientationProp);
69
68
  const {
@@ -111,7 +110,7 @@ export const usePicker = ({
111
110
  getStepNavigation
112
111
  });
113
112
  const clearValue = useEventCallback(() => setValue(valueManager.emptyValue));
114
- const setValueToToday = useEventCallback(() => setValue(valueManager.getTodayValue(utils, timezone, valueType)));
113
+ const setValueToToday = useEventCallback(() => setValue(valueManager.getTodayValue(adapter, timezone, valueType)));
115
114
  const acceptValueChanges = useEventCallback(() => setValue(value));
116
115
  const cancelValueChanges = useEventCallback(() => setValue(state.lastCommittedValue, {
117
116
  skipPublicationIfPristine: true
@@ -181,13 +180,13 @@ export const usePicker = ({
181
180
  }, [state.open]); // eslint-disable-line react-hooks/exhaustive-deps
182
181
 
183
182
  const ownerState = React.useMemo(() => ({
184
- isPickerValueEmpty: valueManager.areValuesEqual(utils, value, valueManager.emptyValue),
183
+ isPickerValueEmpty: valueManager.areValuesEqual(adapter, value, valueManager.emptyValue),
185
184
  isPickerOpen: state.open,
186
185
  isPickerDisabled: props.disabled ?? false,
187
186
  isPickerReadOnly: props.readOnly ?? false,
188
187
  pickerOrientation: orientation,
189
188
  pickerVariant: variant
190
- }), [utils, valueManager, value, state.open, orientation, variant, props.disabled, props.readOnly]);
189
+ }), [adapter, valueManager, value, state.open, orientation, variant, props.disabled, props.readOnly]);
191
190
  const triggerStatus = React.useMemo(() => {
192
191
  if (disableOpenPicker || !hasUIView) {
193
192
  return 'hidden';
@@ -1,13 +1,6 @@
1
- import { MuiPickersAdapterContextValue } from "../../LocalizationProvider/LocalizationProvider.js";
2
- import { PickersLocaleText } from "../../locales/utils/pickersLocaleTextApi.js";
3
1
  import { PickersTimezone, PickerValidDate } from "../../models/index.js";
4
- export declare const useLocalizationContext: () => UseLocalizationContextReturnValue;
5
- export declare const useUtils: () => import("@mui/x-date-pickers/models").MuiPickersAdapter<any>;
6
2
  export declare const useDefaultDates: () => {
7
3
  minDate: PickerValidDate;
8
4
  maxDate: PickerValidDate;
9
5
  };
10
- export declare const useNow: (timezone: PickersTimezone) => PickerValidDate;
11
- export interface UseLocalizationContextReturnValue extends Omit<MuiPickersAdapterContextValue, 'localeText'> {
12
- localeText: PickersLocaleText;
13
- }
6
+ export declare const useNow: (timezone: PickersTimezone) => PickerValidDate;
@@ -1,27 +1,11 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
1
  import * as React from 'react';
3
- import { MuiPickersAdapterContext } from "../../LocalizationProvider/LocalizationProvider.js";
4
- import { DEFAULT_LOCALE } from "../../locales/enUS.js";
5
- export const useLocalizationContext = () => {
6
- const localization = React.useContext(MuiPickersAdapterContext);
7
- if (localization === null) {
8
- throw new Error(['MUI X: Can not find the date and time pickers localization context.', 'It looks like you forgot to wrap your component in LocalizationProvider.', 'This can also happen if you are bundling multiple versions of the `@mui/x-date-pickers` package'].join('\n'));
9
- }
10
- if (localization.utils === null) {
11
- throw new Error(['MUI X: Can not find the date and time pickers adapter from its localization context.', 'It looks like you forgot to pass a `dateAdapter` to your LocalizationProvider.'].join('\n'));
12
- }
13
- const localeText = React.useMemo(() => _extends({}, DEFAULT_LOCALE, localization.localeText), [localization.localeText]);
14
- return React.useMemo(() => _extends({}, localization, {
15
- localeText
16
- }), [localization, localeText]);
17
- };
18
- export const useUtils = () => useLocalizationContext().utils;
2
+ import { useLocalizationContext, usePickerAdapter } from "../../hooks/usePickerAdapter.js";
19
3
  export const useDefaultDates = () => useLocalizationContext().defaultDates;
20
4
  export const useNow = timezone => {
21
- const utils = useUtils();
5
+ const adapter = usePickerAdapter();
22
6
  const now = React.useRef(undefined);
23
7
  if (now.current === undefined) {
24
- now.current = utils.date(undefined, timezone);
8
+ now.current = adapter.date(undefined, timezone);
25
9
  }
26
10
  return now.current;
27
11
  };
@@ -39,7 +39,8 @@ export { useStaticPicker } from "./hooks/useStaticPicker/index.js";
39
39
  export type { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "./hooks/useStaticPicker/index.js";
40
40
  export { useToolbarOwnerState } from "./hooks/useToolbarOwnerState.js";
41
41
  export type { PickerToolbarOwnerState } from "./hooks/useToolbarOwnerState.js";
42
- export { useLocalizationContext, useDefaultDates, useUtils, useNow } from "./hooks/useUtils.js";
42
+ export { useDefaultDates, useNow } from "./hooks/useUtils.js";
43
+ export { useLocalizationContext } from "../hooks/usePickerAdapter.js";
43
44
  export type { ExportedUseViewsOptions, UseViewsOptions } from "./hooks/useViews.js";
44
45
  export { useViews } from "./hooks/useViews.js";
45
46
  export { usePreviousMonthDisabled, useNextMonthDisabled } from "./hooks/date-helpers-hooks.js";
@@ -21,7 +21,8 @@ export { usePicker } from "./hooks/usePicker/index.js";
21
21
  export { usePickerPrivateContext } from "./hooks/usePickerPrivateContext.js";
22
22
  export { useStaticPicker } from "./hooks/useStaticPicker/index.js";
23
23
  export { useToolbarOwnerState } from "./hooks/useToolbarOwnerState.js";
24
- export { useLocalizationContext, useDefaultDates, useUtils, useNow } from "./hooks/useUtils.js";
24
+ export { useDefaultDates, useNow } from "./hooks/useUtils.js";
25
+ export { useLocalizationContext } from "../hooks/usePickerAdapter.js";
25
26
  export { useViews } from "./hooks/useViews.js";
26
27
  export { usePreviousMonthDisabled, useNextMonthDisabled } from "./hooks/date-helpers-hooks.js";
27
28
  export { createStepNavigation } from "./utils/createStepNavigation.js";