Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(deps): update dependency @mui/x-data-grid to v7 #659

Merged
merged 1 commit into from
Mar 22, 2024
Merged

fix(deps): update dependency @mui/x-data-grid to v7 #659

merged 1 commit into from
Mar 22, 2024

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Mar 22, 2024

Mend Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@mui/x-data-grid (source) 6.19.8 -> 7.0.0 age adoption passing confidence

Release Notes

mui/mui-x (@​mui/x-data-grid)

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 ✨:

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
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

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 is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update 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.

@keiko233 keiko233 merged commit f16e5c0 into main Mar 22, 2024
3 checks passed
@renovate renovate bot deleted the renovate/major-material-ui-monorepo branch March 22, 2024 13:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
1 participant
@keiko233