@mui/x-date-pickers 7.0.0-alpha.2 → 7.0.0-alpha.4

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 (242) hide show
  1. package/AdapterDateFns/AdapterDateFns.js +10 -14
  2. package/AdapterDateFnsJalali/AdapterDateFnsJalali.js +12 -16
  3. package/AdapterDayjs/AdapterDayjs.js +11 -8
  4. package/AdapterLuxon/AdapterLuxon.d.ts +28 -28
  5. package/AdapterLuxon/AdapterLuxon.js +29 -17
  6. package/AdapterMoment/AdapterMoment.d.ts +1 -1
  7. package/AdapterMoment/AdapterMoment.js +14 -14
  8. package/AdapterMomentHijri/AdapterMomentHijri.d.ts +0 -1
  9. package/AdapterMomentHijri/AdapterMomentHijri.js +1 -24
  10. package/AdapterMomentJalaali/AdapterMomentJalaali.d.ts +0 -2
  11. package/AdapterMomentJalaali/AdapterMomentJalaali.js +0 -26
  12. package/CHANGELOG.md +364 -0
  13. package/DateCalendar/DateCalendar.js +2 -2
  14. package/DateCalendar/DayCalendar.d.ts +3 -3
  15. package/DateCalendar/useCalendarState.js +0 -1
  16. package/DatePicker/DatePicker.js +2 -2
  17. package/DateTimePicker/DateTimePicker.js +2 -2
  18. package/DesktopDatePicker/DesktopDatePicker.js +2 -2
  19. package/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
  20. package/MobileDatePicker/MobileDatePicker.js +2 -2
  21. package/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  22. package/MonthCalendar/MonthCalendar.js +0 -1
  23. package/MultiSectionDigitalClock/MultiSectionDigitalClock.js +2 -0
  24. package/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.d.ts +3 -2
  25. package/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js +2 -1
  26. package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +8 -2
  27. package/MultiSectionDigitalClock/multiSectionDigitalClockSectionClasses.js +2 -2
  28. package/PickersCalendarHeader/PickersCalendarHeader.js +4 -4
  29. package/PickersShortcuts/PickersShortcuts.d.ts +1 -1
  30. package/PickersShortcuts/PickersShortcuts.js +1 -1
  31. package/README.md +0 -1
  32. package/StaticDatePicker/StaticDatePicker.js +2 -2
  33. package/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  34. package/TimeClock/Clock.js +0 -1
  35. package/TimeClock/ClockPointer.js +0 -1
  36. package/YearCalendar/YearCalendar.js +0 -1
  37. package/index.js +1 -1
  38. package/internals/components/PickersTextField/Outline.d.ts +8 -0
  39. package/internals/components/PickersTextField/Outline.js +97 -0
  40. package/internals/components/PickersTextField/PickersInput.d.ts +3 -0
  41. package/internals/components/PickersTextField/PickersInput.js +269 -0
  42. package/internals/components/PickersTextField/PickersInput.types.d.ts +45 -0
  43. package/internals/components/PickersTextField/PickersInput.types.js +1 -0
  44. package/internals/components/PickersTextField/PickersTextField.d.ts +3 -0
  45. package/internals/components/PickersTextField/PickersTextField.js +129 -0
  46. package/internals/components/PickersTextField/PickersTextField.types.d.ts +21 -0
  47. package/internals/components/PickersTextField/PickersTextField.types.js +1 -0
  48. package/internals/components/PickersTextField/index.d.ts +1 -0
  49. package/internals/components/PickersTextField/index.js +1 -0
  50. package/internals/components/PickersTextField/pickersTextFieldClasses.d.ts +46 -0
  51. package/internals/components/PickersTextField/pickersTextFieldClasses.js +9 -0
  52. package/internals/constants/dimensions.d.ts +1 -1
  53. package/internals/constants/dimensions.js +1 -1
  54. package/internals/demo/DemoContainer.d.ts +4 -0
  55. package/internals/demo/DemoContainer.js +47 -19
  56. package/internals/hooks/useClockReferenceDate.js +0 -1
  57. package/internals/hooks/useField/useField.utils.js +23 -12
  58. package/internals/hooks/usePicker/usePickerValue.js +2 -6
  59. package/internals/hooks/usePicker/usePickerValue.types.d.ts +2 -2
  60. package/internals/hooks/useViews.js +0 -1
  61. package/legacy/AdapterDateFns/AdapterDateFns.js +10 -14
  62. package/legacy/AdapterDateFnsJalali/AdapterDateFnsJalali.js +12 -16
  63. package/legacy/AdapterDayjs/AdapterDayjs.js +11 -8
  64. package/legacy/AdapterLuxon/AdapterLuxon.js +30 -18
  65. package/legacy/AdapterMoment/AdapterMoment.js +326 -320
  66. package/legacy/AdapterMomentHijri/AdapterMomentHijri.js +4 -25
  67. package/legacy/AdapterMomentJalaali/AdapterMomentJalaali.js +0 -30
  68. package/legacy/DateCalendar/DateCalendar.js +2 -2
  69. package/legacy/DateCalendar/useCalendarState.js +0 -1
  70. package/legacy/DatePicker/DatePicker.js +2 -2
  71. package/legacy/DateTimePicker/DateTimePicker.js +2 -2
  72. package/legacy/DesktopDatePicker/DesktopDatePicker.js +2 -2
  73. package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
  74. package/legacy/MobileDatePicker/MobileDatePicker.js +2 -2
  75. package/legacy/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  76. package/legacy/MonthCalendar/MonthCalendar.js +0 -1
  77. package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClock.js +2 -0
  78. package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js +2 -1
  79. package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +8 -2
  80. package/legacy/MultiSectionDigitalClock/multiSectionDigitalClockSectionClasses.js +2 -2
  81. package/legacy/PickersCalendarHeader/PickersCalendarHeader.js +4 -4
  82. package/legacy/PickersShortcuts/PickersShortcuts.js +2 -1
  83. package/legacy/StaticDatePicker/StaticDatePicker.js +2 -2
  84. package/legacy/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  85. package/legacy/TimeClock/Clock.js +0 -1
  86. package/legacy/TimeClock/ClockPointer.js +0 -1
  87. package/legacy/YearCalendar/YearCalendar.js +0 -1
  88. package/legacy/index.js +1 -1
  89. package/legacy/internals/components/PickersTextField/Outline.js +97 -0
  90. package/legacy/internals/components/PickersTextField/PickersInput.js +277 -0
  91. package/legacy/internals/components/PickersTextField/PickersInput.types.js +1 -0
  92. package/legacy/internals/components/PickersTextField/PickersTextField.js +129 -0
  93. package/legacy/internals/components/PickersTextField/PickersTextField.types.js +1 -0
  94. package/legacy/internals/components/PickersTextField/index.js +1 -0
  95. package/legacy/internals/components/PickersTextField/pickersTextFieldClasses.js +9 -0
  96. package/legacy/internals/constants/dimensions.js +1 -1
  97. package/legacy/internals/demo/DemoContainer.js +45 -19
  98. package/legacy/internals/hooks/useClockReferenceDate.js +0 -1
  99. package/legacy/internals/hooks/useField/useField.utils.js +23 -12
  100. package/legacy/internals/hooks/usePicker/usePickerValue.js +2 -6
  101. package/legacy/internals/hooks/useViews.js +0 -1
  102. package/legacy/locales/plPL.js +0 -1
  103. package/legacy/locales/svSE.js +0 -1
  104. package/legacy/locales/urPK.js +0 -1
  105. package/locales/beBY.d.ts +18 -5
  106. package/locales/caES.d.ts +18 -5
  107. package/locales/csCZ.d.ts +18 -5
  108. package/locales/daDK.d.ts +18 -5
  109. package/locales/deDE.d.ts +18 -5
  110. package/locales/elGR.d.ts +18 -5
  111. package/locales/enUS.d.ts +18 -5
  112. package/locales/esES.d.ts +18 -5
  113. package/locales/eu.d.ts +18 -5
  114. package/locales/faIR.d.ts +18 -5
  115. package/locales/fiFI.d.ts +18 -5
  116. package/locales/frFR.d.ts +18 -5
  117. package/locales/heIL.d.ts +18 -5
  118. package/locales/huHU.d.ts +18 -5
  119. package/locales/isIS.d.ts +18 -5
  120. package/locales/itIT.d.ts +18 -5
  121. package/locales/jaJP.d.ts +18 -5
  122. package/locales/koKR.d.ts +18 -5
  123. package/locales/kzKZ.d.ts +18 -5
  124. package/locales/mk.d.ts +18 -5
  125. package/locales/nbNO.d.ts +18 -5
  126. package/locales/nlNL.d.ts +18 -5
  127. package/locales/plPL.d.ts +18 -5
  128. package/locales/plPL.js +0 -1
  129. package/locales/ptBR.d.ts +18 -5
  130. package/locales/roRO.d.ts +18 -5
  131. package/locales/ruRU.d.ts +18 -5
  132. package/locales/skSK.d.ts +18 -5
  133. package/locales/svSE.d.ts +18 -5
  134. package/locales/svSE.js +0 -1
  135. package/locales/trTR.d.ts +18 -5
  136. package/locales/ukUA.d.ts +18 -5
  137. package/locales/urPK.d.ts +18 -5
  138. package/locales/urPK.js +0 -1
  139. package/locales/utils/getPickersLocalization.d.ts +18 -5
  140. package/locales/utils/pickersLocaleTextApi.d.ts +18 -5
  141. package/locales/viVN.d.ts +18 -5
  142. package/locales/zhCN.d.ts +18 -5
  143. package/locales/zhHK.d.ts +18 -5
  144. package/modern/AdapterDateFns/AdapterDateFns.js +10 -14
  145. package/modern/AdapterDateFnsJalali/AdapterDateFnsJalali.js +12 -16
  146. package/modern/AdapterDayjs/AdapterDayjs.js +11 -8
  147. package/modern/AdapterLuxon/AdapterLuxon.js +28 -17
  148. package/modern/AdapterMoment/AdapterMoment.js +14 -14
  149. package/modern/AdapterMomentHijri/AdapterMomentHijri.js +1 -24
  150. package/modern/AdapterMomentJalaali/AdapterMomentJalaali.js +0 -26
  151. package/modern/DateCalendar/DateCalendar.js +2 -2
  152. package/modern/DateCalendar/useCalendarState.js +0 -1
  153. package/modern/DatePicker/DatePicker.js +2 -2
  154. package/modern/DateTimePicker/DateTimePicker.js +2 -2
  155. package/modern/DesktopDatePicker/DesktopDatePicker.js +2 -2
  156. package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
  157. package/modern/MobileDatePicker/MobileDatePicker.js +2 -2
  158. package/modern/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  159. package/modern/MonthCalendar/MonthCalendar.js +0 -1
  160. package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js +2 -0
  161. package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js +2 -1
  162. package/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +8 -2
  163. package/modern/MultiSectionDigitalClock/multiSectionDigitalClockSectionClasses.js +2 -2
  164. package/modern/PickersCalendarHeader/PickersCalendarHeader.js +4 -4
  165. package/modern/PickersShortcuts/PickersShortcuts.js +1 -1
  166. package/modern/StaticDatePicker/StaticDatePicker.js +2 -2
  167. package/modern/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  168. package/modern/TimeClock/Clock.js +0 -1
  169. package/modern/TimeClock/ClockPointer.js +0 -1
  170. package/modern/YearCalendar/YearCalendar.js +0 -1
  171. package/modern/index.js +1 -1
  172. package/modern/internals/components/PickersTextField/Outline.js +97 -0
  173. package/modern/internals/components/PickersTextField/PickersInput.js +268 -0
  174. package/modern/internals/components/PickersTextField/PickersInput.types.js +1 -0
  175. package/modern/internals/components/PickersTextField/PickersTextField.js +129 -0
  176. package/modern/internals/components/PickersTextField/PickersTextField.types.js +1 -0
  177. package/modern/internals/components/PickersTextField/index.js +1 -0
  178. package/modern/internals/components/PickersTextField/pickersTextFieldClasses.js +9 -0
  179. package/modern/internals/constants/dimensions.js +1 -1
  180. package/modern/internals/demo/DemoContainer.js +47 -19
  181. package/modern/internals/hooks/useClockReferenceDate.js +0 -1
  182. package/modern/internals/hooks/useField/useField.utils.js +23 -12
  183. package/modern/internals/hooks/usePicker/usePickerValue.js +2 -6
  184. package/modern/internals/hooks/useViews.js +0 -1
  185. package/modern/locales/plPL.js +0 -1
  186. package/modern/locales/svSE.js +0 -1
  187. package/modern/locales/urPK.js +0 -1
  188. package/node/AdapterDateFns/AdapterDateFns.js +10 -14
  189. package/node/AdapterDateFnsJalali/AdapterDateFnsJalali.js +12 -16
  190. package/node/AdapterDayjs/AdapterDayjs.js +10 -7
  191. package/node/AdapterLuxon/AdapterLuxon.js +28 -17
  192. package/node/AdapterMoment/AdapterMoment.js +14 -14
  193. package/node/AdapterMomentHijri/AdapterMomentHijri.js +1 -24
  194. package/node/AdapterMomentJalaali/AdapterMomentJalaali.js +0 -26
  195. package/node/DateCalendar/DateCalendar.js +2 -2
  196. package/node/DateCalendar/useCalendarState.js +0 -1
  197. package/node/DatePicker/DatePicker.js +2 -2
  198. package/node/DateTimePicker/DateTimePicker.js +2 -2
  199. package/node/DesktopDatePicker/DesktopDatePicker.js +2 -2
  200. package/node/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
  201. package/node/MobileDatePicker/MobileDatePicker.js +2 -2
  202. package/node/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  203. package/node/MonthCalendar/MonthCalendar.js +0 -1
  204. package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js +2 -0
  205. package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js +2 -1
  206. package/node/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +8 -2
  207. package/node/MultiSectionDigitalClock/multiSectionDigitalClockSectionClasses.js +2 -2
  208. package/node/PickersCalendarHeader/PickersCalendarHeader.js +4 -4
  209. package/node/PickersShortcuts/PickersShortcuts.js +1 -1
  210. package/node/StaticDatePicker/StaticDatePicker.js +2 -2
  211. package/node/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  212. package/node/TimeClock/Clock.js +0 -1
  213. package/node/TimeClock/ClockPointer.js +0 -1
  214. package/node/YearCalendar/YearCalendar.js +0 -1
  215. package/node/index.js +1 -1
  216. package/node/internals/components/PickersTextField/Outline.js +106 -0
  217. package/node/internals/components/PickersTextField/PickersInput.js +276 -0
  218. package/node/internals/components/PickersTextField/PickersInput.types.js +5 -0
  219. package/node/internals/components/PickersTextField/PickersTextField.js +137 -0
  220. package/node/internals/components/PickersTextField/PickersTextField.types.js +5 -0
  221. package/node/internals/components/PickersTextField/index.js +12 -0
  222. package/node/internals/components/PickersTextField/pickersTextFieldClasses.js +17 -0
  223. package/node/internals/constants/dimensions.js +1 -1
  224. package/node/internals/demo/DemoContainer.js +47 -19
  225. package/node/internals/hooks/useClockReferenceDate.js +0 -1
  226. package/node/internals/hooks/useField/useField.utils.js +23 -12
  227. package/node/internals/hooks/usePicker/usePickerValue.js +2 -6
  228. package/node/internals/hooks/useViews.js +0 -1
  229. package/node/locales/plPL.js +0 -1
  230. package/node/locales/svSE.js +0 -1
  231. package/node/locales/urPK.js +0 -1
  232. package/package.json +5 -5
  233. package/internals/components/FakeTextField/FakeTextField.d.ts +0 -22
  234. package/internals/components/FakeTextField/FakeTextField.js +0 -44
  235. package/internals/components/FakeTextField/index.d.ts +0 -1
  236. package/internals/components/FakeTextField/index.js +0 -1
  237. package/legacy/internals/components/FakeTextField/FakeTextField.js +0 -49
  238. package/legacy/internals/components/FakeTextField/index.js +0 -1
  239. package/modern/internals/components/FakeTextField/FakeTextField.js +0 -44
  240. package/modern/internals/components/FakeTextField/index.js +0 -1
  241. package/node/internals/components/FakeTextField/FakeTextField.js +0 -52
  242. package/node/internals/components/FakeTextField/index.js +0 -12
