@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.
Files changed (144) hide show
  1. package/{AdapterDateFnsJalaliV3 → AdapterDateFnsJalaliV2}/index.d.ts +1 -1
  2. package/{AdapterDateFnsJalaliV3 → AdapterDateFnsJalaliV2}/index.js +1 -1
  3. package/{AdapterDateFnsJalaliV3 → AdapterDateFnsJalaliV2}/package.json +1 -1
  4. package/{AdapterDateFnsV3 → AdapterDateFnsV2}/index.d.ts +1 -1
  5. package/{AdapterDateFnsV3 → AdapterDateFnsV2}/index.js +1 -1
  6. package/{AdapterDateFnsV3 → AdapterDateFnsV2}/package.json +1 -1
  7. package/CHANGELOG.md +127 -1
  8. package/DateRangeCalendar/DateRangeCalendar.js +9 -7
  9. package/DateRangePicker/DateRangePicker.js +1 -1
  10. package/DateRangePicker/DateRangePicker.types.d.ts +5 -0
  11. package/DateRangePicker/DateRangePickerToolbar.d.ts +2 -3
  12. package/DateRangePicker/DateRangePickerToolbar.js +25 -17
  13. package/DateRangePicker/shared.d.ts +1 -1
  14. package/DateTimeRangePicker/DateTimeRangePicker.js +2 -2
  15. package/DateTimeRangePicker/DateTimeRangePickerTabs.d.ts +3 -4
  16. package/DateTimeRangePicker/DateTimeRangePickerTabs.js +8 -7
  17. package/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.d.ts +8 -10
  18. package/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js +7 -5
  19. package/DateTimeRangePicker/DateTimeRangePickerToolbar.d.ts +2 -3
  20. package/DateTimeRangePicker/DateTimeRangePickerToolbar.js +26 -28
  21. package/DateTimeRangePicker/shared.d.ts +2 -2
  22. package/DesktopDateRangePicker/DesktopDateRangePicker.js +9 -3
  23. package/DesktopDateRangePicker/DesktopDateRangePicker.types.d.ts +5 -0
  24. package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js +17 -14
  25. package/MobileDateRangePicker/MobileDateRangePicker.js +2 -2
  26. package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js +15 -8
  27. package/SingleInputDateRangeField/useSingleInputDateRangeField.d.ts +1 -1
  28. package/SingleInputDateRangeField/useSingleInputDateRangeField.js +13 -14
  29. package/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.d.ts +1 -1
  30. package/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js +13 -14
  31. package/SingleInputTimeRangeField/useSingleInputTimeRangeField.d.ts +1 -1
  32. package/SingleInputTimeRangeField/useSingleInputTimeRangeField.js +13 -14
  33. package/dateRangeViewRenderers/dateRangeViewRenderers.d.ts +2 -2
  34. package/dateRangeViewRenderers/dateRangeViewRenderers.js +0 -6
  35. package/hooks/index.d.ts +1 -0
  36. package/hooks/index.js +1 -0
  37. package/hooks/package.json +6 -0
  38. package/hooks/usePickerRangePositionContext.d.ts +7 -0
  39. package/hooks/usePickerRangePositionContext.js +15 -0
  40. package/index.d.ts +2 -0
  41. package/index.js +4 -2
  42. package/internals/hooks/models/useRangePicker.d.ts +2 -2
  43. package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +26 -43
  44. package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.d.ts +3 -5
  45. package/internals/hooks/useEnrichedRangePickerFieldProps.d.ts +5 -5
  46. package/internals/hooks/useEnrichedRangePickerFieldProps.js +3 -3
  47. package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +21 -35
  48. package/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.d.ts +3 -5
  49. package/internals/hooks/useMultiInputFieldSelectedSections.d.ts +10 -12
  50. package/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.d.ts +1 -1
  51. package/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js +11 -6
  52. package/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.d.ts +2 -2
  53. package/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js +12 -7
  54. package/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.d.ts +2 -2
  55. package/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js +13 -8
  56. package/internals/hooks/useNullablePickerRangePositionContext.d.ts +5 -0
  57. package/internals/hooks/useNullablePickerRangePositionContext.js +10 -0
  58. package/internals/hooks/useRangePosition.d.ts +1 -1
  59. package/internals/hooks/useStaticRangePicker/useStaticRangePicker.js +14 -24
  60. package/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.d.ts +2 -2
  61. package/internals/utils/date-range-manager.js +2 -1
  62. package/internals/utils/releaseInfo.js +1 -1
  63. package/internals/utils/valueManagers.js +7 -7
  64. package/managers/index.d.ts +6 -0
  65. package/managers/index.js +3 -0
  66. package/managers/package.json +6 -0
  67. package/managers/useDateRangeManager.d.ts +15 -0
  68. package/managers/useDateRangeManager.js +31 -0
  69. package/managers/useDateTimeRangeManager.d.ts +15 -0
  70. package/managers/useDateTimeRangeManager.js +31 -0
  71. package/managers/useTimeRangeManager.d.ts +15 -0
  72. package/managers/useTimeRangeManager.js +29 -0
  73. package/models/range.d.ts +0 -1
  74. package/modern/{AdapterDateFnsJalaliV3 → AdapterDateFnsJalaliV2}/index.js +1 -1
  75. package/modern/{AdapterDateFnsV3 → AdapterDateFnsV2}/index.js +1 -1
  76. package/modern/DateRangeCalendar/DateRangeCalendar.js +9 -7
  77. package/modern/DateRangePicker/DateRangePicker.js +1 -1
  78. package/modern/DateRangePicker/DateRangePickerToolbar.js +25 -17
  79. package/modern/DateTimeRangePicker/DateTimeRangePicker.js +2 -2
  80. package/modern/DateTimeRangePicker/DateTimeRangePickerTabs.js +8 -7
  81. package/modern/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js +7 -5
  82. package/modern/DateTimeRangePicker/DateTimeRangePickerToolbar.js +26 -28
  83. package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js +9 -3
  84. package/modern/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js +17 -14
  85. package/modern/MobileDateRangePicker/MobileDateRangePicker.js +2 -2
  86. package/modern/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js +15 -8
  87. package/modern/SingleInputDateRangeField/useSingleInputDateRangeField.js +13 -14
  88. package/modern/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js +13 -14
  89. package/modern/SingleInputTimeRangeField/useSingleInputTimeRangeField.js +13 -14
  90. package/modern/dateRangeViewRenderers/dateRangeViewRenderers.js +0 -6
  91. package/modern/hooks/index.js +1 -0
  92. package/modern/hooks/usePickerRangePositionContext.js +15 -0
  93. package/modern/index.js +4 -2
  94. package/modern/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +26 -43
  95. package/modern/internals/hooks/useEnrichedRangePickerFieldProps.js +3 -3
  96. package/modern/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +21 -35
  97. package/modern/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js +11 -6
  98. package/modern/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js +12 -7
  99. package/modern/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js +13 -8
  100. package/modern/internals/hooks/useNullablePickerRangePositionContext.js +10 -0
  101. package/modern/internals/hooks/useStaticRangePicker/useStaticRangePicker.js +14 -24
  102. package/modern/internals/utils/date-range-manager.js +2 -1
  103. package/modern/internals/utils/releaseInfo.js +1 -1
  104. package/modern/internals/utils/valueManagers.js +7 -7
  105. package/modern/managers/index.js +3 -0
  106. package/modern/managers/useDateRangeManager.js +31 -0
  107. package/modern/managers/useDateTimeRangeManager.js +31 -0
  108. package/modern/managers/useTimeRangeManager.js +29 -0
  109. package/node/{AdapterDateFnsJalaliV3 → AdapterDateFnsJalaliV2}/index.js +1 -1
  110. package/node/{AdapterDateFnsV3 → AdapterDateFnsV2}/index.js +1 -1
  111. package/node/DateRangeCalendar/DateRangeCalendar.js +9 -7
  112. package/node/DateRangePicker/DateRangePicker.js +1 -1
  113. package/node/DateRangePicker/DateRangePickerToolbar.js +24 -16
  114. package/node/DateTimeRangePicker/DateTimeRangePicker.js +2 -2
  115. package/node/DateTimeRangePicker/DateTimeRangePickerTabs.js +8 -7
  116. package/node/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js +7 -5
  117. package/node/DateTimeRangePicker/DateTimeRangePickerToolbar.js +26 -28
  118. package/node/DesktopDateRangePicker/DesktopDateRangePicker.js +9 -3
  119. package/node/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js +17 -14
  120. package/node/MobileDateRangePicker/MobileDateRangePicker.js +2 -2
  121. package/node/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js +15 -8
  122. package/node/SingleInputDateRangeField/useSingleInputDateRangeField.js +12 -14
  123. package/node/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js +12 -14
  124. package/node/SingleInputTimeRangeField/useSingleInputTimeRangeField.js +12 -14
  125. package/node/dateRangeViewRenderers/dateRangeViewRenderers.js +0 -6
  126. package/node/hooks/index.js +12 -0
  127. package/node/hooks/usePickerRangePositionContext.js +22 -0
  128. package/node/index.js +23 -1
  129. package/node/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +26 -43
  130. package/node/internals/hooks/useEnrichedRangePickerFieldProps.js +3 -3
  131. package/node/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +21 -35
  132. package/node/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js +10 -5
  133. package/node/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js +11 -6
  134. package/node/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js +12 -7
  135. package/node/internals/hooks/useNullablePickerRangePositionContext.js +16 -0
  136. package/node/internals/hooks/useStaticRangePicker/useStaticRangePicker.js +14 -24
  137. package/node/internals/utils/date-range-manager.js +2 -1
  138. package/node/internals/utils/releaseInfo.js +1 -1
  139. package/node/internals/utils/valueManagers.js +7 -7
  140. package/node/managers/index.js +26 -0
  141. package/node/managers/useDateRangeManager.js +38 -0
  142. package/node/managers/useDateTimeRangeManager.js +38 -0
  143. package/node/managers/useTimeRangeManager.js +36 -0
  144. package/package.json +5 -5
