@mui/x-date-pickers-pro 8.0.0-alpha.7 → 8.0.0-alpha.9

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 (199) hide show
  1. package/CHANGELOG.md +551 -3
  2. package/DateRangeCalendar/DateRangeCalendar.js +4 -4
  3. package/DateRangePicker/DateRangePickerToolbar.js +3 -3
  4. package/DateTimeRangePicker/DateTimeRangePickerTabs.js +3 -3
  5. package/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js +2 -2
  6. package/DateTimeRangePicker/DateTimeRangePickerToolbar.js +7 -7
  7. package/MultiInputDateRangeField/MultiInputDateRangeField.d.ts +9 -4
  8. package/MultiInputDateRangeField/MultiInputDateRangeField.js +12 -116
  9. package/MultiInputDateRangeField/index.d.ts +5 -3
  10. package/MultiInputDateRangeField/index.js +2 -2
  11. package/MultiInputDateRangeField/multiInputDateRangeFieldClasses.d.ts +6 -0
  12. package/MultiInputDateRangeField/multiInputDateRangeFieldClasses.js +4 -0
  13. package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.d.ts +9 -4
  14. package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js +12 -116
  15. package/MultiInputDateTimeRangeField/index.d.ts +5 -3
  16. package/MultiInputDateTimeRangeField/index.js +2 -2
  17. package/MultiInputDateTimeRangeField/multiInputDateTimeRangeFieldClasses.d.ts +6 -0
  18. package/MultiInputDateTimeRangeField/multiInputDateTimeRangeFieldClasses.js +4 -0
  19. package/MultiInputTimeRangeField/MultiInputTimeRangeField.d.ts +9 -4
  20. package/MultiInputTimeRangeField/MultiInputTimeRangeField.js +13 -117
  21. package/MultiInputTimeRangeField/index.d.ts +5 -3
  22. package/MultiInputTimeRangeField/index.js +2 -2
  23. package/MultiInputTimeRangeField/multiInputTimeRangeFieldClasses.d.ts +6 -0
  24. package/MultiInputTimeRangeField/multiInputTimeRangeFieldClasses.js +4 -0
  25. package/SingleInputDateRangeField/SingleInputDateRangeField.js +20 -30
  26. package/SingleInputDateRangeField/SingleInputDateRangeField.types.d.ts +6 -17
  27. package/SingleInputDateRangeField/useSingleInputDateRangeField.d.ts +1 -1
  28. package/SingleInputDateRangeField/useSingleInputDateRangeField.js +2 -1
  29. package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js +20 -30
  30. package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.d.ts +6 -18
  31. package/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.d.ts +1 -1
  32. package/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js +2 -1
  33. package/SingleInputTimeRangeField/SingleInputTimeRangeField.js +20 -30
  34. package/SingleInputTimeRangeField/SingleInputTimeRangeField.types.d.ts +6 -18
  35. package/SingleInputTimeRangeField/useSingleInputTimeRangeField.d.ts +1 -1
  36. package/SingleInputTimeRangeField/useSingleInputTimeRangeField.js +2 -1
  37. package/hooks/index.d.ts +1 -0
  38. package/hooks/index.js +2 -1
  39. package/hooks/useMultiInputRangeField/index.d.ts +1 -0
  40. package/hooks/useMultiInputRangeField/index.js +1 -0
  41. package/hooks/useMultiInputRangeField/useMultiInputRangeField.d.ts +53 -0
  42. package/hooks/useMultiInputRangeField/useMultiInputRangeField.js +149 -0
  43. package/{internals/hooks/useMultiInputFieldSelectedSections.d.ts → hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.d.ts} +3 -4
  44. package/{modern/internals/hooks/useMultiInputFieldSelectedSections.js → hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.js} +10 -8
  45. package/hooks/useMultiInputRangeField/useMultiInputRangeFieldTextFieldProps.d.ts +17 -0
  46. package/hooks/useMultiInputRangeField/useMultiInputRangeFieldTextFieldProps.js +59 -0
  47. package/index.js +1 -1
  48. package/internals/hooks/models/index.d.ts +1 -1
  49. package/internals/hooks/models/useRangePicker.d.ts +4 -6
  50. package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +32 -42
  51. package/internals/hooks/{useEnrichedRangePickerFieldProps.d.ts → useEnrichedRangePickerField.d.ts} +15 -6
  52. package/internals/hooks/{useEnrichedRangePickerFieldProps.js → useEnrichedRangePickerField.js} +39 -52
  53. package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +23 -32
  54. package/internals/hooks/useRangePosition.d.ts +1 -1
  55. package/internals/hooks/useRangePosition.js +1 -1
  56. package/internals/models/dateTimeRange.d.ts +1 -6
  57. package/internals/models/fields.d.ts +1 -2
  58. package/internals/models/index.d.ts +0 -1
  59. package/internals/models/index.js +0 -1
  60. package/internals/models/managers.d.ts +3 -0
  61. package/internals/utils/createMultiInputRangeField/createMultiInputRangeField.d.ts +3 -0
  62. package/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js +133 -0
  63. package/internals/utils/createMultiInputRangeField/createMultiInputRangeField.types.d.ts +72 -0
  64. package/internals/utils/createMultiInputRangeField/index.d.ts +3 -0
  65. package/internals/utils/createMultiInputRangeField/index.js +2 -0
  66. package/internals/utils/releaseInfo.js +1 -1
  67. package/managers/index.d.ts +3 -3
  68. package/managers/useDateRangeManager.d.ts +1 -1
  69. package/managers/useDateRangeManager.js +3 -1
  70. package/managers/useDateTimeRangeManager.d.ts +1 -1
  71. package/managers/useDateTimeRangeManager.js +3 -1
  72. package/managers/useTimeRangeManager.d.ts +1 -1
  73. package/managers/useTimeRangeManager.js +3 -1
  74. package/models/fields.d.ts +1 -2
  75. package/models/index.d.ts +0 -2
  76. package/models/index.js +0 -2
  77. package/modern/DateRangeCalendar/DateRangeCalendar.js +4 -4
  78. package/modern/DateRangePicker/DateRangePickerToolbar.js +3 -3
  79. package/modern/DateTimeRangePicker/DateTimeRangePickerTabs.js +3 -3
  80. package/modern/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js +2 -2
  81. package/modern/DateTimeRangePicker/DateTimeRangePickerToolbar.js +7 -7
  82. package/modern/MultiInputDateRangeField/MultiInputDateRangeField.js +12 -116
  83. package/modern/MultiInputDateRangeField/index.js +2 -2
  84. package/modern/MultiInputDateRangeField/multiInputDateRangeFieldClasses.js +4 -0
  85. package/modern/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js +12 -116
  86. package/modern/MultiInputDateTimeRangeField/index.js +2 -2
  87. package/modern/MultiInputDateTimeRangeField/multiInputDateTimeRangeFieldClasses.js +4 -0
  88. package/modern/MultiInputTimeRangeField/MultiInputTimeRangeField.js +13 -117
  89. package/modern/MultiInputTimeRangeField/index.js +2 -2
  90. package/modern/MultiInputTimeRangeField/multiInputTimeRangeFieldClasses.js +4 -0
  91. package/modern/SingleInputDateRangeField/SingleInputDateRangeField.js +20 -30
  92. package/modern/SingleInputDateRangeField/useSingleInputDateRangeField.js +2 -1
  93. package/modern/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js +20 -30
  94. package/modern/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js +2 -1
  95. package/modern/SingleInputTimeRangeField/SingleInputTimeRangeField.js +20 -30
  96. package/modern/SingleInputTimeRangeField/useSingleInputTimeRangeField.js +2 -1
  97. package/modern/hooks/index.js +2 -1
  98. package/modern/hooks/useMultiInputRangeField/index.js +1 -0
  99. package/modern/hooks/useMultiInputRangeField/useMultiInputRangeField.js +149 -0
  100. package/{internals/hooks/useMultiInputFieldSelectedSections.js → modern/hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.js} +10 -8
  101. package/modern/hooks/useMultiInputRangeField/useMultiInputRangeFieldTextFieldProps.js +59 -0
  102. package/modern/index.js +1 -1
  103. package/modern/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +32 -42
  104. package/modern/internals/hooks/{useEnrichedRangePickerFieldProps.js → useEnrichedRangePickerField.js} +39 -52
  105. package/modern/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +23 -32
  106. package/modern/internals/hooks/useRangePosition.js +1 -1
  107. package/modern/internals/models/index.js +0 -1
  108. package/modern/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js +133 -0
  109. package/modern/internals/utils/createMultiInputRangeField/index.js +2 -0
  110. package/modern/internals/utils/releaseInfo.js +1 -1
  111. package/modern/managers/useDateRangeManager.js +3 -1
  112. package/modern/managers/useDateTimeRangeManager.js +3 -1
  113. package/modern/managers/useTimeRangeManager.js +3 -1
  114. package/modern/models/index.js +0 -2
  115. package/node/DateRangeCalendar/DateRangeCalendar.js +4 -4
  116. package/node/DateRangePicker/DateRangePickerToolbar.js +3 -3
  117. package/node/DateTimeRangePicker/DateTimeRangePickerTabs.js +3 -3
  118. package/node/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js +2 -2
  119. package/node/DateTimeRangePicker/DateTimeRangePickerToolbar.js +7 -7
  120. package/node/MultiInputDateRangeField/MultiInputDateRangeField.js +11 -119
  121. package/node/MultiInputDateRangeField/index.js +3 -9
  122. package/node/MultiInputDateRangeField/multiInputDateRangeFieldClasses.js +12 -0
  123. package/node/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js +11 -119
  124. package/node/MultiInputDateTimeRangeField/index.js +3 -9
  125. package/node/MultiInputDateTimeRangeField/multiInputDateTimeRangeFieldClasses.js +12 -0
  126. package/node/MultiInputTimeRangeField/MultiInputTimeRangeField.js +12 -120
  127. package/node/MultiInputTimeRangeField/index.js +3 -9
  128. package/node/MultiInputTimeRangeField/multiInputTimeRangeFieldClasses.js +12 -0
  129. package/node/SingleInputDateRangeField/SingleInputDateRangeField.js +19 -29
  130. package/node/SingleInputDateRangeField/useSingleInputDateRangeField.js +2 -1
  131. package/node/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js +19 -29
  132. package/node/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js +2 -1
  133. package/node/SingleInputTimeRangeField/SingleInputTimeRangeField.js +19 -29
  134. package/node/SingleInputTimeRangeField/useSingleInputTimeRangeField.js +2 -1
  135. package/node/hooks/index.js +8 -1
  136. package/node/hooks/useMultiInputRangeField/index.js +12 -0
  137. package/node/hooks/useMultiInputRangeField/useMultiInputRangeField.js +155 -0
  138. package/node/{internals/hooks/useMultiInputFieldSelectedSections.js → hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.js} +11 -10
  139. package/node/hooks/useMultiInputRangeField/useMultiInputRangeFieldTextFieldProps.js +66 -0
  140. package/node/index.js +1 -1
  141. package/node/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +31 -41
  142. package/node/internals/hooks/{useEnrichedRangePickerFieldProps.js → useEnrichedRangePickerField.js} +41 -54
  143. package/node/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +22 -31
  144. package/node/internals/hooks/useRangePosition.js +1 -1
  145. package/node/internals/models/index.js +0 -11
  146. package/node/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js +140 -0
  147. package/node/internals/utils/createMultiInputRangeField/index.js +19 -0
  148. package/node/internals/utils/releaseInfo.js +1 -1
  149. package/node/managers/useDateRangeManager.js +3 -1
  150. package/node/managers/useDateTimeRangeManager.js +3 -1
  151. package/node/managers/useTimeRangeManager.js +3 -1
  152. package/node/models/index.js +0 -22
  153. package/package.json +4 -4
  154. package/themeAugmentation/overrides.d.ts +6 -4
  155. package/themeAugmentation/props.d.ts +2 -2
  156. package/MultiInputDateRangeField/MultiInputDateRangeField.types.d.ts +0 -55
  157. package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.d.ts +0 -56
  158. package/MultiInputTimeRangeField/MultiInputTimeRangeField.types.d.ts +0 -56
  159. package/internals/hooks/useMultiInputRangeField/shared.d.ts +0 -1
  160. package/internals/hooks/useMultiInputRangeField/shared.js +0 -9
  161. package/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.d.ts +0 -3
  162. package/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js +0 -118
  163. package/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.d.ts +0 -3
  164. package/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js +0 -118
  165. package/internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types.d.ts +0 -11
  166. package/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.d.ts +0 -3
  167. package/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js +0 -118
  168. package/internals/models/timeRange.d.ts +0 -6
  169. package/internals/models/timeRange.js +0 -1
  170. package/models/dateRange.d.ts +0 -7
  171. package/models/dateRange.js +0 -1
  172. package/models/multiInputRangeFieldClasses.d.ts +0 -7
  173. package/models/multiInputRangeFieldClasses.js +0 -1
  174. package/modern/MultiInputDateRangeField/MultiInputDateRangeField.types.js +0 -1
  175. package/modern/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.js +0 -1
  176. package/modern/MultiInputTimeRangeField/MultiInputTimeRangeField.types.js +0 -1
  177. package/modern/internals/hooks/useMultiInputRangeField/shared.js +0 -9
  178. package/modern/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js +0 -118
  179. package/modern/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js +0 -118
  180. package/modern/internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types.js +0 -1
  181. package/modern/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js +0 -118
  182. package/modern/internals/models/timeRange.js +0 -1
  183. package/modern/models/dateRange.js +0 -1
  184. package/modern/models/multiInputRangeFieldClasses.js +0 -1
  185. package/node/MultiInputTimeRangeField/MultiInputTimeRangeField.types.js +0 -5
  186. package/node/internals/hooks/useMultiInputRangeField/shared.js +0 -16
  187. package/node/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js +0 -126
  188. package/node/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js +0 -126
  189. package/node/internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types.js +0 -5
  190. package/node/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js +0 -126
  191. package/node/internals/models/timeRange.js +0 -5
  192. package/node/models/dateRange.js +0 -5
  193. package/node/models/multiInputRangeFieldClasses.js +0 -5
  194. /package/{MultiInputDateRangeField/MultiInputDateRangeField.types.js → internals/models/managers.js} +0 -0
  195. /package/{MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.js → internals/utils/createMultiInputRangeField/createMultiInputRangeField.types.js} +0 -0
  196. /package/{MultiInputTimeRangeField/MultiInputTimeRangeField.types.js → modern/internals/models/managers.js} +0 -0
  197. /package/{internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types.js → modern/internals/utils/createMultiInputRangeField/createMultiInputRangeField.types.js} +0 -0
  198. /package/node/{MultiInputDateRangeField/MultiInputDateRangeField.types.js → internals/models/managers.js} +0 -0
  199. /package/node/{MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.js → internals/utils/createMultiInputRangeField/createMultiInputRangeField.types.js} +0 -0
