@mui/x-date-pickers 6.11.2 → 6.12.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 +2 -2
- package/AdapterDateFnsJalali/AdapterDateFnsJalali.d.ts +2 -2
- package/AdapterDayjs/AdapterDayjs.d.ts +2 -2
- package/AdapterLuxon/AdapterLuxon.d.ts +2 -2
- package/AdapterMoment/AdapterMoment.d.ts +2 -2
- package/AdapterMomentHijri/AdapterMomentHijri.d.ts +2 -2
- package/AdapterMomentJalaali/AdapterMomentJalaali.d.ts +2 -2
- package/CHANGELOG.md +100 -33
- package/DateCalendar/DateCalendar.js +3 -3
- package/DateCalendar/DateCalendar.types.d.ts +1 -1
- package/DateCalendar/DayCalendar.js +2 -2
- package/DatePicker/DatePicker.js +1 -1
- package/DateTimePicker/DateTimePicker.js +1 -1
- package/DesktopDatePicker/DesktopDatePicker.js +1 -1
- package/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -1
- package/DesktopTimePicker/DesktopTimePicker.js +1 -1
- package/MobileDatePicker/MobileDatePicker.js +1 -1
- package/MobileDateTimePicker/MobileDateTimePicker.js +1 -1
- package/MobileTimePicker/MobileTimePicker.js +1 -1
- package/MonthCalendar/PickersMonth.js +1 -1
- package/StaticDatePicker/StaticDatePicker.js +1 -1
- package/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
- package/StaticTimePicker/StaticTimePicker.js +1 -1
- package/TimePicker/TimePicker.js +1 -1
- package/YearCalendar/YearCalendar.js +5 -2
- package/index.js +1 -1
- package/internals/components/PickersPopper.d.ts +5 -3
- package/internals/components/PickersPopper.js +58 -30
- package/internals/hooks/useDefaultReduceAnimations.d.ts +1 -1
- package/internals/hooks/useDefaultReduceAnimations.js +7 -2
- package/internals/hooks/useDesktopPicker/useDesktopPicker.js +1 -1
- package/internals/hooks/useField/useField.js +6 -6
- package/internals/hooks/useField/useField.utils.d.ts +0 -1
- package/internals/hooks/useField/useField.utils.js +0 -48
- package/internals/hooks/useField/useFieldState.js +5 -25
- package/internals/hooks/usePicker/usePickerValue.js +1 -1
- package/internals/hooks/usePicker/usePickerViews.d.ts +1 -1
- package/internals/hooks/usePicker/usePickerViews.js +1 -1
- package/internals/hooks/useValidation.d.ts +2 -4
- package/internals/hooks/useValueWithTimezone.js +2 -2
- package/internals/hooks/useViews.js +1 -1
- package/legacy/DateCalendar/DateCalendar.js +3 -3
- package/legacy/DateCalendar/DayCalendar.js +2 -2
- package/legacy/DatePicker/DatePicker.js +1 -1
- package/legacy/DateTimePicker/DateTimePicker.js +1 -1
- package/legacy/DesktopDatePicker/DesktopDatePicker.js +1 -1
- package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -1
- package/legacy/DesktopTimePicker/DesktopTimePicker.js +1 -1
- package/legacy/MobileDatePicker/MobileDatePicker.js +1 -1
- package/legacy/MobileDateTimePicker/MobileDateTimePicker.js +1 -1
- package/legacy/MobileTimePicker/MobileTimePicker.js +1 -1
- package/legacy/MonthCalendar/PickersMonth.js +1 -1
- package/legacy/StaticDatePicker/StaticDatePicker.js +1 -1
- package/legacy/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
- package/legacy/StaticTimePicker/StaticTimePicker.js +1 -1
- package/legacy/TimePicker/TimePicker.js +1 -1
- package/legacy/YearCalendar/YearCalendar.js +5 -2
- package/legacy/index.js +1 -1
- package/legacy/internals/components/PickersPopper.js +54 -30
- package/legacy/internals/hooks/useDefaultReduceAnimations.js +7 -2
- package/legacy/internals/hooks/useDesktopPicker/useDesktopPicker.js +1 -1
- package/legacy/internals/hooks/useField/useField.js +6 -6
- package/legacy/internals/hooks/useField/useField.utils.js +0 -52
- package/legacy/internals/hooks/useField/useFieldState.js +4 -24
- package/legacy/internals/hooks/usePicker/usePickerValue.js +1 -1
- package/legacy/internals/hooks/usePicker/usePickerViews.js +1 -1
- package/legacy/internals/hooks/useValueWithTimezone.js +2 -2
- package/legacy/internals/hooks/useViews.js +1 -1
- package/legacy/tests/describeValue/testControlledUnControlled.js +1 -1
- package/models/adapters.d.ts +2 -1
- package/modern/DateCalendar/DateCalendar.js +1 -1
- package/modern/DatePicker/DatePicker.js +1 -1
- package/modern/DateTimePicker/DateTimePicker.js +1 -1
- package/modern/DesktopDatePicker/DesktopDatePicker.js +1 -1
- package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -1
- package/modern/DesktopTimePicker/DesktopTimePicker.js +1 -1
- package/modern/MobileDatePicker/MobileDatePicker.js +1 -1
- package/modern/MobileDateTimePicker/MobileDateTimePicker.js +1 -1
- package/modern/MobileTimePicker/MobileTimePicker.js +1 -1
- package/modern/StaticDatePicker/StaticDatePicker.js +1 -1
- package/modern/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
- package/modern/StaticTimePicker/StaticTimePicker.js +1 -1
- package/modern/TimePicker/TimePicker.js +1 -1
- package/modern/YearCalendar/YearCalendar.js +4 -1
- package/modern/index.js +1 -1
- package/modern/internals/components/PickersPopper.js +56 -28
- package/modern/internals/hooks/useDefaultReduceAnimations.js +7 -2
- package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.js +1 -1
- package/modern/internals/hooks/useField/useField.utils.js +0 -48
- package/modern/internals/hooks/useField/useFieldState.js +4 -24
- package/node/DateCalendar/DateCalendar.js +1 -1
- package/node/DatePicker/DatePicker.js +1 -1
- package/node/DateTimePicker/DateTimePicker.js +1 -1
- package/node/DesktopDatePicker/DesktopDatePicker.js +1 -1
- package/node/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -1
- package/node/DesktopTimePicker/DesktopTimePicker.js +1 -1
- package/node/MobileDatePicker/MobileDatePicker.js +1 -1
- package/node/MobileDateTimePicker/MobileDateTimePicker.js +1 -1
- package/node/MobileTimePicker/MobileTimePicker.js +1 -1
- package/node/StaticDatePicker/StaticDatePicker.js +1 -1
- package/node/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
- package/node/StaticTimePicker/StaticTimePicker.js +1 -1
- package/node/TimePicker/TimePicker.js +1 -1
- package/node/YearCalendar/YearCalendar.js +4 -1
- package/node/index.js +1 -1
- package/node/internals/components/PickersPopper.js +56 -28
- package/node/internals/hooks/useDefaultReduceAnimations.js +9 -4
- package/node/internals/hooks/useDesktopPicker/useDesktopPicker.js +1 -1
- package/node/internals/hooks/useField/useField.utils.js +1 -50
- package/node/internals/hooks/useField/useFieldState.js +3 -23
- package/package.json +2 -2
- package/tests/describeValue/testControlledUnControlled.js +1 -1
package/TimePicker/TimePicker.js
CHANGED
|
@@ -215,7 +215,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
|
|
|
215
215
|
readOnly: PropTypes.bool,
|
|
216
216
|
/**
|
|
217
217
|
* If `true`, disable heavy animations.
|
|
218
|
-
* @default `@media(prefers-reduced-motion: reduce)` ||
|
|
218
|
+
* @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
|
|
219
219
|
*/
|
|
220
220
|
reduceAnimations: PropTypes.bool,
|
|
221
221
|
/**
|
|
@@ -51,7 +51,10 @@ const YearCalendarRoot = styled('div', {
|
|
|
51
51
|
height: '100%',
|
|
52
52
|
padding: '0 4px',
|
|
53
53
|
width: 320,
|
|
54
|
-
maxHeight: 304
|
|
54
|
+
maxHeight: 304,
|
|
55
|
+
// avoid padding increasing width over defined
|
|
56
|
+
boxSizing: 'border-box',
|
|
57
|
+
position: 'relative'
|
|
55
58
|
});
|
|
56
59
|
export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(inProps, ref) {
|
|
57
60
|
const props = useYearCalendarDefaultizedProps(inProps, 'MuiYearCalendar');
|
|
@@ -157,7 +160,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
|
|
|
157
160
|
if (!isYearDisabled(utils.setYear(value != null ? value : referenceDate, year))) {
|
|
158
161
|
setFocusedYear(year);
|
|
159
162
|
changeHasFocus(true);
|
|
160
|
-
onYearFocus == null
|
|
163
|
+
onYearFocus == null || onYearFocus(year);
|
|
161
164
|
}
|
|
162
165
|
});
|
|
163
166
|
React.useEffect(() => {
|
package/index.js
CHANGED
|
@@ -7,6 +7,9 @@ import { TransitionProps as MuiTransitionProps } from '@mui/material/transitions
|
|
|
7
7
|
import { PickersPopperClasses } from './pickersPopperClasses';
|
|
8
8
|
import { UncapitalizeObjectKeys } from '../utils/slots-migration';
|
|
9
9
|
import { UsePickerValueActions } from '../hooks/usePicker/usePickerValue.types';
|
|
10
|
+
interface PickersPopperOwnerState extends PickerPopperProps {
|
|
11
|
+
placement: PopperPlacementType;
|
|
12
|
+
}
|
|
10
13
|
export interface PickersPopperSlotsComponent {
|
|
11
14
|
/**
|
|
12
15
|
* Custom component for the paper rendered inside the desktop picker's Popper.
|
|
@@ -33,9 +36,7 @@ export interface PickersPopperSlotsComponentsProps {
|
|
|
33
36
|
/**
|
|
34
37
|
* Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component.
|
|
35
38
|
*/
|
|
36
|
-
desktopPaper?: SlotComponentProps<typeof MuiPaper, {},
|
|
37
|
-
placement: PopperPlacementType | undefined;
|
|
38
|
-
}>;
|
|
39
|
+
desktopPaper?: SlotComponentProps<typeof MuiPaper, {}, PickersPopperOwnerState>;
|
|
39
40
|
/**
|
|
40
41
|
* Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component.
|
|
41
42
|
*/
|
|
@@ -64,3 +65,4 @@ export interface PickerPopperProps extends UsePickerValueActions {
|
|
|
64
65
|
reduceAnimations?: boolean;
|
|
65
66
|
}
|
|
66
67
|
export declare function PickersPopper(inProps: PickerPopperProps): React.JSX.Element;
|
|
68
|
+
export {};
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
1
2
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
+
const _excluded = ["PaperComponent", "popperPlacement", "ownerState", "children", "paperSlotProps", "paperClasses", "onPaperClick", "onPaperTouchStart"];
|
|
2
4
|
import * as React from 'react';
|
|
3
5
|
import { useSlotProps } from '@mui/base/utils';
|
|
4
6
|
import Grow from '@mui/material/Grow';
|
|
@@ -38,9 +40,9 @@ const PickersPopperPaper = styled(MuiPaper, {
|
|
|
38
40
|
})(({
|
|
39
41
|
ownerState
|
|
40
42
|
}) => _extends({
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}, ownerState.placement
|
|
43
|
+
outline: 0,
|
|
44
|
+
transformOrigin: 'top center'
|
|
45
|
+
}, ownerState.placement.includes('top') && {
|
|
44
46
|
transformOrigin: 'bottom center'
|
|
45
47
|
}));
|
|
46
48
|
function clickedRootScrollbar(event, doc) {
|
|
@@ -158,6 +160,49 @@ function useClickAwayListener(active, onClickAway) {
|
|
|
158
160
|
}, [active, handleClickAway]);
|
|
159
161
|
return [nodeRef, handleSynthetic, handleSynthetic];
|
|
160
162
|
}
|
|
163
|
+
const PickersPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
164
|
+
const {
|
|
165
|
+
PaperComponent,
|
|
166
|
+
popperPlacement,
|
|
167
|
+
ownerState: inOwnerState,
|
|
168
|
+
children,
|
|
169
|
+
paperSlotProps,
|
|
170
|
+
paperClasses,
|
|
171
|
+
onPaperClick,
|
|
172
|
+
onPaperTouchStart
|
|
173
|
+
// picks up the style props provided by `Transition`
|
|
174
|
+
// https://mui.com/material-ui/transitions/#child-requirement
|
|
175
|
+
} = props,
|
|
176
|
+
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
177
|
+
const ownerState = _extends({}, inOwnerState, {
|
|
178
|
+
placement: popperPlacement
|
|
179
|
+
});
|
|
180
|
+
const paperProps = useSlotProps({
|
|
181
|
+
elementType: PaperComponent,
|
|
182
|
+
externalSlotProps: paperSlotProps,
|
|
183
|
+
additionalProps: {
|
|
184
|
+
tabIndex: -1,
|
|
185
|
+
elevation: 8,
|
|
186
|
+
ref
|
|
187
|
+
},
|
|
188
|
+
className: paperClasses,
|
|
189
|
+
ownerState
|
|
190
|
+
});
|
|
191
|
+
return /*#__PURE__*/_jsx(PaperComponent, _extends({}, other, paperProps, {
|
|
192
|
+
onClick: event => {
|
|
193
|
+
var _paperProps$onClick;
|
|
194
|
+
onPaperClick(event);
|
|
195
|
+
(_paperProps$onClick = paperProps.onClick) == null || _paperProps$onClick.call(paperProps, event);
|
|
196
|
+
},
|
|
197
|
+
onTouchStart: event => {
|
|
198
|
+
var _paperProps$onTouchSt;
|
|
199
|
+
onPaperTouchStart(event);
|
|
200
|
+
(_paperProps$onTouchSt = paperProps.onTouchStart) == null || _paperProps$onTouchSt.call(paperProps, event);
|
|
201
|
+
},
|
|
202
|
+
ownerState: ownerState,
|
|
203
|
+
children: children
|
|
204
|
+
}));
|
|
205
|
+
});
|
|
161
206
|
export function PickersPopper(inProps) {
|
|
162
207
|
var _slots$desktopTransit, _slots$desktopTrapFoc, _slots$desktopPaper, _slots$popper;
|
|
163
208
|
const props = useThemeProps({
|
|
@@ -225,18 +270,6 @@ export function PickersPopper(inProps) {
|
|
|
225
270
|
const Transition = ((_slots$desktopTransit = slots == null ? void 0 : slots.desktopTransition) != null ? _slots$desktopTransit : reduceAnimations) ? Fade : Grow;
|
|
226
271
|
const TrapFocus = (_slots$desktopTrapFoc = slots == null ? void 0 : slots.desktopTrapFocus) != null ? _slots$desktopTrapFoc : MuiTrapFocus;
|
|
227
272
|
const Paper = (_slots$desktopPaper = slots == null ? void 0 : slots.desktopPaper) != null ? _slots$desktopPaper : PickersPopperPaper;
|
|
228
|
-
const paperProps = useSlotProps({
|
|
229
|
-
elementType: Paper,
|
|
230
|
-
externalSlotProps: slotProps == null ? void 0 : slotProps.desktopPaper,
|
|
231
|
-
additionalProps: {
|
|
232
|
-
tabIndex: -1,
|
|
233
|
-
elevation: 8,
|
|
234
|
-
ref: handlePaperRef
|
|
235
|
-
},
|
|
236
|
-
className: classes.paper,
|
|
237
|
-
ownerState: {} // Is overridden below to use `placement
|
|
238
|
-
});
|
|
239
|
-
|
|
240
273
|
const Popper = (_slots$popper = slots == null ? void 0 : slots.popper) != null ? _slots$popper : PickersPopperRoot;
|
|
241
274
|
const popperProps = useSlotProps({
|
|
242
275
|
elementType: Popper,
|
|
@@ -268,22 +301,17 @@ export function PickersPopper(inProps) {
|
|
|
268
301
|
isEnabled: () => true
|
|
269
302
|
}, slotProps == null ? void 0 : slotProps.desktopTrapFocus, {
|
|
270
303
|
children: /*#__PURE__*/_jsx(Transition, _extends({}, TransitionProps, slotProps == null ? void 0 : slotProps.desktopTransition, {
|
|
271
|
-
children: /*#__PURE__*/_jsx(
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
(_paperProps$onTouchSt = paperProps.onTouchStart) == null ? void 0 : _paperProps$onTouchSt.call(paperProps, event);
|
|
281
|
-
},
|
|
282
|
-
ownerState: _extends({}, ownerState, {
|
|
283
|
-
placement: popperPlacement
|
|
284
|
-
}),
|
|
304
|
+
children: /*#__PURE__*/_jsx(PickersPopperPaperWrapper, {
|
|
305
|
+
PaperComponent: Paper,
|
|
306
|
+
ownerState: ownerState,
|
|
307
|
+
popperPlacement: popperPlacement,
|
|
308
|
+
ref: handlePaperRef,
|
|
309
|
+
onPaperClick: onPaperClick,
|
|
310
|
+
onPaperTouchStart: onPaperTouchStart,
|
|
311
|
+
paperClasses: classes.paper,
|
|
312
|
+
paperSlotProps: slotProps == null ? void 0 : slotProps.desktopPaper,
|
|
285
313
|
children: children
|
|
286
|
-
})
|
|
314
|
+
})
|
|
287
315
|
}))
|
|
288
316
|
}))
|
|
289
317
|
}));
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const
|
|
1
|
+
export declare const slowAnimationDevices: boolean;
|
|
2
2
|
export declare const useDefaultReduceAnimations: () => boolean;
|
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
import useMediaQuery from '@mui/material/useMediaQuery';
|
|
2
2
|
const PREFERS_REDUCED_MOTION = '@media (prefers-reduced-motion: reduce)';
|
|
3
|
-
|
|
3
|
+
|
|
4
|
+
// detect if user agent has Android version < 10 or iOS version < 13
|
|
5
|
+
const mobileVersionMatches = typeof navigator !== 'undefined' && navigator.userAgent.match(/android\s(\d+)|OS\s(\d+)/i);
|
|
6
|
+
const androidVersion = mobileVersionMatches && mobileVersionMatches[1] ? parseInt(mobileVersionMatches[1], 10) : null;
|
|
7
|
+
const iOSVersion = mobileVersionMatches && mobileVersionMatches[2] ? parseInt(mobileVersionMatches[2], 10) : null;
|
|
8
|
+
export const slowAnimationDevices = androidVersion && androidVersion < 10 || iOSVersion && iOSVersion < 13 || false;
|
|
4
9
|
export const useDefaultReduceAnimations = () => {
|
|
5
10
|
const prefersReduced = useMediaQuery(PREFERS_REDUCED_MOTION, {
|
|
6
11
|
defaultMatches: false
|
|
7
12
|
});
|
|
8
|
-
return prefersReduced ||
|
|
13
|
+
return prefersReduced || slowAnimationDevices;
|
|
9
14
|
};
|
|
@@ -81,7 +81,7 @@ export const useDesktopPicker = _ref => {
|
|
|
81
81
|
externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.openPickerButton,
|
|
82
82
|
additionalProps: {
|
|
83
83
|
disabled: disabled || readOnly,
|
|
84
|
-
onClick: actions.onOpen,
|
|
84
|
+
onClick: open ? actions.onClose : actions.onOpen,
|
|
85
85
|
'aria-label': getOpenDialogAriaText(pickerFieldProps.value, utils),
|
|
86
86
|
edge: inputAdornmentProps.position
|
|
87
87
|
},
|
|
@@ -86,17 +86,17 @@ export const useField = params => {
|
|
|
86
86
|
setSelectedSections(sectionIndex);
|
|
87
87
|
};
|
|
88
88
|
const handleInputClick = useEventCallback((...args) => {
|
|
89
|
-
onClick == null
|
|
89
|
+
onClick == null || onClick(...args);
|
|
90
90
|
syncSelectionFromDOM();
|
|
91
91
|
});
|
|
92
92
|
const handleInputMouseUp = useEventCallback(event => {
|
|
93
|
-
onMouseUp == null
|
|
93
|
+
onMouseUp == null || onMouseUp(event);
|
|
94
94
|
|
|
95
95
|
// Without this, the browser will remove the selected when clicking inside an already-selected section.
|
|
96
96
|
event.preventDefault();
|
|
97
97
|
});
|
|
98
98
|
const handleInputFocus = useEventCallback((...args) => {
|
|
99
|
-
onFocus == null
|
|
99
|
+
onFocus == null || onFocus(...args);
|
|
100
100
|
// The ref is guaranteed to be resolved at this point.
|
|
101
101
|
const input = inputRef.current;
|
|
102
102
|
window.clearTimeout(focusTimeoutRef.current);
|
|
@@ -118,11 +118,11 @@ export const useField = params => {
|
|
|
118
118
|
});
|
|
119
119
|
});
|
|
120
120
|
const handleInputBlur = useEventCallback((...args) => {
|
|
121
|
-
onBlur == null
|
|
121
|
+
onBlur == null || onBlur(...args);
|
|
122
122
|
setSelectedSections(null);
|
|
123
123
|
});
|
|
124
124
|
const handleInputPaste = useEventCallback(event => {
|
|
125
|
-
onPaste == null
|
|
125
|
+
onPaste == null || onPaste(event);
|
|
126
126
|
if (readOnly) {
|
|
127
127
|
event.preventDefault();
|
|
128
128
|
return;
|
|
@@ -203,7 +203,7 @@ export const useField = params => {
|
|
|
203
203
|
});
|
|
204
204
|
});
|
|
205
205
|
const handleInputKeyDown = useEventCallback(event => {
|
|
206
|
-
onKeyDown == null
|
|
206
|
+
onKeyDown == null || onKeyDown(event);
|
|
207
207
|
|
|
208
208
|
// eslint-disable-next-line default-case
|
|
209
209
|
switch (true) {
|
|
@@ -27,5 +27,4 @@ export declare const getSectionsBoundaries: <TDate>(utils: MuiPickersAdapter<TDa
|
|
|
27
27
|
export declare const validateSections: <TSection extends FieldSection>(sections: TSection[], valueType: FieldValueType) => void;
|
|
28
28
|
export declare const mergeDateIntoReferenceDate: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, dateToTransferFrom: TDate, sections: FieldSectionWithoutPosition[], referenceDate: TDate, shouldLimitToEditedSections: boolean) => TDate;
|
|
29
29
|
export declare const isAndroid: () => boolean;
|
|
30
|
-
export declare const clampDaySectionIfPossible: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, sections: TSection[], sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>) => TSection[] | null;
|
|
31
30
|
export declare const getSectionOrder: (sections: FieldSectionWithoutPosition[], isRTL: boolean) => SectionOrdering;
|
|
@@ -645,54 +645,6 @@ export const mergeDateIntoReferenceDate = (utils, timezone, dateToTransferFrom,
|
|
|
645
645
|
return mergedDate;
|
|
646
646
|
}, referenceDate);
|
|
647
647
|
export const isAndroid = () => navigator.userAgent.toLowerCase().indexOf('android') > -1;
|
|
648
|
-
export const clampDaySectionIfPossible = (utils, timezone, sections, sectionsValueBoundaries) => {
|
|
649
|
-
// We can only clamp the day value if:
|
|
650
|
-
// 1. if all the sections are filled (except the week day section which can be empty)
|
|
651
|
-
// 2. there is a day section
|
|
652
|
-
const canClamp = sections.every(section => section.type === 'weekDay' || section.value !== '') && sections.some(section => section.type === 'day');
|
|
653
|
-
if (!canClamp) {
|
|
654
|
-
return null;
|
|
655
|
-
}
|
|
656
|
-
|
|
657
|
-
// We try to generate a valid date representing the start of the month of the invalid date typed by the user.
|
|
658
|
-
const sectionsForStartOfMonth = sections.map(section => {
|
|
659
|
-
if (section.type !== 'day') {
|
|
660
|
-
return section;
|
|
661
|
-
}
|
|
662
|
-
const dayBoundaries = sectionsValueBoundaries.day({
|
|
663
|
-
currentDate: null,
|
|
664
|
-
format: section.format,
|
|
665
|
-
contentType: section.contentType
|
|
666
|
-
});
|
|
667
|
-
return _extends({}, section, {
|
|
668
|
-
value: cleanDigitSectionValue(utils, timezone, dayBoundaries.minimum, dayBoundaries, section)
|
|
669
|
-
});
|
|
670
|
-
});
|
|
671
|
-
const startOfMonth = getDateFromDateSections(utils, sectionsForStartOfMonth);
|
|
672
|
-
|
|
673
|
-
// Even the start of the month is invalid, we probably have other invalid sections, the clamping failed.
|
|
674
|
-
if (startOfMonth == null || !utils.isValid(startOfMonth)) {
|
|
675
|
-
return null;
|
|
676
|
-
}
|
|
677
|
-
|
|
678
|
-
// The only invalid section was the day of the month, we replace its value with the maximum boundary for the correct month.
|
|
679
|
-
return sections.map(section => {
|
|
680
|
-
if (section.type !== 'day') {
|
|
681
|
-
return section;
|
|
682
|
-
}
|
|
683
|
-
const dayBoundaries = sectionsValueBoundaries.day({
|
|
684
|
-
currentDate: startOfMonth,
|
|
685
|
-
format: section.format,
|
|
686
|
-
contentType: section.contentType
|
|
687
|
-
});
|
|
688
|
-
if (Number(section.value) <= dayBoundaries.maximum) {
|
|
689
|
-
return section;
|
|
690
|
-
}
|
|
691
|
-
return _extends({}, section, {
|
|
692
|
-
value: dayBoundaries.maximum.toString()
|
|
693
|
-
});
|
|
694
|
-
});
|
|
695
|
-
};
|
|
696
648
|
export const getSectionOrder = (sections, isRTL) => {
|
|
697
649
|
const neighbors = {};
|
|
698
650
|
if (!isRTL) {
|
|
@@ -3,7 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import useControlled from '@mui/utils/useControlled';
|
|
4
4
|
import { useTheme } from '@mui/material/styles';
|
|
5
5
|
import { useUtils, useLocaleText, useLocalizationContext } from '../useUtils';
|
|
6
|
-
import { addPositionPropertiesToSections, splitFormatIntoSections,
|
|
6
|
+
import { addPositionPropertiesToSections, splitFormatIntoSections, mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections } from './useField.utils';
|
|
7
7
|
import { useValueWithTimezone } from '../useValueWithTimezone';
|
|
8
8
|
import { getSectionTypeGranularity } from '../../utils/getDefaultReferenceDate';
|
|
9
9
|
export const useFieldState = params => {
|
|
@@ -75,7 +75,7 @@ export const useFieldState = params => {
|
|
|
75
75
|
});
|
|
76
76
|
const setSelectedSections = newSelectedSections => {
|
|
77
77
|
innerSetSelectedSections(newSelectedSections);
|
|
78
|
-
onSelectedSectionsChange == null
|
|
78
|
+
onSelectedSectionsChange == null || onSelectedSectionsChange(newSelectedSections);
|
|
79
79
|
setState(prevState => _extends({}, prevState, {
|
|
80
80
|
selectedSectionQuery: null
|
|
81
81
|
}));
|
|
@@ -209,21 +209,7 @@ export const useFieldState = params => {
|
|
|
209
209
|
const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
|
|
210
210
|
const newSections = setSectionValue(selectedSectionIndexes.startIndex, newSectionValue);
|
|
211
211
|
const newActiveDateSections = activeDateManager.getSections(newSections);
|
|
212
|
-
|
|
213
|
-
let shouldRegenSections = false;
|
|
214
|
-
|
|
215
|
-
/**
|
|
216
|
-
* If the date is invalid,
|
|
217
|
-
* Then we can try to clamp the day section to see if that produces a valid date.
|
|
218
|
-
* This can be useful if the month has fewer days than the day value currently provided.
|
|
219
|
-
*/
|
|
220
|
-
if (!utils.isValid(newActiveDate)) {
|
|
221
|
-
const clampedSections = clampDaySectionIfPossible(utils, timezone, newActiveDateSections, sectionsValueBoundaries);
|
|
222
|
-
if (clampedSections != null) {
|
|
223
|
-
shouldRegenSections = true;
|
|
224
|
-
newActiveDate = getDateFromDateSections(utils, clampedSections);
|
|
225
|
-
}
|
|
226
|
-
}
|
|
212
|
+
const newActiveDate = getDateFromDateSections(utils, newActiveDateSections);
|
|
227
213
|
let values;
|
|
228
214
|
let shouldPublish;
|
|
229
215
|
|
|
@@ -241,22 +227,16 @@ export const useFieldState = params => {
|
|
|
241
227
|
shouldPublish = (newActiveDate != null && !utils.isValid(newActiveDate)) !== (activeDateManager.date != null && !utils.isValid(activeDateManager.date));
|
|
242
228
|
}
|
|
243
229
|
|
|
244
|
-
/**
|
|
245
|
-
* If the value has been modified (to clamp the day).
|
|
246
|
-
* Then we need to re-generate the sections to make sure they also have this change.
|
|
247
|
-
*/
|
|
248
|
-
const sections = shouldRegenSections ? getSectionsFromValue(values.value, state.sections) : newSections;
|
|
249
|
-
|
|
250
230
|
/**
|
|
251
231
|
* Publish or update the internal state with the new value and sections.
|
|
252
232
|
*/
|
|
253
233
|
if (shouldPublish) {
|
|
254
234
|
return publishValue(_extends({}, values, {
|
|
255
|
-
sections
|
|
235
|
+
sections: newSections
|
|
256
236
|
}));
|
|
257
237
|
}
|
|
258
238
|
return setState(prevState => _extends({}, prevState, values, {
|
|
259
|
-
sections,
|
|
239
|
+
sections: newSections,
|
|
260
240
|
tempValueStrAndroid: null
|
|
261
241
|
}));
|
|
262
242
|
};
|
|
@@ -303,7 +303,7 @@ export const usePickerValue = ({
|
|
|
303
303
|
}));
|
|
304
304
|
const handleFieldSelectedSectionsChange = useEventCallback(newSelectedSections => {
|
|
305
305
|
setSelectedSections(newSelectedSections);
|
|
306
|
-
onSelectedSectionsChange == null
|
|
306
|
+
onSelectedSectionsChange == null || onSelectedSectionsChange(newSelectedSections);
|
|
307
307
|
});
|
|
308
308
|
const actions = {
|
|
309
309
|
onClear: handleClear,
|
|
@@ -33,7 +33,7 @@ export interface UsePickerViewsBaseProps<TValue, TView extends DateOrTimeViewWit
|
|
|
33
33
|
viewRenderers: PickerViewRendererLookup<TValue, TView, TExternalProps, TAdditionalProps>;
|
|
34
34
|
/**
|
|
35
35
|
* If `true`, disable heavy animations.
|
|
36
|
-
* @default `@media(prefers-reduced-motion: reduce)` ||
|
|
36
|
+
* @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
|
|
37
37
|
*/
|
|
38
38
|
reduceAnimations?: boolean;
|
|
39
39
|
}
|
|
@@ -102,7 +102,7 @@ export const usePickerViews = ({
|
|
|
102
102
|
setTimeout(() => {
|
|
103
103
|
// focusing the input before the range selection is done
|
|
104
104
|
// calling `onSelectedSectionsChange` outside of timeout results in an inconsistent behavior between Safari And Chrome
|
|
105
|
-
inputRef == null
|
|
105
|
+
inputRef == null || inputRef.current.focus();
|
|
106
106
|
onSelectedSectionsChange(view);
|
|
107
107
|
});
|
|
108
108
|
}
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import { MuiPickersAdapterContextValue } from '../../LocalizationProvider/LocalizationProvider';
|
|
2
|
-
|
|
2
|
+
interface ValidationCommonProps<TError, TValue> {
|
|
3
3
|
/**
|
|
4
4
|
* Callback that fired when input value or new `value` prop validation returns **new** validation error (or value is valid after error).
|
|
5
5
|
* In case of validation error detected `reason` prop return non-null value and `TextField` must be displayed in `error` state.
|
|
6
6
|
* This can be used to render appropriate form error.
|
|
7
|
-
*
|
|
8
|
-
* [Read the guide](https://next.material-ui-pickers.dev/guides/forms) about form integration and error displaying.
|
|
9
|
-
*
|
|
10
7
|
* @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
|
|
11
8
|
* @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.
|
|
12
9
|
* @param {TError} reason The reason why the current value is not valid.
|
|
@@ -23,3 +20,4 @@ export type Validator<TValue, TDate, TError, TValidationProps> = (params: {
|
|
|
23
20
|
props: Omit<TValidationProps, 'value' | 'onError'>;
|
|
24
21
|
}) => TError;
|
|
25
22
|
export declare function useValidation<TValue, TDate, TError, TValidationProps extends {}>(props: ValidationProps<TError, TValue, TValidationProps>, validate: Validator<TValue, TDate, TError, TValidationProps>, isSameError: (a: TError, b: TError | null) => boolean, defaultErrorState: TError): TError;
|
|
23
|
+
export {};
|
|
@@ -29,7 +29,7 @@ export const useValueWithTimezone = ({
|
|
|
29
29
|
const valueWithTimezoneToRender = React.useMemo(() => valueManager.setTimezone(utils, timezoneToRender, inputValue), [valueManager, utils, timezoneToRender, inputValue]);
|
|
30
30
|
const handleValueChange = useEventCallback((newValue, ...otherParams) => {
|
|
31
31
|
const newValueWithInputTimezone = setInputTimezone(newValue);
|
|
32
|
-
onChange == null
|
|
32
|
+
onChange == null || onChange(newValueWithInputTimezone, ...otherParams);
|
|
33
33
|
});
|
|
34
34
|
return {
|
|
35
35
|
value: valueWithTimezoneToRender,
|
|
@@ -57,7 +57,7 @@ export const useControlledValueWithTimezone = ({
|
|
|
57
57
|
});
|
|
58
58
|
const onChange = useEventCallback((newValue, ...otherParams) => {
|
|
59
59
|
setValue(newValue);
|
|
60
|
-
onChangeProp == null
|
|
60
|
+
onChangeProp == null || onChangeProp(newValue, ...otherParams);
|
|
61
61
|
});
|
|
62
62
|
return useValueWithTimezone({
|
|
63
63
|
timezone: timezoneProp,
|
|
@@ -62,7 +62,7 @@ export function useViews({
|
|
|
62
62
|
);
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
onFocusedViewChange == null
|
|
65
|
+
onFocusedViewChange == null || onFocusedViewChange(viewToFocus, hasFocus);
|
|
66
66
|
});
|
|
67
67
|
const handleChangeView = useEventCallback(newView => {
|
|
68
68
|
if (newView === view) {
|
|
@@ -224,7 +224,7 @@ export var DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(in
|
|
|
224
224
|
}) : newDate;
|
|
225
225
|
if (closestEnabledDate) {
|
|
226
226
|
setValueAndGoToNextView(closestEnabledDate, 'finish');
|
|
227
|
-
onMonthChange == null
|
|
227
|
+
onMonthChange == null || onMonthChange(startOfMonth);
|
|
228
228
|
} else {
|
|
229
229
|
goToNextView();
|
|
230
230
|
changeMonth(startOfMonth);
|
|
@@ -246,7 +246,7 @@ export var DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(in
|
|
|
246
246
|
}) : newDate;
|
|
247
247
|
if (closestEnabledDate) {
|
|
248
248
|
setValueAndGoToNextView(closestEnabledDate, 'finish');
|
|
249
|
-
onYearChange == null
|
|
249
|
+
onYearChange == null || onYearChange(closestEnabledDate);
|
|
250
250
|
} else {
|
|
251
251
|
goToNextView();
|
|
252
252
|
changeMonth(startOfYear);
|
|
@@ -496,7 +496,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
|
|
|
496
496
|
readOnly: PropTypes.bool,
|
|
497
497
|
/**
|
|
498
498
|
* If `true`, disable heavy animations.
|
|
499
|
-
* @default `@media(prefers-reduced-motion: reduce)` ||
|
|
499
|
+
* @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
|
|
500
500
|
*/
|
|
501
501
|
reduceAnimations: PropTypes.bool,
|
|
502
502
|
/**
|
|
@@ -311,7 +311,7 @@ export function DayCalendar(inProps) {
|
|
|
311
311
|
if (!isDateDisabled(day)) {
|
|
312
312
|
onFocusedDayChange(day);
|
|
313
313
|
setInternalFocusedDay(day);
|
|
314
|
-
onFocusedViewChange == null
|
|
314
|
+
onFocusedViewChange == null || onFocusedViewChange(true);
|
|
315
315
|
setInternalHasFocus(true);
|
|
316
316
|
}
|
|
317
317
|
};
|
|
@@ -382,7 +382,7 @@ export function DayCalendar(inProps) {
|
|
|
382
382
|
});
|
|
383
383
|
var handleBlur = useEventCallback(function (event, day) {
|
|
384
384
|
if (internalHasFocus && utils.isSameDay(internalFocusedDay, day)) {
|
|
385
|
-
onFocusedViewChange == null
|
|
385
|
+
onFocusedViewChange == null || onFocusedViewChange(false);
|
|
386
386
|
}
|
|
387
387
|
});
|
|
388
388
|
var currentMonthNumber = utils.getMonth(currentMonth);
|
|
@@ -241,7 +241,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
|
|
|
241
241
|
readOnly: PropTypes.bool,
|
|
242
242
|
/**
|
|
243
243
|
* If `true`, disable heavy animations.
|
|
244
|
-
* @default `@media(prefers-reduced-motion: reduce)` ||
|
|
244
|
+
* @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
|
|
245
245
|
*/
|
|
246
246
|
reduceAnimations: PropTypes.bool,
|
|
247
247
|
/**
|
|
@@ -279,7 +279,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
|
|
|
279
279
|
readOnly: PropTypes.bool,
|
|
280
280
|
/**
|
|
281
281
|
* If `true`, disable heavy animations.
|
|
282
|
-
* @default `@media(prefers-reduced-motion: reduce)` ||
|
|
282
|
+
* @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
|
|
283
283
|
*/
|
|
284
284
|
reduceAnimations: PropTypes.bool,
|
|
285
285
|
/**
|
|
@@ -259,7 +259,7 @@ DesktopDatePicker.propTypes = {
|
|
|
259
259
|
readOnly: PropTypes.bool,
|
|
260
260
|
/**
|
|
261
261
|
* If `true`, disable heavy animations.
|
|
262
|
-
* @default `@media(prefers-reduced-motion: reduce)` ||
|
|
262
|
+
* @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
|
|
263
263
|
*/
|
|
264
264
|
reduceAnimations: PropTypes.bool,
|
|
265
265
|
/**
|
|
@@ -334,7 +334,7 @@ DesktopDateTimePicker.propTypes = {
|
|
|
334
334
|
readOnly: PropTypes.bool,
|
|
335
335
|
/**
|
|
336
336
|
* If `true`, disable heavy animations.
|
|
337
|
-
* @default `@media(prefers-reduced-motion: reduce)` ||
|
|
337
|
+
* @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
|
|
338
338
|
*/
|
|
339
339
|
reduceAnimations: PropTypes.bool,
|
|
340
340
|
/**
|
|
@@ -256,7 +256,7 @@ DesktopTimePicker.propTypes = {
|
|
|
256
256
|
readOnly: PropTypes.bool,
|
|
257
257
|
/**
|
|
258
258
|
* If `true`, disable heavy animations.
|
|
259
|
-
* @default `@media(prefers-reduced-motion: reduce)` ||
|
|
259
|
+
* @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
|
|
260
260
|
*/
|
|
261
261
|
reduceAnimations: PropTypes.bool,
|
|
262
262
|
/**
|
|
@@ -256,7 +256,7 @@ MobileDatePicker.propTypes = {
|
|
|
256
256
|
readOnly: PropTypes.bool,
|
|
257
257
|
/**
|
|
258
258
|
* If `true`, disable heavy animations.
|
|
259
|
-
* @default `@media(prefers-reduced-motion: reduce)` ||
|
|
259
|
+
* @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
|
|
260
260
|
*/
|
|
261
261
|
reduceAnimations: PropTypes.bool,
|
|
262
262
|
/**
|
|
@@ -305,7 +305,7 @@ MobileDateTimePicker.propTypes = {
|
|
|
305
305
|
readOnly: PropTypes.bool,
|
|
306
306
|
/**
|
|
307
307
|
* If `true`, disable heavy animations.
|
|
308
|
-
* @default `@media(prefers-reduced-motion: reduce)` ||
|
|
308
|
+
* @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
|
|
309
309
|
*/
|
|
310
310
|
reduceAnimations: PropTypes.bool,
|
|
311
311
|
/**
|
|
@@ -233,7 +233,7 @@ MobileTimePicker.propTypes = {
|
|
|
233
233
|
readOnly: PropTypes.bool,
|
|
234
234
|
/**
|
|
235
235
|
* If `true`, disable heavy animations.
|
|
236
|
-
* @default `@media(prefers-reduced-motion: reduce)` ||
|
|
236
|
+
* @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
|
|
237
237
|
*/
|
|
238
238
|
reduceAnimations: PropTypes.bool,
|
|
239
239
|
/**
|
|
@@ -99,7 +99,7 @@ export var PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProps)
|
|
|
99
99
|
useEnhancedEffect(function () {
|
|
100
100
|
if (autoFocus) {
|
|
101
101
|
var _ref$current;
|
|
102
|
-
(_ref$current = ref.current) == null
|
|
102
|
+
(_ref$current = ref.current) == null || _ref$current.focus();
|
|
103
103
|
}
|
|
104
104
|
}, [autoFocus]);
|
|
105
105
|
return /*#__PURE__*/_jsx(PickersMonthRoot, _extends({
|
|
@@ -201,7 +201,7 @@ StaticDatePicker.propTypes = {
|
|
|
201
201
|
readOnly: PropTypes.bool,
|
|
202
202
|
/**
|
|
203
203
|
* If `true`, disable heavy animations.
|
|
204
|
-
* @default `@media(prefers-reduced-motion: reduce)` ||
|
|
204
|
+
* @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
|
|
205
205
|
*/
|
|
206
206
|
reduceAnimations: PropTypes.bool,
|
|
207
207
|
/**
|
|
@@ -249,7 +249,7 @@ StaticDateTimePicker.propTypes = {
|
|
|
249
249
|
readOnly: PropTypes.bool,
|
|
250
250
|
/**
|
|
251
251
|
* If `true`, disable heavy animations.
|
|
252
|
-
* @default `@media(prefers-reduced-motion: reduce)` ||
|
|
252
|
+
* @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
|
|
253
253
|
*/
|
|
254
254
|
reduceAnimations: PropTypes.bool,
|
|
255
255
|
/**
|