Skip to content

Releases: mui/mui-x

v7.0.0

22 Mar 11:44
@noraleonte noraleonte
v7.0.0
2e5fbb3
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v7.0.0

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]

@mui/[email protected] pro

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

@mui/[email protected] premium

Same changes as in @mui/[email protected], 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/[email protected]

@mui/[email protected] pro

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

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]

@mui/[email protected]

Docs

Core

Contributors

joserodolfofreitas, romgrk, and 10 other contributors
Assets 2
Loading

v6.19.8

20 Mar 14:48
@noraleonte noraleonte
v6.19.8
26ae333
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v6.19.8

We'd like to offer a big thanks to the 3 contributors who made this release possible.

Data Grid

@mui/[email protected]

@mui/[email protected] pro

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

@mui/[email protected] premium

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

Docs

Contributors

cherniavskii, g1mishra, and sai6855
Assets 2
Loading

v7.0.0-beta.7

14 Mar 15:05
@alexfauquette alexfauquette
v7.0.0-beta.7
e5e95f3
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v7.0.0-beta.7 Pre-release
Pre-release

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

  • 🦥 The Lazy loading feature is now stable and the lazyLoading feature flag was removed from the experimentalFeatures prop.
  • 🌍 Improve Japanese (ja-JP) locale for the Data Grid
  • 🐞 Bugfixes
  • 📚 Documentation improvements

Data Grid

Breaking changes

  • The columnHeader--showColumnBorder class was replaced by columnHeader--withLeftBorder and columnHeader--withRightBorder.
  • The columnHeadersInner, columnHeadersInner--scrollable, and columnHeaderDropZone classes were removed since the inner wrapper was removed in our effort to simplify the DOM structure and improve accessibility.
  • The pinnedColumnHeaders, pinnedColumnHeaders--left, and pinnedColumnHeaders--right classes were removed along with the element they were applied to.
    The pinned column headers now use position: 'sticky' and are rendered in the same row element as the regular column headers.

@mui/[email protected]

