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

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 (66) hide show
  1. package/CHANGELOG.md +246 -4
  2. package/DateRangeCalendar/DateRangeCalendar.js +1 -1
  3. package/DateRangePicker/DateRangePicker.js +1 -1
  4. package/DateRangePickerDay/DateRangePickerDay.d.ts +5 -0
  5. package/DateRangePickerDay/DateRangePickerDay.js +107 -43
  6. package/DateTimeRangePicker/DateTimeRangePicker.js +2 -2
  7. package/DateTimeRangePicker/DateTimeRangePickerToolbar.js +31 -15
  8. package/DesktopDateRangePicker/DesktopDateRangePicker.js +1 -1
  9. package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js +2 -2
  10. package/MobileDateRangePicker/MobileDateRangePicker.js +1 -1
  11. package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js +2 -2
  12. package/MultiInputDateRangeField/MultiInputDateRangeField.js +1 -1
  13. package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js +2 -2
  14. package/MultiInputTimeRangeField/MultiInputTimeRangeField.js +2 -2
  15. package/README.md +1 -1
  16. package/SingleInputDateRangeField/SingleInputDateRangeField.js +1 -1
  17. package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js +2 -2
  18. package/SingleInputTimeRangeField/SingleInputTimeRangeField.js +2 -2
  19. package/StaticDateRangePicker/StaticDateRangePicker.js +1 -1
  20. package/index.js +1 -1
  21. package/internals/hooks/useEnrichedRangePickerFieldProps.js +1 -1
  22. package/internals/models/dateTimeRange.d.ts +1 -1
  23. package/internals/models/timeRange.d.ts +1 -1
  24. package/internals/utils/date-range-manager.js +1 -1
  25. package/internals/utils/releaseInfo.js +1 -1
  26. package/modern/DateRangeCalendar/DateRangeCalendar.js +1 -1
  27. package/modern/DateRangePicker/DateRangePicker.js +1 -1
  28. package/modern/DateRangePickerDay/DateRangePickerDay.js +107 -43
  29. package/modern/DateTimeRangePicker/DateTimeRangePicker.js +2 -2
  30. package/modern/DateTimeRangePicker/DateTimeRangePickerToolbar.js +31 -15
  31. package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js +1 -1
  32. package/modern/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js +2 -2
  33. package/modern/MobileDateRangePicker/MobileDateRangePicker.js +1 -1
  34. package/modern/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js +2 -2
  35. package/modern/MultiInputDateRangeField/MultiInputDateRangeField.js +1 -1
  36. package/modern/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js +2 -2
  37. package/modern/MultiInputTimeRangeField/MultiInputTimeRangeField.js +2 -2
  38. package/modern/SingleInputDateRangeField/SingleInputDateRangeField.js +1 -1
  39. package/modern/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js +2 -2
  40. package/modern/SingleInputTimeRangeField/SingleInputTimeRangeField.js +2 -2
  41. package/modern/StaticDateRangePicker/StaticDateRangePicker.js +1 -1
  42. package/modern/index.js +1 -1
  43. package/modern/internals/hooks/useEnrichedRangePickerFieldProps.js +1 -1
  44. package/modern/internals/utils/date-range-manager.js +1 -1
  45. package/modern/internals/utils/releaseInfo.js +1 -1
  46. package/node/DateRangeCalendar/DateRangeCalendar.js +1 -1
  47. package/node/DateRangePicker/DateRangePicker.js +1 -1
  48. package/node/DateRangePickerDay/DateRangePickerDay.js +107 -43
  49. package/node/DateTimeRangePicker/DateTimeRangePicker.js +2 -2
  50. package/node/DateTimeRangePicker/DateTimeRangePickerToolbar.js +31 -15
  51. package/node/DesktopDateRangePicker/DesktopDateRangePicker.js +1 -1
  52. package/node/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js +2 -2
  53. package/node/MobileDateRangePicker/MobileDateRangePicker.js +1 -1
  54. package/node/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js +2 -2
  55. package/node/MultiInputDateRangeField/MultiInputDateRangeField.js +1 -1
  56. package/node/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js +2 -2
  57. package/node/MultiInputTimeRangeField/MultiInputTimeRangeField.js +2 -2
  58. package/node/SingleInputDateRangeField/SingleInputDateRangeField.js +1 -1
  59. package/node/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js +2 -2
  60. package/node/SingleInputTimeRangeField/SingleInputTimeRangeField.js +2 -2
  61. package/node/StaticDateRangePicker/StaticDateRangePicker.js +1 -1
  62. package/node/index.js +1 -1
  63. package/node/internals/hooks/useEnrichedRangePickerFieldProps.js +1 -1
  64. package/node/internals/utils/date-range-manager.js +1 -1
  65. package/node/internals/utils/releaseInfo.js +1 -1
  66. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,7 +3,179 @@
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
- ## v7.0.0
6
+ ## 7.1.1
7
+
8
+ _Apr 5, 2024_
9
+
10
+ We'd like to offer a big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:
11
+
12
+ - šŸš€ Add `setItemExpansion` Tree View API method (#12595) @flaviendelangle
13
+ - šŸŒ Improve Persian (fa-IR), Portuguese (pt-BR), and Spanish (es-ES) locale on the Data Grid
14
+ - šŸŒ Improve Persian (fa-IR), Portuguese (pt-BR), and Ukrainian (uk-UA) locale on the Pickers
15
+ - šŸž Bugfixes
16
+ - šŸ“š Documentation improvements
17
+
18
+ ### Data Grid
19
+
20
+ #### `@mui/x-data-grid@7.1.1`
21
+
22
+ - [DataGrid] Allow higher packages' props to be used in MIT (#12365) @MBilalShafi
23
+ - [DataGrid] Fix RTL mode (#12583) @romgrk
24
+ - [DataGrid] Fix `ColDefChangesGridNoSnap` demo crash (#12663) @MBilalShafi
25
+ - [DataGrid] Fix server-side filter demo not working (#12662) @MBilalShafi
26
+ - [DataGrid] Log error if `rowCount` is used with client-side pagination (#12448) @michelengelen
27
+ - [DataGrid] Remove `GridFormatterParams` completely (#12660) @romgrk
28
+ - [DataGrid] Restore main slot (#12657) @romgrk
29
+ - [l10n] Improve Persian (fa-IR) locale (#12630) @amirhosseinzf
30
+ - [l10n] Improve Portuguese (pt-BR) locale (#12618) @hugoalkimim
31
+ - [l10n] Improve Spanish (es-ES) locale (#12606) @aitor40
32
+
33
+ #### `@mui/x-data-grid-pro@7.1.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
34
+
35
+ Same changes as in `@mui/x-data-grid@7.1.1`.
36
+
37
+ #### `@mui/x-data-grid-premium@7.1.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
38
+
39
+ Same changes as in `@mui/x-data-grid-pro@7.1.1`.
40
+
41
+ ### Date and Time Pickers
42
+
43
+ #### `@mui/x-date-pickers@7.1.1`
44
+
45
+ - [fields] Fix `readOnly` behavior (#12609) @LukasTy
46
+ - [l10n] Improve Persian (fa-IR) locale (#12632) @misafari
47
+ - [l10n] Improve Portuguese (pt-BR) locale (#12613) @cnHealth
48
+ - [l10n] Improve Ukrainian (uk-UA) locale (#12627) @alexkobylansky
49
+
50
+ #### `@mui/x-date-pickers-pro@7.1.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
51
+
52
+ Same changes as in `@mui/x-date-pickers@7.1.1`, plus:
53
+
54
+ - [DateTimeRangePicker] Fix selection on same day (#12604) @LukasTy
55
+
56
+ ### Charts
57
+
58
+ #### `@mui/x-charts@7.1.1`
59
+
60
+ - [charts] Fix `tickInterval` usage for y-axis (#12592) @alexfauquette
61
+ - [charts] Fix Scatter series highlight when `id` is a `number` (#12677) @JCQuintas
62
+ - [charts] Fix TS error when using `sx` property on `ChartsTooltip` (#12659) @JCQuintas
63
+
64
+ ### Tree View
65
+
66
+ #### `@mui/x-tree-view@7.1.1`
67
+
68
+ - [TreeView] Add JSDoc to all `publicAPI` methods (#12649) @flaviendelangle
69
+ - [TreeView] Create `RichTreeViewPro` component (not released yet) (#12610) @flaviendelangle
70
+ - [TreeView] Create pro package (not released yet) (#12240) @flaviendelangle
71
+ - [TreeView] Fix typo in errors (#12623) @alissa-tung
72
+ - [TreeView] New API method: `setItemExpansion` (#12595) @flaviendelangle
73
+
74
+ ### Docs
75
+
76
+ - [docs] Add a recipe for the `checkboxSelectionVisibleOnly` prop (#12646) @michelengelen
77
+ - [docs] Explain the use of `_action: 'delete'` in `processRowUpdate` (#12670) @michelengelen
78
+ - [docs] Fix formatting and typo on migration guide @oliviertassinari
79
+ - [docs] Fix formatting in changelog @oliviertassinari
80
+ - [docs] Fix grammar in TreeView migration doc (#12615) @joshkel
81
+ - [docs] Fix missing closing props in `PieShapeNoSnap` demo (#12636) @alp-ex
82
+ - [docs] Fix type arguments in Custom Field page (#12619) @Juneezee
83
+ - [docs] Fix typo in `getItemId` prop description (#12637) @flaviendelangle
84
+ - [docs] Make the Charts `margin` usage more visible (#12591) @alexfauquette
85
+ - [docs] Match IE 11 spacing with Material UI @oliviertassinari
86
+ - [docs] Move data grid interfaces to standard API page layout (#12016) @alexfauquette
87
+ - [docs] Remove ` around @default values (#12158) @alexfauquette
88
+ - [docs] Remove `day` from the default `dayOfWeekFormatter` function params (#12644) @LukasTy
89
+ - [docs] Use `TreeItem2` for icon expansion example on `RichTreeView` (#12563) @flaviendelangle
90
+
91
+ ### Core
92
+
93
+ - [core] Add cherry-pick `master` to `v6` action (#12648) @LukasTy
94
+ - [core] Fix typo in `@mui/x-tree-view-pro/themeAugmentation` (#12674) @flaviendelangle
95
+ - [core] Introduce `describeTreeView` to run test on `SimpleTreeView` and `RichTreeView`, using `TreeItem` and `TreeItem2` + migrate expansion tests (#12428) @flaviendelangle
96
+ - [core] Limit `test-types` CI step allowed memory (#12651) @LukasTy
97
+ - [core] Remove explicit `express` package (#12602) @LukasTy
98
+ - [core] Update to new embedded translations in the docs package (#12232) @Janpot
99
+ - [core] Use PR labels to identify the package a `l10n` PR belongs to (#12639) @LukasTy
100
+ - [core] Use `describeTreeView` for selection tests (#12647) @flaviendelangle
101
+ - [docs-infra] Adjust the links to search for issues (#11995) @michelengelen
102
+ - [infra] Polish support survey experience (#12624) @oliviertassinari
103
+ - [support-infra] Replace author association with a permission check in survey action (#12068) @michelengelen
104
+ - [support-infra] Fix user permission check (#12669) @michelengelen
105
+ - [test] Fix Tree View test import (#12668) @LukasTy
106
+
107
+ ## 7.1.0
108
+
109
+ _Mar 28, 2024_
110
+
111
+ We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
112
+
113
+ - šŸš€ Add `resizeThrottleMs` prop (#12556) @romgrk
114
+ - šŸŒ Improve Chinese (Hong Kong) (zh-HK) and Italian (it-IT) locale on the Pickers
115
+ - šŸž Bugfixes
116
+ - šŸ“š Documentation improvements
117
+
118
+ ### Data Grid
119
+
120
+ #### `@mui/x-data-grid@7.1.0`
121
+
122
+ - [DataGrid] Add `resizeThrottleMs` prop (#12556) @romgrk
123
+ - [DataGrid] Do not publish `rowEditStop` event if row has fields with errors (#11383) @cherniavskii
124
+ - [DataGrid] Fix bug in suspense (#12553) @romgrk
125
+ - [DataGrid] Fix missing class name in the `GridToolbarQuickFilter` component (#12484) @jhawkins11
126
+
127
+ #### `@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')
128
+
129
+ Same changes as in `@mui/x-data-grid@7.1.0`.
130
+
131
+ #### `@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')
132
+
133
+ Same changes as in `@mui/x-data-grid-pro@7.1.0`.
134
+
135
+ ### Date and Time Pickers
136
+
137
+ #### `@mui/x-date-pickers@7.1.0`
138
+
139
+ - [fields] Fix placeholder override (#12589) @flaviendelangle
140
+ - [l10n] Improve Chinese (Hong Kong) (zh-HK) locale (#12547) @samchiu90
141
+ - [l10n] Improve Italian (it-IT) locale (#12549) @antomanc
142
+ - [pickers] Prepare compatibility with `@mui/zero-runtime` (stop using `ownerState` in `styled`) (#12003) @flaviendelangle
143
+
144
+ #### `@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')
145
+
146
+ Same changes as in `@mui/x-date-pickers@7.1.0`, plus:
147
+
148
+ - [DateRangePicker] Fix selection behavior with single input field when `readOnly` (#12593) @LukasTy
149
+
150
+ ### Charts
151
+
152
+ #### `@mui/x-charts@7.1.0`
153
+
154
+ - [charts] Fix tooltip causing crash on data change (#12571) @Rishi556
155
+
156
+ ### Tree View
157
+
158
+ #### `@mui/x-tree-view@7.1.0`
159
+
160
+ - [TreeView] Do not use outdated version of the state to compute new label first char in `RichTreeView` (#12512) @flaviendelangle
161
+
162
+ ### Docs
163
+
164
+ - [docs] Add example to add a second icon next to the field's opening button (#12524) @flaviendelangle
165
+ - [docs] Add missing note to Data Grid migration guide (#12557) @romgrk
166
+ - [docs] Fix Charts title for SEO (#12545) @oliviertassinari
167
+ - [docs] Fix small typo (#12558) @diogoparente
168
+ - [docs] Improve codemod related documentation (#12582) @MBilalShafi
169
+ - [docs] Reduce noise in migration docs side navigation (#12552) @cherniavskii
170
+ - [docs] Sync static images from core repository (#12525) @LukasTy
171
+
172
+ ### Core
173
+
174
+ - [core] Fix `l10n` script on Windows (#12550) @LukasTy
175
+ - [core] Include `DateTimeRangePicker` tag in `releaseChangelog` (#12526) @LukasTy
176
+ - [core] Upgrade monorepo (#12536) @cherniavskii
177
+
178
+ ## 7.0.0
7
179
 
8
180
  _Mar 22, 2024_
9
181
 
@@ -459,13 +631,13 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
459
631
 
460
632
  - šŸŽ Introduce a new DOM structure for the field components that provides a better accessibility
461
633
  - šŸš€ Simplify Data Grid DOM structure for improved performance (#12013) @romgrk
462
- - šŸ•„ The support for IE11 has been removed (#12151) @flaviendelangle
634
+ - šŸ•„ The support for IEĀ 11 has been removed (#12151) @flaviendelangle
463
635
  - šŸž Bugfixes
464
636
  - šŸ“š Documentation improvements
465
637
 
466
638
  ### Breaking changes
467
639
 
468
- - The support for IE11 has been removed from all MUIĀ X packages. The `legacy` bundle that used to support old browsers like IE11 is no longer included.
640
+ - The support for IEĀ 11 has been removed from all MUIĀ X packages. The `legacy` bundle that used to support old browsers like IEĀ 11 is no longer included.
469
641
 
470
642
  ### Data Grid
471
643
 
@@ -570,7 +742,7 @@ These components are no longer exported from `@mui/x-charts`:
570
742
 
571
743
  ### Tree View / `@mui/x-tree-view@7.0.0-beta.4`
572
744
 
573
- - [TreeView] Stop using custom `findIndex` to support IE11 (#12129) @flaviendelangle
745
+ - [TreeView] Stop using custom `findIndex` to support IEĀ 11 (#12129) @flaviendelangle
574
746
 
575
747
  ### Docs
576
748
 
@@ -2800,6 +2972,76 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
2800
2972
  - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
2801
2973
  - [license] Correctly throw errors (#10924) @oliviertassinari
2802
2974
 
2975
+ ## 6.19.9
2976
+
2977
+ _Apr 5, 2024_
2978
+
2979
+ We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:
2980
+
2981
+ - šŸž Bugfixes
2982
+ - šŸ“š Documentation improvements
2983
+
2984
+ ### Data Grid
2985
+
2986
+ #### `@mui/x-data-grid@6.19.9`
2987
+
2988
+ - [DataGrid] Remove legacy editing API event: `rowEditCommit` (#12087) @MBilalShafi
2989
+
2990
+ #### `@mui/x-data-grid-pro@6.19.9` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
2991
+
2992
+ Same changes as in `@mui/x-data-grid@6.19.9`.
2993
+
2994
+ #### `@mui/x-data-grid-premium@6.19.9` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
2995
+
2996
+ Same changes as in `@mui/x-data-grid-pro@6.19.9`.
2997
+
2998
+ ### Date Pickers
2999
+
3000
+ #### `@mui/x-date-pickers@6.19.9`
3001
+
3002
+ No changes.
3003
+
3004
+ #### `@mui/x-date-pickers-pro@6.19.9` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
3005
+
3006
+ - [DateRangePicker] Fix selection behavior with single input field when `readOnly` (#12605) @LukasTy
3007
+
3008
+ ### Docs
3009
+
3010
+ - [docs] Add a recipe for the `checkboxSelectionVisibleOnly` prop (#12667) @michelengelen
3011
+ - [docs] Explain the use of `_action: 'delete'` in `processRowUpdate` (#12673) @michelengelen
3012
+
3013
+ ### Core
3014
+
3015
+ - [core] Use Circle CI context (#12607) @cherniavskii
3016
+
3017
+ ## 6.19.8
3018
+
3019
+ _Mar 20, 2024_
3020
+
3021
+ We'd like to offer a big thanks to the 3 contributors who made this release possible.
3022
+
3023
+ ### Data Grid
3024
+
3025
+ #### `@mui/x-data-grid@6.19.8`
3026
+
3027
+ - [DataGrid] Fix `ElementType` usage (#12505) @cherniavskii
3028
+ - [DataGrid] Fix cell value formatting on copy (#12483) @sai6855
3029
+ - [DataGrid] Fix checkbox selection when filtering (#12485) @g1mishra
3030
+
3031
+ #### `@mui/x-data-grid-pro@6.19.8` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
3032
+
3033
+ Same changes as in `@mui/x-data-grid@6.19.8`.
3034
+
3035
+ #### `@mui/x-data-grid-premium@6.19.8` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
3036
+
3037
+ Same changes as in `@mui/x-data-grid-pro@6.19.8`, plus:
3038
+
3039
+ - [DataGridPremium] Add support for confirmation before clipboard paste (#12466) @cherniavskii
3040
+
3041
+ ### Docs
3042
+
3043
+ - [docs] Update links to v7 (#12495) @cherniavskii
3044
+
2803
3045
  ## 6.19.7
2804
3046
 
2805
3047
  _Mar 14, 2024_
@@ -508,7 +508,7 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
508
508
  * Formats the day of week displayed in the calendar header.
509
509
  * @param {TDate} date The date of the day of week provided by the adapter.
510
510
  * @returns {string} The name to display.
511
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
511
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
512
512
  */
513
513
  dayOfWeekFormatter: PropTypes.func,
514
514
  /**
@@ -74,7 +74,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
74
74
  * Formats the day of week displayed in the calendar header.
75
75
  * @param {TDate} date The date of the day of week provided by the adapter.
76
76
  * @returns {string} The name to display.
77
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
77
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
78
78
  */
79
79
  dayOfWeekFormatter: PropTypes.func,
80
80
  /**
@@ -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
  /**
@@ -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
@@ -49,7 +49,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
49
49
  // ----------------------------------------------------------------------
50
50
  /**
51
51
  * 12h/24h view for hour selection clock.
52
- * @default `utils.is12HourCycleInCurrentLocale()`
52
+ * @default utils.is12HourCycleInCurrentLocale()
53
53
  */
54
54
  ampm: PropTypes.bool,
55
55
  /**
@@ -79,7 +79,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
79
79
  * Formats the day of week displayed in the calendar header.
80
80
  * @param {TDate} date The date of the day of week provided by the adapter.
81
81
  * @returns {string} The name to display.
82
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
82
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
83
83
  */
84
84
  dayOfWeekFormatter: PropTypes.func,
85
85
  /**
@@ -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,
@@ -85,7 +85,7 @@ DesktopDateRangePicker.propTypes = {
85
85
  * Formats the day of week displayed in the calendar header.
86
86
  * @param {TDate} date The date of the day of week provided by the adapter.
87
87
  * @returns {string} The name to display.
88
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
88
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
89
89
  */
90
90
  dayOfWeekFormatter: PropTypes.func,
91
91
  /**
@@ -125,7 +125,7 @@ DesktopDateTimeRangePicker.propTypes = {
125
125
  // ----------------------------------------------------------------------
126
126
  /**
127
127
  * 12h/24h view for hour selection clock.
128
- * @default `utils.is12HourCycleInCurrentLocale()`
128
+ * @default utils.is12HourCycleInCurrentLocale()
129
129
  */
130
130
  ampm: PropTypes.bool,
131
131
  /**
@@ -155,7 +155,7 @@ DesktopDateTimeRangePicker.propTypes = {
155
155
  * Formats the day of week displayed in the calendar header.
156
156
  * @param {TDate} date The date of the day of week provided by the adapter.
157
157
  * @returns {string} The name to display.
158
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
158
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
159
159
  */
160
160
  dayOfWeekFormatter: PropTypes.func,
161
161
  /**
@@ -81,7 +81,7 @@ MobileDateRangePicker.propTypes = {
81
81
  * Formats the day of week displayed in the calendar header.
82
82
  * @param {TDate} date The date of the day of week provided by the adapter.
83
83
  * @returns {string} The name to display.
84
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
84
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
85
85
  */
86
86
  dayOfWeekFormatter: PropTypes.func,
87
87
  /**
@@ -132,7 +132,7 @@ MobileDateTimeRangePicker.propTypes = {
132
132
  // ----------------------------------------------------------------------
133
133
  /**
134
134
  * 12h/24h view for hour selection clock.
135
- * @default `utils.is12HourCycleInCurrentLocale()`
135
+ * @default utils.is12HourCycleInCurrentLocale()
136
136
  */
137
137
  ampm: PropTypes.bool,
138
138
  /**
@@ -157,7 +157,7 @@ MobileDateTimeRangePicker.propTypes = {
157
157
  * Formats the day of week displayed in the calendar header.
158
158
  * @param {TDate} date The date of the day of week provided by the adapter.
159
159
  * @returns {string} The name to display.
160
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
160
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
161
161
  */
162
162
  dayOfWeekFormatter: PropTypes.func,
163
163
  /**
@@ -263,7 +263,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
263
263
  * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
264
264
  * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
265
265
  *
266
- * @default `false`
266
+ * @default false
267
267
  */
268
268
  shouldRespectLeadingZeros: PropTypes.bool,
269
269
  /**
@@ -133,7 +133,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
133
133
  // ----------------------------------------------------------------------
134
134
  /**
135
135
  * 12h/24h view for hour selection clock.
136
- * @default `utils.is12HourCycleInCurrentLocale()`
136
+ * @default utils.is12HourCycleInCurrentLocale()
137
137
  */
138
138
  ampm: PropTypes.bool,
139
139
  /**
@@ -304,7 +304,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
304
304
  * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
305
305
  * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
306
306
  *
307
- * @default `false`
307
+ * @default false
308
308
  */
309
309
  shouldRespectLeadingZeros: PropTypes.bool,
310
310
  /**