Bump MUI X to 7.0.0 (major) #3310

renovate · 2024-03-22T13:20:19Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@mui/x-charts (source)	`6.19.8` -> `7.0.0`
@mui/x-data-grid (source)	`6.19.8` -> `7.0.0`
@mui/x-data-grid-pro (source)	`6.19.8` -> `7.0.0`
@mui/x-date-pickers (source)	`6.19.8` -> `7.0.0`
@mui/x-date-pickers-pro (source)	`6.19.8` -> `7.0.0`
@mui/x-tree-view (source)	`6.17.0` -> `7.0.0`

Release Notes

mui/mui-x (@mui/x-charts)

`v7.0.0`

Compare Source

Mar 22, 2024

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/[email protected]`

[DataGrid] Allow to control the grid density (#12332) @MBilalShafi
[DataGrid] Dynamic virtualization range (#12353) @romgrk
[DataGrid] Fix ElementType usage (#12479) @cherniavskii
[DataGrid] Fix cell value formatting on copy (#12357) @sai6855
[DataGrid] Fix checkbox selection is keeping selection when filtering (#11751) @g1mishra
[DataGrid] Make rows an optional prop (#12478) @MBilalShafi

`@mui/[email protected]`

Same changes as in @mui/[email protected].

`@mui/[email protected]`

Same changes as in @mui/[email protected], plus:

[DataGridPremium] Add support for confirmation before clipboard paste (#12225) @cherniavskii
[DataGridPremium] Fix single grouping column sorting (#9679) @cherniavskii
[DataGridPremium] Fix boolean cell not rendered in group rows (#12492) @sai6855

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/[email protected]`

