@mui/x-date-pickers 7.18.0 → 7.20.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 (165) hide show
  1. package/AdapterDateFnsBase/AdapterDateFnsBase.js +1 -0
  2. package/AdapterMoment/AdapterMoment.js +1 -0
  3. package/CHANGELOG.md +213 -11
  4. package/DateCalendar/DateCalendar.js +1 -1
  5. package/DateCalendar/DateCalendar.types.d.ts +1 -1
  6. package/DateField/DateField.types.d.ts +2 -7
  7. package/DateField/index.d.ts +1 -1
  8. package/DateField/useDateField.d.ts +1 -1
  9. package/DatePicker/DatePicker.js +1 -1
  10. package/DatePicker/DatePicker.types.d.ts +8 -1
  11. package/DatePicker/index.d.ts +1 -1
  12. package/DateTimeField/DateTimeField.types.d.ts +2 -7
  13. package/DateTimeField/index.d.ts +1 -1
  14. package/DateTimeField/useDateTimeField.d.ts +1 -1
  15. package/DateTimePicker/DateTimePicker.js +1 -1
  16. package/DateTimePicker/DateTimePicker.types.d.ts +9 -1
  17. package/DateTimePicker/index.d.ts +1 -1
  18. package/DesktopDatePicker/DesktopDatePicker.js +1 -1
  19. package/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -1
  20. package/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +1 -1
  21. package/DigitalClock/DigitalClock.js +39 -0
  22. package/MobileDatePicker/MobileDatePicker.js +1 -1
  23. package/MobileDateTimePicker/MobileDateTimePicker.js +1 -1
  24. package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +38 -1
  25. package/PickersCalendarHeader/PickersCalendarHeader.js +1 -1
  26. package/PickersLayout/PickersLayout.d.ts +2 -2
  27. package/PickersLayout/PickersLayout.js +1 -1
  28. package/PickersSectionList/PickersSectionList.d.ts +4 -4
  29. package/PickersTextField/PickersInputBase/PickersInputBase.d.ts +2 -2
  30. package/StaticDatePicker/StaticDatePicker.js +1 -1
  31. package/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
  32. package/TimeClock/Clock.js +9 -1
  33. package/TimeClock/ClockNumber.js +1 -1
  34. package/TimeClock/ClockPointer.js +1 -1
  35. package/TimeField/TimeField.types.d.ts +2 -7
  36. package/TimeField/index.d.ts +1 -1
  37. package/TimeField/useTimeField.d.ts +1 -1
  38. package/TimePicker/TimePicker.types.d.ts +9 -1
  39. package/TimePicker/index.d.ts +1 -1
  40. package/YearCalendar/YearCalendar.js +1 -1
  41. package/hooks/index.d.ts +2 -0
  42. package/hooks/index.js +3 -1
  43. package/hooks/useParsedFormat.d.ts +15 -0
  44. package/hooks/useParsedFormat.js +43 -0
  45. package/hooks/usePickersContext.d.ts +4 -0
  46. package/hooks/usePickersContext.js +15 -0
  47. package/index.js +1 -1
  48. package/internals/components/PickerViewRoot/PickerViewRoot.d.ts +1 -1
  49. package/internals/components/PickersProvider.d.ts +34 -0
  50. package/internals/components/PickersProvider.js +26 -0
  51. package/internals/components/PickersToolbarButton.js +1 -1
  52. package/internals/components/PickersToolbarText.js +1 -1
  53. package/internals/hooks/useDesktopPicker/useDesktopPicker.js +7 -4
  54. package/internals/hooks/useField/buildSectionsFromFormat.d.ts +1 -2
  55. package/internals/hooks/useField/buildSectionsFromFormat.js +4 -5
  56. package/internals/hooks/useField/useField.utils.d.ts +3 -3
  57. package/internals/hooks/useField/useField.utils.js +13 -13
  58. package/internals/hooks/useField/useFieldCharacterEditing.js +2 -2
  59. package/internals/hooks/useField/useFieldState.js +3 -5
  60. package/internals/hooks/useMobilePicker/useMobilePicker.js +7 -4
  61. package/internals/hooks/usePicker/usePicker.js +3 -1
  62. package/internals/hooks/usePicker/usePickerValue.js +7 -2
  63. package/internals/hooks/usePicker/usePickerValue.types.d.ts +2 -0
  64. package/internals/index.d.ts +1 -0
  65. package/internals/index.js +1 -0
  66. package/internals/utils/utils.d.ts +7 -0
  67. package/internals/utils/utils.js +11 -0
  68. package/locales/bgBG.d.ts +80 -0
  69. package/locales/bgBG.js +73 -0
  70. package/locales/csCZ.js +16 -20
  71. package/locales/hrHR.d.ts +80 -0
  72. package/locales/hrHR.js +90 -0
  73. package/locales/index.d.ts +3 -0
  74. package/locales/index.js +3 -0
  75. package/locales/ptBR.js +3 -4
  76. package/locales/ptPT.d.ts +80 -0
  77. package/locales/ptPT.js +73 -0
  78. package/models/pickers.d.ts +1 -1
  79. package/modern/AdapterDateFnsBase/AdapterDateFnsBase.js +1 -0
  80. package/modern/AdapterMoment/AdapterMoment.js +1 -0
  81. package/modern/DateCalendar/DateCalendar.js +1 -1
  82. package/modern/DatePicker/DatePicker.js +1 -1
  83. package/modern/DateTimePicker/DateTimePicker.js +1 -1
  84. package/modern/DesktopDatePicker/DesktopDatePicker.js +1 -1
  85. package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -1
  86. package/modern/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +1 -1
  87. package/modern/DigitalClock/DigitalClock.js +39 -0
  88. package/modern/MobileDatePicker/MobileDatePicker.js +1 -1
  89. package/modern/MobileDateTimePicker/MobileDateTimePicker.js +1 -1
  90. package/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +38 -1
  91. package/modern/PickersCalendarHeader/PickersCalendarHeader.js +1 -1
  92. package/modern/PickersLayout/PickersLayout.js +1 -1
  93. package/modern/StaticDatePicker/StaticDatePicker.js +1 -1
  94. package/modern/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
  95. package/modern/TimeClock/Clock.js +9 -1
  96. package/modern/TimeClock/ClockNumber.js +1 -1
  97. package/modern/TimeClock/ClockPointer.js +1 -1
  98. package/modern/YearCalendar/YearCalendar.js +1 -1
  99. package/modern/hooks/index.js +3 -1
  100. package/modern/hooks/useParsedFormat.js +43 -0
  101. package/modern/hooks/usePickersContext.js +15 -0
  102. package/modern/index.js +1 -1
  103. package/modern/internals/components/PickersProvider.js +26 -0
  104. package/modern/internals/components/PickersToolbarButton.js +1 -1
  105. package/modern/internals/components/PickersToolbarText.js +1 -1
  106. package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.js +7 -4
  107. package/modern/internals/hooks/useField/buildSectionsFromFormat.js +4 -5
  108. package/modern/internals/hooks/useField/useField.utils.js +13 -13
  109. package/modern/internals/hooks/useField/useFieldCharacterEditing.js +2 -2
  110. package/modern/internals/hooks/useField/useFieldState.js +3 -5
  111. package/modern/internals/hooks/useMobilePicker/useMobilePicker.js +7 -4
  112. package/modern/internals/hooks/usePicker/usePicker.js +3 -1
  113. package/modern/internals/hooks/usePicker/usePickerValue.js +7 -2
  114. package/modern/internals/index.js +1 -0
  115. package/modern/internals/utils/utils.js +11 -0
  116. package/modern/locales/bgBG.js +73 -0
  117. package/modern/locales/csCZ.js +16 -20
  118. package/modern/locales/hrHR.js +90 -0
  119. package/modern/locales/index.js +3 -0
  120. package/modern/locales/ptBR.js +3 -4
  121. package/modern/locales/ptPT.js +73 -0
  122. package/node/AdapterDateFnsBase/AdapterDateFnsBase.js +1 -0
  123. package/node/AdapterMoment/AdapterMoment.js +1 -0
  124. package/node/DateCalendar/DateCalendar.js +1 -1
  125. package/node/DatePicker/DatePicker.js +1 -1
  126. package/node/DateTimePicker/DateTimePicker.js +1 -1
  127. package/node/DesktopDatePicker/DesktopDatePicker.js +1 -1
  128. package/node/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -1
  129. package/node/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +1 -1
  130. package/node/DigitalClock/DigitalClock.js +39 -0
  131. package/node/MobileDatePicker/MobileDatePicker.js +1 -1
  132. package/node/MobileDateTimePicker/MobileDateTimePicker.js +1 -1
  133. package/node/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +38 -1
  134. package/node/PickersCalendarHeader/PickersCalendarHeader.js +1 -1
  135. package/node/PickersLayout/PickersLayout.js +1 -1
  136. package/node/StaticDatePicker/StaticDatePicker.js +1 -1
  137. package/node/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
  138. package/node/TimeClock/Clock.js +9 -1
  139. package/node/TimeClock/ClockNumber.js +1 -1
  140. package/node/TimeClock/ClockPointer.js +1 -1
  141. package/node/YearCalendar/YearCalendar.js +1 -1
  142. package/node/hooks/index.js +15 -1
  143. package/node/hooks/useParsedFormat.js +50 -0
  144. package/node/hooks/usePickersContext.js +21 -0
  145. package/node/index.js +1 -1
  146. package/node/internals/components/PickersProvider.js +34 -0
  147. package/node/internals/components/PickersToolbarButton.js +1 -1
  148. package/node/internals/components/PickersToolbarText.js +1 -1
  149. package/node/internals/hooks/useDesktopPicker/useDesktopPicker.js +5 -3
  150. package/node/internals/hooks/useField/buildSectionsFromFormat.js +4 -5
  151. package/node/internals/hooks/useField/useField.utils.js +13 -13
  152. package/node/internals/hooks/useField/useFieldCharacterEditing.js +2 -2
  153. package/node/internals/hooks/useField/useFieldState.js +3 -5
  154. package/node/internals/hooks/useMobilePicker/useMobilePicker.js +5 -3
  155. package/node/internals/hooks/usePicker/usePicker.js +3 -1
  156. package/node/internals/hooks/usePicker/usePickerValue.js +7 -1
  157. package/node/internals/index.js +7 -0
  158. package/node/internals/utils/utils.js +13 -1
  159. package/node/locales/bgBG.js +79 -0
  160. package/node/locales/csCZ.js +16 -20
  161. package/node/locales/hrHR.js +96 -0
  162. package/node/locales/index.js +33 -0
  163. package/node/locales/ptBR.js +3 -4
  164. package/node/locales/ptPT.js +79 -0
  165. package/package.json +4 -4
