@mui/x-date-pickers-pro 7.0.0-alpha.3 → 7.0.0-alpha.5

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 (114) hide show
  1. package/CHANGELOG.md +245 -0
  2. package/DateRangeCalendar/DateRangeCalendar.js +2 -2
  3. package/DateRangeCalendar/DateRangeCalendar.types.d.ts +6 -6
  4. package/DateRangeCalendar/index.d.ts +1 -1
  5. package/DateRangePicker/DateRangePicker.js +6 -1
  6. package/DateRangePicker/DateRangePicker.types.d.ts +6 -6
  7. package/DateRangePicker/index.d.ts +1 -1
  8. package/DateRangePicker/shared.d.ts +5 -5
  9. package/DesktopDateRangePicker/DesktopDateRangePicker.js +6 -1
  10. package/DesktopDateRangePicker/DesktopDateRangePicker.types.d.ts +6 -6
  11. package/DesktopDateRangePicker/index.d.ts +1 -1
  12. package/MobileDateRangePicker/MobileDateRangePicker.js +6 -1
  13. package/MobileDateRangePicker/MobileDateRangePicker.types.d.ts +6 -6
  14. package/MobileDateRangePicker/index.d.ts +1 -1
  15. package/MultiInputDateRangeField/MultiInputDateRangeField.js +15 -52
  16. package/MultiInputDateRangeField/MultiInputDateRangeField.types.d.ts +4 -4
  17. package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js +15 -52
  18. package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.d.ts +4 -4
  19. package/MultiInputTimeRangeField/MultiInputTimeRangeField.js +15 -52
  20. package/MultiInputTimeRangeField/MultiInputTimeRangeField.types.d.ts +4 -4
  21. package/SingleInputDateRangeField/SingleInputDateRangeField.js +17 -50
  22. package/SingleInputDateRangeField/SingleInputDateRangeField.types.d.ts +6 -9
  23. package/SingleInputDateRangeField/useSingleInputDateRangeField.d.ts +2 -2
  24. package/SingleInputDateRangeField/useSingleInputDateRangeField.js +1 -5
  25. package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js +17 -50
  26. package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.d.ts +5 -9
  27. package/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.d.ts +2 -2
  28. package/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js +1 -5
  29. package/SingleInputTimeRangeField/SingleInputTimeRangeField.js +18 -51
  30. package/SingleInputTimeRangeField/SingleInputTimeRangeField.types.d.ts +5 -9
  31. package/SingleInputTimeRangeField/useSingleInputTimeRangeField.d.ts +2 -2
  32. package/SingleInputTimeRangeField/useSingleInputTimeRangeField.js +1 -5
  33. package/StaticDateRangePicker/StaticDateRangePicker.types.d.ts +6 -6
  34. package/StaticDateRangePicker/index.d.ts +1 -1
  35. package/index.js +1 -1
  36. package/internals/hooks/useDesktopRangePicker/index.d.ts +1 -1
  37. package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +3 -1
  38. package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.d.ts +7 -7
  39. package/internals/hooks/useEnrichedRangePickerFieldProps.d.ts +6 -5
  40. package/internals/hooks/useMobileRangePicker/index.d.ts +1 -1
  41. package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +3 -1
  42. package/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.d.ts +7 -7
  43. package/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.d.ts +1 -1
  44. package/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js +2 -10
  45. package/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.d.ts +1 -1
  46. package/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js +2 -10
  47. package/internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types.d.ts +0 -2
  48. package/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.d.ts +1 -1
  49. package/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js +2 -10
  50. package/internals/hooks/useStaticRangePicker/index.d.ts +1 -1
  51. package/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.d.ts +5 -5
  52. package/internals/models/rangePickerProps.d.ts +5 -0
  53. package/internals/utils/releaseInfo.js +1 -1
  54. package/legacy/DateRangeCalendar/DateRangeCalendar.js +2 -2
  55. package/legacy/DateRangePicker/DateRangePicker.js +6 -1
  56. package/legacy/DesktopDateRangePicker/DesktopDateRangePicker.js +6 -1
  57. package/legacy/MobileDateRangePicker/MobileDateRangePicker.js +6 -1
  58. package/legacy/MultiInputDateRangeField/MultiInputDateRangeField.js +15 -48
  59. package/legacy/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js +15 -48
  60. package/legacy/MultiInputTimeRangeField/MultiInputTimeRangeField.js +15 -48
  61. package/legacy/SingleInputDateRangeField/SingleInputDateRangeField.js +19 -47
  62. package/legacy/SingleInputDateRangeField/useSingleInputDateRangeField.js +1 -4
  63. package/legacy/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js +19 -47
  64. package/legacy/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js +1 -4
  65. package/legacy/SingleInputTimeRangeField/SingleInputTimeRangeField.js +20 -48
  66. package/legacy/SingleInputTimeRangeField/useSingleInputTimeRangeField.js +1 -4
  67. package/legacy/index.js +1 -1
  68. package/legacy/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +3 -1
  69. package/legacy/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +3 -1
  70. package/legacy/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js +2 -10
  71. package/legacy/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js +2 -10
  72. package/legacy/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js +2 -10
  73. package/legacy/internals/utils/releaseInfo.js +1 -1
  74. package/modern/DateRangeCalendar/DateRangeCalendar.js +2 -2
  75. package/modern/DateRangePicker/DateRangePicker.js +6 -1
  76. package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js +6 -1
  77. package/modern/MobileDateRangePicker/MobileDateRangePicker.js +6 -1
  78. package/modern/MultiInputDateRangeField/MultiInputDateRangeField.js +15 -52
  79. package/modern/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js +15 -52
  80. package/modern/MultiInputTimeRangeField/MultiInputTimeRangeField.js +15 -52
  81. package/modern/SingleInputDateRangeField/SingleInputDateRangeField.js +17 -50
  82. package/modern/SingleInputDateRangeField/useSingleInputDateRangeField.js +1 -5
  83. package/modern/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js +17 -50
  84. package/modern/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js +1 -5
  85. package/modern/SingleInputTimeRangeField/SingleInputTimeRangeField.js +18 -51
  86. package/modern/SingleInputTimeRangeField/useSingleInputTimeRangeField.js +1 -5
  87. package/modern/index.js +1 -1
  88. package/modern/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +3 -1
  89. package/modern/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +3 -1
  90. package/modern/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js +2 -10
  91. package/modern/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js +2 -10
  92. package/modern/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js +2 -10
  93. package/modern/internals/utils/releaseInfo.js +1 -1
  94. package/node/DateRangeCalendar/DateRangeCalendar.js +2 -2
  95. package/node/DateRangePicker/DateRangePicker.js +6 -1
  96. package/node/DesktopDateRangePicker/DesktopDateRangePicker.js +6 -1
  97. package/node/MobileDateRangePicker/MobileDateRangePicker.js +6 -1
  98. package/node/MultiInputDateRangeField/MultiInputDateRangeField.js +14 -51
  99. package/node/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js +14 -51
  100. package/node/MultiInputTimeRangeField/MultiInputTimeRangeField.js +14 -51
  101. package/node/SingleInputDateRangeField/SingleInputDateRangeField.js +17 -50
  102. package/node/SingleInputDateRangeField/useSingleInputDateRangeField.js +1 -5
  103. package/node/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js +17 -50
  104. package/node/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js +1 -5
  105. package/node/SingleInputTimeRangeField/SingleInputTimeRangeField.js +18 -51
  106. package/node/SingleInputTimeRangeField/useSingleInputTimeRangeField.js +1 -5
  107. package/node/index.js +1 -1
  108. package/node/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +3 -1
  109. package/node/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +3 -1
  110. package/node/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js +2 -10
  111. package/node/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js +2 -10
  112. package/node/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js +2 -10
  113. package/node/internals/utils/releaseInfo.js +1 -1
  114. package/package.json +6 -6