@@ -0,0 +1,46 @@
1
+ export interface PickersTextFieldClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the root element if focused. */
5
+ focused: string;
6
+ /** State class applied to the root element if `disabled=true`. */
7
+ disabled: string;
8
+ /** State class applied to the root element if `error=true`. */
9
+ error: string;
10
+ /** State class applied to the root element id `required=true` */
11
+ required: string;
12
+ }
13
+ export type PickersTextFieldClassKey = keyof PickersTextFieldClasses;
14
+ export declare function getPickersTextFieldUtilityClass(slot: string): string;
15
+ export declare const pickersTextFieldClasses: Record<keyof PickersTextFieldClasses, string>;
16
+ export interface PickersInputClasses {
17
+ /** Styles applied to the root element. */
18
+ root: string;
19
+ /** Styles applied to the root element if focused. */
20
+ focused: string;
21
+ /** State class applied to the root element if `disabled=true`. */
22
+ disabled: string;
23
+ /** State class applied to the root element if `readOnly=true`. */
24
+ readOnly: string;
25
+ /** State class applied to the root element if `error=true`. */
26
+ error: string;
27
+ /** Styles applied to the NotchedOutline element. */
28
+ notchedOutline: string;
29
+ /** Styles applied to the real hidden input element. */
30
+ input: string;
31
+ /** Styles applied to the container of the sections. */
32
+ sectionsContainer: string;
33
+ /** Styles applied to the content of a section. */
34
+ sectionContent: string;
35
+ /** Styles applied to the separator before a section */
36
+ sectionBefore: string;
37
+ /** Styles applied to the separator after a section */
38
+ sectionAfter: string;
39
+ /** Styles applied to the root if there is a startAdornment present */
40
+ adornedStart: string;
41
+ /** Styles applied to the root if there is an endAdornment present */
42
+ adornedEnd: string;
43
+ }
44
+ export type PickersInputClassKey = keyof PickersInputClasses;
45
+ export declare function getPickersInputUtilityClass(slot: string): string;
46
+ export declare const pickersInputClasses: Record<keyof PickersInputClasses, string>;
@@ -0,0 +1,9 @@
1
+ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
2
+ export function getPickersTextFieldUtilityClass(slot) {
3
+ return generateUtilityClass('MuiPickersTextField', slot);
4
+ }
5
+ export const pickersTextFieldClasses = generateUtilityClasses('MuiPickersTextField', ['root', 'focused', 'disabled', 'error', 'required']);
6
+ export function getPickersInputUtilityClass(slot) {
7
+ return generateUtilityClass('MuiPickersInput', slot);
8
+ }
9
+ export const pickersInputClasses = generateUtilityClasses('MuiPickersInput', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'adornedStart', 'adornedEnd', 'input', 'sectionsContainer', 'sectionContent', 'sectionBefore', 'sectionAfter']);
@@ -2,6 +2,6 @@ export declare const DAY_SIZE = 36;
2
2
  export declare const DAY_MARGIN = 2;
