@mui/x-date-pickers 8.5.3 → 8.6.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/CHANGELOG.md +107 -0
- package/DateCalendar/DateCalendar.js +16 -16
- package/DateCalendar/DayCalendar.js +48 -48
- package/DateCalendar/useCalendarState.js +25 -25
- package/DateCalendar/useIsDateDisabled.js +2 -2
- package/DatePicker/DatePickerToolbar.js +7 -9
- package/DateTimeField/DateTimeField.js +1 -1
- package/DateTimePicker/DateTimePicker.js +1 -1
- package/DateTimePicker/DateTimePickerToolbar.js +12 -13
- package/DateTimePicker/shared.js +3 -3
- package/DesktopDatePicker/DesktopDatePicker.js +3 -3
- package/DesktopDateTimePicker/DesktopDateTimePicker.js +4 -4
- package/DesktopTimePicker/DesktopTimePicker.js +4 -4
- package/DigitalClock/DigitalClock.d.ts +1 -1
- package/DigitalClock/DigitalClock.js +16 -16
- package/LocalizationProvider/LocalizationProvider.d.ts +9 -3
- package/LocalizationProvider/LocalizationProvider.js +28 -19
- package/MobileDatePicker/MobileDatePicker.js +3 -3
- package/MobileDateTimePicker/MobileDateTimePicker.js +4 -4
- package/MobileTimePicker/MobileTimePicker.js +4 -4
- package/MonthCalendar/MonthCalendar.js +19 -18
- package/MultiSectionDigitalClock/MultiSectionDigitalClock.js +32 -32
- package/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.d.ts +4 -4
- package/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js +7 -7
- package/PickerDay2/PickerDay2.js +3 -3
- package/PickersActionBar/PickersActionBar.d.ts +2 -2
- package/PickersActionBar/PickersActionBar.js +2 -2
- package/PickersCalendarHeader/PickersCalendarHeader.js +7 -8
- package/PickersDay/PickersDay.js +3 -3
- package/PickersDay/usePickerDayOwnerState.js +5 -5
- package/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
- package/StaticTimePicker/StaticTimePicker.js +1 -1
- package/TimeClock/Clock.js +8 -9
- package/TimeClock/ClockNumbers.d.ts +3 -3
- package/TimeClock/ClockNumbers.js +5 -5
- package/TimeClock/TimeClock.js +29 -29
- package/TimeField/TimeField.js +1 -1
- package/TimePicker/TimePicker.js +1 -1
- package/TimePicker/TimePickerToolbar.js +7 -9
- package/TimePicker/shared.js +3 -3
- package/YearCalendar/YearCalendar.js +19 -18
- package/esm/DateCalendar/DateCalendar.js +16 -16
- package/esm/DateCalendar/DayCalendar.js +48 -48
- package/esm/DateCalendar/useCalendarState.js +25 -25
- package/esm/DateCalendar/useIsDateDisabled.js +2 -2
- package/esm/DatePicker/DatePickerToolbar.js +6 -8
- package/esm/DateTimeField/DateTimeField.js +1 -1
- package/esm/DateTimePicker/DateTimePicker.js +1 -1
- package/esm/DateTimePicker/DateTimePickerToolbar.js +11 -12
- package/esm/DateTimePicker/shared.js +3 -3
- package/esm/DesktopDatePicker/DesktopDatePicker.js +3 -3
- package/esm/DesktopDateTimePicker/DesktopDateTimePicker.js +4 -4
- package/esm/DesktopTimePicker/DesktopTimePicker.js +4 -4
- package/esm/DigitalClock/DigitalClock.d.ts +1 -1
- package/esm/DigitalClock/DigitalClock.js +16 -16
- package/esm/LocalizationProvider/LocalizationProvider.d.ts +9 -3
- package/esm/LocalizationProvider/LocalizationProvider.js +27 -18
- package/esm/MobileDatePicker/MobileDatePicker.js +3 -3
- package/esm/MobileDateTimePicker/MobileDateTimePicker.js +4 -4
- package/esm/MobileTimePicker/MobileTimePicker.js +4 -4
- package/esm/MonthCalendar/MonthCalendar.js +20 -19
- package/esm/MultiSectionDigitalClock/MultiSectionDigitalClock.js +32 -32
- package/esm/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.d.ts +4 -4
- package/esm/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js +7 -7
- package/esm/PickerDay2/PickerDay2.js +3 -3
- package/esm/PickersActionBar/PickersActionBar.d.ts +2 -2
- package/esm/PickersActionBar/PickersActionBar.js +2 -2
- package/esm/PickersCalendarHeader/PickersCalendarHeader.js +6 -7
- package/esm/PickersDay/PickersDay.js +3 -3
- package/esm/PickersDay/usePickerDayOwnerState.js +5 -5
- package/esm/StaticDateTimePicker/StaticDateTimePicker.js +1 -1
- package/esm/StaticTimePicker/StaticTimePicker.js +1 -1
- package/esm/TimeClock/Clock.js +7 -8
- package/esm/TimeClock/ClockNumbers.d.ts +3 -3
- package/esm/TimeClock/ClockNumbers.js +5 -5
- package/esm/TimeClock/TimeClock.js +29 -29
- package/esm/TimeField/TimeField.js +1 -1
- package/esm/TimePicker/TimePicker.js +1 -1
- package/esm/TimePicker/TimePickerToolbar.js +6 -8
- package/esm/TimePicker/shared.js +3 -3
- package/esm/YearCalendar/YearCalendar.js +20 -19
- package/esm/hooks/index.d.ts +2 -1
- package/esm/hooks/index.js +2 -1
- package/esm/hooks/useParsedFormat.js +6 -6
- package/esm/hooks/usePickerAdapter.d.ts +7 -0
- package/esm/hooks/usePickerAdapter.js +20 -0
- package/esm/hooks/usePickerTranslations.js +1 -1
- package/esm/index.js +1 -1
- package/esm/internals/components/pickersToolbarClasses.d.ts +1 -1
- package/esm/internals/demo/DemoContainer.d.ts +2 -3
- package/esm/internals/demo/DemoContainer.js +3 -2
- package/esm/internals/hooks/date-helpers-hooks.js +16 -16
- package/esm/internals/hooks/useClockReferenceDate.d.ts +2 -2
- package/esm/internals/hooks/useClockReferenceDate.js +3 -3
- package/esm/internals/hooks/useControlledValue.js +8 -7
- package/esm/internals/hooks/useField/buildSectionsFromFormat.d.ts +1 -1
- package/esm/internals/hooks/useField/buildSectionsFromFormat.js +17 -17
- package/esm/internals/hooks/useField/useField.types.d.ts +2 -2
- package/esm/internals/hooks/useField/useField.utils.d.ts +10 -10
- package/esm/internals/hooks/useField/useField.utils.js +69 -69
- package/esm/internals/hooks/useField/useFieldCharacterEditing.js +11 -11
- package/esm/internals/hooks/useField/useFieldRootHandleKeyDown.js +7 -7
- package/esm/internals/hooks/useField/useFieldSectionContentProps.js +15 -16
- package/esm/internals/hooks/useField/useFieldState.js +22 -24
- package/esm/internals/hooks/usePicker/hooks/useValueAndOpenStates.js +6 -6
- package/esm/internals/hooks/usePicker/usePicker.js +5 -6
- package/esm/internals/hooks/useUtils.d.ts +1 -8
- package/esm/internals/hooks/useUtils.js +3 -19
- package/esm/internals/index.d.ts +2 -1
- package/esm/internals/index.js +2 -1
- package/esm/internals/models/manager.d.ts +14 -14
- package/esm/internals/models/props/time.d.ts +1 -1
- package/esm/internals/utils/date-time-utils.d.ts +1 -1
- package/esm/internals/utils/date-time-utils.js +5 -5
- package/esm/internals/utils/date-utils.d.ts +11 -11
- package/esm/internals/utils/date-utils.js +34 -34
- package/esm/internals/utils/getDefaultReferenceDate.d.ts +2 -2
- package/esm/internals/utils/getDefaultReferenceDate.js +16 -16
- package/esm/internals/utils/time-utils.d.ts +5 -5
- package/esm/internals/utils/time-utils.js +12 -12
- package/esm/internals/utils/valueManagers.js +4 -4
- package/esm/managers/useDateManager.js +12 -12
- package/esm/managers/useDateTimeManager.js +13 -13
- package/esm/managers/useTimeManager.js +9 -10
- package/esm/validation/useValidation.d.ts +2 -3
- package/esm/validation/useValidation.js +2 -2
- package/esm/validation/validateDate.js +6 -6
- package/esm/validation/validateTime.js +6 -6
- package/hooks/index.d.ts +2 -1
- package/hooks/index.js +8 -1
- package/hooks/useParsedFormat.js +6 -6
- package/hooks/usePickerAdapter.d.ts +7 -0
- package/hooks/usePickerAdapter.js +29 -0
- package/hooks/usePickerTranslations.js +2 -2
- package/index.js +1 -1
- package/internals/components/pickersToolbarClasses.d.ts +1 -1
- package/internals/demo/DemoContainer.d.ts +2 -3
- package/internals/demo/DemoContainer.js +3 -2
- package/internals/hooks/date-helpers-hooks.js +16 -16
- package/internals/hooks/useClockReferenceDate.d.ts +2 -2
- package/internals/hooks/useClockReferenceDate.js +3 -3
- package/internals/hooks/useControlledValue.js +7 -7
- package/internals/hooks/useField/buildSectionsFromFormat.d.ts +1 -1
- package/internals/hooks/useField/buildSectionsFromFormat.js +17 -17
- package/internals/hooks/useField/useField.types.d.ts +2 -2
- package/internals/hooks/useField/useField.utils.d.ts +10 -10
- package/internals/hooks/useField/useField.utils.js +69 -69
- package/internals/hooks/useField/useFieldCharacterEditing.js +11 -11
- package/internals/hooks/useField/useFieldRootHandleKeyDown.js +7 -7
- package/internals/hooks/useField/useFieldSectionContentProps.js +14 -15
- package/internals/hooks/useField/useFieldState.js +23 -25
- package/internals/hooks/usePicker/hooks/useValueAndOpenStates.js +6 -6
- package/internals/hooks/usePicker/usePicker.js +5 -6
- package/internals/hooks/useUtils.d.ts +1 -8
- package/internals/hooks/useUtils.js +5 -24
- package/internals/index.d.ts +2 -1
- package/internals/index.js +2 -7
- package/internals/models/manager.d.ts +14 -14
- package/internals/models/props/time.d.ts +1 -1
- package/internals/utils/date-time-utils.d.ts +1 -1
- package/internals/utils/date-time-utils.js +5 -5
- package/internals/utils/date-utils.d.ts +11 -11
- package/internals/utils/date-utils.js +34 -34
- package/internals/utils/getDefaultReferenceDate.d.ts +2 -2
- package/internals/utils/getDefaultReferenceDate.js +16 -16
- package/internals/utils/time-utils.d.ts +5 -5
- package/internals/utils/time-utils.js +12 -12
- package/internals/utils/valueManagers.js +4 -4
- package/managers/useDateManager.js +12 -12
- package/managers/useDateTimeManager.js +13 -13
- package/managers/useTimeManager.js +10 -11
- package/package.json +2 -2
- package/validation/useValidation.d.ts +2 -3
- package/validation/useValidation.js +2 -2
- package/validation/validateDate.js +6 -6
- package/validation/validateTime.js +6 -6
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { PickersAdapterContextValue } from "../LocalizationProvider/LocalizationProvider.js";
|
|
2
|
+
import { PickersLocaleText } from "../locales/utils/pickersLocaleTextApi.js";
|
|
3
|
+
export declare const useLocalizationContext: () => UseLocalizationContextReturnValue;
|
|
4
|
+
export interface UseLocalizationContextReturnValue extends Omit<PickersAdapterContextValue, 'localeText'> {
|
|
5
|
+
localeText: PickersLocaleText;
|
|
6
|
+
}
|
|
7
|
+
export declare const usePickerAdapter: () => import("@mui/x-date-pickers/models").MuiPickersAdapter<any>;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
|
7
|
+
value: true
|
|
8
|
+
});
|
|
9
|
+
exports.usePickerAdapter = exports.useLocalizationContext = void 0;
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
var React = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _enUS = require("../locales/enUS");
|
|
13
|
+
var _LocalizationProvider = require("../LocalizationProvider/LocalizationProvider");
|
|
14
|
+
const useLocalizationContext = () => {
|
|
15
|
+
const localization = React.useContext(_LocalizationProvider.PickerAdapterContext);
|
|
16
|
+
if (localization === null) {
|
|
17
|
+
throw new Error(['MUI X: Can not find the date and time pickers localization context.', 'It looks like you forgot to wrap your component in LocalizationProvider.', 'This can also happen if you are bundling multiple versions of the `@mui/x-date-pickers` package'].join('\n'));
|
|
18
|
+
}
|
|
19
|
+
if (localization.adapter === null) {
|
|
20
|
+
throw new Error(['MUI X: Can not find the date and time pickers adapter from its localization context.', 'It looks like you forgot to pass a `dateAdapter` to your LocalizationProvider.'].join('\n'));
|
|
21
|
+
}
|
|
22
|
+
const localeText = React.useMemo(() => (0, _extends2.default)({}, _enUS.DEFAULT_LOCALE, localization.localeText), [localization.localeText]);
|
|
23
|
+
return React.useMemo(() => (0, _extends2.default)({}, localization, {
|
|
24
|
+
localeText
|
|
25
|
+
}), [localization, localeText]);
|
|
26
|
+
};
|
|
27
|
+
exports.useLocalizationContext = useLocalizationContext;
|
|
28
|
+
const usePickerAdapter = () => useLocalizationContext().adapter;
|
|
29
|
+
exports.usePickerAdapter = usePickerAdapter;
|
|
@@ -5,6 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.usePickerTranslations = void 0;
|
|
8
|
-
var
|
|
9
|
-
const usePickerTranslations = () => (0,
|
|
8
|
+
var _usePickerAdapter = require("./usePickerAdapter");
|
|
9
|
+
const usePickerTranslations = () => (0, _usePickerAdapter.useLocalizationContext)().localeText;
|
|
10
10
|
exports.usePickerTranslations = usePickerTranslations;
|
package/index.js
CHANGED
|
@@ -8,4 +8,4 @@ export interface PickersToolbarClasses {
|
|
|
8
8
|
}
|
|
9
9
|
export type PickersToolbarClassKey = keyof PickersToolbarClasses;
|
|
10
10
|
export declare function getPickersToolbarUtilityClass(slot: string): string;
|
|
11
|
-
export declare const pickersToolbarClasses: Record<"root" | "
|
|
11
|
+
export declare const pickersToolbarClasses: Record<"root" | "title" | "content", string>;
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { StackProps } from '@mui/material/Stack';
|
|
2
3
|
import { SxProps, Theme } from '@mui/material/styles';
|
|
3
4
|
interface DemoGridProps {
|
|
4
5
|
children: React.ReactNode;
|
|
5
6
|
components: string[];
|
|
6
7
|
sx?: SxProps<Theme>;
|
|
7
8
|
}
|
|
8
|
-
interface DemoItemProps {
|
|
9
|
+
interface DemoItemProps extends Omit<StackProps, 'component'> {
|
|
9
10
|
label?: React.ReactNode;
|
|
10
11
|
component?: string;
|
|
11
|
-
children: React.ReactNode;
|
|
12
|
-
sx?: SxProps<Theme>;
|
|
13
12
|
}
|
|
14
13
|
/**
|
|
15
14
|
* WARNING: This is an internal component used in documentation to achieve a desired layout.
|
|
@@ -50,7 +50,8 @@ function DemoItem(props) {
|
|
|
50
50
|
label,
|
|
51
51
|
children,
|
|
52
52
|
component,
|
|
53
|
-
sx: sxProp
|
|
53
|
+
sx: sxProp,
|
|
54
|
+
alignItems = 'stretch'
|
|
54
55
|
} = props;
|
|
55
56
|
let spacing;
|
|
56
57
|
let sx = sxProp;
|
|
@@ -66,7 +67,7 @@ function DemoItem(props) {
|
|
|
66
67
|
}
|
|
67
68
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Stack.default, {
|
|
68
69
|
direction: "column",
|
|
69
|
-
alignItems:
|
|
70
|
+
alignItems: alignItems,
|
|
70
71
|
spacing: spacing,
|
|
71
72
|
sx: sx,
|
|
72
73
|
children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
|
|
@@ -8,40 +8,40 @@ exports.useMeridiemMode = useMeridiemMode;
|
|
|
8
8
|
exports.useNextMonthDisabled = useNextMonthDisabled;
|
|
9
9
|
exports.usePreviousMonthDisabled = usePreviousMonthDisabled;
|
|
10
10
|
var React = _interopRequireWildcard(require("react"));
|
|
11
|
-
var _useUtils = require("./useUtils");
|
|
12
11
|
var _timeUtils = require("../utils/time-utils");
|
|
12
|
+
var _usePickerAdapter = require("../../hooks/usePickerAdapter");
|
|
13
13
|
function useNextMonthDisabled(month, {
|
|
14
14
|
disableFuture,
|
|
15
15
|
maxDate,
|
|
16
16
|
timezone
|
|
17
17
|
}) {
|
|
18
|
-
const
|
|
18
|
+
const adapter = (0, _usePickerAdapter.usePickerAdapter)();
|
|
19
19
|
return React.useMemo(() => {
|
|
20
|
-
const now =
|
|
21
|
-
const lastEnabledMonth =
|
|
22
|
-
return !
|
|
23
|
-
}, [disableFuture, maxDate, month,
|
|
20
|
+
const now = adapter.date(undefined, timezone);
|
|
21
|
+
const lastEnabledMonth = adapter.startOfMonth(disableFuture && adapter.isBefore(now, maxDate) ? now : maxDate);
|
|
22
|
+
return !adapter.isAfter(lastEnabledMonth, month);
|
|
23
|
+
}, [disableFuture, maxDate, month, adapter, timezone]);
|
|
24
24
|
}
|
|
25
25
|
function usePreviousMonthDisabled(month, {
|
|
26
26
|
disablePast,
|
|
27
27
|
minDate,
|
|
28
28
|
timezone
|
|
29
29
|
}) {
|
|
30
|
-
const
|
|
30
|
+
const adapter = (0, _usePickerAdapter.usePickerAdapter)();
|
|
31
31
|
return React.useMemo(() => {
|
|
32
|
-
const now =
|
|
33
|
-
const firstEnabledMonth =
|
|
34
|
-
return !
|
|
35
|
-
}, [disablePast, minDate, month,
|
|
32
|
+
const now = adapter.date(undefined, timezone);
|
|
33
|
+
const firstEnabledMonth = adapter.startOfMonth(disablePast && adapter.isAfter(now, minDate) ? now : minDate);
|
|
34
|
+
return !adapter.isBefore(firstEnabledMonth, month);
|
|
35
|
+
}, [disablePast, minDate, month, adapter, timezone]);
|
|
36
36
|
}
|
|
37
37
|
function useMeridiemMode(date, ampm, onChange, selectionState) {
|
|
38
|
-
const
|
|
39
|
-
const cleanDate = React.useMemo(() => !
|
|
40
|
-
const meridiemMode = (0, _timeUtils.getMeridiem)(cleanDate,
|
|
38
|
+
const adapter = (0, _usePickerAdapter.usePickerAdapter)();
|
|
39
|
+
const cleanDate = React.useMemo(() => !adapter.isValid(date) ? null : date, [adapter, date]);
|
|
40
|
+
const meridiemMode = (0, _timeUtils.getMeridiem)(cleanDate, adapter);
|
|
41
41
|
const handleMeridiemChange = React.useCallback(mode => {
|
|
42
|
-
const timeWithMeridiem = cleanDate == null ? null : (0, _timeUtils.convertToMeridiem)(cleanDate, mode, Boolean(ampm),
|
|
42
|
+
const timeWithMeridiem = cleanDate == null ? null : (0, _timeUtils.convertToMeridiem)(cleanDate, mode, Boolean(ampm), adapter);
|
|
43
43
|
onChange(timeWithMeridiem, selectionState ?? 'partial');
|
|
44
|
-
}, [ampm, cleanDate, onChange, selectionState,
|
|
44
|
+
}, [ampm, cleanDate, onChange, selectionState, adapter]);
|
|
45
45
|
return {
|
|
46
46
|
meridiemMode,
|
|
47
47
|
handleMeridiemChange
|
|
@@ -3,13 +3,13 @@ import { PickerValue } from "../models/index.js";
|
|
|
3
3
|
export declare const useClockReferenceDate: <TProps extends {}>({
|
|
4
4
|
value,
|
|
5
5
|
referenceDate: referenceDateProp,
|
|
6
|
-
|
|
6
|
+
adapter,
|
|
7
7
|
props,
|
|
8
8
|
timezone
|
|
9
9
|
}: {
|
|
10
10
|
value: PickerValue;
|
|
11
11
|
referenceDate: PickerValidDate | undefined;
|
|
12
|
-
|
|
12
|
+
adapter: MuiPickersAdapter;
|
|
13
13
|
props: TProps;
|
|
14
14
|
timezone: PickersTimezone;
|
|
15
15
|
}) => PickerValidDate;
|
|
@@ -12,18 +12,18 @@ var _getDefaultReferenceDate = require("../utils/getDefaultReferenceDate");
|
|
|
12
12
|
const useClockReferenceDate = ({
|
|
13
13
|
value,
|
|
14
14
|
referenceDate: referenceDateProp,
|
|
15
|
-
|
|
15
|
+
adapter,
|
|
16
16
|
props,
|
|
17
17
|
timezone
|
|
18
18
|
}) => {
|
|
19
19
|
const referenceDate = React.useMemo(() => _valueManagers.singleItemValueManager.getInitialReferenceValue({
|
|
20
20
|
value,
|
|
21
|
-
|
|
21
|
+
adapter,
|
|
22
22
|
props,
|
|
23
23
|
referenceDate: referenceDateProp,
|
|
24
24
|
granularity: _getDefaultReferenceDate.SECTION_TYPE_GRANULARITY.day,
|
|
25
25
|
timezone,
|
|
26
|
-
getTodayDate: () => (0, _dateUtils.getTodayDate)(
|
|
26
|
+
getTodayDate: () => (0, _dateUtils.getTodayDate)(adapter, timezone, 'date')
|
|
27
27
|
}),
|
|
28
28
|
// We only want to compute the reference date on mount.
|
|
29
29
|
[] // eslint-disable-line react-hooks/exhaustive-deps
|
|
@@ -9,7 +9,7 @@ exports.useControlledValue = void 0;
|
|
|
9
9
|
var React = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
|
|
11
11
|
var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
|
|
12
|
-
var
|
|
12
|
+
var _usePickerAdapter = require("../../hooks/usePickerAdapter");
|
|
13
13
|
/**
|
|
14
14
|
* Hooks controlling the value while making sure that:
|
|
15
15
|
* - The value returned by `onChange` always have the timezone of `props.value` or `props.defaultValue` if defined
|
|
@@ -24,19 +24,19 @@ const useControlledValue = ({
|
|
|
24
24
|
onChange: onChangeProp,
|
|
25
25
|
valueManager
|
|
26
26
|
}) => {
|
|
27
|
-
const
|
|
27
|
+
const adapter = (0, _usePickerAdapter.usePickerAdapter)();
|
|
28
28
|
const [valueWithInputTimezone, setValue] = (0, _useControlled.default)({
|
|
29
29
|
name,
|
|
30
30
|
state: 'value',
|
|
31
31
|
controlled: valueProp,
|
|
32
32
|
default: defaultValue ?? valueManager.emptyValue
|
|
33
33
|
});
|
|
34
|
-
const inputTimezone = React.useMemo(() => valueManager.getTimezone(
|
|
34
|
+
const inputTimezone = React.useMemo(() => valueManager.getTimezone(adapter, valueWithInputTimezone), [adapter, valueManager, valueWithInputTimezone]);
|
|
35
35
|
const setInputTimezone = (0, _useEventCallback.default)(newValue => {
|
|
36
36
|
if (inputTimezone == null) {
|
|
37
37
|
return newValue;
|
|
38
38
|
}
|
|
39
|
-
return valueManager.setTimezone(
|
|
39
|
+
return valueManager.setTimezone(adapter, inputTimezone, newValue);
|
|
40
40
|
});
|
|
41
41
|
const timezoneToRender = React.useMemo(() => {
|
|
42
42
|
if (timezoneProp) {
|
|
@@ -46,11 +46,11 @@ const useControlledValue = ({
|
|
|
46
46
|
return inputTimezone;
|
|
47
47
|
}
|
|
48
48
|
if (referenceDate) {
|
|
49
|
-
return
|
|
49
|
+
return adapter.getTimezone(referenceDate);
|
|
50
50
|
}
|
|
51
51
|
return 'default';
|
|
52
|
-
}, [timezoneProp, inputTimezone, referenceDate,
|
|
53
|
-
const valueWithTimezoneToRender = React.useMemo(() => valueManager.setTimezone(
|
|
52
|
+
}, [timezoneProp, inputTimezone, referenceDate, adapter]);
|
|
53
|
+
const valueWithTimezoneToRender = React.useMemo(() => valueManager.setTimezone(adapter, timezoneToRender, valueWithInputTimezone), [valueManager, adapter, timezoneToRender, valueWithInputTimezone]);
|
|
54
54
|
const handleValueChange = (0, _useEventCallback.default)((newValue, ...otherParams) => {
|
|
55
55
|
const newValueWithInputTimezone = setInputTimezone(newValue);
|
|
56
56
|
setValue(newValueWithInputTimezone);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FieldSection, MuiPickersAdapter, PickerValidDate } from "../../../models/index.js";
|
|
2
2
|
import { PickersLocaleText } from "../../../locales/index.js";
|
|
3
3
|
interface BuildSectionsFromFormatParameters {
|
|
4
|
-
|
|
4
|
+
adapter: MuiPickersAdapter;
|
|
5
5
|
format: string;
|
|
6
6
|
formatDensity: 'dense' | 'spacious';
|
|
7
7
|
isRtl: boolean;
|
|
@@ -8,16 +8,16 @@ exports.buildSectionsFromFormat = void 0;
|
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
9
|
var _useField = require("./useField.utils");
|
|
10
10
|
const expandFormat = ({
|
|
11
|
-
|
|
11
|
+
adapter,
|
|
12
12
|
format
|
|
13
13
|
}) => {
|
|
14
14
|
// Expand the provided format
|
|
15
15
|
let formatExpansionOverflow = 10;
|
|
16
16
|
let prevFormat = format;
|
|
17
|
-
let nextFormat =
|
|
17
|
+
let nextFormat = adapter.expandFormat(format);
|
|
18
18
|
while (nextFormat !== prevFormat) {
|
|
19
19
|
prevFormat = nextFormat;
|
|
20
|
-
nextFormat =
|
|
20
|
+
nextFormat = adapter.expandFormat(prevFormat);
|
|
21
21
|
formatExpansionOverflow -= 1;
|
|
22
22
|
if (formatExpansionOverflow < 0) {
|
|
23
23
|
throw new Error('MUI X: The format expansion seems to be in an infinite loop. Please open an issue with the format passed to the component.');
|
|
@@ -26,14 +26,14 @@ const expandFormat = ({
|
|
|
26
26
|
return nextFormat;
|
|
27
27
|
};
|
|
28
28
|
const getEscapedPartsFromFormat = ({
|
|
29
|
-
|
|
29
|
+
adapter,
|
|
30
30
|
expandedFormat
|
|
31
31
|
}) => {
|
|
32
32
|
const escapedParts = [];
|
|
33
33
|
const {
|
|
34
34
|
start: startChar,
|
|
35
35
|
end: endChar
|
|
36
|
-
} =
|
|
36
|
+
} = adapter.escapedCharacters;
|
|
37
37
|
const regExp = new RegExp(`(\\${startChar}[^\\${endChar}]*\\${endChar})+`, 'g');
|
|
38
38
|
let match = null;
|
|
39
39
|
// eslint-disable-next-line no-cond-assign
|
|
@@ -45,12 +45,12 @@ const getEscapedPartsFromFormat = ({
|
|
|
45
45
|
}
|
|
46
46
|
return escapedParts;
|
|
47
47
|
};
|
|
48
|
-
const getSectionPlaceholder = (
|
|
48
|
+
const getSectionPlaceholder = (adapter, localeText, sectionConfig, sectionFormat) => {
|
|
49
49
|
switch (sectionConfig.type) {
|
|
50
50
|
case 'year':
|
|
51
51
|
{
|
|
52
52
|
return localeText.fieldYearPlaceholder({
|
|
53
|
-
digitAmount:
|
|
53
|
+
digitAmount: adapter.formatByString(adapter.date(undefined, 'default'), sectionFormat).length,
|
|
54
54
|
format: sectionFormat
|
|
55
55
|
});
|
|
56
56
|
}
|
|
@@ -105,7 +105,7 @@ const getSectionPlaceholder = (utils, localeText, sectionConfig, sectionFormat)
|
|
|
105
105
|
}
|
|
106
106
|
};
|
|
107
107
|
const createSection = ({
|
|
108
|
-
|
|
108
|
+
adapter,
|
|
109
109
|
date,
|
|
110
110
|
shouldRespectLeadingZeros,
|
|
111
111
|
localeText,
|
|
@@ -117,15 +117,15 @@ const createSection = ({
|
|
|
117
117
|
if (token === '') {
|
|
118
118
|
throw new Error('MUI X: Should not call `commitToken` with an empty token');
|
|
119
119
|
}
|
|
120
|
-
const sectionConfig = (0, _useField.getDateSectionConfigFromFormatToken)(
|
|
121
|
-
const hasLeadingZerosInFormat = (0, _useField.doesSectionFormatHaveLeadingZeros)(
|
|
120
|
+
const sectionConfig = (0, _useField.getDateSectionConfigFromFormatToken)(adapter, token);
|
|
121
|
+
const hasLeadingZerosInFormat = (0, _useField.doesSectionFormatHaveLeadingZeros)(adapter, sectionConfig.contentType, sectionConfig.type, token);
|
|
122
122
|
const hasLeadingZerosInInput = shouldRespectLeadingZeros ? hasLeadingZerosInFormat : sectionConfig.contentType === 'digit';
|
|
123
|
-
const isValidDate =
|
|
124
|
-
let sectionValue = isValidDate ?
|
|
123
|
+
const isValidDate = adapter.isValid(date);
|
|
124
|
+
let sectionValue = isValidDate ? adapter.formatByString(date, token) : '';
|
|
125
125
|
let maxLength = null;
|
|
126
126
|
if (hasLeadingZerosInInput) {
|
|
127
127
|
if (hasLeadingZerosInFormat) {
|
|
128
|
-
maxLength = sectionValue === '' ?
|
|
128
|
+
maxLength = sectionValue === '' ? adapter.formatByString(now, token).length : sectionValue.length;
|
|
129
129
|
} else {
|
|
130
130
|
if (sectionConfig.maxLength == null) {
|
|
131
131
|
throw new Error(`MUI X: The token ${token} should have a 'maxLength' property on it's adapter`);
|
|
@@ -140,7 +140,7 @@ const createSection = ({
|
|
|
140
140
|
format: token,
|
|
141
141
|
maxLength,
|
|
142
142
|
value: sectionValue,
|
|
143
|
-
placeholder: getSectionPlaceholder(
|
|
143
|
+
placeholder: getSectionPlaceholder(adapter, localeText, sectionConfig, token),
|
|
144
144
|
hasLeadingZerosInFormat,
|
|
145
145
|
hasLeadingZerosInInput,
|
|
146
146
|
startSeparator,
|
|
@@ -150,16 +150,16 @@ const createSection = ({
|
|
|
150
150
|
};
|
|
151
151
|
const buildSections = parameters => {
|
|
152
152
|
const {
|
|
153
|
-
|
|
153
|
+
adapter,
|
|
154
154
|
expandedFormat,
|
|
155
155
|
escapedParts
|
|
156
156
|
} = parameters;
|
|
157
|
-
const now =
|
|
157
|
+
const now = adapter.date(undefined);
|
|
158
158
|
const sections = [];
|
|
159
159
|
let startSeparator = '';
|
|
160
160
|
|
|
161
161
|
// This RegExp tests if the beginning of a string corresponds to a supported token
|
|
162
|
-
const validTokens = Object.keys(
|
|
162
|
+
const validTokens = Object.keys(adapter.formatTokenMap).sort((a, b) => b.length - a.length); // Sort to put longest word first
|
|
163
163
|
|
|
164
164
|
const regExpFirstWordInFormat = /^([a-zA-Z]+)/;
|
|
165
165
|
const regExpWordOnlyComposedOfTokens = new RegExp(`^(${validTokens.join('|')})*$`);
|
|
@@ -201,12 +201,12 @@ export interface FieldValueManager<TValue extends PickerValidValue> {
|
|
|
201
201
|
* Update the reference value with the new value.
|
|
202
202
|
* This method must make sure that no date inside the returned `referenceValue` is invalid.
|
|
203
203
|
* @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
|
|
204
|
-
* @param {MuiPickersAdapter}
|
|
204
|
+
* @param {MuiPickersAdapter} adapter The adapter to manipulate the date.
|
|
205
205
|
* @param {TValue} value The new value from which we want to take all valid dates in the `referenceValue` state.
|
|
206
206
|
* @param {TValue} prevReferenceValue The previous reference value. It is used as a fallback for invalid dates in the new value.
|
|
207
207
|
* @returns {TValue} The new reference value with no invalid date.
|
|
208
208
|
*/
|
|
209
|
-
updateReferenceValue: (
|
|
209
|
+
updateReferenceValue: (adapter: MuiPickersAdapter, value: TValue, prevReferenceValue: InferNonNullablePickerValue<TValue>) => InferNonNullablePickerValue<TValue>;
|
|
210
210
|
/**
|
|
211
211
|
* Extract from the given value the date that contains the given section.
|
|
212
212
|
* @param {TValue} value The value to extract the date from.
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { FieldSectionsValueBoundaries, SectionOrdering, FieldSectionValueBoundaries, FieldParsedSelectedSections } from "./useField.types.js";
|
|
2
2
|
import { FieldSectionType, FieldSection, MuiPickersAdapter, FieldSectionContentType, PickersTimezone, PickerValidDate, FieldSelectedSections, PickerValueType, InferFieldSection } from "../../../models/index.js";
|
|
3
3
|
import { PickerValidValue } from "../../models/index.js";
|
|
4
|
-
export declare const getDateSectionConfigFromFormatToken: (
|
|
4
|
+
export declare const getDateSectionConfigFromFormatToken: (adapter: MuiPickersAdapter, formatToken: string) => Pick<FieldSection, "type" | "contentType"> & {
|
|
5
5
|
maxLength: number | undefined;
|
|
6
6
|
};
|
|
7
|
-
export declare const getDaysInWeekStr: (
|
|
8
|
-
export declare const getLetterEditingOptions: (
|
|
7
|
+
export declare const getDaysInWeekStr: (adapter: MuiPickersAdapter, format: string) => string[];
|
|
8
|
+
export declare const getLetterEditingOptions: (adapter: MuiPickersAdapter, timezone: PickersTimezone, sectionType: FieldSectionType, format: string) => string[];
|
|
9
9
|
export declare const FORMAT_SECONDS_NO_LEADING_ZEROS = "s";
|
|
10
|
-
export declare const getLocalizedDigits: (
|
|
10
|
+
export declare const getLocalizedDigits: (adapter: MuiPickersAdapter) => string[];
|
|
11
11
|
export declare const removeLocalizedDigits: (valueStr: string, localizedDigits: string[]) => string;
|
|
12
12
|
export declare const applyLocalizedDigits: (valueStr: string, localizedDigits: string[]) => string;
|
|
13
13
|
export declare const isStringNumber: (valueStr: string, localizedDigits: string[]) => boolean;
|
|
@@ -17,20 +17,20 @@ export declare const isStringNumber: (valueStr: string, localizedDigits: string[
|
|
|
17
17
|
* Warning: Should only be called with non-localized digits. Call `removeLocalizedDigits` with your value if needed.
|
|
18
18
|
*/
|
|
19
19
|
export declare const cleanLeadingZeros: (valueStr: string, size: number) => string;
|
|
20
|
-
export declare const cleanDigitSectionValue: (
|
|
20
|
+
export declare const cleanDigitSectionValue: (adapter: MuiPickersAdapter, value: number, sectionBoundaries: FieldSectionValueBoundaries<any>, localizedDigits: string[], section: Pick<FieldSection, "format" | "type" | "contentType" | "hasLeadingZerosInFormat" | "hasLeadingZerosInInput" | "maxLength">) => string;
|
|
21
21
|
export declare const getSectionVisibleValue: (section: FieldSection, target: "input-rtl" | "input-ltr" | "non-input", localizedDigits: string[]) => string;
|
|
22
|
-
export declare const changeSectionValueFormat: (
|
|
23
|
-
export declare const doesSectionFormatHaveLeadingZeros: (
|
|
22
|
+
export declare const changeSectionValueFormat: (adapter: MuiPickersAdapter, valueStr: string, currentFormat: string, newFormat: string) => string;
|
|
23
|
+
export declare const doesSectionFormatHaveLeadingZeros: (adapter: MuiPickersAdapter, contentType: FieldSectionContentType, sectionType: FieldSectionType, format: string) => boolean;
|
|
24
24
|
/**
|
|
25
25
|
* Some date libraries like `dayjs` don't support parsing from date with escaped characters.
|
|
26
26
|
* To make sure that the parsing works, we are building a format and a date without any separator.
|
|
27
27
|
*/
|
|
28
|
-
export declare const getDateFromDateSections: (
|
|
28
|
+
export declare const getDateFromDateSections: (adapter: MuiPickersAdapter, sections: FieldSection[], localizedDigits: string[]) => PickerValidDate;
|
|
29
29
|
export declare const createDateStrForV7HiddenInputFromSections: (sections: FieldSection[]) => string;
|
|
30
30
|
export declare const createDateStrForV6InputFromSections: (sections: FieldSection[], localizedDigits: string[], isRtl: boolean) => string;
|
|
31
|
-
export declare const getSectionsBoundaries: (
|
|
31
|
+
export declare const getSectionsBoundaries: (adapter: MuiPickersAdapter, localizedDigits: string[], timezone: PickersTimezone) => FieldSectionsValueBoundaries;
|
|
32
32
|
export declare const validateSections: <TValue extends PickerValidValue>(sections: InferFieldSection<TValue>[], valueType: PickerValueType) => void;
|
|
33
|
-
export declare const mergeDateIntoReferenceDate: (
|
|
33
|
+
export declare const mergeDateIntoReferenceDate: (adapter: MuiPickersAdapter, dateToTransferFrom: PickerValidDate, sections: FieldSection[], referenceDate: PickerValidDate, shouldLimitToEditedSections: boolean) => PickerValidDate;
|
|
34
34
|
export declare const isAndroid: () => boolean;
|
|
35
35
|
export declare const getSectionOrder: (sections: FieldSection[], shouldApplyRTL: boolean) => SectionOrdering;
|
|
36
36
|
export declare const parseSelectedSections: (selectedSections: FieldSelectedSections, sections: FieldSection[]) => FieldParsedSelectedSections;
|