@@ -0,0 +1,133 @@
1
+ 'use client';
2
+
3
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
4
+ import _extends from "@babel/runtime/helpers/esm/extends";
5
+ const _excluded = ["slots", "slotProps", "className", "classes"];
6
+ import * as React from 'react';
7
+ import clsx from 'clsx';
8
+ import Stack from '@mui/material/Stack';
9
+ import MuiTextField from '@mui/material/TextField';
10
+ import Typography from '@mui/material/Typography';
11
+ import { styled, useThemeProps } from '@mui/material/styles';
12
+ import composeClasses from '@mui/utils/composeClasses';
13
+ import useSlotProps from '@mui/utils/useSlotProps';
14
+ import { cleanFieldResponse, useFieldOwnerState } from '@mui/x-date-pickers/internals';
15
+ import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
16
+ import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
17
+ import { useMultiInputRangeField } from "../../../hooks/useMultiInputRangeField/index.js";
18
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
19
+ export function createMultiInputRangeField({
20
+ useManager,
21
+ name,
22
+ getUtilityClass
23
+ }) {
24
+ const useUtilityClasses = classes => {
25
+ const slots = {
26
+ root: ['root'],
27
+ separator: ['separator']
28
+ };
29
+ return composeClasses(slots, getUtilityClass, classes);
30
+ };
31
+ const MultiInputRangeFieldRoot = styled(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Stack, _extends({
32
+ ref: ref,
33
+ spacing: 2,
34
+ direction: "row",
35
+ alignItems: "center"
36
+ }, props))), {
37
+ name,
38
+ slot: 'Root',
39
+ overridesResolver: (props, styles) => styles.root
40
+ })({});
41
+ const MultiInputRangeFieldSeparator = styled(Typography, {
42
+ name,
43
+ slot: 'Separator',
44
+ overridesResolver: (props, styles) => styles.separator
45
+ })({
46
+ lineHeight: '1.4375em' // 23px
47
+ });
48
+ const MultiInputRangeField = /*#__PURE__*/React.forwardRef(function MultiInputRangeField(props, ref) {
49
+ const themeProps = useThemeProps({
50
+ props,
51
+ // eslint-disable-next-line material-ui/mui-name-matches-component-name
52
+ name
53
+ });
54
+ const manager = useManager({
55
+ enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure,
56
+ dateSeparator: props.dateSeparator
57
+ });
58
+ const {
59
+ internalProps,
60
+ forwardedProps
61
+ } = useSplitFieldProps(themeProps, manager.valueType);
62
+ const {
63
+ slots,
64
+ slotProps,
65
+ className,
66
+ classes: classesProp
67
+ } = forwardedProps,
68
+ otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
69
+ const classes = useUtilityClasses(classesProp);
70
+ const ownerState = useFieldOwnerState(internalProps);
71
+ const Root = slots?.root ?? MultiInputRangeFieldRoot;
72
+ const rootProps = useSlotProps({
73
+ elementType: Root,
74
+ externalSlotProps: slotProps?.root,
75
+ externalForwardedProps: otherForwardedProps,
76
+ additionalProps: {
77
+ ref
78
+ },
79
+ ownerState,
80
+ className: clsx(className, classes.root)
81
+ });
82
+ const startTextFieldProps = useSlotProps({
83
+ elementType: PickersTextField,
84
+ externalSlotProps: slotProps?.textField,
85
+ ownerState: _extends({}, ownerState, {
86
+ position: 'start'
87
+ })
88
+ });
89
+ const endTextFieldProps = useSlotProps({
90
+ elementType: PickersTextField,
91
+ externalSlotProps: slotProps?.textField,
92
+ ownerState: _extends({}, ownerState, {
93
+ position: 'end'
94
+ })
95
+ });
96
+ const {
97
+ startDate,
98
+ endDate,
99
+ enableAccessibleFieldDOMStructure
100
+ } = useMultiInputRangeField({
101
+ manager,
102
+ internalProps,
103
+ startForwardedProps: startTextFieldProps,
104
+ endForwardedProps: endTextFieldProps
105
+ });
106
+ const Separator = slots?.separator ?? MultiInputRangeFieldSeparator;
107
+ const separatorProps = useSlotProps({
108
+ elementType: Separator,
109
+ externalSlotProps: slotProps?.separator,
110
+ additionalProps: {
111
+ children: internalProps.dateSeparator ?? '–'
112
+ },
113
+ ownerState,
114
+ className: classes.separator
115
+ });
116
+ const {
117
+ textFieldProps: startDateProps
118
+ } = cleanFieldResponse(startDate);
119
+ const {
120
+ textFieldProps: endDateProps
121
+ } = cleanFieldResponse(endDate);
122
+ const TextField = slots?.textField ?? (enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
123
+ return /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
124
+ children: [/*#__PURE__*/_jsx(TextField, _extends({
125
+ fullWidth: true
126
+ }, startDateProps)), /*#__PURE__*/_jsx(Separator, _extends({}, separatorProps)), /*#__PURE__*/_jsx(TextField, _extends({
127
+ fullWidth: true
128
+ }, endDateProps))]
129
+ }));
130
+ });
131
+ MultiInputRangeField.fieldType = 'multi-input';
132
+ return MultiInputRangeField;
133
+ }
@@ -0,0 +1,2 @@
1
+ export { createMultiInputRangeField } from "./createMultiInputRangeField.js";
2
+ export { useMultiInputRangeField as unstable_useMultiInputRangeField } from "../../../hooks/useMultiInputRangeField/useMultiInputRangeField.js";
@@ -1,6 +1,6 @@
1
1
  import { ponyfillGlobal } from '@mui/utils';
