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

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 (180) 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 +1 -1
  5. package/AdapterLuxon/AdapterLuxon.js +29 -16
  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 +241 -0
  13. package/DateCalendar/DateCalendar.js +2 -2
  14. package/DateCalendar/DayCalendar.d.ts +3 -3
  15. package/DatePicker/DatePicker.js +2 -2
  16. package/DateTimePicker/DateTimePicker.js +2 -2
  17. package/DesktopDatePicker/DesktopDatePicker.js +2 -2
  18. package/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
  19. package/MobileDatePicker/MobileDatePicker.js +2 -2
  20. package/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  21. package/MultiSectionDigitalClock/MultiSectionDigitalClock.js +2 -0
  22. package/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.d.ts +3 -2
  23. package/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js +2 -1
  24. package/PickersShortcuts/PickersShortcuts.d.ts +1 -1
  25. package/PickersShortcuts/PickersShortcuts.js +1 -1
  26. package/README.md +0 -1
  27. package/StaticDatePicker/StaticDatePicker.js +2 -2
  28. package/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  29. package/index.js +1 -1
  30. package/internals/components/PickersTextField/Outline.d.ts +2 -0
  31. package/internals/components/PickersTextField/Outline.js +99 -0
  32. package/internals/components/PickersTextField/PickersInput.d.ts +4 -0
  33. package/internals/components/PickersTextField/PickersInput.js +264 -0
  34. package/internals/components/PickersTextField/PickersInput.types.d.ts +30 -0
  35. package/internals/components/PickersTextField/PickersInput.types.js +1 -0
  36. package/internals/components/PickersTextField/PickersTextField.d.ts +3 -0
  37. package/internals/components/PickersTextField/PickersTextField.js +120 -0
  38. package/internals/components/PickersTextField/PickersTextField.types.d.ts +18 -0
  39. package/internals/components/PickersTextField/PickersTextField.types.js +1 -0
  40. package/internals/components/PickersTextField/index.d.ts +1 -0
  41. package/internals/components/PickersTextField/index.js +1 -0
  42. package/internals/components/PickersTextField/pickersTextFieldClasses.d.ts +42 -0
  43. package/internals/components/PickersTextField/pickersTextFieldClasses.js +9 -0
  44. package/internals/hooks/useField/useField.utils.js +23 -10
  45. package/internals/hooks/usePicker/usePickerValue.js +2 -6
  46. package/internals/hooks/usePicker/usePickerValue.types.d.ts +2 -2
  47. package/legacy/AdapterDateFns/AdapterDateFns.js +10 -14
  48. package/legacy/AdapterDateFnsJalali/AdapterDateFnsJalali.js +12 -16
  49. package/legacy/AdapterDayjs/AdapterDayjs.js +11 -8
  50. package/legacy/AdapterLuxon/AdapterLuxon.js +30 -17
  51. package/legacy/AdapterMoment/AdapterMoment.js +326 -320
  52. package/legacy/AdapterMomentHijri/AdapterMomentHijri.js +4 -25
  53. package/legacy/AdapterMomentJalaali/AdapterMomentJalaali.js +0 -30
  54. package/legacy/DateCalendar/DateCalendar.js +2 -2
  55. package/legacy/DatePicker/DatePicker.js +2 -2
  56. package/legacy/DateTimePicker/DateTimePicker.js +2 -2
  57. package/legacy/DesktopDatePicker/DesktopDatePicker.js +2 -2
  58. package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
  59. package/legacy/MobileDatePicker/MobileDatePicker.js +2 -2
  60. package/legacy/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  61. package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClock.js +2 -0
  62. package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js +2 -1
  63. package/legacy/PickersShortcuts/PickersShortcuts.js +2 -1
  64. package/legacy/StaticDatePicker/StaticDatePicker.js +2 -2
  65. package/legacy/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  66. package/legacy/index.js +1 -1
  67. package/legacy/internals/components/PickersTextField/Outline.js +100 -0
  68. package/legacy/internals/components/PickersTextField/PickersInput.js +273 -0
  69. package/legacy/internals/components/PickersTextField/PickersInput.types.js +1 -0
  70. package/legacy/internals/components/PickersTextField/PickersTextField.js +129 -0
  71. package/legacy/internals/components/PickersTextField/PickersTextField.types.js +1 -0
  72. package/legacy/internals/components/PickersTextField/index.js +1 -0
  73. package/legacy/internals/components/PickersTextField/pickersTextFieldClasses.js +9 -0
  74. package/legacy/internals/hooks/useField/useField.utils.js +23 -10
  75. package/legacy/internals/hooks/usePicker/usePickerValue.js +2 -6
  76. package/locales/beBY.d.ts +18 -5
  77. package/locales/caES.d.ts +18 -5
  78. package/locales/csCZ.d.ts +18 -5
  79. package/locales/daDK.d.ts +18 -5
  80. package/locales/deDE.d.ts +18 -5
  81. package/locales/elGR.d.ts +18 -5
  82. package/locales/enUS.d.ts +18 -5
  83. package/locales/esES.d.ts +18 -5
  84. package/locales/eu.d.ts +18 -5
  85. package/locales/faIR.d.ts +18 -5
  86. package/locales/fiFI.d.ts +18 -5
  87. package/locales/frFR.d.ts +18 -5
  88. package/locales/heIL.d.ts +18 -5
  89. package/locales/huHU.d.ts +18 -5
  90. package/locales/isIS.d.ts +18 -5
  91. package/locales/itIT.d.ts +18 -5
  92. package/locales/jaJP.d.ts +18 -5
  93. package/locales/koKR.d.ts +18 -5
  94. package/locales/kzKZ.d.ts +18 -5
  95. package/locales/mk.d.ts +18 -5
  96. package/locales/nbNO.d.ts +18 -5
  97. package/locales/nlNL.d.ts +18 -5
  98. package/locales/plPL.d.ts +18 -5
  99. package/locales/ptBR.d.ts +18 -5
  100. package/locales/roRO.d.ts +18 -5
  101. package/locales/ruRU.d.ts +18 -5
  102. package/locales/skSK.d.ts +18 -5
  103. package/locales/svSE.d.ts +18 -5
  104. package/locales/trTR.d.ts +18 -5
  105. package/locales/ukUA.d.ts +18 -5
  106. package/locales/urPK.d.ts +18 -5
  107. package/locales/utils/getPickersLocalization.d.ts +18 -5
  108. package/locales/utils/pickersLocaleTextApi.d.ts +18 -5
  109. package/locales/viVN.d.ts +18 -5
  110. package/locales/zhCN.d.ts +18 -5
  111. package/locales/zhHK.d.ts +18 -5
  112. package/modern/AdapterDateFns/AdapterDateFns.js +10 -14
  113. package/modern/AdapterDateFnsJalali/AdapterDateFnsJalali.js +12 -16
  114. package/modern/AdapterDayjs/AdapterDayjs.js +11 -8
  115. package/modern/AdapterLuxon/AdapterLuxon.js +28 -16
  116. package/modern/AdapterMoment/AdapterMoment.js +14 -14
  117. package/modern/AdapterMomentHijri/AdapterMomentHijri.js +1 -24
  118. package/modern/AdapterMomentJalaali/AdapterMomentJalaali.js +0 -26
  119. package/modern/DateCalendar/DateCalendar.js +2 -2
  120. package/modern/DatePicker/DatePicker.js +2 -2
  121. package/modern/DateTimePicker/DateTimePicker.js +2 -2
  122. package/modern/DesktopDatePicker/DesktopDatePicker.js +2 -2
  123. package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
  124. package/modern/MobileDatePicker/MobileDatePicker.js +2 -2
  125. package/modern/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  126. package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js +2 -0
  127. package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js +2 -1
  128. package/modern/PickersShortcuts/PickersShortcuts.js +1 -1
  129. package/modern/StaticDatePicker/StaticDatePicker.js +2 -2
  130. package/modern/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  131. package/modern/index.js +1 -1
  132. package/modern/internals/components/PickersTextField/Outline.js +99 -0
  133. package/modern/internals/components/PickersTextField/PickersInput.js +264 -0
  134. package/modern/internals/components/PickersTextField/PickersInput.types.js +1 -0
  135. package/modern/internals/components/PickersTextField/PickersTextField.js +119 -0
  136. package/modern/internals/components/PickersTextField/PickersTextField.types.js +1 -0
  137. package/modern/internals/components/PickersTextField/index.js +1 -0
  138. package/modern/internals/components/PickersTextField/pickersTextFieldClasses.js +9 -0
  139. package/modern/internals/hooks/useField/useField.utils.js +23 -10
  140. package/modern/internals/hooks/usePicker/usePickerValue.js +2 -6
  141. package/node/AdapterDateFns/AdapterDateFns.js +10 -14
  142. package/node/AdapterDateFnsJalali/AdapterDateFnsJalali.js +12 -16
  143. package/node/AdapterDayjs/AdapterDayjs.js +10 -7
  144. package/node/AdapterLuxon/AdapterLuxon.js +28 -16
  145. package/node/AdapterMoment/AdapterMoment.js +14 -14
  146. package/node/AdapterMomentHijri/AdapterMomentHijri.js +1 -24
  147. package/node/AdapterMomentJalaali/AdapterMomentJalaali.js +0 -26
  148. package/node/DateCalendar/DateCalendar.js +2 -2
  149. package/node/DatePicker/DatePicker.js +2 -2
  150. package/node/DateTimePicker/DateTimePicker.js +2 -2
  151. package/node/DesktopDatePicker/DesktopDatePicker.js +2 -2
  152. package/node/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
  153. package/node/MobileDatePicker/MobileDatePicker.js +2 -2
  154. package/node/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  155. package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js +2 -0
  156. package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js +2 -1
  157. package/node/PickersShortcuts/PickersShortcuts.js +1 -1
  158. package/node/StaticDatePicker/StaticDatePicker.js +2 -2
  159. package/node/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  160. package/node/index.js +1 -1
  161. package/node/internals/components/PickersTextField/Outline.js +108 -0
  162. package/node/internals/components/PickersTextField/PickersInput.js +272 -0
  163. package/node/internals/components/PickersTextField/PickersInput.types.js +5 -0
  164. package/node/internals/components/PickersTextField/PickersTextField.js +127 -0
  165. package/node/internals/components/PickersTextField/PickersTextField.types.js +5 -0
  166. package/node/internals/components/PickersTextField/index.js +12 -0
  167. package/node/internals/components/PickersTextField/pickersTextFieldClasses.js +17 -0
  168. package/node/internals/hooks/useField/useField.utils.js +23 -10
  169. package/node/internals/hooks/usePicker/usePickerValue.js +2 -6
  170. package/package.json +2 -2
  171. package/internals/components/FakeTextField/FakeTextField.d.ts +0 -22
  172. package/internals/components/FakeTextField/FakeTextField.js +0 -44
  173. package/internals/components/FakeTextField/index.d.ts +0 -1
  174. package/internals/components/FakeTextField/index.js +0 -1
  175. package/legacy/internals/components/FakeTextField/FakeTextField.js +0 -49
  176. package/legacy/internals/components/FakeTextField/index.js +0 -1
  177. package/modern/internals/components/FakeTextField/FakeTextField.js +0 -44
  178. package/modern/internals/components/FakeTextField/index.js +0 -1
  179. package/node/internals/components/FakeTextField/FakeTextField.js +0 -52
  180. package/node/internals/components/FakeTextField/index.js +0 -12
