@mui/x-date-pickers 7.0.0-beta.7 → 7.0.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.js +1 -1
- package/AdapterDateFnsBase/AdapterDateFnsBase.js +1 -2
- package/AdapterDateFnsJalali/AdapterDateFnsJalali.js +2 -4
- package/AdapterDateFnsV3/AdapterDateFnsV3.js +1 -1
- package/AdapterDayjs/AdapterDayjs.js +2 -4
- package/AdapterLuxon/AdapterLuxon.js +12 -9
- package/AdapterMoment/AdapterMoment.js +5 -6
- package/CHANGELOG.md +195 -12
- package/DateCalendar/DateCalendar.js +14 -16
- package/DateCalendar/DayCalendar.js +5 -6
- package/DateField/DateField.js +3 -4
- package/DatePicker/DatePicker.js +1 -1
- package/DatePicker/shared.d.ts +2 -1
- package/DatePicker/shared.js +3 -5
- package/DateTimeField/DateTimeField.js +3 -4
- package/DateTimePicker/DateTimePicker.js +1 -1
- package/DateTimePicker/DateTimePickerToolbar.js +1 -1
- package/DateTimePicker/shared.d.ts +2 -1
- package/DateTimePicker/shared.js +11 -13
- package/DesktopDatePicker/DesktopDatePicker.js +7 -11
- package/DesktopDateTimePicker/DesktopDateTimePicker.js +72 -37
- package/DesktopDateTimePicker/DesktopDateTimePickerLayout.d.ts +12 -0
- package/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +101 -0
- package/DesktopDateTimePicker/index.d.ts +1 -0
- package/DesktopDateTimePicker/index.js +2 -1
- package/DesktopTimePicker/DesktopTimePicker.js +8 -12
- package/DigitalClock/DigitalClock.js +2 -3
- package/LocalizationProvider/LocalizationProvider.js +1 -2
- package/MobileDatePicker/MobileDatePicker.js +6 -10
- package/MobileDateTimePicker/MobileDateTimePicker.js +8 -12
- package/MobileTimePicker/MobileTimePicker.js +6 -10
- package/MonthCalendar/MonthCalendar.js +4 -4
- package/MonthCalendar/PickersMonth.js +1 -2
- package/MultiSectionDigitalClock/MultiSectionDigitalClock.js +1 -1
- package/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js +1 -1
- package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +3 -5
- package/PickersActionBar/PickersActionBar.js +1 -1
- package/PickersCalendarHeader/PickersCalendarHeader.js +4 -5
- package/PickersLayout/usePickerLayout.js +8 -9
- package/PickersSectionList/PickersSectionList.js +9 -11
- package/PickersTextField/PickersFilledInput/PickersFilledInput.js +2 -3
- package/PickersTextField/PickersInput/PickersInput.js +1 -1
- package/PickersTextField/PickersInputBase/PickersInputBase.js +4 -5
- package/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js +2 -2
- package/README.md +1 -1
- package/StaticDatePicker/StaticDatePicker.js +4 -5
- package/StaticDateTimePicker/StaticDateTimePicker.js +6 -7
- package/StaticTimePicker/StaticTimePicker.js +3 -4
- package/TimeClock/TimeClock.js +1 -1
- package/TimeField/TimeField.js +2 -3
- package/TimePicker/shared.d.ts +2 -1
- package/TimePicker/shared.js +5 -7
- package/YearCalendar/YearCalendar.js +5 -6
- package/hooks/useClearableField.js +6 -7
- package/index.js +1 -1
- package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +8 -9
- package/internals/components/PickersModalDialog.js +6 -7
- package/internals/components/PickersPopper.js +13 -16
- package/internals/components/PickersToolbar.js +9 -12
- package/internals/hooks/date-helpers-hooks.js +1 -1
- package/internals/hooks/defaultizedFieldProps.js +15 -18
- package/internals/hooks/useClockReferenceDate.js +1 -1
- package/internals/hooks/useDesktopPicker/index.d.ts +1 -1
- package/internals/hooks/useDesktopPicker/useDesktopPicker.js +11 -12
- package/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts +2 -2
- package/internals/hooks/useField/buildSectionsFromFormat.js +35 -31
- package/internals/hooks/useField/useField.js +2 -2
- package/internals/hooks/useField/useField.utils.js +4 -7
- package/internals/hooks/useField/useFieldCharacterEditing.js +1 -2
- package/internals/hooks/useField/useFieldState.js +1 -1
- package/internals/hooks/useField/useFieldV6TextField.js +9 -15
- package/internals/hooks/useField/useFieldV7TextField.js +9 -11
- package/internals/hooks/useMobilePicker/useMobilePicker.js +7 -8
- package/internals/hooks/useOpenState.js +1 -1
- package/internals/hooks/usePicker/index.d.ts +1 -0
- package/internals/hooks/usePicker/usePickerViews.d.ts +4 -2
- package/internals/hooks/usePicker/usePickerViews.js +1 -2
- package/internals/hooks/useStaticPicker/useStaticPicker.js +13 -17
- package/internals/hooks/useValueWithTimezone.js +5 -6
- package/internals/hooks/useViews.js +3 -4
- package/internals/index.d.ts +1 -1
- package/internals/models/validation.d.ts +1 -1
- package/internals/utils/convertFieldResponseIntoMuiTextFieldProps.js +3 -3
- package/internals/utils/date-time-utils.js +2 -5
- package/internals/utils/fields.js +1 -1
- package/internals/utils/getDefaultReferenceDate.js +2 -6
- package/internals/utils/views.js +1 -1
- package/locales/csCZ.js +1 -4
- package/locales/daDK.js +1 -4
- package/locales/deDE.js +1 -4
- package/locales/huHU.js +1 -4
- package/locales/jaJP.js +1 -4
- package/locales/roRO.js +1 -4
- package/locales/skSK.js +1 -4
- package/modern/AdapterLuxon/AdapterLuxon.js +9 -4
- package/modern/DateCalendar/DateCalendar.js +1 -1
- package/modern/DateField/DateField.js +1 -1
- package/modern/DatePicker/DatePicker.js +1 -1
- package/modern/DateTimeField/DateTimeField.js +1 -1
- package/modern/DateTimePicker/DateTimePicker.js +1 -1
- package/modern/DesktopDatePicker/DesktopDatePicker.js +1 -1
- package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +64 -25
- package/modern/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +101 -0
- package/modern/DesktopDateTimePicker/index.js +2 -1
- package/modern/MobileDatePicker/MobileDatePicker.js +1 -1
- package/modern/MobileDateTimePicker/MobileDateTimePicker.js +1 -1
- package/modern/StaticDatePicker/StaticDatePicker.js +1 -1
- package/modern/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
- package/modern/index.js +1 -1
- package/modern/internals/components/PickersPopper.js +1 -1
- package/modern/internals/hooks/useField/buildSectionsFromFormat.js +34 -30
- package/modern/internals/hooks/useField/useFieldV7TextField.js +1 -1
- package/modern/internals/hooks/useOpenState.js +1 -1
- package/modern/internals/utils/fields.js +1 -1
- package/node/AdapterLuxon/AdapterLuxon.js +9 -4
- package/node/DateCalendar/DateCalendar.js +1 -1
- package/node/DateField/DateField.js +1 -1
- package/node/DatePicker/DatePicker.js +1 -1
- package/node/DateTimeField/DateTimeField.js +1 -1
- package/node/DateTimePicker/DateTimePicker.js +1 -1
- package/node/DesktopDatePicker/DesktopDatePicker.js +1 -1
- package/node/DesktopDateTimePicker/DesktopDateTimePicker.js +63 -25
- package/node/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +108 -0
- package/node/DesktopDateTimePicker/index.js +8 -1
- package/node/MobileDatePicker/MobileDatePicker.js +1 -1
- package/node/MobileDateTimePicker/MobileDateTimePicker.js +1 -1
- package/node/StaticDatePicker/StaticDatePicker.js +1 -1
- package/node/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
- package/node/index.js +1 -1
- package/node/internals/components/PickersPopper.js +1 -1
- package/node/internals/hooks/useField/buildSectionsFromFormat.js +34 -30
- package/node/internals/hooks/useField/useFieldV7TextField.js +1 -1
- package/node/internals/hooks/useOpenState.js +1 -1
- package/node/internals/utils/fields.js +1 -1
- package/package.json +5 -5
- package/timeViewRenderers/timeViewRenderers.js +1 -1
- package/dateTimeViewRenderers/dateTimeViewRenderers.d.ts +0 -15
- package/dateTimeViewRenderers/dateTimeViewRenderers.js +0 -163
- package/dateTimeViewRenderers/index.d.ts +0 -2
- package/dateTimeViewRenderers/index.js +0 -1
- package/dateTimeViewRenderers/package.json +0 -6
- package/modern/dateTimeViewRenderers/dateTimeViewRenderers.js +0 -162
- package/modern/dateTimeViewRenderers/index.js +0 -1
- package/node/dateTimeViewRenderers/dateTimeViewRenderers.js +0 -171
- package/node/dateTimeViewRenderers/index.js +0 -12
package/TimeField/TimeField.js
CHANGED
|
@@ -23,7 +23,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
23
23
|
* - [TimeField API](https://mui.com/x/api/date-pickers/time-field/)
|
|
24
24
|
*/
|
|
25
25
|
const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, inRef) {
|
|
26
|
-
var _slots$textField;
|
|
27
26
|
const themeProps = useThemeProps({
|
|
28
27
|
props: inProps,
|
|
29
28
|
name: 'MuiTimeField'
|
|
@@ -36,10 +35,10 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, inRe
|
|
|
36
35
|
} = themeProps,
|
|
37
36
|
other = _objectWithoutPropertiesLoose(themeProps, _excluded);
|
|
38
37
|
const ownerState = themeProps;
|
|
39
|
-
const TextField =
|
|
38
|
+
const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField);
|
|
40
39
|
const textFieldProps = useSlotProps({
|
|
41
40
|
elementType: TextField,
|
|
42
|
-
externalSlotProps: slotProps
|
|
41
|
+
externalSlotProps: slotProps?.textField,
|
|
43
42
|
externalForwardedProps: other,
|
|
44
43
|
ownerState,
|
|
45
44
|
additionalProps: {
|
package/TimePicker/shared.d.ts
CHANGED
|
@@ -20,6 +20,7 @@ export interface BaseTimePickerSlots<TDate extends PickerValidDate> extends Time
|
|
|
20
20
|
export interface BaseTimePickerSlotProps extends TimeClockSlotProps {
|
|
21
21
|
toolbar?: ExportedTimePickerToolbarProps;
|
|
22
22
|
}
|
|
23
|
+
export type TimePickerViewRenderers<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<TDate | null, TView, TimeViewRendererProps<TView, BaseClockProps<TDate, TView>>, TAdditionalProps>;
|
|
23
24
|
export interface BaseTimePickerProps<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem> extends BasePickerInputProps<TDate | null, TDate, TView, TimeValidationError>, ExportedBaseClockProps<TDate> {
|
|
24
25
|
/**
|
|
25
26
|
* Display ampm controls under the clock (instead of in the toolbar).
|
|
@@ -41,7 +42,7 @@ export interface BaseTimePickerProps<TDate extends PickerValidDate, TView extend
|
|
|
41
42
|
* If `null`, the section will only have field editing.
|
|
42
43
|
* If `undefined`, internally defined view will be the used.
|
|
43
44
|
*/
|
|
44
|
-
viewRenderers?: Partial<
|
|
45
|
+
viewRenderers?: Partial<TimePickerViewRenderers<TDate, TView>>;
|
|
45
46
|
}
|
|
46
47
|
type UseTimePickerDefaultizedProps<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TDate, TView>> = LocalizedComponent<TDate, DefaultizedProps<Props, 'views' | 'openTo' | 'ampm' | keyof BaseTimeValidationProps>>;
|
|
47
48
|
export declare function useTimePickerDefaultizedProps<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TDate, TView>>(props: Props, name: string): UseTimePickerDefaultizedProps<TDate, TView, Props>;
|
package/TimePicker/shared.js
CHANGED
|
@@ -5,16 +5,14 @@ import { useUtils } from '../internals/hooks/useUtils';
|
|
|
5
5
|
import { TimePickerToolbar } from './TimePickerToolbar';
|
|
6
6
|
import { applyDefaultViewProps } from '../internals/utils/views';
|
|
7
7
|
export function useTimePickerDefaultizedProps(props, name) {
|
|
8
|
-
var _themeProps$ampm, _themeProps$disableFu, _themeProps$disablePa, _themeProps$slotProps;
|
|
9
8
|
const utils = useUtils();
|
|
10
9
|
const themeProps = useThemeProps({
|
|
11
10
|
props,
|
|
12
11
|
name
|
|
13
12
|
});
|
|
14
|
-
const ampm =
|
|
13
|
+
const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
|
|
15
14
|
const localeText = React.useMemo(() => {
|
|
16
|
-
|
|
17
|
-
if (((_themeProps$localeTex = themeProps.localeText) == null ? void 0 : _themeProps$localeTex.toolbarTitle) == null) {
|
|
15
|
+
if (themeProps.localeText?.toolbarTitle == null) {
|
|
18
16
|
return themeProps.localeText;
|
|
19
17
|
}
|
|
20
18
|
return _extends({}, themeProps.localeText, {
|
|
@@ -30,8 +28,8 @@ export function useTimePickerDefaultizedProps(props, name) {
|
|
|
30
28
|
defaultViews: ['hours', 'minutes'],
|
|
31
29
|
defaultOpenTo: 'hours'
|
|
32
30
|
}), {
|
|
33
|
-
disableFuture:
|
|
34
|
-
disablePast:
|
|
31
|
+
disableFuture: themeProps.disableFuture ?? false,
|
|
32
|
+
disablePast: themeProps.disablePast ?? false,
|
|
35
33
|
slots: _extends({
|
|
36
34
|
toolbar: TimePickerToolbar
|
|
37
35
|
}, themeProps.slots),
|
|
@@ -39,7 +37,7 @@ export function useTimePickerDefaultizedProps(props, name) {
|
|
|
39
37
|
toolbar: _extends({
|
|
40
38
|
ampm,
|
|
41
39
|
ampmInClock: themeProps.ampmInClock
|
|
42
|
-
},
|
|
40
|
+
}, themeProps.slotProps?.toolbar)
|
|
43
41
|
})
|
|
44
42
|
});
|
|
45
43
|
}
|
|
@@ -26,7 +26,6 @@ const useUtilityClasses = ownerState => {
|
|
|
26
26
|
return composeClasses(slots, getYearCalendarUtilityClass, classes);
|
|
27
27
|
};
|
|
28
28
|
function useYearCalendarDefaultizedProps(props, name) {
|
|
29
|
-
var _themeProps$yearsPerR;
|
|
30
29
|
const utils = useUtils();
|
|
31
30
|
const defaultDates = useDefaultDates();
|
|
32
31
|
const themeProps = useThemeProps({
|
|
@@ -37,7 +36,7 @@ function useYearCalendarDefaultizedProps(props, name) {
|
|
|
37
36
|
disablePast: false,
|
|
38
37
|
disableFuture: false
|
|
39
38
|
}, themeProps, {
|
|
40
|
-
yearsPerRow:
|
|
39
|
+
yearsPerRow: themeProps.yearsPerRow ?? 3,
|
|
41
40
|
minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
|
|
42
41
|
maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate)
|
|
43
42
|
});
|
|
@@ -130,7 +129,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
|
|
|
130
129
|
name: 'YearCalendar',
|
|
131
130
|
state: 'hasFocus',
|
|
132
131
|
controlled: hasFocus,
|
|
133
|
-
default: autoFocus
|
|
132
|
+
default: autoFocus ?? false
|
|
134
133
|
});
|
|
135
134
|
const changeHasFocus = useEventCallback(newHasFocus => {
|
|
136
135
|
setInternalHasFocus(newHasFocus);
|
|
@@ -161,14 +160,14 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
|
|
|
161
160
|
if (readOnly) {
|
|
162
161
|
return;
|
|
163
162
|
}
|
|
164
|
-
const newDate = utils.setYear(value
|
|
163
|
+
const newDate = utils.setYear(value ?? referenceDate, year);
|
|
165
164
|
handleValueChange(newDate);
|
|
166
165
|
});
|
|
167
166
|
const focusYear = useEventCallback(year => {
|
|
168
|
-
if (!isYearDisabled(utils.setYear(value
|
|
167
|
+
if (!isYearDisabled(utils.setYear(value ?? referenceDate, year))) {
|
|
169
168
|
setFocusedYear(year);
|
|
170
169
|
changeHasFocus(true);
|
|
171
|
-
onYearFocus
|
|
170
|
+
onYearFocus?.(year);
|
|
172
171
|
}
|
|
173
172
|
});
|
|
174
173
|
React.useEffect(() => {
|
|
@@ -11,7 +11,6 @@ import { useLocaleText } from '../internals/hooks/useUtils';
|
|
|
11
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
export const useClearableField = props => {
|
|
14
|
-
var _slots$clearButton, _slots$clearIcon;
|
|
15
14
|
const localeText = useLocaleText();
|
|
16
15
|
const {
|
|
17
16
|
clearable,
|
|
@@ -22,11 +21,11 @@ export const useClearableField = props => {
|
|
|
22
21
|
slotProps
|
|
23
22
|
} = props,
|
|
24
23
|
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
25
|
-
const IconButton =
|
|
24
|
+
const IconButton = slots?.clearButton ?? MuiIconButton;
|
|
26
25
|
// The spread is here to avoid this bug mui/material-ui#34056
|
|
27
26
|
const _useSlotProps = useSlotProps({
|
|
28
27
|
elementType: IconButton,
|
|
29
|
-
externalSlotProps: slotProps
|
|
28
|
+
externalSlotProps: slotProps?.clearButton,
|
|
30
29
|
ownerState: {},
|
|
31
30
|
className: 'clearButton',
|
|
32
31
|
additionalProps: {
|
|
@@ -34,10 +33,10 @@ export const useClearableField = props => {
|
|
|
34
33
|
}
|
|
35
34
|
}),
|
|
36
35
|
iconButtonProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
|
|
37
|
-
const EndClearIcon =
|
|
36
|
+
const EndClearIcon = slots?.clearIcon ?? ClearIcon;
|
|
38
37
|
const endClearIconProps = useSlotProps({
|
|
39
38
|
elementType: EndClearIcon,
|
|
40
|
-
externalSlotProps: slotProps
|
|
39
|
+
externalSlotProps: slotProps?.clearIcon,
|
|
41
40
|
ownerState: {}
|
|
42
41
|
});
|
|
43
42
|
return _extends({}, other, {
|
|
@@ -46,7 +45,7 @@ export const useClearableField = props => {
|
|
|
46
45
|
children: [clearable && /*#__PURE__*/_jsx(InputAdornment, {
|
|
47
46
|
position: "end",
|
|
48
47
|
sx: {
|
|
49
|
-
marginRight: InputProps
|
|
48
|
+
marginRight: InputProps?.endAdornment ? -1 : -1.5
|
|
50
49
|
},
|
|
51
50
|
children: /*#__PURE__*/_jsx(IconButton, _extends({}, iconButtonProps, {
|
|
52
51
|
onClick: onClear,
|
|
@@ -54,7 +53,7 @@ export const useClearableField = props => {
|
|
|
54
53
|
fontSize: "small"
|
|
55
54
|
}, endClearIconProps))
|
|
56
55
|
}))
|
|
57
|
-
}), InputProps
|
|
56
|
+
}), InputProps?.endAdornment]
|
|
58
57
|
})
|
|
59
58
|
}),
|
|
60
59
|
sx: [{
|
package/index.js
CHANGED
|
@@ -51,7 +51,6 @@ const useUtilityClasses = ownerState => {
|
|
|
51
51
|
return composeClasses(slots, getPickersArrowSwitcherUtilityClass, classes);
|
|
52
52
|
};
|
|
53
53
|
export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function PickersArrowSwitcher(inProps, ref) {
|
|
54
|
-
var _slots$previousIconBu, _slots$nextIconButton, _slots$leftArrowIcon, _slots$rightArrowIcon;
|
|
55
54
|
const theme = useTheme();
|
|
56
55
|
const isRTL = theme.direction === 'rtl';
|
|
57
56
|
const props = useThemeProps({
|
|
@@ -87,10 +86,10 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
|
|
|
87
86
|
goTo: onGoToPrevious,
|
|
88
87
|
label: previousLabel
|
|
89
88
|
};
|
|
90
|
-
const PreviousIconButton =
|
|
89
|
+
const PreviousIconButton = slots?.previousIconButton ?? PickersArrowSwitcherButton;
|
|
91
90
|
const previousIconButtonProps = useSlotProps({
|
|
92
91
|
elementType: PreviousIconButton,
|
|
93
|
-
externalSlotProps: slotProps
|
|
92
|
+
externalSlotProps: slotProps?.previousIconButton,
|
|
94
93
|
additionalProps: {
|
|
95
94
|
size: 'medium',
|
|
96
95
|
title: previousProps.label,
|
|
@@ -104,10 +103,10 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
|
|
|
104
103
|
}),
|
|
105
104
|
className: classes.button
|
|
106
105
|
});
|
|
107
|
-
const NextIconButton =
|
|
106
|
+
const NextIconButton = slots?.nextIconButton ?? PickersArrowSwitcherButton;
|
|
108
107
|
const nextIconButtonProps = useSlotProps({
|
|
109
108
|
elementType: NextIconButton,
|
|
110
|
-
externalSlotProps: slotProps
|
|
109
|
+
externalSlotProps: slotProps?.nextIconButton,
|
|
111
110
|
additionalProps: {
|
|
112
111
|
size: 'medium',
|
|
113
112
|
title: nextProps.label,
|
|
@@ -121,22 +120,22 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
|
|
|
121
120
|
}),
|
|
122
121
|
className: classes.button
|
|
123
122
|
});
|
|
124
|
-
const LeftArrowIcon =
|
|
123
|
+
const LeftArrowIcon = slots?.leftArrowIcon ?? ArrowLeftIcon;
|
|
125
124
|
// The spread is here to avoid this bug mui/material-ui#34056
|
|
126
125
|
const _useSlotProps = useSlotProps({
|
|
127
126
|
elementType: LeftArrowIcon,
|
|
128
|
-
externalSlotProps: slotProps
|
|
127
|
+
externalSlotProps: slotProps?.leftArrowIcon,
|
|
129
128
|
additionalProps: {
|
|
130
129
|
fontSize: 'inherit'
|
|
131
130
|
},
|
|
132
131
|
ownerState: undefined
|
|
133
132
|
}),
|
|
134
133
|
leftArrowIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
|
|
135
|
-
const RightArrowIcon =
|
|
134
|
+
const RightArrowIcon = slots?.rightArrowIcon ?? ArrowRightIcon;
|
|
136
135
|
// The spread is here to avoid this bug mui/material-ui#34056
|
|
137
136
|
const _useSlotProps2 = useSlotProps({
|
|
138
137
|
elementType: RightArrowIcon,
|
|
139
|
-
externalSlotProps: slotProps
|
|
138
|
+
externalSlotProps: slotProps?.rightArrowIcon,
|
|
140
139
|
additionalProps: {
|
|
141
140
|
fontSize: 'inherit'
|
|
142
141
|
},
|
|
@@ -21,7 +21,6 @@ const PickersModalDialogContent = styled(DialogContent)({
|
|
|
21
21
|
}
|
|
22
22
|
});
|
|
23
23
|
export function PickersModalDialog(props) {
|
|
24
|
-
var _slots$dialog, _slots$mobileTransiti;
|
|
25
24
|
const {
|
|
26
25
|
children,
|
|
27
26
|
onDismiss,
|
|
@@ -29,16 +28,16 @@ export function PickersModalDialog(props) {
|
|
|
29
28
|
slots,
|
|
30
29
|
slotProps
|
|
31
30
|
} = props;
|
|
32
|
-
const Dialog =
|
|
33
|
-
const Transition =
|
|
31
|
+
const Dialog = slots?.dialog ?? PickersModalDialogRoot;
|
|
32
|
+
const Transition = slots?.mobileTransition ?? Fade;
|
|
34
33
|
return /*#__PURE__*/_jsx(Dialog, _extends({
|
|
35
34
|
open: open,
|
|
36
35
|
onClose: onDismiss
|
|
37
|
-
}, slotProps
|
|
36
|
+
}, slotProps?.dialog, {
|
|
38
37
|
TransitionComponent: Transition,
|
|
39
|
-
TransitionProps: slotProps
|
|
40
|
-
PaperComponent: slots
|
|
41
|
-
PaperProps: slotProps
|
|
38
|
+
TransitionProps: slotProps?.mobileTransition,
|
|
39
|
+
PaperComponent: slots?.mobilePaper,
|
|
40
|
+
PaperProps: slotProps?.mobilePaper,
|
|
42
41
|
children: /*#__PURE__*/_jsx(PickersModalDialogContent, {
|
|
43
42
|
children: children
|
|
44
43
|
})
|
|
@@ -146,7 +146,7 @@ function useClickAwayListener(active, onClickAway) {
|
|
|
146
146
|
// TODO This behavior is not tested automatically
|
|
147
147
|
// It's unclear whether this is due to different update semantics in test (batched in act() vs discrete on click).
|
|
148
148
|
// Or if this is a timing related issues due to different Transition components
|
|
149
|
-
// Once we get rid of all the manual scheduling (
|
|
149
|
+
// Once we get rid of all the manual scheduling (for example setTimeout(update, 0)) we can revisit this code+test.
|
|
150
150
|
if (active) {
|
|
151
151
|
const doc = ownerDocument(nodeRef.current);
|
|
152
152
|
doc.addEventListener('click', handleClickAway);
|
|
@@ -190,21 +190,18 @@ const PickersPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) =>
|
|
|
190
190
|
});
|
|
191
191
|
return /*#__PURE__*/_jsx(PaperComponent, _extends({}, other, paperProps, {
|
|
192
192
|
onClick: event => {
|
|
193
|
-
var _paperProps$onClick;
|
|
194
193
|
onPaperClick(event);
|
|
195
|
-
|
|
194
|
+
paperProps.onClick?.(event);
|
|
196
195
|
},
|
|
197
196
|
onTouchStart: event => {
|
|
198
|
-
var _paperProps$onTouchSt;
|
|
199
197
|
onPaperTouchStart(event);
|
|
200
|
-
|
|
198
|
+
paperProps.onTouchStart?.(event);
|
|
201
199
|
},
|
|
202
200
|
ownerState: ownerState,
|
|
203
201
|
children: children
|
|
204
202
|
}));
|
|
205
203
|
});
|
|
206
204
|
export function PickersPopper(inProps) {
|
|
207
|
-
var _slots$desktopTransit, _slots$desktopTrapFoc, _slots$desktopPaper, _slots$popper;
|
|
208
205
|
const props = useThemeProps({
|
|
209
206
|
props: inProps,
|
|
210
207
|
name: 'MuiPickersPopper'
|
|
@@ -251,14 +248,14 @@ export function PickersPopper(inProps) {
|
|
|
251
248
|
});
|
|
252
249
|
}
|
|
253
250
|
}, [open, role, shouldRestoreFocus]);
|
|
254
|
-
const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, onBlur
|
|
251
|
+
const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, onBlur ?? onDismiss);
|
|
255
252
|
const paperRef = React.useRef(null);
|
|
256
253
|
const handleRef = useForkRef(paperRef, containerRef);
|
|
257
254
|
const handlePaperRef = useForkRef(handleRef, clickAwayRef);
|
|
258
255
|
const ownerState = props;
|
|
259
256
|
const classes = useUtilityClasses(ownerState);
|
|
260
257
|
const defaultReduceAnimations = useDefaultReduceAnimations();
|
|
261
|
-
const reduceAnimations = inReduceAnimations
|
|
258
|
+
const reduceAnimations = inReduceAnimations ?? defaultReduceAnimations;
|
|
262
259
|
const handleKeyDown = event => {
|
|
263
260
|
if (event.key === 'Escape') {
|
|
264
261
|
// stop the propagation to avoid closing parent modal
|
|
@@ -266,13 +263,13 @@ export function PickersPopper(inProps) {
|
|
|
266
263
|
onDismiss();
|
|
267
264
|
}
|
|
268
265
|
};
|
|
269
|
-
const Transition =
|
|
270
|
-
const FocusTrap =
|
|
271
|
-
const Paper =
|
|
272
|
-
const Popper =
|
|
266
|
+
const Transition = slots?.desktopTransition ?? reduceAnimations ? Fade : Grow;
|
|
267
|
+
const FocusTrap = slots?.desktopTrapFocus ?? BaseFocusTrap;
|
|
268
|
+
const Paper = slots?.desktopPaper ?? PickersPopperPaper;
|
|
269
|
+
const Popper = slots?.popper ?? PickersPopperRoot;
|
|
273
270
|
const popperProps = useSlotProps({
|
|
274
271
|
elementType: Popper,
|
|
275
|
-
externalSlotProps: slotProps
|
|
272
|
+
externalSlotProps: slotProps?.popper,
|
|
276
273
|
additionalProps: {
|
|
277
274
|
transition: true,
|
|
278
275
|
role,
|
|
@@ -298,8 +295,8 @@ export function PickersPopper(inProps) {
|
|
|
298
295
|
disableRestoreFocus: true,
|
|
299
296
|
disableEnforceFocus: role === 'tooltip',
|
|
300
297
|
isEnabled: () => true
|
|
301
|
-
}, slotProps
|
|
302
|
-
children: /*#__PURE__*/_jsx(Transition, _extends({}, TransitionProps, slotProps
|
|
298
|
+
}, slotProps?.desktopTrapFocus, {
|
|
299
|
+
children: /*#__PURE__*/_jsx(Transition, _extends({}, TransitionProps, slotProps?.desktopTransition, {
|
|
303
300
|
children: /*#__PURE__*/_jsx(PickersPopperPaperWrapper, {
|
|
304
301
|
PaperComponent: Paper,
|
|
305
302
|
ownerState: ownerState,
|
|
@@ -308,7 +305,7 @@ export function PickersPopper(inProps) {
|
|
|
308
305
|
onPaperClick: onPaperClick,
|
|
309
306
|
onPaperTouchStart: onPaperTouchStart,
|
|
310
307
|
paperClasses: classes.paper,
|
|
311
|
-
paperSlotProps: slotProps
|
|
308
|
+
paperSlotProps: slotProps?.desktopPaper,
|
|
312
309
|
children: children
|
|
313
310
|
})
|
|
314
311
|
}))
|
|
@@ -47,18 +47,15 @@ const PickersToolbarContent = styled('div', {
|
|
|
47
47
|
overridesResolver: (props, styles) => styles.content
|
|
48
48
|
})(({
|
|
49
49
|
ownerState
|
|
50
|
-
}) => {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
alignItems: ownerState.isLandscape ? 'flex-start' : 'center'
|
|
60
|
-
};
|
|
61
|
-
});
|
|
50
|
+
}) => ({
|
|
51
|
+
display: 'flex',
|
|
52
|
+
flexWrap: 'wrap',
|
|
53
|
+
width: '100%',
|
|
54
|
+
justifyContent: ownerState.isLandscape ? 'flex-start' : 'space-between',
|
|
55
|
+
flexDirection: ownerState.isLandscape ? ownerState.landscapeDirection ?? 'column' : 'row',
|
|
56
|
+
flex: 1,
|
|
57
|
+
alignItems: ownerState.isLandscape ? 'flex-start' : 'center'
|
|
58
|
+
}));
|
|
62
59
|
export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersToolbar(inProps, ref) {
|
|
63
60
|
const props = useThemeProps({
|
|
64
61
|
props: inProps,
|
|
@@ -30,7 +30,7 @@ export function useMeridiemMode(date, ampm, onChange, selectionState) {
|
|
|
30
30
|
const meridiemMode = getMeridiem(date, utils);
|
|
31
31
|
const handleMeridiemChange = React.useCallback(mode => {
|
|
32
32
|
const timeWithMeridiem = date == null ? null : convertToMeridiem(date, mode, Boolean(ampm), utils);
|
|
33
|
-
onChange(timeWithMeridiem, selectionState
|
|
33
|
+
onChange(timeWithMeridiem, selectionState ?? 'partial');
|
|
34
34
|
}, [ampm, date, onChange, selectionState, utils]);
|
|
35
35
|
return {
|
|
36
36
|
meridiemMode,
|
|
@@ -2,42 +2,39 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
import { applyDefaultDate } from '../utils/date-utils';
|
|
3
3
|
import { useUtils, useDefaultDates } from './useUtils';
|
|
4
4
|
export const useDefaultizedDateField = props => {
|
|
5
|
-
var _props$disablePast, _props$disableFuture, _props$format;
|
|
6
5
|
const utils = useUtils();
|
|
7
6
|
const defaultDates = useDefaultDates();
|
|
8
7
|
return _extends({}, props, {
|
|
9
|
-
disablePast:
|
|
10
|
-
disableFuture:
|
|
11
|
-
format:
|
|
8
|
+
disablePast: props.disablePast ?? false,
|
|
9
|
+
disableFuture: props.disableFuture ?? false,
|
|
10
|
+
format: props.format ?? utils.formats.keyboardDate,
|
|
12
11
|
minDate: applyDefaultDate(utils, props.minDate, defaultDates.minDate),
|
|
13
12
|
maxDate: applyDefaultDate(utils, props.maxDate, defaultDates.maxDate)
|
|
14
13
|
});
|
|
15
14
|
};
|
|
16
15
|
export const useDefaultizedTimeField = props => {
|
|
17
|
-
var _props$ampm, _props$disablePast2, _props$disableFuture2, _props$format2;
|
|
18
16
|
const utils = useUtils();
|
|
19
|
-
const ampm =
|
|
17
|
+
const ampm = props.ampm ?? utils.is12HourCycleInCurrentLocale();
|
|
20
18
|
const defaultFormat = ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h;
|
|
21
19
|
return _extends({}, props, {
|
|
22
|
-
disablePast:
|
|
23
|
-
disableFuture:
|
|
24
|
-
format:
|
|
20
|
+
disablePast: props.disablePast ?? false,
|
|
21
|
+
disableFuture: props.disableFuture ?? false,
|
|
22
|
+
format: props.format ?? defaultFormat
|
|
25
23
|
});
|
|
26
24
|
};
|
|
27
25
|
export const useDefaultizedDateTimeField = props => {
|
|
28
|
-
var _props$ampm2, _props$disablePast3, _props$disableFuture3, _props$format3, _props$minDateTime, _props$maxDateTime, _props$minDateTime2, _props$maxDateTime2;
|
|
29
26
|
const utils = useUtils();
|
|
30
27
|
const defaultDates = useDefaultDates();
|
|
31
|
-
const ampm =
|
|
28
|
+
const ampm = props.ampm ?? utils.is12HourCycleInCurrentLocale();
|
|
32
29
|
const defaultFormat = ampm ? utils.formats.keyboardDateTime12h : utils.formats.keyboardDateTime24h;
|
|
33
30
|
return _extends({}, props, {
|
|
34
|
-
disablePast:
|
|
35
|
-
disableFuture:
|
|
36
|
-
format:
|
|
31
|
+
disablePast: props.disablePast ?? false,
|
|
32
|
+
disableFuture: props.disableFuture ?? false,
|
|
33
|
+
format: props.format ?? defaultFormat,
|
|
37
34
|
disableIgnoringDatePartForTimeValidation: Boolean(props.minDateTime || props.maxDateTime),
|
|
38
|
-
minDate: applyDefaultDate(utils,
|
|
39
|
-
maxDate: applyDefaultDate(utils,
|
|
40
|
-
minTime:
|
|
41
|
-
maxTime:
|
|
35
|
+
minDate: applyDefaultDate(utils, props.minDateTime ?? props.minDate, defaultDates.minDate),
|
|
36
|
+
maxDate: applyDefaultDate(utils, props.maxDateTime ?? props.maxDate, defaultDates.maxDate),
|
|
37
|
+
minTime: props.minDateTime ?? props.minTime,
|
|
38
|
+
maxTime: props.maxDateTime ?? props.maxTime
|
|
42
39
|
});
|
|
43
40
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { useDesktopPicker } from './useDesktopPicker';
|
|
2
|
-
export type { UseDesktopPickerSlots, UseDesktopPickerSlotProps, ExportedUseDesktopPickerSlotProps, DesktopOnlyPickerProps, } from './useDesktopPicker.types';
|
|
2
|
+
export type { UseDesktopPickerSlots, UseDesktopPickerSlotProps, ExportedUseDesktopPickerSlotProps, DesktopOnlyPickerProps, UseDesktopPickerProps, } from './useDesktopPicker.types';
|
|
@@ -23,7 +23,6 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
23
23
|
* - DesktopTimePicker
|
|
24
24
|
*/
|
|
25
25
|
export const useDesktopPicker = _ref => {
|
|
26
|
-
var _innerSlotProps$toolb, _innerSlotProps$toolb2, _slots$inputAdornment, _slots$openPickerButt, _slots$layout;
|
|
27
26
|
let {
|
|
28
27
|
props,
|
|
29
28
|
getOpenDialogAriaText
|
|
@@ -53,7 +52,7 @@ export const useDesktopPicker = _ref => {
|
|
|
53
52
|
const containerRef = React.useRef(null);
|
|
54
53
|
const fieldRef = React.useRef(null);
|
|
55
54
|
const labelId = useId();
|
|
56
|
-
const isToolbarHidden =
|
|
55
|
+
const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
|
|
57
56
|
const {
|
|
58
57
|
open,
|
|
59
58
|
actions,
|
|
@@ -69,20 +68,20 @@ export const useDesktopPicker = _ref => {
|
|
|
69
68
|
additionalViewProps: {},
|
|
70
69
|
wrapperVariant: 'desktop'
|
|
71
70
|
}));
|
|
72
|
-
const InputAdornment =
|
|
71
|
+
const InputAdornment = slots.inputAdornment ?? MuiInputAdornment;
|
|
73
72
|
const _useSlotProps = useSlotProps({
|
|
74
73
|
elementType: InputAdornment,
|
|
75
|
-
externalSlotProps: innerSlotProps
|
|
74
|
+
externalSlotProps: innerSlotProps?.inputAdornment,
|
|
76
75
|
additionalProps: {
|
|
77
76
|
position: 'end'
|
|
78
77
|
},
|
|
79
78
|
ownerState: props
|
|
80
79
|
}),
|
|
81
80
|
inputAdornmentProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
|
|
82
|
-
const OpenPickerButton =
|
|
81
|
+
const OpenPickerButton = slots.openPickerButton ?? IconButton;
|
|
83
82
|
const _useSlotProps2 = useSlotProps({
|
|
84
83
|
elementType: OpenPickerButton,
|
|
85
|
-
externalSlotProps: innerSlotProps
|
|
84
|
+
externalSlotProps: innerSlotProps?.openPickerButton,
|
|
86
85
|
additionalProps: {
|
|
87
86
|
disabled: disabled || readOnly,
|
|
88
87
|
onClick: open ? actions.onClose : actions.onOpen,
|
|
@@ -96,7 +95,7 @@ export const useDesktopPicker = _ref => {
|
|
|
96
95
|
const Field = slots.field;
|
|
97
96
|
const fieldProps = useSlotProps({
|
|
98
97
|
elementType: Field,
|
|
99
|
-
externalSlotProps: innerSlotProps
|
|
98
|
+
externalSlotProps: innerSlotProps?.field,
|
|
100
99
|
additionalProps: _extends({}, pickerFieldProps, isToolbarHidden && {
|
|
101
100
|
id: labelId
|
|
102
101
|
}, {
|
|
@@ -126,7 +125,7 @@ export const useDesktopPicker = _ref => {
|
|
|
126
125
|
ref: containerRef,
|
|
127
126
|
[`${inputAdornmentProps.position}Adornment`]: /*#__PURE__*/_jsx(InputAdornment, _extends({}, inputAdornmentProps, {
|
|
128
127
|
children: /*#__PURE__*/_jsx(OpenPickerButton, _extends({}, openPickerButtonProps, {
|
|
129
|
-
children: /*#__PURE__*/_jsx(OpenPickerIcon, _extends({}, innerSlotProps
|
|
128
|
+
children: /*#__PURE__*/_jsx(OpenPickerIcon, _extends({}, innerSlotProps?.openPickerIcon))
|
|
130
129
|
}))
|
|
131
130
|
}))
|
|
132
131
|
});
|
|
@@ -136,7 +135,7 @@ export const useDesktopPicker = _ref => {
|
|
|
136
135
|
clearIcon: slots.clearIcon,
|
|
137
136
|
clearButton: slots.clearButton
|
|
138
137
|
}, fieldProps.slots);
|
|
139
|
-
const Layout =
|
|
138
|
+
const Layout = slots.layout ?? PickersLayout;
|
|
140
139
|
let labelledById = labelId;
|
|
141
140
|
if (isToolbarHidden) {
|
|
142
141
|
if (label) {
|
|
@@ -146,12 +145,12 @@ export const useDesktopPicker = _ref => {
|
|
|
146
145
|
}
|
|
147
146
|
}
|
|
148
147
|
const slotProps = _extends({}, innerSlotProps, {
|
|
149
|
-
toolbar: _extends({}, innerSlotProps
|
|
148
|
+
toolbar: _extends({}, innerSlotProps?.toolbar, {
|
|
150
149
|
titleId: labelId
|
|
151
150
|
}),
|
|
152
151
|
popper: _extends({
|
|
153
152
|
'aria-labelledby': labelledById
|
|
154
|
-
}, innerSlotProps
|
|
153
|
+
}, innerSlotProps?.popper)
|
|
155
154
|
});
|
|
156
155
|
const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
|
|
157
156
|
const renderPicker = () => /*#__PURE__*/_jsxs(LocalizationProvider, {
|
|
@@ -170,7 +169,7 @@ export const useDesktopPicker = _ref => {
|
|
|
170
169
|
slotProps: slotProps,
|
|
171
170
|
shouldRestoreFocus: shouldRestoreFocus,
|
|
172
171
|
reduceAnimations: reduceAnimations,
|
|
173
|
-
children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps
|
|
172
|
+
children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
|
|
174
173
|
slots: slots,
|
|
175
174
|
slotProps: slotProps,
|
|
176
175
|
children: renderCurrentView()
|
|
@@ -54,7 +54,7 @@ export interface DesktopOnlyPickerProps extends BaseNonStaticPickerProps, BaseNo
|
|
|
54
54
|
*/
|
|
55
55
|
autoFocus?: boolean;
|
|
56
56
|
}
|
|
57
|
-
export interface UseDesktopPickerProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<
|
|
57
|
+
export interface UseDesktopPickerProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<TDate | null, TDate, TView, any, {}>> extends BasePickerProps<TDate | null, TDate, TView, TError, TExternalProps, {}>, DesktopOnlyPickerProps {
|
|
58
58
|
/**
|
|
59
59
|
* Overridable component slots.
|
|
60
60
|
* @default {}
|
|
@@ -66,7 +66,7 @@ export interface UseDesktopPickerProps<TDate extends PickerValidDate, TView exte
|
|
|
66
66
|
*/
|
|
67
67
|
slotProps?: UseDesktopPickerSlotProps<TDate, TView, TEnableAccessibleFieldDOMStructure>;
|
|
68
68
|
}
|
|
69
|
-
export interface UseDesktopPickerParams<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
|
|
69
|
+
export interface UseDesktopPickerParams<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor'> {
|
|
70
70
|
props: TExternalProps;
|
|
71
71
|
getOpenDialogAriaText: (date: TDate | null, utils: MuiPickersAdapter<TDate>) => string;
|
|
72
72
|
}
|