2
2
  export const getReleaseInfo = () => {
3
- const releaseInfo = "MTczNjM3NzIwMDAwMA==";
3
+ const releaseInfo = "MTczNzY1ODgwMDAwMA==";
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
@@ -26,6 +26,8 @@ export function useDateRangeManager(parameters = {}) {
26
26
  defaultDates,
27
27
  utils,
28
28
  internalProps
29
- }))
29
+ })),
30
+ // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
31
+ internal_getOpenPickerButtonAriaLabel: () => ''
30
32
  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
31
33
  }
@@ -26,6 +26,8 @@ export function useDateTimeRangeManager(parameters = {}) {
26
26
  internalProps,
27
27
  utils,
28
28
  defaultDates
29
- }))
29
+ })),
30
+ // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
31
+ internal_getOpenPickerButtonAriaLabel: () => ''
30
32
  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
31
33
  }
@@ -24,6 +24,8 @@ export function useTimeRangeManager(parameters = {}) {
24
24
  }) => _extends({}, internalProps, getTimeFieldInternalPropsDefaults({
25
25
  utils,
26
26
  internalProps
27
- }))
27
+ })),
28
+ // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
29
+ internal_getOpenPickerButtonAriaLabel: () => ''
28
30
  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
29
31
  }
@@ -1,6 +1,4 @@
1
- export * from "./dateRange.js";
2
1
  export * from "./fields.js";
