@mui/x-date-pickers-pro 8.0.0-alpha.6 → 8.0.0-alpha.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{AdapterDateFnsJalaliV3 → AdapterDateFnsJalaliV2}/index.d.ts +1 -1
- package/{AdapterDateFnsJalaliV3 → AdapterDateFnsJalaliV2}/index.js +1 -1
- package/{AdapterDateFnsJalaliV3 → AdapterDateFnsJalaliV2}/package.json +1 -1
- package/{AdapterDateFnsV3 → AdapterDateFnsV2}/index.d.ts +1 -1
- package/{AdapterDateFnsV3 → AdapterDateFnsV2}/index.js +1 -1
- package/{AdapterDateFnsV3 → AdapterDateFnsV2}/package.json +1 -1
- package/CHANGELOG.md +127 -1
- package/DateRangeCalendar/DateRangeCalendar.js +9 -7
- package/DateRangePicker/DateRangePicker.js +1 -1
- package/DateRangePicker/DateRangePicker.types.d.ts +5 -0
- package/DateRangePicker/DateRangePickerToolbar.d.ts +2 -3
- package/DateRangePicker/DateRangePickerToolbar.js +25 -17
- package/DateRangePicker/shared.d.ts +1 -1
- package/DateTimeRangePicker/DateTimeRangePicker.js +2 -2
- package/DateTimeRangePicker/DateTimeRangePickerTabs.d.ts +3 -4
- package/DateTimeRangePicker/DateTimeRangePickerTabs.js +8 -7
- package/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.d.ts +8 -10
- package/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js +7 -5
- package/DateTimeRangePicker/DateTimeRangePickerToolbar.d.ts +2 -3
- package/DateTimeRangePicker/DateTimeRangePickerToolbar.js +26 -28
- package/DateTimeRangePicker/shared.d.ts +2 -2
- package/DesktopDateRangePicker/DesktopDateRangePicker.js +9 -3
- package/DesktopDateRangePicker/DesktopDateRangePicker.types.d.ts +5 -0
- package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js +17 -14
- package/MobileDateRangePicker/MobileDateRangePicker.js +2 -2
- package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js +15 -8
- package/SingleInputDateRangeField/useSingleInputDateRangeField.d.ts +1 -1
- package/SingleInputDateRangeField/useSingleInputDateRangeField.js +13 -14
- package/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.d.ts +1 -1
- package/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js +13 -14
- package/SingleInputTimeRangeField/useSingleInputTimeRangeField.d.ts +1 -1
- package/SingleInputTimeRangeField/useSingleInputTimeRangeField.js +13 -14
- package/dateRangeViewRenderers/dateRangeViewRenderers.d.ts +2 -2
- package/dateRangeViewRenderers/dateRangeViewRenderers.js +0 -6
- package/hooks/index.d.ts +1 -0
- package/hooks/index.js +1 -0
- package/hooks/package.json +6 -0
- package/hooks/usePickerRangePositionContext.d.ts +7 -0
- package/hooks/usePickerRangePositionContext.js +15 -0
- package/index.d.ts +2 -0
- package/index.js +4 -2
- package/internals/hooks/models/useRangePicker.d.ts +2 -2
- package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +26 -43
- package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.d.ts +3 -5
- package/internals/hooks/useEnrichedRangePickerFieldProps.d.ts +5 -5
- package/internals/hooks/useEnrichedRangePickerFieldProps.js +3 -3
- package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +21 -35
- package/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.d.ts +3 -5
- package/internals/hooks/useMultiInputFieldSelectedSections.d.ts +10 -12
- package/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.d.ts +1 -1
- package/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js +11 -6
- package/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.d.ts +2 -2
- package/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js +12 -7
- package/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.d.ts +2 -2
- package/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js +13 -8
- package/internals/hooks/useNullablePickerRangePositionContext.d.ts +5 -0
- package/internals/hooks/useNullablePickerRangePositionContext.js +10 -0
- package/internals/hooks/useRangePosition.d.ts +1 -1
- package/internals/hooks/useStaticRangePicker/useStaticRangePicker.js +14 -24
- package/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.d.ts +2 -2
- package/internals/utils/date-range-manager.js +2 -1
- package/internals/utils/releaseInfo.js +1 -1
- package/internals/utils/valueManagers.js +7 -7
- package/managers/index.d.ts +6 -0
- package/managers/index.js +3 -0
- package/managers/package.json +6 -0
- package/managers/useDateRangeManager.d.ts +15 -0
- package/managers/useDateRangeManager.js +31 -0
- package/managers/useDateTimeRangeManager.d.ts +15 -0
- package/managers/useDateTimeRangeManager.js +31 -0
- package/managers/useTimeRangeManager.d.ts +15 -0
- package/managers/useTimeRangeManager.js +29 -0
- package/models/range.d.ts +0 -1
- package/modern/{AdapterDateFnsJalaliV3 → AdapterDateFnsJalaliV2}/index.js +1 -1
- package/modern/{AdapterDateFnsV3 → AdapterDateFnsV2}/index.js +1 -1
- package/modern/DateRangeCalendar/DateRangeCalendar.js +9 -7
- package/modern/DateRangePicker/DateRangePicker.js +1 -1
- package/modern/DateRangePicker/DateRangePickerToolbar.js +25 -17
- package/modern/DateTimeRangePicker/DateTimeRangePicker.js +2 -2
- package/modern/DateTimeRangePicker/DateTimeRangePickerTabs.js +8 -7
- package/modern/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js +7 -5
- package/modern/DateTimeRangePicker/DateTimeRangePickerToolbar.js +26 -28
- package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js +9 -3
- package/modern/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js +17 -14
- package/modern/MobileDateRangePicker/MobileDateRangePicker.js +2 -2
- package/modern/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js +15 -8
- package/modern/SingleInputDateRangeField/useSingleInputDateRangeField.js +13 -14
- package/modern/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js +13 -14
- package/modern/SingleInputTimeRangeField/useSingleInputTimeRangeField.js +13 -14
- package/modern/dateRangeViewRenderers/dateRangeViewRenderers.js +0 -6
- package/modern/hooks/index.js +1 -0
- package/modern/hooks/usePickerRangePositionContext.js +15 -0
- package/modern/index.js +4 -2
- package/modern/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +26 -43
- package/modern/internals/hooks/useEnrichedRangePickerFieldProps.js +3 -3
- package/modern/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +21 -35
- package/modern/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js +11 -6
- package/modern/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js +12 -7
- package/modern/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js +13 -8
- package/modern/internals/hooks/useNullablePickerRangePositionContext.js +10 -0
- package/modern/internals/hooks/useStaticRangePicker/useStaticRangePicker.js +14 -24
- package/modern/internals/utils/date-range-manager.js +2 -1
- package/modern/internals/utils/releaseInfo.js +1 -1
- package/modern/internals/utils/valueManagers.js +7 -7
- package/modern/managers/index.js +3 -0
- package/modern/managers/useDateRangeManager.js +31 -0
- package/modern/managers/useDateTimeRangeManager.js +31 -0
- package/modern/managers/useTimeRangeManager.js +29 -0
- package/node/{AdapterDateFnsJalaliV3 → AdapterDateFnsJalaliV2}/index.js +1 -1
- package/node/{AdapterDateFnsV3 → AdapterDateFnsV2}/index.js +1 -1
- package/node/DateRangeCalendar/DateRangeCalendar.js +9 -7
- package/node/DateRangePicker/DateRangePicker.js +1 -1
- package/node/DateRangePicker/DateRangePickerToolbar.js +24 -16
- package/node/DateTimeRangePicker/DateTimeRangePicker.js +2 -2
- package/node/DateTimeRangePicker/DateTimeRangePickerTabs.js +8 -7
- package/node/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js +7 -5
- package/node/DateTimeRangePicker/DateTimeRangePickerToolbar.js +26 -28
- package/node/DesktopDateRangePicker/DesktopDateRangePicker.js +9 -3
- package/node/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js +17 -14
- package/node/MobileDateRangePicker/MobileDateRangePicker.js +2 -2
- package/node/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js +15 -8
- package/node/SingleInputDateRangeField/useSingleInputDateRangeField.js +12 -14
- package/node/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js +12 -14
- package/node/SingleInputTimeRangeField/useSingleInputTimeRangeField.js +12 -14
- package/node/dateRangeViewRenderers/dateRangeViewRenderers.js +0 -6
- package/node/hooks/index.js +12 -0
- package/node/hooks/usePickerRangePositionContext.js +22 -0
- package/node/index.js +23 -1
- package/node/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +26 -43
- package/node/internals/hooks/useEnrichedRangePickerFieldProps.js +3 -3
- package/node/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +21 -35
- package/node/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js +10 -5
- package/node/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js +11 -6
- package/node/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js +12 -7
- package/node/internals/hooks/useNullablePickerRangePositionContext.js +16 -0
- package/node/internals/hooks/useStaticRangePicker/useStaticRangePicker.js +14 -24
- package/node/internals/utils/date-range-manager.js +2 -1
- package/node/internals/utils/releaseInfo.js +1 -1
- package/node/internals/utils/valueManagers.js +7 -7
- package/node/managers/index.js +26 -0
- package/node/managers/useDateRangeManager.js +38 -0
- package/node/managers/useDateTimeRangeManager.js +38 -0
- package/node/managers/useTimeRangeManager.js +36 -0
- package/package.json +5 -5
|
@@ -11,10 +11,10 @@ export interface UseRangePickerSlotProps<TEnableAccessibleFieldDOMStructure exte
|
|
|
11
11
|
}
|
|
12
12
|
export interface RangeOnlyPickerProps extends BaseNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps, BaseRangeNonStaticPickerProps, UseRangePositionProps {
|
|
13
13
|
}
|
|
14
|
-
export interface UseRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<any, TView, any
|
|
14
|
+
export interface UseRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<any, TView, any>> extends RangeOnlyPickerProps, BasePickerProps<PickerRangeValue, TView, TError, TExternalProps> {
|
|
15
15
|
}
|
|
16
16
|
export interface RangePickerAdditionalViewProps extends Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
|
|
17
17
|
}
|
|
18
|
-
export interface UseRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseRangePickerProps<TView, any, TExternalProps
|
|
18
|
+
export interface UseRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseRangePickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParams<PickerRangeValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor'> {
|
|
19
19
|
props: TExternalProps;
|
|
20
20
|
}
|
|
@@ -9,6 +9,7 @@ import { executeInTheNextEventLoopTick, getActiveElement, usePicker, PickersPopp
|
|
|
9
9
|
import { useEnrichedRangePickerFieldProps } from "../useEnrichedRangePickerFieldProps.js";
|
|
10
10
|
import { getReleaseInfo } from "../../utils/releaseInfo.js";
|
|
11
11
|
import { useRangePosition } from "../useRangePosition.js";
|
|
12
|
+
import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
|
|
12
13
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
14
|
const releaseInfo = getReleaseInfo();
|
|
14
15
|
export const useDesktopRangePicker = _ref => {
|
|
@@ -46,20 +47,16 @@ export const useDesktopRangePicker = _ref => {
|
|
|
46
47
|
const singleInputFieldRef = React.useRef(null);
|
|
47
48
|
const initialView = React.useRef(props.openTo ?? null);
|
|
48
49
|
const fieldType = slots.field.fieldType ?? 'multi-input';
|
|
49
|
-
const
|
|
50
|
-
rangePosition,
|
|
51
|
-
onRangePositionChange
|
|
52
|
-
} = useRangePosition(props, fieldType === 'single-input' ? singleInputFieldRef : undefined);
|
|
50
|
+
const rangePositionResponse = useRangePosition(props, fieldType === 'single-input' ? singleInputFieldRef : undefined);
|
|
53
51
|
let fieldRef;
|
|
54
52
|
if (fieldType === 'single-input') {
|
|
55
53
|
fieldRef = singleInputFieldRef;
|
|
56
|
-
} else if (rangePosition === 'start') {
|
|
54
|
+
} else if (rangePositionResponse.rangePosition === 'start') {
|
|
57
55
|
fieldRef = startFieldRef;
|
|
58
56
|
} else {
|
|
59
57
|
fieldRef = endFieldRef;
|
|
60
58
|
}
|
|
61
59
|
const {
|
|
62
|
-
layoutProps,
|
|
63
60
|
providerProps,
|
|
64
61
|
renderCurrentView,
|
|
65
62
|
shouldRestoreFocus,
|
|
@@ -70,11 +67,7 @@ export const useDesktopRangePicker = _ref => {
|
|
|
70
67
|
variant: 'desktop',
|
|
71
68
|
autoFocusView: false,
|
|
72
69
|
fieldRef,
|
|
73
|
-
localeText
|
|
74
|
-
additionalViewProps: {
|
|
75
|
-
rangePosition,
|
|
76
|
-
onRangePositionChange
|
|
77
|
-
}
|
|
70
|
+
localeText
|
|
78
71
|
}));
|
|
79
72
|
React.useEffect(() => {
|
|
80
73
|
if (providerProps.contextValue.view) {
|
|
@@ -121,7 +114,7 @@ export const useDesktopRangePicker = _ref => {
|
|
|
121
114
|
}),
|
|
122
115
|
ownerState
|
|
123
116
|
});
|
|
124
|
-
const enrichedFieldProps = useEnrichedRangePickerFieldProps({
|
|
117
|
+
const enrichedFieldProps = useEnrichedRangePickerFieldProps(_extends({
|
|
125
118
|
variant: 'desktop',
|
|
126
119
|
fieldType,
|
|
127
120
|
// These direct access to `providerProps` will go away once the range fields handle the picker opening
|
|
@@ -132,8 +125,6 @@ export const useDesktopRangePicker = _ref => {
|
|
|
132
125
|
label,
|
|
133
126
|
localeText,
|
|
134
127
|
onBlur: handleBlur,
|
|
135
|
-
rangePosition,
|
|
136
|
-
onRangePositionChange,
|
|
137
128
|
pickerSlotProps: slotProps,
|
|
138
129
|
pickerSlots: slots,
|
|
139
130
|
fieldProps,
|
|
@@ -142,37 +133,29 @@ export const useDesktopRangePicker = _ref => {
|
|
|
142
133
|
endFieldRef,
|
|
143
134
|
singleInputFieldRef,
|
|
144
135
|
currentView: providerProps.contextValue.view !== props.openTo ? providerProps.contextValue.view : undefined,
|
|
145
|
-
initialView: initialView.current ?? undefined
|
|
146
|
-
|
|
147
|
-
});
|
|
148
|
-
const slotPropsForLayout = _extends({}, slotProps, {
|
|
149
|
-
tabs: _extends({}, slotProps?.tabs, {
|
|
150
|
-
rangePosition,
|
|
151
|
-
onRangePositionChange
|
|
152
|
-
}),
|
|
153
|
-
toolbar: _extends({}, slotProps?.toolbar, {
|
|
154
|
-
rangePosition,
|
|
155
|
-
onRangePositionChange
|
|
156
|
-
})
|
|
157
|
-
});
|
|
136
|
+
initialView: initialView.current ?? undefined
|
|
137
|
+
}, rangePositionResponse));
|
|
158
138
|
const Layout = slots?.layout ?? PickersLayout;
|
|
159
|
-
const renderPicker = () => /*#__PURE__*/
|
|
160
|
-
children:
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
shouldRestoreFocus: shouldRestoreFocus,
|
|
169
|
-
reduceAnimations: reduceAnimations,
|
|
170
|
-
children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
|
|
139
|
+
const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
|
|
140
|
+
children: /*#__PURE__*/_jsxs(PickerRangePositionContext.Provider, {
|
|
141
|
+
value: rangePositionResponse,
|
|
142
|
+
children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersPopper, {
|
|
143
|
+
role: "tooltip",
|
|
144
|
+
placement: "bottom-start",
|
|
145
|
+
containerRef: popperRef,
|
|
146
|
+
anchorEl: anchorRef.current,
|
|
147
|
+
onBlur: handleBlur,
|
|
171
148
|
slots: slots,
|
|
172
|
-
slotProps:
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
149
|
+
slotProps: slotProps,
|
|
150
|
+
shouldRestoreFocus: shouldRestoreFocus,
|
|
151
|
+
reduceAnimations: reduceAnimations,
|
|
152
|
+
children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
|
|
153
|
+
slots: slots,
|
|
154
|
+
slotProps: slotProps,
|
|
155
|
+
children: renderCurrentView()
|
|
156
|
+
}))
|
|
157
|
+
})]
|
|
158
|
+
})
|
|
176
159
|
}));
|
|
177
160
|
return {
|
|
178
161
|
renderPicker
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PickersPopperSlots, PickersPopperSlotProps, UsePickerViewsProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
|
|
2
|
-
import { RangeOnlyPickerProps,
|
|
2
|
+
import { RangeOnlyPickerProps, UseRangePickerParams, UseRangePickerProps, UseRangePickerSlotProps, UseRangePickerSlots } from '../models/useRangePicker';
|
|
3
3
|
export interface UseDesktopRangePickerSlots extends UseRangePickerSlots, PickersPopperSlots {
|
|
4
4
|
}
|
|
5
5
|
export interface UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, PickersPopperSlotProps {
|
|
@@ -10,7 +10,7 @@ export interface DesktopRangeOnlyPickerProps extends RangeOnlyPickerProps {
|
|
|
10
10
|
*/
|
|
11
11
|
autoFocus?: boolean;
|
|
12
12
|
}
|
|
13
|
-
export interface UseDesktopRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, TView, any
|
|
13
|
+
export interface UseDesktopRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, TView, any>> extends UseRangePickerProps<TView, TError, TExternalProps> {
|
|
14
14
|
/**
|
|
15
15
|
* Overridable component slots.
|
|
16
16
|
* @default {}
|
|
@@ -22,7 +22,5 @@ export interface UseDesktopRangePickerProps<TView extends DateOrTimeViewWithMeri
|
|
|
22
22
|
*/
|
|
23
23
|
slotProps?: UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
|
|
24
24
|
}
|
|
25
|
-
export interface
|
|
26
|
-
}
|
|
27
|
-
export interface UseDesktopRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends UseRangePickerParams<TView, TExternalProps, DesktopRangePickerAdditionalViewProps> {
|
|
25
|
+
export interface UseDesktopRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends UseRangePickerParams<TView, TExternalProps> {
|
|
28
26
|
}
|
|
@@ -39,7 +39,7 @@ export interface RangePickerFieldSlotProps<TEnableAccessibleFieldDOMStructure ex
|
|
|
39
39
|
}>;
|
|
40
40
|
}
|
|
41
41
|
export type RangePickerPropsForFieldSlot<TIsSingleInput extends boolean, TEnableAccessibleFieldDOMStructure extends boolean, TError> = (TIsSingleInput extends true ? BaseSingleInputFieldProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TError> : never) | (TIsSingleInput extends false ? BaseMultiInputFieldProps<TEnableAccessibleFieldDOMStructure, TError> : never);
|
|
42
|
-
export interface UseEnrichedRangePickerFieldPropsParams<TIsSingleInput extends boolean, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends Pick<UsePickerValueContextValue, 'open' | 'setOpen'>, UseRangePositionResponse {
|
|
42
|
+
export interface UseEnrichedRangePickerFieldPropsParams<TIsSingleInput extends boolean, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends Pick<UsePickerValueContextValue<PickerRangeValue, TError>, 'open' | 'setOpen'>, UseRangePositionResponse {
|
|
43
43
|
variant: PickerVariant;
|
|
44
44
|
fieldType: FieldType;
|
|
45
45
|
readOnly?: boolean;
|
|
@@ -54,9 +54,9 @@ export interface UseEnrichedRangePickerFieldPropsParams<TIsSingleInput extends b
|
|
|
54
54
|
anchorRef?: React.Ref<HTMLDivElement>;
|
|
55
55
|
currentView?: TView | null;
|
|
56
56
|
initialView?: TView;
|
|
57
|
-
|
|
58
|
-
startFieldRef: React.RefObject<FieldRef<PickerValue
|
|
59
|
-
endFieldRef: React.RefObject<FieldRef<PickerValue
|
|
60
|
-
singleInputFieldRef: React.RefObject<FieldRef<PickerRangeValue
|
|
57
|
+
setView?: (view: TView) => void;
|
|
58
|
+
startFieldRef: React.RefObject<FieldRef<PickerValue> | null>;
|
|
59
|
+
endFieldRef: React.RefObject<FieldRef<PickerValue> | null>;
|
|
60
|
+
singleInputFieldRef: React.RefObject<FieldRef<PickerRangeValue> | null>;
|
|
61
61
|
}
|
|
62
62
|
export declare const useEnrichedRangePickerFieldProps: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError>(params: UseEnrichedRangePickerFieldPropsParams<boolean, TView, TEnableAccessibleFieldDOMStructure, TError>) => BaseMultiInputFieldProps<TEnableAccessibleFieldDOMStructure, TError> | BaseSingleInputFieldProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TError>;
|
|
@@ -24,7 +24,7 @@ const useMultiInputFieldSlotProps = ({
|
|
|
24
24
|
anchorRef,
|
|
25
25
|
currentView,
|
|
26
26
|
initialView,
|
|
27
|
-
|
|
27
|
+
setView,
|
|
28
28
|
startFieldRef,
|
|
29
29
|
endFieldRef
|
|
30
30
|
}) => {
|
|
@@ -70,7 +70,7 @@ const useMultiInputFieldSlotProps = ({
|
|
|
70
70
|
if (open) {
|
|
71
71
|
onRangePositionChange('start');
|
|
72
72
|
if (previousRangePosition.current !== 'start' && initialView) {
|
|
73
|
-
|
|
73
|
+
setView?.(initialView);
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
};
|
|
@@ -78,7 +78,7 @@ const useMultiInputFieldSlotProps = ({
|
|
|
78
78
|
if (open) {
|
|
79
79
|
onRangePositionChange('end');
|
|
80
80
|
if (previousRangePosition.current !== 'end' && initialView) {
|
|
81
|
-
|
|
81
|
+
setView?.(initialView);
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
};
|
|
@@ -11,6 +11,7 @@ import useId from '@mui/utils/useId';
|
|
|
11
11
|
import { useEnrichedRangePickerFieldProps } from "../useEnrichedRangePickerFieldProps.js";
|
|
12
12
|
import { getReleaseInfo } from "../../utils/releaseInfo.js";
|
|
13
13
|
import { useRangePosition } from "../useRangePosition.js";
|
|
14
|
+
import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
|
|
14
15
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
16
|
const releaseInfo = getReleaseInfo();
|
|
16
17
|
export const useMobileRangePicker = _ref => {
|
|
@@ -42,22 +43,18 @@ export const useMobileRangePicker = _ref => {
|
|
|
42
43
|
const endFieldRef = React.useRef(null);
|
|
43
44
|
const singleInputFieldRef = React.useRef(null);
|
|
44
45
|
const fieldType = slots.field.fieldType ?? 'multi-input';
|
|
45
|
-
const
|
|
46
|
-
rangePosition,
|
|
47
|
-
onRangePositionChange
|
|
48
|
-
} = useRangePosition(props, fieldType === 'single-input' ? singleInputFieldRef : undefined);
|
|
46
|
+
const rangePositionResponse = useRangePosition(props, fieldType === 'single-input' ? singleInputFieldRef : undefined);
|
|
49
47
|
const labelId = useId();
|
|
50
48
|
const contextTranslations = usePickerTranslations();
|
|
51
49
|
let fieldRef;
|
|
52
50
|
if (fieldType === 'single-input') {
|
|
53
51
|
fieldRef = singleInputFieldRef;
|
|
54
|
-
} else if (rangePosition === 'start') {
|
|
52
|
+
} else if (rangePositionResponse.rangePosition === 'start') {
|
|
55
53
|
fieldRef = startFieldRef;
|
|
56
54
|
} else {
|
|
57
55
|
fieldRef = endFieldRef;
|
|
58
56
|
}
|
|
59
57
|
const {
|
|
60
|
-
layoutProps,
|
|
61
58
|
providerProps,
|
|
62
59
|
renderCurrentView,
|
|
63
60
|
fieldProps: pickerFieldProps,
|
|
@@ -67,11 +64,7 @@ export const useMobileRangePicker = _ref => {
|
|
|
67
64
|
variant: 'mobile',
|
|
68
65
|
autoFocusView: true,
|
|
69
66
|
fieldRef,
|
|
70
|
-
localeText
|
|
71
|
-
additionalViewProps: {
|
|
72
|
-
rangePosition,
|
|
73
|
-
onRangePositionChange
|
|
74
|
-
}
|
|
67
|
+
localeText
|
|
75
68
|
}));
|
|
76
69
|
const Field = slots.field;
|
|
77
70
|
const fieldProps = useSlotProps({
|
|
@@ -101,7 +94,7 @@ export const useMobileRangePicker = _ref => {
|
|
|
101
94
|
ownerState
|
|
102
95
|
});
|
|
103
96
|
const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
|
|
104
|
-
const enrichedFieldProps = useEnrichedRangePickerFieldProps({
|
|
97
|
+
const enrichedFieldProps = useEnrichedRangePickerFieldProps(_extends({
|
|
105
98
|
variant: 'mobile',
|
|
106
99
|
fieldType,
|
|
107
100
|
// These direct access to `providerProps` will go away once the range fields handle the picker opening
|
|
@@ -112,26 +105,13 @@ export const useMobileRangePicker = _ref => {
|
|
|
112
105
|
disableOpenPicker,
|
|
113
106
|
label,
|
|
114
107
|
localeText,
|
|
115
|
-
rangePosition,
|
|
116
|
-
onRangePositionChange,
|
|
117
108
|
pickerSlots: slots,
|
|
118
109
|
pickerSlotProps: innerSlotProps,
|
|
119
110
|
fieldProps,
|
|
120
111
|
startFieldRef,
|
|
121
112
|
endFieldRef,
|
|
122
113
|
singleInputFieldRef
|
|
123
|
-
});
|
|
124
|
-
const slotPropsForLayout = _extends({}, innerSlotProps, {
|
|
125
|
-
tabs: _extends({}, innerSlotProps?.tabs, {
|
|
126
|
-
rangePosition,
|
|
127
|
-
onRangePositionChange
|
|
128
|
-
}),
|
|
129
|
-
toolbar: _extends({}, innerSlotProps?.toolbar, {
|
|
130
|
-
titleId: labelId,
|
|
131
|
-
rangePosition,
|
|
132
|
-
onRangePositionChange
|
|
133
|
-
})
|
|
134
|
-
});
|
|
114
|
+
}, rangePositionResponse));
|
|
135
115
|
const Layout = slots?.layout ?? PickersLayout;
|
|
136
116
|
const finalLocaleText = _extends({}, contextTranslations, localeText);
|
|
137
117
|
let labelledById = pickerParams.valueType === 'date-time' ? `${labelId}-start-toolbar ${labelId}-end-toolbar` : labelId;
|
|
@@ -150,20 +130,26 @@ export const useMobileRangePicker = _ref => {
|
|
|
150
130
|
labelledById = labels.length > 0 ? labels.join(' ') : undefined;
|
|
151
131
|
}
|
|
152
132
|
const slotProps = _extends({}, innerSlotProps, {
|
|
133
|
+
toolbar: _extends({}, innerSlotProps?.toolbar, {
|
|
134
|
+
titleId: labelId
|
|
135
|
+
}),
|
|
153
136
|
mobilePaper: _extends({
|
|
154
137
|
'aria-labelledby': labelledById
|
|
155
138
|
}, innerSlotProps?.mobilePaper)
|
|
156
139
|
});
|
|
157
|
-
const renderPicker = () => /*#__PURE__*/
|
|
158
|
-
children:
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
|
|
140
|
+
const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
|
|
141
|
+
children: /*#__PURE__*/_jsxs(PickerRangePositionContext.Provider, {
|
|
142
|
+
value: rangePositionResponse,
|
|
143
|
+
children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
|
|
162
144
|
slots: slots,
|
|
163
|
-
slotProps:
|
|
164
|
-
children:
|
|
165
|
-
|
|
166
|
-
|
|
145
|
+
slotProps: slotProps,
|
|
146
|
+
children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
|
|
147
|
+
slots: slots,
|
|
148
|
+
slotProps: slotProps,
|
|
149
|
+
children: renderCurrentView()
|
|
150
|
+
}))
|
|
151
|
+
})]
|
|
152
|
+
})
|
|
167
153
|
}));
|
|
168
154
|
return {
|
|
169
155
|
renderPicker
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { PickersModalDialogSlots, PickersModalDialogSlotProps, UsePickerViewsProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
|
|
2
|
-
import { RangeOnlyPickerProps,
|
|
2
|
+
import { RangeOnlyPickerProps, UseRangePickerParams, UseRangePickerProps, UseRangePickerSlotProps, UseRangePickerSlots } from '../models/useRangePicker';
|
|
3
3
|
export interface UseMobileRangePickerSlots extends UseRangePickerSlots, PickersModalDialogSlots {
|
|
4
4
|
}
|
|
5
5
|
export interface UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, PickersModalDialogSlotProps {
|
|
6
6
|
}
|
|
7
7
|
export interface MobileRangeOnlyPickerProps extends RangeOnlyPickerProps {
|
|
8
8
|
}
|
|
9
|
-
export interface UseMobileRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, TView, any
|
|
9
|
+
export interface UseMobileRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, TView, any>> extends UseRangePickerProps<TView, TError, TExternalProps> {
|
|
10
10
|
/**
|
|
11
11
|
* Overridable component slots.
|
|
12
12
|
* @default {}
|
|
@@ -18,7 +18,5 @@ export interface UseMobileRangePickerProps<TView extends DateOrTimeViewWithMerid
|
|
|
18
18
|
*/
|
|
19
19
|
slotProps?: UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
|
|
20
20
|
}
|
|
21
|
-
export interface
|
|
22
|
-
}
|
|
23
|
-
export interface UseMobileRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends UseRangePickerParams<TView, TExternalProps, MobileRangePickerAdditionalViewProps> {
|
|
21
|
+
export interface UseMobileRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends UseRangePickerParams<TView, TExternalProps> {
|
|
24
22
|
}
|
|
@@ -5,16 +5,14 @@ interface UseMultiInputFieldSelectedSectionsParams extends Pick<UseFieldInternal
|
|
|
5
5
|
unstableStartFieldRef?: React.Ref<FieldRef<PickerValue>>;
|
|
6
6
|
unstableEndFieldRef?: React.Ref<FieldRef<PickerValue>>;
|
|
7
7
|
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
};
|
|
19
|
-
};
|
|
8
|
+
interface UseMultiInputFieldSelectedSectionsResponseItem {
|
|
9
|
+
unstableFieldRef?: React.Ref<FieldRef<PickerValue>>;
|
|
10
|
+
selectedSections: FieldSelectedSections;
|
|
11
|
+
onSelectedSectionsChange: (newSelectedSections: FieldSelectedSections) => void;
|
|
12
|
+
}
|
|
13
|
+
interface UseMultiInputFieldSelectedSectionsResponse {
|
|
14
|
+
start: UseMultiInputFieldSelectedSectionsResponseItem;
|
|
15
|
+
end: UseMultiInputFieldSelectedSectionsResponseItem;
|
|
16
|
+
}
|
|
17
|
+
export declare const useMultiInputFieldSelectedSections: (params: UseMultiInputFieldSelectedSectionsParams) => UseMultiInputFieldSelectedSectionsResponse;
|
|
20
18
|
export {};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { UseMultiInputDateRangeFieldParams } from '../../../MultiInputDateRangeField/MultiInputDateRangeField.types';
|
|
2
2
|
import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types';
|
|
3
|
-
export declare const useMultiInputDateRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}>({ sharedProps
|
|
3
|
+
export declare const useMultiInputDateRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}>({ sharedProps, startTextFieldProps, unstableStartFieldRef, endTextFieldProps, unstableEndFieldRef, }: UseMultiInputDateRangeFieldParams<TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps>) => UseMultiInputRangeFieldResponse<TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps>;
|
|
@@ -1,20 +1,25 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import useEventCallback from '@mui/utils/useEventCallback';
|
|
3
3
|
import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
|
|
4
|
-
import { useControlledValueWithTimezone,
|
|
4
|
+
import { useControlledValueWithTimezone, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals';
|
|
5
5
|
import { useValidation } from '@mui/x-date-pickers/validation';
|
|
6
6
|
import { validateDateRange } from "../../../validation/index.js";
|
|
7
7
|
import { rangeValueManager } from "../../utils/valueManagers.js";
|
|
8
8
|
import { excludeProps } from "./shared.js";
|
|
9
9
|
import { useMultiInputFieldSelectedSections } from "../useMultiInputFieldSelectedSections.js";
|
|
10
|
+
import { useDateRangeManager } from "../../../managers/index.js";
|
|
10
11
|
export const useMultiInputDateRangeField = ({
|
|
11
|
-
sharedProps
|
|
12
|
+
sharedProps,
|
|
12
13
|
startTextFieldProps,
|
|
13
14
|
unstableStartFieldRef,
|
|
14
15
|
endTextFieldProps,
|
|
15
16
|
unstableEndFieldRef
|
|
16
17
|
}) => {
|
|
17
|
-
const
|
|
18
|
+
const manager = useDateRangeManager(sharedProps);
|
|
19
|
+
const sharedPropsWithDefaults = useFieldInternalPropsWithDefaults({
|
|
20
|
+
manager,
|
|
21
|
+
internalProps: sharedProps
|
|
22
|
+
});
|
|
18
23
|
const {
|
|
19
24
|
value: valueProp,
|
|
20
25
|
defaultValue,
|
|
@@ -30,7 +35,7 @@ export const useMultiInputDateRangeField = ({
|
|
|
30
35
|
timezone: timezoneProp,
|
|
31
36
|
enableAccessibleFieldDOMStructure,
|
|
32
37
|
autoFocus
|
|
33
|
-
} =
|
|
38
|
+
} = sharedPropsWithDefaults;
|
|
34
39
|
const {
|
|
35
40
|
value,
|
|
36
41
|
handleValueChange,
|
|
@@ -48,11 +53,11 @@ export const useMultiInputDateRangeField = ({
|
|
|
48
53
|
validationError,
|
|
49
54
|
getValidationErrorForNewValue
|
|
50
55
|
} = useValidation({
|
|
51
|
-
props:
|
|
56
|
+
props: sharedPropsWithDefaults,
|
|
52
57
|
value,
|
|
53
58
|
timezone,
|
|
54
59
|
validator: validateDateRange,
|
|
55
|
-
onError:
|
|
60
|
+
onError: sharedPropsWithDefaults.onError
|
|
56
61
|
});
|
|
57
62
|
|
|
58
63
|
// TODO: Maybe export utility from `useField` instead of copy/pasting the logic
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { UseMultiInputDateTimeRangeFieldParams } from '../../../MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types';
|
|
2
2
|
import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types';
|
|
3
|
-
export declare const useMultiInputDateTimeRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}>({ sharedProps
|
|
3
|
+
export declare const useMultiInputDateTimeRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}>({ sharedProps, startTextFieldProps, unstableStartFieldRef, endTextFieldProps, unstableEndFieldRef, }: UseMultiInputDateTimeRangeFieldParams<TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps>) => UseMultiInputRangeFieldResponse<TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps>;
|
|
@@ -1,20 +1,25 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import useEventCallback from '@mui/utils/useEventCallback';
|
|
3
3
|
import { unstable_useDateTimeField as useDateTimeField } from '@mui/x-date-pickers/DateTimeField';
|
|
4
|
-
import { useControlledValueWithTimezone,
|
|
4
|
+
import { useControlledValueWithTimezone, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals';
|
|
5
5
|
import { useValidation } from '@mui/x-date-pickers/validation';
|
|
6
6
|
import { validateDateTimeRange } from "../../../validation/index.js";
|
|
7
7
|
import { rangeValueManager } from "../../utils/valueManagers.js";
|
|
8
8
|
import { excludeProps } from "./shared.js";
|
|
9
9
|
import { useMultiInputFieldSelectedSections } from "../useMultiInputFieldSelectedSections.js";
|
|
10
|
+
import { useDateTimeRangeManager } from "../../../managers/index.js";
|
|
10
11
|
export const useMultiInputDateTimeRangeField = ({
|
|
11
|
-
sharedProps
|
|
12
|
+
sharedProps,
|
|
12
13
|
startTextFieldProps,
|
|
13
14
|
unstableStartFieldRef,
|
|
14
15
|
endTextFieldProps,
|
|
15
16
|
unstableEndFieldRef
|
|
16
17
|
}) => {
|
|
17
|
-
const
|
|
18
|
+
const manager = useDateTimeRangeManager(sharedProps);
|
|
19
|
+
const sharedPropsWithDefaults = useFieldInternalPropsWithDefaults({
|
|
20
|
+
manager,
|
|
21
|
+
internalProps: sharedProps
|
|
22
|
+
});
|
|
18
23
|
const {
|
|
19
24
|
value: valueProp,
|
|
20
25
|
defaultValue,
|
|
@@ -30,13 +35,13 @@ export const useMultiInputDateTimeRangeField = ({
|
|
|
30
35
|
timezone: timezoneProp,
|
|
31
36
|
enableAccessibleFieldDOMStructure,
|
|
32
37
|
autoFocus
|
|
33
|
-
} =
|
|
38
|
+
} = sharedPropsWithDefaults;
|
|
34
39
|
const {
|
|
35
40
|
value,
|
|
36
41
|
handleValueChange,
|
|
37
42
|
timezone
|
|
38
43
|
} = useControlledValueWithTimezone({
|
|
39
|
-
name: '
|
|
44
|
+
name: 'useMultiInputDateTimeRangeField',
|
|
40
45
|
timezone: timezoneProp,
|
|
41
46
|
value: valueProp,
|
|
42
47
|
defaultValue,
|
|
@@ -48,11 +53,11 @@ export const useMultiInputDateTimeRangeField = ({
|
|
|
48
53
|
validationError,
|
|
49
54
|
getValidationErrorForNewValue
|
|
50
55
|
} = useValidation({
|
|
51
|
-
props:
|
|
56
|
+
props: sharedPropsWithDefaults,
|
|
52
57
|
value,
|
|
53
58
|
timezone,
|
|
54
59
|
validator: validateDateTimeRange,
|
|
55
|
-
onError:
|
|
60
|
+
onError: sharedPropsWithDefaults.onError
|
|
56
61
|
});
|
|
57
62
|
|
|
58
63
|
// TODO: Maybe export utility from `useField` instead of copy/pasting the logic
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { UseMultiInputTimeRangeFieldParams } from '../../../MultiInputTimeRangeField/MultiInputTimeRangeField.types';
|
|
2
2
|
import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types';
|
|
3
|
-
export declare const useMultiInputTimeRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}>({ sharedProps
|
|
3
|
+
export declare const useMultiInputTimeRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}>({ sharedProps, startTextFieldProps, unstableStartFieldRef, endTextFieldProps, unstableEndFieldRef, }: UseMultiInputTimeRangeFieldParams<TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps>) => UseMultiInputRangeFieldResponse<TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps>;
|
|
@@ -1,20 +1,25 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import useEventCallback from '@mui/utils/useEventCallback';
|
|
3
3
|
import { unstable_useTimeField as useTimeField } from '@mui/x-date-pickers/TimeField';
|
|
4
|
-
import { useControlledValueWithTimezone,
|
|
4
|
+
import { useControlledValueWithTimezone, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals';
|
|
5
5
|
import { useValidation } from '@mui/x-date-pickers/validation';
|
|
6
6
|
import { validateTimeRange } from "../../../validation/index.js";
|
|
7
7
|
import { rangeValueManager } from "../../utils/valueManagers.js";
|
|
8
8
|
import { excludeProps } from "./shared.js";
|
|
9
9
|
import { useMultiInputFieldSelectedSections } from "../useMultiInputFieldSelectedSections.js";
|
|
10
|
+
import { useTimeRangeManager } from "../../../managers/index.js";
|
|
10
11
|
export const useMultiInputTimeRangeField = ({
|
|
11
|
-
sharedProps
|
|
12
|
+
sharedProps,
|
|
12
13
|
startTextFieldProps,
|
|
13
14
|
unstableStartFieldRef,
|
|
14
15
|
endTextFieldProps,
|
|
15
16
|
unstableEndFieldRef
|
|
16
17
|
}) => {
|
|
17
|
-
const
|
|
18
|
+
const manager = useTimeRangeManager(sharedProps);
|
|
19
|
+
const sharedPropsWithDefaults = useFieldInternalPropsWithDefaults({
|
|
20
|
+
manager,
|
|
21
|
+
internalProps: sharedProps
|
|
22
|
+
});
|
|
18
23
|
const {
|
|
19
24
|
value: valueProp,
|
|
20
25
|
defaultValue,
|
|
@@ -30,13 +35,13 @@ export const useMultiInputTimeRangeField = ({
|
|
|
30
35
|
timezone: timezoneProp,
|
|
31
36
|
enableAccessibleFieldDOMStructure,
|
|
32
37
|
autoFocus
|
|
33
|
-
} =
|
|
38
|
+
} = sharedPropsWithDefaults;
|
|
34
39
|
const {
|
|
35
40
|
value,
|
|
36
41
|
handleValueChange,
|
|
37
42
|
timezone
|
|
38
43
|
} = useControlledValueWithTimezone({
|
|
39
|
-
name: '
|
|
44
|
+
name: 'useMultiInputTimeRangeField',
|
|
40
45
|
timezone: timezoneProp,
|
|
41
46
|
value: valueProp,
|
|
42
47
|
defaultValue,
|
|
@@ -48,11 +53,11 @@ export const useMultiInputTimeRangeField = ({
|
|
|
48
53
|
validationError,
|
|
49
54
|
getValidationErrorForNewValue
|
|
50
55
|
} = useValidation({
|
|
51
|
-
props:
|
|
52
|
-
validator: validateTimeRange,
|
|
56
|
+
props: sharedPropsWithDefaults,
|
|
53
57
|
value,
|
|
54
58
|
timezone,
|
|
55
|
-
|
|
59
|
+
validator: validateTimeRange,
|
|
60
|
+
onError: sharedPropsWithDefaults.onError
|
|
56
61
|
});
|
|
57
62
|
|
|
58
63
|
// TODO: Maybe export utility from `useField` instead of copy/pasting the logic
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns information about the range position of the picker that wraps the current component.
|
|
3
|
+
* If no picker wraps the current component, returns `null`.
|
|
4
|
+
*/
|
|
5
|
+
export declare function useNullablePickerRangePositionContext(): import("./useRangePosition").UseRangePositionResponse | null;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { PickerRangePositionContext } from "../../hooks/usePickerRangePositionContext.js";
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Returns information about the range position of the picker that wraps the current component.
|
|
6
|
+
* If no picker wraps the current component, returns `null`.
|
|
7
|
+
*/
|
|
8
|
+
export function useNullablePickerRangePositionContext() {
|
|
9
|
+
return React.useContext(PickerRangePositionContext);
|
|
10
|
+
}
|
|
@@ -24,4 +24,4 @@ export interface UseRangePositionResponse {
|
|
|
24
24
|
rangePosition: RangePosition;
|
|
25
25
|
onRangePositionChange: (newPosition: RangePosition) => void;
|
|
26
26
|
}
|
|
27
|
-
export declare const useRangePosition: (props: UseRangePositionProps, singleInputFieldRef?: React.RefObject<FieldRef<PickerRangeValue
|
|
27
|
+
export declare const useRangePosition: (props: UseRangePositionProps, singleInputFieldRef?: React.RefObject<FieldRef<PickerRangeValue> | null>) => UseRangePositionResponse;
|