3
3
  export declare const DIALOG_WIDTH = 320;
4
4
  export declare const MAX_CALENDAR_HEIGHT = 280;
5
- export declare const VIEW_HEIGHT = 334;
5
+ export declare const VIEW_HEIGHT = 336;
6
6
  export declare const DIGITAL_CLOCK_VIEW_HEIGHT = 232;
7
7
  export declare const MULTI_SECTION_CLOCK_SECTION_WIDTH = 48;
@@ -2,6 +2,6 @@ export const DAY_SIZE = 36;
2
2
  export const DAY_MARGIN = 2;
3
3
  export const DIALOG_WIDTH = 320;
4
4
  export const MAX_CALENDAR_HEIGHT = 280;
5
- export const VIEW_HEIGHT = 334;
5
+ export const VIEW_HEIGHT = 336;
6
6
  export const DIGITAL_CLOCK_VIEW_HEIGHT = 232;
7
7
  export const MULTI_SECTION_CLOCK_SECTION_WIDTH = 48;
@@ -9,12 +9,16 @@ interface DemoItemProps {
9
9
  label?: React.ReactNode;
10
10
  component?: string;
11
11
  children: React.ReactNode;
12
+ sx?: SxProps<Theme>;
12
13
  }
13
14
  /**
14
15
  * WARNING: This is an internal component used in documentation to achieve a desired layout.
15
16
  * Please do not use it in your application.
16
17
  */