3
2
  export * from "./range.js";
4
3
  export * from "./validation.js";
5
- export * from "./multiInputRangeFieldClasses.js";
6
4
  export {};
@@ -199,15 +199,15 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
199
199
  const id = (0, _useId.default)();
200
200
  const {
201
201
  rangePosition,
202
- onRangePositionChange
202
+ setRangePosition
203
203
  } = (0, _useRangePosition.useRangePosition)({
204
204
  rangePosition: rangePositionProp ?? rangePositionContext?.rangePosition,
205
205
  defaultRangePosition: defaultRangePositionProp,
206
- onRangePositionChange: onRangePositionChangeProp ?? rangePositionContext?.onRangePositionChange
206
+ onRangePositionChange: onRangePositionChangeProp ?? rangePositionContext?.setRangePosition
207
207
  });
208
208
  const handleDatePositionChange = (0, _useEventCallback.default)(position => {
209
209
  if (rangePosition !== position) {
210
- onRangePositionChange(position);
210
+ setRangePosition(position);
211
211
  }
212
212
  });
213
213
  const handleSelectedDayChange = (0, _useEventCallback.default)((newDate, selectionState, allowRangeFlip = false) => {
@@ -225,7 +225,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
225
225
  });
226
226
  const isNextSectionAvailable = availableRangePositions.includes(nextSelection);
