+
);
}
```
- Column grouping is now enabled by default. The flag `columnGrouping` is no longer needed to be passed to the `experimentalFeatures` prop to enable it.
```diff
-
```
- The `collapseIcon` / `defaultCollapseIcon` props, used to collapse the children of a node (rendered when it is expanded),
is now defined as a slot both on the Tree View and the Tree Item components.
If you were using the `ExpandMore` icon from `@mui/icons-material`,
you can stop passing it to your component because it is now the default value:
```diff
- import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
```
- The `useTreeItem` hook has been renamed `useTreeItemState`.
This will help create a new headless version of the Tree Item component based on a future `useTreeItem` hook.
```diff
-import { TreeItem, useTreeItem } from '@mui/x-tree-view/TreeItem';
+import { TreeItem, useTreeItemState } from '@mui/x-tree-view/TreeItem';
const CustomContent = React.forwardRef((props, ref) => {
- const { disabled } = useTreeItem(props.nodeId);
+ const { disabled } = useTreeItemState(props.nodeId);
// Render some UI
});
function App() {
return (
)
}
```
- The `parentIcon` prop has been removed from the Tree View components.
If you were passing an icon to your Tree View component,
you can achieve the same behavior
by passing the same icon to both the `collapseIcon` and the `expandIcon` slots on this component:
```diff
```
- The `icon` prop, rendered next to an item without children,
is now defined as a slot on the Tree Item component.
If you were passing an icon to your Tree Item component,
you need to use the new `icon` slot on this component:
```diff
```
#### `@mui/x-tree-view@7.0.0-alpha.9`
- [TreeView] Adjust expansion and selection docs (#11723) @noraleonte
- [TreeView] Improve plugin signature definition (#11665) @flaviendelangle
- [TreeView] Make each plugin responsible for its context value (#11623) @flaviendelangle
- [TreeView] Migrate remaining icon props to slots (#11713) @flaviendelangle
- [TreeView] Pass through `Theme` generic to variants (#11480) @dhulme
- [TreeView] Rename `useTreeItem` to `useTreeItemState` (#11712) @flaviendelangle
- [TreeView] Add `slots` and `slotProps` on the Tree View components (#11664) @flaviendelangle
- [TreeView] Explore a better plugin model API (#11567) @flaviendelangle
### Docs
- [docs] Clean the pickers migration guide (#11694) @flaviendelangle
- [docs] Cleanup and fix Pickers Playground styling (#11700) @LukasTy
- [docs] First draft of the Tree View custom plugin doc (#11564) @flaviendelangle
- [docs] Fix Pickers migration syntax and diffs (#11695) @LukasTy
- [docs] Fix generated Tree View API docs (#11737) @LukasTy
- [docs] Generate docs for Tree View slots (#11730) @flaviendelangle
- [docs] Improve codemod for v7 (#11650) @oliviertassinari
- [docs] Improve Data Grid `pageSizeOptions` prop documentation (#11682) @oliviertassinari
- [docs] Parse markdown on API docs demo titles (#11728) @LukasTy
- [docs] Remove the description from the `className` prop (#11693) @oliviertassinari
- [docs] Uplift Simple Tree View customization examples (#11424) @noraleonte
- [docs] Uplift the Date Pickers playground (#11555) @danilo-leal
### Core
- [core] Bump `@mui/material` peer dependency for all packages (#11692) @LukasTy
- [core] Make `karma` run in parallel (#11571) @romgrk
- [core] make `karma-parallel` run under a new command (#11716) @romgrk
- [code-infra] Migrate all prettier APIs to the async version (#11732) @Janpot
- [code-infra] Update the Babel macro path (#11479) @michaldudak
- [docs-infra] Enforce brand name rules (#11651) @oliviertassinari
- [test] Fix flaky Data Grid test (#11725) @cherniavskii
## 7.0.0-alpha.8
_Jan 11, 2024_
We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights β¨:
- β° Support date-fns v3 (#11659) @LukasTy
Pickers support both v2 and v3 of date-fns. For v3 use `AdapterDateFnsV3`.
```js
// with date-fns v2.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import de from 'date-fns/locale/de';
```
```js
// with date-fns v3.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
import { de } from 'date-fns/locale/de';
```
### Data Grid
#### Breaking changes
- The import path for locales has been changed:
```diff
-import { enUS } from '@mui/x-data-grid';
+import { enUS } from '@mui/x-data-grid/locales';
-import { enUS } from '@mui/x-data-grid-pro';
+import { enUS } from '@mui/x-data-grid-pro/locales';
-import { enUS } from '@mui/x-data-grid-premium';
+import { enUS } from '@mui/x-data-grid-premium/locales';
```
#### `@mui/x-data-grid@7.0.0-alpha.8`
- [DataGrid] Stop exporting locales from the package root (#11614) @cherniavskii
#### `@mui/x-data-grid-pro@7.0.0-alpha.8` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
Same changes as in `@mui/x-data-grid@7.0.0-alpha.8`.
#### `@mui/x-data-grid-premium@7.0.0-alpha.8` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.8`.
### Date and Time Pickers
#### `@mui/x-date-pickers@7.0.0-alpha.8`
- [pickers] Add `date-fns@3.x` adapter (#11462) @LukasTy
- [pickers] Avoid deeper than 2nd level imports (#11588) @LukasTy
- [pickers] Fix clearable behavior blocking focus return to `OpenPickerButton` (#11642) @noraleonte
- [pickers] Move `DateRange` to `@mui/x-date-pickers-pro/models` (#11611) @flaviendelangle
- [l10n] Add missing Danish (da-DK) locale export (#11640) @etlos
#### `@mui/x-date-pickers-pro@7.0.0-alpha.8` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
Same changes as in `@mui/x-date-pickers@7.0.0-alpha.8`.
### Tree View / `@mui/x-tree-view@7.0.0-alpha.8`
- [TreeView] Cleanup `onKeyDown` handler (#11481) @flaviendelangle
- [TreeView] Define the parameters used by each plugin to avoid listing them in each component (#11473) @flaviendelangle
### Docs
- [docs] Fix parsing of `x-date-pickers-pro` demo adapter imports (#11628) @LukasTy
- [docs] Improve `git diff` format @oliviertassinari
- [docs] Push up the MUIΒ X brand (#11533) @oliviertassinari
- [docs] Remove old Data Grid translation files (#11646) @cherniavskii
- [docs] Improve Server-side Data Grid docs (#11589) @oliviertassinari
- [docs] Improve charts landing page (#11570) @oliviertassinari
### Core
- [core] Lock `jsdom` version (#11652) @cherniavskii
- [core] Remove PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD (#11608) @oliviertassinari
- [core] Simplify isSsr logic (#11606) @oliviertassinari
- [core] Sync playwright cache between MUIΒ X and MaterialΒ UI (#11607) @oliviertassinari
- [core] Use MUIΒ X official name in errors (#11645) @oliviertassinari
## 7.0.0-alpha.7
_Jan 5, 2024_
We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights β¨:
- π New component to create a Tree View from a structured data source:
You can now directly pass your data to the `
{props.items.map(item => {
const value = item.getValue({ isValid: props.isValid });
return (
)
}}
)
}
generation (#11182) @oliviertassinari
- [docs] Fix dead anchor link (#11265) @oliviertassinari
- [docs] Improve Data Grid togglable columns example (#11238) @MBilalShafi
- [docs] Improve the prop descriptions of `DayCalendar` (#11158) @flaviendelangle
- [docs] Move the adapter breaking changes in a collapsable block (#11205) @flaviendelangle
- [docs] Polish Next.js header description @oliviertassinari
- [docs] Remove the `newFeature` flag on v6 features (#11168) @flaviendelangle
- [docs] Simplify a bit chart demo (#11173) @oliviertassinari
- [docs] Standardize the usage of callouts in the MUIΒ X docs (#7127) @samuelsycamore
- [docs] Adjust the Data Grid demo page design (#11231) @danilo-leal
### Core
- [core] Make `@mui/system` a direct dependency (#11128) @LukasTy
- [core] Remove blank lines, coding style @oliviertassinari
- [core] Remove outdated `ENABLE_AD` env variable (#11181) @oliviertassinari
- [github] Do not add `plan: Pro` and `plan: Premium` labels on Pro / Premium issue templates (#10183) @flaviendelangle
## 7.0.0-alpha.2
_Nov 23, 2023_
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights β¨:
- π Export missing Charts props
- π Improve Arabic (ar-SD) and Hebrew (he-IL) locales on Data Grid
- π Add Macedonian (mk) locale and improve German (de-DE) locale on Pickers
- π Bugfixes
- π Documentation improvements
### Data Grid
#### `@mui/x-data-grid@7.0.0-alpha.2`
- [l10n] Improve Arabic (ar-SD) locale (#11114) @MBilalShafi
- [l10n] Improve Hebrew (he-IL) locale (#11056) (#11149) @MBilalShafi
- [DataGrid] Remove unused utilities (#11156) @flaviendelangle
#### `@mui/x-data-grid-pro@7.0.0-alpha.2` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
Same changes as in `@mui/x-data-grid@7.0.0-alpha.2`.
#### `@mui/x-data-grid-premium@7.0.0-alpha.2` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.2`.
### Date and Time Pickers
#### Breaking changes
- The deprecated `shouldDisableClock` prop has been removed in favor of the more flexible `shouldDisableTime` prop.
The `shouldDisableClock` prop received `value` as a `number` of hours, minutes, or seconds.
Instead, the `shouldDisableTime` prop receives the date object (based on the used adapter).
You can read more about the deprecation of this prop in [v6 migration guide](https://v7.mui.com/x/migration/migration-pickers-v5/#%E2%9C%85-rename-or-refactor-shoulddisabletime-prop).
```diff
<DateTimePicker
- shouldDisableClock={(timeValue, view) => view === 'hours' && timeValue < 12}
+ shouldDisableTime={(value, view) => view === 'hours' && value.hour() < 12}
/>
```
- The `adapter.dateWithTimezone` method has been removed and its content moved to the `date` method.
You can use the `adapter.date` method instead:
```diff
- adapter.dateWithTimezone(undefined, 'system');
+ adapter.date(undefined, 'system');
```
- The `dayPickerClasses` variable has been renamed to `dayCalendarClasses` to be consistent with the new name of the `DayCalendar` component introduced in v6.0.0.
```diff
- import { dayPickerClasses } from '@mui/x-date-pickers/DateCalendar';
+ import { dayCalendarClasses } from '@mui/x-date-pickers/DateCalendar';
```
- The deprecated `defaultCalendarMonth` prop has been removed in favor of the more flexible `referenceDate` prop.
```diff
- <DateCalendar defaultCalendarMonth={dayjs('2022-04-01')};
+ <DateCalendar referenceDate{dayjs('2022-04-01')} />
```
- The `adapter.date` method now has the v6 `adapter.dateWithTimezone` method behavior.
It no longer accepts `any` as a value but only `string | null | undefined`.
```diff
- adapter.date(new Date());
+ adapter.date();
- adapter.date(new Date('2022-04-17');
+ adapter.date('2022-04-17');
- adapter.date(new Date(2022, 3, 17, 4, 5, 34));
+ adapter.date('2022-04-17T04:05:34');
- adapter.date(new Date('Invalid Date'));
+ adapter.getInvalidDate();
```
#### `@mui/x-date-pickers@7.0.0-alpha.2`
- [l10n] Improve German (de-DE) locale (#11103) @jho-vema
- [l10n] Add Macedonian (mk) locale (#10935) @brsnik
- [pickers] Remove the `defaultCalendarMonth` prop (#10987) @flaviendelangle
- [pickers] Remove the `shouldDisableClock` prop (#11042) @flaviendelangle
- [pickers] Rename the `dayPickerClasses` variable `dayCalendarClasses` (#11140) @flaviendelangle
- [pickers] Replace `adapter.date` with the current `adapter.dateWithTimezone` (#10979) @flaviendelangle
#### `@mui/x-date-pickers-pro@7.0.0-alpha.2` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
Same changes as in `@mui/x-date-pickers@7.0.0-alpha.2`.
### Charts / `@mui/x-charts@7.0.0-alpha.2`
- [charts] Change export strategy in index files (#11113) @michelengelen
- [charts] Fix `ChartsTooltip` component setup (#11152) @LukasTy
### `@mui/x-codemod@7.0.0-alpha.2`
- [codemod] Add codemod to use `referenceDate` instead of `defaultCalendarMonth` (#11139) @flaviendelangle
- [codemod] Clean the components to slots codemod usage (#11145) @flaviendelangle
### Docs
- [docs] Add LTS section to support docs (#10927) @joserodolfofreitas
- [docs] Clean the codemod README (#11051) @flaviendelangle
- [docs] Fix typos and grammar issues (#11049) @flaviendelangle
- [docs] Fix version links (#11001) @LukasTy
- [docs] Point to the source of `@mui/x-data-grid-generator` (#11134) @oliviertassinari
### Core
- [core] Bump monorepo (#11160) @LukasTy
- [core] Fix comment in doc generation (#11098) @flaviendelangle
- [core] Rename OpenCollective @oliviertassinari
- [core] Upgrade `babel-plugin-module-resolver` to 5.0.0 (#11065) @flaviendelangle
- [changelog] Improve git diff format @oliviertassinari
- [renovate] Monthly schedule for lockfile maintenance (#10336) @Janpot
- [test] Skip flaky e2e test in webkit (#11110) @cherniavskii
## 7.0.0-alpha.1
_Nov 17, 2023_
We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights β¨:
- π Bugfixes
- π Documentation improvements
### Date and Time Pickers
#### `@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')
#### Breaking changes
- The string argument of the `dayOfWeekFormatter` prop has been replaced in favor of the date object to allow more flexibility.
```diff
<DateCalendar
// If you were still using the day string, you can get it back with your date library.
- dayOfWeekFormatter={dayStr => `${dayStr}.`}
+ dayOfWeekFormatter={day => `${day.format('dd')}.`}
// If you were already using the day object, just remove the first argument.
- dayOfWeekFormatter={(_dayStr, day) => `${day.format('dd')}.`}
+ dayOfWeekFormatter={day => `${day.format('dd')}.`}
/>
```
- The imports related to the `calendarHeader` slot have been moved from `@mui/x-date-pickers/DateCalendar` to `@mui/x-date-pickers/PIckersCalendarHeader`:
```diff
export {
pickersCalendarHeaderClasses,
PickersCalendarHeaderClassKey,
PickersCalendarHeaderClasses,
PickersCalendarHeader,
PickersCalendarHeaderProps,
PickersCalendarHeaderSlotsComponent,
PickersCalendarHeaderSlotsComponentsProps,
ExportedPickersCalendarHeaderProps,
-} from '@mui/x-date-pickers/DateCalendar';
+} from '@mui/x-date-pickers/PickersCalendarHeader';
```
- The `monthAndYear` format has been removed.
It was used in the header of the calendar views, you can replace it with the new `format` prop of the `calendarHeader` slot:
```diff
<LocalizationProvider
adapter={AdapterDayJS}
- formats={{ monthAndYear: 'MM/YYYY' }}
/>
<DatePicker
+ slotProps={{ calendarHeader: { format: 'MM/YYYY' }}}
/>
<DateRangePicker
+ slotProps={{ calendarHeader: { format: 'MM/YYYY' }}}
/>
<LocalizationProvider />
```
- The `adapter.getDiff` method have been removed, you can directly use your date library:
```diff
// For Day.js
-const diff = adapter.getDiff(value, comparing, unit);
+const diff = value.diff(comparing, unit);
// For Luxon
-const diff = adapter.getDiff(value, comparing, unit);
+const getDiff = (value: DateTime, comparing: DateTime | string, unit?: AdapterUnits) => {
+ const parsedComparing = typeof comparing === 'string'
+ ? DateTime.fromJSDate(new Date(comparing))
+ : comparing;
+ if (unit) {
+ return Math.floor(value.diff(comparing).as(unit));
+ }
+ return value.diff(comparing).as('millisecond');
+};
+
+const diff = getDiff(value, comparing, unit);
// For DateFns
-const diff = adapter.getDiff(value, comparing, unit);
+const getDiff = (value: Date, comparing: Date | string, unit?: AdapterUnits) => {
+ const parsedComparing = typeof comparing === 'string' ? new Date(comparing) : comparing;
+ switch (unit) {
+ case 'years':
+ return dateFns.differenceInYears(value, parsedComparing);
+ case 'quarters':
+ return dateFns.differenceInQuarters(value, parsedComparing);
+ case 'months':
+ return dateFns.differenceInMonths(value, parsedComparing);
+ case 'weeks':
+ return dateFns.differenceInWeeks(value, parsedComparing);
+ case 'days':
+ return dateFns.differenceInDays(value, parsedComparing);
+ case 'hours':
+ return dateFns.differenceInHours(value, parsedComparing);
+ case 'minutes':
+ return dateFns.differenceInMinutes(value, parsedComparing);
+ case 'seconds':
+ return dateFns.differenceInSeconds(value, parsedComparing);
+ default: {
+ return dateFns.differenceInMilliseconds(value, parsedComparing);
+ }
+ }
+};
+
+const diff = getDiff(value, comparing, unit);
// For Moment
-const diff = adapter.getDiff(value, comparing, unit);
+const diff = value.diff(comparing, unit);
```
- The `adapter.getFormatHelperText` method have been removed, you can use the `adapter.expandFormat` instead:
```diff
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format);
```
And if you need the exact same output you can apply the following transformation:
```diff
// For Day.js
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
// For Luxon
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/(a)/g, '(a|p)m').toLocaleLowerCase();
// For DateFns
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/(aaa|aa|a)/g, '(a|p)m').toLocaleLowerCase();
// For Moment
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
```
- The `adapter.getMeridiemText` method have been removed, you can use the `adapter.setHours`, `adapter.date` and `adapter.format` methods to recreate its behavior:
```diff
-const meridiem = adapter.getMeridiemText('am');
+const getMeridiemText = (meridiem: 'am' | 'pm') => {
+ const date = adapter.setHours(adapter.date()!, meridiem === 'am' ? 2 : 14);
+ return utils.format(date, 'meridiem');
+};
+
+const meridiem = getMeridiemText('am');
```
- The `adapter.getMonthArray` method have been removed, you can use the `adapter.startOfYear` and `adapter.addMonths` methods to recreate its behavior:
```diff
-const monthArray = adapter.getMonthArray(value);
+const getMonthArray = (year) => {
+ const firstMonth = utils.startOfYear(year);
+ const months = [firstMonth];
+
+ while (months.length < 12) {
+ const prevMonth = months[months.length - 1];
+ months.push(utils.addMonths(prevMonth, 1));
+ }
+
+ return months;
+}
+
+const monthArray = getMonthArray(value);
```
- The `adapter.getNextMonth` method have been removed, you can use the `adapter.addMonths` method instead:
```diff
-const nextMonth = adapter.getNextMonth(value);
+const nextMonth = adapter.addMonths(value, 1);
```
- The `adapter.getPreviousMonth` method have been removed, you can use the `adapter.addMonths` method instead:
```diff
-const previousMonth = adapter.getPreviousMonth(value);
+const previousMonth = adapter.addMonths(value, -1);
```
- The `adapter.getWeekdays` method have been removed, you can use the `adapter.startOfWeek` and `adapter.addDays` methods instead:
```diff
-const weekDays = adapter.getWeekdays(value);
+const getWeekdays = (value) => {
+ const start = adapter.startOfWeek(value);
+ return [0, 1, 2, 3, 4, 5, 6].map((diff) => utils.addDays(start, diff));
+};
+
+const weekDays = getWeekdays(value);
```
- The `isNull` method have been removed, you can replace it with a very basic check:
```diff
-const isNull = adapter.isNull(value);
+const isNull = value === null;
```
- The `adapter.mergeDateAndTime` method have been removed, you can use the `adapter.setHours`, `adapter.setMinutes`, and `adapter.setSeconds` methods to recreate its behavior:
```diff
-const result = adapter.mergeDateAndTime(valueWithDate, valueWithTime);
+const mergeDateAndTime = <TDate>(
+ dateParam,
+ timeParam,
+ ) => {
+ let mergedDate = dateParam;
+ mergedDate = utils.setHours(mergedDate, utils.getHours(timeParam));
+ mergedDate = utils.setMinutes(mergedDate, utils.getMinutes(timeParam));
+ mergedDate = utils.setSeconds(mergedDate, utils.getSeconds(timeParam));
+
+ return mergedDate;
+ };
+
+const result = mergeDateAndTime(valueWithDate, valueWithTime);
```
- The `adapter.parseISO` method have been removed, you can directly use your date library:
```diff
// For Day.js
-const value = adapter.parseISO(isoString);
+const value = dayjs(isoString);
// For Luxon
-const value = adapter.parseISO(isoString);
+const value = DateTime.fromISO(isoString);
// For DateFns
-const value = adapter.parseISO(isoString);
+const value = dateFns.parseISO(isoString);
// For Moment
-const value = adapter.parseISO(isoString);
+const value = moment(isoString, true);
```
- The `adapter.toISO` method have been removed, you can directly use your date library:
```diff
// For Day.js
-const isoString = adapter.toISO(value);
+const isoString = value.toISOString();
// For Luxon
-const isoString = adapter.toISO(value);
+const isoString = value.toUTC().toISO({ format: 'extended' });
// For DateFns
-const isoString = adapter.toISO(value);
+const isoString = dateFns.formatISO(value, { format: 'extended' });
// For Moment
-const isoString = adapter.toISO(value);
+const isoString = value.toISOString();
```
- 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.
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)
```diff
const adapterDayjs = new AdapterDayjs();
const adapterLuxon = new AdapterLuxon();
const adapterDateFns = new AdapterDateFns();
const adapterMoment = new AdatperMoment();
// Supported formats
const isEqual = adapterDayjs.isEqual(null, null); // Same for the other adapters
const isEqual = adapterLuxon.isEqual(DateTime.now(), DateTime.fromISO('2022-04-17'));
const isEqual = adapterMoment.isEqual(moment(), moment('2022-04-17'));
const isEqual = adapterDateFns.isEqual(new Date(), new Date('2022-04-17'));
// Non-supported formats (JS Date)
-const isEqual = adapterDayjs.isEqual(new Date(), new Date('2022-04-17'));
+const isEqual = adapterDayjs.isEqual(dayjs(), dayjs('2022-04-17'));
-const isEqual = adapterLuxon.isEqual(new Date(), new Date('2022-04-17'));
+const isEqual = adapterLuxon.isEqual(DateTime.now(), DateTime.fromISO('2022-04-17'));
-const isEqual = adapterMoment.isEqual(new Date(), new Date('2022-04-17'));
+const isEqual = adapterMoment.isEqual(moment(), moment('2022-04-17'));
// Non-supported formats (string)
-const isEqual = adapterDayjs.isEqual('2022-04-16', '2022-04-17');
+const isEqual = adapterDayjs.isEqual(dayjs('2022-04-17'), dayjs('2022-04-17'));
-const isEqual = adapterLuxon.isEqual('2022-04-16', '2022-04-17');
+const isEqual = adapterLuxon.isEqual(DateTime.fromISO('2022-04-17'), DateTime.fromISO('2022-04-17'));
-const isEqual = adapterMoment.isEqual('2022-04-16', '2022-04-17');
+const isEqual = adapterMoment.isEqual(moment('2022-04-17'), moment('2022-04-17'));
-const isEqual = adapterDateFns.isEqual('2022-04-16', '2022-04-17');
+const isEqual = adapterDateFns.isEqual(new Date('2022-04-17'), new Date('2022-04-17'));
```
- 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.
You can learn more about the new approach on the [dedicated doc page](https://mui.com/x/react-date-pickers/timezone/).
```diff
// When a `value` or a `defaultValue` is provided
<LocalizationProvider
adapter={AdapterDayjs}
- dateLibInstance={dayjs.utc}
>
<DatePicker value={dayjs.utc('2022-04-17')} />
</LocalizationProvider>
// When no `value` or `defaultValue` is provided
<LocalizationProvider
adapter={AdapterDayjs}
- dateLibInstance={dayjs.utc}
>
- <DatePicker />
+ <DatePicker timezone="UTC" />
</LocalizationProvider>
```
- 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`:
```diff
const fieldRef = React.useRef<FieldRef<FieldSection>>(null);
React.useEffect(() => {
const firstSection = fieldRef.current!.getSections()[0];
- console.log(firstSection.hasLeadingZeros);
+ console.log(firstSection.hasLeadingZerosInFormat);
}, []);
return (
<DateField unstableFieldRef={fieldRef} />
);
```
- The `adapter.getYearRange` method used to accept two params and now accepts a tuple to be consistent with the `adapter.isWithinRange` method (#10978):
```diff
-adapter.getYearRange(start, end);
+adapter.getYearRange([start, end])
```
- The `adapter.isValid` method used to accept any type of value and tried to parse them before checking their validity (#10971).
The method has been simplified and now only accepts an already-parsed date or `null`.
Which is the same type as the one accepted by the components `value` prop.
```diff
const adapterDayjs = new AdapterDayjs();
const adapterLuxon = new AdapterLuxon();
const adapterDateFns = new AdapterDateFns();
const adapterMoment = new AdatperMoment();
// Supported formats
const isValid = adapterDayjs.isValid(null); // Same for the other adapters
const isValid = adapterLuxon.isValid(DateTime.now());
const isValid = adapterMoment.isValid(moment());
const isValid = adapterDateFns.isValid(new Date());
// Non-supported formats (JS Date)
-const isValid = adapterDayjs.isValid(new Date('2022-04-17'));
+const isValid = adapterDayjs.isValid(dayjs('2022-04-17'));
-const isValid = adapterLuxon.isValid(new Date('2022-04-17'));
+const isValid = adapterLuxon.isValid(DateTime.fromISO('2022-04-17'));
-const isValid = adapterMoment.isValid(new Date('2022-04-17'));
+const isValid = adapterMoment.isValid(moment('2022-04-17'));
// Non-supported formats (string)
-const isValid = adapterDayjs.isValid('2022-04-17');
+const isValid = adapterDayjs.isValid(dayjs('2022-04-17'));
-const isValid = adapterLuxon.isValid('2022-04-17');
+const isValid = adapterLuxon.isValid(DateTime.fromISO('2022-04-17'));
-const isValid = adapterMoment.isValid('2022-04-17');
+const isValid = adapterMoment.isValid(moment('2022-04-17'));
-const isValid = adapterDateFns.isValid('2022-04-17');
+const isValid = adapterDateFns.isValid(new Date('2022-04-17'));
```
#### Changes
- [pickers] Change the input format of `adapter.getYearRange` to be consistent with `adapter.isWithinRange` (#10978) @flaviendelangle
- [pickers] Clean remaining `components` / `componentsProps` typings (#11040) @flaviendelangle
- [pickers] Modify `adapter.isEqual` method to accept `TDate | null` instead of `any` (#10976) @flaviendelangle
- [pickers] Modify `adapter.isValid` method to accept `TDate | null` instead of `any` (#10971) @flaviendelangle
- [pickers] Remove the `hasLeadingZeros` property from `FieldSection` (#10994) @flaviendelangle
- [pickers] Remove the deprecated methods and formats from the adapters (#10776) @flaviendelangle
- [pickers] Remove the legacy UTC implementation for `dayjs` (#11023) @flaviendelangle
- [pickers] Remove unused code (#11048) @flaviendelangle
- [pickers] Move the exports of the `calendarHeader` slot to `@mui/x-date-pickers/PickersCalendarHeader` (#11020) @flaviendelangle
- [DateCalendar] Allow to override the format of the header with a prop (#10990) @flaviendelangle
- [DateCalendar] Remove the string argument of the `dayOfWeekFormatter` prop (#10992) @flaviendelangle
### Docs
- [docs] Fix incorrect component name in the "Custom slots and subcomponents" page (#11024) @flaviendelangle
- [docs] Fix typos in pickers migration guide (#11057) @flaviendelangle
### Core
- [core] Clean the component slots doc generation (#11021) @flaviendelangle
- [core] Fix script to release with `next` tag (#10996) @LukasTy
- [test] Wait for images to load (#11004) @cherniavskii
## 7.0.0-alpha.0
_Nov 10, 2023_
We're thrilled to announce the first alpha release of our next major version, v7.
This release introduces a few breaking changes, paving the way for the upcoming features like Pivoting and DateTimeRangePicker.
A special shoutout to thank the 12 contributors who made this release possible. Here are some highlights β¨:
- π First v7 alpha release
- β¨ Fix aggregation label not showing when `renderHeader` is used (#10961) @cherniavskii
- π Server side data source [early documentation](https://mui.com/x/react-data-grid/server-side-data/)
- π« New recipes added for the Data Grid
- π `<ChartsReferenceLine />` component is now available
- π Add Basque (eu) locale, improve Czech (cs-CZ) and Spanish (es-ES) locales
- π Bugfixes
- π Documentation improvements
### Data Grid
#### Breaking changes
- The deprecated `components` and `componentsProps` props have been removed. Use `slots` and `slotProps` instead. See [components section](/x/react-data-grid/components/) for more details.
- The print export will now only print the selected rows if there are any.
If there are no selected rows, it will print all rows. This makes the print export consistent with the other exports.
You can [customize the rows to export by using the `getRowsToExport` function](/x/react-data-grid/export/#customizing-the-rows-to-export).
- The `getApplyFilterFnV7` in `GridFilterOperator` was renamed to `getApplyFilterFn`.
If you use `getApplyFilterFnV7` directly - rename it to `getApplyFilterFn`.
- The signature of the function returned by `getApplyFilterFn` has changed for performance reasons:
```diff
const getApplyFilterFn: GetApplyFilterFn<any, unknown> = (filterItem) => {
if (!filterItem.value) {
return null;
}
const filterRegex = new RegExp(escapeRegExp(filterItem.value), 'i');
- return (cellParams) => {
- const { value } = cellParams;
+ return (value, row, colDef, apiRef) => {
return value != null ? filterRegex.test(String(value)) : false;
};
}
```
- The `getApplyQuickFilterFnV7` in `GridColDef` was renamed to `getApplyQuickFilterFn`.
If you use `getApplyQuickFilterFnV7` directly - rename it to `getApplyQuickFilterFn`.
- The signature of the function returned by `getApplyQuickFilterFn` has changed for performance reasons:
```diff
const getGridStringQuickFilterFn: GetApplyQuickFilterFn<any, unknown> = (value) => {
if (!value) {
return null;
}
const filterRegex = new RegExp(escapeRegExp(value), 'i');
- return (cellParams) => {
- const { formattedValue } = cellParams;
+ return (value, row, column, apiRef) => {
+ let formattedValue = apiRef.current.getRowFormattedValue(row, column);
return formattedValue != null ? filterRegex.test(formattedValue.toString()) : false;
};
};
```
#### `@mui/x-data-grid@7.0.0-alpha.0`
- [DataGrid] Fix for error thrown when removing skeleton rows, after sorting is applied (#10807) @benjaminbialy
- [DataGrid] Fix: `undefined` slot value (#10937) @romgrk
- [DataGrid] Print selected rows by default (#10846) @cherniavskii
- [DataGrid] Remove deprecated `components` and `componentsProps` (#10911) @MBilalShafi
- [DataGrid] Remove legacy filtering API (#10897) @cherniavskii
- [DataGrid] Fix keyboard navigation for actions cell with disabled buttons (#10882) @michelengelen
- [DataGrid] Added a recipe for using non-native select in filter panel (#10916) @michelengelen
- [DataGrid] Added a recipe to style cells without impacting the aggregation cells (#10913) @michelengelen
- [l10n] Improve Czech (cs-CZ) locale (#10949) @luborepka
#### `@mui/x-data-grid-pro@7.0.0-alpha.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
Same changes as in `@mui/x-data-grid@7.0.0-alpha.0`, plus:
- [DataGridPro] Autosize Columns - Fix headers being cut off (#10666) @gitstart
- [DataGridPro] Add data source interface and basic documentation (#10543) @MBilalShafi
#### `@mui/x-data-grid-premium@7.0.0-alpha.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.0`, plus:
- [DataGridPremium] Render aggregation label when `renderHeader` is used (#10936) @cherniavskii
### Date and Time Pickers
#### Breaking changes
- The deprecated `components` and `componentsProps` props have been removed. Use `slots` and `slotProps` instead.
#### `@mui/x-date-pickers@7.0.0-alpha.0`
- [pickers] Escape non tokens words (#10400) @alexfauquette
- [fields] Fix `MultiInputTimeRangeField` section selection (#10922) @noraleonte
- [pickers] Refine `referenceDate` behavior in views (#10863) @LukasTy
- [pickers] Remove `components` and `componentsProps` props (#10700) @alexfauquette
- [l10n] Add Basque (eu) locale and improve Spanish (es-ES) locale (#10819) @lajtomekadimon
- [pickers] Add short weekdays token (#10988) @alexfauquette
#### `@mui/x-date-pickers-pro@7.0.0-alpha.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
Same changes as in `@mui/x-date-pickers@7.0.0-alpha.0`.
### Charts / `@mui/x-charts@7.0.0-alpha.0`
#### Breaking changes
Types for `slots` and `slotProps` have been renamed by removing the "Component" which is meaningless for charts.
Unless you imported those types, to create a wrapper, you should not be impacted by this breaking change.
Here is an example of the renaming for the `<ChartsTooltip />` component.
```diff
-ChartsTooltipSlotsComponent
+ChartsTooltipSlots
-ChartsTooltipSlotComponentProps
+ChartsTooltipSlotProps
```
- [charts] Add `<ChartsReferenceLine />` component (#10597) (#10946) @alexfauquette
- [charts] Improve properties JSDoc (#10931) (#10955) @alexfauquette
- [charts] Rename `slots` and `slotProps` types (#10875) @alexfauquette
### `@mui/x-codemod@7.0.0-alpha.0`
- [codemod] Add `v7.0.0/preset-safe` (#10973) @LukasTy
### Docs
- [docs] Add `@next` tag to the installation instructions (#10963) @MBilalShafi
- [docs] Document how to hide the legend (#10951) @alexfauquette
- [docs] Fix typo in the migration guide (#10972) @flaviendelangle
### Core
- [core] Adds migration docs for Charts, Pickers, and Tree View (#10926) @michelengelen
- [core] Bump monorepo (#10959) @LukasTy
- [core] Changed prettier branch value to next (#10917) @michelengelen
- [core] Fix GitHub title tag consistency @oliviertassinari
- [core] Fixed wrong package names in migration docs (#10953) @michelengelen
- [core] Merge `master` into `next` (#10929) @cherniavskii
- [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
- [license] Correctly throw errors (#10924) @oliviertassinari
## Older versions
Changes before 7.x are listed in our [changelog for older versions](https://github.com/mui/mui-x/blob/HEAD/changelogOld/).
-
+
```
- When the [Tree data](https://v7.mui.com/x/react-data-grid/tree-data/) feature is used, the grid role is now `role="treegrid"` instead of `role="grid"`.
- The Data Grid cells now have `role="gridcell"` instead of `role="cell"`.
- The buttons in toolbar composable components `GridToolbarColumnsButton`, `GridToolbarFilterButton`, `GridToolbarDensity`, and `GridToolbarExport` are now wrapped with a tooltip component and have a consistent interface. To override some props corresponding to the toolbar buttons or their corresponding tooltips, you can use the `slotProps` prop. Following is an example diff. See [Toolbar section](https://v7.mui.com/x/react-data-grid/components/#toolbar) for more details.
```diff
function CustomToolbar() {
return (
-
+
β
-
+
)
```
- Restructure the API of `useClearableField`
The `useClearableField` hook API has been simplified to now take a `props` parameter instead of a `fieldProps`, `InputProps`, `clearable`, `onClear`, `slots` and `slotProps` parameters.
You should now be able to directly pass the returned value from your field hook (for example `useDateField`) to `useClearableField`
```diff
const fieldResponse = useDateField(props);
-const { InputProps, onClear, clearable, slots, slotProps, ...otherFieldProps } = fieldResponse
-const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField({
- fieldProps: otherFieldProps,
- InputProps,
- clearable,
- onClear,
- slots,
- slotProps,
-});
-
- return