@@ -0,0 +1,264 @@
1
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
+ import _extends from "@babel/runtime/helpers/esm/extends";
3
+ const _excluded = ["elements", "defaultValue", "label", "onFocus", "onWrapperClick", "onBlur", "valueStr", "onValueStrChange", "id", "InputProps", "inputProps", "autoFocus", "ownerState", "endAdornment", "startAdornment"];
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 { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize, visuallyHidden } from '@mui/utils';
11
+ import { pickersInputClasses, getPickersInputUtilityClass } from './pickersTextFieldClasses';
12
+ import Outline from './Outline';
13
+ import { jsx as _jsx } from "react/jsx-runtime";
14
+ import { jsxs as _jsxs } from "react/jsx-runtime";
15
+ const SectionsWrapper = styled(Box, {
16
+ name: 'MuiPickersInput',
17
+ slot: 'Root',
18
+ overridesResolver: (props, styles) => styles.root
19
+ })(({
20
+ theme,
21
+ ownerState
22
+ }) => {
23
+ const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
24
+ return _extends({
25
+ cursor: 'text',
26
+ padding: '16.5px 14px',
27
+ display: 'flex',
28
+ justifyContent: 'flex-start',
29
+ alignItems: 'center',
30
+ width: ownerState.fullWidth ? '100%' : '25ch',
31
+ position: 'relative',
32
+ borderRadius: (theme.vars || theme).shape.borderRadius,
33
+ [`&:hover .${pickersInputClasses.notchedOutline}`]: {
34
+ borderColor: (theme.vars || theme).palette.text.primary
35
+ },
36
+ // Reset on touch devices, it doesn't add specificity
37
+ '@media (hover: none)': {
38
+ [`&:hover .${pickersInputClasses.notchedOutline}`]: {
39
+ borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
40
+ }
41
+ },
42
+ [`&.${pickersInputClasses.focused} .${pickersInputClasses.notchedOutline}`]: {
43
+ borderStyle: 'solid',
44
+ borderColor: (theme.vars || theme).palette[ownerState.color].main,
45
+ borderWidth: 2
46
+ },
47
+ [`&.${pickersInputClasses.disabled}`]: {
48
+ [`& .${pickersInputClasses.notchedOutline}`]: {
49
+ borderColor: (theme.vars || theme).palette.action.disabled
50
+ },
51
+ '*': {
52
+ color: (theme.vars || theme).palette.action.disabled
53
+ }
54
+ },
55
+ [`&.${pickersInputClasses.error} .${pickersInputClasses.notchedOutline}`]: {
56
+ borderColor: (theme.vars || theme).palette.error.main
57
+ }
58
+ }, ownerState.size === 'small' && {
59
+ padding: '8.5px 14px'
60
+ });
61
+ });
62
+ const SectionsContainer = styled('div', {
63
+ name: 'MuiPickersInput',
64
+ slot: 'Input',
65
+ overridesResolver: (props, styles) => styles.input
66
+ })(({
67
+ theme,
68
+ ownerState
69
+ }) => ({
70
+ fontFamily: theme.typography.fontFamily,
71
+ fontSize: 'inherit',
72
+ lineHeight: '1.4375em',
73
+ // 23px
74
+ flexGrow: 1,
75
+ visibility: ownerState.adornedStart || ownerState.focused ? 'visible' : 'hidden'
76
+ }));
77
+ const SectionContainer = styled('span', {
78
+ name: 'MuiPickersInput',
79
+ slot: 'Section',
80
+ overridesResolver: (props, styles) => styles.section
81
+ })(({
82
+ theme
83
+ }) => ({
84
+ fontFamily: theme.typography.fontFamily,
85
+ fontSize: 'inherit',
86
+ lineHeight: '1.4375em',
87
+ // 23px
88
+ flexGrow: 1
89
+ }));
90
+ const SectionInput = styled('span', {
91
+ name: 'MuiPickersInput',
92
+ slot: 'Content',
93
+ overridesResolver: (props, styles) => styles.content
94
+ })(({
95
+ theme
96
+ }) => ({
97
+ fontFamily: theme.typography.fontFamily,
98
+ lineHeight: '1.4375em',
99
+ // 23px
100
+ letterSpacing: 'inherit',
101
+ width: 'fit-content'
102
+ }));
103
+ const SectionSeparator = styled('span', {
104
+ name: 'MuiPickersInput',
105
+ slot: 'Separator',
106
+ overridesResolver: (props, styles) => styles.separator
107
+ })(() => ({
108
+ whiteSpace: 'pre'
109
+ }));
110
+ const FakeHiddenInput = styled('input', {
111
+ name: 'MuiPickersInput',
112
+ slot: 'HiddenInput',
113
+ overridesResolver: (props, styles) => styles.hiddenInput
114
+ })(_extends({}, visuallyHidden));
115
+ const NotchedOutlineRoot = styled(Outline, {
116
+ name: 'MuiPickersInput',
117
+ slot: 'NotchedOutline',
118
+ overridesResolver: (props, styles) => styles.notchedOutline
119
+ })(({
120
+ theme
121
+ }) => {
122
+ const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
123
+ return {
124
+ borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
125
+ };
126
+ });
127
+ function InputContent({
128
+ elements,
129
+ contentEditable,
130
+ ownerState
131
+ }) {
132
+ if (contentEditable) {
133
+ return elements.map(({
134
+ content,
135
+ before,
136
+ after
137
+ }) => `${before.children}${content.children}${after.children}`).join('');
138
+ }
139
+ return /*#__PURE__*/_jsx(React.Fragment, {
140
+ children: elements.map(({
141
+ container,
142
+ content,
143
+ before,
144
+ after
145
+ }, elementIndex) => /*#__PURE__*/_jsxs(SectionContainer, _extends({}, container, {
146
+ children: [/*#__PURE__*/_jsx(SectionSeparator, _extends({}, before, {
147
+ className: clsx(pickersInputClasses.before, before == null ? void 0 : before.className)
148
+ })), /*#__PURE__*/_jsx(SectionInput, _extends({}, content, {
149
+ className: clsx(pickersInputClasses.content, content == null ? void 0 : content.className),
150
+ ownerState
151
+ })), /*#__PURE__*/_jsx(SectionSeparator, _extends({}, after, {
152
+ className: clsx(pickersInputClasses.after, after == null ? void 0 : after.className)
153
+ }))]
154
+ }), elementIndex))
155
+ });
156
+ }
157
+ const useUtilityClasses = ownerState => {
158
+ const {
159
+ focused,
160
+ disabled,
161
+ error,
162
+ classes,
163
+ fullWidth,
164
+ color,
165
+ size,
166
+ endAdornment,
167
+ startAdornment
168
+ } = ownerState;
169
+ const slots = {
170
+ root: ['root', focused && !disabled && 'focused', disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', `color${capitalize(color)}`, size === 'small' && 'inputSizeSmall', Boolean(startAdornment) && 'adornedStart', Boolean(endAdornment) && 'adornedEnd'],
171
+ notchedOutline: ['notchedOutline'],
172
+ before: ['before'],
173
+ after: ['after'],
174
+ content: ['content'],
175
+ input: ['input']
176
+ };
177
+ return composeClasses(slots, getPickersInputUtilityClass, classes);
178
+ };
179
+
180
+ // TODO: move to utils
181
+ // Separates the state props from the form control
182
+ function formControlState({
183
+ props,
184
+ states,
185
+ muiFormControl
186
+ }) {
187
+ return states.reduce((acc, state) => {
188
+ acc[state] = props[state];
189
+ if (muiFormControl) {
190
+ if (typeof props[state] === 'undefined') {
191
+ acc[state] = muiFormControl[state];
192
+ }
193
+ }
194
+ return acc;
195
+ }, {});
196
+ }
197
+ const PickersInput = /*#__PURE__*/React.forwardRef(function PickersInput(props, ref) {
198
+ const {
199
+ elements,
200
+ label,
201
+ onWrapperClick,
202
+ valueStr,
203
+ onValueStrChange,
204
+ id,
205
+ ownerState: ownerStateProp,
206
+ endAdornment,
207
+ startAdornment
208
+ } = props,
209
+ other = _objectWithoutPropertiesLoose(props, _excluded);
210
+ const inputRef = React.useRef(null);
211
+ const handleInputRef = useForkRef(ref, inputRef);
212
+ const muiFormControl = useFormControl();
213
+ const fcs = formControlState({
214
+ props,
215
+ muiFormControl,
216
+ states: ['color', 'disabled', 'error', 'focused', 'size', 'required', 'fullWidth', 'adornedStart']
217
+ });
218
+ React.useEffect(() => {
219
+ if (muiFormControl) {
220
+ muiFormControl.setAdornedStart(Boolean(startAdornment));
221
+ }
222
+ }, [muiFormControl, startAdornment]);
223
+ const ownerState = _extends({}, props, ownerStateProp, {
224
+ color: fcs.color || 'primary',
225
+ disabled: fcs.disabled,
226
+ error: fcs.error,
227
+ focused: fcs.focused,
228
+ fullWidth: fcs.fullWidth,
229
+ size: fcs.size
230
+ });
231
+ const classes = useUtilityClasses(ownerState);
232
+ return /*#__PURE__*/_jsxs(SectionsWrapper, _extends({
233
+ ref: handleInputRef
234
+ }, other, {
235
+ className: classes.root,
236
+ onClick: onWrapperClick,
237
+ ownerState: ownerState,
238
+ "aria-invalid": fcs.error,
239
+ children: [startAdornment, /*#__PURE__*/_jsxs(SectionsContainer, {
240
+ ownerState: ownerState,
241
+ className: classes.input,
242
+ children: [/*#__PURE__*/_jsx(InputContent, {
243
+ elements: elements,
244
+ contentEditable: other.contentEditable,
245
+ ownerState: ownerState
246
+ }), /*#__PURE__*/_jsx(FakeHiddenInput, {
247
+ value: valueStr,
248
+ onChange: onValueStrChange,
249
+ id: id,
250
+ "aria-hidden": "true",
251
+ tabIndex: -1
252
+ })]
253
+ }), endAdornment, /*#__PURE__*/_jsx(NotchedOutlineRoot, {
254
+ shrink: fcs.adornedStart || fcs.focused,
255
+ notched: fcs.adornedStart || fcs.focused,
256
+ className: classes.notchedOutline,
257
+ label: label != null && label !== '' && fcs.required ? /*#__PURE__*/_jsxs(React.Fragment, {
258
+ children: [label, "\u2009", '*']
259
+ }) : label,
260
+ ownerState: ownerState
261
+ })]
262
+ }));
263
+ });
264
+ export default PickersInput;
@@ -0,0 +1,30 @@
1
+ /// <reference types="react" />
2
+ import { OutlinedInputProps } from '@mui/material/OutlinedInput';
3
+ import { FieldsTextFieldProps } from '../../models';
4
+ export interface PickersInputElement {
5
+ container: React.HTMLAttributes<HTMLSpanElement>;
6
+ content: React.HTMLAttributes<HTMLSpanElement>;
7
+ before: React.HTMLAttributes<HTMLSpanElement>;
8
+ after: React.HTMLAttributes<HTMLSpanElement>;
9
+ }
10
+ export interface PickersInputProps extends FieldsTextFieldProps {
11
+ elements: PickersInputElement[];
12
+ areAllSectionsEmpty?: boolean;
13
+ valueStr: string;
14
+ onValueStrChange: React.ChangeEventHandler<HTMLInputElement>;
15
+ id?: string;
16
+ InputProps?: Partial<OutlinedInputProps>;
17
+ inputProps: any;
18
+ autoFocus?: boolean;
19
+ ownerState?: any;
20
+ onWrapperClick: () => void;
21
+ defaultValue: string;
22
+ label?: string;
23
+ endAdornment?: React.ReactNode;
24
+ startAdornment?: React.ReactNode;
25
+ onBlur?: React.FocusEventHandler;
26
+ onChange?: React.FormEventHandler;
27
+ onFocus?: React.FocusEventHandler;
28
+ onKeyDown?: React.KeyboardEventHandler;
29
+ onKeyUp?: React.KeyboardEventHandler;
30
+ }
@@ -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,120 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
+ const _excluded = ["elements", "className", "color", "disabled", "error", "label", "variant", "fullWidth", "valueStr", "helperText", "valueType", "id", "FormHelperTextProps", "InputLabelProps", "inputProps", "InputProps", "required", "focused", "ownerState"];
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
+ elements,
36
+ className,
37
+ color = 'primary',
38
+ disabled = false,
39
+ error = false,
40
+ label,
41
+ variant = 'outlined',
42
+ fullWidth = false,
43
+ valueStr,
44
+ helperText,
45
+ valueType,
46
+ id: idOverride,
47
+ FormHelperTextProps,
48
+ InputLabelProps,
49
+ inputProps,
50
+ InputProps,
51
+ required = false,
52
+ focused: focusedProp
53
+ } = props,
54
+ other = _objectWithoutPropertiesLoose(props, _excluded);
55
+ const [focused, setFocused] = React.useState(focusedProp);
56
+ const rootRef = React.useRef(null);
57
+ const handleRootRef = useForkRef(ref, rootRef);
58
+ const inputRef = React.useRef(null);
59
+ const handleInputRef = useForkRef(inputRef, InputProps == null ? void 0 : InputProps.ref);
60
+ const id = useId(idOverride);
61
+ const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
62
+ const inputLabelId = label && id ? `${id}-label` : undefined;
63
+ const ownerState = _extends({}, props, {
64
+ color,
65
+ disabled,
66
+ error,
67
+ focused,
68
+ variant
69
+ });
70
+ const classes = useUtilityClasses(ownerState);
71
+
72
+ // TODO: delete after behavior implementation
73
+ const onWrapperClick = () => {
74
+ if (!focused) {
75
+ var _inputRef$current;
76
+ setFocused(true);
77
+ const container = rootRef.current;
78
+
79
+ // Find the first input element within the container
80
+ const firstInput = container == null ? void 0 : container.querySelector('.content');
81
+
82
+ // Check if the input element exists before focusing it
83
+ if (firstInput) {
84
+ firstInput.focus();
85
+ }
86
+ (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
87
+ }
88
+ };
89
+ return /*#__PURE__*/_jsxs(PickersTextFieldRoot, {
90
+ className: clsx(classes.root, className),
91
+ ref: handleRootRef,
92
+ focused: focused,
93
+ disabled: disabled,
94
+ variant: variant,
95
+ error: error,
96
+ color: color,
97
+ fullWidth: fullWidth,
98
+ required: required,
99
+ ownerState: ownerState,
100
+ children: [/*#__PURE__*/_jsx(InputLabel, _extends({
101
+ htmlFor: id,
102
+ id: inputLabelId
103
+ }, InputLabelProps, {
104
+ children: label
105
+ })), /*#__PURE__*/_jsx(PickersInput, _extends({
106
+ elements,
107
+ valueStr,
108
+ valueType,
109
+ onWrapperClick,
110
+ inputProps,
111
+ label
112
+ }, other, InputProps, {
113
+ ref: handleInputRef
114
+ })), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
115
+ id: helperTextId
116
+ }, FormHelperTextProps, {
117
+ children: helperText
118
+ }))]
119
+ });
120
+ });
@@ -0,0 +1,18 @@
1
+ /// <reference types="react" />
2
+ import { TextFieldClasses } from '@mui/material/TextField';
3
+ import { PickersInputProps } from './PickersInput.types';
4
+ export interface PickersTextFieldProps extends PickersInputProps {
5
+ classes?: Partial<TextFieldClasses>;
6
+ className?: string;
7
+ color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
8
+ disabled?: boolean;
9
+ error?: boolean;
10
+ fullWidth?: boolean;
11
+ helperText?: React.ReactNode;
12
+ size?: 'small' | 'medium';
13
+ variant?: 'filled' | 'outlined' | 'standard';
14
+ valueStr: string;
15
+ InputProps: any;
16
+ valueType: 'value' | 'placeholder';
17
+ required?: boolean;
18
+ }
@@ -0,0 +1 @@
1
+ export { PickersTextField } from './PickersTextField';
@@ -0,0 +1 @@
1
+ export { PickersTextField } from './PickersTextField';
@@ -0,0 +1,42 @@
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 `error=true`. */
24
+ error: string;
25
+ /** Styles applied to the NotchedOutline element. */
26
+ notchedOutline: string;
27
+ /** Styles applied to the fake input element. */
28
+ input: string;
29
+ /** Styles applied to the section of the picker. */
30
+ content: string;
31
+ /** Styles applied to the startSeparator */
32
+ before: string;
33
+ /** Styles applied to the endSeparator */
34
+ after: string;
35
+ /** Styles applied to the root if there is a startAdornment present */
36
+ adornedStart: string;
37
+ /** Styles applied to the root if there is an endAdornment present */
38
+ adornedEnd: string;
39
+ }
40
+ export type PickersInputClassKey = keyof PickersInputClasses;
41
+ export declare function getPickersInputUtilityClass(slot: string): string;
42
+ 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', 'content', 'before', 'after', 'adornedStart', 'adornedEnd', 'input']);
@@ -207,49 +207,62 @@ export const addPositionPropertiesToSections = (sections, isRTL) => {
207
207
  }
