Skip to content

chore(deps): update dependency @mui/x-date-pickers to v7

BIWG Bot requested to merge renovate/major-material-ui-monorepo into main

This MR contains the following updates:

Package Type Update Change
@mui/x-date-pickers (source) peerDependencies major ^6.9.1 -> ^6.9.1 || ^7.0.0
@mui/x-date-pickers (source) devDependencies major 6.19.8 -> 7.0.0

Release Notes

mui/mui-x (@​mui/x-date-pickers)

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 - "every weekend" (UTC), Automerge - At any time (no schedule defined).

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

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

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

  • If you want to rebase/retry this MR, check this box

This MR has been generated by Renovate Bot.

Edited by BIWG Bot

Merge request reports