227
227
  if (isNextSectionAvailable) {
228
- onRangePositionChange(nextSelection);
228
+ setRangePosition(nextSelection);
229
229
  }
230
230
  const isFullRangeSelected = rangePosition === 'end' && (0, _dateUtils.isRangeValid)(utils, newRange);
231
231
  setValueAndGoToNextView(newRange, isFullRangeSelected || !isNextSectionAvailable ? 'finish' : 'partial', view);
@@ -69,7 +69,7 @@ const DateRangePickerToolbar = exports.DateRangePickerToolbar = /*#__PURE__*/Rea
69
69
  const ownerState = (0, _internals.useToolbarOwnerState)();
70
70
  const {
71
71
  rangePosition,
72
- onRangePositionChange
72
+ setRangePosition
73
73
  } = (0, _hooks2.usePickerRangePositionContext)();
74
74
  const classes = useUtilityClasses(classesProp);
75
75
 
@@ -92,7 +92,7 @@ const DateRangePickerToolbar = exports.DateRangePickerToolbar = /*#__PURE__*/Rea
92
92
  variant: value[0] == null ? 'h6' : 'h5',
93
93
  value: formatDate(value[0], translations.start),
94
94
  selected: rangePosition === 'start',
95
- onClick: () => onRangePositionChange('start')
95
+ onClick: () => setRangePosition('start')
96
96
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
97
97
  variant: "h5",
