Skip to content

Releases: mui/mui-x

v7.28.1

21 Mar 13:29
714c27a
Compare
Choose a tag to compare

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

  • 🐞 Bugfixes

Special thanks go out to the community contributors who have helped make this release possible:
@jyash97, @nusr.

Following are all team members who have contributed to this release:
@arminmeh, @KenanYusuf.

Data Grid

@mui/[email protected]

  • [DataGrid] Fix error while editing rows with custom id (@arminmeh) (#17050)

@mui/[email protected] pro

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

  • [DataGridPro] Fix header select checkbox state with checkboxSelectionVisibleOnly and paginationMode="server" (@arminmeh) (#17032)

@mui/[email protected] premium

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

  • [DataGridPremium] Update column state correctly when grouping mode is updated with one grouping column (@arminmeh) (#17074)

Tree View

@mui/[email protected]

Internal changes.

@mui/[email protected] pro

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

  • [TreeView] Allow moving an item after the last children of some other item (@jyash97) (#17065)

Docs

v8.0.0-beta.0

18 Mar 16:45
5fd9c1e
Compare
Choose a tag to compare
v8.0.0-beta.0 Pre-release
Pre-release
MUI X v8 Beta is live

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

  • 🚀 Add Time Range Picker component
  • 🎁 Add support for @mui/material version 7 in all X packages
  • 🐞 Bugfixes
  • 🌍 Improve Chinese (zh-CN), (zh-HK), (zh-TW), Czech (cs-CZ), Korean (ko-KR) and Slovak (sk-Sk) locales on the Data Grid
  • 🌍 Improve Chinese (zh-CN), (zh-HK) and (zh-TW) locales on the Pickers

Breaking changes

  • ℹ️ The peer dependency on @mui/material has been updated to accept only v7.
    This has been done to increase the adoption rate of ESM.
    Since only v7 of @mui/material has proper ESM support, we decided to help with its adoption and fix numerous issues using X packages in environments where transpiling is not an option.

Special thanks go out to the community members for their valuable contributions:
@Blake-McCullough, @hlavacz, @k-rajat19, @layerok, @nusr, @owais635, @yelahj.
Following are all team members who have contributed to this release:
@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @DiegoAndai, @flaviendelangle, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @romgrk.

Alpha release highlights

Below are the highlights of the alpha releases leading up to this beta release:

Data Grid

@mui/[email protected]

@mui/[email protected] pro

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

  • [DataGridPro] Fix header filters not displaying restored values (#16855) @MBilalShafi
  • [DataGridPro] Fix infinite loading not reacting when scrolling to the end (#16926) @arminmeh

@mui/[email protected] premium

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

  • [DataGridPremium] Fix selection propagation issues with controlled state (#16810) @MBilalShafi

Date and Time Pickers

Breaking changes

  • The useClearableField hook has been removed.
    The custom field component now receives the clearable and onClear props — Learn more.
  • The ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps, and UseClearableFieldResponse types have been removed — Learn more.

@mui/[email protected]

@mui/[email protected] pro

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

  • [DateRangeCalendar] Do not update the previewed day when hovering a day and the value is empty (#16892) @flaviendelangle
  • [TimeRangePicker] Shift popper between start and end input on multi input field (#16920) @LukasTy

Charts

Breaking changes

  • Tick labels in the x-axis of cartesian charts will now have an ellipsis applied to prevent overflow.
    If your tick labels are being clipped sooner than you would like, you can increase the x-axis size by increasing its height property.
    The default line-height has also been changed to 1.25, so if you aren't customizing the line height for x-axis tick labels, make sure to double check if the result is desirable.

@mui/[email protected]

@mui/[email protected] pro

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

Tree View

@mui/[email protected]

Internal changes.

@mui/[email protected] pro

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

Docs

  • [docs] Add the Time Range Picker to relevant validation demos (#16919) @LukasTy
  • [docs] Adjust Picker field lifecycle explanation (#16901) @LukasTy
  • [docs] Fix custom detail panel toggle state update (#16929) @nusr
  • [docs] Fix Pickers custom field with Autocomplete demo (#16863) ...
Read more

v7.28.0

17 Mar 17:06
77e84ec
Compare
Choose a tag to compare

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

  • 🎁 Add support for @mui/material version 7 in all X packages
  • 🐞 Bugfixes
  • 🌍 Improve Chinese (zh-CN), (zh-HK), (zh-TW), Czech (cs-CZ), Korean (ko-KR) and Slovak (sk-Sk) locales on the Data Grid
  • 🌍 Improve Chinese (zh-CN), (zh-HK) and (zh-TW) locales on the Pickers

Special thanks go out to the community contributors who have helped make this release possible:
@Blake-McCullough, @hlavacz, @yelahj, @k-rajat19, @nusr.
Following are all team members who have contributed to this release:
@arminmeh, @flaviendelangle, @LukasTy, @michelengelen, @MBilalShafi.

Data Grid

@mui/[email protected]

  • [DataGrid] Add click propagation and prevents default on toggleMenu click (#16909) @michelengelen
  • [DataGrid] Fix processRowUpdate() error if the row is removed before it is executed (#16904) @arminmeh
  • [DataGrid] Fix bug with adding and removing columns in active edit state (#16916) @Blake-McCullough
  • [DataGrid] Fix visual issue with pinned columns and row spanning (#16942) @MBilalShafi
  • [DataGrid] Make column header menu button aria-labels unique (#16925) @owais635
  • [DataGrid] Fix printOptions not respecting hideFooter root prop (#16915) @k-rajat19
  • [l10n] Improve Chinese (zh-CN), (zh-HK) and (zh-TW) locales (#16917 and #16887) @nusr
  • [l10n] Improve Czech (cs-CZ) and Slovak (sk-Sk) locales (#16996) @hlavacz
  • [l10n] Improve Korean (ko-KR) locale (#16998) @yelahj

@mui/[email protected] pro

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

  • [DataGridPro] Fix header filters not displaying restored values (#16976) @MBilalShafi
  • [DataGridPro] Fix infinite loading not reacting when scrolling to the end (#16939) @arminmeh

@mui/[email protected] premium

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

  • [DataGridPremium] Fix selection propagation issues with controlled state (#16995) @MBilalShafi

Date and Time Pickers

@mui/[email protected]

  • [l10n] Improve Chinese (zh-CN), (zh-HK) and (zh-TW) locales (#16997) @nusr

@mui/[email protected] pro

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

  • [DateRangeCalendar] Do not update the previewed day when hovering a day and the value is empty (#16892) @flaviendelangle

Charts

@mui/[email protected]

Internal changes.

@mui/[email protected] pro

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

Tree View

@mui/[email protected]

Internal changes.

@mui/[email protected] pro

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

Docs

  • [docs] Fix link to the lazy loading demo for the DataGrid (#16912) @nusr

Core

v8.0.0-alpha.14

07 Mar 09:56
3524dc5
Compare
Choose a tag to compare
v8.0.0-alpha.14 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 ✨:

  • 🚀📊 New Pro Chart: It is now possible to create Funnel charts—perfect for visualizing conversions, sales pipelines and more!
    Screenshot 2025-01-31 at 12 22 31
  • 🎁 The first iteration of the radar chart is available. Features and refinements will be added in the coming weeks.
  • 🛠️ New and improved Toolbar component for the data grid
  • 🐞 Bugfixes

Special thanks go out to the community member for their valuable contributions:
@vadimka123.

Following are all team members who have contributed to this release:
@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen, @noraleonte, @oliviertassinari.

Data Grid

Breaking changes

  • The density selector has been removed from the toolbar. It is still possible to set the density programmatically via the density prop. A density selector can be added to a custom toolbar passed to slots.toolbar. See Toolbar component—Settings menu for an example.
  • The quick filter is now shown in the toolbar by default. Use slotProps={{ toolbar: { showQuickFilter: false } }} to hide it.
  • The <GridSaveAltIcon /> icon is not exported anymore. Import SaveAlt from @mui/icons-material instead.

@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 and Time Pickers

Breaking changes

  • All Date Time Picker variants now use Digital Clock for time editing.
  • Stop passing invalid date to onChange when the date is partially filled — Learn more.

@mui/[email protected]

@mui/[email protected] pro

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

Charts

@mui/[email protected]

@mui/[email protected] pro

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

Tree View

Breaking changes

  • The selectItem method has been renamed setItemSelection:

    const { publicAPI } = useTreeItemUtils();
    
    const handleSelectItem() {
    -  publicAPI.selectItem({ event, itemId: props.itemId, shouldBeSelected: true })
    +  publicAPI.setItemSelection({ event, itemId: props.itemId, shouldBeSelected: true })
    }
  • The setItemExpansion method now receives a single object instead of a list of parameters:

    const { publicAPI } = useTreeItemUtils();
    
    const handleExpandItem() {
    -  publicAPI.setItemExpansion(event, props.itemId, true)
    +  publicAPI.setItemExpansion({ event, itemId: props.itemId, shouldBeExpanded: true })
    }

@mui/[email protected]

@mui/[email protected] pro

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

Docs

Core

v7.27.3

07 Mar 10:02
4a6ffed
Compare
Choose a tag to compare

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

  • 🐞 Bugfixes

Team members who have contributed to this release:
@arminmeh, @cherniavskii, @LukasTy, @michelengelen.

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 and Time Pickers

@mui/[email protected]

  • [fields] Fix Fields aria relationship with helperText (#16828) @LukasTy

@mui/[email protected] pro

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

Core

v8.0.0-alpha.13

28 Feb 16:07
7746150
Compare
Choose a tag to compare
v8.0.0-alpha.13 Pre-release
Pre-release

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

  • 📊 Decouple margin and axis-size. A new API to support multiple axes (#16418) @JCQuintas
  • 🗺️ Added Bangla (bn-BD) locale
  • 🗺️ Improve Russian (ru-RU) and Hungarian (hu-HU) locale on the Data Grid

Special thanks go out to the community members for their contributions:
@denpiligrim, @lhilgert9, @noherczeg, @officialkidmax, @pcorpet.
Following are all team members who have contributed to this release:
@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen, @MBilalShafi, @oliviertassinari, @romgrk.

Data Grid

Breaking changes

  • The slots.baseFormControl component was removed.

  • The "Reset" button in the column visibility panel now resets to the initial column visibility model. Previously it was reset to the model that was active at the time the panel was opened. The reset behavior follows these rules:

    1. If an initial columnVisibilityModel is provided, it resets to that model.
    2. If a controlled columnVisibilityModel is provided, it resets to the first model value.
    3. When the columns are updated (via the columns prop or updateColumns() API method), the reset reference point updates to the current columnVisibilityModel.

    To revert to the previous behavior, provide a custom component to the slots.columnsManagement.

  • The deprecated LicenseInfo export has been removed from the @mui/x-data-grid-pro and @mui/x-data-grid-premium packages.
    You have to import it from @mui/x-license instead:

    - import { LicenseInfo } from '@mui/x-data-grid-pro';
    - import { LicenseInfo } from '@mui/x-data-grid-premium';
    + import { LicenseInfo } from '@mui/x-license';
    
     LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY');
  • The row selection model has been changed from GridRowId[] to { type: 'include' | 'exclude'; ids: Set<GridRowId> }.
    Using Set allows for a more efficient row selection management.
    The exclude selection type allows to select all rows except the ones in the ids set.

    This change impacts the following props:

    • rowSelectionModel
    • onRowSelectionModelChange
    • initialState.rowSelectionModel
    - const [rowSelectionModel, setRowSelectionModel] = React.useState<GridRowSelectionModel>([]);
    + const [rowSelectionModel, setRowSelectionModel] = React.useState<GridRowSelectionModel>({ type: 'include', ids: new Set() });

    This change also impacts the gridRowSelectionStateSelector selector.
    For convenience, use the gridRowSelectionManagerSelector selector to handle both selection types:

    - const rowSelection = gridRowSelectionStateSelector(apiRef);
    - const isRowSelected = rowSelection.includes(rowId);
    + const rowSelectionManager = gridRowSelectionManagerSelector(apiRef);
    + const isRowSelected = rowSelectionManager.has(rowId);

    There is also a createRowSelectionManager utility function that can be used to manage the row selection:

    const rowSelectionManager = createRowSelectionManager({
      type: 'include',
      ids: new Set(),
    });
    rowSelectionManager.select(rowId);
    rowSelectionManager.unselect(rowId);
    rowSelectionManager.has(rowId);
  • The selectedIdsLookupSelector selector has been removed. Use the gridRowSelectionManagerSelector or gridRowSelectionStateSelector selectors instead.

  • The selectedGridRowsSelector has been renamed to gridRowSelectionIdsSelector.

  • The selectedGridRowsCountSelector has been renamed to gridRowSelectionCountSelector.

  • The data source feature and its related props are now stable.

     <DataGridPro
    -  unstable_dataSource={dataSource}
    -  unstable_dataSourceCache={cache}
    -  unstable_lazyLoading
    -  unstable_lazyLoadingRequestThrottleMs={100}
    +  dataSource={dataSource}
    +  dataSourceCache={cache}
    +  lazyLoading
    +  lazyLoadingRequestThrottleMs={100}
     />
  • The data source API is now stable.

    - apiRef.current.unstable_dataSource.getRows()
    + apiRef.current.dataSource.getRows()
  • The signature of unstable_onDataSourceError() has been updated to support future use-cases.

     <DataGrid
    -  unstable_onDataSourceError={(error: Error, params: GridGetRowsParams) => {
    -    if (params.filterModel) {
    -      // do something
    -    }
    -  }}
    +  unstable_onDataSourceError={(error: GridGetRowsError | GridUpdateRowError) => {
    +    if (error instanceof GridGetRowsError && error.params.filterModel) {
    +      // do something
    +    }
    +  }}
     />
  • Fix the type of the GridSortModel to allow readonly arrays.

  • GridSortItem interface is not exported anymore.

  • The showToolbar prop is now required to display the toolbar.

    It is no longer necessary to pass GridToolbar as a slot to display the default toolbar.

     <DataGrid
    +  showToolbar
    -  slots={{
    -    toolbar: GridToolbar,
    -  }}
     />

@mui/[email protected]

@mui/[email protected] pro

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

@mui/[email protected] premium

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

Date and Time Pickers

Breaking changes

  • The <DateRangePicker /> now uses a dialog instead of a tooltip to render their view when used with a single input range field.

@mui/[email protected]

@mui/[email protected] pro

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

Charts

Breaking changes

  • Charts array inputs are now readonly. Allowing externally defined as const to be used as a prop value of the React component.

    const xAxis = [{ position: 'bottom' }] as const
    <BarChart xAxis={xAxis} />
  • Replace topAxis, rightAxis, bottomAxis and leftAxis props by the position property in the axis config.
    If you were using them to place axis, set the position property to the corresponding value 'top' | 'right' | 'bottom' | 'left'.
    If you were disabling an axis by setting it to null, set its position to 'none'.

     <LineChart
       yAxis={[
         {
           scaleType: 'linear',
    +      position: 'right',
         },
       ]}
       series={[{ data: [1, 10, 30, 50, 70, 90, 100], label: 'linear' }]}
       height={400}
    -  rightAxis={{}}
     />
  • Remove position prop from ChartsXAxis and ChartsYAxis.
    The position prop has been removed from the ChartsXAxis and ChartsYAxis components. Configure it directly in the axis config.

     <ChartContainer
       yAxis={[
         {
           id: 'my-axis',
    +      position: 'right',
         },
       ]}
     >
    -  <ChartsYAxis axisId="my-axis" position="right" />
    +  <ChartsYAxis axisId="my-axis" />
     </ChartContainer>
  • Add minTickLabelGap to x-axis, which allows users to define the minimum gap, in pixels, between two tick labels. The default value is 4px. Make sure to check your charts as the spacing between tick labels might have changed.

@mui/[email protected]

Read more

v7.27.2

27 Feb 16:38
695d412
Compare
Choose a tag to compare

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

  • 🐞 Bugfixes
  • 🌍 Improve Hungarian (hu-HU) and Russian (ru-RU) locales on the Data Grid

Special thanks go out to the community contributors who have helped make this release possible:
@pcorpet, @noherczeg, @denpiligrim.
Following are all team members who have contributed to this release:
@MBilalShafi, @KenanYusuf.

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

v7.27.1

25 Feb 10:17
d1dec02
Compare
Choose a tag to compare

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

  • 🐞 Bugfixes
  • 🌍 Add Bangla (bn-BD) locale on the Data Grid and Date Pickers

Special thanks go out to the community contributors who have helped make this release possible:
@nusr, @officialkidmax.
Following are all team members who have contributed to this release:
@bernardobelchior, @MBilalShafi, @KenanYusuf.

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 and Time Pickers

@mui/[email protected]

@mui/[email protected] pro

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

Charts

@mui/[email protected]

@mui/[email protected] pro

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

v8.0.0-alpha.12

17 Feb 14:51
f2a285a
Compare
Choose a tag to compare
v8.0.0-alpha.12 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 data source is now available in the Community plan
  • ⚡ Improve Data Grid Excel export serialization performance
  • 🚫 Add "No columns" overlay to Data Grid
  • 🌍 Improve Polish (pl-PL) and Ukrainian (uk-UA) locales on the Data Grid
  • 🐞 Bugfixes

Special thanks go out to the community contributors who have helped make this release possible:
@Neonin, @nusr, and @pawelkula.
Following are all team members who have contributed to this release:
@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @oliviertassinari, @romgrk, and @mapache-salvaje.

Data Grid

Breaking changes

  • The main--hasSkeletonLoadingOverlay class has been renamed to main--hiddenContent and is now also applied when the "No columns" overlay is displayed.

  • The apiRef.current.forceUpdate() method was removed. Use selectors combined with useGridSelector() hook to react to changes in the state.

  • The selectors signature has been updated. They are only accepting apiRef as a first argument and instanceId is no longer the third argument.

    -mySelector(state, arguments, instanceId)
    +mySelector(apiRef, arguments)

@mui/[email protected]

@mui/[email protected] pro

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

@mui/[email protected] premium

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

Date and Time Pickers

Breaking changes

  • The aria-label on the <Clock /> component and Time Picker opening button has been fixed to rely on the set ampm property instead of defaulting to the user's locale.

  • The following unused formats have been removed from the adapters and can no longer be overridden via the dateFormats prop on the <LocalizationProvider /> component:

    • fullTime - please use fullTime12h and fullTime24h instead:
        <LocalizationProvider
          dateFormats={{
      -     fullTime: 'LT',
      +     fullTime12h: 'hh:mm A',
      +     fullTime24h: 'hh:mm',
          }}
        >
    • keyboardDateTime - please use keyboardDateTime12h and keyboardDateTime24h instead:
        <LocalizationProvider
          dateFormats={{
      -     keyboardDateTime: 'DD.MM.YYYY | LT',
      +     keyboardDateTime12h: 'DD.MM.YYYY | hh:mm A',
      +     keyboardDateTime24h: 'DD.MM.YYYY | hh:mm',
          }}
        >

@mui/[email protected]

  • [pickers] Fix time related aria labels to depend on ampm flag value (#16572) @LukasTy
  • [pickers] Remove unused adapter formats (#16522) @LukasTy

@mui/[email protected] pro

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

  • [DateRangePicker] Avoid unnecessary field section focusing (#16474) @LukasTy

Charts

Breaking changes

  • The useSeries hook family has been stabilized and renamed accordingly — Learn more

@mui/[email protected]

@mui/[email protected] pro

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

Tree View

@mui/[email protected]

Internal changes.

@mui/[email protected] pro

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

Docs

Core

v7.27.0

17 Feb 10:30
c505f40
Compare
Choose a tag to compare

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

  • ⚡ Improve Data Grid Excel export serialization performance
  • 🐞 Bugfixes
  • 🌍 Improve Polish (pl-PL) and Ukrainian (uk-UA) locale on the Data Grid

Special thanks go out to the community contributors who have helped make this release possible:
@pawelkula, @Neonin.
Following are all team members who have contributed to this release:
@cherniavskii, @JCQuintas, @oliviertassinari, @arminmeh and @LukasTy

Data Grid

@mui/[email protected]

@mui/[email protected] pro

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

@mui/[email protected] premium

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

Date and Time Pickers

@mui/[email protected]

Internal changes.

@mui/[email protected] pro

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

  • [DateRangePicker] Avoid unnecessary field section focusing (#16569) @LukasTy

Charts

@mui/[email protected]

Internal changes.

@mui/[email protected] pro

Core

  • [test] Fix Data Grid data source error test on React 18 (#16565) @arminmeh