@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
@@ -131,8 +131,8 @@ StaticDateTimePicker.propTypes = {
131
131
  */
132
132
  displayWeekNumber: PropTypes.bool,
133
133
  /**
134
- * Calendar will show more weeks in order to match this value.
135
- * Put it to 6 for having fix number of week in Gregorian calendars
134
+ * The day view will show as many weeks as needed after the end of the current month to match this value.
135
+ * Put it to 6 to have a fixed number of weeks in Gregorian calendars
136
136
  * @default undefined
137
137
  */
138
138
  fixedWeekNumber: PropTypes.number,
@@ -276,7 +276,6 @@ export function Clock(inProps) {
276
276
  // do nothing
277
277
  }
278
278
  };
279
-
280
279
  return /*#__PURE__*/_jsxs(ClockRoot, {
281
280
  className: clsx(className, classes.root),
282
281
  children: [/*#__PURE__*/_jsxs(ClockClock, {
@@ -85,7 +85,6 @@ export function ClockPointer(inProps) {
85
85
  if (type === 'hours' && viewValue > 12) {
86
86
  angle -= 360; // round up angle to max 360 degrees
87
87
  }
88
-
89
88
  return {
90
89
  height: Math.round((isInner ? 0.26 : 0.4) * CLOCK_WIDTH),
91
90
  transform: `rotateZ(${angle}deg)`
@@ -116,7 +116,6 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
116
116
  granularity: SECTION_TYPE_GRANULARITY.year
117
117
  }), [] // eslint-disable-line react-hooks/exhaustive-deps
118
118
  );
119
-
120
119
  const ownerState = props;
121
120
  const classes = useUtilityClasses(ownerState);
122
121
  const todayYear = React.useMemo(() => utils.getYear(now), [utils, now]);
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-date-pickers v7.0.0-alpha.2
2
+ * @mui/x-date-pickers v7.0.0-alpha.4
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -0,0 +1,8 @@
1
+ import * as React from 'react';
2
+ interface OutlineProps extends React.HTMLAttributes<HTMLFieldSetElement> {
3
+ notched: boolean;
4
+ shrink: boolean;
5
+ label: React.ReactNode;
6
+ }
7
+ export default function Outline(props: OutlineProps): React.JSX.Element;
8
+ export {};
@@ -0,0 +1,97 @@
1
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
+ import _extends from "@babel/runtime/helpers/esm/extends";
3
+ const _excluded = ["children", "className", "label"];
4
+ import * as React from 'react';
5
+ import { styled } from '@mui/material/styles';
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ const OutlineRoot = styled('fieldset')({
8
+ textAlign: 'left',
9
+ position: 'absolute',
10
+ bottom: 0,
11
+ right: 0,
12
+ top: -5,
13
+ left: 0,
14
+ margin: 0,
15
+ padding: '0 8px',
16
+ pointerEvents: 'none',
17
+ borderRadius: 'inherit',
18
+ borderStyle: 'solid',
19
+ borderWidth: 1,
20
+ overflow: 'hidden',
21
+ minWidth: '0%'
22
+ });
23
+ const OutlineLegend = styled('legend')(({
24
+ ownerState,
25
+ theme
26
+ }) => _extends({
27
+ float: 'unset',
28
+ // Fix conflict with bootstrap
29
+ width: 'auto',
30
+ // Fix conflict with bootstrap
31
+ overflow: 'hidden'
32
+ }, !ownerState.withLabel && {
33
+ padding: 0,
34
+ lineHeight: '11px',
35
+ // sync with `height` in `legend` styles
36
+ transition: theme.transitions.create('width', {
37
+ duration: 150,
38
+ easing: theme.transitions.easing.easeOut
39
+ })
40
+ }, ownerState.withLabel && _extends({
41
+ display: 'block',
42
+ // Fix conflict with normalize.css and sanitize.css
43
+ padding: 0,
44
+ height: 11,
45
+ // sync with `lineHeight` in `legend` styles
46
+ fontSize: '0.75em',
47
+ visibility: 'hidden',
48
+ maxWidth: 0.01,
49
+ transition: theme.transitions.create('max-width', {
50
+ duration: 50,
51
+ easing: theme.transitions.easing.easeOut
52
+ }),
53
+ whiteSpace: 'nowrap',
54
+ '& > span': {
55
+ paddingLeft: 5,
56
+ paddingRight: 5,
57
+ display: 'inline-block',
58
+ opacity: 0,
59
+ visibility: 'visible'
60
+ }
61
+ }, ownerState.notched && {
62
+ maxWidth: '100%',
63
+ transition: theme.transitions.create('max-width', {
64
+ duration: 100,
65
+ easing: theme.transitions.easing.easeOut,
66
+ delay: 50
67
+ })
68
+ })));
69
+ export default function Outline(props) {
70
+ const {
71
+ className,
72
+ label
73
+ } = props,
74
+ other = _objectWithoutPropertiesLoose(props, _excluded);
75
+ const withLabel = label != null && label !== '';
76
+ const ownerState = _extends({}, props, {
77
+ withLabel
78
+ });
79
+ return /*#__PURE__*/_jsx(OutlineRoot, _extends({
80
+ "aria-hidden": true,
81
+ className: className,
82
+ ownerState: ownerState
83
+ }, other, {
84
+ children: /*#__PURE__*/_jsx(OutlineLegend, {
85
+ ownerState: ownerState,
86
+ children: withLabel ? /*#__PURE__*/_jsx("span", {
87
+ children: label
88
+ }) :
89
+ /*#__PURE__*/
90
+ // notranslate needed while Google Translate will not fix zero-width space issue
91
+ _jsx("span", {
92
+ className: "notranslate",
93
+ children: "\u200B"
94
+ })
95
+ })
96
+ }));
97
+ }
@@ -0,0 +1,3 @@
1
+ import * as React from 'react';
2
+ import { PickersInputProps } from './PickersInput.types';
3
+ export declare const PickersInput: React.ForwardRefExoticComponent<Omit<PickersInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,269 @@
1
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
+ import _extends from "@babel/runtime/helpers/esm/extends";
3
+ const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "contentEditable", "tabIndex", "fullWidth", "inputProps", "inputRef", "sectionsContainerRef"];
4
+ import * as React from 'react';
5
+ import clsx from 'clsx';
6
+ import Box from '@mui/material/Box';
7
+ import { useFormControl } from '@mui/material/FormControl';
8
+ import { styled } from '@mui/material/styles';
9
+ import useForkRef from '@mui/utils/useForkRef';
10
+ import composeClasses from '@mui/utils/composeClasses';
11
+ import capitalize from '@mui/utils/capitalize';
12
+ import visuallyHidden from '@mui/utils/visuallyHidden';
13
+ import { pickersInputClasses, getPickersInputUtilityClass } from './pickersTextFieldClasses';
14
+ import Outline from './Outline';
15
+ import { jsx as _jsx } from "react/jsx-runtime";
16
+ import { jsxs as _jsxs } from "react/jsx-runtime";
17
+ const PickersInputRoot = styled(Box, {
18
+ name: 'MuiPickersInput',
19
+ slot: 'Root',
20
+ overridesResolver: (props, styles) => styles.root
21
+ })(({
22
+ theme,
23
+ ownerState
24
+ }) => {
25
+ const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
26
+ return _extends({
27
+ cursor: 'text',
28
+ padding: '16.5px 14px',
29
+ display: 'flex',
30
+ justifyContent: 'flex-start',
31
+ alignItems: 'center',
32
+ width: ownerState.fullWidth ? '100%' : '25ch',
33
+ position: 'relative',
34
+ outline: 'none',
35
+ borderRadius: (theme.vars || theme).shape.borderRadius,
36
+ [`&:hover .${pickersInputClasses.notchedOutline}`]: {
37
+ borderColor: (theme.vars || theme).palette.text.primary
38
+ },
39
+ // Reset on touch devices, it doesn't add specificity
40
+ '@media (hover: none)': {
41
+ [`&:hover .${pickersInputClasses.notchedOutline}`]: {
42
+ borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
43
+ }
44
+ },
45
+ [`&.${pickersInputClasses.focused} .${pickersInputClasses.notchedOutline}`]: {
46
+ borderStyle: 'solid',
47
+ borderColor: (theme.vars || theme).palette[ownerState.color].main,
48
+ borderWidth: 2
49
+ },
50
+ [`&.${pickersInputClasses.disabled}`]: {
51
+ [`& .${pickersInputClasses.notchedOutline}`]: {
52
+ borderColor: (theme.vars || theme).palette.action.disabled
53
+ },
54
+ '*': {
55
+ color: (theme.vars || theme).palette.action.disabled
56
+ }
57
+ },
58
+ [`&.${pickersInputClasses.error} .${pickersInputClasses.notchedOutline}`]: {
59
+ borderColor: (theme.vars || theme).palette.error.main
60
+ }
61
+ }, ownerState.size === 'small' && {
62
+ padding: '8.5px 14px'
63
+ });
64
+ });
65
+ const PickersInputSectionsContainer = styled('div', {
66
+ name: 'MuiPickersInput',
67
+ slot: 'SectionsContainer',
68
+ overridesResolver: (props, styles) => styles.sectionsContainer
69
+ })(({
70
+ theme,
71
+ ownerState
72
+ }) => _extends({
73
+ fontFamily: theme.typography.fontFamily,
74
+ fontSize: 'inherit',
75
+ lineHeight: '1.4375em',
76
+ // 23px
77
+ flexGrow: 1,
78
+ outline: 'none'
79
+ }, !(ownerState.adornedStart || ownerState.focused || ownerState.filled) && _extends({
80
+ color: 'currentColor'
81
+ }, ownerState.label == null && (theme.vars ? {
82
+ opacity: theme.vars.opacity.inputPlaceholder
83
+ } : {
84
+ opacity: theme.palette.mode === 'light' ? 0.42 : 0.5
85
+ }), ownerState.label != null && {
86
+ opacity: 0
87
+ })));
88
+ const PickersInputSection = styled('span', {
89
+ name: 'MuiPickersInput',
90
+ slot: 'Section',
91
+ overridesResolver: (props, styles) => styles.section
92
+ })(({
93
+ theme
94
+ }) => ({
95
+ fontFamily: theme.typography.fontFamily,
96
+ fontSize: 'inherit',
97
+ lineHeight: '1.4375em',
98
+ // 23px
99
+ flexGrow: 1
100
+ }));
101
+ const PickersInputContent = styled('span', {
102
+ name: 'MuiPickersInput',
103
+ slot: 'SectionContent',
104
+ overridesResolver: (props, styles) => styles.content
105
+ })(({
106
+ theme
107
+ }) => ({
108
+ fontFamily: theme.typography.fontFamily,
109
+ lineHeight: '1.4375em',
110
+ // 23px
111
+ letterSpacing: 'inherit',
112
+ width: 'fit-content'
113
+ }));
114
+ const PickersInputSeparator = styled('span', {
115
+ name: 'MuiPickersInput',
116
+ slot: 'Separator',
117
+ overridesResolver: (props, styles) => styles.separator
118
+ })(() => ({
119
+ whiteSpace: 'pre'
120
+ }));
121
+ const PickersInputInput = styled('input', {
122
+ name: 'MuiPickersInput',
123
+ slot: 'Input',
124
+ overridesResolver: (props, styles) => styles.hiddenInput
125
+ })(_extends({}, visuallyHidden));
126
+ const NotchedOutlineRoot = styled(Outline, {
127
+ name: 'MuiPickersInput',
128
+ slot: 'NotchedOutline',
129
+ overridesResolver: (props, styles) => styles.notchedOutline
130
+ })(({
131
+ theme
132
+ }) => {
133
+ const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
134
+ return {
135
+ borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
136
+ };
137
+ });
138
+ const useUtilityClasses = ownerState => {
139
+ const {
140
+ focused,
141
+ disabled,
142
+ error,
143
+ classes,
144
+ fullWidth,
145
+ readOnly,
146
+ color,
147
+ size,
148
+ endAdornment,
149
+ startAdornment
150
+ } = ownerState;
151
+ const slots = {
152
+ root: ['root', focused && !disabled && 'focused', disabled && 'disabled', readOnly && 'readOnly', error && 'error', fullWidth && 'fullWidth', `color${capitalize(color)}`, size === 'small' && 'inputSizeSmall', Boolean(startAdornment) && 'adornedStart', Boolean(endAdornment) && 'adornedEnd'],
153
+ notchedOutline: ['notchedOutline'],
154
+ input: ['input'],
155
+ sectionsContainer: ['sectionsContainer'],
156
+ sectionContent: ['sectionContent'],
157
+ sectionBefore: ['sectionBefore'],
158
+ sectionAfter: ['sectionAfter']
159
+ };
160
+ return composeClasses(slots, getPickersInputUtilityClass, classes);
161
+ };
162
+ export const PickersInput = /*#__PURE__*/React.forwardRef(function PickersInput(props, ref) {
163
+ const {
164
+ elements,
165
+ areAllSectionsEmpty,
166
+ label,
167
+ value,
168
+ onChange,
169
+ id,
170
+ endAdornment,
171
+ startAdornment,
172
+ contentEditable,
173
+ tabIndex,
174
+ inputProps,
175
+ inputRef,
176
+ sectionsContainerRef
177
+ } = props,
178
+ other = _objectWithoutPropertiesLoose(props, _excluded);
179
+ const rootRef = React.useRef(null);
180
+ const handleRootRef = useForkRef(ref, rootRef);
181
+ const handleInputRef = useForkRef(inputProps == null ? void 0 : inputProps.ref, inputRef);
182
+ const muiFormControl = useFormControl();
183
+ if (!muiFormControl) {
184
+ throw new Error('MUI: PickersInput should always be used inside a PickersTextField component');
185
+ }
186
+ const handleInputFocus = event => {
187
+ var _muiFormControl$onFoc;
188
+ // Fix a bug with IE11 where the focus/blur events are triggered
189
+ // while the component is disabled.
190
+ if (muiFormControl.disabled) {
191
+ event.stopPropagation();
192
+ return;
193
+ }
194
+ (_muiFormControl$onFoc = muiFormControl.onFocus) == null || _muiFormControl$onFoc.call(muiFormControl, event);
195
+ };
196
+ React.useEffect(() => {
197
+ if (muiFormControl) {
198
+ muiFormControl.setAdornedStart(Boolean(startAdornment));
199
+ }
200
+ }, [muiFormControl, startAdornment]);
201
+ React.useEffect(() => {
202
+ if (!muiFormControl) {
203
+ return;
204
+ }
205
+ if (areAllSectionsEmpty) {
206
+ muiFormControl.onEmpty();
207
+ } else {
208
+ muiFormControl.onFilled();
209
+ }
210
+ }, [muiFormControl, areAllSectionsEmpty]);
211
+ const ownerState = _extends({}, props, muiFormControl);
212
+ const classes = useUtilityClasses(ownerState);
213
+ return /*#__PURE__*/_jsxs(PickersInputRoot, _extends({}, other, {
214
+ className: classes.root,
215
+ ownerState: ownerState,
216
+ "aria-invalid": muiFormControl.error,
217
+ ref: handleRootRef,
218
+ children: [startAdornment, /*#__PURE__*/_jsx(PickersInputSectionsContainer, {
219
+ ownerState: ownerState,
220
+ className: classes.sectionsContainer,
221
+ contentEditable: contentEditable,
222
+ suppressContentEditableWarning: true,
223
+ onFocus: handleInputFocus,
224
+ onBlur: muiFormControl.onBlur,
225
+ tabIndex: tabIndex,
226
+ ref: sectionsContainerRef,
227
+ children: contentEditable ? elements.map(({
228
+ content,
229
+ before,
230
+ after
231
+ }) => `${before.children}${content.children}${after.children}`).join('') : /*#__PURE__*/_jsx(React.Fragment, {
232
+ children: elements.map(({
233
+ container,
234
+ content,
235
+ before,
236
+ after
237
+ }, elementIndex) => /*#__PURE__*/_jsxs(PickersInputSection, _extends({}, container, {
238
+ children: [/*#__PURE__*/_jsx(PickersInputSeparator, _extends({}, before, {
239
+ className: clsx(pickersInputClasses.sectionBefore, before == null ? void 0 : before.className)
240
+ })), /*#__PURE__*/_jsx(PickersInputContent, _extends({}, content, {
241
+ suppressContentEditableWarning: true,
242
+ className: clsx(pickersInputClasses.sectionContent, content == null ? void 0 : content.className),
243
+ ownerState
244
+ })), /*#__PURE__*/_jsx(PickersInputSeparator, _extends({}, after, {
245
+ className: clsx(pickersInputClasses.sectionAfter, after == null ? void 0 : after.className)
246
+ }))]
247
+ }), elementIndex))
248
+ })
249
+ }), endAdornment, /*#__PURE__*/_jsx(NotchedOutlineRoot, {
250
+ shrink: muiFormControl.adornedStart || muiFormControl.focused || muiFormControl.filled,
251
+ notched: muiFormControl.adornedStart || muiFormControl.focused || muiFormControl.filled,
252
+ className: classes.notchedOutline,
253
+ label: label != null && label !== '' && muiFormControl.required ? /*#__PURE__*/_jsxs(React.Fragment, {
254
+ children: [label, "\u2009", '*']
255
+ }) : label,
256
+ ownerState: ownerState
257
+ }), /*#__PURE__*/_jsx(PickersInputInput, _extends({
258
+ className: classes.input,
259
+ value: value,
260
+ onChange: onChange,
261
+ id: id,
262
+ "aria-hidden": "true",
263
+ tabIndex: -1
264
+ }, inputProps, {
265
+ ref: handleInputRef
266
+ }))]
267
+ }));
268
+ });
269
+ PickersInput.muiName = 'Input';
@@ -0,0 +1,45 @@
1
+ import * as React from 'react';
2
+ import { BoxProps } from '@mui/material/Box';
3
+ export interface PickersInputElement {
4
+ container: React.HTMLAttributes<HTMLSpanElement>;
5
+ content: React.HTMLAttributes<HTMLSpanElement>;
6
+ before: React.HTMLAttributes<HTMLSpanElement>;
7
+ after: React.HTMLAttributes<HTMLSpanElement>;
8
+ }
9
+ export interface PickersInputPropsUsedByField {
10
+ /**
11
+ * The elements to render.
12
+ * Each element contains the prop to edit a section of the value.
13
+ */
14
+ elements: PickersInputElement[];
15
+ /**
16
+ * Is `true` if the current values equals the empty value.
17
+ * For a single item value, it means that `value === null`
18
+ * For a range value, it means that `value === [null, null]`
19
+ */
20
+ areAllSectionsEmpty: boolean;
21
+ onClick: React.MouseEventHandler<HTMLDivElement>;
22
+ onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
23
+ onInput: React.FormEventHandler<HTMLDivElement>;
24
+ onPaste: React.ClipboardEventHandler<HTMLDivElement>;
25
+ endAdornment?: React.ReactNode;
26
+ startAdornment?: React.ReactNode;
27
+ tabIndex: number | undefined;
28
+ contentEditable: boolean;
29
+ value: string;
30
+ onChange: React.ChangeEventHandler<HTMLInputElement>;
31
+ label?: React.ReactNode;
32
+ id?: string;
33
+ fullWidth?: boolean;
34
+ readOnly?: boolean;
35
+ inputProps?: React.HTMLAttributes<HTMLInputElement> & {
36
+ ref?: React.Ref<HTMLInputElement>;
37
+ };
38
+ inputRef?: React.Ref<HTMLInputElement>;
39
+ sectionsContainerRef?: React.Ref<HTMLDivElement>;
40
+ }
41
+ export interface PickersInputOtherProps extends Omit<BoxProps, keyof PickersInputPropsUsedByField> {
42
+ ref?: React.Ref<HTMLDivElement>;
43
+ }
44
+ export interface PickersInputProps extends PickersInputPropsUsedByField, PickersInputOtherProps {
45
+ }
@@ -0,0 +1,3 @@
1
+ import * as React from 'react';
2
+ import { PickersTextFieldProps } from './PickersTextField.types';
3
+ export declare const PickersTextField: React.ForwardRefExoticComponent<Omit<PickersTextFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,129 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
+ const _excluded = ["onFocus", "onBlur", "className", "color", "disabled", "error", "required", "variant", "InputProps", "inputProps", "inputRef", "sectionsContainerRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
4
+ import * as React from 'react';
5
+ import clsx from 'clsx';
6
+ import { styled } from '@mui/material/styles';
7
+ import useForkRef from '@mui/utils/useForkRef';
8
+ import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
9
+ import InputLabel from '@mui/material/InputLabel';
10
+ import FormHelperText from '@mui/material/FormHelperText';
11
+ import FormControl from '@mui/material/FormControl';
12
+ import { getPickersTextFieldUtilityClass } from './pickersTextFieldClasses';
13
+ import { PickersInput } from './PickersInput';
14
+ import { jsx as _jsx } from "react/jsx-runtime";
15
+ import { jsxs as _jsxs } from "react/jsx-runtime";
16
+ const PickersTextFieldRoot = styled(FormControl, {
17
+ name: 'MuiPickersTextField',
18
+ slot: 'Root',
19
+ overridesResolver: (props, styles) => styles.root
20
+ })({});
21
+ const useUtilityClasses = ownerState => {
22
+ const {
23
+ focused,
24
+ disabled,
25
+ classes,
26
+ required
27
+ } = ownerState;
28
+ const slots = {
29
+ root: ['root', focused && !disabled && 'focused', disabled && 'disabled', required && 'required']
30
+ };
31
+ return composeClasses(slots, getPickersTextFieldUtilityClass, classes);
32
+ };
33
+ export const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField(props, ref) {
34
+ const {
35
+ // Props used by FormControl
36
+ onFocus,
37
+ onBlur,
38
+ className,
39
+ color = 'primary',
40
+ disabled = false,
41
+ error = false,
42
+ required = false,
43
+ variant = 'outlined',
44
+ // Props used by PickersInput
45
+ InputProps,
46
+ inputProps,
47
+ inputRef,
48
+ sectionsContainerRef,
49
+ elements,
50
+ areAllSectionsEmpty,
51
+ onClick,
52
+ onKeyDown,
53
+ onPaste,
54
+ onInput,
55
+ endAdornment,
56
+ startAdornment,
57
+ tabIndex,
58
+ contentEditable,
59
+ focused,
60
+ value,
61
+ onChange,
62
+ fullWidth,
63
+ id: idProp,
64
+ // Props used by FormHelperText
65
+ helperText,
66
+ FormHelperTextProps,
67
+ // Props used by InputLabel
68
+ label,
69
+ InputLabelProps
70
+ } = props,
71
+ other = _objectWithoutPropertiesLoose(props, _excluded);
72
+ const rootRef = React.useRef(null);
73
+ const handleRootRef = useForkRef(ref, rootRef);
74
+ const id = useId(idProp);
75
+ const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
76
+ const inputLabelId = label && id ? `${id}-label` : undefined;
77
+ const ownerState = _extends({}, props, {
78
+ color,
79
+ disabled,
80
+ error,
81
+ focused,
82
+ required,
83
+ variant
84
+ });
85
+ const classes = useUtilityClasses(ownerState);
86
+ return /*#__PURE__*/_jsxs(PickersTextFieldRoot, _extends({
87
+ className: clsx(classes.root, className),
88
+ ref: handleRootRef,
89
+ focused: focused,
90
+ onFocus: onFocus,
91
+ onBlur: onBlur,
92
+ disabled: disabled,
93
+ variant: variant,
94
+ error: error,
95
+ color: color,
96
+ required: required,
97
+ ownerState: ownerState
98
+ }, other, {
99
+ children: [/*#__PURE__*/_jsx(InputLabel, _extends({
100
+ htmlFor: id,
101
+ id: inputLabelId
102
+ }, InputLabelProps, {
103
+ children: label
104
+ })), /*#__PURE__*/_jsx(PickersInput, _extends({
105
+ elements: elements,
106
+ areAllSectionsEmpty: areAllSectionsEmpty,
107
+ onClick: onClick,
108
+ onKeyDown: onKeyDown,
109
+ onInput: onInput,
110
+ onPaste: onPaste,
111
+ endAdornment: endAdornment,
112
+ startAdornment: startAdornment,
113
+ tabIndex: tabIndex,
114
+ contentEditable: contentEditable,
115
+ value: value,
116
+ onChange: onChange,
117
+ id: id,
118
+ fullWidth: fullWidth,
119
+ inputProps: inputProps,
120
+ inputRef: inputRef,
121
+ sectionsContainerRef: sectionsContainerRef,
122
+ label: label
123
+ }, InputProps)), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
124
+ id: helperTextId
125
+ }, FormHelperTextProps, {
126
+ children: helperText
127
+ }))]
128
+ }));
129
+ });
@@ -0,0 +1,21 @@
1
+ import * as React from 'react';
2
+ import { FormControlProps } from '@mui/material/FormControl';
3
+ import { FormHelperTextProps } from '@mui/material/FormHelperText';
4
+ import { InputLabelProps } from '@mui/material/InputLabel';
5
+ import { PickersInputOtherProps, PickersInputPropsUsedByField } from './PickersInput.types';
6
+ interface PickersTextFieldPropsUsedByField {
7
+ onFocus: React.FocusEventHandler<HTMLDivElement>;
8
+ onBlur: React.FocusEventHandler<HTMLDivElement>;
9
+ disabled: boolean;
10
+ error: boolean;
11
+ }
12
+ export interface PickersTextFieldProps extends PickersInputPropsUsedByField, PickersTextFieldPropsUsedByField, Omit<FormControlProps, keyof PickersInputPropsUsedByField | keyof PickersTextFieldPropsUsedByField> {
13
+ InputProps?: PickersInputOtherProps;
14
+ FormHelperTextProps?: Partial<FormHelperTextProps>;
15
+ InputLabelProps?: Partial<InputLabelProps>;
16
+ /**
17
+ * The helper text content.
18
+ */
19
+ helperText?: React.ReactNode;
20
+ }
21
+ export {};
@@ -0,0 +1 @@
1
+ export { PickersTextField } from './PickersTextField';
@@ -0,0 +1 @@
1
+ export { PickersTextField } from './PickersTextField';