github mui/mui-x v7.0.0
on GitHub

latest releases: v7.22.2, v7.22.1, v7.22.0...
7 months ago

We're excited to announce the first v7 stable release! 🎉🚀

This is now the officially supported major version, where we'll keep rolling out new features, bug fixes, and improvements.
Migration guides are available with a complete list of the breaking changes:

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

  • 🚀 Improve the usage of custom viewRenderers on DateTimePicker (#12441) @LukasTy
  • ✨ Set focus on the focused Tree Item instead of the Tree View (#12226) @flaviendelangle
  • 🕹ī¸ Support controlled density for the Data Grid (#12332) @MBilalShafi
  • 🎁 Dynamic virtualization range for the Data Grid (#12353) @romgrk
  • 🐞 Bugfixes
  • 📚 Documentation improvements

Data Grid

Breaking changes

  • The density is a controlled prop now, if you were previously passing the density prop to the Data Grid, you will need to do one of the following:

    1. Move it to the initialState.density to initialize it. 
     <DataGrid
-  density="compact"
+  initialState={{ density: "compact" }}
 />
    1. Move it to the state and use onDensityChange callback to update the density prop accordingly for it to work as expected. 
    + const [density, setDensity] = React.useState<GridDensity>('compact');
 <DataGrid
-  density="compact"
+  density={density}
+  onDensityChange={(newDensity) => setDensity(newDensity)}
 />

  • The selector gridDensityValueSelector was removed, use the gridDensitySelector instead.

  • The props rowBuffer and columnBuffer were renamed to rowBufferPx and columnBufferPx.
    Their value is now a pixel value rather than a number of items. Their default value is now 150.

  • The props rowThreshold and columnThreshold have been removed.
    If you had the rowThreshold prop set to 0 to force new rows to be rendered more often – this is no longer necessary.

@mui/x-data-grid@7.0.0

@mui/x-data-grid-pro@7.0.0 pro

Same changes as in @mui/x-data-grid@7.0.0.

@mui/x-data-grid-premium@7.0.0 premium

Same changes as in @mui/x-data-grid-pro@7.0.0, plus:

Date and Time Pickers

Breaking changes

  • The DesktopDateTimePicker view rendering has been optimized by using the same technique as for DesktopDateTimeRangePicker.
    • The dateTimeViewRenderers have been removed in favor of reusing existing time view renderers (renderTimeViewClock, renderDigitalClockTimeView and renderMultiSectionDigitalClockTimeView) and date view renderer (renderDateViewCalendar).
    • Passing renderTimeViewClock to time view renderers will no longer revert to the old behavior of rendering only date or time view.

@mui/x-date-pickers@7.0.0

@mui/x-date-pickers-pro@7.0.0 pro

Same changes as in @mui/x-date-pickers@7.0.0, plus:

Charts

@mui/x-charts@7.0.0

  • [charts] Fix small typo in CartesianContextProvider (#12461) @Janpot

Tree View

Breaking changes

  • The required nodeId prop used by the TreeItem has been renamed to itemId for consistency: 
 <TreeView>
-    <TreeItem label="Item 1" nodeId="one">
+    <TreeItem label="Item 1" itemId="one">
 </TreeView>

  • The focus is now applied to the Tree Item root element instead of the Tree View root element.

    This change will allow new features that require the focus to be on the Tree Item,
    like the drag and drop reordering of items.
    It also solves several issues with focus management,
    like the inability to scroll to the focused item when a lot of items are rendered.

    This will mostly impact how you write tests to interact with the Tree View:

    For example, if you were writing a test with react-testing-library, here is what the changes could look like: 

     it('test example on first item', () => {
-  const { getByRole } = render(
+  const { getAllByRole } = render(
     <SimpleTreeView>
       <TreeItem nodeId="one" />
       <TreeItem nodeId="two" />
    </SimpleTreeView>
   );

-  const tree = getByRole('tree');
+  const firstTreeItem = getAllByRole('treeitem')[0];
   act(() => {
-    tree.focus();
+    firstTreeItem.focus();
   });
-  fireEvent.keyDown(tree, { key: 'ArrowDown' });
+  fireEvent.keyDown(firstTreeItem, { key: 'ArrowDown' });
 })

@mui/x-tree-view@7.0.0

@mui/x-codemod@7.0.0

Docs

Core

Check out latest releases or
releases around mui/mui-x v7.0.0

Don't miss a new mui-x release

NewReleases is sending notifications on new releases.

Get notifications