@mui/x-date-pickers-pro 7.0.0 → 7.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +71 -0
  2. package/DateRangePickerDay/DateRangePickerDay.d.ts +5 -0
  3. package/DateRangePickerDay/DateRangePickerDay.js +107 -43
  4. package/DateTimeRangePicker/DateTimeRangePickerToolbar.js +31 -15
  5. package/index.js +1 -1
  6. package/internals/hooks/useEnrichedRangePickerFieldProps.js +1 -1
  7. package/internals/utils/releaseInfo.js +1 -1
  8. package/modern/DateRangePickerDay/DateRangePickerDay.js +107 -43
  9. package/modern/DateTimeRangePicker/DateTimeRangePickerToolbar.js +31 -15
  10. package/modern/index.js +1 -1
  11. package/modern/internals/hooks/useEnrichedRangePickerFieldProps.js +1 -1
  12. package/modern/internals/utils/releaseInfo.js +1 -1
  13. package/node/DateRangePickerDay/DateRangePickerDay.js +107 -43
  14. package/node/DateTimeRangePicker/DateTimeRangePickerToolbar.js +31 -15
  15. package/node/index.js +1 -1
  16. package/node/internals/hooks/useEnrichedRangePickerFieldProps.js +1 -1
  17. package/node/internals/utils/releaseInfo.js +1 -1
  18. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,77 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 7.1.0
