Skip to content

Commit ba0bcdf

Browse files
flaviendelangleflaviendelangle
committed
Work
1 parent 9fcc82d commit ba0bcdf

File tree

65 files changed

+265
-119
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+265
-119
lines changed

‎docs/data/migration/migration-pickers-v7/migration-pickers-v7.md

+120-1
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,126 @@ const theme = createTheme({
259259
});
260260
```
261261

262-
## Removed types
262+
## Slots breaking changes
263+
264+
### Slot: `layout`
265+
266+
- The `PickersLayoutRoot` must now receive the `ownerState` returned by `usePickerLayout` instead of its props:
267+
268+
```diff
269+
-const { toolbar, tabs, content, actionBar } = usePickerLayout(props);
270+
+const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);
271+
272+
return (
273+
- <PickersLayoutRoot ownerState={props}>
274+
+ <PickersLayoutRoot ownerState={ownerState}>
275+
Layout content
276+
</PickersLayoutRoot>
277+
);
278+
}
279+
```
280+
281+
- The component passed to the `layout` slot no longer receives a `isRtl` prop. If you need to access this information, you can use the `useRtl` hook from `@mui/system`:
282+
283+
```diff
284+
+import { useRtl } from '@mui/system/RtlProvider';
285+
286+
function CustomLayout(props) {
287+
- console.log(props.isRtl);
288+
+ const isRtl = useRtl();
289+
+ console.log(isRtl);
290+
}
291+
```
292+
293+
- The component passed to the `layout` slot no longer receives an `orientation` and the `isLandscape` props, instead you can use the `usePickersContext` hook:
294+
295+
```diff
296+
-console.log(props.orientation);
297+
+import { usePickersContext } from '@mui/x-date-pickers/hooks';
298+
+const { orientation } = usePickersContext();
299+
+console.log(orientation);
300+
301+
-console.log(props.isLandscape);
302+
+import { usePickersContext } from '@mui/x-date-pickers/hooks';
303+
+const { orientation } = usePickersContext();
304+
+console.log(orientation === 'landscape');
305+
```
306+
307+
- The component passed to the `layout` slot no longer receives a `wrapperVariant` prop, instead you can use the `usePickersContext` hook:
308+
309+
```diff
310+
-console.log(props.wrapperVariant);
311+
312+
+import { usePickersContext } from '@mui/x-date-pickers/hooks';
313+
+const { variant } = usePickersContext();
314+
+console.log(variant);
315+
```
316+
317+
- The component passed to the `layout` slot no longer receives a `disabled` prop, instead you can use the `usePickersContext` hook:
318+
319+
```diff
320+
-console.log(props.disabled);
321+
322+
+import { usePickersContext } from '@mui/x-date-pickers/hooks';
323+
+const { disabled } = usePickersContext();
324+
+console.log(disabled);
325+
```
326+
327+
- The component passed to the `layout` slot no longer receives a `readOnly` prop, instead you can use the `usePickersContext` hook:
328+
329+
```diff
330+
-console.log(props.readOnly);
331+
332+
+import { usePickersContext } from '@mui/x-date-pickers/hooks';
333+
+const { readOnly } = usePickersContext();
334+
+console.log(readOnly);
335+
```
336+
337+
### Slot: `toolbar`
338+
339+
- The component passed to the `toolbar` slot no longer receives a `isLandscape` prop. There is currently no way to access this information, if you need it, please [open an issue](https://github.com/mui/mui-x/issues/new/choose).
340+
341+
```diff
342+
-console.log(props.isLandscape);
343+
344+
+import { usePickersContext } from '@mui/x-date-pickers/hooks';
345+
+const { orientation } = usePickersContext();
346+
+console.log(orientation === 'landscape');
347+
```
348+
349+
- The component passed to the `toolbar` slot no longer receives a `toolbarVariant` prop, instead you can use the `usePickersContext` hook:
350+
351+
```diff
352+
-console.log(props.wrapperVariant);
353+
354+
+import { usePickersContext } from '@mui/x-date-pickers/hooks';
355+
+const { variant } = usePickersContext();
356+
+console.log(variant);
357+
```
358+
359+
- The component passed to the `toolbar` slot no longer receives a `disabled` prop, instead you can use the `usePickersContext` hook:
360+
361+
```diff
362+
-console.log(props.disabled);
363+
364+
+import { usePickersContext } from '@mui/x-date-pickers/hooks';
365+
+const { disabled } = usePickersContext();
366+
+console.log(disabled);
367+
```
368+
369+
- The component passed to the `toolbar` slot no longer receives a `readOnly` prop, instead you can use the `usePickersContext` hook:
370+
371+
```diff
372+
-console.log(props.readOnly);
373+
374+
+import { usePickersContext } from '@mui/x-date-pickers/hooks';
375+
+const { readOnly } = usePickersContext();
376+
+console.log(readOnly);
377+
```
378+
379+
## Typing breaking changes
380+
381+
### Removed types
263382

264383
The following types are no longer exported by `@mui/x-date-pickers` and/or `@mui/x-date-pickers-pro`.
265384
If you were using them, you need to replace them with the following code:

‎docs/pages/x/api/date-pickers/date-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@
9797
"orientation": {
9898
"type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
9999
},
100+
"readOnly": { "type": { "name": "bool" }, "default": "false" },
100101
"reduceAnimations": {
101102
"type": { "name": "bool" },
102103
"default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13"

‎docs/pages/x/api/date-pickers/date-range-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@
9898
},
9999
"open": { "type": { "name": "bool" }, "default": "false" },
100100
"rangePosition": { "type": { "name": "enum", "description": "'end'<br>&#124;&nbsp;'start'" } },
101+
"readOnly": { "type": { "name": "bool" }, "default": "false" },
101102
"reduceAnimations": {
102103
"type": { "name": "bool" },
103104
"default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13"

‎docs/pages/x/api/date-pickers/date-time-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105
"orientation": {
106106
"type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
107107
},
108+
"readOnly": { "type": { "name": "bool" }, "default": "false" },
108109
"reduceAnimations": {
109110
"type": { "name": "bool" },
110111
"default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13"

‎docs/pages/x/api/date-pickers/date-time-range-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@
115115
}
116116
},
117117
"rangePosition": { "type": { "name": "enum", "description": "'end'<br>&#124;&nbsp;'start'" } },
118+
"readOnly": { "type": { "name": "bool" }, "default": "false" },
118119
"reduceAnimations": {
119120
"type": { "name": "bool" },
120121
"default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13"

‎docs/pages/x/api/date-pickers/desktop-date-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@
9393
"orientation": {
9494
"type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
9595
},
96+
"readOnly": { "type": { "name": "bool" }, "default": "false" },
9697
"reduceAnimations": {
9798
"type": { "name": "bool" },
9899
"default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13"

‎docs/pages/x/api/date-pickers/desktop-date-range-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@
9494
},
9595
"open": { "type": { "name": "bool" }, "default": "false" },
9696
"rangePosition": { "type": { "name": "enum", "description": "'end'<br>&#124;&nbsp;'start'" } },
97+
"readOnly": { "type": { "name": "bool" }, "default": "false" },
9798
"reduceAnimations": {
9899
"type": { "name": "bool" },
99100
"default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13"

‎docs/pages/x/api/date-pickers/desktop-date-time-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@
101101
"orientation": {
102102
"type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
103103
},
104+
"readOnly": { "type": { "name": "bool" }, "default": "false" },
104105
"reduceAnimations": {
105106
"type": { "name": "bool" },
106107
"default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13"

‎docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@
111111
}
112112
},
113113
"rangePosition": { "type": { "name": "enum", "description": "'end'<br>&#124;&nbsp;'start'" } },
114+
"readOnly": { "type": { "name": "bool" }, "default": "false" },
114115
"reduceAnimations": {
115116
"type": { "name": "bool" },
116117
"default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13"

‎docs/pages/x/api/date-pickers/mobile-date-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@
9393
"orientation": {
9494
"type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
9595
},
96+
"readOnly": { "type": { "name": "bool" }, "default": "false" },
9697
"reduceAnimations": {
9798
"type": { "name": "bool" },
9899
"default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13"

‎docs/pages/x/api/date-pickers/mobile-date-range-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@
9090
},
9191
"open": { "type": { "name": "bool" }, "default": "false" },
9292
"rangePosition": { "type": { "name": "enum", "description": "'end'<br>&#124;&nbsp;'start'" } },
93+
"readOnly": { "type": { "name": "bool" }, "default": "false" },
9394
"reduceAnimations": {
9495
"type": { "name": "bool" },
9596
"default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13"

‎docs/pages/x/api/date-pickers/mobile-date-time-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@
101101
"orientation": {
102102
"type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
103103
},
104+
"readOnly": { "type": { "name": "bool" }, "default": "false" },
104105
"reduceAnimations": {
105106
"type": { "name": "bool" },
106107
"default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13"

‎docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@
107107
}
108108
},
109109
"rangePosition": { "type": { "name": "enum", "description": "'end'<br>&#124;&nbsp;'start'" } },
110+
"readOnly": { "type": { "name": "bool" }, "default": "false" },
110111
"reduceAnimations": {
111112
"type": { "name": "bool" },
112113
"default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13"

‎docs/pages/x/api/date-pickers/static-date-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@
7979
"orientation": {
8080
"type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
8181
},
82+
"readOnly": { "type": { "name": "bool" }, "default": "false" },
8283
"reduceAnimations": {
8384
"type": { "name": "bool" },
8485
"default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13"

‎docs/pages/x/api/date-pickers/static-date-range-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@
8080
}
8181
},
8282
"rangePosition": { "type": { "name": "enum", "description": "'end'<br>&#124;&nbsp;'start'" } },
83+
"readOnly": { "type": { "name": "bool" }, "default": "false" },
8384
"reduceAnimations": {
8485
"type": { "name": "bool" },
8586
"default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13"

‎docs/pages/x/api/date-pickers/static-date-time-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@
8787
"orientation": {
8888
"type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
8989
},
90+
"readOnly": { "type": { "name": "bool" }, "default": "false" },
9091
"reduceAnimations": {
9192
"type": { "name": "bool" },
9293
"default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13"

‎docs/translations/api-docs/date-pickers/date-picker/date-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@
107107
"description": "The default visible view. Used when the component view is not controlled. Must be a valid option from <code>views</code> list."
108108
},
109109
"orientation": { "description": "Force rendering in particular orientation." },
110+
"readOnly": { "description": "Make picker read only." },
110111
"reduceAnimations": { "description": "If <code>true</code>, disable heavy animations." },
111112
"referenceDate": {
112113
"description": "The date used to generate the new value when both <code>value</code> and <code>defaultValue</code> are empty."

‎docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@
116116
"rangePosition": {
117117
"description": "The position in the currently edited date range. Used when the component position is controlled."
118118
},
119+
"readOnly": { "description": "Make picker read only." },
119120
"reduceAnimations": { "description": "If <code>true</code>, disable heavy animations." },
120121
"referenceDate": {
121122
"description": "The date used to generate the new value when both <code>value</code> and <code>defaultValue</code> are empty."

‎docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@
127127
"description": "The default visible view. Used when the component view is not controlled. Must be a valid option from <code>views</code> list."
128128
},
129129
"orientation": { "description": "Force rendering in particular orientation." },
130+
"readOnly": { "description": "Make picker read only." },
130131
"reduceAnimations": { "description": "If <code>true</code>, disable heavy animations." },
131132
"referenceDate": {
132133
"description": "The date used to generate the new value when both <code>value</code> and <code>defaultValue</code> are empty."

‎docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@
140140
"rangePosition": {
141141
"description": "The position in the currently edited date range. Used when the component position is controlled."
142142
},
143+
"readOnly": { "description": "Make picker read only." },
143144
"reduceAnimations": { "description": "If <code>true</code>, disable heavy animations." },
144145
"referenceDate": {
145146
"description": "The date used to generate the new value when both <code>value</code> and <code>defaultValue</code> are empty."

‎docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@
104104
"description": "The default visible view. Used when the component view is not controlled. Must be a valid option from <code>views</code> list."
105105
},
106106
"orientation": { "description": "Force rendering in particular orientation." },
107+
"readOnly": { "description": "Make picker read only." },
107108
"reduceAnimations": { "description": "If <code>true</code>, disable heavy animations." },
108109
"referenceDate": {
109110
"description": "The date used to generate the new value when both <code>value</code> and <code>defaultValue</code> are empty."

‎docs/translations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@
113113
"rangePosition": {
114114
"description": "The position in the currently edited date range. Used when the component position is controlled."
115115
},
116+
"readOnly": { "description": "Make picker read only." },
116117
"reduceAnimations": { "description": "If <code>true</code>, disable heavy animations." },
117118
"referenceDate": {
118119
"description": "The date used to generate the new value when both <code>value</code> and <code>defaultValue</code> are empty."

‎docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@
124124
"description": "The default visible view. Used when the component view is not controlled. Must be a valid option from <code>views</code> list."
125125
},
126126
"orientation": { "description": "Force rendering in particular orientation." },
127+
"readOnly": { "description": "Make picker read only." },
127128
"reduceAnimations": { "description": "If <code>true</code>, disable heavy animations." },
128129
"referenceDate": {
129130
"description": "The date used to generate the new value when both <code>value</code> and <code>defaultValue</code> are empty."

‎docs/translations/api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@
137137
"rangePosition": {
138138
"description": "The position in the currently edited date range. Used when the component position is controlled."
139139
},
140+
"readOnly": { "description": "Make picker read only." },
140141
"reduceAnimations": { "description": "If <code>true</code>, disable heavy animations." },
141142
"referenceDate": {
142143
"description": "The date used to generate the new value when both <code>value</code> and <code>defaultValue</code> are empty."

‎docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@
104104
"description": "The default visible view. Used when the component view is not controlled. Must be a valid option from <code>views</code> list."
105105
},
106106
"orientation": { "description": "Force rendering in particular orientation." },
107+
"readOnly": { "description": "Make picker read only." },
107108
"reduceAnimations": { "description": "If <code>true</code>, disable heavy animations." },
108109
"referenceDate": {
109110
"description": "The date used to generate the new value when both <code>value</code> and <code>defaultValue</code> are empty."

‎docs/translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@
110110
"rangePosition": {
111111
"description": "The position in the currently edited date range. Used when the component position is controlled."
112112
},
113+
"readOnly": { "description": "Make picker read only." },
113114
"reduceAnimations": { "description": "If <code>true</code>, disable heavy animations." },
114115
"referenceDate": {
115116
"description": "The date used to generate the new value when both <code>value</code> and <code>defaultValue</code> are empty."

‎docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@
124124
"description": "The default visible view. Used when the component view is not controlled. Must be a valid option from <code>views</code> list."
125125
},
126126
"orientation": { "description": "Force rendering in particular orientation." },
127+
"readOnly": { "description": "Make picker read only." },
127128
"reduceAnimations": { "description": "If <code>true</code>, disable heavy animations." },
128129
"referenceDate": {
129130
"description": "The date used to generate the new value when both <code>value</code> and <code>defaultValue</code> are empty."

‎docs/translations/api-docs/date-pickers/mobile-date-time-range-picker/mobile-date-time-range-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,7 @@
134134
"rangePosition": {
135135
"description": "The position in the currently edited date range. Used when the component position is controlled."
136136
},
137+
"readOnly": { "description": "Make picker read only." },
137138
"reduceAnimations": { "description": "If <code>true</code>, disable heavy animations." },
138139
"referenceDate": {
139140
"description": "The date used to generate the new value when both <code>value</code> and <code>defaultValue</code> are empty."

‎docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
"description": "The default visible view. Used when the component view is not controlled. Must be a valid option from <code>views</code> list."
8383
},
8484
"orientation": { "description": "Force rendering in particular orientation." },
85+
"readOnly": { "description": "Make picker read only." },
8586
"reduceAnimations": { "description": "If <code>true</code>, disable heavy animations." },
8687
"referenceDate": {
8788
"description": "The date used to generate the new value when both <code>value</code> and <code>defaultValue</code> are empty."

‎docs/translations/api-docs/date-pickers/static-date-range-picker/static-date-range-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@
8787
"rangePosition": {
8888
"description": "The position in the currently edited date range. Used when the component position is controlled."
8989
},
90+
"readOnly": { "description": "Make picker read only." },
9091
"reduceAnimations": { "description": "If <code>true</code>, disable heavy animations." },
9192
"referenceDate": {
9293
"description": "The date used to generate the new value when both <code>value</code> and <code>defaultValue</code> are empty."

‎docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json

+1
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@
102102
"description": "The default visible view. Used when the component view is not controlled. Must be a valid option from <code>views</code> list."
103103
},
104104
"orientation": { "description": "Force rendering in particular orientation." },
105+
"readOnly": { "description": "Make picker read only." },
105106
"reduceAnimations": { "description": "If <code>true</code>, disable heavy animations." },
106107
"referenceDate": {
107108
"description": "The date used to generate the new value when both <code>value</code> and <code>defaultValue</code> are empty."

‎packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,10 @@ DateRangePicker.propTypes = {
251251
* Used when the component position is controlled.
252252
*/
253253
rangePosition: PropTypes.oneOf(['end', 'start']),
254+
/**
255+
* Make picker read only.
256+
* @default false
257+
*/
254258
readOnly: PropTypes.bool,
255259
/**
256260
* If `true`, disable heavy animations.

‎packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,6 @@ DateRangePickerToolbar.propTypes = {
143143
*/
144144
classes: PropTypes.object,
145145
className: PropTypes.string,
146-
disabled: PropTypes.bool,
147146
/**
148147
* If `true`, show the toolbar even in desktop mode.
149148
* @default `true` for Desktop, `false` for Mobile.
@@ -157,7 +156,6 @@ DateRangePickerToolbar.propTypes = {
157156
*/
158157
onViewChange: PropTypes.func.isRequired,
159158
rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
160-
readOnly: PropTypes.bool,
161159
/**
162160
* The system prop that allows defining system overrides as well as additional CSS styles.
163161
*/

0 commit comments

Comments
 (0)