@@ -1,14 +1,13 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
- const _excluded = ["slots", "slotProps", "InputProps", "inputProps"],
4
- _excluded2 = ["inputRef"],
5
- _excluded3 = ["ref", "onPaste", "onKeyDown", "inputMode", "readOnly", "clearable", "onClear"];
3
+ const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];
6
4
  import * as React from 'react';
7
5
  import PropTypes from 'prop-types';
8
6
  import MuiTextField from '@mui/material/TextField';
9
7
  import { useThemeProps } from '@mui/material/styles';
10
8
  import { useSlotProps } from '@mui/base/utils';
11
9
  import { useClearableField } from '@mui/x-date-pickers/hooks';
10
+ import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
12
11
  import { refType } from '@mui/utils';
13
12
  import { useSingleInputDateRangeField } from './useSingleInputDateRangeField';
14
13
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,7 +21,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
22
21
  *
23
22
  * - [SingleInputDateRangeField API](https://mui.com/x/api/single-input-date-range-field/)
24
23
  */
25
- const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleInputDateRangeField(inProps, ref) {
24
+ const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleInputDateRangeField(inProps, inRef) {
26
25
  const themeProps = useThemeProps({
27
26
  props: inProps,
28
27
  name: 'MuiSingleInputDateRangeField'
@@ -36,58 +35,26 @@ const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleI
36
35
  other = _objectWithoutPropertiesLoose(themeProps, _excluded);
37
36
  const ownerState = themeProps;
38
37
  const TextField = slots?.textField ?? MuiTextField;
39
- const _useSlotProps = useSlotProps({
40
- elementType: TextField,
41
- externalSlotProps: slotProps?.textField,
42
- externalForwardedProps: other,
43
- ownerState
44
- }),
45
- {
46
- inputRef: externalInputRef
47
- } = _useSlotProps,
48
- textFieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
38
+ const textFieldProps = useSlotProps({
39
+ elementType: TextField,
40
+ externalSlotProps: slotProps?.textField,
41
+ externalForwardedProps: other,
42
+ ownerState,
43
+ additionalProps: {
44
+ ref: inRef
45
+ }
46
+ });
49
47
 
50
48
  // TODO: Remove when mui/material-ui#35088 will be merged
51
49
  textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
52
50
  textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
53
- const _useSingleInputDateRa = useSingleInputDateRangeField({
54
- props: textFieldProps,
55
- inputRef: externalInputRef
56
- }),
57
- {
58
- ref: inputRef,
59
- onPaste,
60
- onKeyDown,
61
- inputMode,
62
- readOnly,
63
- clearable,
64
- onClear
65
- } = _useSingleInputDateRa,
66
- fieldProps = _objectWithoutPropertiesLoose(_useSingleInputDateRa, _excluded3);
67
- const {
68
- InputProps: ProcessedInputProps,
69
- fieldProps: processedFieldProps
70
- } = useClearableField({
71
- onClear,
72
- clearable,
73
- fieldProps,
74
- InputProps: fieldProps.InputProps,
51
+ const fieldResponse = useSingleInputDateRangeField(textFieldProps);
52
+ const convertedFieldResponse = convertFieldResponseIntoMuiTextFieldProps(fieldResponse);
53
+ const processedFieldProps = useClearableField(_extends({}, convertedFieldResponse, {
75
54
  slots,
76
55
  slotProps
77
- });
78
- return /*#__PURE__*/_jsx(TextField, _extends({
79
- ref: ref
80
- }, processedFieldProps, {
81
- InputProps: _extends({}, ProcessedInputProps, {
82
- readOnly
83
- }),
84
- inputProps: _extends({}, fieldProps.inputProps, {
85
- inputMode,
86
- onPaste,
87
- onKeyDown,
88
- ref: inputRef
89
- })
90
56
  }));
57
+ return /*#__PURE__*/_jsx(TextField, _extends({}, processedFieldProps));
91
58
  });
92
59
  SingleInputDateRangeField.fieldType = 'single-input';
93
60
  process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
@@ -266,7 +233,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
266
233
  * 4. If `null` is provided, no section will be selected
267
234
  * If not provided, the selected sections will be handled internally.
268
235
  */
269
- selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
236
+ selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
270
237
  endIndex: PropTypes.number.isRequired,
271
238
  startIndex: PropTypes.number.isRequired
272
239
  })]),
@@ -13,17 +13,13 @@ export const useDefaultizedDateRangeFieldProps = props => {
13
13
  maxDate: applyDefaultDate(utils, props.maxDate, defaultDates.maxDate)
14
14
  });
15
15
  };
