We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
-
⌚️ New components to edit date and time with keyboard—without using any modal or dropdown UI.
Please check out our documentation to discover those new components.DateField
to edit dateTimeField
to edit timeDateTimeField
to edit date and timeMultiInputDateRangeField
/SingleInputDateRangeField
to edit date rangeMultiInputTimeRangeField
to edit time range with two inputsMultiInputDateTimeRangeField
to edit date and time range with two inputs
⚠️ These components are unstable.
They might receive breaking changes on their props to have the best components possible by the time of the stable release. -
📝 Allow to limit to one filter per column for
DataGridPro
andDataGridPremium
(#6333) @MBilalShafi -
📚 New page describing the validation props on each picker (#6064) @flaviendelangle
-
📚 Documentation improvements
-
🐞 Bugfixes
@mui/x-data-grid@v6.0.0-alpha.3
/ @mui/x-data-grid-pro@v6.0.0-alpha.3
/ @mui/x-data-grid-premium@v6.0.0-alpha.3
Breaking changes
-
[DataGrid] Remove legacy editing API
The editing API that is enabled by default was replaced with a new API that contains better support for server-side persistence, validation and customization. This new editing feature was already available in v5 under the
newEditingApi
experimental flag. In v6, this flag can be removed.<DataGrid - experimentalFeatures={{ newEditingApi: true }} />
For users that didn't migrate to the new editing API in v5, additional work may be needed because the new API is not equivalent to the legacy API. Although, some migration steps are available to help in this task.
- The
editCellPropsChange
event was removed. If you still need it please file a new issue so we can propose an alternative. - The
cellEditCommit
event was removed and theprocessRowUpdate
prop can be used in place. More information, check the docs section about the topic. - The
editRowsModel
andonEditRowsModelChange
props were removed. ThecellModesModel
orrowModesModel
props can be used to achieve the same goal. - The following API methods were removed:
- Use
apiRef.current.stopCellEditMode
to replaceapiRef.current.commitCellChange
- Use
apiRef.current.startCellEditMode
to replaceapiRef.current.setCellMode(id, field, 'edit')
- Use
apiRef.current.stopRowEditMode
to replaceapiRef.current.commitRowChange
- Use
apiRef.current.startRowMode
to replaceapiRef.current.setRowMode(id, 'edit')
- Use the
cellModesModel
orrowModesModel
props to replaceapiRef.current.setEditRowsModel
- Use
- The
Changes
- [DataGrid] Fix start edit mode with printable character in React 18 (#6257) @m4theushw
- [DataGrid] Remove legacy editing API (#6016) @m4theushw
- [DataGrid] Simplify
useGridApiContext
anduseGridApiRef
type overrides (#6423) @cherniavskii - [DataGrid] Use generics instead of verbose state overrides (#6409) @cherniavskii
- [DataGridPro] Allow to limit to one filter per column (#6333) @MBilalShafi
@mui/x-date-pickers@v6.0.0-alpha.3
/ @mui/x-date-pickers-pro@v6.0.0-alpha.3
Breaking changes
-
All the props used by the mobile and desktop wrappers to override components or components' props have been replaced by component slots. You can find more information about this pattern in the MUI Base documentation.
Some of the names have also been prefixed by
desktop
when it was unclear that the behavior was only applied on the desktop version of the pickers (or the responsive version when used on a desktop).The
DialogProps
prop has been replaced by adialog
component props slot on responsive and mobile pickers:// Same on MobileDatePicker, DateTimePicker, MobileDateTimePicker, // TimePicker, MobileTimePicker, DateRangePicker and MobileDateRangePicker. <DatePicker - DialogProps={{ backgroundColor: 'red' }} + componentsProps={{ dialog: { backgroundColor: 'red }}} />
The
PaperProps
prop has been replaced by adesktopPaper
component props slot on all responsive and desktop pickers:// Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker, // TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker. <DatePicker - PaperProps={{ backgroundColor: 'red' }} + componentsProps={{ desktopPaper: { backgroundColor: 'red }}} />
The
PopperProps
prop has been replaced by apopper
component props slot on all responsive and desktop pickers:// Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker, // TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker. <DatePicker - PopperProps={{ onClick: handleClick }} + componentsProps={{ popper: { onClick: handleClick }}} />
The
TransitionComponent
prop has been replaced by aDesktopTransition
component slot on all responsive and desktop pickers:// Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker, // TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker. <DatePicker - TransitionComponent={Fade} + components={{ DesktopTransition: Fade }} />
The
TrapFocusProps
prop has been replaced by adesktopTrapFocus
component props slot on all responsive and desktop pickers:// Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker, // TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker. <DatePicker - TrapFocusProps={{ isEnabled: () => false }} + componentsProps={{ desktopTrapFocus: { isEnabled: () => false }}} />
-
The view components allowing to pick a date or parts of a date without an input have been renamed to better fit their usage:
-<CalendarPicker {...props} /> +<DateCalendar {...props} />
-<DayPicker {...props} /> +<DayCalendar {...props} />
-<CalendarPickerSkeleton {...props} /> +<DayCalendarSkeleton {...props} />
-<MonthPicker {...props} /> +<MonthCalendar {...props} />
-<YearPicker {...props} /> +<YearCalendar {...props} />
-
Component names in the theme have changed as well:
-MuiCalendarPicker: { +MuiDateCalendar: {
-MuiDayPicker: { +MuiDayCalendar: {
-MuiCalendarPickerSkeleton: { +MuiDayCalendarSkeleton: {
-MuiMonthPicker: { +MuiMonthCalendar: {
-MuiYearPicker: { +MuiYearCalendar: {
Changes
- [DatePicker] Allows to fix the number of week displayed (#6299) @alexfauquette
- [DateRangePicker] Fix calendar day outside of month layout shifting on hover (#6448) @alexfauquette
- [fields] New components:
MultiInputDateTimeRangePicker
andMultiInputTimeRangePicker
(#6392) @alexfauquette - [fields] Prepare the field exports for the public release (#6467) @flaviendelangle
- [fields] Support paste in single section (#6422) @alexfauquette
- [pickers] Add field placeholders to the locale (#6337) @flaviendelangle
- [pickers] Do not use
Partial
forcomponents
andcomponentsProps
props (#6463) @flaviendelangle - [pickers] New component:
DateRangeCalendar
(#6416) @flaviendelangle - [pickers] Replace the
Picker
prefix in the view component byCalendar
(eg:MonthPicker
=>MonthCalendar
) (#6389) @flaviendelangle - [pickers] Support pasting on fields (#6364) @flaviendelangle
- [pickers] Use slots in the mobile and desktop wrappers instead of
XXXComponent
andXXXProps
(#6381) @flaviendelangle
Docs
- [docs] Add migration to DataGrid v6 page (#6235) @m4theushw
- [docs] Create first publishable version of the field doc (#6323) @flaviendelangle
- [docs] Fix trailing spaces in the readme @oliviertassinari
- [docs] New page for the pickers: Validation (#6064) @flaviendelangle
- [docs] Organize migration pages (#6480) @flaviendelangle
Core
- [core] Add CodeQL workflow (#6387) @DanailH
- [core] Add missing breaking change to the changelog (#6471) @flaviendelangle
- [core] Fix playground structure (#6466) @LukasTy
- [core] Fix tests for pasting on fields (#6465) @flaviendelangle
- [core] Remove absolute link (#6420) @flaviendelangle
- [core] Remove unused
react-text-mask
package (#6408) @LukasTy - [core] Send explicit warning when dayjs locale is not found (#6424) @alexfauquette
- [core] Test validation on textfield and date views (#6265) @alexfauquette
- [test] Sync comment with monorepo @oliviertassinari