@mui/x-date-pickers - npm Package Versions

8.0.0-beta.0

<img width="100%" alt="MUI X v8 Beta is live" src="https://github.com/user-attachments/assets/61ec4dd8-c946-456b-8b45-d51de8772f5d">

Mar 18, 2025

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

7.27.3

Mar 7, 2025

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.

<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->

Data Grid

@mui/x-data-grid@7.27.3

• [DataGrid] Fix aria-hidden console error when scrollbar is dragged (#16834) @arminmeh
• [DataGrid] Fix scroll jump with dynamic row height (#16801) @cherniavskii

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

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

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

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

Date and Time Pickers

@mui/x-date-pickers@7.27.3

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

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

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

Core

• [infra] Update contributor acknowledgment wording (#16753) @michelengelen

8.0.0-alpha.14

Mar 7, 2025

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! <img width="418" alt="Screenshot 2025-01-31 at 12 22 31" src="https://github.com/user-attachments/assets/8cd26821-5f11-46bf-a9bb-34d212880a47" />
• 🎁 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.

<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->

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/x-data-grid@8.0.0-alpha.14

• [DataGrid] Fix aria-hidden console error when scrollbar is dragged (#16829) @arminmeh
• [DataGrid] Fix scroll jump with dynamic row height (#16763) @cherniavskii
• [DataGrid] New <Toolbar /> component (#14611) @KenanYusuf
• [DataGrid] Use new toolbar by default (#16814) @KenanYusuf
• [DataGrid] Remove the quick filtering on a given column (#16738) @vadimka123

@mui/x-data-grid-pro@8.0.0-alpha.14

Same changes as in @mui/x-data-grid@8.0.0-alpha.14.

@mui/x-data-grid-premium@8.0.0-alpha.14

Same changes as in @mui/x-data-grid-pro@8.0.0-alpha.14.

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/x-date-pickers@8.0.0-alpha.14

• [DateTimePicker] Use Digital Clock in all component variants (#16678) @LukasTy
• [fields] Always use props.value as the source of truth when defined (#15875) @flaviendelangle
• [fields] Fix Fields aria relationship with helperText (#16821) @LukasTy
• [pickers] Add TValidationProps generic to the PickerManager interface (#16832) @flaviendelangle
• [pickers] Fix edge property setting in different button position cases (#16838) @LukasTy
• [pickers] Fix typo in JSDoc (#16831) @flaviendelangle
• [pickers] Refactor the files in the usePicker folder (#16680) @flaviendelangle

@mui/x-date-pickers-pro@8.0.0-alpha.14

Same changes as in @mui/x-date-pickers@8.0.0-alpha.14.

Charts

@mui/x-charts@8.0.0-alpha.14

• [charts] Fix undefined behaving differently from missing value for axis size (#16844) @bernardobelchior
• [charts] Fix x-axis text anchor default when language is RTL (#16836) @bernardobelchior
• [charts] Add Radar chart (#16406) @alexfauquette
• [charts] Move series default color generation in the series config (#16752) @alexfauquette
• [charts] Render axis title within axis size (#16730) @bernardobelchior
• [charts] Split defaultizeAxis function into two (#16745) @bernardobelchior
• [charts] Warn if axes data don't have enough elements (#16830) @alexfauquette
• [charts] XAxis: Add defaults for textAnchor and dominantBaseline based on angle (#16817) @bernardobelchior

@mui/x-charts-pro@8.0.0-alpha.14

Same changes as in @mui/x-charts@8.0.0-alpha.14, plus:

• [charts] Add Funnel chart (#14804) @JCQuintas

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/x-tree-view@8.0.0-alpha.14

• [TreeView] Clean the expansion and selection API methods (#16795) @flaviendelangle

@mui/x-tree-view-pro@8.0.0-alpha.14

Same changes as in @mui/x-tree-view@8.0.0-alpha.14.

Docs

• [docs] Fix padding package install on mobile (#16794) @oliviertassinari
• [docs] Typo fixes (#16835) @alexfauquette

Core

• [code-infra] Fix console warning in telemetry package (#16816) @JCQuintas
• [code-infra] Split date-picker test files (#16825) @JCQuintas
• [infra] Replace PR label check workflow with reusable version (#16762) @michelengelen
• [infra] Update label in priority-support issue template (#16767) @michelengelen
• [test] Add timeout to flaky screenshot tests (#16852) @LukasTy

8.0.0-alpha.13

Feb 28, 2025

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.

<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->

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:

  • If an initial columnVisibilityModel is provided, it resets to that model.
  • If a controlled columnVisibilityModel is provided, it resets to the first model value.
  • 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,
  -  }}
   />
  

7.27.1

Feb 25, 2025

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.

<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->

Data Grid

@mui/x-data-grid@7.27.1

• [DataGrid] Fix the pagination unexpected behavior when using -1 for "All" rows per page (#16485) @nusr
• [DataGrid] Extract getRowId() API method as a selector (#16574) @MBilalShafi
• [DataGrid] Fix scrollbars overlapping cells on mount (#16653) @KenanYusuf
• [l10n] Add Bangla (bn-BD) locale (#16649) @officialkidmax

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

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

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

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

Date and Time Pickers

@mui/x-date-pickers@7.27.1

• [l10n] Add Bangla (bn-BD) locale (#16649) @officialkidmax

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

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

Charts

@mui/x-charts@7.27.1

• [charts] Fix empty series array in pie chart (#16657) @bernardobelchior

@mui/x-charts-pro@7.27.1

Same changes as in @mui/x-charts@7.27.1.

8.0.0-alpha.12

Feb 17, 2025

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)
  

7.27.0

Feb 17, 2025

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

• [DataGrid] Add resetPageOnSortFilter prop that resets the page after sorting and filtering (#16580) @arminmeh
• [DataGrid] Avoid undefined value for pagination rowCount (#16558) @cherniavskii
• [l10n] Improve Polish (pl-PL) locale (#16594) @pawelkula
• [l10n] Improve Ukrainian (uk-UA) locale (#16593) @Neonin

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

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

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

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

• [DataGridPremium] Fix Excel export Web Worker demo not working in dev mode (#16532) @cherniavskii
• [DataGridPremium] Improve Excel export serialization performance (#16545) @cherniavskii
• [DataGridPremium] Namespace Excel export worker (#16539) @oliviertassinari

Date and Time Pickers

@mui/x-date-pickers@7.27.0

Internal changes.

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

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

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

Charts

@mui/x-charts@7.27.0

Internal changes.

@mui/x-charts-pro@7.27.0

• [charts-pro] Fix automatic type overloads (#16579) @JCQuintas

Core

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

8.0.0-alpha.11

Feb 7, 2025

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

• ⚡ Mount and resize performance improvements for the Data Grid

Special thanks go out to the community contributors who have helped make this release possible: @lauri865. Following are all team members who have contributed to this release: @alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @Janpot, @KenanYusuf, @LukasTy, @MBilalShafi, @noraleonte, @romgrk.

<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->

Data Grid

Breaking changes

• createUseGridApiEventHandler() is not exported anymore.

• The filteredRowsLookup object of the filter state does not contain true values anymore. If the row is filtered out, the value is false. Otherwise, the row id is not present in the object. This change only impacts you if you relied on filteredRowsLookup to get ids of filtered rows. In this case,use gridDataRowIdsSelector selector to get row ids and check filteredRowsLookup for false values:

   const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
  -const filteredRowIds = Object.keys(filteredRowsLookup).filter((rowId) => filteredRowsLookup[rowId] === true);
  +const rowIds = gridDataRowIdsSelector(apiRef);
  +const filteredRowIds = rowIds.filter((rowId) => filteredRowsLookup[rowId] !== false);
  

• The visibleRowsLookup state does not contain true values anymore. If the row is not visible, the value is false. Otherwise, the row id is not present in the object:

   const visibleRowsLookup = gridVisibleRowsLookupSelector(apiRef);
  -const isRowVisible = visibleRowsLookup[rowId] === true;
  +const isRowVisible = visibleRowsLookup[rowId] !== false;
  

7.26.0

Feb 7, 2025

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

• ⚡ Mount and resize performance improvements for the Data Grid
• 🐞 Bugfixes

Special thanks go out to the community contributors who have helped make this release possible: @lauri865. Following are all team members who have contributed to this release: @arminmeh, @noraleonte, @LukasTy, @KenanYusuf, @flaviendelangle.

<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->

Data Grid

@mui/x-data-grid@7.26.0

• [DataGrid] Avoid <GridRoot /> double-render pass on mount in SPA mode (#16480) @lauri865

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

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

• [DataGridPro] Fix the return type of useGridApiContext() for Pro and Premium packages on React < 19 (#16446) @arminmeh

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

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

• [DataGridPremium] Fix "no rows" overlay not showing with active aggregation (#16468) @KenanYusuf

Date and Time Pickers

@mui/x-date-pickers@7.26.0

Internal changes.

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

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

• [DateRangePicker] Fix currentMonthCalendarPosition prop behavior on mobile (#16457) @LukasTy
• [DateRangePicker] Fix vertical alignment for multi input fields (#16490) @noraleonte

Charts

@mui/x-charts@7.26.0

Internal changes.

@mui/x-charts-pro@7.26.0

Same changes as in @mui/x-charts@7.26.0.

Tree View

@mui/x-tree-view@7.26.0

Internal changes.

@mui/x-tree-view-pro@7.26.0

Same changes as in @mui/x-tree-view@7.26.0.

Core

• [core] Fix corepack and pnpm installation in CircleCI (#16452) @flaviendelangle