Skip to content

Releases: mui/mui-x

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

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

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

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

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

Date Pickers

@mui/x-date-pickers@6.19.5

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

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

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

Charts / @mui/x-charts@6.19.5

Docs

Core

Contributors

oliviertassinari, flaviendelangle, and 5 other contributors
Assets 2

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

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

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

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

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

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

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

Docs

Core

Contributors

StylesTrip, romgrk, and 7 other contributors
Assets 2

v7.0.0-beta.2

09 Feb 19:09
@DanailH DanailH
v7.0.0-beta.2
0625170
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.2 Pre-release
Pre-release

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

Data Grid

@mui/x-data-grid@v7.0.0-beta.2

@mui/x-data-grid-pro@v7.0.0-beta.2 pro

Same changes as in @mui/x-data-grid@v7.0.0-beta.2.

@mui/x-data-grid-premium@v7.0.0-beta.2 premium

Same changes as in @mui/x-data-grid-pro@v7.0.0-beta.2, plus:

Date Pickers

@mui/x-date-pickers@v7.0.0-beta.2

@mui/x-date-pickers-pro@v7.0.0-beta.2 pro

Same changes as in @mui/x-date-pickers@v7.0.0-beta.2.

Charts / @mui/x-charts@v7.0.0-beta.2

Tree View / @mui/x-tree-view@v7.0.0-beta.2

License

Breaking changes

  • If you're using the commercial license, you need to update the import path:

    -import { LicenseInfo } from '@mui/x-license-pro';
+import { LicenseInfo } from '@mui/x-license';

@mui/x-license@v7.0.0-beta.2

Docs

Core

Contributors

romgrk, Janpot, and 14 other contributors
Assets 2

v6.19.4