@@ -24,7 +24,7 @@ const useMultiInputFieldSlotProps = ({
24
24
  anchorRef,
25
25
  currentView,
26
26
  initialView,
27
- onViewChange,
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
- onViewChange?.(initialView);
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
- onViewChange?.(initialView);
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__*/_jsxs(PickerProvider, _extends({}, providerProps, {
158
- children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
159
- slots: slots,
160
- slotProps: slotProps,
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: slotPropsForLayout,
164
- children: renderCurrentView()
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,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, useDefaultizedDateField } from '@mui/x-date-pickers/internals';
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: inSharedProps,
12
+ sharedProps,
12
13
  startTextFieldProps,
13
14
  unstableStartFieldRef,
14
15
  endTextFieldProps,
15
16
  unstableEndFieldRef
16
17
  }) => {
17
- const sharedProps = useDefaultizedDateField(inSharedProps);
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
- } = sharedProps;
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: sharedProps,
56
+ props: sharedPropsWithDefaults,
52
57
  value,
53
58
  timezone,
54
59
  validator: validateDateRange,
55
- onError: sharedProps.onError
60
+ onError: sharedPropsWithDefaults.onError
56
61
  });
57
62
 
58
63
  // TODO: Maybe export utility from `useField` instead of copy/pasting the logic
