mui-x

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

• [DataGrid] Add support for dialogs in menu actions (#11937) @cherniavskii
• [DataGrid] Allow passing readonly arrays to pageSizeOptions prop (#11992) @pcorpet
• [DataGrid] Fix row reorder with cell selection (#11878) @PEsteves8
• [DataGrid] Replace eval with new Function (#11962) @cherniavskii
• [l10n] Improve Danish (da-DK) locale (#11972) @ShahrazH

@mui/[email protected]

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

@mui/[email protected]

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

• [DataGridPremium] Fix autosize grouping cell (#11990) @romgrk
• [DataGridPremium] Fix error after closing print export (#11889) @cherniavskii

Date Pickers

@mui/[email protected]

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

@mui/[email protected]

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

Charts / @mui/[email protected]

• [charts] Add reverse property to axes (#11959) @alexfauquette
• [charts] Allow series ids to be numbers (#11960) @alexfauquette
• [charts] Fix Proptypes error by supporting string values for axes (#11953) @alexfauquette

Docs

• [docs] Add a note about AdapterDateFnsV3 on the Getting Started page (#11987) @flaviendelangle
• [docs] Avoid the use of MUI Core @oliviertassinari
• [docs] Fix API links (#11930) @alexfauquette
• [docs] Fix ChartsTooltip typo (#11967) @thisisharsh7
• [docs] Refactor Localization documentation sections (#11997) @LukasTy
• [code] Simplify bug reproduction (#11932) @alexfauquette

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

• 🏃 Improve the filtering performance of the Data Grid by changing the GridColDef methods signatures (#11573) @cherniavskii

• 🎁 The Line Chart component now has animation by default (#11620) @alexfauquette

• 🚀 All charts have click handlers (#11411) @alexfauquette
  Test their respective documentation demonstrations to know more about the data format:

  • Scatter Chart
  • Line Chart
  • Bar Chart
  • Pie Chart

  Big thanks to @giladappsforce and @yaredtsy for their contribution on exploring this feature.

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]

• [DataGrid] Add toggleAllMode prop to the columnsManagement slot (#10794) @H999
• [DataGrid] Change GridColDef methods signatures (#11573) @cherniavskii
• [DataGrid] Fix row reorder with cell selection (#11783) @PEsteves8
• [DataGrid] Make columns management' casing consistent (#11858) @MBilalShafi
• [l10n] Improve Hebrew (he-IL) locale (#11788) @danielmishan85

@mui/[email protected]

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

@mui/[email protected]

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

Date Pickers

@mui/[email protected]

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

@mui/[email protected]

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]

• [charts] Add onClick support (#11411) @alexfauquette
• [charts] Add line animation (#11620) @alexfauquette
• [charts] Document how to modify color according to values (#11824) @alexfauquette
• [charts] Fix Tooltip crash with out of range lines (#11898) @alexfauquette

Docs

• [docs] Add a general uplift to the changelog page (#11396) @danilo-leal
• [docs] Do not reference the Tree View overview page in the API pages (#11826) @flaviendelangle
• [docs] Fix charts API links (#11832) @alexfauquette
• [docs] Improve Support page (#11556) @oliviertassinari
• [docs] Improve column visibility documentation (#11857) @MBilalShafi
• [docs] Polish header @oliviertassinari
• [docs] Sync support page with core @oliviertassinari
• [docs] Update whats new page with "v7 Beta blogpost" content (#11879) @joserodolfofreitas

Core

• [core] Rely on immutable ref when possible (#11847) @oliviertassinari
• [core] Bump monorepo (#11897) @alexfauquette

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]

• [l10n] Improve Hebrew (he-IL) locale (@danielmishan85) (#11831)

@mui/[email protected]

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

@mui/[email protected]

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

Date Pickers

@mui/[email protected]

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

@mui/[email protected]

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

Charts / @mui/[email protected]

• [charts] Document how to modify color according to values (#11854) @alexfauquette

Docs

• [docs] Add a general uplift to the whats new page (#11883) @danilo-leal
• [docs] Fix 404 (#11852) @alexfauquette
• [docs] Fix generation (#11825) @alexfauquette
• [docs] Fix docs:api when typo in slots typing (#11861) @alexfauquette
• [docs] Improve Support page (#11556) @oliviertassinari
• [docs] Sync support page with core @oliviertassinari
• [docs] These API don't exist in MUI X v6 @oliviertassinari
• [docs] Update whats new page with v7 Beta blogpost content (#11886) @joserodolfofreitas

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 ✨:

• 🚀 Release the Date Time Range Picker component (#9528) @LukasTy

• 🎁 New column management panel design for the Data Grid (#11770) @MBilalShafi

• 🐞 Bugfixes

• 📚 Documentation improvements

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]

• [DataGrid] Export GridColumnTypes interface for custom column types (#11742) @cherniavskii
• [DataGrid] Initialize apiRef early (#11792) @cherniavskii
• [DataGrid] New column management panel design (#11770) @MBilalShafi
• [DataGrid] Fix support for tree with more than 50,000 children (#11757) @zenazn

@mui/[email protected]

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

@mui/[email protected]

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

Date Pickers

@mui/[email protected]

• [pickers] Apply the layout.tabs class to Tabs slot (#11781) @LukasTy
• [pickers] Avoid deep imports (#11794) @LukasTy
• [pickers] Fields typing optimization (#11779) @LukasTy

@mui/[email protected]

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

• [pickers] Add DateTimeRangePicker component (#9528) @LukasTy
• [pickers] Add DateTimeRangePicker theme augmentation (#11814) @LukasTy
• [DateRangePicker] Remove calendars prop on Mobile (#11752) @LukasTy

Tree View / @mui/[email protected]

• [TreeView] Remove unused props from prop-types and typing (#11778) @flaviendelangle
• [TreeView] Throw an error when two items have the same id (#11715) @flaviendelangle

Docs

• [docs] Add contextValue to the headless tree view doc (#11705) @flaviendelangle
• [docs] Add section for the disableSelection prop (#11821) @flaviendelangle
• [docs] Fix brand name non-breaking space (#11758) @oliviertassinari
• [docs] Fix typo in Data Grid components page (#11775) @flaviendelangle
• [docs] Fix use of quote, should use callout (#11759) @oliviertassinari
• [docs] Improve error message for MUI Vale rule @oliviertassinari
• [docs] Include DateTimeRangePicker in relevant demos (#11815) @LukasTy
• [docs] Add recipe for sorting row groups by the number of child rows (#11164) @cherniavskii

Core

• [core] Cleanup script and alias setup (#11749) @LukasTy
• [core] Polish issue templates @oliviertassinari
• [code-infra] Update prettier and pretty-quick (#11735) @Janpot

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]

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]

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

@mui/[email protected]

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

7.0.0-alpha.9

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]

• [DataGrid] Allow to filter non-filterable columns programmatically (#11538) @MBilalShafi
• [DataGrid] Allow to programmatically sort unsortable columns (#11512) @MBilalShafi
• [DataGrid] Fix incorrect default value for filterModel.logicOperator (#11673) @MBilalShafi
• [DataGrid] Make column grouping feature stable (#11698) @MBilalShafi
• [DataGrid] Remove the ariaV7 experimental flag (#11428) @cherniavskii
• [DataGrid] Start the FAQ page (#11686) @MBilalShafi
• [DataGrid] Sticky headers (#10059) @romgrk
• [DataGrid] Wrap toolbar buttons with tooltip (#11357) @MBilalShafi
• [l10n] Add Croatian (hr-HR), Portuguese (pt-PT), and Chinese (Hong Kong) (zh-HK) locales (#11668) @BCaspari

@mui/[email protected]

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

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

@mui/[email protected]

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]

• [fields] Make PickersTextField and its dependencies public (#11581) @flaviendelangle
• [fields] Support farsi digits (#11639) @flaviendelangle
• [pickers] Fix AdapterLuxon getWeekNumber behavior (#11697) @LukasTy
• [pickers] Stop root exporting locales (#11612) @LukasTy

@mui/[email protected]

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

Charts / @mui/[email protected]

• [charts] Do not propagate innerRadius and outerRadius to the DOM (#11689) @alexfauquette
• [charts] Fix default stackOffset for LineChart (#11647) @alexfauquette
• [charts] Remove a TS ignore (#11688) @alexfauquette

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 (
       <SimpleTreeView>
         <TreeItem ContentComponent={CustomContent} />
       </SimpleTreeView>
     )
   }
  

• The parentIcon prop has been removed from the Tree View components.

  If you were passing an icon to your Tree View component,
  you can achieve the same behavior
  by passing the same icon to both the collapseIcon and the expandIcon slots on this component:

    <SimpleTreeView
  -   defaultParentIcon={<MyCustomParentIcon />}
  +   slots={{ collapseIcon: MyCustomParentIcon, expandIcon: MyCustomParentIcon }}
    >
      {items}
    </SimpleTreeView>
  

• The endIcon / defaultEndIcon props, rendered next to an item without children,
  is now defined as a slot both on the Tree View and the Tree Item components.

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

    <SimpleTreeView
  -   defaultEndIcon={<MyCustomEndIcon />}
  +   slots={{ endIcon: MyCustomEndIcon }}
    >
      {items}
    </SimpleTreeView>
  

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

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

• The icon prop, rendered next to an item without children,
  is now defined as a slot on the Tree Item component.

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

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

@mui/[email protected]

• [TreeView] Adjust expansion and selection docs (#11723) @noraleonte
• [TreeView] Improve plugin signature definition (#11665) @flaviendelangle
• [TreeView] Make each plugin responsible for its context value (#11623) @flaviendelangle
• [TreeView] Migrate remaining icon props to slots (#11713) @flaviendelangle
• [TreeView] Pass through Theme generic to variants (#11480) @dhulme
• [TreeView] Rename useTreeItem to useTreeItemState (#11712) @flaviendelangle
• [TreeView] Add slots and slotProps on the Tree View components (#11664) @flaviendelangle
• [TreeView] Explore a better plugin model API (#11567) @flaviendelangle

Docs

• [docs] Clean the pickers migration guide (#11694) @flaviendelangle
• [docs] Cleanup and fix Pickers Playground styling (#11700) @LukasTy
• [docs] First draft of the Tree View custom plugin doc (#11564) @flaviendelangle
• [docs] Fix Pickers migration syntax and diffs (#11695) @LukasTy
• [docs] Fix generated tree view API docs (#11737) @LukasTy
• [docs] Generate docs for Tree View slots (#11730) @flaviendelangle
• [docs] Improve codemod for v7 (#11650) @oliviertassinari
• [docs] Improve data grid pageSizeOptions prop documentation (#11682) @oliviertassinari
• [docs] Parse markdown on API docs demo titles (#11728) @LukasTy
• [docs] Remove the description from the className prop (#11693) @oliviertassinari
• [docs] Uplift SimpleTreeView customization examples (#11424) @noraleonte
• [docs] Uplift the Date Pickers playground (#11555) @danilo-leal

Core

• [core] Bump @mui/material peer dependency for all packages (#11692) @LukasTy
• [core] Make karma run in parallel (#11571) @romgrk
• [core] make karma-parallel run under a new command (#11716) @romgrk
• [code-infra] Migrate all prettier APIs to the async version (#11732) @Janpot
• [code-infra] Update the Babel macro path (#11479) @michaldudak
• [docs-infra] Enforce brand name rules (#11651) @oliviertassinari
• [test] Fix flaky Data Grid test (#11725) @cherniavskii

6.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]

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

@mui/[email protected]

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

Charts / @mui/[email protected]

• [charts] Add arcLabelRadius property (#11563) @alexfauquette
• [charts] Do not propagate innerRadius and outerRadius to the DOM (#11719) @alexfauquette
• [charts] Fix default stackOffset for LineChart (#11703) @alexfauquette

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]

• [DataGrid] Stop exporting locales from the package root (#11614) @cherniavskii

@mui/[email protected]

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

@mui/[email protected]

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

Date Pickers

@mui/[email protected]

• [pickers] Add [email protected] adapter (#11462) @LukasTy
• [pickers] Avoid deeper than 2nd level imports (#11588) @LukasTy
• [pickers] Fix clearable behavior blocking focus return to OpenPickerButton (#11642) @noraleonte
• [pickers] Move DateRange to @mui/x-date-pickers-pro/models (#11611) @flaviendelangle
• [l10n] Add missing Danish (da-DK) locale export (#11640) @etlos

@mui/[email protected]

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

Tree View / @mui/[email protected]

• [tree view] Cleanup onKeyDown handler (#11481) @flaviendelangle
• [tree view] Define the parameters used by each plugin to avoid listing them in each component (#11473) @flaviendelangle

Docs

• [docs] Fix parsing of x-date-pickers-pro demo adapter imports (#11628) @LukasTy
• [docs] Improve git diff format @oliviertassinari
• [docs] Push up the MUI X brand (#11533) @oliviertassinari
• [docs] Remove old data grid translation files (#11646) @cherniavskii
• [docs] Improve Server-side data grid docs (#11589) @oliviertassinari
• [docs] Improve charts landing page (#11570) @oliviertassinari

Core

• [core] Lock jsdom version (#11652) @cherniavskii
• [core] Remove PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD (#11608) @oliviertassinari
• [core] Simplify isSsr logic (#11606) @oliviertassinari
• [core] Sync playwright cache between MUI X and Material UI (#11607) @oliviertassinari
• [core] Use MUI X official name in errors (#11645) @oliviertassinari

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]

• [pickers] Add [email protected] adapter (#11659) @LukasTy
• [pickers] Fix clearable behavior blocking focus return to OpenPickerButton (#11643) @noraleonte
• [l10n] Add missing Danish (da-DK) locale export (#11641) @etlos

@mui/[email protected]

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

Docs

• [docs] Add missing component @oliviertassinari
• [docs] Fix parsing of x-date-pickers-pro demo adapter imports (#11637) @LukasTy
• [docs] Push up the MUI X brand (#11533) @oliviertassinari
• [docs] Improve Server-side data grid docs (#11589) @oliviertassinari
• [docs] Add demo to the charts overview page (#11586) @danilo-leal
• [docs] Fix 404 links in the docs @oliviertassinari
• [docs] Improve landing page (#11570) @oliviertassinari
• [docs] Give a general revision to the docs (#11249) @danilo-leal

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]

• [DataGrid] Don't evaluate hasEval when disableEval is set (#11516) @reihwald
• [DataGrid] follow warning message guideline for autoPageSize and autoHeight (#11585) @Sboonny
• [DataGrid] Replace eval with new Function (#11557) @oliviertassinari
• [DataGrid] Warn devs when autoPageSize is used with autoHeight (#11554) @Sboonny
• [l10n] Improve Czech (cs-CZ) locale (#11526) @fdebef

@mui/[email protected]

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

@mui/[email protected]

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

Date Pickers

@mui/[email protected]

• [pickers] Fix views management (#11419) @LukasTy

@mui/[email protected]

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

Charts / @mui/[email protected]

• [charts] Add arcLabelRadius property (#11487) @alexfauquette
• [charts] Fix null in line chart using dataset (#11550) @alexfauquette

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]

• [TreeView] Improve the expansion API (#11476) @flaviendelangle
• [TreeView] Improve the selection API (#11560) @flaviendelangle
• [TreeView] Introduce the items prop (#11059) @flaviendelangle

Docs

• [docs] Add example for TreeView onNodeExpansionToggle prop (#11547) @flaviendelangle
• [docs] Clarify Pickers usage with Luxon (#11545) @LukasTy
• [docs] Complete transition to next branch (#11521) @oliviertassinari
• [docs] Fix 404 links in the docs @oliviertassinari
• [docs] Fix over page fetching @oliviertassinari
• [docs] Lint next.config.js (#11514) @oliviertassinari

Core

• [core] Fix release changelog (#11496) @romgrk
• [core] Fix use of ::before & ::after (#11515) @oliviertassinari
• [core] Localize the issue template to MUI X (#11511) @oliviertassinari
• [core] Regen api files (#11542) @flaviendelangle
• [core] Remove issue emoji @oliviertassinari
• [core] Sync the release instructions with MUI Core @oliviertassinari
• [core] Yaml format match most common convention @oliviertassinari

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]

• [DataGrid] Don't evaluate hasEval when disableEval is set (#11553) @reihwald
• [l10n] Update Czech (cs-CZ) locale (#11498) @fdebef

@mui/[email protected]

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

@mui/[email protected]

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

Date Pickers

@mui/[email protected]

• [pickers] Fix views management (@LukasTy) (#11572)

@mui/[email protected]

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

Charts / @mui/[email protected]

• [charts] Fix null in line chart using dataset (@alexfauquette) (#11561)

Docs

• [docs] Clarify Pickers usage with Luxon (#11566) @LukasTy

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

• 🎁 Data Grid now supports Date objects in the filterModel
• 🌍 Improve Russian (ru-RU) locale on the Data Grid
• 🐞 Bugfixes

Data Grid

Breaking changes

• The filter panel no longer uses the native version of the Select component for all components.

• The getOptionValue and getOptionLabel props were removed from the following components:

  • GridEditSingleSelectCell
  • GridFilterInputSingleSelect
  • GridFilterInputMultipleSingleSelect

  Use the getOptionValue and getOptionLabel properties on the singleSelect column definition instead:

  const column: GridColDef = {
    type: 'singleSelect',
    field: 'country',
    valueOptions: [
      { code: 'BR', name: 'Brazil' },
      { code: 'FR', name: 'France' },
    ],
    getOptionValue: (value: any) => value.code,
    getOptionLabel: (value: any) => value.name,
  };
  

• The filterModel now supports Date objects as values for date and dateTime column types.
  The filterModel still accepts strings as values for date and dateTime column types,
  but all updates to the filterModel coming from the UI (e.g. filter panel) will set the value as a Date object.

@mui/[email protected]

• [DataGrid] Fix typos in the JSDoc (#11451) @flaviendelangle
• [DataGrid] Make checkboxSelection respect the disableMultipleRowSelection prop (#11448) @cherniavskii
• [DataGrid] Support Date objects in filter model (#7069) @cherniavskii
• [DataGrid] Use non-native Selects by default (#11330) @cherniavskii
• [l10n] Improve Russian (ru-RU) locale (#11441) @wensiet

@mui/[email protected]

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

@mui/[email protected]

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

Date Pickers

@mui/[email protected]

• [fields] Adjust PickersInput sizing styles (#11392) @noraleonte
• [fields] Fix section pasting (#11447) @LukasTy
• [pickers] Add PickersTextField standard and filled variants (#11250) @noraleonte
• [pickers] Cleanup error messages in PickersSectionList (#11449) @flaviendelangle
• [pickers] Create new component PickersSectionList (#11352) @flaviendelangle

@mui/[email protected]

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

Charts / @mui/[email protected]

• [charts] Allow percentage values for pie chart center and radius (#11464) @alexfauquette
• [charts] Improve dataset typing (#11372) @alexfauquette
• [charts] Make error message more explicit (#11457) @alexfauquette
• [charts] Make the helper ChartsText component public (#11370) @alexfauquette

Docs

• [docs] Document false default values for boolean props (#11477) @cherniavskii
• [docs] Improve Pickers name prop examples (#11422) @LukasTy
• [docs] Limit date-fns package to v2 in codesandbox (#11463) @LukasTy

Core

• [core] Add missing breaking changes to changelog (#11420) @MBilalShafi
• [core] Cherry pick follow up (#11469) @LukasTy
• [core] Fix cherry-pick action (#11446) @LukasTy
• [core] Fix security regressions in cherry-pick-next-to-master.yml (#11482) @MBilalShafi
• [test] Reload the page if its blank and there are no links to the remaining tests (#11466) @cherniavskii

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

• 🌍 Improve Russian (ru-RU) locale (#11429) @wensiet
• 🐞 Bugfixes

Data Grid

@mui/[email protected]

• [DataGrid] Fix typos in the JSDoc (#11475) @flaviendelangle
• [l10n] Improve Russian (ru-RU) locale (#11429) @wensiet

@mui/[email protected]

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

@mui/[email protected]

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

Date Pickers

@mui/[email protected]

• [fields] Fix section pasting (#11467) @LukasTy

@mui/[email protected]

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

Charts / @mui/[email protected]

• [charts] Allow percentage values for pie chart center and radius (#11464) @alexfauquette
• [charts] Make error message more explicit (#11457) @alexfauquette
• [charts] Make the helper ChartsText component public (#11370) @alexfauquette
• [charts] Improve dataset typing (#11372) @alexfauquette
• [charts] Fix size overflow (#11385) @alexfauquette

Docs

• [docs] Document false default values for boolean props (#11489) @cherniavskii
• [docs] Improve Pickers name prop examples (#11442) @LukasTy
• [docs] Limit date-fns package to v2 in codesandbox (#11478) @LukasTy
• [test] Reload the page if its blank and there are no links to the remaining tests (#11471) @cherniavskii

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

• 💫 New recipe added for the Data Grid
• 🌍 Improve Swedish (sv-SE) and Urdu (ur-PK) locales on the Data Grid
• 🐞 Bugfixes

Data Grid

Breaking changes

• The instanceId prop is now required for state selectors.
  This prop is used to distinguish between multiple Data Grid instances on the same page.
  See migration docs for more details.

@mui/[email protected]

• [DataGrid] Make instanceId required for state selectors (#11395) @cherniavskii
• [DataGrid] Recipe for grouped rows autosizing (#11401) @michelengelen
• [l10n] Improve Swedish (sv-SE) locale (#11373) @fredrikcarlbom
• [l10n] Improve Urdu (ur-PK) locale (#11400) @MBilalShafi

@mui/[email protected]

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

@mui/[email protected]

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

Date Pickers

Breaking changes

• The slot interfaces got renamed to match with @mui/base naming.
  The SlotsComponent suffix has been replaced with Slots and SlotsComponentsProps with SlotProps.

- DateCalendarSlotsComponent
+ DateCalendarSlots
- DateCalendarSlotsComponentsProps
+ DateCalendarSlotProps

@mui/[email protected]

• [fields] Support empty sections (#10307) @flaviendelangle
• [pickers] Fix field types to avoid error on latest @types/react version (#11397) @LukasTy
• [pickers] Remove all relative imports to the internals index file (#11375) @flaviendelangle
• [pickers] Rename slots interfaces (#11339) @alexfauquette
• [pickers] Simplify the API of the field hooks (#11371) @flaviendelangle
• [pickers] Support name prop (#11025) @gitstart

@mui/[email protected]

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

• [DateRangePicker] Fix autoFocus behavior (#11273) @kealjones-wk

Charts / @mui/[email protected]

• [charts] Fix size overflow (#11385) @alexfauquette

@mui/[email protected]

• [codemod] Add cellSelection codemod and update migration guide (#11353) @MBilalShafi

Docs

• [docs] Respect GoT books (@janoma) (#11387) @alexfauquette

Core

• [core] Automate cherry-pick of PRs from next -> master (#11382) @MBilalShafi
• [github] Update no-response workflow (#11369) @MBilalShafi
• [test] Fix flaky screenshots (#11388) @cherniavskii

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

• 🌍 Improve Swedish (sv-SE) and Urdu (ur-PK) locales on the Data Grid
• 🐞 Bugfixes

Data Grid

@mui/[email protected]

• [l10n] Improve Swedish (sv-SE) locale (#11379) @fredrikcarlbom
• [l10n] Improve Urdu (ur-PK) locale for data grid (#11409) @MBilalShafi

@mui/[email protected]

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

@mui/[email protected]

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

Date Pickers

@mui/[email protected]

• [pickers] Fix field types to avoid error on latest @types/react version (#11398) @LukasTy
• [pickers] Support name prop (#11380) @gitstart

@mui/[email protected]

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

• [DateRangePicker] Fix autoFocus behavior (#11376) @kealjones-wk

Docs

• [docs] Respect GoT books (#11294) @janoma
• [test] Fix flaky screenshots (#11391) @cherniavskii

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

• 🚀 The scatter charts now use voronoi to trigger items

  Users needed to hover the item to highlight the scatter item or show the tooltip.
  Now they can interact with data by triggering the closest element. See the docs page for more info.

• 📚 Add Pickers FAQ page

• 🎉 The Data Grid Header filters feature is now stable

• 🌍 Improve Danish (da-DK) locale on Data Grid

• 🐞 Bugfixes

Data Grid

Breaking changes

• The header filters feature is now stable. unstable_ prefix is removed from prop headerFilters and related exports.
  See migration docs for more details.

• The GridColDef['type'] has been narrowed down to only accept the built-in column types.
  TypeScript users need to use the GridColDef interface when defining columns:

  // 🛑 `type` is inferred as `string` and is too wide
  const columns = [{ type: 'number', field: 'id' }];
  <DataGrid columns={columns} />;
  
  // ✅ `type` is `'number'`
  const columns: GridColDef[] = [{ type: 'number', field: 'id' }];
  <DataGrid columns={columns} />;
  
  // ✅ Alternalively, `as const` can be used to narrow down the type
  const columns = [{ type: 'number' as const, field: 'id' }];
  <DataGrid columns={columns} />;
  

@mui/[email protected]

• [DataGrid] Added a guard for reorder cells (#11159) @michelengelen
• [DataGrid] Narrow down GridColDef['type'] (#11270) @cherniavskii
• [l10n] Improve Danish (da-DK) locale (#11304) @goibon

@mui/[email protected]

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

• [DataGridPro] Make header filters feature stable (#11243) @MBilalShafi

@mui/[email protected]

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

Date Pickers

@mui/[email protected]

• [fields] Rework PickersTextField (#11258) @flaviendelangle
• [pickers] Fix MultiSectionDigitalClock issues (#11305) @LukasTy
• [pickers] Fix views height consistency (#11337) @LukasTy

@mui/[email protected]

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

Charts / @mui/[email protected]

• [charts] Remove animation on sparkline (#11311) @oliviertassinari
• [charts] Use voronoi cells to trigger interaction with scatter items (#10981) @alexfauquette
• [charts] Add @mui/utils as a dependency (#11351) @michelengelen

Docs

• [docs] Add FAQ page (#11271) @noraleonte
• [docs] Add a doc section on how to override the start of the week with each adapter (#11223) @flaviendelangle
• [docs] Added params to onPaginationModelChange docs (#10191) @JFBenzs
• [docs] Fix typo (#11324) @cadam11
• [docs] Improve DemoContainer styling coverage (#11315) @LukasTy
• [docs] General revision of the Charts docs (#11249) @danilo-leal

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

• 📚 Add Pickers FAQ page
• 🌍 Improve Danish (da-DK) locale on Data Grid
• 🐞 Bugfixes

Data Grid

@mui/[email protected]

• [DataGrid] Fix cell slot style override (#11215) @oliviertassinari
• [l10n] Improve Danish (da-DK) locale (#11346) @goibon

@mui/[email protected]

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

@mui/[email protected]

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

Date Pickers

@mui/[email protected]

• [pickers] Fix MultiSectionDigitalClock issues (#11308) @LukasTy

@mui/[email protected]

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

Docs

• [docs] Fix typo (#11323) @cadam11
• [docs] Add FAQ page (#11347) @noraleonte

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

• 🚀 Support localized start of the week on pickers' AdapterLuxon

  When using Luxon 3.4.4 or higher, the start of the week will be defined by the date locale (e.g.: Sunday for en-US, Monday for fr-FR).

• 📈 Fix a lot of Charts package issues

• 🎉 The Data Grid features Cell selection and Clipboard paste are now stable

• 🌍 Improve Bulgarian (bg-BG) locale on Data Grid

• 🐞 Bugfixes

• 📚 Documentation improvements

Data Grid

Breaking changes

• The clipboard paste feature is now enabled by default. The flag clipboardPaste is no longer needed to be passed to the experimentalFeatures prop.

• The clipboard-related exports ignoreValueFormatterDuringExport and splitClipboardPastedText are no longer prefixed with unstable_.

• The deprecated constants SUBMIT_FILTER_STROKE_TIME and SUBMIT_FILTER_DATE_STROKE_TIME have been removed from the DataGrid exports. Use the filterDebounceMs prop to customize filter debounce time.

• The slots.preferencesPanel slot and the slotProps.preferencesPanel prop were removed. Use slots.panel and slotProps.panel instead.

• The GridPreferencesPanel component is not exported anymore as it wasn't meant to be used outside of the Data Grid.

• The unstable_ prefix has been removed from the cell selection props listed below.

  Old name	New name
  unstable_cellSelection	cellSelection
  unstable_cellSelectionModel	cellSelectionModel
  unstable_onCellSelectionModelChange	onCellSelectionModelChange

• The unstable_ prefix has been removed from the cell selection API methods listed below.

  Old name	New name
  unstable_getCellSelectionModel	getCellSelectionModel
  unstable_getSelectedCellsAsArray	getSelectedCellsAsArray
  unstable_isCellSelected	isCellSelected
  unstable_selectCellRange	selectCellRange
  unstable_setCellSelectionModel	setCellSelectionModel

• The Quick Filter now ignores hidden columns by default.
  See including hidden columns section for more details.

@mui/[email protected]

• [DataGrid] Fix cell editing by adding a leading "v" on paste (#9205) @prasad5795
• [DataGrid] Exclude hidden columns from quick filtering by default (#11229) @cherniavskii
• [DataGrid] Fix onFilterModelChange being fired with stale field value (#11000) @gitstart
• [DataGrid] Fix handling of event target in portal (#11174) @cherniavskii
• [DataGrid] Remove deprecated constants (#11233) @michelengelen
• [DataGrid] Remove the preferencesPanel slot (#11228) @cherniavskii
• [l10n] Improve Bulgarian (bg-BG) locale (#10856) @Kristiqn95

@mui/[email protected]

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

@mui/[email protected]

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

• [DataGridPremium] Fix aggregated column ignoring column definition changes (#11129) @cherniavskii
• [DataGridPremium] Make Cell selection feature stable (#11246) @MBilalShafi
• [DataGridPremium] Make Clipboard paste feature stable (#11248) @MBilalShafi

Date Pickers

Breaking changes

• The Date and Time Pickers now use the localized week when using AdapterLuxon and Luxon v3.4.4 or higher is installed.
  This new behavior allows AdapterLuxon to have the same behavior as the other adapters.
  If you want to keep the start of the week on Monday even if your locale says otherwise, you can hardcode the week settings as follows:
  The Firefox browser currently does not support this behavior because the getWeekInfo API is not yet implemented.

  import { Settings } from 'luxon';
  
  Settings.defaultWeekSettings = {
    firstDay: 1,
    minimalDays: Info.getMinimumDaysInFirstWeek(),
    weekend: [6, 7],
  };
  

• Add new parameters to the shortcuts slot onChange callback

  The onChange callback fired when selecting a shortcut now requires two new parameters (previously they were optional):

  • The changeImportance of the shortcut.
  • The item containing the entire shortcut object.

   const CustomShortcuts = (props) => {
     return (
       <React.Fragment>
         {props.items.map(item => {
           const value = item.getValue({ isValid: props.isValid });
           return (
             <button
  -            onClick={() => onChange(value)}
  +            onClick={() => onChange(value, props.changeImportance ?? 'accept', item)}
             >
               {value}
             </button>
           )
         }}
       </React.Fragment>
     )
   }
  
   <DatePicker slots={{ shortcuts: CustomShortcuts }} />
  

  • Usage of AdapterDayjs with the customParseFormat plugin
    The call to dayjs.extend(customParseFormatPlugin) has been moved to the AdapterDayjs constructor. This allows users to pass custom options to this plugin before the adapter uses it.

  If you are using this plugin before the rendering of the first LocalizationProvider component and did not call dayjs.extend in your own codebase, you will need to manually extend dayjs:

  import dayjs from 'dayjs';
  import customParseFormatPlugin from 'dayjs/plugin/customParseFormat';
  
  dayjs.extend(customParseFormatPlugin);
  

  The other plugins are still added before the adapter initialization.

@mui/[email protected]

• [pickers] Expand field placeholder methods flexibility by providing format parameter (#11130) @LukasTy
• [pickers] Make changeImportance and shortcut mandatory in PickersShortcuts (#10941) @flaviendelangle
• [pickers] Moved extend with customParseFormat to constructor (#11151) @michelengelen
• [pickers] POC: PickersTextField styling - outlined variant (#10778) @noraleonte
• [pickers] Support localized start of the week on AdapterLuxon (#10964) @flaviendelangle
• [pickers] Use adapter methods instead of date library ones whenever possible (#11142) @flaviendelangle

@mui/[email protected]

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

Charts / @mui/[email protected]

• [charts] Adjusted defaultizeValueFormatter util to accept an optional series.valueFormatter value (#11144) @michelengelen
• [charts] Apply labelStyle and tickLabelStyle props on <ChartsYAxis /> (#11180) @akamfoad
• [charts] Fix TS config (#11259) @alexfauquette
• [charts] Fix error with empty dataset (#11063) @alexfauquette
• [charts] Fix export strategy (#11235) @alexfauquette
• [charts] Remove outdated prop-types (#11045) @alexfauquette

Docs

• [docs] Add TextField styling example to customization playground (#10812) @noraleonte
• [docs] Add a card grid to the installation page (#11177) @danilo-leal
• [docs] Add end v6 blog post to what's new page (#10999) @joserodolfofreitas
• [docs] Add small formatting improvements to the licensing page (#11178) @danilo-leal
• [docs] Document charts composition (#10710) (#11239) @alexfauquette
• [docs] Fix generation (#11182) @oliviertassinari
• [docs] Fix dead anchor link (#11265) @oliviertassinari
• [docs] Improve Data Grid togglable columns example (#11238) @MBilalShafi
• [docs] Improve the prop descriptions of DayCalendar (#11158) @flaviendelangle
• [docs] Move the adapter breaking changes in a collapsable block (#11205) @flaviendelangle
• [docs] Polish Next.js header description @oliviertassinari
• [docs] Remove the newFeature flag on v6 features (#11168) @flaviendelangle
• [docs] Simplify a bit chart demo (#11173) @oliviertassinari
• [docs] Standardize the usage of callouts in the MUI X docs (#7127) @samuelsycamore
• [docs] Adjust the Data Grid demo page design (#11231) @danilo-leal

Core

• [core] Make @mui/system a direct dependency (#11128) @LukasTy
• [core] Remove blank lines, coding style @oliviertassinari
• [core] Remove outdated ENABLE_AD env variable (#11181) @oliviertassinari
• [github] Do not add plan: Pro and plan: Premium labels on pro/premium issue templates (#10183) @flaviendelangle

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

• 📈 Fix a lot of Charts package issues
• 🌍 Improve Bulgarian (bg-BG) locale on Data Grid
• 🐞 Bugfixes
• 📚 Documentation improvements

Data Grid

@mui/[email protected]

• [DataGrid] Fix cell editing adding a leading "v" on paste (#11166) @prasad5795
• [DataGrid] Fix handling of event target in portal (#11209) @cherniavskii
• [DataGrid] Fix onFilterModelChange being fired with stale field value (#11244) @gitstart
• [l10n] Improve Bulgarian (bg-BG) locale (#10856) (#11206) @Kristiqn95

@mui/[email protected]

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

@mui/[email protected]

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

• [DataGridPremium] Fix aggregated column ignoring column definition changes (#11176) @cherniavskii
• [DataGridPremium] Fix custom filter operators not working on aggregated column (#11201) @cherniavskii

Date Pickers

@mui/[email protected]

• [pickers] Correctly format MultiSectionDigitalClock number sections (#11297) @LukasTy
• [pickers] Expand field placeholder methods flexibility by providing format parameter (#11254) @LukasTy

@mui/[email protected]

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

Charts / @mui/[email protected]

• [charts] Adjusted defaultizeValueFormatter util to accept an optional series.valueFormatter value (#11213) @michelengelen
• [charts] Apply labelStyle and tickLabelStyle props on <ChartsYAxis /> (#11180) @akamfoad
• [charts] Fix TS config (#11259) @alexfauquette
• [charts] Fix error with empty dataset (#11063) @alexfauquette
• [charts] Fix export strategy (#11235) @alexfauquette

Docs

• [docs] Add LTS section to support page (#11300) @joserodolfofreitas
• [docs] Add end v6 blogpost to whats new page (#11299) @joserodolfofreitas
• [docs] Document charts composition (#10710) @alexfauquette
• [docs] Fix version links (#11167) @LukasTy
• [docs] Improve Data Grid togglable columns example (#11241) @MBilalShafi
• [docs] Split charts overview and getting started in distinct pages (#10910) @alexfauquette

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

• 📈 Export missing Charts props
• 🌍 Improve Arabic (ar-SD) and Hebrew (he-IL) locales on Data Grid
• 🌍 Add Macedonian (mk) locale and improve German (de-DE) locale on Pickers
• 🐞 Bugfixes
• 📚 Documentation improvements

Data Grid

@mui/[email protected]

• [l10n] Improve Arabic (ar-SD) locale (#11114) @MBilalShafi
• [l10n] Improve Hebrew (he-IL) locale (#11056) (#11149) @MBilalShafi
• [DataGrid] Remove unused utilities (#11156) @flaviendelangle

@mui/[email protected]

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

@mui/[email protected]

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

Date Pickers

Breaking changes

• The deprecated shouldDisableClock prop has been removed in favor of the more flexible shouldDisableTime prop.
  The shouldDisableClock prop received value as a number of hours, minutes, or seconds.
  Instead, the shouldDisableTime prop receives the date object (based on the used adapter).

  You can read more about the deprecation of this prop in v6 migration guide.

   <DateTimePicker
  -  shouldDisableClock={(timeValue, view) => view === 'hours' && timeValue < 12}
  +  shouldDisableTime={(value, view) => view === 'hours' && value.hour() < 12}
   />
  

• The adapter.dateWithTimezone method has been removed and its content moved to the date method.
  You can use the adapter.date method instead:

  - adapter.dateWithTimezone(undefined, 'system');
  + adapter.date(undefined, 'system');
  

• The dayPickerClasses variable has been renamed to dayCalendarClasses to be consistent with the new name of the DayCalendar component introduced in v6.0.0.

  - import { dayPickerClasses } from '@mui/x-date-pickers/DateCalendar';
  + import { dayCalendarClasses } from '@mui/x-date-pickers/DateCalendar';
  

• The deprecated defaultCalendarMonth prop has been removed in favor of the more flexible referenceDate prop.

  - <DateCalendar defaultCalendarMonth={dayjs('2022-04-01')};
  + <DateCalendar referenceDate{dayjs('2022-04-01')} />
  

• The adapter.date method now has the v6 adapter.dateWithTimezone method behavior.
  It no longer accepts any as a value but only string | null | undefined.

  - adapter.date(new Date());
  + adapter.date();
  
  - adapter.date(new Date('2022-04-17');
  + adapter.date('2022-04-17');
  
  - adapter.date(new Date(2022, 3, 17, 4, 5, 34));
  + adapter.date('2022-04-17T04:05:34');
  
  - adapter.date(new Date('Invalid Date'));
  + adapter.getInvalidDate();
  

@mui/[email protected]

• [l10n] Improve German (de-DE) locale (#11103) @jho-vema
• [l10n] Add Macedonian (mk) locale (#10935) @brsnik
• [pickers] Remove the defaultCalendarMonth prop (#10987) @flaviendelangle
• [pickers] Remove the shouldDisableClock prop (#11042) @flaviendelangle
• [pickers] Rename the dayPickerClasses variable dayCalendarClasses (#11140) @flaviendelangle
• [pickers] Replace adapter.date with the current adapter.dateWithTimezone (#10979) @flaviendelangle

@mui/[email protected]

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

Charts / @mui/[email protected]

• [charts] Change export strategy in index files (#11113) @michelengelen
• [charts] Fix ChartsTooltip component setup (#11152) @LukasTy

@mui/[email protected]

• [codemod] Add codemod to use referenceDate instead of defaultCalendarMonth (#11139) @flaviendelangle
• [codemod] Clean the components to slots codemod usage (#11145) @flaviendelangle

Docs

• [docs] Add LTS section to support docs (#10927) @joserodolfofreitas
• [docs] Clean the codemod README (#11051) @flaviendelangle
• [docs] Fix typos and grammar issues (#11049) @flaviendelangle
• [docs] Fix version links (#11001) @LukasTy
• [docs] Point to the source of @mui/x-data-grid-generator (#11134) @oliviertassinari

Core

• [core] Bump monorepo (#11160) @LukasTy
• [core] Fix comment in doc generation (#11098) @flaviendelangle
• [core] Rename OpenCollective @oliviertassinari
• [core] Upgrade babel-plugin-module-resolver to 5.0.0 (#11065) @flaviendelangle
• [changelog] Improve git diff format @oliviertassinari
• [renovate] Monthly schedule for lockfile maintenance (#10336) @Janpot
• [test] Skip flaky e2e test in webkit (#11110) @cherniavskii