@@ -0,0 +1,43 @@
1
+ 'use client';
2
+
3
+ import * as React from 'react';
4
+ import { useRtl } from '@mui/system/RtlProvider';
5
+ import { useUtils } from "../internals/hooks/useUtils.js";
6
+ import { buildSectionsFromFormat } from "../internals/hooks/useField/buildSectionsFromFormat.js";
7
+ import { getLocalizedDigits } from "../internals/hooks/useField/useField.utils.js";
8
+ import { usePickersTranslations } from "./usePickersTranslations.js";
9
+ /**
10
+ * Returns the parsed format to be rendered in the field when there is no value or in other parts of the Picker.
11
+ * This format is localized (e.g: `AAAA` for the year with the French locale) and cannot be parsed by your date library.
12
+ * @param {object} The parameters needed to build the placeholder.
13
+ * @param {string} params.format Format of the date to use.
14
+ * @param {'dense' | 'spacious'} params.formatDensity Density of the format (setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character).
15
+ * @param {boolean} params.shouldRespectLeadingZeros If `true`, the format will respect the leading zeroes, if `false`, the format will always add leading zeroes.
16
+ * @returns
17
+ */
18
+ export const useParsedFormat = parameters => {
19
+ const {
20
+ format,
21
+ formatDensity = 'dense',
22
+ shouldRespectLeadingZeros = false
23
+ } = parameters;
24
+ const utils = useUtils();
25
+ const isRtl = useRtl();
26
+ const translations = usePickersTranslations();
27
+ const localizedDigits = React.useMemo(() => getLocalizedDigits(utils), [utils]);
28
+ return React.useMemo(() => {
29
+ const sections = buildSectionsFromFormat({
30
+ utils,
31
+ format,
32
+ formatDensity,
33
+ isRtl,
34
+ shouldRespectLeadingZeros,
35
+ localeText: translations,
36
+ localizedDigits,
37
+ date: null,
38
+ // TODO v9: Make sure we still don't reverse in `buildSectionsFromFormat` when using `useParsedFormat`.
39
+ enableAccessibleFieldDOMStructure: false
40
+ });
41
+ return sections.map(section => `${section.startSeparator}${section.placeholder}${section.endSeparator}`).join('');
42
+ }, [utils, isRtl, translations, localizedDigits, format, formatDensity, shouldRespectLeadingZeros]);
43
+ };
@@ -0,0 +1,15 @@
1
+ 'use client';
2
+
3
+ import * as React from 'react';
4
+ import { PickersContext } from "../internals/components/PickersProvider.js";
5
+
6
+ /**
7
+ * Returns the context passed by the picker that wraps the current component.
8
+ */
9
+ export const usePickersContext = () => {
10
+ const value = React.useContext(PickersContext);
11
+ if (value == null) {
12
+ throw new Error(['MUI X: The `usePickersContext` can only be called in fields that are used as a slot of a picker component'].join('\n'));
13
+ }
14
+ return value;
15
+ };
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-date-pickers v7.18.0
2
+ * @mui/x-date-pickers v7.20.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -0,0 +1,26 @@
1
+ import * as React from 'react';
2
+ import { LocalizationProvider } from "../../LocalizationProvider/index.js";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ export const PickersContext = /*#__PURE__*/React.createContext(null);
5
+
6
+ /**
7
+ * Provides the context for the various parts of a picker component:
8
+ * - contextValue: the context for the picker sub-components.
9
+ * - localizationProvider: the translations passed through the props and through a parent LocalizationProvider.
10
+ *
11
+ * @ignore - do not document.
12
+ */
13
+ export function PickersProvider(props) {
14
+ const {
15
+ contextValue,
16
+ localeText,
17
+ children
18
+ } = props;
19
+ return /*#__PURE__*/_jsx(PickersContext.Provider, {
20
+ value: contextValue,
21
+ children: /*#__PURE__*/_jsx(LocalizationProvider, {
22
+ localeText: localeText,
23
+ children: children
24
+ })
25
+ });
26
+ }
@@ -46,7 +46,7 @@ export const PickersToolbarButton = /*#__PURE__*/React.forwardRef(function Picke
46
46
  return /*#__PURE__*/_jsx(PickersToolbarButtonRoot, _extends({
47
47
  variant: "text",
48
48
  ref: ref,
49
- className: clsx(className, classes.root)
49
+ className: clsx(classes.root, className)
50
50
  }, width ? {
51
51
  sx: {
52
52
  width
@@ -46,7 +46,7 @@ export const PickersToolbarText = /*#__PURE__*/React.forwardRef(function Pickers
46
46
  const classes = useUtilityClasses(props);
47
47
  return /*#__PURE__*/_jsx(PickersToolbarTextRoot, _extends({
48
48
  ref: ref,
49
- className: clsx(className, classes.root),
49
+ className: clsx(classes.root, className),
50
50
  component: "span"
51
51
  }, other, {
52
52
  children: value
@@ -11,15 +11,16 @@ import useForkRef from '@mui/utils/useForkRef';
11
11
  import useId from '@mui/utils/useId';
12
12
  import { PickersPopper } from "../../components/PickersPopper.js";
13
13
  import { usePicker } from "../usePicker/index.js";
14
- import { LocalizationProvider } from "../../../LocalizationProvider/index.js";
15
14
  import { PickersLayout } from "../../../PickersLayout/index.js";
16
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
15
+ import { PickersProvider } from "../../components/PickersProvider.js";
16
+
17
17
  /**
18
18
  * Hook managing all the single-date desktop pickers:
19
19
  * - DesktopDatePicker
20
20
  * - DesktopDateTimePicker
21
21
  * - DesktopTimePicker
22
22
  */
23
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
23
24
  export const useDesktopPicker = _ref => {
24
25
  let {
25
26
  props,
@@ -57,7 +58,8 @@ export const useDesktopPicker = _ref => {
57
58
  layoutProps,
58
59
  renderCurrentView,
59
60
  shouldRestoreFocus,
60
- fieldProps: pickerFieldProps
61
+ fieldProps: pickerFieldProps,
62
+ contextValue
61
63
  } = usePicker(_extends({}, pickerParams, {
62
64
  props,
63
65
  fieldRef,
@@ -161,7 +163,8 @@ export const useDesktopPicker = _ref => {
161
163
  }, innerSlotProps?.popper)
162
164
  });
163
165
  const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
164
- const renderPicker = () => /*#__PURE__*/_jsxs(LocalizationProvider, {
166
+ const renderPicker = () => /*#__PURE__*/_jsxs(PickersProvider, {
167
+ contextValue: contextValue,
165
168
  localeText: localeText,
166
169
  children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
167
170
  slots: slotsForField,
@@ -38,12 +38,12 @@ const getEscapedPartsFromFormat = ({
38
38
  }
39
39
  return escapedParts;
40
40
  };
41
- const getSectionPlaceholder = (utils, timezone, localeText, sectionConfig, sectionFormat) => {
41
+ const getSectionPlaceholder = (utils, localeText, sectionConfig, sectionFormat) => {
42
42
  switch (sectionConfig.type) {
43
43
  case 'year':
44
44
  {
45
45
  return localeText.fieldYearPlaceholder({
46
- digitAmount: utils.formatByString(utils.date(undefined, timezone), sectionFormat).length,
46
+ digitAmount: utils.formatByString(utils.date(undefined, 'default'), sectionFormat).length,
47
47
  format: sectionFormat
48
48
  });
49
49
  }
@@ -99,7 +99,6 @@ const getSectionPlaceholder = (utils, timezone, localeText, sectionConfig, secti
99
99
  };
100
100
  const createSection = ({
101
101
  utils,
102
- timezone,
103
102
  date,
104
103
  shouldRespectLeadingZeros,
105
104
  localeText,
@@ -112,7 +111,7 @@ const createSection = ({
112
111
  throw new Error('MUI X: Should not call `commitToken` with an empty token');
113
112
  }
114
113
  const sectionConfig = getDateSectionConfigFromFormatToken(utils, token);
115
- const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, timezone, sectionConfig.contentType, sectionConfig.type, token);
114
+ const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, sectionConfig.contentType, sectionConfig.type, token);
116
115
  const hasLeadingZerosInInput = shouldRespectLeadingZeros ? hasLeadingZerosInFormat : sectionConfig.contentType === 'digit';
117
116
  const isValidDate = date != null && utils.isValid(date);
118
117
  let sectionValue = isValidDate ? utils.formatByString(date, token) : '';
@@ -134,7 +133,7 @@ const createSection = ({
134
133
  format: token,
135
134
  maxLength,
136
135
  value: sectionValue,
137
- placeholder: getSectionPlaceholder(utils, timezone, localeText, sectionConfig, token),
136
+ placeholder: getSectionPlaceholder(utils, localeText, sectionConfig, token),
138
137
  hasLeadingZerosInFormat,
139
138
  hasLeadingZerosInInput,
140
139
  startSeparator,
@@ -31,9 +31,9 @@ const getDeltaFromKeyCode = keyCode => {
31
31
  return 0;
32
32
  }
33
33
  };
34
- export const getDaysInWeekStr = (utils, timezone, format) => {
34
+ export const getDaysInWeekStr = (utils, format) => {
35
35
  const elements = [];
36
- const now = utils.date(undefined, timezone);
36
+ const now = utils.date(undefined, 'default');
37
37
  const startDate = utils.startOfWeek(now);
38
38
  const endDate = utils.endOfWeek(now);
39
39
  let current = startDate;
@@ -51,7 +51,7 @@ export const getLetterEditingOptions = (utils, timezone, sectionType, format) =>
51
51
  }
52
52
  case 'weekDay':
53
53
  {
54
- return getDaysInWeekStr(utils, timezone, format);
54
+ return getDaysInWeekStr(utils, format);
55
55
  }
56
56
  case 'meridiem':
57
57
  {
@@ -234,17 +234,17 @@ export const changeSectionValueFormat = (utils, valueStr, currentFormat, newForm
234
234
  }
235
235
  return utils.formatByString(utils.parse(valueStr, currentFormat), newFormat);
236
236
  };
237
- const isFourDigitYearFormat = (utils, timezone, format) => utils.formatByString(utils.date(undefined, timezone), format).length === 4;
238
- export const doesSectionFormatHaveLeadingZeros = (utils, timezone, contentType, sectionType, format) => {
237
+ const isFourDigitYearFormat = (utils, format) => utils.formatByString(utils.date(undefined, 'system'), format).length === 4;
238
+ export const doesSectionFormatHaveLeadingZeros = (utils, contentType, sectionType, format) => {
239
239
  if (contentType !== 'digit') {
240
240
  return false;
241
241
  }
242
- const now = utils.date(undefined, timezone);
242
+ const now = utils.date(undefined, 'default');
243
243
  switch (sectionType) {
244
244
  // We can't use `changeSectionValueFormat`, because `utils.parse('1', 'YYYY')` returns `1971` instead of `1`.
245
245
  case 'year':
246
246
  {
247
- if (isFourDigitYearFormat(utils, timezone, format)) {
247
+ if (isFourDigitYearFormat(utils, format)) {
248
248
  const formatted0001 = utils.formatByString(utils.setYear(now, 1), format);
249
249
  return formatted0001 === '0001';
250
250
  }
@@ -350,7 +350,7 @@ export const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
350
350
  format
351
351
  }) => ({
352
352
  minimum: 0,
353
- maximum: isFourDigitYearFormat(utils, timezone, format) ? 9999 : 99
353
+ maximum: isFourDigitYearFormat(utils, format) ? 9999 : 99
354
354
  }),
355
355
  month: () => ({
356
356
  minimum: 1,
@@ -369,7 +369,7 @@ export const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
369
369
  contentType
370
370
  }) => {
371
371
  if (contentType === 'digit') {
372
- const daysInWeek = getDaysInWeekStr(utils, timezone, format).map(Number);
372
+ const daysInWeek = getDaysInWeekStr(utils, format).map(Number);
373
373
  return {
374
374
  minimum: Math.min(...daysInWeek),
375
375
  maximum: Math.max(...daysInWeek)
@@ -435,7 +435,7 @@ export const validateSections = (sections, valueType) => {
435
435
  }
436
436
  }
437
437
  };
438
- const transferDateSectionValue = (utils, timezone, section, dateToTransferFrom, dateToTransferTo) => {
438
+ const transferDateSectionValue = (utils, section, dateToTransferFrom, dateToTransferTo) => {
439
439
  switch (section.type) {
440
440
  case 'year':
441
441
  {
@@ -447,7 +447,7 @@ const transferDateSectionValue = (utils, timezone, section, dateToTransferFrom,
447
447
  }
448
448
  case 'weekDay':
449
449
  {
450
- const formattedDaysInWeek = getDaysInWeekStr(utils, timezone, section.format);
450
+ const formattedDaysInWeek = getDaysInWeekStr(utils, section.format);
451
451
  const dayInWeekStrOfActiveDate = utils.formatByString(dateToTransferFrom, section.format);
452
452
  const dayInWeekOfActiveDate = formattedDaysInWeek.indexOf(dayInWeekStrOfActiveDate);
453
453
  const dayInWeekOfNewSectionValue = formattedDaysInWeek.indexOf(section.value);
@@ -499,11 +499,11 @@ const reliableSectionModificationOrder = {
499
499
  meridiem: 8,
500
500
  empty: 9
501
501
  };
502
- export const mergeDateIntoReferenceDate = (utils, timezone, dateToTransferFrom, sections, referenceDate, shouldLimitToEditedSections) =>
502
+ export const mergeDateIntoReferenceDate = (utils, dateToTransferFrom, sections, referenceDate, shouldLimitToEditedSections) =>
503
503
  // cloning sections before sort to avoid mutating it
504
504
  [...sections].sort((a, b) => reliableSectionModificationOrder[a.type] - reliableSectionModificationOrder[b.type]).reduce((mergedDate, section) => {
505
505
  if (!shouldLimitToEditedSections || section.modified) {
506
- return transferDateSectionValue(utils, timezone, section, dateToTransferFrom, mergedDate);
506
+ return transferDateSectionValue(utils, section, dateToTransferFrom, mergedDate);
507
507
  }
508
508
  return mergedDate;
509
509
  }, referenceDate);
@@ -199,7 +199,7 @@ export const useFieldCharacterEditing = ({
199
199
  // When editing a letter-format month and the user presses a digit,
200
200
  // We can support the numeric editing by using the digit-format month and re-formatting the result.
201
201
  if (activeSection.type === 'month') {
202
- const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, timezone, 'digit', 'month', 'MM');
202
+ const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, 'digit', 'month', 'MM');
203
203
  const response = getNewSectionValue(queryValue, {
204
204
  type: activeSection.type,
205
205
  format: 'MM',
@@ -224,7 +224,7 @@ export const useFieldCharacterEditing = ({
224
224
  if (isQueryResponseWithoutValue(response)) {
225
225
  return response;
226
226
  }
227
- const formattedValue = getDaysInWeekStr(utils, timezone, activeSection.format)[Number(response.sectionValue) - 1];
227
+ const formattedValue = getDaysInWeekStr(utils, activeSection.format)[Number(response.sectionValue) - 1];
228
228
  return _extends({}, response, {
229
229
  sectionValue: formattedValue
230
230
  });
@@ -48,7 +48,6 @@ export const useFieldState = params => {
48
48
  const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils, localizedDigits, timezone), [utils, localizedDigits, timezone]);
49
49
  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, date => buildSectionsFromFormat({
50
50
  utils,
51
- timezone,
52
51
  localeText: translations,
53
52
  localizedDigits,
54
53
  format,
@@ -57,7 +56,7 @@ export const useFieldState = params => {
57
56
  shouldRespectLeadingZeros,
58
57
  enableAccessibleFieldDOMStructure,
59
58
  isRtl
60
- })), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros, utils, formatDensity, timezone, enableAccessibleFieldDOMStructure]);
59
+ })), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros, utils, formatDensity, enableAccessibleFieldDOMStructure]);
61
60
  const [state, setState] = React.useState(() => {
62
61
  const sections = getSectionsFromValue(valueFromTheOutside);
63
62
  validateSections(sections, valueType);
@@ -154,7 +153,6 @@ export const useFieldState = params => {
154
153
  }
155
154
  const sections = buildSectionsFromFormat({
156
155
  utils,
157
- timezone,
158
156
  localeText: translations,
159
157
  localizedDigits,
160
158
  format,
@@ -164,7 +162,7 @@ export const useFieldState = params => {
164
162
  enableAccessibleFieldDOMStructure,
165
163
  isRtl
166
164
  });
167
- return mergeDateIntoReferenceDate(utils, timezone, date, sections, referenceDate, false);
165
+ return mergeDateIntoReferenceDate(utils, date, sections, referenceDate, false);
168
166
  };
169
167
  const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);
170
168
  const newReferenceValue = fieldValueManager.updateReferenceValue(utils, newValue, state.referenceValue);
@@ -202,7 +200,7 @@ export const useFieldState = params => {
202
200
  * This makes sure that we don't lose some information of the initial date (like the time on a date field).
203
201
  */
204
202
  if (newActiveDate != null && utils.isValid(newActiveDate)) {
205
- const mergedDate = mergeDateIntoReferenceDate(utils, timezone, newActiveDate, newActiveDateSections, activeDateManager.referenceDate, true);
203
+ const mergedDate = mergeDateIntoReferenceDate(utils, newActiveDate, newActiveDateSections, activeDateManager.referenceDate, true);
206
204
  values = activeDateManager.getNewValuesFromNewActiveDate(mergedDate);
207
205
  shouldPublish = true;
208
206
  } else {
@@ -8,15 +8,16 @@ import useId from '@mui/utils/useId';
8
8
  import { PickersModalDialog } from "../../components/PickersModalDialog.js";
9
9
  import { usePicker } from "../usePicker/index.js";
10
10
  import { onSpaceOrEnter } from "../../utils/utils.js";
11
- import { LocalizationProvider } from "../../../LocalizationProvider/index.js";
12
11
  import { PickersLayout } from "../../../PickersLayout/index.js";
13
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
12
+ import { PickersProvider } from "../../components/PickersProvider.js";
13
+
14
14
  /**
15
15
  * Hook managing all the single-date mobile pickers:
16
16
  * - MobileDatePicker
17
17
  * - MobileDateTimePicker
18
18
  * - MobileTimePicker
19
19
  */
20
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
20
21
  export const useMobilePicker = _ref => {
21
22
  let {
22
23
  props,
@@ -49,7 +50,8 @@ export const useMobilePicker = _ref => {
49
50
  actions,
50
51
  layoutProps,
51
52
  renderCurrentView,
52
- fieldProps: pickerFieldProps
53
+ fieldProps: pickerFieldProps,
54
+ contextValue
53
55
  } = usePicker(_extends({}, pickerParams, {
54
56
  props,
55
57
  fieldRef,
@@ -110,7 +112,8 @@ export const useMobilePicker = _ref => {
110
112
  }, innerSlotProps?.mobilePaper)
111
113
  });
112
114
  const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
113
- const renderPicker = () => /*#__PURE__*/_jsxs(LocalizationProvider, {
115
+ const renderPicker = () => /*#__PURE__*/_jsxs(PickersProvider, {
116
+ contextValue: contextValue,
114
117
  localeText: localeText,
115
118
  children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
116
119
  slots: slotsForField,
@@ -49,6 +49,8 @@ export const usePicker = ({
49
49
  hasUIView: pickerViewsResponse.hasUIView,
50
50
  shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
51
51
  // Picker layout
52
- layoutProps: pickerLayoutResponse.layoutProps
52
+ layoutProps: pickerLayoutResponse.layoutProps,
53
+ // Picker context
54
+ contextValue: pickerValueResponse.contextValue
53
55
  };
54
56
  };
@@ -5,7 +5,6 @@ import { useOpenState } from "../useOpenState.js";
5
5
  import { useLocalizationContext, useUtils } from "../useUtils.js";
6
6
  import { useValidation } from "../../../validation/index.js";
7
7
  import { useValueWithTimezone } from "../useValueWithTimezone.js";
8
-
9
8
  /**
10
9
  * Decide if the new value should be published
11
10
  * The published value will be passed to `onChange` if defined.
@@ -334,11 +333,17 @@ export const usePickerValue = ({
334
333
  onSelectShortcut: handleSelectShortcut,
335
334
  isValid
336
335
  });
336
+ const contextValue = React.useMemo(() => ({
337
+ onOpen: handleOpen,
338
+ onClose: handleClose,
339
+ open: isOpen
340
+ }), [isOpen, handleClose, handleOpen]);
337
341
  return {
338
342
  open: isOpen,
339
343
  fieldProps: fieldResponse,
340
344
  viewProps: viewResponse,
341
345
  layoutProps: layoutResponse,
342
- actions
346
+ actions,
347
+ contextValue
343
348
  };
344
349
  };
@@ -1,4 +1,5 @@
1
1
  export { PickersArrowSwitcher } from "./components/PickersArrowSwitcher/PickersArrowSwitcher.js";
2
+ export { PickersProvider } from "./components/PickersProvider.js";
2
3
  export { PickersModalDialog } from "./components/PickersModalDialog.js";
3
4
  export { PickersPopper } from "./components/PickersPopper.js";
4
5
  export { PickersToolbar } from "./components/PickersToolbar.js";
@@ -32,4 +32,15 @@ export const getActiveElement = (root = document) => {
32
32
  }
33
33
  return activeEl;
34
34
  };
35
+
36
+ /**
37
+ * Gets the index of the focused list item in a given ul list element.
38
+ *
39
+ * @param {HTMLUListElement} listElement - The list element to search within.
40
+ * @returns {number} The index of the focused list item, or -1 if none is focused.
41
+ */
42
+ export const getFocusedListItemIndex = listElement => {
43
+ const children = listElement.children;
44
+ return Array.from(children).findIndex(child => child === getActiveElement(document));
45
+ };
35
46
  export const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = '@media (pointer: fine)';
@@ -0,0 +1,73 @@
1
+ import { getPickersLocalization } from "./utils/getPickersLocalization.js";
2
+ const views = {
3
+ hours: 'часове',
4
+ minutes: 'минути',
5
+ seconds: 'секунди',
6
+ meridiem: 'преди обяд/след обяд'
7
+ };
8
+ const bgBGPickers = {
9
+ // Calendar navigation
10
+ previousMonth: 'Предишен месец',
11
+ nextMonth: 'Следващ месец',
12
+ // View navigation
13
+ openPreviousView: 'Отвори предишен изглед',
14
+ openNextView: 'Отвори следващ изглед',
15
+ calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'отворен е изглед на година, премини на изглед на календар' : 'отворен е изглед на календар, премини на изглед на година',
16
+ // DateRange labels
17
+ start: 'Начало',
18
+ end: 'Край',
19
+ startDate: 'Начална дата',
20
+ startTime: 'Начален час',
21
+ endDate: 'Крайна дата',
22
+ endTime: 'Краен час',
23
+ // Action bar
24
+ cancelButtonLabel: 'Отказ',
25
+ clearButtonLabel: 'Изчисти',
26
+ okButtonLabel: 'ОК',
27
+ todayButtonLabel: 'Днес',
28
+ // Toolbar titles
29
+ datePickerToolbarTitle: 'Избери дата',
30
+ dateTimePickerToolbarTitle: 'Избери дата и час',
31
+ timePickerToolbarTitle: 'Избери час',
32
+ dateRangePickerToolbarTitle: 'Избери времеви период',
33
+ // Clock labels
34
+ clockLabelText: (view, time, adapter) => `Избери ${views[view]}. ${time === null ? 'Не е избран час' : `Избраният час е ${adapter.format(time, 'fullTime')}`}`,
35
+ hoursClockNumberText: hours => `${hours} часа`,
36
+ minutesClockNumberText: minutes => `${minutes} минути`,
37
+ secondsClockNumberText: seconds => `${seconds} секунди`,
38
+ // Digital clock labels
39
+ selectViewText: view => `Избери ${views[view]}`,
40
+ // Calendar labels
41
+ calendarWeekNumberHeaderLabel: 'Седмица',
42
+ calendarWeekNumberHeaderText: '#',
43
+ calendarWeekNumberAriaLabelText: weekNumber => `Седмица ${weekNumber}`,
44
+ calendarWeekNumberText: weekNumber => `${weekNumber}`,
45
+ // Open picker labels
46
+ openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Избери дата, избраната дата е ${utils.format(value, 'fullDate')}` : 'Избери дата',
47
+ openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Избери час, избраният час е ${utils.format(value, 'fullTime')}` : 'Избери час',
48
+ fieldClearLabel: 'Изчисти стойност',
49
+ // Table labels
50
+ timeTableLabel: 'избери час',
51
+ dateTableLabel: 'избери дата',
52
+ // Field section placeholders
53
+ fieldYearPlaceholder: params => 'Г'.repeat(params.digitAmount),
54
+ fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'ММММ' : 'ММ',
55
+ fieldDayPlaceholder: () => 'ДД',
56
+ fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'СССС' : 'СС',
57
+ fieldHoursPlaceholder: () => 'чч',
58
+ fieldMinutesPlaceholder: () => 'мм',
59
+ fieldSecondsPlaceholder: () => 'сс',
60
+ fieldMeridiemPlaceholder: () => 'пс',
61
+ // View names
62
+ year: 'Година',
63
+ month: 'Месец',
64
+ day: 'Ден',
65
+ weekDay: 'Ден от седмицата',
66
+ hours: 'Часове',
67
+ minutes: 'Минути',
68
+ seconds: 'Секунди',
69
+ meridiem: 'Преди обяд/след обяд',
70
+ // Common
71
+ empty: 'Празно'
72
+ };
73
+ export const bgBG = getPickersLocalization(bgBGPickers);
@@ -17,11 +17,10 @@ const csCZPickers = {
17
17
  // DateRange labels
18
18
  start: 'Začátek',
19
19
  end: 'Konec',
20
- // startDate: 'Start date',
21
- // startTime: 'Start time',
22
- // endDate: 'End date',
23
- // endTime: 'End time',
24
-
20
+ startDate: 'Datum začátku',
21
+ startTime: 'Čas začátku',
22
+ endDate: 'Datum konce',
23
+ endTime: 'Čas konce',
25
24
  // Action bar
26
25
  cancelButtonLabel: 'Zrušit',
27
26
  clearButtonLabel: 'Vymazat',
@@ -47,8 +46,7 @@ const csCZPickers = {
47
46
  // Open picker labels
48
47
  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Vyberte datum, vybrané datum je ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Vyberte datum',
49
48
  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Vyberte čas, vybraný čas je ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Vyberte čas',
50
- // fieldClearLabel: 'Clear',
51
-
49
+ fieldClearLabel: 'Vymazat',
52
50
  // Table labels
53
51
  timeTableLabel: 'vyberte čas',
54
52
  dateTableLabel: 'vyberte datum',
@@ -56,23 +54,21 @@ const csCZPickers = {
56
54
  fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
57
55
  fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
58
56
  fieldDayPlaceholder: () => 'DD',
59
- // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
57
+ fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
60
58
  fieldHoursPlaceholder: () => 'hh',
61
59
  fieldMinutesPlaceholder: () => 'mm',
62
60
  fieldSecondsPlaceholder: () => 'ss',
63
- fieldMeridiemPlaceholder: () => 'aa'
64
-
61
+ fieldMeridiemPlaceholder: () => 'aa',
65
62
  // View names
66
- // year: 'Year',
67
- // month: 'Month',
68
- // day: 'Day',
69
- // weekDay: 'Week day',
70
- // hours: 'Hours',
71
- // minutes: 'Minutes',
72
- // seconds: 'Seconds',
73
- // meridiem: 'Meridiem',
74
-
63
+ year: 'Rok',
64
+ month: 'Měsíc',
65
+ day: 'Den',
66
+ weekDay: 'Pracovní den',
67
+ hours: 'Hodiny',
68
+ minutes: 'Minuty',
69
+ seconds: 'Sekundy',
70
+ meridiem: 'Odpoledne',
75
71
  // Common
76
- // empty: 'Empty',
72
+ empty: 'Prázdný'
77
73
  };
78
74
  export const csCZ = getPickersLocalization(csCZPickers);