7
+
8
+ _Mar 28, 2024_
9
+
10
+ We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
11
+
12
+ - 🚀 Add `resizeThrottleMs` prop (#12556) @romgrk
13
+ - 🌍 Improve Chinese (Hong Kong) (zh-HK) and Italian (it-IT) locale on the Pickers
14
+ - 🐞 Bugfixes
15
+ - 📚 Documentation improvements
16
+
17
+ ### Data Grid
18
+
19
+ #### `@mui/x-data-grid@7.1.0`
20
+
21
+ - [DataGrid] Add `resizeThrottleMs` prop (#12556) @romgrk
22
+ - [DataGrid] Do not publish `rowEditStop` event if row has fields with errors (#11383) @cherniavskii
23
+ - [DataGrid] Fix bug in suspense (#12553) @romgrk
24
+ - [DataGrid] Fix missing class name in the `GridToolbarQuickFilter` component (#12484) @jhawkins11
25
+
26
+ #### `@mui/x-data-grid-pro@7.1.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
27
+
28
+ Same changes as in `@mui/x-data-grid@7.1.0`.
29
+
30
+ #### `@mui/x-data-grid-premium@7.1.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
31
+
32
+ Same changes as in `@mui/x-data-grid-pro@7.1.0`.
33
+
34
+ ### Date and Time Pickers
35
+
36
+ #### `@mui/x-date-pickers@7.1.0`
37
+
38
+ - [fields] Fix placeholder override (#12589) @flaviendelangle
39
+ - [l10n] Improve Chinese (Hong Kong) (zh-HK) locale (#12547) @samchiu90
40
+ - [l10n] Improve Italian (it-IT) locale (#12549) @antomanc
41
+ - [pickers] Prepare compatibility with `@mui/zero-runtime` (stop using `ownerState` in `styled`) (#12003) @flaviendelangle
42
+
43
+ #### `@mui/x-date-pickers-pro@7.1.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
44
+
45
+ Same changes as in `@mui/x-date-pickers@7.1.0`, plus:
46
+
47
+ - [DateRangePicker] Fix selection behavior with single input field when `readOnly` (#12593) @LukasTy
48
+
49
+ ### Charts
50
+
51
+ #### `@mui/x-charts@7.1.0`
52
+
53
+ - [charts] Fix tooltip causing crash on data change (#12571) @Rishi556
54
+
55
+ ### Tree View
56
+
57
+ #### `@mui/x-tree-view@7.1.0`
58
+
59
+ - [TreeView] Do not use outdated version of the state to compute new label first char in `RichTreeView` (#12512) @flaviendelangle
60
+
61
+ ### Docs
62
+
63
+ - [docs] Add example to add a second icon next to the field's opening button (#12524) @flaviendelangle
64
+ - [docs] Add missing note to Data Grid migration guide (#12557) @romgrk
65
+ - [docs] Fix Charts title for SEO (#12545) @oliviertassinari
66
+ - [docs] Fix small typo (#12558) @diogoparente
67
+ - [docs] Improve codemod related documentation (#12582) @MBilalShafi
68
+ - [docs] Reduce noise in migration docs side navigation (#12552) @cherniavskii
69
+ - [docs] Sync static images from core repository (#12525) @LukasTy
70
+
71
+ ### Core
72
+
73
+ - [core] Fix `l10n` script on Windows (#12550) @LukasTy
74
+ - [core] Include `DateTimeRangePicker` tag in `releaseChangelog` (#12526) @LukasTy
75
+ - [core] Upgrade monorepo (#12536) @cherniavskii
76
+
6
77
  ## v7.0.0
7
78
 
8
79
  _Mar 22, 2024_
package/DateRangePickerDay/DateRangePickerDay.d.ts CHANGED
@@ -35,6 +35,11 @@ export interface DateRangePickerDayProps<TDate extends PickerValidDate> extends
35
35
  * Indicates if the day should be visually selected.
36
36
  */
37
37
  isVisuallySelected?: boolean;
38
+ /**
39
+ * If `true`, the day can be dragged to change the current date range.
40
+ * @default false
41
+ */
42
+ draggable?: boolean;
38
43
  }
39
44
  type DateRangePickerDayComponent = <TDate extends PickerValidDate>(props: DateRangePickerDayProps<TDate> & React.RefAttributes<HTMLButtonElement>) => React.JSX.Element;
40
45
  /**
package/DateRangePickerDay/DateRangePickerDay.js CHANGED
@@ -68,26 +68,56 @@ const DateRangePickerDayRoot = styled('div', {
68
68
  [`&.${dateRangePickerDayClasses.hiddenDayFiller}`]: styles.hiddenDayFiller
69
69
  }, styles.root]
70
70
  })(({
71
- theme,
72
- ownerState
73
- }) => ownerState.isHiddenDayFiller ? {} : _extends({
74
- [`&:first-of-type .${dateRangePickerDayClasses.rangeIntervalDayPreview}`]: _extends({}, startBorderStyle, {
75
- borderLeftColor: (theme.vars || theme).palette.divider
76
- }),
77
- [`&:last-of-type .${dateRangePickerDayClasses.rangeIntervalDayPreview}`]: _extends({}, endBorderStyle, {
78
- borderRightColor: (theme.vars || theme).palette.divider
79
- })
80
- }, ownerState.isHighlighting && {
81
- borderRadius: 0,
82
- color: (theme.vars || theme).palette.primary.contrastText,
83
- backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
84
- '&:first-of-type': startBorderStyle,
85
- '&:last-of-type': endBorderStyle
86
- }, (ownerState.isStartOfHighlighting || ownerState.isFirstVisibleCell) && _extends({}, startBorderStyle, {
87
- paddingLeft: 0
88
- }), (ownerState.isEndOfHighlighting || ownerState.isLastVisibleCell) && _extends({}, endBorderStyle, {
89
- paddingRight: 0
90
- })));
71
+ theme
72
+ }) => ({
73
+ variants: [{
74
+ props: {
75
+ isHiddenDayFiller: false
76
+ },
77
+ style: {
78
+ [`&:first-of-type .${dateRangePickerDayClasses.rangeIntervalDayPreview}`]: _extends({}, startBorderStyle, {
79
+ borderLeftColor: (theme.vars || theme).palette.divider
80
+ }),
81
+ [`&:last-of-type .${dateRangePickerDayClasses.rangeIntervalDayPreview}`]: _extends({}, endBorderStyle, {
82
+ borderRightColor: (theme.vars || theme).palette.divider
83
+ })
84
+ }
85
+ }, {
86
+ props: {
87
+ isHiddenDayFiller: false,
88
+ isHighlighting: true
89
+ },
90
+ style: {
91
+ borderRadius: 0,
92
+ color: (theme.vars || theme).palette.primary.contrastText,
93
+ backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
94
+ '&:first-of-type': startBorderStyle,
95
+ '&:last-of-type': endBorderStyle
96
+ }
97
+ }, {
98
+ props: ({
99
+ ownerState: {
100
+ isHiddenDayFiller,
101
+ isStartOfHighlighting,
102
+ isFirstVisibleCell
103
+ }
104
+ }) => !isHiddenDayFiller && (isStartOfHighlighting || isFirstVisibleCell),
105
+ style: _extends({}, startBorderStyle, {
106
+ paddingLeft: 0
107
+ })
108
+ }, {
109
+ props: ({
110
+ ownerState: {
111
+ isHiddenDayFiller,
112
+ isEndOfHighlighting,
113
+ isLastVisibleCell
114
+ }
115
+ }) => !isHiddenDayFiller && (isEndOfHighlighting || isLastVisibleCell),
116
+ style: _extends({}, endBorderStyle, {
117
+ paddingRight: 0
118
+ })
119
+ }]
120
+ }));
91
121
  DateRangePickerDayRoot.propTypes = {
92
122
  // ----------------------------- Warning --------------------------------
93
123
  // | These PropTypes are generated from the TypeScript type definitions |
@@ -106,21 +136,47 @@ const DateRangePickerDayRangeIntervalPreview = styled('div', {
106
136
  [`&.${dateRangePickerDayClasses.rangeIntervalDayPreviewEnd}`]: styles.rangeIntervalDayPreviewEnd
107
137
  }, styles.rangeIntervalPreview]
108
138
  })(({
109
- theme,
110
- ownerState
111
- }) => _extends({
139
+ theme
140
+ }) => ({
112
141
  // replace default day component margin with transparent border to avoid jumping on preview
113
- border: '2px solid transparent'
114
- }, ownerState.isPreviewing && !ownerState.isHiddenDayFiller && _extends({
115
- borderRadius: 0,
116
- border: `2px dashed ${(theme.vars || theme).palette.divider}`,
117
- borderLeftColor: 'transparent',
118
- borderRightColor: 'transparent'
119
- }, (ownerState.isStartOfPreviewing || ownerState.isFirstVisibleCell) && _extends({
120
- borderLeftColor: (theme.vars || theme).palette.divider
121
- }, startBorderStyle), (ownerState.isEndOfPreviewing || ownerState.isLastVisibleCell) && _extends({
122
- borderRightColor: (theme.vars || theme).palette.divider
123
- }, endBorderStyle))));
142
+ border: '2px solid transparent',
143
+ variants: [{
144
+ props: {
145
+ isPreviewing: true,
146
+ isHiddenDayFiller: false
147
+ },
148
+ style: {
149
+ borderRadius: 0,
150
+ border: `2px dashed ${(theme.vars || theme).palette.divider}`,
151
+ borderLeftColor: 'transparent',
152
+ borderRightColor: 'transparent'
153
+ }
154
+ }, {
155
+ props: ({
156
+ ownerState: {
157
+ isPreviewing,
158
+ isHiddenDayFiller,
159
+ isStartOfPreviewing,
160
+ isFirstVisibleCell
161
+ }
162
+ }) => isPreviewing && !isHiddenDayFiller && (isStartOfPreviewing || isFirstVisibleCell),
163
+ style: _extends({
164
+ borderLeftColor: (theme.vars || theme).palette.divider
165
+ }, startBorderStyle)
166
+ }, {
167
+ props: ({
168
+ ownerState: {
169
+ isPreviewing,
170
+ isHiddenDayFiller,
171
+ isEndOfPreviewing,
172
+ isLastVisibleCell
173
+ }
174
+ }) => isPreviewing && !isHiddenDayFiller && (isEndOfPreviewing || isLastVisibleCell),
175
+ style: _extends({
176
+ borderRightColor: (theme.vars || theme).palette.divider
177
+ }, endBorderStyle)
178
+ }]
179
+ }));
124
180
  DateRangePickerDayRangeIntervalPreview.propTypes = {
125
181
  // ----------------------------- Warning --------------------------------
126
182
  // | These PropTypes are generated from the TypeScript type definitions |
@@ -138,19 +194,22 @@ const DateRangePickerDayDay = styled(PickersDay, {
138
194
  }, {
139
195
  [`&.${dateRangePickerDayClasses.notSelectedDate}`]: styles.notSelectedDate
140
196
  }, styles.day]
141
- })(({
142
- ownerState
143
- }) => _extends({
197
+ })({
144
198
  // Required to overlap preview border
145
199
  transform: 'scale(1.1)',
146
200
  '& > *': {
147
201
  transform: 'scale(0.9)'
148
- }
149
- }, ownerState.draggable && {
150
- cursor: 'grab'
151
- }, ownerState.draggable && {
152
- touchAction: 'none'
153
- }));
202
+ },
203
+ variants: [{
204
+ props: {
205
+ draggable: true
206
+ },
207
+ style: {
208
+ cursor: 'grab',
209
+ touchAction: 'none'
210
+ }
211
+ }]
212
+ });
154
213
  const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePickerDay(inProps, ref) {
155
214
  const props = useThemeProps({
156
215
  props: inProps,
@@ -266,6 +325,11 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
266
325
  * @default false
267
326
  */
268
327
  disableTouchRipple: PropTypes.bool,
328
+ /**
329
+ * If `true`, the day can be dragged to change the current date range.
330
+ * @default false
331
+ */
332
+ draggable: PropTypes.bool,
269
333
  /**
270
334
  * If `true`, the base button will have a keyboard focus ripple.
271
335
  * @default false
package/DateTimeRangePicker/DateTimeRangePickerToolbar.js CHANGED
@@ -1,5 +1,5 @@
1
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
3
  const _excluded = ["value", "rangePosition", "onRangePositionChange", "className", "onViewChange", "toolbarVariant", "onChange", "classes", "view", "isLandscape", "views", "ampm", "disabled", "readOnly", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
4
4
  import * as React from 'react';
5
5
  import PropTypes from 'prop-types';
@@ -35,24 +35,40 @@ const DateTimeRangePickerToolbarStart = styled(DateTimePickerToolbar, {
35
35
  name: 'MuiDateTimeRangePickerToolbar',
36
36
  slot: 'StartToolbar',
37
37
  overridesResolver: (_, styles) => styles.startToolbar
38
- })(({
39
- ownerState
40
- }) => _extends({
41
- borderBottom: 'none'
42
- }, ownerState?.toolbarVariant !== 'desktop' ? {
43
- padding: '12px 8px 0 12px'
44
- } : {
45
- paddingBottom: 0
46
- }));
38
+ })({
39
+ borderBottom: 'none',
40
+ variants: [{
41
+ props: ({
42
+ toolbarVariant
43
+ }) => toolbarVariant !== 'desktop',
44
+ style: {
45
+ padding: '12px 8px 0 12px'
46
+ }
47
+ }, {
48
+ props: {
49
+ toolbarVariant: 'desktop'
50
+ },
51
+ style: {
52
+ paddingBottom: 0
53
+ }
54
+ }]
55
+ });
47
56
  const DateTimeRangePickerToolbarEnd = styled(DateTimePickerToolbar, {
48
57
  name: 'MuiDateTimeRangePickerToolbar',
49
58
  slot: 'EndToolbar',
50
59
  overridesResolver: (_, styles) => styles.endToolbar
51
- })(({
52
- ownerState
53
- }) => ({
54
- padding: ownerState?.toolbarVariant !== 'desktop' ? '12px 8px 12px 12px' : undefined
55
- }));
60
+ })({
61
+ variants: [{
62
+ props: ({
63
+ ownerState: {
64
+ toolbarVariant
65
+ }
66
+ }) => toolbarVariant !== 'desktop',
67
+ style: {
68
+ padding: '12px 8px 12px 12px'
69
+ }
70
+ }]
71
+ });
56
72
  const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTimeRangePickerToolbar(inProps, ref) {
57
73
  const props = useThemeProps({
58
74
  props: inProps,
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-date-pickers-pro v7.0.0
2
+ * @mui/x-date-pickers-pro v7.1.0
3
3
  *
4
4
  * @license MUI X Commercial
5
5
  * This source code is licensed under the commercial license found in the
package/internals/hooks/useEnrichedRangePickerFieldProps.js CHANGED
@@ -221,7 +221,7 @@ const useSingleInputFieldSlotProps = ({
221
221
  InputProps: _extends({
222
222
  ref: anchorRef
223
223
  }, fieldProps?.InputProps),
224
- focused: open
224
+ focused: open ? true : undefined
225
225
  }, labelId != null && {
226
226
  id: labelId
227
227
  }, wrapperVariant === 'mobile' && {
package/internals/utils/releaseInfo.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ponyfillGlobal } from '@mui/utils';
2
2
  export const getReleaseInfo = () => {
3
- const releaseInfo = "MTcxMTA1ODQwMDAwMA==";
3
+ const releaseInfo = "MTcxMTU4MDQwMDAwMA==";
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
package/modern/DateRangePickerDay/DateRangePickerDay.js CHANGED
@@ -68,26 +68,56 @@ const DateRangePickerDayRoot = styled('div', {
68
68
  [`&.${dateRangePickerDayClasses.hiddenDayFiller}`]: styles.hiddenDayFiller
69
69
  }, styles.root]
70
70
  })(({
71
- theme,
72
- ownerState
73
- }) => ownerState.isHiddenDayFiller ? {} : _extends({
74
- [`&:first-of-type .${dateRangePickerDayClasses.rangeIntervalDayPreview}`]: _extends({}, startBorderStyle, {
75
- borderLeftColor: (theme.vars || theme).palette.divider
76
- }),
77
- [`&:last-of-type .${dateRangePickerDayClasses.rangeIntervalDayPreview}`]: _extends({}, endBorderStyle, {
78
- borderRightColor: (theme.vars || theme).palette.divider
79
- })
80
- }, ownerState.isHighlighting && {
81
- borderRadius: 0,
82
- color: (theme.vars || theme).palette.primary.contrastText,
83
- backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
84
- '&:first-of-type': startBorderStyle,
85
- '&:last-of-type': endBorderStyle
86
- }, (ownerState.isStartOfHighlighting || ownerState.isFirstVisibleCell) && _extends({}, startBorderStyle, {
87
- paddingLeft: 0
88
- }), (ownerState.isEndOfHighlighting || ownerState.isLastVisibleCell) && _extends({}, endBorderStyle, {
89
- paddingRight: 0
90
- })));
71
+ theme
72
+ }) => ({
73
+ variants: [{
74
+ props: {
75
+ isHiddenDayFiller: false
76
+ },
77
+ style: {
78
+ [`&:first-of-type .${dateRangePickerDayClasses.rangeIntervalDayPreview}`]: _extends({}, startBorderStyle, {
79
+ borderLeftColor: (theme.vars || theme).palette.divider
80
+ }),
81
+ [`&:last-of-type .${dateRangePickerDayClasses.rangeIntervalDayPreview}`]: _extends({}, endBorderStyle, {
82
+ borderRightColor: (theme.vars || theme).palette.divider
83
+ })
84
+ }
85
+ }, {
86
+ props: {
87
+ isHiddenDayFiller: false,
88
+ isHighlighting: true
89
+ },
90
+ style: {
91
+ borderRadius: 0,
92
+ color: (theme.vars || theme).palette.primary.contrastText,
93
+ backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
94
+ '&:first-of-type': startBorderStyle,
95
+ '&:last-of-type': endBorderStyle
96
+ }
97
+ }, {
98
+ props: ({
99
+ ownerState: {
100
+ isHiddenDayFiller,
101
+ isStartOfHighlighting,
102
+ isFirstVisibleCell
103
+ }
104
+ }) => !isHiddenDayFiller && (isStartOfHighlighting || isFirstVisibleCell),
105
+ style: _extends({}, startBorderStyle, {
106
+ paddingLeft: 0
107
+ })
108
+ }, {
109
+ props: ({
110
+ ownerState: {
111
+ isHiddenDayFiller,
112
+ isEndOfHighlighting,
113
+ isLastVisibleCell
114
+ }
115
+ }) => !isHiddenDayFiller && (isEndOfHighlighting || isLastVisibleCell),
116
+ style: _extends({}, endBorderStyle, {
117
+ paddingRight: 0
118
+ })
119
+ }]
120
+ }));
91
121
  DateRangePickerDayRoot.propTypes = {
92
122
  // ----------------------------- Warning --------------------------------
93
123
  // | These PropTypes are generated from the TypeScript type definitions |
@@ -106,21 +136,47 @@ const DateRangePickerDayRangeIntervalPreview = styled('div', {
106
136
  [`&.${dateRangePickerDayClasses.rangeIntervalDayPreviewEnd}`]: styles.rangeIntervalDayPreviewEnd
107
137
  }, styles.rangeIntervalPreview]
108
138
  })(({
109
- theme,
110
- ownerState
111
- }) => _extends({
139
+ theme
140
+ }) => ({
112
141
  // replace default day component margin with transparent border to avoid jumping on preview
113
- border: '2px solid transparent'
114
- }, ownerState.isPreviewing && !ownerState.isHiddenDayFiller && _extends({
115
- borderRadius: 0,
116
- border: `2px dashed ${(theme.vars || theme).palette.divider}`,
117
- borderLeftColor: 'transparent',
118
- borderRightColor: 'transparent'
119
- }, (ownerState.isStartOfPreviewing || ownerState.isFirstVisibleCell) && _extends({
120
- borderLeftColor: (theme.vars || theme).palette.divider
121
- }, startBorderStyle), (ownerState.isEndOfPreviewing || ownerState.isLastVisibleCell) && _extends({
122
- borderRightColor: (theme.vars || theme).palette.divider
123
- }, endBorderStyle))));
142
+ border: '2px solid transparent',
143
+ variants: [{
144
+ props: {
145
+ isPreviewing: true,
146
+ isHiddenDayFiller: false
147
+ },
148
+ style: {
149
+ borderRadius: 0,
150
+ border: `2px dashed ${(theme.vars || theme).palette.divider}`,
151
+ borderLeftColor: 'transparent',
152
+ borderRightColor: 'transparent'
153
+ }
154
+ }, {
155
+ props: ({
156
+ ownerState: {
157
+ isPreviewing,
158
+ isHiddenDayFiller,
159
+ isStartOfPreviewing,
160
+ isFirstVisibleCell
161
+ }
162
+ }) => isPreviewing && !isHiddenDayFiller && (isStartOfPreviewing || isFirstVisibleCell),
163
+ style: _extends({
164
+ borderLeftColor: (theme.vars || theme).palette.divider
165
+ }, startBorderStyle)
166
+ }, {
167
+ props: ({
168
+ ownerState: {
169
+ isPreviewing,
170
+ isHiddenDayFiller,
171
+ isEndOfPreviewing,
172
+ isLastVisibleCell
173
+ }
174
+ }) => isPreviewing && !isHiddenDayFiller && (isEndOfPreviewing || isLastVisibleCell),
175
+ style: _extends({
176
+ borderRightColor: (theme.vars || theme).palette.divider
177
+ }, endBorderStyle)
178
+ }]
179
+ }));
124
180
  DateRangePickerDayRangeIntervalPreview.propTypes = {
125
181
  // ----------------------------- Warning --------------------------------
126
182
  // | These PropTypes are generated from the TypeScript type definitions |
@@ -138,19 +194,22 @@ const DateRangePickerDayDay = styled(PickersDay, {
138
194
  }, {
139
195
  [`&.${dateRangePickerDayClasses.notSelectedDate}`]: styles.notSelectedDate
140
196
  }, styles.day]
141
- })(({
142
- ownerState
143
- }) => _extends({
197
+ })({
144
198
  // Required to overlap preview border
145
199
  transform: 'scale(1.1)',
146
200
  '& > *': {
147
201
  transform: 'scale(0.9)'
148
- }
149
- }, ownerState.draggable && {
150
- cursor: 'grab'
151
- }, ownerState.draggable && {
152
- touchAction: 'none'
153
- }));
202
+ },
203
+ variants: [{
204
+ props: {
205
+ draggable: true
206
+ },
207
+ style: {
208
+ cursor: 'grab',
209
+ touchAction: 'none'
210
+ }
211
+ }]
212
+ });
154
213
  const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePickerDay(inProps, ref) {
155
214
  const props = useThemeProps({
156
215
  props: inProps,
@@ -266,6 +325,11 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
266
325
  * @default false
267
326
  */
268
327
  disableTouchRipple: PropTypes.bool,
328
+ /**
329
+ * If `true`, the day can be dragged to change the current date range.
330
+ * @default false
331
+ */
332
+ draggable: PropTypes.bool,
269
333
  /**
270
334
  * If `true`, the base button will have a keyboard focus ripple.
271
335
  * @default false
package/modern/DateTimeRangePicker/DateTimeRangePickerToolbar.js CHANGED
@@ -1,5 +1,5 @@
1
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
3
  const _excluded = ["value", "rangePosition", "onRangePositionChange", "className", "onViewChange", "toolbarVariant", "onChange", "classes", "view", "isLandscape", "views", "ampm", "disabled", "readOnly", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
4
4
  import * as React from 'react';
5
5
  import PropTypes from 'prop-types';
@@ -35,24 +35,40 @@ const DateTimeRangePickerToolbarStart = styled(DateTimePickerToolbar, {
35
35
  name: 'MuiDateTimeRangePickerToolbar',
36
36
  slot: 'StartToolbar',
37
37
  overridesResolver: (_, styles) => styles.startToolbar
38
- })(({
39
- ownerState
40
- }) => _extends({
41
- borderBottom: 'none'
42
- }, ownerState?.toolbarVariant !== 'desktop' ? {
43
- padding: '12px 8px 0 12px'
44
- } : {
45
- paddingBottom: 0
46
- }));
38
+ })({
39
+ borderBottom: 'none',
40
+ variants: [{
41
+ props: ({
42
+ toolbarVariant
43
+ }) => toolbarVariant !== 'desktop',
44
+ style: {
45
+ padding: '12px 8px 0 12px'
46
+ }
47
+ }, {
48
+ props: {
49
+ toolbarVariant: 'desktop'
50
+ },
51
+ style: {
52
+ paddingBottom: 0
53
+ }
54
+ }]
55
+ });
47
56
  const DateTimeRangePickerToolbarEnd = styled(DateTimePickerToolbar, {
48
57
  name: 'MuiDateTimeRangePickerToolbar',
49
58
  slot: 'EndToolbar',
50
59
  overridesResolver: (_, styles) => styles.endToolbar
51
- })(({
52
- ownerState
53
- }) => ({
54
- padding: ownerState?.toolbarVariant !== 'desktop' ? '12px 8px 12px 12px' : undefined
55
- }));
60
+ })({
61
+ variants: [{
62
+ props: ({
63
+ ownerState: {
64
+ toolbarVariant
65
+ }
66
+ }) => toolbarVariant !== 'desktop',
67
+ style: {
68
+ padding: '12px 8px 12px 12px'
69
+ }
70
+ }]
71
+ });
56
72
  const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTimeRangePickerToolbar(inProps, ref) {
57
73
  const props = useThemeProps({
58
74
  props: inProps,
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-date-pickers-pro v7.0.0
2
+ * @mui/x-date-pickers-pro v7.1.0
3
3
  *
4
4
  * @license MUI X Commercial
5
5
  * This source code is licensed under the commercial license found in the
package/modern/internals/hooks/useEnrichedRangePickerFieldProps.js CHANGED
@@ -221,7 +221,7 @@ const useSingleInputFieldSlotProps = ({
221
221
  InputProps: _extends({
222
222
  ref: anchorRef
223
223
  }, fieldProps?.InputProps),
224
- focused: open
224
+ focused: open ? true : undefined
225
225
  }, labelId != null && {
226
226
  id: labelId
227
227
  }, wrapperVariant === 'mobile' && {
package/modern/internals/utils/releaseInfo.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ponyfillGlobal } from '@mui/utils';
2
2
  export const getReleaseInfo = () => {
3
- const releaseInfo = "MTcxMTA1ODQwMDAwMA==";
3
+ const releaseInfo = "MTcxMTU4MDQwMDAwMA==";
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
package/node/DateRangePickerDay/DateRangePickerDay.js CHANGED
@@ -77,26 +77,56 @@ const DateRangePickerDayRoot = (0, _styles.styled)('div', {
77
77
  [`&.${_dateRangePickerDayClasses.dateRangePickerDayClasses.hiddenDayFiller}`]: styles.hiddenDayFiller
78
78
  }, styles.root]
79
79
  })(({
80
- theme,
81
- ownerState
82
- }) => ownerState.isHiddenDayFiller ? {} : (0, _extends2.default)({
83
- [`&:first-of-type .${_dateRangePickerDayClasses.dateRangePickerDayClasses.rangeIntervalDayPreview}`]: (0, _extends2.default)({}, startBorderStyle, {
84
- borderLeftColor: (theme.vars || theme).palette.divider
85
- }),
86
- [`&:last-of-type .${_dateRangePickerDayClasses.dateRangePickerDayClasses.rangeIntervalDayPreview}`]: (0, _extends2.default)({}, endBorderStyle, {
87
- borderRightColor: (theme.vars || theme).palette.divider
88
- })
89
- }, ownerState.isHighlighting && {
90
- borderRadius: 0,
91
- color: (theme.vars || theme).palette.primary.contrastText,
92
- backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.focusOpacity),
93
- '&:first-of-type': startBorderStyle,
94
- '&:last-of-type': endBorderStyle
95
- }, (ownerState.isStartOfHighlighting || ownerState.isFirstVisibleCell) && (0, _extends2.default)({}, startBorderStyle, {
96
- paddingLeft: 0
97
- }), (ownerState.isEndOfHighlighting || ownerState.isLastVisibleCell) && (0, _extends2.default)({}, endBorderStyle, {
98
- paddingRight: 0
99
- })));
80
+ theme
81
+ }) => ({
82
+ variants: [{
83
+ props: {
84
+ isHiddenDayFiller: false
85
+ },
86
+ style: {
87
+ [`&:first-of-type .${_dateRangePickerDayClasses.dateRangePickerDayClasses.rangeIntervalDayPreview}`]: (0, _extends2.default)({}, startBorderStyle, {
88
+ borderLeftColor: (theme.vars || theme).palette.divider
89
+ }),
90
+ [`&:last-of-type .${_dateRangePickerDayClasses.dateRangePickerDayClasses.rangeIntervalDayPreview}`]: (0, _extends2.default)({}, endBorderStyle, {
91
+ borderRightColor: (theme.vars || theme).palette.divider
92
+ })
93
+ }
94
+ }, {
95
+ props: {
96
+ isHiddenDayFiller: false,
97
+ isHighlighting: true
98
+ },
99
+ style: {
100
+ borderRadius: 0,
101
+ color: (theme.vars || theme).palette.primary.contrastText,
102
+ backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.focusOpacity),
103
+ '&:first-of-type': startBorderStyle,
104
+ '&:last-of-type': endBorderStyle
105
+ }
106
+ }, {
107
+ props: ({
108
+ ownerState: {
109
+ isHiddenDayFiller,
110
+ isStartOfHighlighting,
111
+ isFirstVisibleCell
112
+ }
113
+ }) => !isHiddenDayFiller && (isStartOfHighlighting || isFirstVisibleCell),
114
+ style: (0, _extends2.default)({}, startBorderStyle, {
115
+ paddingLeft: 0
116
+ })
117
+ }, {
118
+ props: ({
119
+ ownerState: {
120
+ isHiddenDayFiller,
121
+ isEndOfHighlighting,
122
+ isLastVisibleCell
123
+ }
124
+ }) => !isHiddenDayFiller && (isEndOfHighlighting || isLastVisibleCell),
125
+ style: (0, _extends2.default)({}, endBorderStyle, {
126
+ paddingRight: 0
127
+ })
128
+ }]
129
+ }));
100
130
  DateRangePickerDayRoot.propTypes = {
101
131
  // ----------------------------- Warning --------------------------------
102
132
  // | These PropTypes are generated from the TypeScript type definitions |
@@ -115,21 +145,47 @@ const DateRangePickerDayRangeIntervalPreview = (0, _styles.styled)('div', {
115
145
  [`&.${_dateRangePickerDayClasses.dateRangePickerDayClasses.rangeIntervalDayPreviewEnd}`]: styles.rangeIntervalDayPreviewEnd
116
146
  }, styles.rangeIntervalPreview]
117
147
  })(({
118
- theme,
119
- ownerState
120
- }) => (0, _extends2.default)({
148
+ theme
149
+ }) => ({
121
150
  // replace default day component margin with transparent border to avoid jumping on preview
122
- border: '2px solid transparent'
123
- }, ownerState.isPreviewing && !ownerState.isHiddenDayFiller && (0, _extends2.default)({
124
- borderRadius: 0,
125
- border: `2px dashed ${(theme.vars || theme).palette.divider}`,
126
- borderLeftColor: 'transparent',
127
- borderRightColor: 'transparent'
128
- }, (ownerState.isStartOfPreviewing || ownerState.isFirstVisibleCell) && (0, _extends2.default)({
129
- borderLeftColor: (theme.vars || theme).palette.divider
130
- }, startBorderStyle), (ownerState.isEndOfPreviewing || ownerState.isLastVisibleCell) && (0, _extends2.default)({
131
- borderRightColor: (theme.vars || theme).palette.divider
132
- }, endBorderStyle))));
151
+ border: '2px solid transparent',
152
+ variants: [{
153
+ props: {
154
+ isPreviewing: true,
155
+ isHiddenDayFiller: false
156
+ },
157
+ style: {
158
+ borderRadius: 0,
159
+ border: `2px dashed ${(theme.vars || theme).palette.divider}`,
160
+ borderLeftColor: 'transparent',
161
+ borderRightColor: 'transparent'
162
+ }
163
+ }, {
164
+ props: ({
165
+ ownerState: {
166
+ isPreviewing,
167
+ isHiddenDayFiller,
168
+ isStartOfPreviewing,
169
+ isFirstVisibleCell
170
+ }
171
+ }) => isPreviewing && !isHiddenDayFiller && (isStartOfPreviewing || isFirstVisibleCell),
172
+ style: (0, _extends2.default)({
173
+ borderLeftColor: (theme.vars || theme).palette.divider
174
+ }, startBorderStyle)
175
+ }, {
176
+ props: ({
177
+ ownerState: {
178
+ isPreviewing,
179
+ isHiddenDayFiller,
180
+ isEndOfPreviewing,
181
+ isLastVisibleCell
182
+ }
183
+ }) => isPreviewing && !isHiddenDayFiller && (isEndOfPreviewing || isLastVisibleCell),
184
+ style: (0, _extends2.default)({
185
+ borderRightColor: (theme.vars || theme).palette.divider
186
+ }, endBorderStyle)
187
+ }]
188
+ }));
133
189
  DateRangePickerDayRangeIntervalPreview.propTypes = {
134
190
  // ----------------------------- Warning --------------------------------
135
191
  // | These PropTypes are generated from the TypeScript type definitions |
@@ -147,19 +203,22 @@ const DateRangePickerDayDay = (0, _styles.styled)(_PickersDay.PickersDay, {
147
203
  }, {
148
204
  [`&.${_dateRangePickerDayClasses.dateRangePickerDayClasses.notSelectedDate}`]: styles.notSelectedDate
149
205
  }, styles.day]
150
- })(({
151
- ownerState
152
- }) => (0, _extends2.default)({
206
+ })({
153
207
  // Required to overlap preview border
154
208
  transform: 'scale(1.1)',
155
209
  '& > *': {
156
210
  transform: 'scale(0.9)'
157
- }
158
- }, ownerState.draggable && {
159
- cursor: 'grab'
160
- }, ownerState.draggable && {
161
- touchAction: 'none'
162
- }));
211
+ },
212
+ variants: [{
213
+ props: {
214
+ draggable: true
215
+ },
216
+ style: {
217
+ cursor: 'grab',
218
+ touchAction: 'none'
219
+ }
220
+ }]
221
+ });
163
222
  const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePickerDay(inProps, ref) {
164
223
  const props = (0, _styles.useThemeProps)({
165
224
  props: inProps,
@@ -275,6 +334,11 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
275
334
  * @default false
276
335
  */
277
336
  disableTouchRipple: _propTypes.default.bool,
337
+ /**
338
+ * If `true`, the day can be dragged to change the current date range.
339
+ * @default false
340
+ */
341
+ draggable: _propTypes.default.bool,
278
342
  /**
279
343
  * If `true`, the base button will have a keyboard focus ripple.
280
344
  * @default false
package/node/DateTimeRangePicker/DateTimeRangePickerToolbar.js CHANGED
@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.DateTimeRangePickerToolbar = void 0;
8
- var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
9
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
10
10
  var React = _interopRequireWildcard(require("react"));
11
11
  var _propTypes = _interopRequireDefault(require("prop-types"));
12
12
  var _clsx = _interopRequireDefault(require("clsx"));
@@ -43,24 +43,40 @@ const DateTimeRangePickerToolbarStart = (0, _styles.styled)(_DateTimePicker.Date
43
43
  name: 'MuiDateTimeRangePickerToolbar',
44
44
  slot: 'StartToolbar',
45
45
  overridesResolver: (_, styles) => styles.startToolbar
46
- })(({
47
- ownerState
48
- }) => (0, _extends2.default)({
49
- borderBottom: 'none'
50
- }, ownerState?.toolbarVariant !== 'desktop' ? {
51
- padding: '12px 8px 0 12px'
52
- } : {
53
- paddingBottom: 0
54
- }));
46
+ })({
47
+ borderBottom: 'none',
48
+ variants: [{
49
+ props: ({
50
+ toolbarVariant
51
+ }) => toolbarVariant !== 'desktop',
52
+ style: {
53
+ padding: '12px 8px 0 12px'
54
+ }
55
+ }, {
56
+ props: {
57
+ toolbarVariant: 'desktop'
58
+ },
59
+ style: {
60
+ paddingBottom: 0
61
+ }
62
+ }]
63
+ });
55
64
  const DateTimeRangePickerToolbarEnd = (0, _styles.styled)(_DateTimePicker.DateTimePickerToolbar, {
56
65
  name: 'MuiDateTimeRangePickerToolbar',
57
66
  slot: 'EndToolbar',
58
67
  overridesResolver: (_, styles) => styles.endToolbar
59
- })(({
60
- ownerState
61
- }) => ({
62
- padding: ownerState?.toolbarVariant !== 'desktop' ? '12px 8px 12px 12px' : undefined
63
- }));
68
+ })({
69
+ variants: [{
70
+ props: ({
71
+ ownerState: {
72
+ toolbarVariant
73
+ }
74
+ }) => toolbarVariant !== 'desktop',
75
+ style: {
76
+ padding: '12px 8px 12px 12px'
77
+ }
78
+ }]
79
+ });
64
80
  const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTimeRangePickerToolbar(inProps, ref) {
65
81
  const props = (0, _styles.useThemeProps)({
66
82
  props: inProps,
package/node/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-date-pickers-pro v7.0.0
2
+ * @mui/x-date-pickers-pro v7.1.0
3
3
  *
4
4
  * @license MUI X Commercial
5
5
  * This source code is licensed under the commercial license found in the
package/node/internals/hooks/useEnrichedRangePickerFieldProps.js CHANGED
@@ -230,7 +230,7 @@ const useSingleInputFieldSlotProps = ({
230
230
  InputProps: (0, _extends2.default)({
231
231
  ref: anchorRef
232
232
  }, fieldProps?.InputProps),
233
- focused: open
233
+ focused: open ? true : undefined
234
234
  }, labelId != null && {
235
235
  id: labelId
236
236
  }, wrapperVariant === 'mobile' && {
package/node/internals/utils/releaseInfo.js CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.getReleaseInfo = void 0;
7
7
  var _utils = require("@mui/utils");
8
8
  const getReleaseInfo = () => {
9
- const releaseInfo = "MTcxMTA1ODQwMDAwMA==";
9
+ const releaseInfo = "MTcxMTU4MDQwMDAwMA==";
10
10
  if (process.env.NODE_ENV !== 'production') {
11
11
  // A simple hack to set the value in the test environment (has no build step).
12
12
  // eslint-disable-next-line no-useless-concat
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/x-date-pickers-pro",
3
- "version": "7.0.0",
3
+ "version": "7.1.0",
4
4
  "description": "The commercial edition of the date picker components (MUI X).",
5
5
  "author": "MUI Team",
6
6
  "main": "./node/index.js",
@@ -35,7 +35,7 @@
35
35
  "@mui/base": "^5.0.0-beta.40",
36
36
  "@mui/system": "^5.15.14",
37
37
  "@mui/utils": "^5.15.14",
38
- "@mui/x-date-pickers": "7.0.0",
38
+ "@mui/x-date-pickers": "7.1.0",
39
39
  "@mui/x-license": "7.0.0",
40
40
  "clsx": "^2.1.0",
41
41
  "prop-types": "^15.8.1",