@@ -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, useDefaultizedDateTimeField } from '@mui/x-date-pickers/internals';
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: inSharedProps,
12
+ sharedProps,
12
13
  startTextFieldProps,
13
14
  unstableStartFieldRef,
14
15
  endTextFieldProps,
15
16
  unstableEndFieldRef
16
17
  }) => {
17
- const sharedProps = useDefaultizedDateTimeField(inSharedProps);
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
- } = sharedProps;
38
+ } = sharedPropsWithDefaults;
34
39
  const {
35
40
  value,
36
41
  handleValueChange,
37
42
  timezone
38
43
  } = useControlledValueWithTimezone({
39
- name: 'useMultiInputDateRangeField',
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: sharedProps,
56
+ props: sharedPropsWithDefaults,
52
57
  value,
53
58
  timezone,
54
59
  validator: validateDateTimeRange,
55
- onError: sharedProps.onError
60
+ onError: sharedPropsWithDefaults.onError
56
61
  });
57
62
 
58
63
  // TODO: Maybe export utility from `useField` instead of copy/pasting the logic
@@ -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, useDefaultizedTimeField } from '@mui/x-date-pickers/internals';
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: inSharedProps,
12
+ sharedProps,
12
13
  startTextFieldProps,
13
14
  unstableStartFieldRef,