98
98
  children: ["\xA0", '–', "\xA0"]
@@ -100,7 +100,7 @@ const DateRangePickerToolbar = exports.DateRangePickerToolbar = /*#__PURE__*/Rea
100
100
  variant: value[1] == null ? 'h6' : 'h5',
101
101
  value: formatDate(value[1], translations.end),
102
102
  selected: rangePosition === 'end',
103
- onClick: () => onRangePositionChange('end')
103
+ onClick: () => setRangePosition('end')
104
104
  })]
105
105
  })
106
106
  }));
@@ -94,7 +94,7 @@ const DateTimeRangePickerTabs = exports.DateTimeRangePickerTabs = function DateT
94
94
  const classes = useUtilityClasses(classesProp);
95
95
  const {
96
96
  rangePosition,
97
- onRangePositionChange
97
+ setRangePosition
98
98
  } = (0, _hooks2.usePickerRangePositionContext)();
99
99
  const value = React.useMemo(() => view == null ? null : viewToTab(view, rangePosition), [view, rangePosition]);
100
100
  const isPreviousHidden = value === 'start-date';
@@ -115,9 +115,9 @@ const DateTimeRangePickerTabs = exports.DateTimeRangePickerTabs = function DateT
115
115
  }, [translations.endDate, translations.endTime, translations.startDate, translations.startTime, value]);
116
116
  const handleRangePositionChange = (0, _useEventCallback.default)(newTab => {
117
117
  if (newTab.includes('start')) {
118
- onRangePositionChange('start');
118
+ setRangePosition('start');
119
119
  } else {
120
- onRangePositionChange('end');
120
+ setRangePosition('end');
121
121
  }
122
122
  });
123
123
  const changeToPreviousTab = (0, _useEventCallback.default)(() => {
@@ -28,7 +28,7 @@ function DateTimeRangePickerTimeWrapper(props) {
28
28
  other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
29
29
  const {
30
30
  rangePosition,
31
- onRangePositionChange
31
+ setRangePosition
32
32
  } = (0, _hooks.usePickerRangePositionContext)();
33
33
  if (!viewRenderer) {
34
34
  return null;
@@ -52,7 +52,7 @@ function DateTimeRangePickerTimeWrapper(props) {
52
52
  // reset view to the first time view and swap range position after selecting the last time view (start or end position)
53
53
  if (selectedView === timeViews[timeViews.length - 1] && onViewChange) {
54
54
  onViewChange(views[0]);
55
- onRangePositionChange(rangePosition === 'start' ? 'end' : 'start');
55
+ setRangePosition(rangePosition === 'start' ? 'end' : 'start');
56
56
  }
57
57
  onChange(newRange, isFullRangeSelected ? 'finish' : 'partial', selectedView);
58
58
  };
@@ -81,7 +81,7 @@ const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PUR
81
81
  const ownerState = (0, _internals.useToolbarOwnerState)();
82
82
  const {
83
83
  rangePosition,
84
- onRangePositionChange
84
+ setRangePosition
85
85
  } = (0, _hooks2.usePickerRangePositionContext)();
86
86
  const classes = useUtilityClasses(classesProp);
87
87
  const commonToolbarProps = {
@@ -104,18 +104,18 @@ const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PUR
104
104
  rangePosition,
105
105
  allowRangeFlip: true
106
106
  });
107
- onRangePositionChange(nextSelection);
107
+ setRangePosition(nextSelection);
108
108
  setValue(newRange, {
109
109
  changeImportance: 'set'
110
110
  });
111
- }, [setValue, onRangePositionChange, value, rangePosition, utils]);
111
+ }, [setValue, setRangePosition, value, rangePosition, utils]);
112
112
  const startOverrides = React.useMemo(() => {
113
113
  const handleStartRangeViewChange = newView => {
114
114
  if (newView === 'year' || newView === 'month') {
115
115
  return;
116
116
  }
117
117
  if (rangePosition !== 'start') {
118
- onRangePositionChange('start');
118
+ setRangePosition('start');
119
119
  }
120
120
  setView(newView);
121
121
  };
@@ -126,14 +126,14 @@ const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PUR
126
126
  setView: handleStartRangeViewChange,
127
127
  view: rangePosition === 'start' ? view : null
128
128
  };
129
- }, [value, wrappedSetValue, rangePosition, view, onRangePositionChange, setView]);
129
+ }, [value, wrappedSetValue, rangePosition, view, setRangePosition, setView]);
130
130
  const endOverrides = React.useMemo(() => {
131
131
  const handleEndRangeViewChange = newView => {
132
132
  if (newView === 'year' || newView === 'month') {
133
133
  return;
134
134
  }
135
135
  if (rangePosition !== 'end') {
136
- onRangePositionChange('end');
136
+ setRangePosition('end');
137
137
  }
138
138
  setView(newView);
139
139
  };
@@ -144,7 +144,7 @@ const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PUR
144
144
  setView: handleEndRangeViewChange,
145
145
  view: rangePosition === 'end' ? view : null
146
146
  };
147
- }, [value, wrappedSetValue, rangePosition, view, onRangePositionChange, setView]);
147
+ }, [value, wrappedSetValue, rangePosition, view, setRangePosition, setView]);
148
148
  if (hidden) {
149
149
  return null;
150
150
  }
