@mui/x-data-grid 7.0.0-alpha.0 → 7.0.0-alpha.2
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.
- package/CHANGELOG.md +591 -5
- package/components/GridPagination.d.ts +2 -2
- package/components/toolbar/GridToolbarFilterButton.js +3 -1
- package/index.js +1 -1
- package/legacy/colDef/gridDefaultColumnTypes.js +2 -3
- package/legacy/components/GridPagination.js +3 -4
- package/legacy/components/columnHeaders/GridColumnHeadersInner.js +4 -5
- package/legacy/components/containers/GridRootStyles.js +69 -70
- package/legacy/components/toolbar/GridToolbarFilterButton.js +3 -1
- package/legacy/components/toolbar/GridToolbarQuickFilter.js +4 -5
- package/legacy/index.js +1 -1
- package/legacy/locales/arSD.js +1 -1
- package/legacy/locales/heIL.js +1 -2
- package/legacy/utils/domUtils.js +0 -14
- package/locales/arSD.js +1 -1
- package/locales/heIL.js +1 -2
- package/modern/components/toolbar/GridToolbarFilterButton.js +3 -1
- package/modern/index.js +1 -1
- package/modern/locales/arSD.js +1 -1
- package/modern/locales/heIL.js +1 -2
- package/modern/utils/domUtils.js +0 -14
- package/node/components/toolbar/GridToolbarFilterButton.js +3 -1
- package/node/index.js +1 -1
- package/node/locales/arSD.js +1 -1
- package/node/locales/heIL.js +1 -2
- package/node/utils/domUtils.js +0 -17
- package/package.json +5 -4
- package/utils/domUtils.d.ts +0 -3
- package/utils/domUtils.js +0 -14
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,538 @@
|
|
|
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.0.0-alpha.2
|
|
7
|
+
|
|
8
|
+
_Nov 23, 2023_
|
|
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
|
+
- 📈 Export missing Charts props
|
|
13
|
+
- 🌍 Improve Arabic (ar-SD) and Hebrew (he-IL) locales on Data Grid
|
|
14
|
+
- 🌍 Add Macedonian (mk) locale and improve German (de-DE) locale on Pickers
|
|
15
|
+
- 🐞 Bugfixes
|
|
16
|
+
- 📚 Documentation improvements
|
|
17
|
+
|
|
18
|
+
### Data Grid
|
|
19
|
+
|
|
20
|
+
#### `@mui/x-data-grid@7.0.0-alpha.2`
|
|
21
|
+
|
|
22
|
+
- [l10n] Improve Arabic (ar-SD) locale (#11114) @MBilalShafi
|
|
23
|
+
- [l10n] Improve Hebrew (he-IL) locale (#11056) (#11149) @MBilalShafi
|
|
24
|
+
- [DataGrid] Remove unused utilities (#11156) @flaviendelangle
|
|
25
|
+
|
|
26
|
+
#### `@mui/x-data-grid-pro@7.0.0-alpha.2` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
27
|
+
|
|
28
|
+
Same changes as in `@mui/x-data-grid@7.0.0-alpha.2`.
|
|
29
|
+
|
|
30
|
+
#### `@mui/x-data-grid-premium@7.0.0-alpha.2` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
31
|
+
|
|
32
|
+
Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.2`.
|
|
33
|
+
|
|
34
|
+
### Date Pickers
|
|
35
|
+
|
|
36
|
+
#### Breaking changes
|
|
37
|
+
|
|
38
|
+
- The deprecated `shouldDisableClock` prop has been removed in favor of the more flexible `shouldDisableTime` prop.
|
|
39
|
+
The `shouldDisableClock` prop received `value` as a `number` of hours, minutes, or seconds.
|
|
40
|
+
Instead, the `shouldDisableTime` prop receives the date object (based on the used adapter).
|
|
41
|
+
|
|
42
|
+
You can read more about the deprecation of this prop in [v6 migration guide](https://next.mui.com//x/migration/migration-pickers-v5/#%E2%9C%85-rename-or-refactor-shoulddisabletime-prop).
|
|
43
|
+
|
|
44
|
+
```diff
|
|
45
|
+
<DateTimePicker
|
|
46
|
+
- shouldDisableClock={(timeValue, view) => view === 'hours' && timeValue < 12}
|
|
47
|
+
+ shouldDisableTime={(value, view) => view === 'hours' && value.hour() < 12}
|
|
48
|
+
/>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
- The `adapter.dateWithTimezone` method has been removed and its content moved to the `date` method.
|
|
52
|
+
You can use the `adapter.date` method instead:
|
|
53
|
+
|
|
54
|
+
```diff
|
|
55
|
+
- adapter.dateWithTimezone(undefined, 'system');
|
|
56
|
+
+ adapter.date(undefined, 'system');
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
- The `dayPickerClasses` variable has been renamed to `dayCalendarClasses` to be consistent with the new name of the `DayCalendar` component introduced in v6.0.0.
|
|
60
|
+
|
|
61
|
+
```diff
|
|
62
|
+
- import { dayPickerClasses } from '@mui/x-date-pickers/DateCalendar';
|
|
63
|
+
+ import { dayCalendarClasses } from '@mui/x-date-pickers/DateCalendar';
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
- The deprecated `defaultCalendarMonth` prop has been removed in favor of the more flexible `referenceDate` prop.
|
|
67
|
+
|
|
68
|
+
```diff
|
|
69
|
+
- <DateCalendar defaultCalendarMonth={dayjs('2022-04-01')};
|
|
70
|
+
+ <DateCalendar referenceDate{dayjs('2022-04-01')} />
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
- The `adapter.date` method now has the v6 `adapter.dateWithTimezone` method behavior.
|
|
74
|
+
It no longer accepts `any` as a value but only `string | null | undefined`.
|
|
75
|
+
|
|
76
|
+
```diff
|
|
77
|
+
- adapter.date(new Date());
|
|
78
|
+
+ adapter.date();
|
|
79
|
+
|
|
80
|
+
- adapter.date(new Date('2022-04-17');
|
|
81
|
+
+ adapter.date('2022-04-17');
|
|
82
|
+
|
|
83
|
+
- adapter.date(new Date(2022, 3, 17, 4, 5, 34));
|
|
84
|
+
+ adapter.date('2022-04-17T04:05:34');
|
|
85
|
+
|
|
86
|
+
- adapter.date(new Date('Invalid Date'));
|
|
87
|
+
+ adapter.getInvalidDate();
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
#### `@mui/x-date-pickers@7.0.0-alpha.2`
|
|
91
|
+
|
|
92
|
+
- [l10n] Improve German (de-DE) locale (#11103) @jho-vema
|
|
93
|
+
- [l10n] Add Macedonian (mk) locale (#10935) @brsnik
|
|
94
|
+
- [pickers] Remove the `defaultCalendarMonth` prop (#10987) @flaviendelangle
|
|
95
|
+
- [pickers] Remove the `shouldDisableClock` prop (#11042) @flaviendelangle
|
|
96
|
+
- [pickers] Rename the `dayPickerClasses` variable `dayCalendarClasses` (#11140) @flaviendelangle
|
|
97
|
+
- [pickers] Replace `adapter.date` with the current `adapter.dateWithTimezone` (#10979) @flaviendelangle
|
|
98
|
+
|
|
99
|
+
#### `@mui/x-date-pickers-pro@7.0.0-alpha.2` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
100
|
+
|
|
101
|
+
Same changes as in `@mui/x-date-pickers@7.0.0-alpha.2`.
|
|
102
|
+
|
|
103
|
+
### Charts / `@mui/x-charts@7.0.0-alpha.2`
|
|
104
|
+
|
|
105
|
+
- [charts] Change export strategy in index files (#11113) @michelengelen
|
|
106
|
+
- [charts] Fix `ChartsTooltip` component setup (#11152) @LukasTy
|
|
107
|
+
|
|
108
|
+
### `@mui/x-codemod@7.0.0-alpha.2`
|
|
109
|
+
|
|
110
|
+
- [codemod] Add codemod to use `referenceDate` instead of `defaultCalendarMonth` (#11139) @flaviendelangle
|
|
111
|
+
- [codemod] Clean the components to slots codemod usage (#11145) @flaviendelangle
|
|
112
|
+
|
|
113
|
+
### Docs
|
|
114
|
+
|
|
115
|
+
- [docs] Add LTS section to support docs (#10927) @joserodolfofreitas
|
|
116
|
+
- [docs] Clean the codemod README (#11051) @flaviendelangle
|
|
117
|
+
- [docs] Fix typos and grammar issues (#11049) @flaviendelangle
|
|
118
|
+
- [docs] Fix version links (#11001) @LukasTy
|
|
119
|
+
- [docs] Point to the source of `@mui/x-data-grid-generator` (#11134) @oliviertassinari
|
|
120
|
+
|
|
121
|
+
### Core
|
|
122
|
+
|
|
123
|
+
- [core] Bump monorepo (#11160) @LukasTy
|
|
124
|
+
- [core] Fix comment in doc generation (#11098) @flaviendelangle
|
|
125
|
+
- [core] Rename OpenCollective @oliviertassinari
|
|
126
|
+
- [core] Upgrade `babel-plugin-module-resolver` to 5.0.0 (#11065) @flaviendelangle
|
|
127
|
+
- [changelog] Improve git diff format @oliviertassinari
|
|
128
|
+
- [renovate] Monthly schedule for lockfile maintenance (#10336) @Janpot
|
|
129
|
+
- [test] Skip flaky e2e test in webkit (#11110) @cherniavskii
|
|
130
|
+
|
|
131
|
+
## 7.0.0-alpha.1
|
|
132
|
+
|
|
133
|
+
_Nov 17, 2023_
|
|
134
|
+
|
|
135
|
+
We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:
|
|
136
|
+
|
|
137
|
+
- 🐞 Bugfixes
|
|
138
|
+
- 📚 Documentation improvements
|
|
139
|
+
|
|
140
|
+
### Date Pickers
|
|
141
|
+
|
|
142
|
+
#### `@mui/x-date-pickers@7.0.0-alpha.1` / `@mui/x-date-pickers-pro@7.0.0-alpha.1` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
143
|
+
|
|
144
|
+
#### Breaking changes
|
|
145
|
+
|
|
146
|
+
- The string argument of the `dayOfWeekFormatter` prop has been replaced in favor of the date object to allow more flexibility.
|
|
147
|
+
|
|
148
|
+
```diff
|
|
149
|
+
<DateCalendar
|
|
150
|
+
// If you were still using the day string, you can get it back with your date library.
|
|
151
|
+
- dayOfWeekFormatter={dayStr => `${dayStr}.`}
|
|
152
|
+
+ dayOfWeekFormatter={day => `${day.format('dd')}.`}
|
|
153
|
+
|
|
154
|
+
// If you were already using the day object, just remove the first argument.
|
|
155
|
+
- dayOfWeekFormatter={(_dayStr, day) => `${day.format('dd')}.`}
|
|
156
|
+
+ dayOfWeekFormatter={day => `${day.format('dd')}.`}
|
|
157
|
+
/>
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
- The imports related to the `calendarHeader` slot have been moved from `@mui/x-date-pickers/DateCalendar` to `@mui/x-date-pickers/PIckersCalendarHeader`:
|
|
161
|
+
|
|
162
|
+
```diff
|
|
163
|
+
export {
|
|
164
|
+
pickersCalendarHeaderClasses,
|
|
165
|
+
PickersCalendarHeaderClassKey,
|
|
166
|
+
PickersCalendarHeaderClasses,
|
|
167
|
+
PickersCalendarHeader,
|
|
168
|
+
PickersCalendarHeaderProps,
|
|
169
|
+
PickersCalendarHeaderSlotsComponent,
|
|
170
|
+
PickersCalendarHeaderSlotsComponentsProps,
|
|
171
|
+
ExportedPickersCalendarHeaderProps,
|
|
172
|
+
-} from '@mui/x-date-pickers/DateCalendar';
|
|
173
|
+
+} from '@mui/x-date-pickers/PickersCalendarHeader';
|
|
174
|
+
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
- The `monthAndYear` format has been removed.
|
|
178
|
+
It was used in the header of the calendar views, you can replace it with the new `format` prop of the `calendarHeader` slot:
|
|
179
|
+
|
|
180
|
+
```diff
|
|
181
|
+
<LocalizationProvider
|
|
182
|
+
adapter={AdapterDayJS}
|
|
183
|
+
- formats={{ monthAndYear: 'MM/YYYY' }}
|
|
184
|
+
/>
|
|
185
|
+
<DatePicker
|
|
186
|
+
+ slotProps={{ calendarHeader: { format: 'MM/YYYY' }}}
|
|
187
|
+
/>
|
|
188
|
+
<DateRangePicker
|
|
189
|
+
+ slotProps={{ calendarHeader: { format: 'MM/YYYY' }}}
|
|
190
|
+
/>
|
|
191
|
+
<LocalizationProvider />
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
- The `adapter.getDiff` method have been removed, you can directly use your date library:
|
|
195
|
+
|
|
196
|
+
```diff
|
|
197
|
+
// For Day.js
|
|
198
|
+
-const diff = adapter.getDiff(value, comparing, unit);
|
|
199
|
+
+const diff = value.diff(comparing, unit);
|
|
200
|
+
|
|
201
|
+
// For Luxon
|
|
202
|
+
-const diff = adapter.getDiff(value, comparing, unit);
|
|
203
|
+
+const getDiff = (value: DateTime, comparing: DateTime | string, unit?: AdapterUnits) => {
|
|
204
|
+
+ const parsedComparing = typeof comparing === 'string'
|
|
205
|
+
+ ? DateTime.fromJSDate(new Date(comparing))
|
|
206
|
+
+ : comparing;
|
|
207
|
+
+ if (unit) {
|
|
208
|
+
+ return Math.floor(value.diff(comparing).as(unit));
|
|
209
|
+
+ }
|
|
210
|
+
+ return value.diff(comparing).as('millisecond');
|
|
211
|
+
+};
|
|
212
|
+
+
|
|
213
|
+
+const diff = getDiff(value, comparing, unit);
|
|
214
|
+
|
|
215
|
+
// For DateFns
|
|
216
|
+
-const diff = adapter.getDiff(value, comparing, unit);
|
|
217
|
+
+const getDiff = (value: Date, comparing: Date | string, unit?: AdapterUnits) => {
|
|
218
|
+
+ const parsedComparing = typeof comparing === 'string' ? new Date(comparing) : comparing;
|
|
219
|
+
+ switch (unit) {
|
|
220
|
+
+ case 'years':
|
|
221
|
+
+ return dateFns.differenceInYears(value, parsedComparing);
|
|
222
|
+
+ case 'quarters':
|
|
223
|
+
+ return dateFns.differenceInQuarters(value, parsedComparing);
|
|
224
|
+
+ case 'months':
|
|
225
|
+
+ return dateFns.differenceInMonths(value, parsedComparing);
|
|
226
|
+
+ case 'weeks':
|
|
227
|
+
+ return dateFns.differenceInWeeks(value, parsedComparing);
|
|
228
|
+
+ case 'days':
|
|
229
|
+
+ return dateFns.differenceInDays(value, parsedComparing);
|
|
230
|
+
+ case 'hours':
|
|
231
|
+
+ return dateFns.differenceInHours(value, parsedComparing);
|
|
232
|
+
+ case 'minutes':
|
|
233
|
+
+ return dateFns.differenceInMinutes(value, parsedComparing);
|
|
234
|
+
+ case 'seconds':
|
|
235
|
+
+ return dateFns.differenceInSeconds(value, parsedComparing);
|
|
236
|
+
+ default: {
|
|
237
|
+
+ return dateFns.differenceInMilliseconds(value, parsedComparing);
|
|
238
|
+
+ }
|
|
239
|
+
+ }
|
|
240
|
+
+};
|
|
241
|
+
+
|
|
242
|
+
+const diff = getDiff(value, comparing, unit);
|
|
243
|
+
|
|
244
|
+
// For Moment
|
|
245
|
+
-const diff = adapter.getDiff(value, comparing, unit);
|
|
246
|
+
+const diff = value.diff(comparing, unit);
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
- The `adapter.getFormatHelperText` method have been removed, you can use the `adapter.expandFormat` instead:
|
|
250
|
+
|
|
251
|
+
```diff
|
|
252
|
+
-const expandedFormat = adapter.getFormatHelperText(format);
|
|
253
|
+
+const expandedFormat = adapter.expandFormat(format);
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
And if you need the exact same output you can apply the following transformation:
|
|
257
|
+
|
|
258
|
+
```diff
|
|
259
|
+
// For Day.js
|
|
260
|
+
-const expandedFormat = adapter.getFormatHelperText(format);
|
|
261
|
+
+const expandedFormat = adapter.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
|
|
262
|
+
|
|
263
|
+
// For Luxon
|
|
264
|
+
-const expandedFormat = adapter.getFormatHelperText(format);
|
|
265
|
+
+const expandedFormat = adapter.expandFormat(format).replace(/(a)/g, '(a|p)m').toLocaleLowerCase();
|
|
266
|
+
|
|
267
|
+
// For DateFns
|
|
268
|
+
-const expandedFormat = adapter.getFormatHelperText(format);
|
|
269
|
+
+const expandedFormat = adapter.expandFormat(format).replace(/(aaa|aa|a)/g, '(a|p)m').toLocaleLowerCase();
|
|
270
|
+
|
|
271
|
+
// For Moment
|
|
272
|
+
-const expandedFormat = adapter.getFormatHelperText(format);
|
|
273
|
+
+const expandedFormat = adapter.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
- The `adapter.getMeridiemText` method have been removed, you can use the `adapter.setHours`, `adapter.date` and `adapter.format` methods to recreate its behavior:
|
|
277
|
+
|
|
278
|
+
```diff
|
|
279
|
+
-const meridiem = adapter.getMeridiemText('am');
|
|
280
|
+
+const getMeridiemText = (meridiem: 'am' | 'pm') => {
|
|
281
|
+
+ const date = adapter.setHours(adapter.date()!, meridiem === 'am' ? 2 : 14);
|
|
282
|
+
+ return utils.format(date, 'meridiem');
|
|
283
|
+
+};
|
|
284
|
+
+
|
|
285
|
+
+const meridiem = getMeridiemText('am');
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
- The `adapter.getMonthArray` method have been removed, you can use the `adapter.startOfYear` and `adapter.addMonths` methods to recreate its behavior:
|
|
289
|
+
|
|
290
|
+
```diff
|
|
291
|
+
-const monthArray = adapter.getMonthArray(value);
|
|
292
|
+
+const getMonthArray = (year) => {
|
|
293
|
+
+ const firstMonth = utils.startOfYear(year);
|
|
294
|
+
+ const months = [firstMonth];
|
|
295
|
+
+
|
|
296
|
+
+ while (months.length < 12) {
|
|
297
|
+
+ const prevMonth = months[months.length - 1];
|
|
298
|
+
+ months.push(utils.addMonths(prevMonth, 1));
|
|
299
|
+
+ }
|
|
300
|
+
+
|
|
301
|
+
+ return months;
|
|
302
|
+
+}
|
|
303
|
+
+
|
|
304
|
+
+const monthArray = getMonthArray(value);
|
|
305
|
+
```
|
|
306
|
+
|
|
307
|
+
- The `adapter.getNextMonth` method have been removed, you can use the `adapter.addMonths` method instead:
|
|
308
|
+
|
|
309
|
+
```diff
|
|
310
|
+
-const nextMonth = adapter.getNextMonth(value);
|
|
311
|
+
+const nextMonth = adapter.addMonths(value, 1);
|
|
312
|
+
```
|
|
313
|
+
|
|
314
|
+
- The `adapter.getPreviousMonth` method have been removed, you can use the `adapter.addMonths` method instead:
|
|
315
|
+
|
|
316
|
+
```diff
|
|
317
|
+
-const previousMonth = adapter.getPreviousMonth(value);
|
|
318
|
+
+const previousMonth = adapter.addMonths(value, -1);
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
- The `adapter.getWeekdays` method have been removed, you can use the `adapter.startOfWeek` and `adapter.addDays` methods instead:
|
|
322
|
+
|
|
323
|
+
```diff
|
|
324
|
+
-const weekDays = adapter.getWeekdays(value);
|
|
325
|
+
+const getWeekdays = (value) => {
|
|
326
|
+
+ const start = adapter.startOfWeek(value);
|
|
327
|
+
+ return [0, 1, 2, 3, 4, 5, 6].map((diff) => utils.addDays(start, diff));
|
|
328
|
+
+};
|
|
329
|
+
+
|
|
330
|
+
+const weekDays = getWeekdays(value);
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
- The `isNull` method have been removed, you can replace it with a very basic check:
|
|
334
|
+
|
|
335
|
+
```diff
|
|
336
|
+
-const isNull = adapter.isNull(value);
|
|
337
|
+
+const isNull = value === null;
|
|
338
|
+
```
|
|
339
|
+
|
|
340
|
+
- The `adapter.mergeDateAndTime` method have been removed, you can use the `adapter.setHours`, `adapter.setMinutes`, and `adapter.setSeconds` methods to recreate its behavior:
|
|
341
|
+
|
|
342
|
+
```diff
|
|
343
|
+
-const result = adapter.mergeDateAndTime(valueWithDate, valueWithTime);
|
|
344
|
+
+const mergeDateAndTime = <TDate>(
|
|
345
|
+
+ dateParam,
|
|
346
|
+
+ timeParam,
|
|
347
|
+
+ ) => {
|
|
348
|
+
+ let mergedDate = dateParam;
|
|
349
|
+
+ mergedDate = utils.setHours(mergedDate, utils.getHours(timeParam));
|
|
350
|
+
+ mergedDate = utils.setMinutes(mergedDate, utils.getMinutes(timeParam));
|
|
351
|
+
+ mergedDate = utils.setSeconds(mergedDate, utils.getSeconds(timeParam));
|
|
352
|
+
+
|
|
353
|
+
+ return mergedDate;
|
|
354
|
+
+ };
|
|
355
|
+
+
|
|
356
|
+
+const result = mergeDateAndTime(valueWithDate, valueWithTime);
|
|
357
|
+
```
|
|
358
|
+
|
|
359
|
+
- The `adapter.parseISO` method have been removed, you can directly use your date library:
|
|
360
|
+
|
|
361
|
+
```diff
|
|
362
|
+
// For Day.js
|
|
363
|
+
-const value = adapter.parseISO(isoString);
|
|
364
|
+
+const value = dayjs(isoString);
|
|
365
|
+
|
|
366
|
+
// For Luxon
|
|
367
|
+
-const value = adapter.parseISO(isoString);
|
|
368
|
+
+const value = DateTime.fromISO(isoString);
|
|
369
|
+
|
|
370
|
+
// For DateFns
|
|
371
|
+
-const value = adapter.parseISO(isoString);
|
|
372
|
+
+const value = dateFns.parseISO(isoString);
|
|
373
|
+
|
|
374
|
+
// For Moment
|
|
375
|
+
-const value = adapter.parseISO(isoString);
|
|
376
|
+
+const value = moment(isoString, true);
|
|
377
|
+
```
|
|
378
|
+
|
|
379
|
+
- The `adapter.toISO` method have been removed, you can directly use your date library:
|
|
380
|
+
|
|
381
|
+
```diff
|
|
382
|
+
-const isoString = adapter.toISO(value);
|
|
383
|
+
+const isoString = value.toISOString();
|
|
384
|
+
+const isoString = value.toUTC().toISO({ format: 'extended' });
|
|
385
|
+
+const isoString = dateFns.formatISO(value, { format: 'extended' });
|
|
386
|
+
+const isoString = value.toISOString();
|
|
387
|
+
```
|
|
388
|
+
|
|
389
|
+
- The `adapter.isEqual` method used to accept any type of value for its two input and tried to parse them before checking if they were equal.
|
|
390
|
+
The method has been simplified and now only accepts an already-parsed date or `null` (ie: the same formats used by the `value` prop in the pickers)
|
|
391
|
+
|
|
392
|
+
```diff
|
|
393
|
+
const adapterDayjs = new AdapterDayjs();
|
|
394
|
+
const adapterLuxon = new AdapterLuxon();
|
|
395
|
+
const adapterDateFns = new AdapterDateFns();
|
|
396
|
+
const adapterMoment = new AdatperMoment();
|
|
397
|
+
|
|
398
|
+
// Supported formats
|
|
399
|
+
const isEqual = adapterDayjs.isEqual(null, null); // Same for the other adapters
|
|
400
|
+
const isEqual = adapterLuxon.isEqual(DateTime.now(), DateTime.fromISO('2022-04-17'));
|
|
401
|
+
const isEqual = adapterMoment.isEqual(moment(), moment('2022-04-17'));
|
|
402
|
+
const isEqual = adapterDateFns.isEqual(new Date(), new Date('2022-04-17'));
|
|
403
|
+
|
|
404
|
+
// Non-supported formats (JS Date)
|
|
405
|
+
-const isEqual = adapterDayjs.isEqual(new Date(), new Date('2022-04-17'));
|
|
406
|
+
+const isEqual = adapterDayjs.isEqual(dayjs(), dayjs('2022-04-17'));
|
|
407
|
+
|
|
408
|
+
-const isEqual = adapterLuxon.isEqual(new Date(), new Date('2022-04-17'));
|
|
409
|
+
+const isEqual = adapterLuxon.isEqual(DateTime.now(), DateTime.fromISO('2022-04-17'));
|
|
410
|
+
|
|
411
|
+
-const isEqual = adapterMoment.isEqual(new Date(), new Date('2022-04-17'));
|
|
412
|
+
+const isEqual = adapterMoment.isEqual(moment(), moment('2022-04-17'));
|
|
413
|
+
|
|
414
|
+
// Non-supported formats (string)
|
|
415
|
+
-const isEqual = adapterDayjs.isEqual('2022-04-16', '2022-04-17');
|
|
416
|
+
+const isEqual = adapterDayjs.isEqual(dayjs('2022-04-17'), dayjs('2022-04-17'));
|
|
417
|
+
|
|
418
|
+
-const isEqual = adapterLuxon.isEqual('2022-04-16', '2022-04-17');
|
|
419
|
+
+const isEqual = adapterLuxon.isEqual(DateTime.fromISO('2022-04-17'), DateTime.fromISO('2022-04-17'));
|
|
420
|
+
|
|
421
|
+
-const isEqual = adapterMoment.isEqual('2022-04-16', '2022-04-17');
|
|
422
|
+
+const isEqual = adapterMoment.isEqual(moment('2022-04-17'), moment('2022-04-17'));
|
|
423
|
+
|
|
424
|
+
-const isEqual = adapterDateFns.isEqual('2022-04-16', '2022-04-17');
|
|
425
|
+
+const isEqual = adapterDateFns.isEqual(new Date('2022-04-17'), new Date('2022-04-17'));
|
|
426
|
+
```
|
|
427
|
+
|
|
428
|
+
- The `dateLibInstance` prop of `LocalizationProvider` does not work with `AdapterDayjs` anymore (#11023). This prop was used to set the pickers in UTC mode before the implementation of a proper timezone support in the components.
|
|
429
|
+
You can learn more about the new approach on the [dedicated doc page](https://mui.com/x/react-date-pickers/timezone/).
|
|
430
|
+
|
|
431
|
+
```diff
|
|
432
|
+
// When a `value` or a `defaultValue` is provided
|
|
433
|
+
<LocalizationProvider
|
|
434
|
+
adapter={AdapterDayjs}
|
|
435
|
+
- dateLibInstance={dayjs.utc}
|
|
436
|
+
>
|
|
437
|
+
<DatePicker value={dayjs.utc('2022-04-17')} />
|
|
438
|
+
</LocalizationProvider>
|
|
439
|
+
|
|
440
|
+
// When no `value` or `defaultValue` is provided
|
|
441
|
+
<LocalizationProvider
|
|
442
|
+
adapter={AdapterDayjs}
|
|
443
|
+
- dateLibInstance={dayjs.utc}
|
|
444
|
+
>
|
|
445
|
+
- <DatePicker />
|
|
446
|
+
+ <DatePicker timezone="UTC" />
|
|
447
|
+
</LocalizationProvider>
|
|
448
|
+
```
|
|
449
|
+
|
|
450
|
+
- The property `hasLeadingZeros` has been removed from the sections in favor of the more precise `hasLeadingZerosInFormat` and `hasLeadingZerosInInput` properties (#10994). To keep the same behavior, you can replace it by `hasLeadingZerosInFormat`:
|
|
451
|
+
|
|
452
|
+
```diff
|
|
453
|
+
const fieldRef = React.useRef<FieldRef<FieldSection>>(null);
|
|
454
|
+
|
|
455
|
+
React.useEffect(() => {
|
|
456
|
+
const firstSection = fieldRef.current!.getSections()[0];
|
|
457
|
+
- console.log(firstSection.hasLeadingZeros);
|
|
458
|
+
+ console.log(firstSection.hasLeadingZerosInFormat);
|
|
459
|
+
}, []);
|
|
460
|
+
|
|
461
|
+
return (
|
|
462
|
+
<DateField unstableFieldRef={fieldRef} />
|
|
463
|
+
);
|
|
464
|
+
```
|
|
465
|
+
|
|
466
|
+
- The `adapter.getYearRange` method used to accept two params and now accepts a tuple to be consistent with the `adapter.isWithinRange` method (#10978):
|
|
467
|
+
|
|
468
|
+
```diff
|
|
469
|
+
-adapter.getYearRange(start, end);
|
|
470
|
+
+adapter.getYearRange([start, end])
|
|
471
|
+
```
|
|
472
|
+
|
|
473
|
+
- The `adapter.isValid` method used to accept any type of value and tried to parse them before checking their validity (#10971).
|
|
474
|
+
The method has been simplified and now only accepts an already-parsed date or `null`.
|
|
475
|
+
Which is the same type as the one accepted by the components `value` prop.
|
|
476
|
+
|
|
477
|
+
```diff
|
|
478
|
+
const adapterDayjs = new AdapterDayjs();
|
|
479
|
+
const adapterLuxon = new AdapterLuxon();
|
|
480
|
+
const adapterDateFns = new AdapterDateFns();
|
|
481
|
+
const adapterMoment = new AdatperMoment();
|
|
482
|
+
|
|
483
|
+
// Supported formats
|
|
484
|
+
const isValid = adapterDayjs.isValid(null); // Same for the other adapters
|
|
485
|
+
const isValid = adapterLuxon.isValid(DateTime.now());
|
|
486
|
+
const isValid = adapterMoment.isValid(moment());
|
|
487
|
+
const isValid = adapterDateFns.isValid(new Date());
|
|
488
|
+
|
|
489
|
+
// Non-supported formats (JS Date)
|
|
490
|
+
-const isValid = adapterDayjs.isValid(new Date('2022-04-17'));
|
|
491
|
+
+const isValid = adapterDayjs.isValid(dayjs('2022-04-17'));
|
|
492
|
+
|
|
493
|
+
-const isValid = adapterLuxon.isValid(new Date('2022-04-17'));
|
|
494
|
+
+const isValid = adapterLuxon.isValid(DateTime.fromISO('2022-04-17'));
|
|
495
|
+
|
|
496
|
+
-const isValid = adapterMoment.isValid(new Date('2022-04-17'));
|
|
497
|
+
+const isValid = adapterMoment.isValid(moment('2022-04-17'));
|
|
498
|
+
|
|
499
|
+
// Non-supported formats (string)
|
|
500
|
+
-const isValid = adapterDayjs.isValid('2022-04-17');
|
|
501
|
+
+const isValid = adapterDayjs.isValid(dayjs('2022-04-17'));
|
|
502
|
+
|
|
503
|
+
-const isValid = adapterLuxon.isValid('2022-04-17');
|
|
504
|
+
+const isValid = adapterLuxon.isValid(DateTime.fromISO('2022-04-17'));
|
|
505
|
+
|
|
506
|
+
-const isValid = adapterMoment.isValid('2022-04-17');
|
|
507
|
+
+const isValid = adapterMoment.isValid(moment('2022-04-17'));
|
|
508
|
+
|
|
509
|
+
-const isValid = adapterDateFns.isValid('2022-04-17');
|
|
510
|
+
+const isValid = adapterDateFns.isValid(new Date('2022-04-17'));
|
|
511
|
+
```
|
|
512
|
+
|
|
513
|
+
#### Changes
|
|
514
|
+
|
|
515
|
+
- [pickers] Change the input format of `adapter.getYearRange` to be consistent with `adapter.isWithinRange` (#10978) @flaviendelangle
|
|
516
|
+
- [pickers] Clean remaining `components` / `componentsProps` typings (#11040) @flaviendelangle
|
|
517
|
+
- [pickers] Modify `adapter.isEqual` method to accept `TDate | null` instead of `any` (#10976) @flaviendelangle
|
|
518
|
+
- [pickers] Modify `adapter.isValid` method to accept `TDate | null` instead of `any` (#10971) @flaviendelangle
|
|
519
|
+
- [pickers] Remove the `hasLeadingZeros` property from `FieldSection` (#10994) @flaviendelangle
|
|
520
|
+
- [pickers] Remove the deprecated methods and formats from the adapters (#10776) @flaviendelangle
|
|
521
|
+
- [pickers] Remove the legacy UTC implementation for `dayjs` (#11023) @flaviendelangle
|
|
522
|
+
- [pickers] Remove unused code (#11048) @flaviendelangle
|
|
523
|
+
- [pickers] Move the exports of the `calendarHeader` slot to `@mui/x-date-pickers/PickersCalendarHeader` (#11020) @flaviendelangle
|
|
524
|
+
- [DateCalendar] Allow to override the format of the header with a prop (#10990) @flaviendelangle
|
|
525
|
+
- [DateCalendar] Remove the string argument of the `dayOfWeekFormatter` prop (#10992) @flaviendelangle
|
|
526
|
+
|
|
527
|
+
### Docs
|
|
528
|
+
|
|
529
|
+
- [docs] Fix incorrect component name in the "Custom slots and subcomponents" page (#11024) @flaviendelangle
|
|
530
|
+
- [docs] Fix typos in pickers migration guide (#11057) @flaviendelangle
|
|
531
|
+
|
|
532
|
+
### Core
|
|
533
|
+
|
|
534
|
+
- [core] Clean the component slots doc generation (#11021) @flaviendelangle
|
|
535
|
+
- [core] Fix script to release with `next` tag (#10996) @LukasTy
|
|
536
|
+
- [test] Wait for images to load (#11004) @cherniavskii
|
|
537
|
+
|
|
6
538
|
## 7.0.0-alpha.0
|
|
7
539
|
|
|
8
540
|
_Nov 10, 2023_
|
|
@@ -40,7 +572,7 @@ A special shoutout to thank the 12 contributors who made this release possible.
|
|
|
40
572
|
}
|
|
41
573
|
const filterRegex = new RegExp(escapeRegExp(filterItem.value), 'i');
|
|
42
574
|
- return (cellParams) => {
|
|
43
|
-
-
|
|
575
|
+
- const { value } = cellParams;
|
|
44
576
|
+ return (value, row, colDef, apiRef) => {
|
|
45
577
|
return value != null ? filterRegex.test(String(value)) : false;
|
|
46
578
|
};
|
|
@@ -152,6 +684,59 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
|
|
|
152
684
|
- [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
|
|
153
685
|
- [license] Correctly throw errors (#10924) @oliviertassinari
|
|
154
686
|
|
|
687
|
+
## 6.18.2
|
|
688
|
+
|
|
689
|
+
_Nov 23, 2023_
|
|
690
|
+
|
|
691
|
+
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
|
|
692
|
+
|
|
693
|
+
- 🌍 Improve Arabic (ar-SD), Czech (cs-CZ), and Hebrew (he-IL) locales on Data Grid
|
|
694
|
+
- 🌍 Add Basque (eu) and Macedonian (mk) locales on Pickers
|
|
695
|
+
- 🌍 Improve German (de-DE) and Spanish (es-ES) locales on Pickers
|
|
696
|
+
- 🐞 Bugfixes
|
|
697
|
+
- 📚 Documentation improvements
|
|
698
|
+
|
|
699
|
+
### Data Grid
|
|
700
|
+
|
|
701
|
+
#### `@mui/x-data-grid@6.18.2`
|
|
702
|
+
|
|
703
|
+
- [l10n] Improve Arabic (ar-SD) locale (#11096) @OmarWebDev
|
|
704
|
+
- [l10n] Improve Czech (cs-CZ) locale (#10968) @luborepka
|
|
705
|
+
- [l10n] Improve Hebrew (he-IL) locale (#11056) @LironKiloma
|
|
706
|
+
|
|
707
|
+
#### `@mui/x-data-grid-pro@6.18.2` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
708
|
+
|
|
709
|
+
Same changes as in `@mui/x-data-grid@6.18.2`.
|
|
710
|
+
|
|
711
|
+
#### `@mui/x-data-grid-premium@6.18.2` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
712
|
+
|
|
713
|
+
Same changes as in `@mui/x-data-grid-pro@6.18.2`.
|
|
714
|
+
|
|
715
|
+
### Date Pickers
|
|
716
|
+
|
|
717
|
+
#### `@mui/x-date-pickers@6.18.2`
|
|
718
|
+
|
|
719
|
+
- [l10n] Add Basque (eu) locale and improve Spanish (es-ES) locale (#10985) @lajtomekadimon
|
|
720
|
+
- [l10n] Add Macedonian (mk) locale (#11155) @brsnik
|
|
721
|
+
- [l10n] Improve German (de-DE) locale (#11104) @jho-vema
|
|
722
|
+
- [pickers] Deprecate `defaultCalendarMonth` prop (#11138) @flaviendelangle
|
|
723
|
+
- [pickers] Fix `DateCalendar` crashing when given an invalid value (#11101) @flaviendelangle
|
|
724
|
+
|
|
725
|
+
#### `@mui/x-date-pickers-pro@6.18.2` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
726
|
+
|
|
727
|
+
Same changes as in `@mui/x-date-pickers@6.18.2`.
|
|
728
|
+
|
|
729
|
+
### Charts / `@mui/x-charts@6.18.2`
|
|
730
|
+
|
|
731
|
+
- [charts] Fix `ChartsTooltip` component setup (#11157) @LukasTy
|
|
732
|
+
- [charts] Remove outdated prop-types (#10998) @alexfauquette
|
|
733
|
+
|
|
734
|
+
### Docs
|
|
735
|
+
|
|
736
|
+
- [docs] Fix incoherent naming of a component in `Custom slots and subcomponents` page (#11003) @lhilgert9
|
|
737
|
+
- [test] Skip flaky e2e test in webkit (#11115) @cherniavskii
|
|
738
|
+
- [test] Wait for images to load (#11109) @cherniavskii
|
|
739
|
+
|
|
155
740
|
## 6.18.1
|
|
156
741
|
|
|
157
742
|
_Nov 9, 2023_
|
|
@@ -218,11 +803,11 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss
|
|
|
218
803
|
|
|
219
804
|
- 🎁 The Charts package is now officially stable!
|
|
220
805
|
- 🥧 Pie charts are now animated.
|
|
221
|
-
- 📈 Line charts now support partial data, and can interpolate missing data.
|
|
806
|
+
- 📈 Line charts now support partial data, and can interpolate missing data https://mui.com/x/react-charts/lines/#skip-missing-points.
|
|
222
807
|
|
|
223
|
-
<img
|
|
808
|
+
<img src="https://github.com/mui/mui-x/assets/3165635/d2d50b1b-ee29-4e4c-9ebe-629c06f3093e" width="683" height="436" />
|
|
224
809
|
|
|
225
|
-
- ✨
|
|
810
|
+
- ✨ The data grid allows to ignore [diacritics](https://en.wikipedia.org/wiki/Diacritic) when filtering.
|
|
226
811
|
- 📚 Documentation improvements
|
|
227
812
|
|
|
228
813
|
### Data Grid
|
|
@@ -384,7 +969,7 @@ Same changes as in `@mui/x-date-pickers@6.16.3`, plus:
|
|
|
384
969
|
|
|
385
970
|
- [charts] Add reference links to area + bar chart components (#10652) @michelengelen
|
|
386
971
|
- [charts] Add reference links to line chart + sparkline components (#10650) @michelengelen
|
|
387
|
-
- [charts] Add reference links to pie + scatter chart components
|
|
972
|
+
- [charts] Add reference links to pie + scatter chart components (#10653) @michelengelen
|
|
388
973
|
- [charts] Render only when `width` and `height` are resolved (#10714) @alexfauquette
|
|
389
974
|
- [charts] Support animation on `BarChart` (#9926) @alexfauquette
|
|
390
975
|
- [charts] Use new text component to avoid tick label overflow on x-axis (#10648) @alexfauquette
|
|
@@ -460,6 +1045,7 @@ It adds line break support and avoids overlapping text in the legend.
|
|
|
460
1045
|
This comes with some breaking changes.
|
|
461
1046
|
|
|
462
1047
|
- The DOM structure is modified. An intermediary `<tspan />` element has been added. This can impact how your style is applied.
|
|
1048
|
+
|
|
463
1049
|
```diff
|
|
464
1050
|
- <text>The label</text>
|
|
465
1051
|
+ <text><tspan>The label</tspan></text>
|