[fields] Allow to override the separator between the start and the end date in all range fields (#12174) @flaviendelangle
[fields] Support format without separator (#12489) @flaviendelangle
[pickers] Use renderer interceptor on DesktopDateTimePicker (#12441) @LukasTy

`@mui/[email protected]`

Same changes as in @mui/[email protected], plus:

[DateTimeRangePicker] Add component JSDoc (#12518) @LukasTy
[DateTimeRangePicker] Fix views behavior regression (#12529) @LukasTy

Charts

`@mui/[email protected]`

[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/[email protected]`

[TreeView] Rename nodeId to itemId (#12418) @noraleonte
[TreeView] Set focus on the focused Tree Item instead of the Tree View (#12226) @flaviendelangle
[TreeView] Update JSDoc of the ContentComponent prop to avoid using the word "node" (#12476) @flaviendelangle

`@mui/[email protected]`

[codemod] Add a codemod and update the grid migration guide (#12488) @MBilalShafi

Docs

[docs] Finalize migration guide (#12501) @noraleonte
[docs] Fix nested cells alignment in the popular features demo (#12450) @cherniavskii
[docs] Fix some Vale errors (#12469) @oliviertassinari
[docs] Remove mentions of pre release (#12513) @noraleonte
[docs] Update branch name and tags (#12498) @cherniavskii
[docs] Update links to v6 (#12496) @cherniavskii
[docs] Update links to v7 docs (#12500) @noraleonte
[docs] Update supported versions (#12508) @joserodolfofreitas
[docs] Update "What's new in MUI X" page #12527 @cherniavskii

Core

[core] Bump @mui/material peer dependency for all packages (#12516) @LukasTy
[core] Fix no-restricted-imports ESLint rule not working for Data Grid packages (#12477) @cherniavskii
[core] Lower the frequency of no-response action runs (#12491) @michaldudak
[core] Remove leftover legacy browserlistrc entry (#12415) @LukasTy
[core] Update NPM tag (#12511) @cherniavskii
[core] Update supported browsers (browserlistrc) (#12521) @LukasTy
[core] Use Circle CI context @oliviertassinari
[license] Fix grammar on expired license error message (#12460) @joserodolfofreitas

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.

If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

Janpot · 2024-03-27T15:21:10Z

Comment to keep track of issues while migrating (not all of these are directly related to the migration):

codemod is broken @mui/x-codemod v6.0.0/data-grid/preset-safe doesn't work with satisfies / Typescript >= v4.9 mui-x#10870

can't use GridValueGetter type without generic parameters

const myValueGetter: GridValueGetter = (value) => value
// type of value is "never"
// need to do 
const myValueGetter: GridValueGetter<any, any, any, any> = (value) => value

Not exporting types for NoRowsOverlayProps. Even if it doesn't take any significant props, it would be useful to have that encoded in a type.
```
// one has to do
type NoRowsOverlayProps = React.ComponentProps<typeof GridNoRowsOverlay>;
```

Type errors with slots that add extra properties:

function CustomNoRowsOverlay({ foo }: { foo: string }) {
  return <div>{foo}</div>
}

  // Type error: ... is missing the prop "foo" ...
  slots={{ noRowsOverlay: CustomNoRowsOverlay }}
  slotProps={{ noRowsOverlay: { foo: 'hello' } }}

testing multiple grids in a page used to be more ergonomic. One could locate a grid by role and drill down using that locator.

const grid1 = page.getByRole('grid').nth(3)
expect(grid1.getByText('some cell content')).toBeVisible()
// could do everything using grid1, ergonomic for reuse, no clashes with other page elements
grid1.getByRole('button', { name: 'Go to next page' }).click()

=>

const grid1 = page.getByRole('grid').nth(3)
expect(grid1.getByText('some cell content')).toBeVisible()
// now have to globally locate grid pagination
page.getByRole('button', { name: 'Go to next page' }).nth(3).click()

Did the padding on tree items change?
Small artifacts while rendering the grid. Likely related to https://twitter.com/olivtassinari/status/1774151441231364248

renovate · 2024-03-27T15:51:23Z

Edited/Blocked Notification

Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.

You can manually request rebase by checking the rebase/retry box above.

⚠ Warning: custom changes will be lost.

flaviendelangle · 2024-03-27T18:24:13Z

did the padding on tree items change?

@danilo-leal improved the default design in #11529

flaviendelangle · 2024-03-27T18:44:42Z

packages/toolpad-studio/src/toolpad/FunctionsEditor/index.tsx

-                    <TreeItem disabled nodeId="::loading::" label={<Skeleton />} />
-                    <TreeItem disabled nodeId="::loading::" label={<Skeleton />} />
-                    <TreeItem disabled nodeId="::loading::" label={<Skeleton />} />
+                    <TreeItem disabled itemId="::loading::" label={<Skeleton />} />


You don't have any issues rendering 3 items with the same ID?
This should crash or at least cause bugs

Looks like this code is part of an unreleased part of the ui behind a feature flag. It seems to crash indeed. I added unique ids.

romgrk · 2024-03-28T05:44:47Z

can't use GridValueGetter type without generic parameters

If you don't want to set all the template parameters, I think you can use const valueGetter: GridValueGetter = (value: string) => value.

Type errors with slots that add extra properties:

Unavoidable, we needed type-safety for our slots for the material-less datagrid. Keeping any would have made the API very hard to implement for non-material design systems, and wasn't resilient to breaking changes in slots. We recommend casting for custom props.

testing multiple grids in a page used to be more ergonomic. One could locate a grid by role and drill down using that locator.

You should select for .MuiDataGrid-root, the ARIA role needed to move for accessibility reasons and is now a bit lower in the tree.

renovate bot added the dependencies Update of dependencies label Mar 22, 2024

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 24, 2024

renovate bot force-pushed the renovate/major-mui-x branch 2 times, most recently from a0b278e to f835a82 Compare March 24, 2024 07:29

github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels Mar 24, 2024

Bump MUI X to 7.0.0

2b7ddc2

renovate bot force-pushed the renovate/major-mui-x branch from f835a82 to 2b7ddc2 Compare March 24, 2024 07:52

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 24, 2024

fixes

2890daa

lets go

cef2e2b

Janpot added 7 commits March 27, 2024 17:55

changes

ffca1b9

Update EditableTreeItem.tsx

c504d2e

Update EditableTreeItem.tsx

ff6d4b4

id column align

32ab65d

Update DataGrid.tsx

bcbe49e

more tereview tweaks

da79d43

egr

70d73d0

flaviendelangle reviewed Mar 27, 2024

View reviewed changes

Janpot added 5 commits March 28, 2024 09:09

yet

6a86ea3

frwfwr

2b28bdd

Update AppAuthorizationEditor.tsx

de2779a

Update EditableTreeItem.tsx

1f8e8ff

Merge branch 'master' into renovate/major-mui-x

62d872d

Janpot enabled auto-merge (squash) March 28, 2024 09:45

Janpot approved these changes Mar 28, 2024

View reviewed changes

Janpot merged commit 97df67b into master Mar 28, 2024
12 checks passed

Janpot deleted the renovate/major-mui-x branch March 28, 2024 09:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bump MUI X to 7.0.0 (major) #3310

Bump MUI X to 7.0.0 (major) #3310

renovate bot commented Mar 22, 2024

Janpot commented Mar 27, 2024 •

edited by oliviertassinari

Loading

renovate bot commented Mar 27, 2024

flaviendelangle commented Mar 27, 2024

flaviendelangle Mar 27, 2024

Janpot Mar 28, 2024

romgrk commented Mar 28, 2024

Bump MUI X to 7.0.0 (major) #3310

Bump MUI X to 7.0.0 (major) #3310

Conversation

renovate bot commented Mar 22, 2024

Release Notes

v7.0.0

Data Grid

Breaking changes

@mui/[email protected]

@mui/[email protected]

@mui/[email protected]

Date and Time Pickers

Breaking changes

@mui/[email protected]

@mui/[email protected]

Charts

@mui/[email protected]

Tree View

Breaking changes

@mui/[email protected]

@mui/[email protected]

Docs

Core

Configuration

Janpot commented Mar 27, 2024 • edited by oliviertassinari Loading

renovate bot commented Mar 27, 2024

Edited/Blocked Notification

flaviendelangle commented Mar 27, 2024

flaviendelangle Mar 27, 2024

Choose a reason for hiding this comment

Janpot Mar 28, 2024

Choose a reason for hiding this comment

romgrk commented Mar 28, 2024

`v7.0.0`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

Janpot commented Mar 27, 2024 •

edited by oliviertassinari

Loading