Skip to content

v6.0.0 alpha.3

Pre-release
Pre-release

Choose a tag to compare

View all tags
@MBilalShafi MBilalShafi released this 14 Oct 06:18
· 2810 commits to next since this release
v6.0.0-alpha.3
9f70504
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.

We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:

@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 the processRowUpdate prop can be used in place. More information, check the docs section about the topic.
    • The editRowsModel and onEditRowsModelChange props were removed. The cellModesModel or rowModesModel props can be used to achieve the same goal.
    • The following API methods were removed:
      • Use apiRef.current.stopCellEditMode to replace apiRef.current.commitCellChange
      • Use apiRef.current.startCellEditMode to replace apiRef.current.setCellMode(id, field, 'edit')
      • Use apiRef.current.stopRowEditMode to replace apiRef.current.commitRowChange
      • Use apiRef.current.startRowMode to replace apiRef.current.setRowMode(id, 'edit')
      • Use the cellModesModel or rowModesModel props to replace apiRef.current.setEditRowsModel

Changes

@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 a dialog 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 a desktopPaper 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 a popper 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 a DesktopTransition 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 a desktopTrapFocus 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

Docs

Core

Contributors

oliviertassinari, flaviendelangle, and 6 other contributors
Assets 2
Loading