09 Feb 18:59
@DanailH DanailH
v6.19.4
b4f0545
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.4

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

  • 🌍 Improve Danish (da-DK) locale on the Data Grid (#11972) @ShahrazH
  • 🐞 Bugfixes
  • 📚 Documentation improvements

Data Grid

@mui/x-data-grid@v6.19.4

@mui/x-data-grid-pro@v6.19.4 pro

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

@mui/x-data-grid-premium@v6.19.4 premium

Same changes as in @mui/x-data-grid-pro@v6.19.4, plus:

Date Pickers

@mui/x-date-pickers@v6.19.4

  • [pickers] Avoid relying on locale in Luxon isWithinRange method (#11940) @LukasTy

@mui/x-date-pickers-pro@v6.19.4 pro

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

Charts / @mui/x-charts@v6.19.4

Docs

Contributors

romgrk, oliviertassinari, and 8 other contributors
Assets 2

v7.0.0-beta.1

01 Feb 20:53
@LukasTy LukasTy
v7.0.0-beta.1
ff52290
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.1 Pre-release
Pre-release

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 signature of GridColDef['valueGetter'] has been changed for performance reasons:

    - valueGetter: ({ value, row }) => value,
+ valueGetter: (value, row, column, apiRef) => value,

    The GridValueGetterParams interface has been removed:

    - const customValueGetter = (params: GridValueGetterParams) => params.row.budget;
+ const customValueGetter: GridValueGetterFn = (value, row) => row.budget;

  • The signature of GridColDef['valueFormatter'] has been changed for performance reasons:

    - valueFormatter: ({ value }) => value,
+ valueFormatter: (value, row, column, apiRef) => value,

    The GridValueFormatterParams interface has been removed:

    - const gridDateFormatter = ({ value, field, id }: GridValueFormatterParams<Date>) => value.toLocaleDateString();
+ const gridDateFormatter: GridValueFormatter = (value: Date) => value.toLocaleDateString();

  • The signature of GridColDef['valueSetter'] has been changed for performance reasons:

    - valueSetter: (params) => {
-   const [firstName, lastName] = params.value!.toString().split(' ');
-   return { ...params.row, firstName, lastName };
- }
+ valueSetter: (value, row) => {
+   const [firstName, lastName] = value!.toString().split(' ');
+   return { ...row, firstName, lastName };
+}

    The GridValueSetterParams interface has been removed:

    - const setFullName = (params: GridValueSetterParams) => {
-   const [firstName, lastName] = params.value!.toString().split(' ');
-   return { ...params.row, firstName, lastName };
- };
+ const setFullName: GridValueSetter<Row> = (value, row) => {
+   const [firstName, lastName] = value!.toString().split(' ');
+   return { ...row, firstName, lastName };
+ }

  • The signature of GridColDef['valueParser'] has been changed for performance reasons:

    - valueParser: (value, params: GridCellParams) => value.toLowerCase(),
+ valueParser: (value, row, column, apiRef) => value.toLowerCase(),

  • The signature of GridColDef['colSpan'] has been changed for performance reasons:

    - colSpan: ({ row, field, value }: GridCellParams) => (row.id === 'total' ? 2 : 1),
+ colSpan: (value, row, column, apiRef) => (row.id === 'total' ? 2 : 1),

  • The signature of GridColDef['pastedValueParser'] has been changed for performance reasons:

    - pastedValueParser: (value, params) => new Date(value),
+ pastedValueParser: (value, row, column, apiRef) => new Date(value),

  • The signature of GridColDef['groupingValueGetter'] has been changed for performance reasons:

    - groupingValueGetter: (params) => params.value.name,
+ groupingValueGetter: (value: { name: string }) => value.name,

@mui/x-data-grid@7.0.0-beta.1

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

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

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

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

Date Pickers

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

  • [TimePicker] Add missing toolbar classes descriptions (#11856) @LukasTy

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

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

Charts

Breaking changes

  • The line chart now have animation by default.
    You can disable it with skipAnimation prop.
    See animation documentation for more information.

  • Pie charts onClick get renamed onItemClick for consistency with other charts click callback.

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

Docs

Core

Contributors

joserodolfofreitas, oliviertassinari, and 11 other contributors
Assets 2

v6.19.3

01 Feb 15:31
@LukasTy LukasTy
v6.19.3
9ea4ff4
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.3

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

  • 🌍 Improve Hebrew (he-IL) locale (#11831) @danielmishan85
  • 🐞 Bugfixes
  • 📚 Documentation improvements

Data Grid

@mui/x-data-grid@6.19.3

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

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

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

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

Date Pickers

@mui/x-date-pickers@6.19.3

  • [TimePicker] Add missing toolbar classes descriptions (#11862) @LukasTy

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

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

Charts / @mui/x-charts@6.19.3

Docs

Contributors

joserodolfofreitas, oliviertassinari, and 4 other contributors
Assets 2

v7.0.0-beta.0

26 Jan 12:31
@noraleonte noraleonte
v7.0.0-beta.0
8fcf3e8
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.0 Pre-release
Pre-release

We are glad to announce MUI X v7 beta!
This version has several improvements, bug fixes, and exciting features 🎉.
We want to offer a big thanks to the 7 contributors who made this release possible ✨:

Data Grid

Breaking changes

  • The columns management component has been redesigned and the component was extracted from the ColumnsPanel which now only serves as a wrapper to display the component above the headers as a panel. As a result, a new slot columnsManagement and the related prop slotProps.columnsManagement have been introduced. The props corresponding to the columns management component which were previously passed to the prop slotProps.columnsPanel should now be passed to slotProps.columnsManagement. slotProps.columnsPanel could still be used to override props corresponding to the Panel component used in ColumnsPanel which uses Popper component under the hood.

     <DataGrid
  slotProps={{
-   columnsPanel: {
+   columnsManagement: {
      sort: 'asc',
      autoFocusSearchField: false,
    },
  }}
 />

  • Show all and Hide all buttons in the ColumnsPanel have been combined into one Show/Hide All toggle in the new columns management component. The related props disableShowAllButton and disableHideAllButton have been replaced with a new prop disableShowHideToggle.

     <DataGrid
-  disableShowAllButton
-  disableHideAllButton
+  disableShowHideToggle
 />

@mui/x-data-grid@7.0.0-beta.0

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

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

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

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

Date Pickers

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

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

Same changes as in @mui/x-date-pickers@7.0.0-beta.0, plus:

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

Docs

Core

Contributors

zenazn, Janpot, and 5 other contributors
Assets 2

v6.19.2

25 Jan 15:43
@noraleonte noraleonte
v6.19.2
a50b40e
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.2

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

  • 🚀 Apply the layout.tabs class to Tabs slot (@LukasTy) (#11782)
  • 🐞 Bugfixes

Date Pickers

@mui/x-date-pickers@6.19.2

  • [pickers] Apply the layout.tabs class to Tabs slot (@LukasTy) (#11782)

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

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

  • [DateRangePicker] Remove calendars prop on Mobile (@LukasTy) (#11771)

Data Grid

@mui/x-data-grid@6.19.2

  • [DataGrid] Fix support for tree with more than 50,000 children (@zenazn) (#11808)

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

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

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

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

Contributors

zenazn and LukasTy
Assets 2

v7.0.0-alpha.9

19 Jan 09:19
@michelengelen michelengelen
v7.0.0-alpha.9
447ab5f
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-alpha.9 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 Data Grid headers have been refactored to bring immense improvements to scrolling, state management, and overall performance of the grid.
  • ⚙️ The Data Grid disabled column-specific features like filtering, sorting, grouping, etc. could now be accessed programmatically. See the related docs section.
  • 🚀 Uplift the SimpleTreeView customization examples (#11424) @noraleonte
  • 🌍 Add Croatian (hr-HR), Portuguese (pt-PT), and Chinese (Hong Kong) (zh-HK) locales (#11668) on the Data Grid @BCaspari
  • 🐞 Bugfixes
  • 💔 Bump @mui/material peer dependency for all packages (#11692) @LukasTy
    The minimum required version of @mui/material is now 5.15.0.

Data Grid

Breaking changes

  • The ariaV7 experimental flag has been removed and the Data Grid now uses the improved accessibility implementation by default.
    If you were using the ariaV7 flag, you can remove it from the experimentalFeatures prop:

    -<DataGrid experimentalFeatures={{ ariaV7: true }} />
+<DataGrid />

    The most notable changes that might affect your application or tests are:

    • The role="grid" attribute along with related ARIA attributes are now applied to the inner div element instead of the root div element:

      -<div class="MuiDataGrid-root" role="grid" aria-colcount="5" aria-rowcount="101" aria-multiselectable="false">
+<div class="MuiDataGrid-root">
   <div class="MuiDataGrid-toolbarContainer"></div>
-    <div class="MuiDataGrid-main"></div>
+    <div class="MuiDataGrid-main" role="grid" aria-colcount="5" aria-rowcount="101" aria-multiselectable="false"></div>
   <div class="MuiDataGrid-footerContainer"></div>
 </div>

    • When the Tree data feature is used, the grid role is now role="treegrid" instead of role="grid".

    • The Data Grid cells now have role="gridcell" instead of role="cell".

    • The buttons in toolbar composable components GridToolbarColumnsButton, GridToolbarFilterButton, GridToolbarDensity, and GridToolbarExport are now wrapped with a tooltip component and have a consistent interface. To override some props corresponding to the toolbar buttons or their corresponding tooltips, you can use the slotProps prop. Following is an example diff. See Toolbar section for more details.

        function CustomToolbar() {
    return (
      <GridToolbarContainer>
      <GridToolbarColumnsButton />
      <GridToolbarFilterButton
  -     title="Custom filter" // 🛑 This was previously forwarded to the tooltip component
  +     slotProps={{ tooltip: { title: 'Custom filter' } }} // ✅ This is the correct way now
      />
      <GridToolbarDensitySelector
  -     variant="outlined"    // 🛑 This was previously forwarded to the button component
  +     slotProps={{ button: { variant: 'outlined' } }} // ✅ This is the correct way now
      />
      </GridToolbarContainer>
    );
  }

  • Column grouping is now enabled by default. The flag columnGrouping is no longer needed to be passed to the experimentalFeatures prop to enable it.

    -<DataGrid experimentalFeatures={{ columnGrouping: true }} />
+<DataGrid />

  • The column grouping API methods getColumnGroupPath and getAllGroupDetails are no longer prefixed with unstable_.

  • The column grouping selectors gridFocusColumnGroupHeaderSelector and gridTabIndexColumnGroupHeaderSelector are no longer prefixed with unstable_.

  • The disabled column specific features like hiding, sorting, filtering, pinning, row grouping, etc could now be controlled programmatically using initialState, respective controlled models, or the API object. See the related docs section.

@mui/x-data-grid@7.0.0-alpha.9

@mui/x-data-grid-pro@7.0.0-alpha.9 pro

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

  • [DataGridPro] Allow non-pinnable columns to be pinned programmatically (#11680) @MBilalShafi

@mui/x-data-grid-premium@7.0.0-alpha.9 premium

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

  • [DataGridPremium] Allow aggregation to be applied for non-aggregable columns (#11574) @MBilalShafi
  • [DataGridPremium] Allow programmatically grouping non-groupable columns (#11539) @MBilalShafi

Date Pickers

Breaking changes

  • The locales export has been removed from the root of the packages.
    If you were importing locales from the root, be sure to update it:

    -import { frFR } from '@mui/x-date-pickers';
+import { frFR } from '@mui/x-date-pickers/locales';

@mui/x-date-pickers@7.0.0-alpha.9

@mui/x-date-pickers-pro@7.0.0-alpha.9 pro

Same changes as in @mui/x-date-pickers@7.0.0-alpha.9.

Charts / @mui/x-charts@7.0.0-alpha.9

Tree View

Breaking changes

  • The expandIcon / defaultExpandIcon props, used to expand the children of a node (rendered when it is collapsed),
    is now defined as a slot both on the Tree View and the Tree Item components.

    If you were using the ChevronRight icon from @mui/icons-material,
    you can stop passing it to your component because it is now the default value:

    -import ChevronRightIcon from '@mui/icons-material/ChevronRight';

 <SimpleTreeView
-  defaultExpandIcon={<ChevronRightIcon />}
 >
   {items}
 </SimpleTreeView>

    If you were passing another icon to your Tree View component,
    you need to use the new expandIcon slot on this component:

     <SimpleTreeView
-  defaultExpandIcon={<MyCustomExpandIcon />}
+  slots={{ expandIcon: MyCustomExpandIcon }}
 >
   {items}
 </SimpleTreeView>

    If you were passing another icon to your Tree Item component,
    you need to use the new expandIcon slot on this component:

      <SimpleTreeView>
    <TreeItem
      nodeId="1"
      label="Node 1"
-     expandIcon={<MyCustomExpandIcon />}
+     slots={{ expandIcon: MyCustomExpandIcon }}
    />
  </SimpleTreeView>

  • The collapseIcon / defaultCollapseIcon props, used to collapse the children of a node (rendered when it is expanded),
    is now defined as a slot both on the Tree View and the Tree Item components.

    If you were using the ExpandMore icon from @mui/icons-material,
    you can stop passing it to your component because it is now the default value:

    - import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

  <SimpleTreeView
-   defaultCollapseIcon={<ExpandMoreIcon />}
  >
    {items}
  </SimpleTreeView>

    If you were passing another icon to your Tree View component,
    you need to use the new collapseIcon slot on this component:

      <SimpleTreeView
-   defaultCollapseIcon={<MyCustomCollapseIcon />}
+   slots={{ collapseIcon: MyCustomCollapseIcon }}
  >
    {items}
  </SimpleTreeView>

    If you were passing another icon to your Tree Item component,
    you need to use the new collapseIcon slot on this component:

      <SimpleTreeView>
    <TreeItem
      nodeId="1"
      label="Node 1"
-     collapseIcon={<MyCustomCollapseIcon />}
+     slots={{ collapseIcon: MyCustomCollapseIcon }}
    />
  </SimpleTreeView>

  • The useTreeItem hook has been renamed useTreeItemState.
    This will help create a new headless version of the TreeItem component based on a future useTreeItem hook.

    -import { TreeItem, useTreeItem } from '@mui/x-tree-view/TreeItem';
+import { TreeItem, useTreeItemState } from '@mui/x-tree-view/TreeItem';

 const CustomContent = React.forwardRef((props, ref) => {
-  const { disabled } = useTreeItem(props.nodeId);
+  const { disabled } = useTreeItemState(props.nodeId);

   // Render some UI
 });

 function App() {
   return (
   ...
Read more

Contributors

dhulme, romgrk, and 11 other contributors
Assets 2

v6.19.1

19 Jan 09:17
@michelengelen michelengelen
v6.19.1
187ca9f
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.1

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

  • 🌍 Add Croatian (hr-HR), Portuguese (pt-PT), and Chinese (Hong Kong) (zh-HK) locales (#11717) @BCaspari
  • 🐞 Bugfixes

Data Grid

@mui/x-data-grid@6.19.1

  • [l10n] Add Croatian (hr-HR), Portuguese (pt-PT), and Chinese (Hong Kong) (zh-HK) locales (#11717) @BCaspari

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

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

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

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

Charts / @mui/x-charts@6.19.1

Contributors

BCaspari and alexfauquette
Assets 2