Skip to content

Releases: mui/mui-x

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
Verified
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/[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]

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

@mui/[email protected] pro

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

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/[email protected]

Docs

Core

Contributors

joserodolfofreitas, oliviertassinari, and 11 other contributors
Loading

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
Verified
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/[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]

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

@mui/[email protected] pro

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

Charts / @mui/[email protected]

Docs

Contributors

joserodolfofreitas, oliviertassinari, and 4 other contributors
Loading

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
Verified
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/[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]

@mui/[email protected] pro

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

Tree View / @mui/[email protected]

Docs

Core

Contributors

zenazn, Janpot, and 5 other contributors
Loading

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
Verified
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/[email protected]

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

@mui/[email protected] pro

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

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

Data Grid

@mui/[email protected]

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

@mui/[email protected] pro

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

@mui/[email protected] premium

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

Contributors

zenazn and LukasTy
Loading

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
Verified
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/[email protected]

@mui/[email protected] pro

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

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

@mui/[email protected] premium

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

@mui/[email protected] pro

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

Charts / @mui/[email protected]

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
Loading

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
Verified
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/[email protected]

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

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

Contributors

BCaspari and alexfauquette
Loading

v7.0.0-alpha.8

11 Jan 18:49
@alexfauquette alexfauquette
v7.0.0-alpha.8
a247004
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v7.0.0-alpha.8

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

  • ⏰ Support date-fns v3 (#11659) @LukasTy
    Pickers support both v2 and v3 of date-fns. For v3 use AdapterDateFnsV3. 
    // with date-fns v2.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import de from 'date-fns/locale/de';
    // with date-fns v3.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
import { de } from 'date-fns/locale/de';

Data Grid

Breaking changes

  • The import path for locales has been changed:

    -import { enUS } from '@mui/x-data-grid';
+import { enUS } from '@mui/x-data-grid/locales';

-import { enUS } from '@mui/x-data-grid-pro';
+import { enUS } from '@mui/x-data-grid-pro/locales';

-import { enUS } from '@mui/x-data-grid-premium';
+import { enUS } from '@mui/x-data-grid-premium/locales';

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

@mui/[email protected] pro

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

Tree View / @mui/[email protected]

Docs

Core

Contributors

oliviertassinari, flaviendelangle, and 4 other contributors
Loading

v6.19.0

11 Jan 16:50
@alexfauquette alexfauquette
v6.19.0
cc9dd37
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v6.19.0

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

  • ⏰ Support date-fns v3 (#11659) @LukasTy
    Pickers support both v2 and v3 of date-fns. For v3 use AdapterDateFnsV3. 
    // with date-fns v2.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import de from 'date-fns/locale/de';
    // with date-fns v3.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
import { de } from 'date-fns/locale/de';

Date Pickers

@mui/[email protected]

@mui/[email protected] pro

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

Docs

Contributors

oliviertassinari, LukasTy, and 3 other contributors
Loading

v7.0.0-alpha.7

05 Jan 16:32
@flaviendelangle flaviendelangle
v7.0.0-alpha.7
8153169
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v7.0.0-alpha.7 Pre-release
Pre-release

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

  • 🎁 New component to create a Tree View from a structured data source:

    You can now directly pass your data to the RichTreeView component instead of manually converting it into JSX TreeItem components:

    const ITEMS = [
  {
    id: 'node-1',
    label: 'Node 1',
    children: [
      { id: 'node-1-1', label: Node 1.1' },
      { id: 'node-1-2', label: Node 1.2' },
    ],
  },
  {
    id: 'node-2',
    label: 'Node 2',
  },
];

<RichTreeView
  items={MUI_X_PRODUCTS}
  defaultCollapseIcon={<ExpandMoreIcon />}
  defaultExpandIcon={<ChevronRightIcon />}
/>

  • 🌍 Improve Czech (cs-CZ) locale on the Data Grid

  • 🐞 Bugfixes

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]

@mui/[email protected] pro

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

Charts / @mui/[email protected]

Tree View

Breaking changes

  • The expansion props have been renamed to better describe their behaviors:

    Old name New name
    onNodeToggle onExpandedNodesChange
    expanded expandedNodes
    defaultExpanded defaultExpandedNodes 
      <TreeView
-   onNodeToggle={handleExpansionChange}
+   onExpandedNodesChange={handleExpansionChange}

-   expanded={expandedNodes}
+   expandedNodes={expandedNodes}

-   defaultExpanded={defaultExpandedNodes}
+   defaultExpandedNodes={defaultExpandedNodes}
  />

  • The selection props have been renamed to better describe their behaviors:

    Old name New name
    onNodeSelect onSelectedNodesChange
    selected selectedNodes
    defaultSelected defaultSelectedNodes 
      <TreeView
-   onNodeSelect={handleSelectionChange}
+   onSelectedNodesChange={handleSelectionChange}

-   selected={selectedNodes}
+   selectedNodes={selectedNodes}

-   defaultSelected={defaultSelectedNodes}
+   defaultSelectedNodes={defaultSelectedNodes}
  />

@mui/[email protected]

Docs

Core

Contributors

romgrk, oliviertassinari, and 6 other contributors
Loading

v6.18.7

05 Jan 16:25
@flaviendelangle flaviendelangle
v6.18.7
fa6b8ba
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v6.18.7

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

  • 🌍 Improve Czech (cs-CZ) locale on Data Grid (#11429) @wensiet
  • 🐞 Bugfixes

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]

@mui/[email protected] pro

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

Charts / @mui/[email protected]

Docs

Contributors

LukasTy, fdebef, and 3 other contributors
Loading