17
18
  export declare function DemoItem(props: DemoItemProps): React.JSX.Element;
19
+ export declare namespace DemoItem {
20
+ var displayName: string;
21
+ }
18
22
  /**
19
23
  * WARNING: This is an internal component used in documentation to achieve a desired layout.
20
24
  * Please do not use it in your application.
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import * as React from 'react';
3
- import Stack from '@mui/material/Stack';
3
+ import Stack, { stackClasses } from '@mui/material/Stack';
4
4
  import Typography from '@mui/material/Typography';
5
5
  import { textFieldClasses } from '@mui/material/TextField';
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -40,20 +40,20 @@ export function DemoItem(props) {
40
40
  const {
41
41
  label,
42
42
  children,
43
- component
43
+ component,
44
+ sx: sxProp
44
45
  } = props;
45
46
  let spacing;
46
- let sx;
47
+ let sx = sxProp;
47
48
  if (component && getChildTypeFromChildName(component) === 'multi-input-range-field') {
48
49
  spacing = 1.5;
49
- sx = {
50
+ sx = _extends({}, sx, {
50
51
  [`& .${textFieldClasses.root}`]: {
51
52
  flexGrow: 1
52
53
  }
53
- };
54
+ });
54
55
  } else {
55
56
  spacing = 1;
56
- sx = undefined;
57
57
  }
58
58
  return /*#__PURE__*/_jsxs(Stack, {
59
59
  direction: "column",
@@ -66,7 +66,14 @@ export function DemoItem(props) {
66
66
  }), children]
67
67
  });
68
68
  }