208
208
  return newSections;
209
209
  };
210
- const getSectionPlaceholder = (utils, timezone, localeText, sectionConfig, currentTokenValue) => {
210
+ const getSectionPlaceholder = (utils, timezone, localeText, sectionConfig, sectionFormat) => {
211
211
  switch (sectionConfig.type) {
212
212
  case 'year':
213
213
  {
214
214
  return localeText.fieldYearPlaceholder({
215
- digitAmount: utils.formatByString(utils.date(undefined, timezone), currentTokenValue).length
215
+ digitAmount: utils.formatByString(utils.date(undefined, timezone), sectionFormat).length,
216
+ format: sectionFormat
216
217
  });
217
218
  }
218
219
  case 'month':
219
220
  {
220
221
  return localeText.fieldMonthPlaceholder({
221
- contentType: sectionConfig.contentType
222
+ contentType: sectionConfig.contentType,
223
+ format: sectionFormat
222
224
  });
223
225
  }
224
226
  case 'day':
225
227
  {
226
- return localeText.fieldDayPlaceholder();
228
+ return localeText.fieldDayPlaceholder({
229
+ format: sectionFormat
230
+ });
227
231
  }
228
232
  case 'weekDay':
229
233
  {
230
234
  return localeText.fieldWeekDayPlaceholder({
231
- contentType: sectionConfig.contentType
235
+ contentType: sectionConfig.contentType,
236
+ format: sectionFormat
232
237
  });
233
238
  }
234
239
  case 'hours':
235
240
  {
236
- return localeText.fieldHoursPlaceholder();
241
+ return localeText.fieldHoursPlaceholder({
242
+ format: sectionFormat
243
+ });
237
244
  }
238
245
  case 'minutes':
239
246
  {
240
- return localeText.fieldMinutesPlaceholder();
247
+ return localeText.fieldMinutesPlaceholder({
248
+ format: sectionFormat
249
+ });
241
250
  }
242
251
  case 'seconds':
243
252
  {
244
- return localeText.fieldSecondsPlaceholder();
253
+ return localeText.fieldSecondsPlaceholder({
254
+ format: sectionFormat
255
+ });
245
256
  }
246
257
  case 'meridiem':
247
258
  {
248
- return localeText.fieldMeridiemPlaceholder();
259
+ return localeText.fieldMeridiemPlaceholder({
260
+ format: sectionFormat
261
+ });
249
262
  }
250
263
  default:
251
264
  {
252
- return currentTokenValue;
265
+ return sectionFormat;
253
266
  }
254
267
  }
255
268
  };
@@ -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> {
@@ -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
  };