14
15
  endTextFieldProps,
15
16
  unstableEndFieldRef
16
17
  }) => {
17
- const sharedProps = useDefaultizedTimeField(inSharedProps);
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
- } = sharedProps;
38
+ } = sharedPropsWithDefaults;
34
39
  const {
35
40
  value,
36
41
  handleValueChange,
37
42
  timezone
38
43
  } = useControlledValueWithTimezone({
39
- name: 'useMultiInputDateRangeField',
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: sharedProps,
52
- validator: validateTimeRange,
56
+ props: sharedPropsWithDefaults,
53
57
  value,
54
58
  timezone,
55
- onError: sharedProps.onError
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,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
+ }
@@ -7,6 +7,7 @@ import { styled } from '@mui/material/styles';
7
7
  import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
8
8
  import { usePicker, DIALOG_WIDTH, PickerProvider } from '@mui/x-date-pickers/internals';
9
9
  import { useRangePosition } from "../useRangePosition.js";
10
+ import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
10
11
  import { jsx as _jsx } from "react/jsx-runtime";
11
12
  const PickerStaticLayout = styled(PickersLayout)(({
12
13
  theme
@@ -35,12 +36,8 @@ export const useStaticRangePicker = _ref => {
35
36
  displayStaticWrapperAs,
36
37
  autoFocus
37
38
  } = props;
39
+ const rangePositionResponse = useRangePosition(props);
38
40
  const {
39
- rangePosition,
40
- onRangePositionChange
41
- } = useRangePosition(props);
42
- const {
43
- layoutProps,
44
41
  providerProps,
45
42
  renderCurrentView
46
43
  } = usePicker(_extends({}, pickerParams, {
@@ -48,29 +45,22 @@ export const useStaticRangePicker = _ref => {
48
45
  autoFocusView: autoFocus ?? false,
49
46
  fieldRef: undefined,
50
47
  localeText,
51
- additionalViewProps: {
52
- rangePosition,
53
- onRangePositionChange
54
- },
55
48
  variant: displayStaticWrapperAs
56
49
  }));
57
50
  const Layout = slots?.layout ?? PickerStaticLayout;
58
- const slotPropsForLayout = _extends({}, slotProps, {
59
- toolbar: _extends({}, slotProps?.toolbar, {
60
- rangePosition,
61
- onRangePositionChange
62
- })
63
- });
64
- const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
65
- children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
66
- slots: slots,
67
- slotProps: slotPropsForLayout,
68
- sx: [...(Array.isArray(sx) ? sx : [sx]), ...(Array.isArray(slotProps?.layout?.sx) ? slotProps.layout.sx : [slotProps?.layout?.sx])],
69
- className: clsx(className, slotProps?.layout?.className),
70
- ref: ref,
71
- children: renderCurrentView()
51
+ const renderPicker = () => /*#__PURE__*/_jsx(PickerRangePositionContext.Provider, {
52
+ value: rangePositionResponse,
53
+ children: /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
54
+ children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
55
+ slots: slots,
56
+ slotProps: slotProps,
57
+ sx: [...(Array.isArray(sx) ? sx : [sx]), ...(Array.isArray(slotProps?.layout?.sx) ? slotProps.layout.sx : [slotProps?.layout?.sx])],
58
+ className: clsx(className, slotProps?.layout?.className),
59
+ ref: ref,
60
+ children: renderCurrentView()
61
+ }))
72
62
  }))
73
- }));
63
+ });
74
64
  return {
75
65
  renderPicker
76
66
  };