69
-
69
+ DemoItem.displayName = 'DemoItem';
70
+ const isDemoItem = child => {
71
+ if ( /*#__PURE__*/React.isValidElement(child) && typeof child.type !== 'string') {
72
+ // @ts-ignore
73
+ return child.type.displayName === 'DemoItem';
74
+ }
75
+ return false;
76
+ };
70
77
  /**
71
78
  * WARNING: This is an internal component used in documentation to achieve a desired layout.
72
79
  * Please do not use it in your application.
@@ -91,7 +98,9 @@ export function DemoContainer(props) {
91
98
  };
92
99
  let direction;
93
100
  let spacing;
94
- let sx = _extends({
101
+ let extraSx = {};
102
+ let demoItemSx = {};
103
+ const sx = _extends({
95
104
  overflow: 'auto',
96
105
  // Add padding as overflow can hide the outline text field label.
97
106
  pt: 1
@@ -113,38 +122,57 @@ export function DemoContainer(props) {
113
122
  // noop
114
123
  } else if (childrenTypes.has('single-input-range-field')) {
115
124
  if (!childrenSupportedSections.has('date-time')) {
116
- sx = _extends({}, sx, {
125
+ extraSx = {
117
126
  [`& > .${textFieldClasses.root}`]: {
118
127
  minWidth: 300
119
128
  }
120
- });
129
+ };
121
130
  } else {
122
- sx = _extends({}, sx, {
131
+ extraSx = {
123
132
  [`& > .${textFieldClasses.root}`]: {
124
133
  minWidth: {
125
134
  xs: 300,
126
- md: 400
135
+ // If demo also contains MultiInputDateTimeRangeField, increase width to avoid cutting off the value.
136
+ md: childrenTypes.has('multi-input-range-field') ? 460 : 400
127
137
  }
128
138
  }
129
- });
139
+ };
130
140
  }
131
141
  } else if (childrenSupportedSections.has('date-time')) {
132
- sx = _extends({}, sx, {
142
+ extraSx = {
133
143
  [`& > .${textFieldClasses.root}`]: {
134
144
  minWidth: 270
135
145
  }
136
- });
146
+ };
147
+ if (childrenTypes.has('multi-input-range-field')) {
148
+ // increase width for the multi input date time range fields
149
+ demoItemSx = {
150
+ [`& > .${stackClasses.root} > .${textFieldClasses.root}`]: {
151
+ minWidth: 210
152
+ }
153
+ };
154
+ }
137
155
  } else {
138
- sx = _extends({}, sx, {
156
+ extraSx = {
139
157
  [`& > .${textFieldClasses.root}`]: {
140
158
  minWidth: 200
141
159
  }
142
- });
160
+ };
143
161
  }
162
+ const finalSx = _extends({}, sx, extraSx);
144
163
  return /*#__PURE__*/_jsx(Stack, {
145
164
  direction: direction,
146
165
  spacing: spacing,
147
- sx: sx,
148
- children: children
166
+ sx: finalSx,
167
+ children: React.Children.map(children, child => {
168
+ if ( /*#__PURE__*/React.isValidElement(child) && isDemoItem(child)) {
169
+ // Inject sx styles to the `DemoItem` if it is a direct child of `DemoContainer`.
170
+ // @ts-ignore
171
+ return /*#__PURE__*/React.cloneElement(child, {
172
+ sx: _extends({}, extraSx, demoItemSx)
173
+ });
174
+ }
175
+ return child;
176
+ })
149
177
  });
150
178
  }
@@ -21,6 +21,5 @@ export const useClockReferenceDate = ({
21
21
  // We only want to compute the reference date on mount.
22
22
  [] // eslint-disable-line react-hooks/exhaustive-deps
23
23
  );
24
-
25
24
  return value != null ? value : referenceDate;
26
25
  };
@@ -125,7 +125,6 @@ export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsVa
125
125
  if (delta < 0 || isStart) {
126
126
  newSectionValueNumber += step - (step + newSectionValueNumber) % step; // for JS -3 % 5 = -3 (should be 2)
127
127
  }
128
-
129
128
  if (delta > 0 || isEnd) {
130
129
  newSectionValueNumber -= newSectionValueNumber % step;
131
130
  }
@@ -207,49 +206,62 @@ export const addPositionPropertiesToSections = (sections, isRTL) => {
207
206
  }
208
207
  return newSections;
209
208
  };