@@ -2,55 +2,14 @@
2
2
  'use client';
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
6
5
  Object.defineProperty(exports, "__esModule", {
7
6
  value: true
8
7
  });
9
- exports.multiInputDateRangeFieldClasses = exports.getMultiInputDateRangeFieldUtilityClass = exports.MultiInputDateRangeField = void 0;
10
- var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
11
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
12
- var React = _interopRequireWildcard(require("react"));
8
+ exports.MultiInputDateRangeField = void 0;
13
9
  var _propTypes = _interopRequireDefault(require("prop-types"));
14
- var _clsx = _interopRequireDefault(require("clsx"));
15
- var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
16
- var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
17
- var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
18
- var _styles = require("@mui/material/styles");
19
- var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
20
- var _utils = require("@mui/utils");
21
- var _internals = require("@mui/x-date-pickers/internals");
22
- var _hooks = require("@mui/x-date-pickers/hooks");
23
- var _PickersTextField = require("@mui/x-date-pickers/PickersTextField");
24
- var _useMultiInputDateRangeField = require("../internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField");
25
- var _jsxRuntime = require("react/jsx-runtime");
26
- const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className", "classes"];
27
- const multiInputDateRangeFieldClasses = exports.multiInputDateRangeFieldClasses = (0, _utils.unstable_generateUtilityClasses)('MuiMultiInputDateRangeField', ['root', 'separator']);
28
- const getMultiInputDateRangeFieldUtilityClass = slot => (0, _utils.unstable_generateUtilityClass)('MuiMultiInputDateRangeField', slot);
29
- exports.getMultiInputDateRangeFieldUtilityClass = getMultiInputDateRangeFieldUtilityClass;
30
- const useUtilityClasses = classes => {
31
- const slots = {
32
- root: ['root'],
33
- separator: ['separator']
34
- };
35
- return (0, _utils.unstable_composeClasses)(slots, getMultiInputDateRangeFieldUtilityClass, classes);
36
- };
37
- const MultiInputDateRangeFieldRoot = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Stack.default, (0, _extends2.default)({
38
- ref: ref,
39
- spacing: 2,
40
- direction: "row",
41
- alignItems: "center"
42
- }, props))), {
43
- name: 'MuiMultiInputDateRangeField',
44
- slot: 'Root',
45
- overridesResolver: (props, styles) => styles.root
46
- })({});
47
- const MultiInputDateRangeFieldSeparator = (0, _styles.styled)(_Typography.default, {
48
- name: 'MuiMultiInputDateRangeField',
49
- slot: 'Separator',
50
- overridesResolver: (props, styles) => styles.separator
51
- })({
52
- lineHeight: '1.4375em' // 23px
53
- });
10
+ var _managers = require("../managers");
11
+ var _createMultiInputRangeField = require("../internals/utils/createMultiInputRangeField");
12
+ var _multiInputDateRangeFieldClasses = require("./multiInputDateRangeFieldClasses");
54
13
  /**
55
14
  * Demos:
56
15
  *
@@ -61,86 +20,19 @@ const MultiInputDateRangeFieldSeparator = (0, _styles.styled)(_Typography.defaul
61
20
  *
62
21
  * - [MultiInputDateRangeField API](https://mui.com/x/api/multi-input-date-range-field/)
63
22
  */