@@ -8,7 +8,8 @@ export function calculateRangeChange({
8
8
  shouldMergeDateAndTime = false,
9
9
  referenceDate
10
10
  }) {
11
- const [start, end] = range;
11
+ const start = !utils.isValid(range[0]) ? null : range[0];
12
+ const end = !utils.isValid(range[1]) ? null : range[1];
12
13
  if (shouldMergeDateAndTime && selectedDate) {
13
14
  // If there is a date already selected, then we want to keep its time
14
15
  if (start && rangePosition === 'start') {
@@ -1,6 +1,6 @@
1
1
  import { ponyfillGlobal } from '@mui/utils';
2
2
  export const getReleaseInfo = () => {
3
- const releaseInfo = "MTczNTE2NDAwMDAwMA==";
3
+ const releaseInfo = "MTczNjM3NzIwMDAwMA==";
4
4
  if (process.env.NODE_ENV !== 'production') {
5
5
  // A simple hack to set the value in the test environment (has no build step).
6
6
  // eslint-disable-next-line no-useless-concat
@@ -12,8 +12,8 @@ export const rangeValueManager = {
12
12
  referenceDate: referenceDateProp
13
13
  } = _ref,
14
14
  params = _objectWithoutPropertiesLoose(_ref, _excluded);
15
- const shouldKeepStartDate = value[0] != null && params.utils.isValid(value[0]);
16
- const shouldKeepEndDate = value[1] != null && params.utils.isValid(value[1]);
15
+ const shouldKeepStartDate = params.utils.isValid(value[0]);
16
+ const shouldKeepEndDate = params.utils.isValid(value[1]);
17
17
  if (shouldKeepStartDate && shouldKeepEndDate) {
18
18
  return value;
19
19
  }
@@ -26,8 +26,8 @@ export const rangeValueManager = {
26
26
  hasError: error => error[0] != null || error[1] != null,
27
27
  defaultErrorState: [null, null],
28
28
  getTimezone: (utils, value) => {
29
- const timezoneStart = value[0] == null || !utils.isValid(value[0]) ? null : utils.getTimezone(value[0]);
30
- const timezoneEnd = value[1] == null || !utils.isValid(value[1]) ? null : utils.getTimezone(value[1]);
29
+ const timezoneStart = utils.isValid(value[0]) ? utils.getTimezone(value[0]) : null;
30
+ const timezoneEnd = utils.isValid(value[1]) ? utils.getTimezone(value[1]) : null;
31
31
  if (timezoneStart != null && timezoneEnd != null && timezoneStart !== timezoneEnd) {
32
32
  throw new Error('MUI X: The timezone of the start and the end date should be the same.');
33
33
  }
@@ -39,8 +39,8 @@ export const getRangeFieldValueManager = ({
39
39
  dateSeparator = '–'
40
40
  }) => ({
41
41
  updateReferenceValue: (utils, value, prevReferenceValue) => {
42
- const shouldKeepStartDate = value[0] != null && utils.isValid(value[0]);
43
- const shouldKeepEndDate = value[1] != null && utils.isValid(value[1]);
42
+ const shouldKeepStartDate = utils.isValid(value[0]);
43
+ const shouldKeepEndDate = utils.isValid(value[1]);
44
44
  if (!shouldKeepStartDate && !shouldKeepEndDate) {
45
45
  return prevReferenceValue;
46
46
  }
@@ -111,7 +111,7 @@ export const getRangeFieldValueManager = ({
111
111
  },
112
112
  getNewValuesFromNewActiveDate: newActiveDate => ({
113
113
  value: updateDateInRange(newActiveDate, state.value),
114
- referenceValue: newActiveDate == null || !utils.isValid(newActiveDate) ? state.referenceValue : updateDateInRange(newActiveDate, state.referenceValue)
114
+ referenceValue: !utils.isValid(newActiveDate) ? state.referenceValue : updateDateInRange(newActiveDate, state.referenceValue)
115
115
  })
116
116
  };
117
117
  }
@@ -0,0 +1,3 @@
1
+ export { useDateRangeManager } from "./useDateRangeManager.js";
2
+ export { useTimeRangeManager } from "./useTimeRangeManager.js";
3
+ export { useDateTimeRangeManager } from "./useDateTimeRangeManager.js";
@@ -0,0 +1,31 @@
1
+ 'use client';
2
+
3
+ import _extends from "@babel/runtime/helpers/esm/extends";
4
+ import * as React from 'react';
5
+ import { getDateFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
6
+ import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
7
+ import { validateDateRange } from "../validation/index.js";
8
+ export function useDateRangeManager(parameters = {}) {
9
+ const {
10
+ enableAccessibleFieldDOMStructure = true,
11
+ dateSeparator
12
+ } = parameters;
13
+ return React.useMemo(() => ({
14
+ valueType: 'date',
15
+ validator: validateDateRange,
16
+ internal_valueManager: rangeValueManager,
17
+ internal_fieldValueManager: getRangeFieldValueManager({
18
+ dateSeparator
19
+ }),
20
+ internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
21
+ internal_applyDefaultsToFieldInternalProps: ({
22
+ internalProps,
23
+ utils,
24
+ defaultDates
25
+ }) => _extends({}, internalProps, getDateFieldInternalPropsDefaults({
26
+ defaultDates,
27
+ utils,
28
+ internalProps
29
+ }))
30
+ }), [enableAccessibleFieldDOMStructure, dateSeparator]);
31
+ }
@@ -0,0 +1,31 @@
1
+ 'use client';
2
+
3
+ import _extends from "@babel/runtime/helpers/esm/extends";
4
+ import * as React from 'react';
5
+ import { getDateTimeFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
6
+ import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
7
+ import { validateDateTimeRange } from "../validation/index.js";
8
+ export function useDateTimeRangeManager(parameters = {}) {
9
+ const {
10
+ enableAccessibleFieldDOMStructure = true,
11
+ dateSeparator
12
+ } = parameters;
13
+ return React.useMemo(() => ({
14
+ valueType: 'date-time',
15
+ validator: validateDateTimeRange,
16
+ internal_valueManager: rangeValueManager,
17
+ internal_fieldValueManager: getRangeFieldValueManager({
18
+ dateSeparator
19
+ }),
20
+ internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
21
+ internal_applyDefaultsToFieldInternalProps: ({
22
+ internalProps,
23
+ utils,
24
+ defaultDates
25
+ }) => _extends({}, internalProps, getDateTimeFieldInternalPropsDefaults({
26
+ internalProps,
27
+ utils,
28
+ defaultDates
29
+ }))
30
+ }), [enableAccessibleFieldDOMStructure, dateSeparator]);
31
+ }
@@ -0,0 +1,29 @@
1
+ 'use client';
2
+
3
+ import _extends from "@babel/runtime/helpers/esm/extends";
4
+ import * as React from 'react';
5
+ import { getTimeFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
6
+ import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
7
+ import { validateTimeRange } from "../validation/index.js";
8
+ export function useTimeRangeManager(parameters = {}) {
9
+ const {
10
+ enableAccessibleFieldDOMStructure = true,
11
+ dateSeparator
12
+ } = parameters;
13
+ return React.useMemo(() => ({
14
+ valueType: 'time',
15
+ validator: validateTimeRange,
16
+ internal_valueManager: rangeValueManager,
17
+ internal_fieldValueManager: getRangeFieldValueManager({
18
+ dateSeparator
19
+ }),
20
+ internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
21
+ internal_applyDefaultsToFieldInternalProps: ({
22
+ internalProps,
23
+ utils
24
+ }) => _extends({}, internalProps, getTimeFieldInternalPropsDefaults({
25
+ utils,
26
+ internalProps
27
+ }))
28
+ }), [enableAccessibleFieldDOMStructure, dateSeparator]);
29
+ }
@@ -9,4 +9,4 @@ Object.defineProperty(exports, "AdapterDateFnsJalali", {
9
9
  return _AdapterDateFnsJalaliV.AdapterDateFnsJalali;
10
10
  }
11
11
  });
12
- var _AdapterDateFnsJalaliV = require("@mui/x-date-pickers/AdapterDateFnsJalaliV3");
12
+ var _AdapterDateFnsJalaliV = require("@mui/x-date-pickers/AdapterDateFnsJalaliV2");
@@ -9,4 +9,4 @@ Object.defineProperty(exports, "AdapterDateFns", {
9
9
  return _AdapterDateFnsV.AdapterDateFns;
10
10
  }
11
11
  });
12
- var _AdapterDateFnsV = require("@mui/x-date-pickers/AdapterDateFnsV3");
12
+ var _AdapterDateFnsV = require("@mui/x-date-pickers/AdapterDateFnsV2");
@@ -32,6 +32,7 @@ var _useDragRange2 = require("./useDragRange");
32
32
  var _useRangePosition = require("../internals/hooks/useRangePosition");
33
33
  var _dimensions = require("../internals/constants/dimensions");
34
34
  var _PickersRangeCalendarHeader = require("../PickersRangeCalendarHeader");
35
+ var _useNullablePickerRangePositionContext = require("../internals/hooks/useNullablePickerRangePositionContext");
35
36
  var _jsxRuntime = require("react/jsx-runtime");
36
37
  const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "classes", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
37
38
  _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
@@ -142,8 +143,8 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
142
143
  reduceAnimations,
143
144
  onMonthChange,
144
145
  rangePosition: rangePositionProp,
145
- defaultRangePosition: inDefaultRangePosition,
146
- onRangePositionChange: inOnRangePositionChange,
146
+ defaultRangePosition: defaultRangePositionProp,
147
+ onRangePositionChange: onRangePositionChangeProp,
147
148
  calendars,
148
149
  currentMonthCalendarPosition = 1,
149
150
  slots,
@@ -168,6 +169,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
168
169
  onViewChange
169
170
  } = props,
170
171
  other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
172
+ const rangePositionContext = (0, _useNullablePickerRangePositionContext.useNullablePickerRangePositionContext)();
171
173
  const {
172
174
  value,
173
175
  handleValueChange,
@@ -199,9 +201,9 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
199
201
  rangePosition,
200
202
  onRangePositionChange
201
203
  } = (0, _useRangePosition.useRangePosition)({
202
- rangePosition: rangePositionProp,
203
- defaultRangePosition: inDefaultRangePosition,
204
- onRangePositionChange: inOnRangePositionChange
204
+ rangePosition: rangePositionProp ?? rangePositionContext?.rangePosition,
205
+ defaultRangePosition: defaultRangePositionProp,
206
+ onRangePositionChange: onRangePositionChangeProp ?? rangePositionContext?.onRangePositionChange
205
207
  });
206
208
  const handleDatePositionChange = (0, _useEventCallback.default)(position => {
207
209
  if (rangePosition !== position) {
@@ -235,7 +237,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
235
237
 
236
238
  // Range going for the start of the start day to the end of the end day.
237
239
  // This makes sure that `isWithinRange` works with any time in the start and end day.
238
- const valueDayRange = React.useMemo(() => [value[0] == null || !utils.isValid(value[0]) ? value[0] : utils.startOfDay(value[0]), value[1] == null || !utils.isValid(value[1]) ? value[1] : utils.endOfDay(value[1])], [value, utils]);
240
+ const valueDayRange = React.useMemo(() => [!utils.isValid(value[0]) ? value[0] : utils.startOfDay(value[0]), !utils.isValid(value[1]) ? value[1] : utils.endOfDay(value[1])], [value, utils]);
239
241
  const _useDragRange = (0, _useDragRange2.useDragRange)({
240
242
  disableDragEditing: shouldDisableDragEditing,
241
243
  onDrop: handleDrop,
@@ -323,7 +325,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
323
325
  const prevValue = React.useRef(null);
324
326
  React.useEffect(() => {
325
327
  const date = rangePosition === 'start' ? value[0] : value[1];
326
- if (!date || !utils.isValid(date)) {
328
+ if (!utils.isValid(date)) {
327
329
  return;
328
330
  }
329
331
  const prevDate = rangePosition === 'start' ? prevValue.current?.[0] : prevValue.current?.[1];
@@ -70,7 +70,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
70
70
  calendars: _propTypes.default.oneOf([1, 2, 3]),
71
71
  className: _propTypes.default.string,
72
72
  /**
73
- * If `true`, the popover or modal will close after submitting the full date.
73
+ * If `true`, the Picker will close after submitting the full date.
74
74
  * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
75
75
  */
76
76
  closeOnSelect: _propTypes.default.bool,