@mui/x-date-pickers 7.4.0 → 7.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AdapterDateFns/AdapterDateFns.d.ts +5 -0
- package/AdapterDateFnsBase/AdapterDateFnsBase.d.ts +1 -5
- package/AdapterDateFnsBase/AdapterDateFnsBase.js +4 -2
- package/AdapterDateFnsJalali/AdapterDateFnsJalali.d.ts +3 -20
- package/AdapterDateFnsJalali/AdapterDateFnsJalali.js +14 -227
- package/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.d.ts +3 -20
- package/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.js +17 -230
- package/AdapterDateFnsV3/AdapterDateFnsV3.d.ts +5 -0
- package/AdapterDateFnsV3/AdapterDateFnsV3.js +0 -1
- package/AdapterMomentJalaali/AdapterMomentJalaali.js +2 -6
- package/CHANGELOG.md +93 -0
- package/DateCalendar/DateCalendar.js +5 -4
- package/PickersLayout/usePickerLayout.js +6 -7
- package/index.js +1 -1
- package/internals/components/PickersModalDialog.d.ts +2 -2
- package/internals/demo/DemoContainer.js +1 -1
- package/internals/hooks/useField/useFieldV6TextField.js +1 -1
- package/internals/hooks/usePicker/usePickerViews.js +1 -0
- package/modern/AdapterDateFnsBase/AdapterDateFnsBase.js +4 -2
- package/modern/AdapterDateFnsJalali/AdapterDateFnsJalali.js +14 -227
- package/modern/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.js +17 -230
- package/modern/AdapterDateFnsV3/AdapterDateFnsV3.js +0 -1
- package/modern/AdapterMomentJalaali/AdapterMomentJalaali.js +2 -6
- package/modern/DateCalendar/DateCalendar.js +5 -4
- package/modern/PickersLayout/usePickerLayout.js +6 -7
- package/modern/index.js +1 -1
- package/modern/internals/demo/DemoContainer.js +1 -1
- package/modern/internals/hooks/useField/useFieldV6TextField.js +1 -1
- package/modern/internals/hooks/usePicker/usePickerViews.js +1 -0
- package/node/AdapterDateFnsBase/AdapterDateFnsBase.js +4 -2
- package/node/AdapterDateFnsJalali/AdapterDateFnsJalali.js +14 -227
- package/node/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.js +17 -230
- package/node/AdapterMomentJalaali/AdapterMomentJalaali.js +2 -6
- package/node/DateCalendar/DateCalendar.js +5 -4
- package/node/PickersLayout/usePickerLayout.js +6 -7
- package/node/index.js +1 -1
- package/node/internals/demo/DemoContainer.js +1 -1
- package/node/internals/hooks/useField/useFieldV6TextField.js +1 -1
- package/node/internals/hooks/usePicker/usePickerViews.js +1 -0
- package/package.json +2 -2
|
@@ -48,171 +48,7 @@ import { faIR as defaultLocale } from 'date-fns-jalali/locale/fa-IR';
|
|
|
48
48
|
// date-fns-jalali v2 does not export types
|
|
49
49
|
// @ts-ignore TODO remove when date-fns-jalali-v3 is the default
|
|
50
50
|
|
|
51
|
-
|
|
52
|
-
// Year
|
|
53
|
-
y: {
|
|
54
|
-
sectionType: 'year',
|
|
55
|
-
contentType: 'digit',
|
|
56
|
-
maxLength: 4
|
|
57
|
-
},
|
|
58
|
-
yy: 'year',
|
|
59
|
-
yyy: {
|
|
60
|
-
sectionType: 'year',
|
|
61
|
-
contentType: 'digit',
|
|
62
|
-
maxLength: 4
|
|
63
|
-
},
|
|
64
|
-
yyyy: 'year',
|
|
65
|
-
// Month
|
|
66
|
-
M: {
|
|
67
|
-
sectionType: 'month',
|
|
68
|
-
contentType: 'digit',
|
|
69
|
-
maxLength: 2
|
|
70
|
-
},
|
|
71
|
-
MM: 'month',
|
|
72
|
-
MMMM: {
|
|
73
|
-
sectionType: 'month',
|
|
74
|
-
contentType: 'letter'
|
|
75
|
-
},
|
|
76
|
-
MMM: {
|
|
77
|
-
sectionType: 'month',
|
|
78
|
-
contentType: 'letter'
|
|
79
|
-
},
|
|
80
|
-
L: {
|
|
81
|
-
sectionType: 'month',
|
|
82
|
-
contentType: 'digit',
|
|
83
|
-
maxLength: 2
|
|
84
|
-
},
|
|
85
|
-
LL: 'month',
|
|
86
|
-
LLL: {
|
|
87
|
-
sectionType: 'month',
|
|
88
|
-
contentType: 'letter'
|
|
89
|
-
},
|
|
90
|
-
LLLL: {
|
|
91
|
-
sectionType: 'month',
|
|
92
|
-
contentType: 'letter'
|
|
93
|
-
},
|
|
94
|
-
// Day of the month
|
|
95
|
-
d: {
|
|
96
|
-
sectionType: 'day',
|
|
97
|
-
contentType: 'digit',
|
|
98
|
-
maxLength: 2
|
|
99
|
-
},
|
|
100
|
-
dd: 'day',
|
|
101
|
-
do: {
|
|
102
|
-
sectionType: 'day',
|
|
103
|
-
contentType: 'digit-with-letter'
|
|
104
|
-
},
|
|
105
|
-
// Day of the week
|
|
106
|
-
E: {
|
|
107
|
-
sectionType: 'weekDay',
|
|
108
|
-
contentType: 'letter'
|
|
109
|
-
},
|
|
110
|
-
EE: {
|
|
111
|
-
sectionType: 'weekDay',
|
|
112
|
-
contentType: 'letter'
|
|
113
|
-
},
|
|
114
|
-
EEE: {
|
|
115
|
-
sectionType: 'weekDay',
|
|
116
|
-
contentType: 'letter'
|
|
117
|
-
},
|
|
118
|
-
EEEE: {
|
|
119
|
-
sectionType: 'weekDay',
|
|
120
|
-
contentType: 'letter'
|
|
121
|
-
},
|
|
122
|
-
EEEEE: {
|
|
123
|
-
sectionType: 'weekDay',
|
|
124
|
-
contentType: 'letter'
|
|
125
|
-
},
|
|
126
|
-
i: {
|
|
127
|
-
sectionType: 'weekDay',
|
|
128
|
-
contentType: 'digit',
|
|
129
|
-
maxLength: 1
|
|
130
|
-
},
|
|
131
|
-
ii: 'weekDay',
|
|
132
|
-
iii: {
|
|
133
|
-
sectionType: 'weekDay',
|
|
134
|
-
contentType: 'letter'
|
|
135
|
-
},
|
|
136
|
-
iiii: {
|
|
137
|
-
sectionType: 'weekDay',
|
|
138
|
-
contentType: 'letter'
|
|
139
|
-
},
|
|
140
|
-
e: {
|
|
141
|
-
sectionType: 'weekDay',
|
|
142
|
-
contentType: 'digit',
|
|
143
|
-
maxLength: 1
|
|
144
|
-
},
|
|
145
|
-
ee: 'weekDay',
|
|
146
|
-
eee: {
|
|
147
|
-
sectionType: 'weekDay',
|
|
148
|
-
contentType: 'letter'
|
|
149
|
-
},
|
|
150
|
-
eeee: {
|
|
151
|
-
sectionType: 'weekDay',
|
|
152
|
-
contentType: 'letter'
|
|
153
|
-
},
|
|
154
|
-
eeeee: {
|
|
155
|
-
sectionType: 'weekDay',
|
|
156
|
-
contentType: 'letter'
|
|
157
|
-
},
|
|
158
|
-
eeeeee: {
|
|
159
|
-
sectionType: 'weekDay',
|
|
160
|
-
contentType: 'letter'
|
|
161
|
-
},
|
|
162
|
-
c: {
|
|
163
|
-
sectionType: 'weekDay',
|
|
164
|
-
contentType: 'digit',
|
|
165
|
-
maxLength: 1
|
|
166
|
-
},
|
|
167
|
-
cc: 'weekDay',
|
|
168
|
-
ccc: {
|
|
169
|
-
sectionType: 'weekDay',
|
|
170
|
-
contentType: 'letter'
|
|
171
|
-
},
|
|
172
|
-
cccc: {
|
|
173
|
-
sectionType: 'weekDay',
|
|
174
|
-
contentType: 'letter'
|
|
175
|
-
},
|
|
176
|
-
ccccc: {
|
|
177
|
-
sectionType: 'weekDay',
|
|
178
|
-
contentType: 'letter'
|
|
179
|
-
},
|
|
180
|
-
cccccc: {
|
|
181
|
-
sectionType: 'weekDay',
|
|
182
|
-
contentType: 'letter'
|
|
183
|
-
},
|
|
184
|
-
// Meridiem
|
|
185
|
-
a: 'meridiem',
|
|
186
|
-
aa: 'meridiem',
|
|
187
|
-
aaa: 'meridiem',
|
|
188
|
-
// Hours
|
|
189
|
-
H: {
|
|
190
|
-
sectionType: 'hours',
|
|
191
|
-
contentType: 'digit',
|
|
192
|
-
maxLength: 2
|
|
193
|
-
},
|
|
194
|
-
HH: 'hours',
|
|
195
|
-
h: {
|
|
196
|
-
sectionType: 'hours',
|
|
197
|
-
contentType: 'digit',
|
|
198
|
-
maxLength: 2
|
|
199
|
-
},
|
|
200
|
-
hh: 'hours',
|
|
201
|
-
// Minutes
|
|
202
|
-
m: {
|
|
203
|
-
sectionType: 'minutes',
|
|
204
|
-
contentType: 'digit',
|
|
205
|
-
maxLength: 2
|
|
206
|
-
},
|
|
207
|
-
mm: 'minutes',
|
|
208
|
-
// Seconds
|
|
209
|
-
s: {
|
|
210
|
-
sectionType: 'seconds',
|
|
211
|
-
contentType: 'digit',
|
|
212
|
-
maxLength: 2
|
|
213
|
-
},
|
|
214
|
-
ss: 'seconds'
|
|
215
|
-
};
|
|
51
|
+
import { AdapterDateFnsBase } from '../AdapterDateFnsBase';
|
|
216
52
|
const defaultFormats = {
|
|
217
53
|
year: 'yyyy',
|
|
218
54
|
month: 'LLLL',
|
|
@@ -275,40 +111,25 @@ const NUMBER_SYMBOL_MAP = {
|
|
|
275
111
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
276
112
|
* SOFTWARE.
|
|
277
113
|
*/
|
|
278
|
-
export class AdapterDateFnsJalali {
|
|
114
|
+
export class AdapterDateFnsJalali extends AdapterDateFnsBase {
|
|
279
115
|
constructor({
|
|
280
|
-
locale
|
|
116
|
+
locale,
|
|
281
117
|
formats
|
|
282
118
|
} = {}) {
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
if (value === null) {
|
|
298
|
-
return null;
|
|
299
|
-
}
|
|
300
|
-
return new Date(value);
|
|
301
|
-
};
|
|
302
|
-
this.getInvalidDate = () => new Date('Invalid Date');
|
|
303
|
-
this.getTimezone = () => {
|
|
304
|
-
return 'default';
|
|
305
|
-
};
|
|
306
|
-
this.setTimezone = value => {
|
|
307
|
-
return value;
|
|
308
|
-
};
|
|
309
|
-
this.toJsDate = value => {
|
|
310
|
-
return value;
|
|
311
|
-
};
|
|
119
|
+
if (typeof addDays !== 'function') {
|
|
120
|
+
throw new Error([`MUI: The \`date-fns-jalali\` package v2.x is not compatible with this adapter.`, 'Please, install v3.x of the package or use the `AdapterDateFnsJalali` instead.'].join('\n'));
|
|
121
|
+
}
|
|
122
|
+
if (!longFormatters) {
|
|
123
|
+
throw new Error('MUI: The minimum supported `date-fns-jalali` package version compatible with this adapter is `3.2.x`.');
|
|
124
|
+
}
|
|
125
|
+
super({
|
|
126
|
+
locale: locale ?? defaultLocale,
|
|
127
|
+
// some formats are different in jalali adapter,
|
|
128
|
+
// this ensures that `AdapterDateFnsBase` formats are overridden
|
|
129
|
+
formats: _extends({}, defaultFormats, formats),
|
|
130
|
+
longFormatters,
|
|
131
|
+
lib: 'date-fns-jalali'
|
|
132
|
+
});
|
|
312
133
|
this.parse = (value, format) => {
|
|
313
134
|
if (value === '') {
|
|
314
135
|
return null;
|
|
@@ -320,29 +141,6 @@ export class AdapterDateFnsJalali {
|
|
|
320
141
|
this.getCurrentLocaleCode = () => {
|
|
321
142
|
return this.locale?.code || 'fa-IR';
|
|
322
143
|
};
|
|
323
|
-
// Note: date-fns input types are more lenient than this adapter, so we need to expose our more
|
|
324
|
-
// strict signature and delegate to the more lenient signature. Otherwise, we have downstream type errors upon usage.
|
|
325
|
-
this.is12HourCycleInCurrentLocale = () => {
|
|
326
|
-
if (this.locale) {
|
|
327
|
-
return /a/.test(this.locale.formatLong.time());
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
// By default, date-fns-jalali is using fa-IR locale with am/pm enabled
|
|
331
|
-
return true;
|
|
332
|
-
};
|
|
333
|
-
this.expandFormat = format => {
|
|
334
|
-
// @see https://github.com/date-fns/date-fns/blob/master/src/format/index.js#L31
|
|
335
|
-
const longFormatRegexp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g;
|
|
336
|
-
const locale = this.locale ?? defaultLocale;
|
|
337
|
-
return format.match(longFormatRegexp).map(token => {
|
|
338
|
-
const firstCharacter = token[0];
|
|
339
|
-
if (firstCharacter === 'p' || firstCharacter === 'P') {
|
|
340
|
-
const longFormatter = longFormatters[firstCharacter];
|
|
341
|
-
return longFormatter(token, locale.formatLong, {});
|
|
342
|
-
}
|
|
343
|
-
return token;
|
|
344
|
-
}).join('');
|
|
345
|
-
};
|
|
346
144
|
this.isValid = value => {
|
|
347
145
|
if (value == null) {
|
|
348
146
|
return false;
|
|
@@ -530,16 +328,5 @@ export class AdapterDateFnsJalali {
|
|
|
530
328
|
}
|
|
531
329
|
return years;
|
|
532
330
|
};
|
|
533
|
-
if (typeof addDays !== 'function') {
|
|
534
|
-
throw new Error([`MUI: The \`date-fns-jalali\` package v2.x is not compatible with this adapter.`, 'Please, install v3.x of the package or use the `AdapterDateFnsJalali` instead.'].join('\n'));
|
|
535
|
-
}
|
|
536
|
-
if (!longFormatters) {
|
|
537
|
-
throw new Error('MUI: The minimum supported `date-fns-jalali` package version compatible with this adapter is `3.2.x`.');
|
|
538
|
-
}
|
|
539
|
-
this.locale = _locale;
|
|
540
|
-
this.formats = _extends({}, defaultFormats, formats);
|
|
541
|
-
}
|
|
542
|
-
getDayOfWeek(value) {
|
|
543
|
-
return value.getDay() + 1;
|
|
544
331
|
}
|
|
545
332
|
}
|
|
@@ -163,14 +163,10 @@ export class AdapterMomentJalaali extends AdapterMoment {
|
|
|
163
163
|
return numberToFormat.replace(/\d/g, match => NUMBER_SYMBOL_MAP[match]).replace(/,/g, '،');
|
|
164
164
|
};
|
|
165
165
|
this.isSameYear = (value, comparing) => {
|
|
166
|
-
|
|
167
|
-
// @ts-ignore
|
|
168
|
-
return value.clone().isSame(comparing, 'jYear');
|
|
166
|
+
return value.jYear() === comparing.jYear();
|
|
169
167
|
};
|
|
170
168
|
this.isSameMonth = (value, comparing) => {
|
|
171
|
-
|
|
172
|
-
// @ts-ignore
|
|
173
|
-
return value.clone().isSame(comparing, 'jMonth');
|
|
169
|
+
return value.jYear() === comparing.jYear() && value.jMonth() === comparing.jMonth();
|
|
174
170
|
};
|
|
175
171
|
this.isAfterYear = (value, comparing) => {
|
|
176
172
|
return value.jYear() > comparing.jYear();
|
|
@@ -198,9 +198,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
|
|
|
198
198
|
disableFuture,
|
|
199
199
|
reduceAnimations,
|
|
200
200
|
timezone,
|
|
201
|
-
labelId: gridLabelId
|
|
202
|
-
slots,
|
|
203
|
-
slotProps
|
|
201
|
+
labelId: gridLabelId
|
|
204
202
|
},
|
|
205
203
|
ownerState: props
|
|
206
204
|
});
|
|
@@ -294,7 +292,10 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
|
|
|
294
292
|
className: clsx(classes.root, className),
|
|
295
293
|
ownerState: ownerState
|
|
296
294
|
}, other, {
|
|
297
|
-
children: [/*#__PURE__*/_jsx(CalendarHeader, _extends({}, calendarHeaderProps
|
|
295
|
+
children: [/*#__PURE__*/_jsx(CalendarHeader, _extends({}, calendarHeaderProps, {
|
|
296
|
+
slots: slots,
|
|
297
|
+
slotProps: slotProps
|
|
298
|
+
})), /*#__PURE__*/_jsx(DateCalendarViewTransitionContainer, {
|
|
298
299
|
reduceAnimations: reduceAnimations,
|
|
299
300
|
className: classes.viewTransitionContainer,
|
|
300
301
|
transKey: view,
|
|
@@ -63,9 +63,9 @@ const usePickerLayout = props => {
|
|
|
63
63
|
onClear,
|
|
64
64
|
onCancel,
|
|
65
65
|
onSetToday,
|
|
66
|
-
actions: wrapperVariant === 'desktop' ? [] : ['cancel', 'accept']
|
|
67
|
-
className: classes.actionBar
|
|
66
|
+
actions: wrapperVariant === 'desktop' ? [] : ['cancel', 'accept']
|
|
68
67
|
},
|
|
68
|
+
className: classes.actionBar,
|
|
69
69
|
ownerState: _extends({}, props, {
|
|
70
70
|
wrapperVariant
|
|
71
71
|
})
|
|
@@ -86,9 +86,9 @@ const usePickerLayout = props => {
|
|
|
86
86
|
onViewChange,
|
|
87
87
|
views,
|
|
88
88
|
disabled,
|
|
89
|
-
readOnly
|
|
90
|
-
className: classes.toolbar
|
|
89
|
+
readOnly
|
|
91
90
|
},
|
|
91
|
+
className: classes.toolbar,
|
|
92
92
|
ownerState: _extends({}, props, {
|
|
93
93
|
wrapperVariant
|
|
94
94
|
})
|
|
@@ -117,14 +117,13 @@ const usePickerLayout = props => {
|
|
|
117
117
|
additionalProps: {
|
|
118
118
|
isValid,
|
|
119
119
|
isLandscape,
|
|
120
|
-
onChange: onSelectShortcut
|
|
121
|
-
className: classes.shortcuts
|
|
120
|
+
onChange: onSelectShortcut
|
|
122
121
|
},
|
|
122
|
+
className: classes.shortcuts,
|
|
123
123
|
ownerState: {
|
|
124
124
|
isValid,
|
|
125
125
|
isLandscape,
|
|
126
126
|
onChange: onSelectShortcut,
|
|
127
|
-
className: classes.shortcuts,
|
|
128
127
|
wrapperVariant
|
|
129
128
|
}
|
|
130
129
|
});
|
package/modern/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import * as React from 'react';
|
|
|
3
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
|
-
import { pickersTextFieldClasses } from '
|
|
6
|
+
import { pickersTextFieldClasses } from '../../PickersTextField';
|
|
7
7
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
8
|
const getChildTypeFromChildName = childName => {
|
|
9
9
|
if (childName.match(/^([A-Za-z]+)Range(Calendar|Clock)$/)) {
|
|
@@ -278,7 +278,7 @@ export const useFieldV6TextField = params => {
|
|
|
278
278
|
});
|
|
279
279
|
});
|
|
280
280
|
const placeholder = React.useMemo(() => {
|
|
281
|
-
if (inPlaceholder) {
|
|
281
|
+
if (inPlaceholder !== undefined) {
|
|
282
282
|
return inPlaceholder;
|
|
283
283
|
}
|
|
284
284
|
return fieldValueManager.getV6InputValueFromSections(getSectionsFromValue(valueManager.emptyValue), localizedDigits, isRTL);
|
|
@@ -100,6 +100,7 @@ export const usePickerViews = ({
|
|
|
100
100
|
if (currentViewMode === 'field' && open) {
|
|
101
101
|
onClose();
|
|
102
102
|
setTimeout(() => {
|
|
103
|
+
fieldRef?.current?.setSelectedSections(view);
|
|
103
104
|
// focusing the input before the range selection is done
|
|
104
105
|
// calling it outside of timeout results in an inconsistent behavior between Safari And Chrome
|
|
105
106
|
fieldRef?.current?.focusField(view);
|
|
@@ -227,7 +227,7 @@ class AdapterDateFnsBase {
|
|
|
227
227
|
constructor(props) {
|
|
228
228
|
this.isMUIAdapter = true;
|
|
229
229
|
this.isTimezoneCompatible = false;
|
|
230
|
-
this.lib =
|
|
230
|
+
this.lib = void 0;
|
|
231
231
|
this.locale = void 0;
|
|
232
232
|
this.formats = void 0;
|
|
233
233
|
this.formatTokenMap = formatTokenMap;
|
|
@@ -292,11 +292,13 @@ class AdapterDateFnsBase {
|
|
|
292
292
|
const {
|
|
293
293
|
locale,
|
|
294
294
|
formats,
|
|
295
|
-
longFormatters
|
|
295
|
+
longFormatters,
|
|
296
|
+
lib
|
|
296
297
|
} = props;
|
|
297
298
|
this.locale = locale;
|
|
298
299
|
this.formats = (0, _extends2.default)({}, defaultFormats, formats);
|
|
299
300
|
this.longFormatters = longFormatters;
|
|
301
|
+
this.lib = lib || 'date-fns';
|
|
300
302
|
}
|
|
301
303
|
}
|
|
302
304
|
exports.AdapterDateFnsBase = AdapterDateFnsBase;
|