64
- const MultiInputDateRangeField = exports.MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInputDateRangeField(inProps, ref) {
65
- const themeProps = (0, _styles.useThemeProps)({
66
- props: inProps,
67
- name: 'MuiMultiInputDateRangeField'
68
- });
69
- const {
70
- internalProps,
71
- forwardedProps
72
- } = (0, _hooks.useSplitFieldProps)(themeProps, 'date');
73
- const {
74
- slots,
75
- slotProps,
76
- unstableStartFieldRef,
77
- unstableEndFieldRef,
78
- className,
79
- classes: classesProp
80
- } = forwardedProps,
81
- otherForwardedProps = (0, _objectWithoutPropertiesLoose2.default)(forwardedProps, _excluded);
82
- const ownerState = (0, _internals.useFieldOwnerState)(internalProps);
83
- const classes = useUtilityClasses(classesProp);
84
- const Root = slots?.root ?? MultiInputDateRangeFieldRoot;
85
- const rootProps = (0, _useSlotProps.default)({
86
- elementType: Root,
87
- externalSlotProps: slotProps?.root,
88
- externalForwardedProps: otherForwardedProps,
89
- additionalProps: {
90
- ref
91
- },
92
- ownerState,
93
- className: (0, _clsx.default)(className, classes.root)
94
- });
95
- const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
96
- const startTextFieldProps = (0, _useSlotProps.default)({
97
- elementType: TextField,
98
- externalSlotProps: slotProps?.textField,
99
- ownerState: (0, _extends2.default)({}, ownerState, {
100
- position: 'start'
101
- })
102
- });
103
- const endTextFieldProps = (0, _useSlotProps.default)({
104
- elementType: TextField,
105
- externalSlotProps: slotProps?.textField,
106
- ownerState: (0, _extends2.default)({}, ownerState, {
107
- position: 'end'
108
- })
109
- });
110
- const Separator = slots?.separator ?? MultiInputDateRangeFieldSeparator;
111
- const separatorProps = (0, _useSlotProps.default)({
112
- elementType: Separator,
113
- externalSlotProps: slotProps?.separator,
114
- additionalProps: {
115
- children: ` ${internalProps.dateSeparator ?? '–'} `
116
- },
117
- ownerState,
118
- className: classes.separator
119
- });
120
- const fieldResponse = (0, _useMultiInputDateRangeField.useMultiInputDateRangeField)({
121
- sharedProps: internalProps,
122
- startTextFieldProps,
123
- endTextFieldProps,
124
- unstableStartFieldRef,
125
- unstableEndFieldRef
126
- });
127
- const startDateProps = (0, _internals.convertFieldResponseIntoMuiTextFieldProps)(fieldResponse.startDate);
128
- const endDateProps = (0, _internals.convertFieldResponseIntoMuiTextFieldProps)(fieldResponse.endDate);
129
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
130
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({
131
- fullWidth: true
132
- }, startDateProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Separator, (0, _extends2.default)({}, separatorProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({
133
- fullWidth: true
134
- }, endDateProps))]
135
- }));
23
+ const MultiInputDateRangeField = exports.MultiInputDateRangeField = (0, _createMultiInputRangeField.createMultiInputRangeField)({
24
+ name: 'MuiMultiInputDateRangeField',
25
+ getUtilityClass: _multiInputDateRangeFieldClasses.getMultiInputDateRangeFieldUtilityClass,
26
+ useManager: _managers.useDateRangeManager
136
27
  });
137
- process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
28
+ MultiInputDateRangeField.propTypes = {
138
29
  // ----------------------------- Warning --------------------------------
139
30
  // | These PropTypes are generated from the TypeScript type definitions |
140
31
  // | To update them edit the TypeScript types and run "pnpm proptypes" |
141
32
  // ----------------------------------------------------------------------
142
33
  /**
143
34
  * If `true`, the `input` element is focused during the first mount.
35
+ * @default false
144
36
  */
145
37
  autoFocus: _propTypes.default.bool,
146
38
  /**
@@ -323,4 +215,4 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
323
215
  * Used when the component is controlled.
324
216
  */
325
217
  value: _propTypes.default.arrayOf(_propTypes.default.object)
326
- } : void 0;
218
+ };
@@ -12,20 +12,14 @@ Object.defineProperty(exports, "MultiInputDateRangeField", {
12
12
  Object.defineProperty(exports, "getMultiInputDateRangeFieldUtilityClass", {
13
13
  enumerable: true,
14
14
  get: function () {
15
- return _MultiInputDateRangeField.getMultiInputDateRangeFieldUtilityClass;
15
+ return _multiInputDateRangeFieldClasses.getMultiInputDateRangeFieldUtilityClass;
16
16
  }
17
17
  });
18
18
  Object.defineProperty(exports, "multiInputDateRangeFieldClasses", {
19
19
  enumerable: true,
20
20
  get: function () {
21
- return _MultiInputDateRangeField.multiInputDateRangeFieldClasses;
22
- }
23
- });
24
- Object.defineProperty(exports, "unstable_useMultiInputDateRangeField", {
25
- enumerable: true,
26
- get: function () {
27
- return _useMultiInputDateRangeField.useMultiInputDateRangeField;
21
+ return _multiInputDateRangeFieldClasses.multiInputDateRangeFieldClasses;
28
22
  }
29
23
  });
30
24
  var _MultiInputDateRangeField = require("./MultiInputDateRangeField");
31
- var _useMultiInputDateRangeField = require("../internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField");
25
+ var _multiInputDateRangeFieldClasses = require("./multiInputDateRangeFieldClasses");
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.multiInputDateRangeFieldClasses = exports.getMultiInputDateRangeFieldUtilityClass = void 0;
8
+ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
9
+ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
10
+ const multiInputDateRangeFieldClasses = exports.multiInputDateRangeFieldClasses = (0, _generateUtilityClasses.default)('MuiMultiInputDateRangeField', ['root', 'separator']);
11
+ const getMultiInputDateRangeFieldUtilityClass = slot => (0, _generateUtilityClass.default)('MuiMultiInputDateRangeField', slot);
12
+ exports.getMultiInputDateRangeFieldUtilityClass = getMultiInputDateRangeFieldUtilityClass;