210
- const getSectionPlaceholder = (utils, timezone, localeText, sectionConfig, currentTokenValue) => {
209
+ const getSectionPlaceholder = (utils, timezone, localeText, sectionConfig, sectionFormat) => {
211
210
  switch (sectionConfig.type) {
212
211
  case 'year':
213
212
  {
214
213
  return localeText.fieldYearPlaceholder({
215
- digitAmount: utils.formatByString(utils.date(undefined, timezone), currentTokenValue).length
214
+ digitAmount: utils.formatByString(utils.date(undefined, timezone), sectionFormat).length,
215
+ format: sectionFormat
216
216
  });
217
217
  }
218
218
  case 'month':
219
219
  {
220
220
  return localeText.fieldMonthPlaceholder({
221
- contentType: sectionConfig.contentType
221
+ contentType: sectionConfig.contentType,
222
+ format: sectionFormat
222
223
  });
223
224
  }
224
225
  case 'day':
225
226
  {
226
- return localeText.fieldDayPlaceholder();
227
+ return localeText.fieldDayPlaceholder({
228
+ format: sectionFormat
229
+ });
227
230
  }
228
231
  case 'weekDay':
229
232
  {
230
233
  return localeText.fieldWeekDayPlaceholder({
231
- contentType: sectionConfig.contentType
234
+ contentType: sectionConfig.contentType,
235
+ format: sectionFormat
232
236
  });
233
237
  }
234
238
  case 'hours':
235
239
  {
236
- return localeText.fieldHoursPlaceholder();
240
+ return localeText.fieldHoursPlaceholder({
241
+ format: sectionFormat
242
+ });
237
243
  }
238
244
  case 'minutes':
239
245
  {
240
- return localeText.fieldMinutesPlaceholder();
246
+ return localeText.fieldMinutesPlaceholder({
247
+ format: sectionFormat
248
+ });
241
249
  }
242
250
  case 'seconds':
243
251
  {
244
- return localeText.fieldSecondsPlaceholder();
252
+ return localeText.fieldSecondsPlaceholder({
253
+ format: sectionFormat
254
+ });
245
255
  }
246
256
  case 'meridiem':
247
257
  {
248
- return localeText.fieldMeridiemPlaceholder();
258
+ return localeText.fieldMeridiemPlaceholder({
259
+ format: sectionFormat
260
+ });
249
261
  }
250
262
  default:
251
263
  {
252
- return currentTokenValue;
264
+ return sectionFormat;
253
265
  }
254
266
  }
255
267
  };
@@ -387,7 +399,6 @@ export const splitFormatIntoSections = (utils, timezone, localeText, format, dat
387
399
  const isTokenStartRegExp = new RegExp(`^(${Object.keys(utils.formatTokenMap).sort((a, b) => b.length - a.length) // Sort to put longest word first
388
400
  .join('|')})`, 'g') // used to get access to lastIndex state
389
401
  ;
390
-
391
402
  let currentTokenValue = '';
392
403
  for (let i = 0; i < expandedFormat.length; i += 1) {
393
404
  const escapedPartOfCurrentChar = escapedParts.find(escapeIndex => escapeIndex.start <= i && escapeIndex.end >= i);
@@ -221,9 +221,7 @@ export const usePickerValue = ({
221
221
  const context = {
222
222
  validationError
223
223
  };
224
-
225
- // TODO v7: Remove 2nd condition
226
- if (action.name === 'setValueFromShortcut' && action.shortcut != null) {
224
+ if (action.name === 'setValueFromShortcut') {
227
225
  context.shortcut = action.shortcut;
228
226
  }
229
227
  handleValueChange(action.value, context);
@@ -288,12 +286,10 @@ export const usePickerValue = ({
288
286
  value: newValue,
289
287
  selectionState
290
288
  }));
291
-
292
- // TODO v7: Make changeImportance and label mandatory.
293
289
  const handleSelectShortcut = useEventCallback((newValue, changeImportance, shortcut) => updateDate({
294
290
  name: 'setValueFromShortcut',
295
291
  value: newValue,
296
- changeImportance: changeImportance != null ? changeImportance : 'accept',
292
+ changeImportance,
297
293
  shortcut
298
294
  }));
299
295
  const handleChangeFromField = useEventCallback((newValue, context) => updateDate({
@@ -165,7 +165,7 @@ export type PickerValueUpdateAction<TValue, TError> = {
165
165
  name: 'setValueFromShortcut';
166
166
  value: TValue;
167
167
  changeImportance: PickerShortcutChangeImportance;
168
- shortcut?: PickersShortcutsItemContext;
168
+ shortcut: PickersShortcutsItemContext;
169
169
  };
170
170
  /**
171
171
  * Props used to handle the value that are common to all pickers.
@@ -269,7 +269,7 @@ export interface UsePickerValueViewsResponse<TValue> {
269
269
  export interface UsePickerValueLayoutResponse<TValue> extends UsePickerValueActions {
270
270
  value: TValue;
271
271
  onChange: (newValue: TValue) => void;
272
- onSelectShortcut: (newValue: TValue, changeImportance?: PickerShortcutChangeImportance) => void;
272
+ onSelectShortcut: (newValue: TValue, changeImportance: PickerShortcutChangeImportance, shortcut: PickersShortcutsItemContext) => void;
273
273
  isValid: (value: TValue) => boolean;
274
274
  }
275
275
  export interface UsePickerValueResponse<TValue, TSection extends FieldSection, TError> {
@@ -61,7 +61,6 @@ export function useViews({
61
61
  setFocusedView(prevFocusedView => viewToFocus === prevFocusedView ? null : prevFocusedView // If false the blur is due to view switching
62
62
  );
63
63
  }
64
-
65
64
  onFocusedViewChange == null || onFocusedViewChange(viewToFocus, hasFocus);
66
65
  });
67
66
  const handleChangeView = useEventCallback(newView => {
@@ -387,10 +387,10 @@ export var AdapterDateFns = /*#__PURE__*/_createClass(function AdapterDateFns()
387
387
  return isBefore(value, comparing);
388
388
  };
389
389
  this.isBeforeYear = function (value, comparing) {
390
- return isBefore(value, startOfYear(comparing));
390
+ return isBefore(value, _this.startOfYear(comparing));
391
391
  };
392
392
  this.isBeforeDay = function (value, comparing) {
393
- return isBefore(value, startOfDay(comparing));
393
+ return isBefore(value, _this.startOfDay(comparing));
394
394
  };
395
395
  this.isWithinRange = function (value, _ref2) {
396
396
  var _ref3 = _slicedToArray(_ref2, 2),
@@ -496,20 +496,16 @@ export var AdapterDateFns = /*#__PURE__*/_createClass(function AdapterDateFns()
496
496
  return getDaysInMonth(value);
497
497
  };
498
498
  this.getWeekArray = function (value) {
499
- var start = startOfWeek(startOfMonth(value), {
500
- locale: _this.locale
501
- });
502
- var end = endOfWeek(endOfMonth(value), {
503
- locale: _this.locale
504
- });
499
+ var start = _this.startOfWeek(_this.startOfMonth(value));
500
+ var end = _this.endOfWeek(_this.endOfMonth(value));
505
501
  var count = 0;
506
502
  var current = start;
507
503
  var nestedWeeks = [];
508
- while (isBefore(current, end)) {
504
+ while (_this.isBefore(current, end)) {
509
505
  var weekNumber = Math.floor(count / 7);
510
506
  nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
511
507
  nestedWeeks[weekNumber].push(current);
512
- current = addDays(current, 1);
508
+ current = _this.addDays(current, 1);
513
509
  count += 1;
514
510
  }
515
511
  return nestedWeeks;
@@ -523,13 +519,13 @@ export var AdapterDateFns = /*#__PURE__*/_createClass(function AdapterDateFns()
523
519
  var _ref5 = _slicedToArray(_ref4, 2),
524
520
  start = _ref5[0],
525
521
  end = _ref5[1];
526
- var startDate = startOfYear(start);
527
- var endDate = endOfYear(end);
522
+ var startDate = _this.startOfYear(start);
523
+ var endDate = _this.endOfYear(end);
528
524
  var years = [];
529
525
  var current = startDate;
530
- while (isBefore(current, endDate)) {
526
+ while (_this.isBefore(current, endDate)) {
531
527
  years.push(current);
532
- current = addYears(current, 1);
528
+ current = _this.addYears(current, 1);
533
529
  }
534
530
  return years;
535
531
  };
@@ -392,19 +392,19 @@ export var AdapterDateFnsJalali = /*#__PURE__*/_createClass(function AdapterDate
392
392
  return isAfter(value, comparing);
393
393
  };
394
394
  this.isAfterYear = function (value, comparing) {
395
- return isAfter(value, endOfYear(comparing));
395
+ return isAfter(value, _this.endOfYear(comparing));
396
396
  };
397
397
  this.isAfterDay = function (value, comparing) {
398
- return isAfter(value, endOfDay(comparing));
398
+ return isAfter(value, _this.endOfDay(comparing));
399
399
  };
400
400
  this.isBefore = function (value, comparing) {
401
401
  return isBefore(value, comparing);
402
402
  };
403
403
  this.isBeforeYear = function (value, comparing) {
404
- return isBefore(value, startOfYear(comparing));
404
+ return isBefore(value, _this.startOfYear(comparing));
405
405
  };
406
406
  this.isBeforeDay = function (value, comparing) {
407
- return isBefore(value, startOfDay(comparing));
407
+ return isBefore(value, _this.startOfDay(comparing));
408
408
  };
409
409
  this.isWithinRange = function (value, _ref2) {
410
410
  var _ref3 = _slicedToArray(_ref2, 2),
@@ -510,20 +510,16 @@ export var AdapterDateFnsJalali = /*#__PURE__*/_createClass(function AdapterDate
510
510
  return getDaysInMonth(value);
511
511
  };
512
512
  this.getWeekArray = function (value) {
513
- var start = startOfWeek(startOfMonth(value), {
514
- locale: _this.locale
515
- });
516
- var end = endOfWeek(endOfMonth(value), {
517
- locale: _this.locale
518
- });
513
+ var start = _this.startOfWeek(_this.startOfMonth(value));
514
+ var end = _this.endOfWeek(_this.endOfMonth(value));
519
515
  var count = 0;
520
516
  var current = start;
521
517
  var nestedWeeks = [];
522
- while (isBefore(current, end)) {
518
+ while (_this.isBefore(current, end)) {
523
519
  var weekNumber = Math.floor(count / 7);
524
520
  nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
525
521
  nestedWeeks[weekNumber].push(current);
526
- current = addDays(current, 1);
522
+ current = _this.addDays(current, 1);
527
523
  count += 1;
528
524
  }
529
525
  return nestedWeeks;
@@ -537,13 +533,13 @@ export var AdapterDateFnsJalali = /*#__PURE__*/_createClass(function AdapterDate
537
533
  var _ref5 = _slicedToArray(_ref4, 2),
538
534
  start = _ref5[0],
539
535
  end = _ref5[1];
540
- var startDate = startOfYear(start);
541
- var endDate = endOfYear(end);
536
+ var startDate = _this.startOfYear(start);
537
+ var endDate = _this.endOfYear(end);
542
538
  var years = [];
543
539
  var current = startDate;
544
- while (isBefore(current, endDate)) {
540
+ while (_this.isBefore(current, endDate)) {
545
541
  years.push(current);
546
- current = addYears(current, 1);
542
+ current = _this.addYears(current, 1);
547
543
  }
548
544
  return years;
549
545
  };
@@ -4,13 +4,13 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
4
4
  import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
5
5
  /* eslint-disable class-methods-use-this */
6
6
  import defaultDayjs from 'dayjs';
7
- import weekOfYear from 'dayjs/plugin/weekOfYear';
7
+ import weekOfYearPlugin from 'dayjs/plugin/weekOfYear';
8
8
  import customParseFormatPlugin from 'dayjs/plugin/customParseFormat';
9
9
  import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
10
10
  import isBetweenPlugin from 'dayjs/plugin/isBetween';
11
11
  import { buildWarning } from '../internals/utils/warning';
12
- defaultDayjs.extend(customParseFormatPlugin);
13
12
  defaultDayjs.extend(localizedFormatPlugin);
13
+ defaultDayjs.extend(weekOfYearPlugin);
14
14
  defaultDayjs.extend(isBetweenPlugin);
15
15
  var localeNotFoundWarning = buildWarning(['Your locale has not been found.', 'Either the locale key is not a supported one. Locales supported by dayjs are available here: https://github.com/iamkun/dayjs/tree/dev/src/locale', "Or you forget to import the locale from 'dayjs/locale/{localeUsed}'", 'fallback on English locale']);
16
16
  var formatTokenMap = {
@@ -528,8 +528,8 @@ export var AdapterDayjs = /*#__PURE__*/_createClass(function AdapterDayjs() {
528
528
  };
529
529
  this.getWeekArray = function (value) {
530
530
  var cleanValue = _this.setLocaleToValue(value);
531
- var start = cleanValue.startOf('month').startOf('week');
532
- var end = cleanValue.endOf('month').endOf('week');
531
+ var start = _this.startOfWeek(_this.startOfMonth(cleanValue));
532
+ var end = _this.endOfWeek(_this.endOfMonth(cleanValue));
533
533
  var count = 0;
534
534
  var current = start;
535
535
  var nestedWeeks = [];
@@ -549,11 +549,11 @@ export var AdapterDayjs = /*#__PURE__*/_createClass(function AdapterDayjs() {
549
549
  var _ref5 = _slicedToArray(_ref4, 2),
550
550
  start = _ref5[0],
551
551
  end = _ref5[1];
552
- var startDate = start.startOf('year');
553
- var endDate = end.endOf('year');
552
+ var startDate = _this.startOfYear(start);
553
+ var endDate = _this.endOfYear(end);
554
554
  var years = [];
555
555
  var current = startDate;
556
- while (current < endDate) {
556
+ while (_this.isBefore(current, endDate)) {
557
557
  years.push(current);
558
558
  current = _this.addYears(current, 1);
559
559
  }
@@ -562,5 +562,8 @@ export var AdapterDayjs = /*#__PURE__*/_createClass(function AdapterDayjs() {
562
562
  this.dayjs = withLocale(defaultDayjs, _locale);
563
563
  this.locale = _locale;
564
564
  this.formats = _extends({}, defaultFormats, formats);
565
- defaultDayjs.extend(weekOfYear);
565
+
566
+ // Moved plugins to the constructor to allow for users to use options on the library
567
+ // for reference: https://github.com/mui/mui-x/pull/11151
568
+ defaultDayjs.extend(customParseFormatPlugin);
566
569
  });
@@ -238,7 +238,6 @@ export var AdapterLuxon = /*#__PURE__*/_createClass(function AdapterLuxon() {
238
238
  if (typeof Intl === 'undefined' || typeof Intl.DateTimeFormat === 'undefined') {
239
239
  return true; // Luxon defaults to en-US if Intl not found
240
240
  }
241
-
242
241
  return Boolean((_Intl$DateTimeFormat = new Intl.DateTimeFormat(_this.locale, {
243
242
  hour: 'numeric'
244
243
  })) == null || (_Intl$DateTimeFormat = _Intl$DateTimeFormat.resolvedOptions()) == null ? void 0 : _Intl$DateTimeFormat.hour12);
@@ -315,12 +314,12 @@ export var AdapterLuxon = /*#__PURE__*/_createClass(function AdapterLuxon() {
315
314
  };
316
315
  this.isAfterYear = function (value, comparing) {
317
316
  var comparingInValueTimezone = _this.setTimezone(comparing, _this.getTimezone(value));
318
- var diff = value.diff(comparingInValueTimezone.endOf('year'), 'years').toObject();
317
+ var diff = value.diff(_this.endOfYear(comparingInValueTimezone), 'years').toObject();
319
318
  return diff.years > 0;
320
319
  };
321
320
  this.isAfterDay = function (value, comparing) {
322
321
  var comparingInValueTimezone = _this.setTimezone(comparing, _this.getTimezone(value));
323
- var diff = value.diff(comparingInValueTimezone.endOf('day'), 'days').toObject();
322
+ var diff = value.diff(_this.endOfDay(comparingInValueTimezone), 'days').toObject();
324
323
  return diff.days > 0;
325
324
  };
326
325
  this.isBefore = function (value, comparing) {
@@ -328,12 +327,12 @@ export var AdapterLuxon = /*#__PURE__*/_createClass(function AdapterLuxon() {
328
327
  };
329
328
  this.isBeforeYear = function (value, comparing) {
330
329
  var comparingInValueTimezone = _this.setTimezone(comparing, _this.getTimezone(value));
331
- var diff = value.diff(comparingInValueTimezone.startOf('year'), 'years').toObject();
330
+ var diff = value.diff(_this.startOfYear(comparingInValueTimezone), 'years').toObject();
332
331
  return diff.years < 0;
333
332
  };
334
333
  this.isBeforeDay = function (value, comparing) {
335
334
  var comparingInValueTimezone = _this.setTimezone(comparing, _this.getTimezone(value));
336
- var diff = value.diff(comparingInValueTimezone.startOf('day'), 'days').toObject();
335
+ var diff = value.diff(_this.startOfDay(comparingInValueTimezone), 'days').toObject();
337
336
  return diff.days < 0;
338
337
  };
339
338
  this.isWithinRange = function (value, _ref2) {
@@ -349,7 +348,12 @@ export var AdapterLuxon = /*#__PURE__*/_createClass(function AdapterLuxon() {
349
348
  return value.startOf('month');
350
349
  };
351
350
  this.startOfWeek = function (value) {
352
- return value.startOf('week');
351
+ return value.startOf('week',
352
+ // TODO: remove when `@types/luxon` add support for the parameter.
353
+ // @ts-ignore
354
+ {
355
+ useLocaleWeeks: true
356
+ });
353
357
  };
354
358
  this.startOfDay = function (value) {
355
359
  return value.startOf('day');
@@ -361,7 +365,12 @@ export var AdapterLuxon = /*#__PURE__*/_createClass(function AdapterLuxon() {
361
365
  return value.endOf('month');
362
366
  };
363
367
  this.endOfWeek = function (value) {
364
- return value.endOf('week');
368
+ return value.endOf('week',
369
+ // TODO: remove when `@types/luxon` add support for the parameter.
370
+ // @ts-ignore
371
+ {
372
+ useLocaleWeeks: true
373
+ });
365
374
  };
366
375
  this.endOfDay = function (value) {
367
376
  return value.endOf('day');
@@ -463,13 +472,15 @@ export var AdapterLuxon = /*#__PURE__*/_createClass(function AdapterLuxon() {
463
472
  };
464
473
  this.getWeekArray = function (value) {
465
474
  var cleanValue = _this.setLocaleToValue(value);
466
- var _cleanValue$endOf$end = cleanValue.endOf('month').endOf('week').diff(cleanValue.startOf('month').startOf('week'), 'days').toObject(),
467
- days = _cleanValue$endOf$end.days;
475
+ var firstDay = _this.startOfWeek(_this.startOfMonth(cleanValue));
476
+ var lastDay = _this.endOfWeek(_this.endOfMonth(cleanValue));
477
+ var _lastDay$diff$toObjec = lastDay.diff(firstDay, 'days').toObject(),
478
+ days = _lastDay$diff$toObjec.days;
468
479
  var weeks = [];
469
480
  new Array(Math.round(days)).fill(0).map(function (_, i) {
470
481
  return i;
471
482
  }).map(function (day) {
472
- return cleanValue.startOf('month').startOf('week').plus({
483
+ return firstDay.plus({
473
484
  days: day
474
485
  });
475
486
  }).forEach(function (v, i) {
@@ -482,21 +493,22 @@ export var AdapterLuxon = /*#__PURE__*/_createClass(function AdapterLuxon() {
482
493
  return weeks;
483
494
  };
484
495
  this.getWeekNumber = function (value) {
485
- return value.weekNumber;
496
+ var _value$localeWeekNumb;
497
+ // TODO: remove when `@types/luxon` add support for the parameter.
498
+ // @ts-ignore
499
+ return (_value$localeWeekNumb = value.localeWeekNumber) != null ? _value$localeWeekNumb : value.weekNumber;
486
500
  };
487
501
  this.getYearRange = function (_ref4) {
488
502
  var _ref5 = _slicedToArray(_ref4, 2),
489
503
  start = _ref5[0],
490
504
  end = _ref5[1];
491
- var startDate = start.startOf('year');
492
- var endDate = end.endOf('year');
493
- var current = startDate;
505
+ var startDate = _this.startOfYear(start);
506
+ var endDate = _this.endOfYear(end);
494
507
  var years = [];
495
- while (current < endDate) {
508
+ var current = startDate;
509
+ while (_this.isBefore(current, endDate)) {
496
510
  years.push(current);
497
- current = current.plus({
498
- year: 1
499
- });
511
+ current = _this.addYears(current, 1);
500
512
  }
501
513
  return years;
502
514
  };