16
- export const useSingleInputDateRangeField = ({
17
- props: inProps,
18
- inputRef
19
- }) => {
16
+ export const useSingleInputDateRangeField = inProps => {
20
17
  const props = useDefaultizedDateRangeFieldProps(inProps);
21
18
  const {
22
19
  forwardedProps,
23
20
  internalProps
24
21
  } = splitFieldInternalAndForwardedProps(props, 'date');
25
22
  return useField({
26
- inputRef,
27
23
  forwardedProps,
28
24
  internalProps,
29
25
  valueManager: rangeValueManager,
@@ -1,11 +1,10 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
- const _excluded = ["slots", "slotProps", "InputProps", "inputProps"],
4
- _excluded2 = ["inputRef"],
5
- _excluded3 = ["ref", "onPaste", "onKeyDown", "inputMode", "readOnly", "clearable", "onClear"];
3
+ const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];
6
4
  import * as React from 'react';
7
5
  import PropTypes from 'prop-types';
8
6
  import MuiTextField from '@mui/material/TextField';
7
+ import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
9
8
  import { useThemeProps } from '@mui/material/styles';
10
9
  import { useSlotProps } from '@mui/base/utils';
11
10
  import { useClearableField } from '@mui/x-date-pickers/hooks';
@@ -22,7 +21,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
22
21
  *
23
22
  * - [SingleInputDateTimeRangeField API](https://mui.com/x/api/single-input-date-time-range-field/)
24
23
  */
25
- const SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleInputDateTimeRangeField(inProps, ref) {
24
+ const SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleInputDateTimeRangeField(inProps, inRef) {
26
25
  const themeProps = useThemeProps({
27
26
  props: inProps,
28
27
  name: 'MuiSingleInputDateTimeRangeField'
@@ -36,58 +35,26 @@ const SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Sin
36
35
  other = _objectWithoutPropertiesLoose(themeProps, _excluded);
37
36
  const ownerState = themeProps;
38
37
  const TextField = slots?.textField ?? MuiTextField;
39
- const _useSlotProps = useSlotProps({
40
- elementType: TextField,
41
- externalSlotProps: slotProps?.textField,
42
- externalForwardedProps: other,
43
- ownerState
44
- }),
45
- {
46
- inputRef: externalInputRef
47
- } = _useSlotProps,
48
- textFieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
38
+ const textFieldProps = useSlotProps({
39
+ elementType: TextField,
40
+ externalSlotProps: slotProps?.textField,
41
+ externalForwardedProps: other,
42
+ ownerState,
43
+ additionalProps: {
44
+ ref: inRef
45
+ }
46
+ });
49
47
 
50
48
  // TODO: Remove when mui/material-ui#35088 will be merged
51
49
  textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
52
50
  textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
53
- const _useSingleInputDateTi = useSingleInputDateTimeRangeField({
54
- props: textFieldProps,
55
- inputRef: externalInputRef
56
- }),
57
- {
58
- ref: inputRef,
59
- onPaste,
60
- onKeyDown,
61
- inputMode,
62
- readOnly,
63
- clearable,
64
- onClear
65
- } = _useSingleInputDateTi,
66
- fieldProps = _objectWithoutPropertiesLoose(_useSingleInputDateTi, _excluded3);
67
- const {
68
- InputProps: ProcessedInputProps,
69
- fieldProps: processedFieldProps
70
- } = useClearableField({
71
- onClear,
72
- clearable,
73
- fieldProps,
74
- InputProps: fieldProps.InputProps,
51
+ const fieldResponse = useSingleInputDateTimeRangeField(textFieldProps);
52
+ const convertedFieldResponse = convertFieldResponseIntoMuiTextFieldProps(fieldResponse);
53
+ const processedFieldProps = useClearableField(_extends({}, convertedFieldResponse, {
75
54
  slots,
76
55
  slotProps
77
- });
78
- return /*#__PURE__*/_jsx(TextField, _extends({
79
- ref: ref
80
- }, processedFieldProps, {
81
- InputProps: _extends({}, ProcessedInputProps, {
82
- readOnly
83
- }),
84
- inputProps: _extends({}, fieldProps.inputProps, {
85
- inputMode,
86
- onPaste,
87
- onKeyDown,
88
- ref: inputRef
89
- })
90
56
  }));
57
+ return /*#__PURE__*/_jsx(TextField, _extends({}, processedFieldProps));
91
58
  });
92
59
  SingleInputDateTimeRangeField.fieldType = 'single-input';
93
60
  process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes = {
@@ -299,7 +266,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
299
266
  * 4. If `null` is provided, no section will be selected
300
267
  * If not provided, the selected sections will be handled internally.
301
268
  */
302
- selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
269
+ selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
303
270
  endIndex: PropTypes.number.isRequired,
304
271
  startIndex: PropTypes.number.isRequired
305
272
  })]),
@@ -18,17 +18,13 @@ export const useDefaultizedTimeRangeFieldProps = props => {
18
18
  disableIgnoringDatePartForTimeValidation: Boolean(props.minDateTime || props.maxDateTime)
19
19
  });
20
20
  };
21
- export const useSingleInputDateTimeRangeField = ({
22
- props: inProps,
23
- inputRef
24
- }) => {
21
+ export const useSingleInputDateTimeRangeField = inProps => {
25
22
  const props = useDefaultizedTimeRangeFieldProps(inProps);
26
23
  const {
27
24
  forwardedProps,
28
25
  internalProps
29
26
  } = splitFieldInternalAndForwardedProps(props, 'date-time');
30
27
  return useField({
31
- inputRef,
32
28
  forwardedProps,
33
29
  internalProps,
34
30
  valueManager: rangeValueManager,
@@ -1,12 +1,11 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
- const _excluded = ["slots", "slotProps", "InputProps", "inputProps"],
4
- _excluded2 = ["inputRef"],
5
- _excluded3 = ["ref", "onPaste", "onKeyDown", "inputMode", "readOnly", "clearable", "onClear"];
3
+ const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];
6
4
  import * as React from 'react';
7
5
  import PropTypes from 'prop-types';
8
- import { useClearableField } from '@mui/x-date-pickers/hooks';
9
6
  import MuiTextField from '@mui/material/TextField';
7
+ import { useClearableField } from '@mui/x-date-pickers/hooks';
8
+ import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
10
9
  import { useThemeProps } from '@mui/material/styles';
11
10
  import { useSlotProps } from '@mui/base/utils';
12
11
  import { refType } from '@mui/utils';
@@ -22,7 +21,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
22
21
  *
23
22
  * - [SingleInputTimeRangeField API](https://mui.com/x/api/single-input-time-range-field/)
24
23
  */
25
- const SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleInputTimeRangeField(inProps, ref) {
24
+ const SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleInputTimeRangeField(inProps, inRef) {
26
25
  const themeProps = useThemeProps({
27
26
  props: inProps,
28
27
  name: 'MuiSingleInputTimeRangeField'
@@ -36,58 +35,26 @@ const SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleI
36
35
  other = _objectWithoutPropertiesLoose(themeProps, _excluded);
37
36
  const ownerState = themeProps;
38
37
  const TextField = slots?.textField ?? MuiTextField;
39
- const _useSlotProps = useSlotProps({
40
- elementType: TextField,
41
- externalSlotProps: slotProps?.textField,
42
- externalForwardedProps: other,
43
- ownerState
44
- }),
45
- {
46
- inputRef: externalInputRef
47
- } = _useSlotProps,
48
- textFieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
38
+ const textFieldProps = useSlotProps({
39
+ elementType: TextField,
40
+ externalSlotProps: slotProps?.textField,
41
+ externalForwardedProps: other,
42
+ ownerState,
43
+ additionalProps: {
44
+ ref: inRef
45
+ }
46
+ });
49
47
 
50
48
  // TODO: Remove when mui/material-ui#35088 will be merged
51
49
  textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
52
50
  textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
53
- const _useSingleInputTimeRa = useSingleInputTimeRangeField({
54
- props: textFieldProps,
55
- inputRef: externalInputRef
56
- }),
57
- {
58
- ref: inputRef,
59
- onPaste,
60
- onKeyDown,
61
- inputMode,
62
- readOnly,
63
- clearable,
64
- onClear
65
- } = _useSingleInputTimeRa,
66
- fieldProps = _objectWithoutPropertiesLoose(_useSingleInputTimeRa, _excluded3);
67
- const {
68
- InputProps: ProcessedInputProps,
69
- fieldProps: processedFieldProps
70
- } = useClearableField({
71
- onClear,
72
- clearable,
73
- fieldProps,
74
- InputProps: fieldProps.InputProps,
51
+ const fieldResponse = useSingleInputTimeRangeField(textFieldProps);
52
+ const convertedFieldResponse = convertFieldResponseIntoMuiTextFieldProps(fieldResponse);
53
+ const processedFieldProps = useClearableField(_extends({}, convertedFieldResponse, {
75
54
  slots,
76
55
  slotProps
77
- });
78
- return /*#__PURE__*/_jsx(TextField, _extends({
79
- ref: ref
80
- }, processedFieldProps, {
81
- InputProps: _extends({}, ProcessedInputProps, {
82
- readOnly
83
- }),
84
- inputProps: _extends({}, fieldProps.inputProps, {
85
- inputMode,
86
- onPaste,
87
- onKeyDown,
88
- ref: inputRef
89
- })
90
56
  }));
57
+ return /*#__PURE__*/_jsx(TextField, _extends({}, processedFieldProps));
91
58
  });
92
59
  SingleInputTimeRangeField.fieldType = 'single-input';
93
60
  process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
@@ -283,7 +250,7 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
283
250
  * 4. If `null` is provided, no section will be selected
284
251
  * If not provided, the selected sections will be handled internally.
285
252
  */
286
- selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
253
+ selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
287
254
  endIndex: PropTypes.number.isRequired,
288
255
  startIndex: PropTypes.number.isRequired
289
256
  })]),
@@ -12,17 +12,13 @@ export const useDefaultizedTimeRangeFieldProps = props => {
12
12
  format: props.format ?? defaultFormat
13
13
  });
14
14
  };
15
- export const useSingleInputTimeRangeField = ({
16
- props: inProps,
17
- inputRef
18
- }) => {
15
+ export const useSingleInputTimeRangeField = inProps => {
19
16
  const props = useDefaultizedTimeRangeFieldProps(inProps);
20
17
  const {
21
18
  forwardedProps,
22
19
  internalProps
23
20
  } = splitFieldInternalAndForwardedProps(props, 'time');
24
21
  return useField({
25
- inputRef,
26
22
  forwardedProps,
27
23
  internalProps,
28
24
  valueManager: rangeValueManager,
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-date-pickers-pro v7.0.0-alpha.3
2
+ * @mui/x-date-pickers-pro v7.0.0-alpha.5
3
3
  *
4
4
  * @license MUI X Commercial
5
5
  * This source code is licensed under the commercial license found in the
@@ -29,6 +29,7 @@ export const useDesktopRangePicker = _ref => {
29
29
  timezone,
30
30
  label,
31
31
  inputRef,
32
+ name,
32
33
  readOnly,
33
34
  disabled,
34
35
  autoFocus,
@@ -84,7 +85,8 @@ export const useDesktopRangePicker = _ref => {
84
85
  autoFocus: autoFocus && !props.open,
85
86
  ref: fieldContainerRef
86
87
  }, fieldType === 'single-input' && {
87
- inputRef
88
+ inputRef,
89
+ name
88
90
  }),
89
91
  ownerState: props
90
92
  });
@@ -30,6 +30,7 @@ export const useMobileRangePicker = _ref => {
30
30
  timezone,
31
31
  label,
32
32
  inputRef,
33
+ name,
33
34
  readOnly,
34
35
  disabled,
35
36
  disableOpenPicker,
@@ -71,7 +72,8 @@ export const useMobileRangePicker = _ref => {
71
72
  formatDensity,
72
73
  timezone
73
74
  }, fieldType === 'single-input' && {
74
- inputRef
75
+ inputRef,
76
+ name
75
77
  }),
76
78
  ownerState: props
77
79
  });
@@ -9,10 +9,8 @@ import { excludeProps } from './shared';
9
9
  export const useMultiInputDateRangeField = ({
10
10
  sharedProps: inSharedProps,
11
11
  startTextFieldProps,
12
- startInputRef,
13
12
  unstableStartFieldRef,
14
13
  endTextFieldProps,
15
- endInputRef,
16
14
  unstableEndFieldRef
17
15
  }) => {
18
16
  const sharedProps = useDefaultizedDateRangeFieldProps(inSharedProps);
@@ -97,14 +95,8 @@ export const useMultiInputDateRangeField = ({
97
95
  selectedSections,
98
96
  onSelectedSectionsChange
99
97
  });
100
- const startDateResponse = useDateField({
101
- props: startFieldProps,
102
- inputRef: startInputRef
103
- });
104
- const endDateResponse = useDateField({
105
- props: endFieldProps,
106
- inputRef: endInputRef
107
- });
98
+ const startDateResponse = useDateField(startFieldProps);
99
+ const endDateResponse = useDateField(endFieldProps);
108
100
 
109
101
  /* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */
110
102
  return {
@@ -24,10 +24,8 @@ export const useDefaultizedDateTimeRangeFieldProps = props => {
24
24
  export const useMultiInputDateTimeRangeField = ({
25
25
  sharedProps: inSharedProps,
26
26
  startTextFieldProps,
27
- startInputRef,
28
27
  unstableStartFieldRef,
29
28
  endTextFieldProps,
30
- endInputRef,
31
29
  unstableEndFieldRef
32
30
  }) => {
33
31
  const sharedProps = useDefaultizedDateTimeRangeFieldProps(inSharedProps);
@@ -109,14 +107,8 @@ export const useMultiInputDateTimeRangeField = ({
109
107
  selectedSections,
110
108
  onSelectedSectionsChange
111
109
  });
112
- const startDateResponse = useDateTimeField({
113
- props: startFieldProps,
114
- inputRef: startInputRef
115
- });
116
- const endDateResponse = useDateTimeField({
117
- props: endFieldProps,
118
- inputRef: endInputRef
119
- });
110
+ const startDateResponse = useDateTimeField(startFieldProps);
111
+ const endDateResponse = useDateTimeField(endFieldProps);
120
112
 
121
113
  /* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */
122
114
  return {
@@ -18,10 +18,8 @@ export const useDefaultizedTimeRangeFieldProps = props => {
18
18
  export const useMultiInputTimeRangeField = ({
19
19
  sharedProps: inSharedProps,
20
20
  startTextFieldProps,
21
- startInputRef,
22
21
  unstableStartFieldRef,
23
22
  endTextFieldProps,
24
- endInputRef,
25
23
  unstableEndFieldRef
26
24
  }) => {
27
25
  const sharedProps = useDefaultizedTimeRangeFieldProps(inSharedProps);
@@ -103,14 +101,8 @@ export const useMultiInputTimeRangeField = ({
103
101
  selectedSections,
104
102
  onSelectedSectionsChange
105
103
  });
106
- const startDateResponse = useTimeField({
107
- props: startFieldProps,
108
- inputRef: startInputRef
109
- });
110
- const endDateResponse = useTimeField({
111
- props: endFieldProps,
112
- inputRef: endInputRef
113
- });
104
+ const startDateResponse = useTimeField(startFieldProps);
105
+ const endDateResponse = useTimeField(endFieldProps);
114
106
 
115
107
  /* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */
116
108
  return {
@@ -1,6 +1,6 @@
1
1
  import { ponyfillGlobal } from '@mui/utils';
2
2
  export const getReleaseInfo = () => {
3
- const releaseInfo = "MTcwMTY0MDgwMDAwMA==";
3
+ const releaseInfo = "MTcwMjQ5NDAwMDAwMA==";
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
@@ -52,7 +52,7 @@ const DateRangeCalendarMonthContainer = (0, _styles.styled)('div', {
52
52
  }
53
53
  }));
54
54
  const DateRangeCalendarArrowSwitcher = (0, _styles.styled)(_internals.PickersArrowSwitcher)({
55
- padding: '16px 16px 8px 16px',
55
+ padding: '12px 16px 4px 16px',
56
56
  display: 'flex',
57
57
  alignItems: 'center',
58
58
  justifyContent: 'space-between'
@@ -478,7 +478,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
478
478
  renderLoading: renderLoading,
479
479
  slots: slotsForDayCalendar,
480
480
  slotProps: slotPropsForDayCalendar,
481
- autoFocus: month === focusedMonth,
481
+ autoFocus: visibleMonths[month] === focusedMonth,
482
482
  fixedWeekNumber: fixedWeekNumber,
483
483
  displayWeekNumber: displayWeekNumber,
484
484
  timezone: timezone
@@ -191,6 +191,11 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
191
191
  * Minimal selectable date.
192
192
  */
193
193
  minDate: _propTypes.default.any,
194
+ /**
195
+ * Name attribute used by the `input` element in the Field.
196
+ * Ignored if the field has several inputs.
197
+ */
198
+ name: _propTypes.default.string,
194
199
  /**
195
200
  * Callback fired when the value is accepted.
196
201
  * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
@@ -277,7 +282,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
277
282
  * 4. If `null` is provided, no section will be selected
278
283
  * If not provided, the selected sections will be handled internally.
279
284
  */
280
- selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number, _propTypes.default.shape({
285
+ selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number, _propTypes.default.shape({
281
286
  endIndex: _propTypes.default.number.isRequired,
282
287
  startIndex: _propTypes.default.number.isRequired
283
288
  })]),
@@ -196,6 +196,11 @@ DesktopDateRangePicker.propTypes = {
196
196
  * Minimal selectable date.
197
197
  */
198
198
  minDate: _propTypes.default.any,
199
+ /**
200
+ * Name attribute used by the `input` element in the Field.
201
+ * Ignored if the field has several inputs.
202
+ */
203
+ name: _propTypes.default.string,
199
204
  /**
200
205
  * Callback fired when the value is accepted.
201
206
  * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
@@ -282,7 +287,7 @@ DesktopDateRangePicker.propTypes = {
282
287
  * 4. If `null` is provided, no section will be selected
283
288
  * If not provided, the selected sections will be handled internally.
284
289
  */
285
- selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number, _propTypes.default.shape({
290
+ selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number, _propTypes.default.shape({
286
291
  endIndex: _propTypes.default.number.isRequired,
287
292
  startIndex: _propTypes.default.number.isRequired
288
293
  })]),
@@ -196,6 +196,11 @@ MobileDateRangePicker.propTypes = {
196
196
  * Minimal selectable date.
197
197
  */
198
198
  minDate: _propTypes.default.any,
199
+ /**
200
+ * Name attribute used by the `input` element in the Field.
201
+ * Ignored if the field has several inputs.
202
+ */
203
+ name: _propTypes.default.string,
199
204
  /**
200
205
  * Callback fired when the value is accepted.
201
206
  * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
@@ -282,7 +287,7 @@ MobileDateRangePicker.propTypes = {
282
287
  * 4. If `null` is provided, no section will be selected
283
288
  * If not provided, the selected sections will be handled internally.
284
289
  */
285
- selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number, _propTypes.default.shape({
290
+ selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number, _propTypes.default.shape({
286
291
  endIndex: _propTypes.default.number.isRequired,
287
292
  startIndex: _propTypes.default.number.isRequired
288
293
  })]),