@mui/x-date-pickers 7.6.2 → 7.7.1
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/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.d.ts +48 -48
- package/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.js +1 -0
- package/AdapterDateFnsV3/AdapterDateFnsV3.d.ts +47 -47
- package/AdapterDateFnsV3/AdapterDateFnsV3.js +1 -0
- package/CHANGELOG.md +163 -0
- package/DateCalendar/DateCalendar.js +3 -3
- package/DateCalendar/DateCalendar.types.d.ts +4 -4
- package/DateCalendar/DayCalendar.d.ts +3 -4
- package/DatePicker/DatePicker.js +2 -0
- package/DateTimePicker/DateTimePicker.js +2 -0
- package/DesktopDatePicker/DesktopDatePicker.js +2 -0
- package/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -0
- package/DesktopTimePicker/DesktopTimePicker.js +2 -0
- package/MobileDatePicker/MobileDatePicker.js +2 -0
- package/MobileDateTimePicker/MobileDateTimePicker.js +2 -0
- package/MobileTimePicker/MobileTimePicker.js +2 -0
- package/MonthCalendar/MonthCalendar.js +17 -3
- package/MonthCalendar/MonthCalendar.types.d.ts +25 -0
- package/MonthCalendar/PickersMonth.d.ts +4 -0
- package/MonthCalendar/PickersMonth.js +38 -21
- package/MonthCalendar/index.d.ts +1 -1
- package/MultiSectionDigitalClock/MultiSectionDigitalClock.js +16 -3
- package/PickersCalendarHeader/PickersCalendarHeader.js +4 -0
- package/PickersCalendarHeader/PickersCalendarHeader.types.d.ts +5 -1
- package/PickersLayout/usePickerLayout.js +0 -5
- package/StaticDatePicker/StaticDatePicker.js +2 -0
- package/StaticDateTimePicker/StaticDateTimePicker.js +2 -0
- package/StaticTimePicker/StaticTimePicker.js +2 -0
- package/TimePicker/TimePicker.js +2 -0
- package/YearCalendar/PickersYear.d.ts +3 -0
- package/YearCalendar/PickersYear.js +34 -22
- package/YearCalendar/YearCalendar.js +17 -3
- package/YearCalendar/YearCalendar.types.d.ts +25 -0
- package/YearCalendar/index.d.ts +1 -1
- package/index.js +1 -1
- package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +4 -2
- package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.d.ts +1 -0
- package/internals/hooks/useField/useField.utils.js +2 -1
- package/internals/hooks/usePicker/usePickerValue.js +45 -38
- package/internals/hooks/usePicker/usePickerValue.types.d.ts +3 -1
- package/internals/hooks/usePicker/usePickerViews.js +2 -1
- package/locales/daDK.js +15 -19
- package/locales/faIR.js +19 -22
- package/locales/koKR.js +2 -2
- package/modern/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.js +1 -0
- package/modern/AdapterDateFnsV3/AdapterDateFnsV3.js +1 -0
- package/modern/DateCalendar/DateCalendar.js +3 -3
- package/modern/DatePicker/DatePicker.js +2 -0
- package/modern/DateTimePicker/DateTimePicker.js +2 -0
- package/modern/DesktopDatePicker/DesktopDatePicker.js +2 -0
- package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -0
- package/modern/DesktopTimePicker/DesktopTimePicker.js +2 -0
- package/modern/MobileDatePicker/MobileDatePicker.js +2 -0
- package/modern/MobileDateTimePicker/MobileDateTimePicker.js +2 -0
- package/modern/MobileTimePicker/MobileTimePicker.js +2 -0
- package/modern/MonthCalendar/MonthCalendar.js +17 -3
- package/modern/MonthCalendar/PickersMonth.js +38 -21
- package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js +16 -3
- package/modern/PickersCalendarHeader/PickersCalendarHeader.js +4 -0
- package/modern/PickersLayout/usePickerLayout.js +0 -5
- package/modern/StaticDatePicker/StaticDatePicker.js +2 -0
- package/modern/StaticDateTimePicker/StaticDateTimePicker.js +2 -0
- package/modern/StaticTimePicker/StaticTimePicker.js +2 -0
- package/modern/TimePicker/TimePicker.js +2 -0
- package/modern/YearCalendar/PickersYear.js +34 -22
- package/modern/YearCalendar/YearCalendar.js +17 -3
- package/modern/index.js +1 -1
- package/modern/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +4 -2
- package/modern/internals/hooks/useField/useField.utils.js +2 -1
- package/modern/internals/hooks/usePicker/usePickerValue.js +45 -38
- package/modern/internals/hooks/usePicker/usePickerViews.js +2 -1
- package/modern/locales/daDK.js +15 -19
- package/modern/locales/faIR.js +19 -22
- package/modern/locales/koKR.js +2 -2
- package/node/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.js +1 -0
- package/node/AdapterDateFnsV3/AdapterDateFnsV3.js +1 -0
- package/node/DateCalendar/DateCalendar.js +3 -3
- package/node/DatePicker/DatePicker.js +2 -0
- package/node/DateTimePicker/DateTimePicker.js +2 -0
- package/node/DesktopDatePicker/DesktopDatePicker.js +2 -0
- package/node/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -0
- package/node/DesktopTimePicker/DesktopTimePicker.js +2 -0
- package/node/MobileDatePicker/MobileDatePicker.js +2 -0
- package/node/MobileDateTimePicker/MobileDateTimePicker.js +2 -0
- package/node/MobileTimePicker/MobileTimePicker.js +2 -0
- package/node/MonthCalendar/MonthCalendar.js +17 -3
- package/node/MonthCalendar/PickersMonth.js +40 -23
- package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js +16 -3
- package/node/PickersCalendarHeader/PickersCalendarHeader.js +4 -0
- package/node/PickersLayout/usePickerLayout.js +0 -5
- package/node/StaticDatePicker/StaticDatePicker.js +2 -0
- package/node/StaticDateTimePicker/StaticDateTimePicker.js +2 -0
- package/node/StaticTimePicker/StaticTimePicker.js +2 -0
- package/node/TimePicker/TimePicker.js +2 -0
- package/node/YearCalendar/PickersYear.js +34 -22
- package/node/YearCalendar/YearCalendar.js +17 -3
- package/node/index.js +1 -1
- package/node/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +4 -2
- package/node/internals/hooks/useField/useField.utils.js +2 -1
- package/node/internals/hooks/usePicker/usePickerValue.js +45 -38
- package/node/internals/hooks/usePicker/usePickerViews.js +2 -1
- package/node/locales/daDK.js +15 -19
- package/node/locales/faIR.js +19 -22
- package/node/locales/koKR.js +2 -2
- package/package.json +4 -4
|
@@ -243,6 +243,10 @@ process.env.NODE_ENV !== "production" ? PickersCalendarHeader.propTypes = {
|
|
|
243
243
|
* @default `${adapter.formats.month} ${adapter.formats.year}`
|
|
244
244
|
*/
|
|
245
245
|
format: PropTypes.string,
|
|
246
|
+
/**
|
|
247
|
+
* Id of the calendar text element.
|
|
248
|
+
* It is used to establish an `aria-labelledby` relationship with the calendar `grid` element.
|
|
249
|
+
*/
|
|
246
250
|
labelId: PropTypes.string,
|
|
247
251
|
maxDate: PropTypes.object.isRequired,
|
|
248
252
|
minDate: PropTypes.object.isRequired,
|
|
@@ -53,7 +53,6 @@ const usePickerLayout = props => {
|
|
|
53
53
|
const classes = useUtilityClasses(props);
|
|
54
54
|
|
|
55
55
|
// Action bar
|
|
56
|
-
|
|
57
56
|
const ActionBar = slots?.actionBar ?? PickersActionBar;
|
|
58
57
|
const actionBarProps = useSlotProps({
|
|
59
58
|
elementType: ActionBar,
|
|
@@ -73,7 +72,6 @@ const usePickerLayout = props => {
|
|
|
73
72
|
const actionBar = /*#__PURE__*/_jsx(ActionBar, _extends({}, actionBarProps));
|
|
74
73
|
|
|
75
74
|
// Toolbar
|
|
76
|
-
|
|
77
75
|
const Toolbar = slots?.toolbar;
|
|
78
76
|
const toolbarProps = useSlotProps({
|
|
79
77
|
elementType: Toolbar,
|
|
@@ -96,11 +94,9 @@ const usePickerLayout = props => {
|
|
|
96
94
|
const toolbar = toolbarHasView(toolbarProps) && !!Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, toolbarProps)) : null;
|
|
97
95
|
|
|
98
96
|
// Content
|
|
99
|
-
|
|
100
97
|
const content = children;
|
|
101
98
|
|
|
102
99
|
// Tabs
|
|
103
|
-
|
|
104
100
|
const Tabs = slots?.tabs;
|
|
105
101
|
const tabs = view && Tabs ? /*#__PURE__*/_jsx(Tabs, _extends({
|
|
106
102
|
view: view,
|
|
@@ -109,7 +105,6 @@ const usePickerLayout = props => {
|
|
|
109
105
|
}, slotProps?.tabs)) : null;
|
|
110
106
|
|
|
111
107
|
// Shortcuts
|
|
112
|
-
|
|
113
108
|
const Shortcuts = slots?.shortcuts ?? PickersShortcuts;
|
|
114
109
|
const shortcutsProps = useSlotProps({
|
|
115
110
|
elementType: Shortcuts,
|
|
@@ -133,7 +133,9 @@ StaticDatePicker.propTypes = {
|
|
|
133
133
|
/**
|
|
134
134
|
* Callback fired when the value is accepted.
|
|
135
135
|
* @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
|
|
136
|
+
* @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
|
|
136
137
|
* @param {TValue} value The value that was just accepted.
|
|
138
|
+
* @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
|
|
137
139
|
*/
|
|
138
140
|
onAccept: PropTypes.func,
|
|
139
141
|
/**
|
|
@@ -181,7 +181,9 @@ StaticDateTimePicker.propTypes = {
|
|
|
181
181
|
/**
|
|
182
182
|
* Callback fired when the value is accepted.
|
|
183
183
|
* @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
|
|
184
|
+
* @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
|
|
184
185
|
* @param {TValue} value The value that was just accepted.
|
|
186
|
+
* @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
|
|
185
187
|
*/
|
|
186
188
|
onAccept: PropTypes.func,
|
|
187
189
|
/**
|
|
@@ -125,7 +125,9 @@ StaticTimePicker.propTypes = {
|
|
|
125
125
|
/**
|
|
126
126
|
* Callback fired when the value is accepted.
|
|
127
127
|
* @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
|
|
128
|
+
* @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
|
|
128
129
|
* @param {TValue} value The value that was just accepted.
|
|
130
|
+
* @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
|
|
129
131
|
*/
|
|
130
132
|
onAccept: PropTypes.func,
|
|
131
133
|
/**
|
|
@@ -157,7 +157,9 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
|
|
|
157
157
|
/**
|
|
158
158
|
* Callback fired when the value is accepted.
|
|
159
159
|
* @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
|
|
160
|
+
* @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
|
|
160
161
|
* @param {TValue} value The value that was just accepted.
|
|
162
|
+
* @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
|
|
161
163
|
*/
|
|
162
164
|
onAccept: PropTypes.func,
|
|
163
165
|
/**
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
2
2
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
-
const _excluded = ["autoFocus", "className", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "yearsPerRow"];
|
|
3
|
+
const _excluded = ["autoFocus", "className", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "yearsPerRow", "slots", "slotProps"];
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
6
|
+
import { styled, alpha, useThemeProps } from '@mui/material/styles';
|
|
7
|
+
import { useSlotProps } from '@mui/base/utils';
|
|
8
|
+
import composeClasses from '@mui/utils/composeClasses';
|
|
9
|
+
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
|
|
8
10
|
import { getPickersYearUtilityClass, pickersYearClasses } from './pickersYearClasses';
|
|
9
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
12
|
const useUtilityClasses = ownerState => {
|
|
@@ -37,7 +39,7 @@ const PickersYearRoot = styled('div', {
|
|
|
37
39
|
}
|
|
38
40
|
}]
|
|
39
41
|
});
|
|
40
|
-
const
|
|
42
|
+
const YearCalendarButton = styled('button', {
|
|
41
43
|
name: 'MuiPickersYear',
|
|
42
44
|
slot: 'YearButton',
|
|
43
45
|
overridesResolver: (_, styles) => [styles.yearButton, {
|
|
@@ -102,37 +104,47 @@ export const PickersYear = /*#__PURE__*/React.memo(function PickersYear(inProps)
|
|
|
102
104
|
onBlur,
|
|
103
105
|
'aria-current': ariaCurrent
|
|
104
106
|
// We don't want to forward this prop to the root element
|
|
107
|
+
,
|
|
108
|
+
|
|
109
|
+
slots,
|
|
110
|
+
slotProps
|
|
105
111
|
} = props,
|
|
106
112
|
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
107
113
|
const ref = React.useRef(null);
|
|
108
114
|
const classes = useUtilityClasses(props);
|
|
109
115
|
|
|
110
116
|
// We can't forward the `autoFocus` to the button because it is a native button, not a MUI Button
|
|
111
|
-
|
|
117
|
+
useEnhancedEffect(() => {
|
|
112
118
|
if (autoFocus) {
|
|
113
119
|
// `ref.current` being `null` would be a bug in MUI.
|
|
114
|
-
ref.current
|
|
120
|
+
ref.current?.focus();
|
|
115
121
|
}
|
|
116
122
|
}, [autoFocus]);
|
|
123
|
+
const YearButton = slots?.yearButton ?? YearCalendarButton;
|
|
124
|
+
const yearButtonProps = useSlotProps({
|
|
125
|
+
elementType: YearButton,
|
|
126
|
+
externalSlotProps: slotProps?.yearButton,
|
|
127
|
+
additionalProps: {
|
|
128
|
+
children,
|
|
129
|
+
disabled,
|
|
130
|
+
tabIndex,
|
|
131
|
+
ref,
|
|
132
|
+
type: 'button',
|
|
133
|
+
role: 'radio',
|
|
134
|
+
'aria-current': ariaCurrent,
|
|
135
|
+
'aria-checked': selected,
|
|
136
|
+
onClick: event => onClick(event, value),
|
|
137
|
+
onKeyDown: event => onKeyDown(event, value),
|
|
138
|
+
onFocus: event => onFocus(event, value),
|
|
139
|
+
onBlur: event => onBlur(event, value)
|
|
140
|
+
},
|
|
141
|
+
ownerState: props,
|
|
142
|
+
className: classes.yearButton
|
|
143
|
+
});
|
|
117
144
|
return /*#__PURE__*/_jsx(PickersYearRoot, _extends({
|
|
118
145
|
className: clsx(classes.root, className),
|
|
119
146
|
ownerState: props
|
|
120
147
|
}, other, {
|
|
121
|
-
children: /*#__PURE__*/_jsx(
|
|
122
|
-
ref: ref,
|
|
123
|
-
disabled: disabled,
|
|
124
|
-
type: "button",
|
|
125
|
-
role: "radio",
|
|
126
|
-
tabIndex: disabled ? -1 : tabIndex,
|
|
127
|
-
"aria-current": ariaCurrent,
|
|
128
|
-
"aria-checked": selected,
|
|
129
|
-
onClick: event => onClick(event, value),
|
|
130
|
-
onKeyDown: event => onKeyDown(event, value),
|
|
131
|
-
onFocus: event => onFocus(event, value),
|
|
132
|
-
onBlur: event => onBlur(event, value),
|
|
133
|
-
className: classes.yearButton,
|
|
134
|
-
ownerState: props,
|
|
135
|
-
children: children
|
|
136
|
-
})
|
|
148
|
+
children: /*#__PURE__*/_jsx(YearButton, _extends({}, yearButtonProps))
|
|
137
149
|
}));
|
|
138
150
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
2
2
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
-
const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow", "timezone", "gridLabelId"];
|
|
3
|
+
const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import clsx from 'clsx';
|
|
@@ -88,7 +88,9 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
|
|
|
88
88
|
onFocusedViewChange,
|
|
89
89
|
yearsPerRow,
|
|
90
90
|
timezone: timezoneProp,
|
|
91
|
-
gridLabelId
|
|
91
|
+
gridLabelId,
|
|
92
|
+
slots,
|
|
93
|
+
slotProps
|
|
92
94
|
} = props,
|
|
93
95
|
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
94
96
|
const {
|
|
@@ -244,11 +246,13 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
|
|
|
244
246
|
onKeyDown: handleKeyDown,
|
|
245
247
|
autoFocus: internalHasFocus && yearNumber === focusedYear,
|
|
246
248
|
disabled: isDisabled,
|
|
247
|
-
tabIndex: yearNumber === focusedYear ? 0 : -1,
|
|
249
|
+
tabIndex: yearNumber === focusedYear && !isDisabled ? 0 : -1,
|
|
248
250
|
onFocus: handleYearFocus,
|
|
249
251
|
onBlur: handleYearBlur,
|
|
250
252
|
"aria-current": todayYear === yearNumber ? 'date' : undefined,
|
|
251
253
|
yearsPerRow: yearsPerRow,
|
|
254
|
+
slots: slots,
|
|
255
|
+
slotProps: slotProps,
|
|
252
256
|
children: utils.format(year, 'year')
|
|
253
257
|
}, utils.format(year, 'year'));
|
|
254
258
|
})
|
|
@@ -323,6 +327,16 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
|
|
|
323
327
|
* @returns {boolean} If `true`, the year will be disabled.
|
|
324
328
|
*/
|
|
325
329
|
shouldDisableYear: PropTypes.func,
|
|
330
|
+
/**
|
|
331
|
+
* The props used for each component slot.
|
|
332
|
+
* @default {}
|
|
333
|
+
*/
|
|
334
|
+
slotProps: PropTypes.object,
|
|
335
|
+
/**
|
|
336
|
+
* Overridable component slots.
|
|
337
|
+
* @default {}
|
|
338
|
+
*/
|
|
339
|
+
slots: PropTypes.object,
|
|
326
340
|
/**
|
|
327
341
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
328
342
|
*/
|
package/modern/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel"],
|
|
3
|
+
const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel", "labelId"],
|
|
4
4
|
_excluded2 = ["ownerState"],
|
|
5
5
|
_excluded3 = ["ownerState"];
|
|
6
6
|
import * as React from 'react';
|
|
@@ -73,7 +73,8 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
|
|
|
73
73
|
isPreviousDisabled,
|
|
74
74
|
isPreviousHidden,
|
|
75
75
|
onGoToPrevious,
|
|
76
|
-
previousLabel
|
|
76
|
+
previousLabel,
|
|
77
|
+
labelId
|
|
77
78
|
} = props,
|
|
78
79
|
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
79
80
|
const ownerState = props;
|
|
@@ -156,6 +157,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
|
|
|
156
157
|
})), children ? /*#__PURE__*/_jsx(Typography, {
|
|
157
158
|
variant: "subtitle1",
|
|
158
159
|
component: "span",
|
|
160
|
+
id: labelId,
|
|
159
161
|
children: children
|
|
160
162
|
}) : /*#__PURE__*/_jsx(PickersArrowSwitcherSpacer, {
|
|
161
163
|
className: classes.spacer,
|
|
@@ -103,7 +103,8 @@ export const applyLocalizedDigits = (valueStr, localizedDigits) => {
|
|
|
103
103
|
};
|
|
104
104
|
export const isStringNumber = (valueStr, localizedDigits) => {
|
|
105
105
|
const nonLocalizedValueStr = removeLocalizedDigits(valueStr, localizedDigits);
|
|
106
|
-
|
|
106
|
+
// `Number(' ')` returns `0` even if ' ' is not a valid number.
|
|
107
|
+
return nonLocalizedValueStr !== ' ' && !Number.isNaN(Number(nonLocalizedValueStr));
|
|
107
108
|
};
|
|
108
109
|
|
|
109
110
|
/**
|
|
@@ -119,7 +119,7 @@ export const usePickerValue = ({
|
|
|
119
119
|
const {
|
|
120
120
|
onAccept,
|
|
121
121
|
onChange,
|
|
122
|
-
value:
|
|
122
|
+
value: inValueWithoutRenderTimezone,
|
|
123
123
|
defaultValue: inDefaultValue,
|
|
124
124
|
closeOnSelect = wrapperVariant === 'desktop',
|
|
125
125
|
timezone: timezoneProp
|
|
@@ -129,15 +129,15 @@ export const usePickerValue = ({
|
|
|
129
129
|
} = React.useRef(inDefaultValue);
|
|
130
130
|
const {
|
|
131
131
|
current: isControlled
|
|
132
|
-
} = React.useRef(
|
|
132
|
+
} = React.useRef(inValueWithoutRenderTimezone !== undefined);
|
|
133
133
|
|
|
134
134
|
/* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
|
|
135
135
|
if (process.env.NODE_ENV !== 'production') {
|
|
136
136
|
React.useEffect(() => {
|
|
137
|
-
if (isControlled !== (
|
|
137
|
+
if (isControlled !== (inValueWithoutRenderTimezone !== undefined)) {
|
|
138
138
|
console.error([`MUI X: A component is changing the ${isControlled ? '' : 'un'}controlled value of a picker to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled value` + 'for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
|
|
139
139
|
}
|
|
140
|
-
}, [
|
|
140
|
+
}, [inValueWithoutRenderTimezone]);
|
|
141
141
|
React.useEffect(() => {
|
|
142
142
|
if (!isControlled && defaultValue !== inDefaultValue) {
|
|
143
143
|
console.error([`MUI X: A component is changing the defaultValue of an uncontrolled picker after being initialized. ` + `To suppress this warning opt to use a controlled value.`].join('\n'));
|
|
@@ -152,10 +152,21 @@ export const usePickerValue = ({
|
|
|
152
152
|
isOpen,
|
|
153
153
|
setIsOpen
|
|
154
154
|
} = useOpenState(props);
|
|
155
|
+
const {
|
|
156
|
+
timezone,
|
|
157
|
+
value: inValueWithTimezoneToRender,
|
|
158
|
+
handleValueChange
|
|
159
|
+
} = useValueWithTimezone({
|
|
160
|
+
timezone: timezoneProp,
|
|
161
|
+
value: inValueWithoutRenderTimezone,
|
|
162
|
+
defaultValue,
|
|
163
|
+
onChange,
|
|
164
|
+
valueManager
|
|
165
|
+
});
|
|
155
166
|
const [dateState, setDateState] = React.useState(() => {
|
|
156
167
|
let initialValue;
|
|
157
|
-
if (
|
|
158
|
-
initialValue =
|
|
168
|
+
if (inValueWithTimezoneToRender !== undefined) {
|
|
169
|
+
initialValue = inValueWithTimezoneToRender;
|
|
159
170
|
} else if (defaultValue !== undefined) {
|
|
160
171
|
initialValue = defaultValue;
|
|
161
172
|
} else {
|
|
@@ -165,20 +176,10 @@ export const usePickerValue = ({
|
|
|
165
176
|
draft: initialValue,
|
|
166
177
|
lastPublishedValue: initialValue,
|
|
167
178
|
lastCommittedValue: initialValue,
|
|
168
|
-
lastControlledValue:
|
|
179
|
+
lastControlledValue: inValueWithTimezoneToRender,
|
|
169
180
|
hasBeenModifiedSinceMount: false
|
|
170
181
|
};
|
|
171
182
|
});
|
|
172
|
-
const {
|
|
173
|
-
timezone,
|
|
174
|
-
handleValueChange
|
|
175
|
-
} = useValueWithTimezone({
|
|
176
|
-
timezone: timezoneProp,
|
|
177
|
-
value: inValue,
|
|
178
|
-
defaultValue,
|
|
179
|
-
onChange,
|
|
180
|
-
valueManager
|
|
181
|
-
});
|
|
182
183
|
useValidation(_extends({}, props, {
|
|
183
184
|
value: dateState.draft,
|
|
184
185
|
timezone
|
|
@@ -200,38 +201,44 @@ export const usePickerValue = ({
|
|
|
200
201
|
lastCommittedValue: shouldCommit ? action.value : prev.lastCommittedValue,
|
|
201
202
|
hasBeenModifiedSinceMount: true
|
|
202
203
|
}));
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
204
|
+
let cachedContext = null;
|
|
205
|
+
const getContext = () => {
|
|
206
|
+
if (!cachedContext) {
|
|
207
|
+
const validationError = action.name === 'setValueFromField' ? action.context.validationError : validator({
|
|
208
|
+
adapter,
|
|
208
209
|
value: action.value,
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
210
|
+
props: _extends({}, props, {
|
|
211
|
+
value: action.value,
|
|
212
|
+
timezone
|
|
213
|
+
})
|
|
214
|
+
});
|
|
215
|
+
cachedContext = {
|
|
216
|
+
validationError
|
|
217
|
+
};
|
|
218
|
+
if (action.name === 'setValueFromShortcut') {
|
|
219
|
+
cachedContext.shortcut = action.shortcut;
|
|
220
|
+
}
|
|
217
221
|
}
|
|
218
|
-
|
|
222
|
+
return cachedContext;
|
|
223
|
+
};
|
|
224
|
+
if (shouldPublish) {
|
|
225
|
+
handleValueChange(action.value, getContext());
|
|
219
226
|
}
|
|
220
227
|
if (shouldCommit && onAccept) {
|
|
221
|
-
onAccept(action.value);
|
|
228
|
+
onAccept(action.value, getContext());
|
|
222
229
|
}
|
|
223
230
|
if (shouldClose) {
|
|
224
231
|
setIsOpen(false);
|
|
225
232
|
}
|
|
226
233
|
});
|
|
227
|
-
if (
|
|
228
|
-
const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, dateState.draft,
|
|
234
|
+
if (inValueWithTimezoneToRender !== undefined && (dateState.lastControlledValue === undefined || !valueManager.areValuesEqual(utils, dateState.lastControlledValue, inValueWithTimezoneToRender))) {
|
|
235
|
+
const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, dateState.draft, inValueWithTimezoneToRender);
|
|
229
236
|
setDateState(prev => _extends({}, prev, {
|
|
230
|
-
lastControlledValue:
|
|
237
|
+
lastControlledValue: inValueWithTimezoneToRender
|
|
231
238
|
}, isUpdateComingFromPicker ? {} : {
|
|
232
|
-
lastCommittedValue:
|
|
233
|
-
lastPublishedValue:
|
|
234
|
-
draft:
|
|
239
|
+
lastCommittedValue: inValueWithTimezoneToRender,
|
|
240
|
+
lastPublishedValue: inValueWithTimezoneToRender,
|
|
241
|
+
draft: inValueWithTimezoneToRender,
|
|
235
242
|
hasBeenModifiedSinceMount: true
|
|
236
243
|
}));
|
|
237
244
|
}
|
|
@@ -39,6 +39,7 @@ export const usePickerViews = ({
|
|
|
39
39
|
onClose
|
|
40
40
|
} = propsFromPickerValue;
|
|
41
41
|
const {
|
|
42
|
+
view: inView,
|
|
42
43
|
views,
|
|
43
44
|
openTo,
|
|
44
45
|
onViewChange,
|
|
@@ -54,7 +55,7 @@ export const usePickerViews = ({
|
|
|
54
55
|
setFocusedView,
|
|
55
56
|
setValueAndGoToNextView
|
|
56
57
|
} = useViews({
|
|
57
|
-
view:
|
|
58
|
+
view: inView,
|
|
58
59
|
views,
|
|
59
60
|
openTo,
|
|
60
61
|
onChange,
|
package/modern/locales/daDK.js
CHANGED
|
@@ -17,11 +17,10 @@ const daDKPickers = {
|
|
|
17
17
|
// DateRange labels
|
|
18
18
|
start: 'Start',
|
|
19
19
|
end: 'Slut',
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
startDate: 'Start dato',
|
|
21
|
+
startTime: 'Start tid',
|
|
22
|
+
endDate: 'Slut date',
|
|
23
|
+
endTime: 'Slut tid',
|
|
25
24
|
// Action bar
|
|
26
25
|
cancelButtonLabel: 'Annuller',
|
|
27
26
|
clearButtonLabel: 'Ryd',
|
|
@@ -47,8 +46,7 @@ const daDKPickers = {
|
|
|
47
46
|
// Open picker labels
|
|
48
47
|
openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vælg dato, valgte dato er ${utils.format(value, 'fullDate')}` : 'Vælg dato',
|
|
49
48
|
openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vælg tidspunkt, valgte tidspunkt er ${utils.format(value, 'fullTime')}` : 'Vælg tidspunkt',
|
|
50
|
-
|
|
51
|
-
|
|
49
|
+
fieldClearLabel: 'ryd felt',
|
|
52
50
|
// Table labels
|
|
53
51
|
timeTableLabel: 'vælg tidspunkt',
|
|
54
52
|
dateTableLabel: 'vælg dato',
|
|
@@ -60,19 +58,17 @@ const daDKPickers = {
|
|
|
60
58
|
fieldHoursPlaceholder: () => 'hh',
|
|
61
59
|
fieldMinutesPlaceholder: () => 'mm',
|
|
62
60
|
fieldSecondsPlaceholder: () => 'ss',
|
|
63
|
-
fieldMeridiemPlaceholder: () => 'aa'
|
|
64
|
-
|
|
61
|
+
fieldMeridiemPlaceholder: () => 'aa',
|
|
65
62
|
// View names
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
63
|
+
year: 'år',
|
|
64
|
+
month: 'måned',
|
|
65
|
+
day: 'dag',
|
|
66
|
+
weekDay: 'ugedag',
|
|
67
|
+
hours: 'timer',
|
|
68
|
+
minutes: 'minutter',
|
|
69
|
+
seconds: 'sekunder',
|
|
70
|
+
meridiem: 'middag',
|
|
75
71
|
// Common
|
|
76
|
-
|
|
72
|
+
empty: 'tom'
|
|
77
73
|
};
|
|
78
74
|
export const daDK = getPickersLocalization(daDKPickers);
|
package/modern/locales/faIR.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { getPickersLocalization } from './utils/getPickersLocalization';
|
|
2
2
|
const timeViews = {
|
|
3
|
-
hours: '
|
|
4
|
-
minutes: '
|
|
5
|
-
seconds: '
|
|
3
|
+
hours: 'ساعتها',
|
|
4
|
+
minutes: 'دقیقهها',
|
|
5
|
+
seconds: 'ثانیهها',
|
|
6
6
|
meridiem: 'بعد از ظهر'
|
|
7
7
|
};
|
|
8
8
|
const faIRPickers = {
|
|
@@ -16,11 +16,10 @@ const faIRPickers = {
|
|
|
16
16
|
// DateRange labels
|
|
17
17
|
start: 'شروع',
|
|
18
18
|
end: 'پایان',
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
19
|
+
startDate: 'تاریخ شروع',
|
|
20
|
+
startTime: 'ساعت شروع',
|
|
21
|
+
endDate: 'تاریخ پایان',
|
|
22
|
+
endTime: 'ساعت پایان',
|
|
24
23
|
// Action bar
|
|
25
24
|
cancelButtonLabel: 'لغو',
|
|
26
25
|
clearButtonLabel: 'پاک کردن',
|
|
@@ -33,9 +32,9 @@ const faIRPickers = {
|
|
|
33
32
|
dateRangePickerToolbarTitle: 'محدوده تاریخ را انتخاب کنید',
|
|
34
33
|
// Clock labels
|
|
35
34
|
clockLabelText: (view, time, adapter) => ` را انتخاب کنید ${timeViews[view]}. ${time === null ? 'هیچ ساعتی انتخاب نشده است' : `ساعت انتخاب ${adapter.format(time, 'fullTime')} می باشد`}`,
|
|
36
|
-
hoursClockNumberText: hours => `${hours}
|
|
37
|
-
minutesClockNumberText: minutes => `${minutes}
|
|
38
|
-
secondsClockNumberText: seconds => `${seconds}
|
|
35
|
+
hoursClockNumberText: hours => `${hours} ساعتها`,
|
|
36
|
+
minutesClockNumberText: minutes => `${minutes} دقیقهها`,
|
|
37
|
+
secondsClockNumberText: seconds => `${seconds} ثانیهها`,
|
|
39
38
|
// Digital clock labels
|
|
40
39
|
selectViewText: view => ` را انتخاب کنید ${timeViews[view]}`,
|
|
41
40
|
// Calendar labels
|
|
@@ -44,10 +43,9 @@ const faIRPickers = {
|
|
|
44
43
|
calendarWeekNumberAriaLabelText: weekNumber => `هفته ${weekNumber}`,
|
|
45
44
|
calendarWeekNumberText: weekNumber => `${weekNumber}`,
|
|
46
45
|
// Open picker labels
|
|
47
|
-
openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `تاریخ را انتخاب کنید، تاریخ انتخاب شده ${utils.format(value, 'fullDate')}
|
|
48
|
-
openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `ساعت را انتخاب کنید، ساعت انتخاب شده ${utils.format(value, 'fullTime')}
|
|
49
|
-
|
|
50
|
-
|
|
46
|
+
openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `تاریخ را انتخاب کنید، تاریخ انتخاب شده ${utils.format(value, 'fullDate')} میباشد` : 'تاریخ را انتخاب کنید',
|
|
47
|
+
openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `ساعت را انتخاب کنید، ساعت انتخاب شده ${utils.format(value, 'fullTime')} میباشد` : 'ساعت را انتخاب کنید',
|
|
48
|
+
fieldClearLabel: 'پاک کردن مقدار',
|
|
51
49
|
// Table labels
|
|
52
50
|
timeTableLabel: 'انتخاب تاریخ',
|
|
53
51
|
dateTableLabel: 'انتخاب ساعت',
|
|
@@ -64,13 +62,12 @@ const faIRPickers = {
|
|
|
64
62
|
year: 'سال',
|
|
65
63
|
month: 'ماه',
|
|
66
64
|
day: 'روز',
|
|
67
|
-
|
|
68
|
-
hours: '
|
|
69
|
-
minutes: '
|
|
70
|
-
seconds: '
|
|
71
|
-
|
|
72
|
-
|
|
65
|
+
weekDay: 'روز هفته',
|
|
66
|
+
hours: 'ساعتها',
|
|
67
|
+
minutes: 'دقیقهها',
|
|
68
|
+
seconds: 'ثانیهها',
|
|
69
|
+
meridiem: 'نیمروز',
|
|
73
70
|
// Common
|
|
74
|
-
|
|
71
|
+
empty: 'خالی'
|
|
75
72
|
};
|
|
76
73
|
export const faIR = getPickersLocalization(faIRPickers);
|
package/modern/locales/koKR.js
CHANGED
|
@@ -3,7 +3,7 @@ const views = {
|
|
|
3
3
|
hours: '시간을',
|
|
4
4
|
minutes: '분을',
|
|
5
5
|
seconds: '초를',
|
|
6
|
-
meridiem: '
|
|
6
|
+
meridiem: '오전/오후를'
|
|
7
7
|
};
|
|
8
8
|
const koKRPickers = {
|
|
9
9
|
// Calendar navigation
|
|
@@ -33,7 +33,7 @@ const koKRPickers = {
|
|
|
33
33
|
dateRangePickerToolbarTitle: '날짜 범위 선택하기',
|
|
34
34
|
// Clock labels
|
|
35
35
|
clockLabelText: (view, time, adapter) => `${views[view]} 선택하세요. ${time === null ? '시간을 선택하지 않았습니다.' : `현재 선택된 시간은 ${adapter.format(time, 'fullTime')}입니다.`}`,
|
|
36
|
-
hoursClockNumberText: hours => `${hours}
|
|
36
|
+
hoursClockNumberText: hours => `${hours}시`,
|
|
37
37
|
minutesClockNumberText: minutes => `${minutes}분`,
|
|
38
38
|
secondsClockNumberText: seconds => `${seconds}초`,
|
|
39
39
|
// Digital clock labels
|
|
@@ -138,6 +138,7 @@ class AdapterDateFnsJalali extends _AdapterDateFnsBase.AdapterDateFnsBase {
|
|
|
138
138
|
longFormatters: _format.longFormatters,
|
|
139
139
|
lib: 'date-fns-jalali'
|
|
140
140
|
});
|
|
141
|
+
// TODO: explicit return types can be removed once there is only one date-fns version supported
|
|
141
142
|
this.parse = (value, format) => {
|
|
142
143
|
if (value === '') {
|
|
143
144
|
return null;
|
|
@@ -98,6 +98,7 @@ class AdapterDateFns extends _AdapterDateFnsBase.AdapterDateFnsBase {
|
|
|
98
98
|
formats,
|
|
99
99
|
longFormatters: _format.longFormatters
|
|
100
100
|
});
|
|
101
|
+
// TODO: explicit return types can be removed once there is only one date-fns version supported
|
|
101
102
|
this.parse = (value, format) => {
|
|
102
103
|
if (value === '') {
|
|
103
104
|
return null;
|
|
@@ -281,7 +281,9 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
|
|
|
281
281
|
readOnly,
|
|
282
282
|
disabled,
|
|
283
283
|
timezone,
|
|
284
|
-
gridLabelId
|
|
284
|
+
gridLabelId,
|
|
285
|
+
slots,
|
|
286
|
+
slotProps
|
|
285
287
|
};
|
|
286
288
|
const prevOpenViewRef = React.useRef(view);
|
|
287
289
|
React.useEffect(() => {
|
|
@@ -342,8 +344,6 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
|
|
|
342
344
|
fixedWeekNumber: fixedWeekNumber,
|
|
343
345
|
dayOfWeekFormatter: dayOfWeekFormatter,
|
|
344
346
|
displayWeekNumber: displayWeekNumber,
|
|
345
|
-
slots: slots,
|
|
346
|
-
slotProps: slotProps,
|
|
347
347
|
loading: loading,
|
|
348
348
|
renderLoading: renderLoading
|
|
349
349
|
}))]
|
|
@@ -176,7 +176,9 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
|
|
|
176
176
|
/**
|
|
177
177
|
* Callback fired when the value is accepted.
|
|
178
178
|
* @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
|
|
179
|
+
* @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
|
|
179
180
|
* @param {TValue} value The value that was just accepted.
|
|
181
|
+
* @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
|
|
180
182
|
*/
|
|
181
183
|
onAccept: _propTypes.default.func,
|
|
182
184
|
/**
|
|
@@ -214,7 +214,9 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
|
|
|
214
214
|
/**
|
|
215
215
|
* Callback fired when the value is accepted.
|
|
216
216
|
* @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
|
|
217
|
+
* @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
|
|
217
218
|
* @param {TValue} value The value that was just accepted.
|
|
219
|
+
* @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
|
|
218
220
|
*/
|
|
219
221
|
onAccept: _propTypes.default.func,
|
|
220
222
|
/**
|