Skip to content

Releases: mui/mui-x

v6.19.9

05 Apr 08:19
@LukasTy LukasTy
v6.19.9
658dc34
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.9

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

  • 🐞 Bugfixes
  • 📚 Documentation improvements

Data Grid

@mui/x-data-grid@6.19.9

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

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

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

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

Date Pickers

@mui/x-date-pickers@6.19.9

No changes.

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

  • [DateRangePicker] Fix selection behavior with single input field when readOnly (#12605) @LukasTy

Docs

Core

Contributors

LukasTy, MBilalShafi, and 2 other contributors
Assets 2

v7.1.0

28 Mar 16:58
@michelengelen michelengelen
v7.1.0
91c4e2c
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.1.0

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

  • 🚀 Add resizeThrottleMs prop (#12556) @romgrk
  • 🌍 Improve Chinese (Hong Kong) (zh-HK) and Italian (it-IT) locale on the Pickers
  • 🐞 Bugfixes
  • 📚 Documentation improvements

Data Grid

@mui/x-data-grid@7.1.0

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

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

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

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

Date and Time Pickers

@mui/x-date-pickers@7.1.0

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

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

  • [DateRangePicker] Fix selection behavior with single input field when readOnly (#12593) @LukasTy

Charts

@mui/x-charts@7.1.0

Tree View

@mui/x-tree-view@7.1.0

  • [TreeView] Do not use outdated version of the state to compute new label first char in RichTreeView (#12512) @flaviendelangle

Docs

Core

Contributors

romgrk, oliviertassinari, and 9 other contributors
Assets 2

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

Contributors

joserodolfofreitas, romgrk, and 10 other contributors
Assets 2

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/x-data-grid@6.19.8

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

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

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

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

Docs

Contributors

cherniavskii, g1mishra, and sai6855
Assets 2

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/x-data-grid@7.0.0-beta.7

@mui/x-data-grid-pro@7.0.0-beta.7 pro

Same changes as in @mui/x-data-grid@7.0.0-beta.7, 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/x-data-grid-premium@7.0.0-beta.7 premium

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

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

Date and Time Pickers

@mui/x-date-pickers@7.0.0-beta.7

@mui/x-date-pickers-pro@7.0.0-beta.7 pro

Same changes as in @mui/x-date-pickers@7.0.0-beta.7.

Charts

@mui/x-charts@7.0.0-beta.7

Tree View

Breaking changes

The onNodeFocus callback has been renamed to onItemFocus for consistency:

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

@mui/x-tree-view@7.0.0-beta.7

Docs

Core

Contributors

romgrk, oliviertassinari, and 9 other contributors
Assets 2

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/x-date-pickers@6.19.7

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

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

Same changes as in @mui/x-date-pickers@6.19.7.

Docs

Contributors

LukasTy
Assets 2

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/x-data-grid@7.0.0-beta.6

@mui/x-data-grid-pro@7.0.0-beta.6 pro

Same changes as in @mui/x-data-grid@7.0.0-beta.6, plus:

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

@mui/x-data-grid-premium@7.0.0-beta.6 premium

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

Charts

@mui/x-charts@7.0.0-beta.6

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/x-tree-view@7.0.0-beta.6

Docs

Core

Contributors

romgrk, flaviendelangle, and 6 other contributors
Assets 2

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/x-data-grid@7.0.0-beta.5

  • [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/x-data-grid-pro@7.0.0-beta.5 pro

Same changes as in @mui/x-data-grid@7.0.0-beta.5, plus:

@mui/x-data-grid-premium@7.0.0-beta.5 premium

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

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

Date Pickers

@mui/x-date-pickers@7.0.0-beta.5

@mui/x-date-pickers-pro@7.0.0-beta.5 pro

Same changes as in @mui/x-date-pickers@7.0.0-beta.5.

Charts / @mui/x-charts@7.0.0-beta.5

Tree View / @mui/x-tree-view@7.0.0-beta.5

Docs

Core

Contributors

Luzi, romgrk, and 13 other contributors
Assets 2

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/x-data-grid@6.19.6

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

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

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

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

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

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

Date Pickers

@mui/x-date-pickers@6.19.6

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

Same changes as in @mui/x-date-pickers@6.19.6.

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

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/x-data-grid@7.0.0-beta.4

@mui/x-data-grid-pro@7.0.0-beta.4 pro

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

@mui/x-data-grid-premium@7.0.0-beta.4 premium

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

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/x-date-pickers@7.0.0-beta.4

@mui/x-date-pickers-pro@7.0.0-beta.4 pro

Same changes as in @mui/x-date-pickers@7.0.0-beta.4.

Charts / @mui/x-charts@7.0.0-beta.4

Breaking changes

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

  • CartesianContextProvider
  • DrawingProvider

@mui/x-charts@7.0.0-beta.4

Tree View / @mui/x-tree-view@7.0.0-beta.4

Docs

Core

Contributors

romgrk, gitstart, and 8 other contributors
Assets 2