@mui/[email protected] pro

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

  • [DataGridPro] Add inputRef to the props passed to colDef.renderHeaderFilter (#12328) @vovarudomanenko
  • [DataGridPro] Fix filler rendered for no reason when there are pinned columns (#12440) @cherniavskii
  • [DataGridPro] Make lazy loading feature stable (#12421) @cherniavskii
  • [DataGridPro] Render pinned and non-pinned column headers in one row (#12376) @cherniavskii

@mui/[email protected] premium

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

  • [DataGridPremium] Fix auto-scroll not working when selecting cell range (#12267) @cherniavskii

Date and Time Pickers

@mui/[email protected]

@mui/[email protected] pro

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

Charts

@mui/[email protected]

Tree View

Breaking changes

The onNodeFocus callback has been renamed to onItemFocus for consistency:

 <SimpleTreeView
-  onNodeFocus={onNodeFocus}
+  onItemFocus={onItemFocus}
 />

@mui/[email protected]

Docs

Core

Contributors

romgrk, oliviertassinari, and 9 other contributors
Assets 2
Loading

v6.19.7

14 Mar 11:39
@alexfauquette alexfauquette
v6.19.7
b054297
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v6.19.7

We'd like to offer a big thanks to @LukasTy who made this release possible.

Date Pickers

@mui/[email protected]

  • [pickers] Keep the existing time when looking for closest enabled date (#12410) @LukasTy

@mui/[email protected] pro

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

Docs

Contributors

LukasTy
Assets 2
Loading

v7.0.0-beta.6

08 Mar 15:57
@flaviendelangle flaviendelangle
v7.0.0-beta.6
f96c319
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v7.0.0-beta.6 Pre-release
Pre-release

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

  • 🐞 Bugfixes
  • 📚 Documentation improvements

Data Grid

@mui/[email protected]

@mui/[email protected] pro

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

  • [DataGridPro] Rework onRowsScrollEnd to use IntersectionObserver (#8672) @DanailH

@mui/[email protected] premium

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

Charts

@mui/[email protected]

Tree View

Breaking changes

  • The component used to animate the item children is now defined as a slot on the TreeItem component.

    If you were passing a TransitionComponent or TransitionProps to your TreeItem component,
    you need to use the new groupTransition slot on this component:

     <SimpleTreeView>
    <TreeItem
      nodeId="1"
      label="Node 1"
-     TransitionComponent={Fade}
+     slots={{ groupTransition: Fade }}
-     TransitionProps={{ timeout: 600 }}
+     slotProps={{ groupTransition: { timeout: 600 } }}
    />
  </SimpleTreeView>

  • The group class of the TreeItem component has been renamed to groupTransition to match with its new slot name.

     const StyledTreeItem = styled(TreeItem)({
-  [`& .${treeItemClasses.group}`]: {
+  [`& .${treeItemClasses.groupTransition}`]: {
    marginLeft: 20,
  },
 });

@mui/[email protected]

Docs

Core

Contributors

romgrk, flaviendelangle, and 6 other contributors
Assets 2
Loading

v7.0.0-beta.5

02 Mar 08:23
@romgrk romgrk
v7.0.0-beta.5
f9f60fd
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v7.0.0-beta.5 Pre-release
Pre-release

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

  • 🎁 Add getSortComparator for more advanced sorting behaviors (#12215) @cherniavskii
  • 🚀 Add use client directive to the Grid packages (#11803) @MBilalShafi
  • 🌍 Improve Korean (ko-KR) and Chinese (zh-CN) locales on the Pickers
  • 🐞 Bugfixes
  • 📚 Documentation improvements

Data Grid

@mui/[email protected]

  • [DataGrid] Add getSortComparator for more advanced sorting behaviors (#12215) @cherniavskii
  • [DataGrid] Add use client directive to the Grid packages (#11803) @MBilalShafi
  • [DataGrid] Fix disableResetButton and disableShowHideToggle flags to not exclude each other (#12169) @adyry
  • [DataGrid] Fix cell range classnames (#12230) @romgrk
  • [DataGrid] Fix wrong offset for right-pinned columns when toggling dark/light modes (#12233) @cherniavskii
  • [DataGrid] Improve row virtualization and rendering performance (#12247) @romgrk
  • [DataGrid] Improve performance by removing querySelector call (#12229) @romgrk
  • [DataGrid] Fix onColumnWidthChange called before autosize affects column width (#12140) @shaharyar-shamshi
  • [DataGrid] Fix boolean "is" filter (#12117) @shaharyar-shamshi
  • [DataGrid] Fix upsertFilterItems removing filters that are not part of the update (#11954) @gitstart
  • [DataGrid] Render scrollbars only if there is scroll (#12265) @cherniavskii

@mui/[email protected] pro

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

@mui/[email protected] premium

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

  • [DataGridPremium] Make clipboard copy respect the sorting during cell selection (#12235) @MBilalShafi

Date Pickers

@mui/[email protected]

@mui/[email protected] pro

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

Charts / @mui/[email protected]

Tree View / @mui/[email protected]

Docs

Core

Contributors

Luzi, romgrk, and 13 other contributors
Assets 2
Loading

v6.19.6

02 Mar 08:23
@romgrk romgrk
v6.19.6
9fdf893
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v6.19.6

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

  • 🌍 Improve Korean (ko-KR) and Chinese (zh-CN) locales on the Pickers
  • 🐞 Bugfixes
  • 📚 Documentation improvements

Data Grid

@mui/[email protected]

  • [DataGrid] Fix error when existing rows are passed to replaceRows (@martijn-basesoft)

@mui/[email protected] pro

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

@mui/[email protected] premium

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

  • [DataGridPremium] Make clipboard copy respect the sorting during cell selection (#12255) @MBilalShafi

Date Pickers

@mui/[email protected]

@mui/[email protected] pro

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

Docs

  • [docs] Update lazy loading demo to show skeleton rows during initial rows fetch (#12062) @cherniavskii

Contributors

Luzi, martijn-basesoft, and 3 other contributors
Assets 2
Loading

v7.0.0-beta.4

23 Feb 12:44
@MBilalShafi MBilalShafi
v7.0.0-beta.4
1dd8f58
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v7.0.0-beta.4 Pre-release
Pre-release

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

  • 🎁 Introduce a new DOM structure for the field components that provides a better accessibility
  • 🚀 Simplify Data Grid DOM structure for improved performance (#12013) @romgrk
  • 🕥 The support for IE11 has been removed (#12151) @flaviendelangle
  • 🐞 Bugfixes
  • 📚 Documentation improvements

Breaking changes

  • The support for IE11 has been removed from all MUI X packages. The legacy bundle that used to support old browsers like IE11 is no longer included.

Data Grid

Breaking changes

  • The cell inner wrapper .MuiDataGrid-cellContent has been removed, use .MuiDataGrid-cell to style the cells.

@mui/[email protected]

@mui/[email protected] pro

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

@mui/[email protected] premium

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

Date Pickers

Breaking changes

  • The selectedSections prop no longer accepts start and end indexes.
    When selecting several — but not all — sections, the field components were not behaving correctly, you can now only select one or all sections:

     <DateField
-  selectedSections={{ startIndex: 0, endIndex: 0 }}
+  selectedSections={0}

   // If the field has 3 sections
-  selectedSections={{ startIndex: 0, endIndex: 2 }}
+  selectedSections="all"
 />

  • The headless field hooks (e.g.: useDateField) now returns a new prop called enableAccessibleFieldDOMStructure.
    This property is utilized to determine whether the anticipated UI is constructed using an accessible DOM structure. Learn more about this new accessible DOM structure.

When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove enableAccessibleFieldDOMStructure before it is passed to the DOM:

  function MyCustomTextField(props) {
    const {
+     // Should be ignored
+     enableAccessibleFieldDOMStructure,
      // ... rest of the props you are using
    } = props;

    return ( /* Some UI to edit the date */ )
  }

  function MyCustomField(props) {
    const fieldResponse = useDateField<Dayjs, false, typeof textFieldProps>({
      ...props,
+     // If you only support one DOM structure, we advise you to hardcode it here to avoid unwanted switches in your application
+     enableAccessibleFieldDOMStructure: false,
    });

    return <MyCustomTextField ref={ref} {...fieldResponse} />;
  }

  function App() {
    return <DatePicker slots={{ field: MyCustomField }} />;
  }

  • The following internal types were exported by mistake and have been removed from the public API:

    • UseDateFieldDefaultizedProps
    • UseTimeFieldDefaultizedProps
    • UseDateTimeFieldDefaultizedProps
    • UseSingleInputDateRangeFieldComponentProps
    • UseSingleInputTimeRangeFieldComponentProps
    • UseSingleInputDateTimeRangeFieldComponentProps

@mui/[email protected]

@mui/[email protected] pro

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

Charts / @mui/[email protected]

Breaking changes

These components are no longer exported from @mui/x-charts:

  • CartesianContextProvider
  • DrawingProvider

@mui/[email protected]

Tree View / @mui/[email protected]

Docs

Core

Contributors

romgrk, gitstart, and 8 other contributors
Assets 2
Loading

v6.19.5

23 Feb 10:04
@MBilalShafi MBilalShafi
v6.19.5
cbd69c7
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v6.19.5

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

  • 🐞 Bugfixes
  • 📚 Documentation improvements

Data Grid

@mui/[email protected]

@mui/[email protected] pro

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

@mui/[email protected] premium

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

Date Pickers

@mui/[email protected]

  • [pickers] Fix referenceDate day calendar focus (#12136) @LukasTy
  • [pickers] Fix styling props propagation to DateTimePickerTabs (#12131) @LukasTy

@mui/[email protected] pro

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

Charts / @mui/[email protected]

Docs

Core

Contributors

oliviertassinari, flaviendelangle, and 5 other contributors
Assets 2
Loading

v7.0.0-beta.3

16 Feb 14:04
@MBilalShafi MBilalShafi
v7.0.0-beta.3
a939cd6
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v7.0.0-beta.3 Pre-release
Pre-release

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

Data Grid

Breaking changes

  • The rowEditCommit event and the related prop onRowEditCommit was removed. The processRowUpdate prop can be used in place.

@mui/[email protected]

@mui/[email protected] pro

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

@mui/[email protected] premium

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

Charts / @mui/[email protected]

Tree View / @mui/[email protected]

Docs

Core

Contributors

StylesTrip, romgrk, and 7 other contributors
Assets 2
Loading