@mui/x-internals
Shared utilities used by MUI X packages. This package should never be installed or used directly.
Utility functions for the MUI X packages (internal use only).
Shared utilities used by MUI X packages. This package should never be installed or used directly.
For full v7 changelog, please refer to the v.7x branch.
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
Apr 17, 2025
We're excited to announce the first v8 stable release! 🎉🚀
This is now the officially supported major version, where we'll keep rolling out new features, bug fixes, and improvements. Migration guides are available with a complete list of the breaking changes:
Here are the highlights from alpha and beta releases included in this stable release:
🎁 @mui/material@7
support – see the Material UI v7 upgrade guide.
🔄 Pivoting.
🎨 Improved Data Grid theming and add default background color.
📊 New Pro chart: Funnel.
margin
and axis-size
).🚫 Removed react-spring
dependency from @mui/x-charts
.
🚀 New Time Range Picker component.
🔁 Support automatic parents and children selection for the Rich Tree View components.
Below are the changes since the last beta release:
@mui/x-data-grid@8.0.0
@mui/x-data-grid-pro@8.0.0
Same changes as in @mui/x-data-grid@8.0.0
, plus:
@mui/x-data-grid-premium@8.0.0
Same changes as in @mui/x-data-grid-pro@8.0.0
, plus:
groupingValueGetter
for row grouping on the server (#17376) @cherniavskii@mui/x-date-pickers@8.0.0
<input />
but the field expects the accessible DOM structure (#17237) @flaviendelangleEnter
press with accessible DOM structure (#17328) @LukasTydisabled=true
(#17215) @flaviendelangle@mui/x-date-pickers-pro@8.0.0
Same changes as in @mui/x-date-pickers@8.0.0
, plus:
@mui/x-charts@8.0.0
slotProps.legend.hidden
to migration docs (#17379) @bernardobelchiorAnimationContext
into a plugin (#17299) @bernardobelchiorbarElementClasses
(#17273) @10tacionuseAnimate
hook (#17162) @bernardobelchioruseAnimate
test flakiness (#17372) @bernardobelchioruseEventCallback
to memoize onZoomChange
without triggering a re-render (#17233) @JCQuintasChartDataProvider
(#17403) @bernardobelchior@mui/x-charts-pro@8.0.0
Same changes as in @mui/x-charts@8.0.0
, plus:
requestAnimationFrame
(#17137) @JCQuintas@mui/x-tree-view@8.0.0
@mui/x-tree-view-pro@8.0.0
Same changes as in @mui/x-tree-view@8.0.0
.
ownerState
changes (#17151) @flaviendelangleResponsiveChartContainer
migration guide (#17364) @MonstraGTelemetryContextType
(#17282) @oliviertassinari__RELEASE_INFO__
is managed (#17416) @LukasTyvitest
changes (#17247) @JCQuintasvitest
(#17251) @JCQuintasclock=fake
from pickers tests (#17225) @JCQuintasApr 3, 2025
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
react-spring
as a dependency of @mui/x-charts
Team members who have contributed to this release: @bernardobelchior, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @oliviertassinari, @noraleonte, @romgrk, @alexfauquette.
The list view feature and its related props are now stable.
The unstable_listColumn
prop has been renamed to listViewColumn
.
The GridListColDef
type has been renamed to GridListViewColDef
.
-const listViewColDef: GridListColDef = {
+const listViewColDef: GridListViewColDef = {
field: 'listColumn',
renderCell: ListViewCell,
};
<DataGridPro
- unstable_listView
- unstable_listColumn={listViewColDef}
+ listView
+ listViewColumn={listViewColDef}
/>
The useGridApiEventHandler()
hook has been renamed to useGridEvent()
.
useGridApiOptionHandler()
hook has been renamed to useGridEventPriority()
.@mui/x-data-grid@8.0.0-beta.3
useGridApiEventHandler()
to useGridEvent()
(#17159) @romgrk@mui/x-data-grid-pro@8.0.0-beta.3
Same changes as in @mui/x-data-grid@8.0.0-beta.3
, plus:
@mui/x-data-grid-premium@8.0.0-beta.3
Same changes as in @mui/x-data-grid-pro@8.0.0-beta.3
.
@mui/x-date-pickers@8.0.0-beta.3
nextOrAccept
action bar action (#17037) @flaviendelangle@mui/x-date-pickers-pro@8.0.0-beta.3
Same changes as in @mui/x-date-pickers@8.0.0-beta.3
.
Removed react-spring
as a dependency of @mui/x-charts
.
A consequence of this change is that the props of some slots have been changed because the SpringValue
wrapper has been removed. The affected slots and props are:
x
, y
, width
and height
props of the bar
slot are now number
;startAngle
, endAngle
, innerRadius
, outerRadius
, arcLabelRadius
, cornerRadius
and paddingAngle
props of pieArc
and pieArcLabel
slot are now number
.Additionally, the pieArc
slot now receives a skipAnimation
prop to configure whether animations should be enabled or disabled.
Tick labels in the y-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 y-axis size by increasing its width property.
The tooltip DOM structure is modified to improve accessibility. If you relied on it to apply some style or run tests, you might be impacted by this modification.
@mui/x-charts@8.0.0-beta.3
react-spring
(#16961) @bernardobelchiorreact-spring
(#17123) @bernardobelchior@mui/x-charts-pro@8.0.0-beta.3
Same changes as in @mui/x-charts@8.0.0-beta.3
.
@mui/x-tree-view@8.0.0-beta.3
Internal changes.
@mui/x-tree-view-pro@8.0.0-beta.3
Same changes as in @mui/x-tree-view@8.0.0-beta.3
.
@mui/x-codemod@8.0.0-beta.3
listView
prop rename codemod (#17220) @MBilalShafi@mui
dependency versions (#17160) @LukasTytest:unit
warning (#17224) @JCQuintasdescribeValidation
(#17150) @JCQuintasdescribeValue
(#17199) @JCQuintasMar 27, 2025
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community members for their valuable contributions: @lhilgert9. Following are all team members who have contributed to this release: @alexfauquette, @arminmeh, @flaviendelangle, @hasdfa, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @mnajdova, @romgrk.
@mui/x-data-grid@8.0.0-beta.2
@mui/styled-engine-sc
(#17154) @KenanYusuf@mui/x-data-grid-pro@8.0.0-beta.2
Same changes as in @mui/x-data-grid@8.0.0-beta.2
, plus:
@mui/x-data-grid-premium@8.0.0-beta.2
Same changes as in @mui/x-data-grid-pro@8.0.0-beta.2
.
@mui/x-date-pickers@8.0.0-beta.2
@mui/x-date-pickers-pro@8.0.0-beta.2
Same changes as in @mui/x-date-pickers@8.0.0-beta.2
.
@mui/x-charts@8.0.0-beta.2
@mui/x-charts-pro@8.0.0-beta.2
Same changes as in @mui/x-charts@8.0.0-beta.2
.
@mui/x-tree-view@8.0.0-beta.2
Internal changes.
@mui/x-tree-view-pro@8.0.0-beta.2
Same changes as in @mui/x-tree-view@8.0.0-beta.2
.
@mui/x-codemod@8.0.0-beta.1
ExportExcel
component (#17110) @KenanYusuf@mui/styles
dependency & patches (#17071) @mnajdovaisDeepEqual
to @mui/x-internals (#17129) @JCQuintastest_regressions
step from React 18 pipeline (#17108) @LukasTyissue-status-label-handler.yml
@michelengelenMar 21, 2025
We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community members for their valuable contributions: @jyash97. Following are all team members who have contributed to this release: @alexfauquette, @arminmeh, @flaviendelangle, @JCQuintas, @KenanYusuf.
@mui/x-data-grid@8.0.0-beta.1
forwardRef
to ClickAwayListener
(#17049) @arminmeh@mui/x-data-grid-pro@8.0.0-beta.1
Same changes as in @mui/x-data-grid@8.0.0-beta.1
, plus:
checkboxSelectionVisibleOnly
and paginationMode="server"
(#17026) @arminmeh@mui/x-data-grid-premium@8.0.0-beta.1
Same changes as in @mui/x-data-grid-pro@8.0.0-beta.1
, plus:
@mui/x-date-pickers@8.0.0-beta.1
useField
hook (part 1) (#16944) @flaviendelangledoesSectionFormatHaveLeadingZeros
(#17051) @flaviendelangledisableOpenPicker
prop (#17040) @flaviendelanglecleanLeadingZeros
method (#17063) @flaviendelangleownerState
in PickersDay
and DateRangePickerDay
(#17035) @flaviendelangle@mui/x-date-pickers-pro@8.0.0-beta.1
Same changes as in @mui/x-date-pickers@8.0.0-beta.1
, plus:
@mui/x-charts@8.0.0-beta.1
@mui/x-charts-pro@8.0.0-beta.1
Same changes as in @mui/x-charts@8.0.0-beta.1
, plus:
@mui/x-tree-view@8.0.0-beta.1
Internal changes.
@mui/x-tree-view-pro@8.0.0-beta.1
Same changes as in @mui/x-tree-view@8.0.0-beta.1
.
Mar 18, 2025
We'd like to offer a big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
@mui/material
version 7 in all X packages@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.
Below are the highlights of the alpha releases leading up to this beta release:
⚛️ React 19 support.
🛠️ New and improved Data Grid Toolbar component.
🎨 Improve Data Grid theming and add default background color.
📊 New Pro chart: Funnel.
📊 Add a new API to support multiple axes (decouple margin
and axis-size
)
🔁 Support automatic parents and children selection for the Rich Tree View components.
@mui/x-data-grid@8.0.0-beta.0
toggleMenu
click (#16845) @michelengelenQuickFilter
debounce overriding input value (#16856) @KenanYusufprintOptions
not respecting hideFooter
root prop (#14863) @k-rajat19processRowUpdate()
error if the row is removed before it is executed (#16741) @arminmeh@mui/x-data-grid-pro@8.0.0-beta.0
Same changes as in @mui/x-data-grid@8.0.0-beta.0
, plus:
@mui/x-data-grid-premium@8.0.0-beta.0
Same changes as in @mui/x-data-grid-pro@8.0.0-beta.0
, plus:
useClearableField
hook has been removed.
The custom field component now receives the clearable
and onClear
props — Learn more.ExportedUseClearableFieldProps
, UseClearableFieldSlots
, UseClearableFieldSlotProps
, and UseClearableFieldResponse
types have been removed — Learn more.@mui/x-date-pickers@8.0.0-beta.0
props.value
as the source of truth when defined (#16853) @flaviendelanglefocusedView
to time renderers (#16869) @LukasTyuseClearableField
hook (#16859) @LukasTy@mui/x-date-pickers-pro@8.0.0-beta.0
Same changes as in @mui/x-date-pickers@8.0.0-beta.0
, plus:
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/x-charts@8.0.0-beta.0
forwardRef
(#16894) @bernardobelchiorisInteracting
behavior directly to community code (#16999) @JCQuintasfireEvent
usage from tests (#17006) @JCQuintasuseIsClient
(#16937) @bernardobelchior@mui/x-charts-pro@8.0.0-beta.0
Same changes as in @mui/x-charts@8.0.0-beta.0
.
@mui/x-tree-view@8.0.0-beta.0
Internal changes.
@mui/x-tree-view-pro@8.0.0-beta.0
Same changes as in @mui/x-tree-view@8.0.0-beta.0
.
showQuickFilter: true
toolbar prop from demos (#17003) @KenanYusuf@mui/utils
dependency to only v7 (#16928) @Janpotcimg/node
image version (#16964) @LukasTyTanstack query
renovate group (#16989) @LukasTypull_request
to pull_request_target
(#16902) @michelengelenMar 7, 2025
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
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.
density
prop. A density selector can be added to a custom toolbar passed to slots.toolbar
. See Toolbar component—Settings menu for an example.slotProps={{ toolbar: { showQuickFilter: false } }}
to hide it.<GridSaveAltIcon />
icon is not exported anymore. Import SaveAlt
from @mui/icons-material
instead.@mui/x-data-grid@8.0.0-alpha.14
aria-hidden
console error when scrollbar is dragged (#16829) @arminmeh<Toolbar />
component (#14611) @KenanYusuf@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
.
onChange
when the date is partially filled — Learn more.@mui/x-date-pickers@8.0.0-alpha.14
props.value
as the source of truth when defined (#15875) @flaviendelanglehelperText
(#16821) @LukasTyTValidationProps
generic to the PickerManager
interface (#16832) @flaviendelangleedge
property setting in different button position cases (#16838) @LukasTyusePicker
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
.
@mui/x-charts@8.0.0-alpha.14
undefined
behaving differently from missing value for axis size (#16844) @bernardobelchiordefaultizeAxis
function into two (#16745) @bernardobelchiortextAnchor
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:
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
@mui/x-tree-view-pro@8.0.0-alpha.14
Same changes as in @mui/x-tree-view@8.0.0-alpha.14
.
Feb 28, 2025
We'd like to offer a big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:
margin
and axis-size
. A new API to support multiple axes (#16418) @JCQuintasSpecial 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.
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:
columnVisibilityModel
is provided, it resets to that model.columnVisibilityModel
is provided, it resets to the first model value.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.
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/x-data-grid@8.0.0-alpha.13
showToolbar
prop to enable default toolbar (#16687) @KenanYusufshowColumnVerticalBorder
prop (#16715) @KenanYusufSelect
menuprops onClose()
(#16643) @romgrkGridSortItem
internal (#16732) @arminmehsx
prop usage with styled()
components (#16665) @KenanYusufAutocomplete
(#16390) @romgrkonDataSourceError()
callback (#16718) @MBilalShafiGridSortModel
(#16627) @pcorpet@mui/x-data-grid-pro@8.0.0-alpha.13
Same changes as in @mui/x-data-grid@8.0.0-alpha.13
, plus:
LicenseInfo
reexports (#16671) @cherniavskii@mui/x-data-grid-premium@8.0.0-alpha.13
Same changes as in @mui/x-data-grid-pro@8.0.0-alpha.13
, plus:
valueGetter
to get row group keys (#16016) @cherniavskii<DateRangePicker />
now uses a dialog
instead of a tooltip
to render their view when used with a single input range field.@mui/x-date-pickers@8.0.0-alpha.13
@mui/x-date-pickers-pro@8.0.0-alpha.13
Same changes as in @mui/x-date-pickers@8.0.0-alpha.13
.
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/x-charts@8.0.0-alpha.13
labelMarkType
(#16739) @bernardobelchiorminTickLabelGap
to x-axis (#16548) @bernardobelchiormargin
and axis-size
(#16418) @JCQuintastheme.shape
error in the tooltip (#16748) @alexfauquettedefaultizeAxis
function type-safe (#16642) @JCQuintasseries.data
readonly (#16645) @JCQuintasChartsUsageDemo
to TSX and removed NoSnap (#16686) @JCQuintasposition='none'
axes from rendering (#16727) @JCQuintas@mui/x-charts-pro@8.0.0-alpha.13
Same changes as in @mui/x-charts@8.0.0-alpha.13
, plus:
@mui/x-tree-view@8.0.0-alpha.13
Internal changes.
@mui/x-tree-view-pro@8.0.0-alpha.13
Same changes as in @mui/x-tree-view@8.0.0-alpha.13
.
@mui/x-codemod@8.0.0-alpha.13
vitest
(#16755) @JCQuintasvitest
(#16757) @JCQuintasFeb 17, 2025
We'd like to offer a big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
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.
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/x-data-grid@8.0.0-alpha.12
apiRef
as first argument (#16198) @arminmehundefined
value for pagination rowCount
(#16488) @cherniavskiigetRowId()
API method as a selector (#16487) @MBilalShafionClock
prop of the base Select slot (#16557) @romgrkapiRef.current.forceUpdate()
method (#16560) @MBilalShafi-1
for "All" rows per page (#16485) @nusr@mui/x-data-grid-pro@8.0.0-alpha.12
Same changes as in @mui/x-data-grid@8.0.0-alpha.12
.
@mui/x-data-grid-premium@8.0.0-alpha.12
Same changes as in @mui/x-data-grid-pro@8.0.0-alpha.12
, plus:
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/x-date-pickers@8.0.0-alpha.12
ampm
flag value (#16572) @LukasTy@mui/x-date-pickers-pro@8.0.0-alpha.12
Same changes as in @mui/x-date-pickers@8.0.0-alpha.12
, plus:
useSeries
hook family has been stabilized and renamed accordingly — Learn more@mui/x-charts@8.0.0-alpha.12
test:performance:browser
script #16600 @bernardobelchioruseXxxSeries
hooks (#16552) @JCQuintasuseXxxSeries
into useXxxSeriesContext
(#16546) @JCQuintasuseXxxSeries
support array of ids and document them (#15545) @JCQuintasvalueFormatter
(#16555) @alexfauquettecolors
prop from SparkLineChart
. (#16494) @bernardobelchioruseSeries
, usePieSeries
, etc.) (#16459) @bernardobelchior@mui/x-charts-pro@8.0.0-alpha.12
Same changes as in @mui/x-charts@8.0.0-alpha.12
.
@mui/x-tree-view@8.0.0-alpha.12
Internal changes.
@mui/x-tree-view-pro@8.0.0-alpha.12
Same changes as in @mui/x-tree-view@8.0.0-alpha.12
.
next
releases (#16423) @LukasTyFeb 7, 2025
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
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.
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;
@mui/x-data-grid@8.0.0-alpha.11
<GridRoot />
double-render pass on mount in SPA mode (#15648) @lauri865MenuList
import (#16444) @romgrkuseGridApiEventHandler()
(#16479) @romgrk@mui/x-data-grid-pro@8.0.0-alpha.11
Same changes as in @mui/x-data-grid@8.0.0-alpha.11
, plus:
useGridApiContext()
for Pro and Premium packages on React < 19 (#16441) @arminmeh@mui/x-data-grid-premium@8.0.0-alpha.11
Same changes as in @mui/x-data-grid-pro@8.0.0-alpha.11
, plus:
@mui/x-date-pickers@8.0.0-alpha.11
Internal changes.
@mui/x-date-pickers-pro@8.0.0-alpha.11
Same changes as in @mui/x-date-pickers@8.0.0-alpha.11
, plus:
currentMonthCalendarPosition
prop behavior on mobile (#16455) @LukasTy@mui/x-charts@8.0.0-alpha.11
color
prop to Sparkline
and deprecate colors
(#16477) @bernardobelchior@mui/x-charts-pro@8.0.0-alpha.11
Same changes as in @mui/x-charts@8.0.0-alpha.11
.
@mui/x-tree-view@8.0.0-alpha.11
Internal changes.
@mui/x-tree-view-pro@8.0.0-alpha.11
Same changes as in @mui/x-tree-view@8.0.0-alpha.11
.
react-transition-group
transitions in unit testing (#16288) @lauri865Jan 30, 2025
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributors who have helped make this release possible: @k-rajat19, @lauri865, @mateuseap. Following are all team members who have contributed to this release: @alexfauquette, @flaviendelangle, @JCQuintas, @KenanYusuf, @MBilalShafi, @romgrk, @arminmeh.
viewportInnerSize.width
now includes pinned columns' widths (fixes recursive loops in updating dimensions <-> columns)The Data Grid now has a default background color, and its customization has moved from theme.mixins.MuiDataGrid
to theme.palette.DataGrid
with the following properties:
bg
: Sets the background color of the entire grid (new property)headerBg
: Sets the background color of the header (previously named containerBackground
)pinnedBg
: Sets the background color of pinned rows and columns (previously named pinnedBackground
) const theme = createTheme({
- mixins: {
- MuiDataGrid: {
- containerBackground: '#f8fafc',
- pinnedBackground: '#f1f5f9',
- },
- },
+ palette: {
+ DataGrid: {
+ bg: '#f8fafc',
+ headerBg: '#e2e8f0',
+ pinnedBg: '#f1f5f9',
+ },
+ },
});
The detailPanels
, pinnedColumns
, and pinnedRowsRenderZone
classes have been removed.
Return type of the useGridApiRef()
hook and the type of apiRef
prop are updated to explicitly include the possibilty of null
. In addition to this, useGridApiRef()
returns a reference that is initialized with null
instead of {}
.
Only the initial value and the type are updated. Logic that initializes the API and its availability remained the same, which means that if you could access API in a particular line of your code before, you are able to access it as well after this change.
Depending on the context in which the API is being used, you can decide what is the best way to deal with null
value. Some options are:
apiRef
is not null
apiRef
is null
apiRef
is null
@mui/x-data-grid@8.0.0-alpha.10
renderContext
calculation with scroll bounce / over-scroll (#16297) @lauri865gridClasses
(#16256) @mateuseapnull
in the return type of the useGridApiRef()
hook (#16353) @arminmehonClick
prop on toolbar buttons (#16356) @KenanYusuficonContainer
during autosizing (#16399) @michelengelen@mui/x-data-grid-pro@8.0.0-alpha.10
Same changes as in @mui/x-data-grid@8.0.0-alpha.10
, plus:
useGridApiRef
for Pro and Premium packages on React < 19 (#16328) @arminmeh@mui/x-data-grid-premium@8.0.0-alpha.10
Same changes as in @mui/x-data-grid-pro@8.0.0-alpha.10
.
field
slot no longer receives the ref
, disabled
, className
, sx
, label
, name
, formatDensity
, enableAccessibleFieldDOMStructure
, selectedSections
, onSelectedSectionsChange
and inputRef
props — Learn moreMuiPickersPopper
theme entry have been renamed MuiPickerPopper
and some of its props have been removed — Learn more@mui/x-date-pickers@8.0.0-alpha.10
<PickersPopper />
(#16319) @flaviendelanglePickerContextValue
properties (#16327) @flaviendelangle@mui/x-date-pickers-pro@8.0.0-alpha.10
Same changes as in @mui/x-date-pickers@8.0.0-alpha.10
.
legend.position.horizontal
from "left" | "middle" | "right"
to "start" | "center" | "end"
.
This is to align with the CSS values and reflect the RTL ability of the legend component.blueberryTwilightPalette
from @mui/x-charts/colorPalettes
and set it on the colors
property of charts.id
property is now optional on the Pie
and Scatter
data types.@mui/x-charts@8.0.0-alpha.10
bumpX
and bumpY
curve options (#16318) @JCQuintastooltipGetter
to seriesConfig
(#16331) @JCQuintaslegend.position.horizontal
from "left" | "middle" | "right"
to "start" | "center" | "end"
(#16315) @JCQuintasid
optional on PieValueType
and ScatterValueType
(#16389) @JCQuintas@mui/x-charts-pro@8.0.0-alpha.10
Same changes as in @mui/x-charts@8.0.0-alpha.10
.
@mui/x-tree-view@8.0.0-alpha.10
Internal changes.
@mui/x-tree-view-pro@8.0.0-alpha.10
Same changes as in @mui/x-tree-view@8.0.0-alpha.10
.
Jan 24, 2025
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributors who have helped make this release possible: @AxharKhan, @lauri865, @mapache-salvaje, @mostafaRoosta74.
Following are all team members who have contributed to this release: @alexfauquette, @cherniavskii, @Janpot, @JCQuintas, @LukasTy, @arminmeh.
@mui/x-data-grid@v8.0.0-alpha.9
apiRef
to be MutableRefObject
for React versions < 19 (#16279) @arminmeh@mui/x-data-grid-pro@v8.0.0-alpha.9
Same changes as in @mui/x-data-grid@v8.0.0-alpha.9
.
@mui/x-data-grid-premium@v8.0.0-alpha.9
Same changes as in @mui/x-data-grid-pro@v8.0.0-alpha.9
.
@mui/x-date-pickers@v8.0.0-alpha.9
all
selected state on section edit (#16223) @LukasTy@mui/x-date-pickers-pro@v8.0.0-alpha.9
Same changes as in @mui/x-date-pickers@v8.0.0-alpha.9
.
The experimentalMarkRendering
prop has been removed from the LineChart
component.
The line mark are now <circle />
element by default.
And you can chose another shape by adding a shape
property to your line series.
The codemod only removes the experimentalMarkRendering
prop.
If you relied on the fact that marks were path
elements, you need to update your logic.
@mui/x-charts@v8.0.0-alpha.9
<circle />
instead of <path />
for line marks by default (#15220) @alexfauquette@mui/x-charts-pro@v8.0.0-alpha.9
Same changes as in @mui/x-charts@v8.0.0-alpha.9
, plus:
pro
components watermark (#16222) @JCQuintas@mui/x-tree-view@v8.0.0-alpha.9
Internal changes.
@mui/x-tree-view-pro@v8.0.0-alpha.9
Same changes as in @mui/x-tree-view@v8.0.0-alpha.9
.
domainLimit
definition (#16270) @alexfauquetteJan 16, 2025
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
🍬 Improved design for Data Grid Header filters
🔄 Data Grid Scroll restoration
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, @romgrk, @samuelsycamore, @alexfauquette, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen.
slotProps={{ headerFilterCell: { showClearIcon: true } }}
to restore the clear button in the cell.@mui/x-data-grid@8.0.0-alpha.8
@mui/x-data-grid-pro@8.0.0-alpha.8
Same changes as in @mui/x-data-grid@8.0.0-alpha.8
, plus:
@mui/x-data-grid-premium@8.0.0-alpha.8
Same changes as in @mui/x-data-grid-pro@8.0.0-alpha.8
.
useMultiInputDateRangeField
, useMultiInputTimeRangeField
, and useMultiInputDateTimeRangeField
hooks have been removed in favor of the new useMultiInputRangeField
hook — Learn morefield
slot no longer receives the value
, onChange
, timezone
, format
, disabled
, formatDensity
, enableAccessibleFieldDOMStructure
, selectedSections
and onSelectedSectionsChange
props — Learn more@mui/x-date-pickers@8.0.0-alpha.8
onRangePositionChange
into setRangePosition
in usePickerRangePositionContext
(#16189) @flaviendelangle@mui/x-date-pickers-pro@8.0.0-alpha.8
Same changes as in @mui/x-date-pickers@8.0.0-alpha.8
.
x
and y
axis now log a warning in dev mode. Axis ids should be unique to prevent internal issues.@mui/x-charts@8.0.0-alpha.8
offset
could be Infinite
(#16131) @JCQuintasuseChartGradientId
public (#16106) @JCQuintasskipAnimation
is set to true
(#16166) @alexfauquettertl
for gradient legend (#16115) @JCQuintas@mui/x-charts-pro@8.0.0-alpha.8
Same changes as in @mui/x-charts@8.0.0-alpha.8
.
@mui/x-tree-view@8.0.0-alpha.8
No changes since @mui/x-tree-view-pro@v8.0.0-alpha.7
.
@mui/x-tree-view-pro@8.0.0-alpha.8
Same changes as in @mui/x-tree-view@8.0.0-alpha.8
.
RefObject
(#16124) @arminmehreact
and react-dom
definitions to simplify dep resolving (#16160) @LukasTydate-fns-v2
(#16158) @LukasTyJan 9, 2025
We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributors who have helped make this release possible: @derek-0000, @josteinjhauge, @k-rajat19, @nusr, @tomashauser. Following are all team members who have contributed to this release: @cherniavskii, @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @arminmeh, @romgrk, @oliviertassinari.
@mui/x-data-grid@8.0.0-alpha.7
name
attribute to the checkbox selection column (#15178) @derek-0000@mui/x-data-grid-pro@8.0.0-alpha.7
Same changes as in @mui/x-data-grid@8.0.0-alpha.7
.
@mui/x-data-grid-premium@8.0.0-alpha.7
Same changes as in @mui/x-data-grid-pro@8.0.0-alpha.7
, plus:
date-fns
and date-fns-jalali
date library adapters have been renamed to better align with the current stable major versions — Learn morecloseOnSelect
and Action Bar actions
values - Learn morelayout
slot no longer receives the value
, onChange
and onSelectShortcut
props — Learn more.toolbar
slot no longer receives the value
, onChange
and isLandscape
props — Learn more.shortcuts
slot no longer receives the onChange
, isValid
and isLandscape
props — Learn more.PickerShortcutChangeImportance
type has been renamed PickerChangeImportance
— Learn more.layout
slot no longer receives the rangePosition
and onRangePositionChange
on range pickers — Learn more.toolbar
slot no longer receives the rangePosition
and onRangePositionChange
on range pickers — Learn more.tabs
slot no longer receives the rangePosition
and onRangePositionChange
on range pickers — Learn more.@mui/x-date-pickers@8.0.0-alpha.7
inputRef.current.focus
on accessibleFieldDOMStructure
(#15985) @LukasTysetValue
internally to update the picker value (#16056) @flaviendelanglemanager
(#15339) @flaviendelangle<PickersActionBar />
(#16071) @LukasTyNonEmptyDateRange
type (#16035) @flaviendelangleAdapterDateFns
into AdapterDateFnsV2
and AdapterDateFnsV3
into AdapterDateFns
(#16082) @LukasTyctx.onViewChange
to ctx.setView
and add it to the actions context (#16044) @flaviendelangledate-fns-jalali
v4 (#16011) @LukasTycloseOnSelect
and actionBar.actions
default values (#15944) @LukasTyusePickerContext()
and usePickerActionsContext()
instead of passing props to the shortcuts
and toolbar
slots (#15948) @flaviendelangle@mui/x-date-pickers-pro@8.0.0-alpha.7
Same changes as in @mui/x-date-pickers@8.0.0-alpha.7
.
DefaultChartsLegend
component, since it is now easier to create custom legends — Learn more.width
and height
properties of the charts now only apply to the svg
element, and not their wrappers, this might cause some layout shifts.slotProps.legend.direction
now accepts 'horizontal' | 'vertical'
instead of 'row' | 'column'
— Learn more.getSeriesToDisplay
function was removed in favor of the useLegend
hook. — Learn more.@mui/x-charts@8.0.0-alpha.7
@mui/x-charts-pro@8.0.0-alpha.7
Same changes as in @mui/x-charts@8.0.0-alpha.7
.
@mui/x-tree-view@8.0.0-alpha.7
@mui/x-tree-view-pro@8.0.0-alpha.7
Same changes as in @mui/x-tree-view@8.0.0-alpha.7
.
EditingWithDatePickers
demo (#15967) @k-rajat19LocalizationProvider
(#16084) @tomashauserrelease:version
docs (#16038) @cherniavskiitestSkipIf
and describeSkipIf
(#16049) @JCQuintasDec 26, 2024
We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributors who have helped make this release possible: @JoepVerkoelen, @k-rajat19, @lauri865. Following are all team members who have contributed to this release: @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @romgrk.
sanitizeFilterItemValue()
utility is not exported anymore.@mui/x-data-grid@8.0.0-alpha.6
renderContext
state in grid root for better scroll performance (#15986) @lauri865forwardRef
with a shim for forward compatibility (#15955) @lauri865@mui/x-data-grid-pro@8.0.0-alpha.6
Same changes as in @mui/x-data-grid@8.0.0-alpha.6
.
@mui/x-data-grid-premium@8.0.0-alpha.6
Same changes as in @mui/x-data-grid-pro@8.0.0-alpha.6
, plus:
@mui/x-date-pickers@8.0.0-alpha.6
usePickerContext()
and usePickerActionsContext()
to get the actions in the actionBar
slot and in internal components (#15843) @flaviendelangleusePickerContext()
to get the view-related props in the layout, toolbar and tabs slots (#15606) @flaviendelangle@mui/x-date-pickers-pro@8.0.0-alpha.6
Same changes as in @mui/x-date-pickers@8.0.0-alpha.6
.
@mui/x-charts@8.0.0-alpha.6
No changes since @mui/x-charts@v8.0.0-alpha.5
.
@mui/x-charts-pro@8.0.0-alpha.6
Same changes as in @mui/x-charts@8.0.0-alpha.6
.
@mui/x-tree-view@8.0.0-alpha.6
No changes since @mui/x-tree-view-pro@v8.0.0-alpha.5
.
@mui/x-tree-view-pro@8.0.0-alpha.6
Same changes as in @mui/x-tree-view@8.0.0-alpha.6
.
next-env.d.ts
changes (#15947) @JCQuintasDec 19, 2024
We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributors who have helped make this release possible: @good-jinu, @k-rajat19. Following are all team members who have contributed to this release: @alexfauquette, @cherniavskii, @flaviendelangle, @KenanYusuf, @LukasTy, @MBilalShafi, @romgrk.
Passing additional props (like data-*
, aria-*
) directly on the Data Grid component is no longer supported. To pass the props, use slotProps
:
.root
element, use slotProps.root
..main
element (the one with role="grid"
), use slotProps.main
.detailPanelExpandedRowIds
and onDetailPanelExpandedRowIdsChange
props use a Set
instead of an array:
-detailPanelExpandedRowIds?: GridRowId[];
+detailPanelExpandedRowIds?: Set<GridRowId>;
-onDetailPanelExpandedRowIdsChange?: (ids: GridRowId[], details: GridCallbackDetails) => void;
+onDetailPanelExpandedRowIdsChange?: (ids: Set<GridRowId>, details: GridCallbackDetails) => void;
apiRef.current.getExpandedDetailPanels
and apiRef.current.setExpandedDetailPanels
methods receive and return a Set
instead of an array.
gridDetailPanelExpandedRowIdsSelector
returns a Set
instead of an array.gridDetailPanelExpandedRowsHeightCacheSelector
was removed.@mui/x-data-grid@8.0.0-alpha.5
columnGroupHeaderHeight
prop in getTotalHeaderHeight
method (#15915) @k-rajat19<Badge />
to leaf import (#15879) @romgrk<ListItemText />
and <ListItemIcon />
to leaf import (#15869) @romgrkslotProps
to forward props to .main
and .root
elements (#15870) @MBilalShafi@mui/x-data-grid-pro@8.0.0-alpha.5
Same changes as in @mui/x-data-grid@8.0.0-alpha.5
, plus:
Set
for detailPanelExpandedRowIds
(#15835) @cherniavskii@mui/x-data-grid-premium@8.0.0-alpha.5
Same changes as in @mui/x-data-grid-pro@8.0.0-alpha.5
.
The <PickersMonth />
component has been moved inside the Month Calendar component — Learn more.
The <PickersYear />
component has been moved inside the Year Calendar component — Learn more.
@mui/x-date-pickers@8.0.0-alpha.5
PickersMonth
and PickersYear
from the theme and remove the div
wrapping each button (#15806) @flaviendelangleownerState
object on the <PickersTextField />
component (#15863) @flaviendelangle@mui/x-date-pickers-pro@8.0.0-alpha.5
Same changes as in @mui/x-date-pickers@8.0.0-alpha.5
.
@mui/x-charts@8.0.0-alpha.5
<ScatterChart />
value type if null
(#15917) @alexfauquette@mui/x-charts-pro@8.0.0-alpha.5
Same changes as in @mui/x-charts@8.0.0-alpha.5
.
@mui/x-tree-view@8.0.0-alpha.5
No changes since @mui/x-tree-view-pro@v8.0.0-alpha.4
.
@mui/x-tree-view-pro@8.0.0-alpha.5
Same changes as in @mui/x-tree-view@8.0.0-alpha.5
.
@mui/material-nextjs
dependency (#15925) @LukasTyDec 13, 2024
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributors who have helped make this release possible: @k-rajat19, @nusr, @rares985, @zivl. Following are all team members who have contributed to this release: @alexfauquette, @arminmeh, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi.
The selectors signature has been updated due to the support of arguments in the selectors. Pass undefined
as arguments
if the selector doesn't use any arguments.
-mySelector(state, instanceId)
+mySelector(state, arguments, instanceId)
The useGridSelector
signature has been updated due to the introduction of arguments parameter in the selectors. Pass undefined
as arguments
if the selector doesn't use any arguments.
-const output = useGridSelector(apiRef, selector, equals)
+const output = useGridSelector(apiRef, selector, arguments, equals)
The default variant for text fields and selects in the filter panel has been changed to outlined
.
<DataGrid
- unstable_rowSpanning
+ rowSpanning
/>
@mui/x-data-grid@8.0.0-alpha.4
<GridActionsCell />
(#15867) @k-rajat19columnsManagement
slot (#15817) @k-rajat19@mui/x-data-grid-pro@8.0.0-alpha.4
Same changes as in @mui/x-data-grid@8.0.0-alpha.4
, plus:
@mui/x-data-grid-premium@8.0.0-alpha.4
Same changes as in @mui/x-data-grid-pro@8.0.0-alpha.4
, plus:
valueOptions
for singleSelect
column type (#15739) @arminmeh@mui/x-date-pickers@8.0.0-alpha.4
usePicker
logic (#15763) @flaviendelangleownerState
property from isRtl
to layoutDirection
(#15803) @flaviendelangleownerState
in useClearableField
(#15776) @flaviendelangleownerState
in the toolbar components (#15777) @flaviendelangleownerState
object for the clock components and the desktop / mobile wrappers (#15669) @flaviendelangle@mui/x-date-pickers-pro@8.0.0-alpha.4
Same changes as in @mui/x-date-pickers@8.0.0-alpha.4
.
@mui/x-charts@8.0.0-alpha.4
@mui/x-charts-pro@8.0.0-alpha.4
Same changes as in @mui/x-charts@8.0.0-alpha.4
.
@mui/x-tree-view@8.0.0-alpha.4
No changes, releasing to keep the versions in sync.
@mui/x-tree-view-pro@8.0.0-alpha.4
Releasing to benefit from license package fix (#15814).
updateRows
method for list view demos (#15732) @KenanYusuf@type/react-test-renderer
dep (#15766) @LukasTyconsole.log
for the error message on Codesandbox to avoid rendering error (#15814) @arminmehDec 5, 2024
We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributors who have helped make this release possible: @ihsanberkozcan, @k-rajat19, @perezShaked. Following are all team members who have contributed to this release: @arminmeh, @cherniavskii, @flaviendelangle, @JCQuintas, @MBilalShafi, @noraleonte.
isRowSelectable
prop.rowPositionsDebounceMs
prop was removed.gridRowsDataRowIdToIdLookupSelector
selector was removed. Use the gridRowsLookupSelector
selector in combination with the getRowId()
API method instead.-const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
-const rowId = idToIdLookup[id]
+const rowsLookup = gridRowsLookupSelector(apiRef);
+const rowId = apiRef.current.getRowId(rowsLookup[id])
role
attribute to treegrid
if the Data Grid is used with row grouping feature.@mui/x-data-grid@8.0.0-alpha.3
isRowSelectable
(#15692) @MBilalShafigridRowsDataRowIdToIdLookupSelector
selector (#15698) @arminmehrowPositionsDebounceMs
prop (#15482) @k-rajat19@mui/x-data-grid-pro@8.0.0-alpha.3
Same changes as in @mui/x-data-grid@8.0.0-alpha.3
, plus:
@mui/x-data-grid-premium@8.0.0-alpha.3
Same changes as in @mui/x-data-grid-pro@8.0.0-alpha.3
, plus:
ariaV8
experimental flag (#15694) @arminmehonOpen()
and onClose()
methods of the usePickerContext()
hook have been replaced with a single setOpen
method — Learn more.@mui/x-date-pickers@8.0.0-alpha.3
onOpen()
and onClose()
methods of usePickerContext()
with a single setOpen()
method. (#15701) @flaviendelangle@mui/x-date-pickers-pro@8.0.0-alpha.3
Same changes as in @mui/x-date-pickers@8.0.0-alpha.3
.
@mui/x-charts@8.0.0-alpha.3
pattern
and gradient
support (#15720) @JCQuintas@mui/x-charts-pro@8.0.0-alpha.3
Same changes as in @mui/x-charts@8.0.0-alpha.3
.
@mui/x-tree-view@8.0.0-alpha.3
No changes since @mui/x-tree-view-pro@v8.0.0-alpha.2
.
@mui/x-tree-view-pro@8.0.0-alpha.3
Same changes as in @mui/x-tree-view@8.0.0-alpha.3
.
@mui/x-tree-view-pro
to releaseChangelog
(#15316) @flaviendelanglepreset-safe
folder exists in codemod test (#15703) @JCQuintaspreset-safe
into global codemod config (#15659) @JCQuintasNov 29, 2024
We'd like to offer a big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
<ChartDataProvider />
and <ChartsSurface />
components are now fully divided — Learn more.Special thanks go out to the community contributors who have helped make this release possible: @dloeda, @headironc, @jedesroches, @k-rajat19, @lauri865, @mathzdev, @nphmuller, @zinoroman. Following are all team members who have contributed to this release: @arminmeh, @alexfauquette, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @oliviertassinari.
<GridOverlays />
component is not exported anymore.indeterminateCheckboxAction
prop has been removed. Clicking on an indeterminate checkbox "selects" the unselected descendants.apiRef.current.resize()
method was removed.rowSelectionPropagation
prop has been changed to { parents: true, descendants: true }
which means that the selection will be propagated to the parents and descendants by default.
To revert to the previous behavior, pass rowSelectionPropagation
as { parents: false, descendants: false }
.estimatedRowCount
is used, the text provided to the Table Pagination component from the Material UI library is updated and requires additional translations. Check the example at the end of Index-based pagination section.@mui/x-data-grid@v8.0.0-alpha.2
/jsdom/
to /jsdom|HappyDOM/
. (#15634) @jedesroches<GridOverlays />
export (#15573) @k-rajat19indeterminateCheckboxAction
prop (#15522) @MBilalShafi<GridCell />
due to performance issues (#15616) @lauri865resize
method (#15599) @cherniavskiirowSelectionPropagation
(#15523) @MBilalShafi@mui/x-data-grid-pro@v8.0.0-alpha.2
Same changes as in @mui/x-data-grid@v8.0.0-alpha.2
, plus:
boolean
column type (#15528) @k-rajat19@mui/x-data-grid-premium@v8.0.0-alpha.2
Same changes as in @mui/x-data-grid-pro@v8.0.0-alpha.2
.
The props received by the layout
and the toolbar
slots have been reworked — Learn more.
The TSection
generic of the FieldRef
type has been replaced with the TValue
generic — Learn more.
@mui/x-date-pickers@v8.0.0-alpha.2
America/Asuncion
timezone and AdapterMoment
(#15552) @flaviendelangleTSection
and strictly type TValue
(#15434) @flaviendelangleorientation
, isLandscape
, isRtl
, wrapperVariant
and disabled
props from PickersLayout
(#15494) @flaviendelangleownerState
in <PickersCalendarHeader />
, <PickersArrowSwitcher />
and <DayCalendarSkeleton />
(#15499) @flaviendelangleownerState
object in all the field components (#15510) @flaviendelangle@mui/x-date-pickers-pro@v8.0.0-alpha.2
Same changes as in @mui/x-date-pickers@v8.0.0-alpha.2
.
<div />
wrapping them anymore. All props are now passed to the root <svg />
instead of the <div />
.@mui/x-charts@v8.0.0-alpha.2
@mui/utils
and @mui/system
(#15603) @alexfauquettereleasePointerCapture
(#15602) @alexfauquette@mui/x-charts-pro@v8.0.0-alpha.2
Same changes as in @mui/x-charts@v8.0.0-alpha.2
.
@mui/x-tree-view@v8.0.0-alpha.2
@mui/utils
and @mui/system
(#15604) @alexfauquette@mui/x-tree-view-pro@v8.0.0-alpha.2
Same changes as in @mui/x-tree-view@v8.0.0-alpha.2
.
new
and preview
tags in v8 docs (#15547) @JCQuintasanchorEl
API page for charts (#15625) @oliviertassinari()
function convention for docs @oliviertassinari@types/node
bumps (#15591) @LukasTyNov 22, 2024
We'd like to offer a big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributors who have helped make this release possible: @CarlosLopezLg, @headironc, @hendrikpeilke, @k-rajat19, @lhilgert9, @viktormelin. Following are all team members who have contributed to this release: @alexfauquette, @arthurbalduini, @cherniavskii, @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @oliviertassinari, @KenanYusuf, @arminmeh.
@mui/x-data-grid@v8.0.0-alpha.1
GridColumnsManagement
(#15347) @k-rajat19@mui/x-data-grid-pro@v8.0.0-alpha.1
Same changes as in @mui/x-data-grid@v8.0.0-alpha.1
.
@mui/x-data-grid-premium@v8.0.0-alpha.1
Same changes as in @mui/x-data-grid-pro@v8.0.0-alpha.1
, plus:
FieldValueType
type has been renamed to PickerValueType
— Learn more.toolbar
and layout
slots no longer receive the disabled
and readOnly
props — Learn more.@mui/x-date-pickers@v8.0.0-alpha.1
PickerOwnerState
and PickerContextValue
(#15415) @flaviendelangleprops.value
when it changes (#15490) @flaviendelangle<PickersToolbar />
component (#15515) @LukasTyFieldValueType
in favor of PickerValueType
(#15259) @arthurbalduiniprops.referenceDate
timezone when props.value
and props.defaultValue
are not defined (#15532) @flaviendelangletouchend
event (#15346) @arthurbalduini@mui/x-date-pickers-pro@v8.0.0-alpha.1
Same changes as in @mui/x-date-pickers@v8.0.0-alpha.1
, plus:
referenceDate
when selecting date (#15429) @LukasTyThe DX of the Tooltip customization has been refactored
tooltip
prop has been removed in favor of slotProps.tooltip
for consistency.popper
, axisContent
, and itemContent
slots have been removed in favor of the tooltip
slot which overrides the entire tooltip.useItemTooltip
or useAxisTooltip
hook to get the data, and wrap your component in ChartsTooltipContainer
to follow the pointer position.ChartsItemTooltipContent
or ChartsItemTooltipContent
to get default data and place them in your custom tooltip.The library now uses the SVG filter
attribute instead of d3-color
for color manipulation.
LinePlot
, AreaPlot
, and BarPlot
components.
If you've customized the fill
of those elements, you might need to override it by using the CSS filter
.theme.styleOverride
is removed for MuiLineElement
, MuiAreaElement
, and MuiBarElement
to improve performance.
You can still target those elements by using the MuiLinePlot
, MuiAreaPlot
, and MuiBarPlot
and target the appropriate classes lineElementClasses.root
, areaElementClasses.root
, barElementClasses.root
Removed the resolveSizeBeforeRender
prop from all chart components — Learn more.
width
and height
props from the ChartsSurface
component.viewport
prop from all charts.@mui/x-charts@v8.0.0-alpha.1
<ChartDataProvider />
and <ChartsSurface />
(#15375) @JCQuintas<ChartsGrid />
component (#15463) @alexfauquette<SvgRefProvider />
to split the received ref (#15424) @JCQuintasd3-color
with CSS filter for highlight (#15084) @alexfauquette<DrawingProvider />
into <DrawingAreaProvider />
and <SvgRefProvider />
(#15417) @JCQuintas@mui/x-charts-pro@v8.0.0-alpha.1
Same changes as in @mui/x-charts@v8.0.0-alpha.1
.
publicAPI
methods in the render
because they are now memoized — Learn more.@mui/x-tree-view@v8.0.0-alpha.1
treeId
from the item context (#15542) @flaviendelanglemoveItemInTree()
(#15539) @flaviendelangleslotProps.groupTransition
(#15534) @flaviendelangle'DensitySelectorGrid'
to time-sensitive argos tests (#15425) @JCQuintasaction
pins (#15462) @LukasTy.ts
demo files (#15345) @KenanYusufNov 14, 2024
We'd like to offer a big thanks to the 22 contributors who made this release possible. Here are some highlights ✨:
📚 Documentation improvements
Special thanks go out to the community contributors who have helped make this release possible: @belkocik, @GeorgiosDrivas, @k-rajat19, @kalyan90, @DungTiger, @fxnoob, @GuillaumeMeheut Following are all team members who have contributed to this release: @alexfauquette, @arminmeh, @arthurbalduini, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @oliviertassinari, @romgrk, @samuelsycamore, @joserodolfofreitas.
@mui/x-data-grid@8.0.0-alpha.0
onPaginationModelChange
callback (#13959) @DungTigerbaseMenuList
and baseMenuItem
(#15049) @romgrk@mui/x-data-grid-pro@8.0.0-alpha.0
Same changes as in @mui/x-data-grid@8.0.0-alpha.0
, plus:
@mui/x-data-grid-premium@8.0.0-alpha.0
Same changes as in @mui/x-data-grid-pro@8.0.0-alpha.0
, plus:
The default DOM structure of the field has changed Learn more.
v8.x
, the fields' DOM structure consisted of an <input />
, which held the whole value for the component, but unfortunately presents a few limitations in terms of accessibility when managing multiple section values.v8.x
, all the field and picker components come with a new DOM structure that allows the field component to set aria attributes on individual sections, providing a far better experience with screen readers.Some translation keys no longer require utils
and the date object as parameters, but only the formatted value as a string. The keys affected by this changes are: clockLabelText
, openDatePickerDialogue
and openTimePickerDialogue
— Learn more.
The following types are no longer exported by @mui/x-date-pickers
and @mui/x-date-pickers-pro
— Learn more.
UseDateFieldComponentProps
UseTimeFieldComponentProps
UseDateTimeFieldComponentProps
BaseSingleInputFieldProps
BaseMultiInputFieldProps
BasePickersTextFieldProps
The TDate
generic has been removed from all the types, interfaces, and variables of the @mui/x-date-pickers
and @mui/x-date-pickers-pro
packages — Learn more.
Renamed usePickersTranslations
and usePickersContext
hooks to have a coherent Picker
prefix instead of Pickers
— Learn more.
The LicenseInfo
object is no longer exported from the @mui/x-date-pickers-pro
package — Learn more.
@mui/x-date-pickers@8.0.0-alpha.0
UseDateFieldComponentProps
and equivalent interfaces (#15053) @flaviendelangleownerState
object (#15056) @flaviendelangleownerState
of the field
and actionBar
slots when resolved in a picker component (#15162) @flaviendelangleDateCalendar
timezone management (#12321) @LukasTyDateTimeRangePicker
error when using format without time (#14917) @fxnoobDigitalClock
time options on a DST
switch day (#10793) @LukasTyTDate
generics in favor of PickerValidDate
direct usage (#15001) @flaviendelangleutils
and value
params from translations (#14986) @arthurbalduini@mui/x-license
(#14487) @k-rajat19disabled
and readOnly
props (#15304) @flaviendelangleownerState
in DateCalendar
, DateRangeCalendar
, MonthCalendar
and YearCalendar
(#15171) @flaviendelangleownerState
in usePickersLayout
and useXXXPicker
(#14994) @flaviendelangle@mui/x-date-pickers-pro@8.0.0-alpha.0
Same changes as in @mui/x-date-pickers@8.0.0-alpha.0
.
The legend
prop has been removed. To pass props to the legend, use slotProps={{ legend: { ... } }}
instead. This can be automatically done with the codemod as long as the legend
prop does not come from a destructured object — Learn more.
The slots.legend
does not receive the drawingArea
prop. You can still access your custom legend with the useDrawingArea()
hook if your custom legend needs it.
Removed or renamed multiple props from Series — Learn more.
highlighted
and faded
properties of highlightScope have been deprecated in favor of highlight
and fade
.
The deprecated ones are now removed.xAxisKey
, yAxisKey
, and zAxisKey
properties have been deprecated in favor of xAxisId
, yAxisId
, and zAxisId
.The Pie Chart lost all props and renderer linked to axes because pie chart does not need cartesian axes. If you used it, you can still add them back with composition. Please consider opening an issue to share your use case with us — Learn more.
@mui/x-charts@8.0.0-alpha.0
hideLegend
prop (#15277) @alexfauquettenull
data (#15337) @alexfauquettexAxisKey
, yAxisKey
, and zAxisKey
series keys (#15192) @alexfauquettelegend
props (#15081) @alexfauquettegetSymbol
method (#15233) @romgrk@mui/x-charts-pro@8.0.0-alpha.0
Same changes as in @mui/x-charts@8.0.0-alpha.0
.
The ContentComponent
or ContentProps
props of the <TreeItem />
component have been removed in favor of the new slots
, slotProps
props and of the useTreeItem
hook — Learn more.
The onClick
and onMouseDown
callbacks of the Tree Item component are now passed to the root element instead of the content — Learn more.
Rename the <TreeItem2 />
component (and related utils) — Learn more.
The <TreeView />
component has been renamed <SimpleTreeView />
which has exactly the same API — Learn more.
The indentation of nested Tree Items is now applied on the content of the element — Learn more.
@mui/x-tree-view@8.0.0-alpha.0
TreeView
component (#15093) @flaviendelangle<TreeItem />
with <TreeItem2 />
and migrate all the components and utils (#14913) @flaviendelangleLicenseInfo
from @mui/x-date-pickers-pro
(#15321) @flaviendelanglePickersPopper
component to the Date Picker customization playground (#15305) @LukasTyAutocomplete
Field demo (#15165) @flaviendelangleapplyDomain
docs for the charts (#15332) @JCQuintasAdapterMomentHijri
doc section (#15312) @flaviendelanglePickersTextField
in the customization playground (#15288) @LukasTynext
instead of ^8.0.0
in the migration guides (#15091) @flaviendelanglecherry-pick
GitHub actions (#15099) @LukasTy()
at the name of function name in the doc (#15075) @oliviertassinarimaster
@oliviertassinaritools-public.mui.com
redirection @oliviertassinarihelpers
to @mui/x-internals
package (#15188) @LukasTyMar 17, 2025
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
@mui/material
version 7 in all X packagesSpecial 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.
@mui/x-data-grid@7.28.0
toggleMenu
click (#16909) @michelengelenprocessRowUpdate()
error if the row is removed before it is executed (#16904) @arminmehprintOptions
not respecting hideFooter
root prop (#16915) @k-rajat19@mui/x-data-grid-pro@7.28.0
Same changes as in @mui/x-data-grid@7.28.0
, plus:
@mui/x-data-grid-premium@7.28.0
Same changes as in @mui/x-data-grid-pro@7.28.0
, plus:
@mui/x-date-pickers@7.28.0
@mui/x-date-pickers-pro@7.28.0
Same changes as in @mui/x-date-pickers@7.28.0
, plus:
@mui/x-charts@7.28.0
Internal changes.
@mui/x-charts-pro@7.28.0
Same changes as in @mui/x-charts@7.28.0
.
@mui/x-tree-view@7.28.0
Internal changes.
@mui/x-tree-view-pro@7.28.0
Same changes as in @mui/x-tree-view@7.28.0
.
@mui/material
v7 in dependencies (#16951) @LukasTyMar 7, 2025
We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
Team members who have contributed to this release: @arminmeh, @cherniavskii, @LukasTy, @michelengelen.
@mui/x-data-grid@7.27.3
aria-hidden
console error when scrollbar is dragged (#16834) @arminmeh@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
.
@mui/x-date-pickers@7.27.3
helperText
(#16828) @LukasTy@mui/x-date-pickers-pro@7.27.3
Same changes as in @mui/x-date-pickers@7.27.3
.
Feb 27, 2025
We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
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.
@mui/x-data-grid@v7.27.2
showColumnVerticalBorder
prop (#16726) @KenanYusufGridSortModel
(#16731) @pcorpet@mui/x-data-grid-pro@v7.27.2
Same changes as in @mui/x-data-grid@v7.27.2
.
@mui/x-data-grid-premium@v7.27.2
Same changes as in @mui/x-data-grid-pro@v7.27.2
.
Feb 25, 2025
We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
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.
@mui/x-data-grid@7.27.1
getRowId()
API method as a selector (#16574) @MBilalShafi@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
.
@mui/x-date-pickers@7.27.1
@mui/x-date-pickers-pro@7.27.1
Same changes as in @mui/x-date-pickers@7.27.1
.
@mui/x-charts@7.27.1
@mui/x-charts-pro@7.27.1
Same changes as in @mui/x-charts@7.27.1
.
Feb 17, 2025
We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
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
@mui/x-data-grid@7.27.0
resetPageOnSortFilter
prop that resets the page after sorting and filtering (#16580) @arminmehundefined
value for pagination rowCount
(#16558) @cherniavskii@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:
@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:
@mui/x-charts@7.27.0
Internal changes.
@mui/x-charts-pro@7.27.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 ✨:
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.
@mui/x-data-grid@7.26.0
<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:
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:
@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:
currentMonthCalendarPosition
prop behavior on mobile (#16457) @LukasTy@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
.
@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
.
Jan 31, 2025
We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributors who have helped make this release possible: @k-rajat19, @lauri865. Following are all team members who have contributed to this release: @KenanYusuf, @MBilalShafi, @arminmeh.
@mui/x-data-grid@7.25.0
renderContext
calculation with scroll bounce / over-scroll (#16368) @lauri865onClick
prop on toolbar buttons (#16364) @KenanYusuficonContainer
during autosizing (#16409) @michelengelen@mui/x-data-grid-pro@7.25.0
Same changes as in @mui/x-data-grid@7.25.0
, plus:
useGridApiRef
for Pro and Premium packages on React < 19 (#16348) @arminmeh@mui/x-data-grid-premium@7.25.0
Same changes as in @mui/x-data-grid-pro@7.25.0
.
@mui/x-date-pickers@7.25.0
Internal changes.
@mui/x-date-pickers-pro@7.25.0
Same changes as in @mui/x-date-pickers@7.25.0
.
@mui/x-charts@7.25.0
Internal changes.
@mui/x-charts-pro@7.25.0
Same changes as in @mui/x-charts@7.25.0
.
@mui/x-tree-view@7.25.0
Internal changes.
@mui/x-tree-view-pro@7.25.0
Same changes as in @mui/x-tree-view@7.25.0
.
Jan 24, 2025
We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributors who have helped make this release possible: @mostafaRoosta74, @lauri865.
Following are all team members who have contributed to this release: @alexfauquette, @JCQuintas, @cherniavskii, @LukasTy, @arminmeh.
@mui/x-data-grid@7.24.1
apiRef
to be MutableRefObject
for React versions < 19 (#16320) @arminmeh@mui/x-data-grid-pro@7.24.1
Same changes as in @mui/x-data-grid@7.24.1
.
@mui/x-data-grid-premium@7.24.1
Same changes as in @mui/x-data-grid-pro@7.24.1
.
@mui/x-date-pickers@7.24.1
all
selected state on section edit (#16232) @LukasTy@mui/x-date-pickers-pro@7.24.1
Same changes as in @mui/x-date-pickers@7.24.1
.
@mui/x-charts@7.24.1
offset
could be Infinite
(@JCQuintas) (#16309) @JCQuintas@mui/x-charts-pro@7.24.1
Same changes as in @mui/x-charts@7.24.1
.
@mui/x-tree-view@7.24.1
Internal changes.
@mui/x-tree-view-pro@7.24.1
Same changes as in @mui/x-tree-view@7.24.1
.
domainLimit
definition (#16271) @alexfauquette@mui/x-internals
a dependency of @mui/x-license
(#16265) @alexfauquetteJan 17, 2025
We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributors who have helped make this release possible: @lauri865, @AxharKhan. Following are all team members who have contributed to this release: @KenanYusuf, @arminmeh, @cherniavskii, @michelengelen, @samuelsycamore, @LukasTy.
@mui/x-data-grid@7.24.0
@mui/x-data-grid-pro@7.24.0
Same changes as in @mui/x-data-grid@7.24.0
, plus:
@mui/x-data-grid-premium@7.24.0
Same changes as in @mui/x-data-grid-pro@7.24.0
.
@mui/x-date-pickers@7.24.0
Internal changes.
@mui/x-date-pickers-pro@7.24.0
Same changes as in @mui/x-date-pickers@7.24.0
.
@mui/x-charts@7.24.0
Internal changes.
@mui/x-charts-pro@7.24.0
Same changes as in @mui/x-charts@7.24.0
.
@mui/x-tree-view@7.24.0
Internal changes.
@mui/x-tree-view-pro@7.24.0
Same changes as in @mui/x-tree-view@7.24.0
.
RefObject
(#16125) @arminmehreact
and react-dom
definitions to simplify dep resolving (#16214) @LukasTyJan 9, 2025
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributors who have helped make this release possible: @josteinjhauge, @derek-0000, @nusr, @k-rajat19, @tomashauser. Following are all team members who have contributed to this release: @flaviendelangle, @LukasTy, @MBilalShafi, @arminmeh, @oliviertassinari, @cherniavskii.
@mui/x-data-grid@7.23.6
name
attribute to selection checkboxes (#16041) @derek-0000@mui/x-data-grid-pro@7.23.6
Same changes as in @mui/x-data-grid@7.23.6
.
@mui/x-data-grid-premium@7.23.6
Same changes as in @mui/x-data-grid-pro@7.23.6
.
@mui/x-date-pickers@7.23.6
date-fns-jalali
v4 (#16013) @LukasTy@mui/x-date-pickers-pro@7.23.6
Same changes as in @mui/x-date-pickers@7.23.6
.
@mui/x-charts@7.23.6
@mui/x-charts-pro@7.23.6
Same changes as in @mui/x-charts@7.23.6
.
@mui/x-tree-view@7.23.6
@mui/x-tree-view-pro@7.23.6
Same changes as in @mui/x-tree-view@7.23.6
.
EditingWithDatePickers
demo (#16047) @k-rajat19LocalizationProvider
(#16088) @tomashauserrelease:version
docs (#16040) @cherniavskiiDec 27, 2024
Here are some highlights ✨:
@mui/x-data-grid@7.23.5
No changes since @mui/x-data-grid@v7.23.4
.
@mui/x-data-grid-pro@7.23.5
Same changes as in @mui/x-data-grid@7.23.5
.
@mui/x-data-grid-premium@7.23.5
Same changes as in @mui/x-data-grid-pro@7.23.5
.
Dec 27, 2024
We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributor who has helped make this release possible: @JoepVerkoelen. Following are all team members who have contributed to this release: @arminmeh, @oliviertassinari.
@mui/x-data-grid@7.23.4
forwardRef
with a shim for forward compatibility (#15984) @lauri865@mui/x-data-grid-pro@7.23.4
Same changes as in @mui/x-data-grid@7.23.4
.
@mui/x-data-grid-premium@7.23.4
Same changes as in @mui/x-data-grid-pro@7.23.4
, plus:
Dec 19, 2024
We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributors who have helped make this release possible: @k-rajat19, @good-jinu. Following are all team members who have contributed to this release: @KenanYusuf, @MBilalShafi, @arminmeh, @flaviendelangle.
@mui/x-data-grid@7.23.3
.main
element (#15919) @MBilalShaficolumnGroupHeaderHeight
prop in getTotalHeaderHeight
method (#15927) @k-rajat19indeterminateCheckboxAction
prop (#15862) @MBilalShafiaria-label
value for group checkboxes (#15861) @MBilalShafi<GridActionsCell />
(#15871) @k-rajat19@mui/x-data-grid-pro@7.23.3
Same changes as in @mui/x-data-grid@7.23.3
.
@mui/x-data-grid-premium@7.23.3
Same changes as in @mui/x-data-grid-pro@7.23.3
.
@mui/x-date-pickers@7.23.3
@mui/x-date-pickers-pro@7.23.3
Same changes as in @mui/x-date-pickers@7.23.3
.
Dec 12, 2024
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributors who have helped make this release possible: @ihsanberkozcan, @k-rajat19, @lhilgert9, @nusr, @rares985.
Following are all team members who have contributed to this release: @alexfauquette, @arminmeh, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy.
@mui/x-data-grid@7.23.2
columnsManagement
slot (#15821) @k-rajat19@mui/x-data-grid-pro@7.23.2
Same changes as in @mui/x-data-grid@7.23.2
, plus:
@mui/x-data-grid-premium@7.23.2
Same changes as in @mui/x-data-grid-pro@7.23.2
, plus:
valueOptions
for singleSelect
column type (#15754) @arminmeh@mui/x-date-pickers@7.23.2
@mui/x-date-pickers-pro@7.23.2
Same changes as in @mui/x-date-pickers@7.23.2
.
@mui/x-charts@7.23.2
@mui/x-charts-pro@7.23.2
Same changes as in @mui/x-charts@7.23.2
.
@mui/x-tree-view@v7.23.2
No changes, releasing to keep the versions in sync.
@mui/x-tree-view-pro@7.23.2
Releasing to benefit from license package fix (#15818).
updateRows
method for list view demos (#15824) @KenanYusuf@mui/x-tree-view-pro
to releaseChangelog
(#15747) @flaviendelangleconsole.log
for the error message on Codesandbox to avoid rendering error (#15818) @arminmehDec 5, 2024
We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributors who have helped make this release possible: @lhilgert9.
Following are all team members who have contributed to this release: @arthurbalduini, @cherniavskii, @flaviendelangle, @JCQuintas, @LukasTy and @MBilalShafi.
@mui/x-data-grid@7.23.1
@mui/x-data-grid-pro@7.23.1
Same changes as in @mui/x-data-grid@7.23.1
, plus:
@mui/x-data-grid-premium@7.23.1
Same changes as in @mui/x-data-grid-pro@7.23.1
.
@mui/x-date-pickers@7.23.1
touchend
event (#15430) @arthurbalduini@mui/x-date-pickers-pro@7.23.1
Same changes as in @mui/x-date-pickers@7.23.1
.
@mui/x-charts@7.23.1
pattern
and gradient
support (#15724) @JCQuintas@mui/x-charts-pro@7.23.1
Same changes as in @mui/x-charts@7.23.1
.
@mui/internal-markdown
to support nested demo imports (#15738) @alexfauquette@mui/x-tree-view-pro
to releaseChangelog
(#15747) @flaviendelangleNov 29, 2024
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
✨ Support for a new display mode on the Data Grid with the List View feature, offering an extremely flexible way to render datasets and enabling developers to adapt how data is displayed across different screen sizes.
https://github.com/user-attachments/assets/61286adc-03fc-4323-9739-8ca726fcc16c
⚛️ React 19 support
Special thanks go out to the community contributors who have helped make this release possible: @dloeda, @headironc, @mathzdev, @nphmuller, @lhilgert9, @lauri865. Following are all team members who have contributed to this release: @oliviertassinari, @arminmeh, @KenanYusuf, @flaviendelangle, @MBilalShafi.
@mui/x-data-grid@v7.23.0
/jsdom/
to /jsdom|HappyDOM/
. (#15642) @jedesrochesGridCell
performance (#15621) @lauri865@mui/x-data-grid-pro@v7.23.0
Same changes as in @mui/x-data-grid@v7.23.0
, plus:
boolean
column type (#15640) @k-rajat19@mui/x-data-grid-premium@v7.23.0
Same changes as in @mui/x-data-grid-pro@v7.23.0
.
@mui/x-date-pickers@v7.23.0
America/Asuncion
timezone and AdapterMoment
(#15653) @flaviendelangleprops.referenceDate
timezone when props.value
and props.defaultValue
are not defined (#15544) @flaviendelangle@mui/x-date-pickers-pro@v7.23.0
Same changes as in @mui/x-date-pickers@v7.23.0
.
@mui/x-charts@v7.23.0
releasePointerCapture
(#15609) @alexfauquette@mui/x-charts-pro@v7.23.0
Same changes as in @mui/x-charts@v7.23.0
.
@mui/x-tree-view@v7.23.0
@mui/x-tree-view-pro@7.23.0
Same changes as in @mui/x-tree-view@7.23.0
.
Nov 21, 2024
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributors who have helped make this release possible: @CarlosLopezLg, @headironc, @viktormelin, @qerkules, @DungTiger, @hendrikpeilke, @k-rajat19. Following are all team members who have contributed to this release: @alexfauquette, @LukasTy, @MBilalShafi, @flaviendelangle.
@mui/x-data-grid@7.22.3
GridColumnsManagement
(#15476) @k-rajat19onPaginationModelChange
(#15402) @DungTiger@mui/x-data-grid-pro@7.22.3
Same changes as in @mui/x-data-grid@7.22.3
.
@mui/x-data-grid-premium@7.22.3
Same changes as in @mui/x-data-grid-pro@7.22.3
.
@mui/x-date-pickers@7.22.3
props.value
when it changes (#15500) @flaviendelangleDateTimeRangePicker
error when using format without time (#15341) @fxnoobPickersToolbar
component (#15525) @LukasTy@mui/x-date-pickers-pro@7.22.3
Same changes as in @mui/x-date-pickers@7.22.3
, plus:
referenceDate
when selecting date (#15431) @LukasTy@mui/x-charts@7.22.3
No changes since @mui/x-charts@7.22.2
.
@mui/x-charts-pro@7.22.3
PickersPopper
component to customization playground (#15397) @LukasTynext
version links (#15423) @LukasTyloading
state in the demos (#15538) @cherniavskii[docs] Add data caching to lazy loaded detail panel demo (#15506) @cherniavskii
[code-infra] Tentative fix for Argos flaky screenshot tests (#15399) @JCQuintas
.ts
demo files (#15421) @KenanYusufNov 8, 2024
We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributors who have helped make this release possible: @clins1994, @GuillaumeMeheut, @k-rajat19. Following are all team members who have contributed to this release: @LukasTy, @MBilalShafi, @KenanYusuf, @arminmeh.
Keep an eye out for the MUI⠀X v8.0.0-aplha.0
release soon. It will follow a weekly release schedule as always until it is stable.
@mui/x-data-grid@7.22.2
null
reference error in GridVirtualScrollbar
(#15289) @MBilalShafiboolean
column type (#15257) @k-rajat19@mui/x-data-grid-pro@7.22.2
Same changes as in @mui/x-data-grid@7.22.2
, plus:
Enter
key in Tree data (#15313) @k-rajat19@mui/x-data-grid-premium@7.22.2
Same changes as in @mui/x-data-grid-pro@7.22.2
, plus:
@mui/x-date-pickers@7.22.2
@mui/x-date-pickers-pro@7.22.2
Same changes as in @mui/x-date-pickers@7.22.2
.
@mui/x-charts@7.22.2
SeriesValueFormatter
to return null
value (#15295) @clins1994domainLimit
for each axis. (#15325) @GuillaumeMeheut@mui/x-charts-pro@7.0.0-beta.7
Same changes as in @mui/x-charts@7.22.2
.
Nov 1, 2024
We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributors who have helped make this release possible: @wojtkolos, @dpak-maurya, @k-rajat19. Following are all team members who have contributed to this release: @LukasTy, @arminmeh, @MBilalShafi, @KenanYusuf, @flaviendelangle.
@mui/x-data-grid@7.22.1
rowGroupingModelChange
handler to respective hook (#15127) @MBilalShafi@mui/x-data-grid-pro@7.22.1
Same changes as in @mui/x-data-grid@7.22.1
, plus:
@mui/x-data-grid-premium@7.22.1
@mui/x-date-pickers@7.22.1
@mui/x-date-pickers-pro@7.22.1
Same changes as in @mui/x-date-pickers@7.22.1
.
@mui/x-tree-view@7.22.1
TreeItem2DragAndDropOverlay
and TreeItem2LabelInput
from the root of each package (#15208) @flaviendelangle@mui/x-tree-view-pro@7.22.1
Same changes as in @mui/x-tree-view@7.22.1
.
Oct 25, 2024
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
Special thanks go out to the community contributors who have helped make this release possible: @clins1994, @GITPHLAP, @k-rajat19, @kalyan90, @merotosc, @yash49. Following are all team members who have contributed to this release: @cherniavskii, @flaviendelangle, @LukasTy, @MBilalShafi, @romgrk.
@mui/x-data-grid@7.22.0
GridPanelAnchor
positioning (#15022) @k-rajat19pageStyle
prop of the GridPrintExportMenuItem
component (#15015) @flaviendelangle<Box />
and <Badge />
(#15013) @romgrk@mui/x-data-grid-pro@7.22.0
Same changes as in @mui/x-data-grid@7.22.0
, plus:
@mui/x-data-grid-premium@7.22.0
Same changes as in @mui/x-data-grid-pro@7.22.0
, plus:
@mui/x-date-pickers@7.22.0
DateCalendar
timezone management (#15119) @LukasTyDigitalClock
time options on a DST
switch day (#15092) @LukasTy@mui/x-date-pickers-pro@7.22.0
Same changes as in @mui/x-date-pickers@7.22.0
.
@mui/x-charts@7.22.0
onAxisClick(_, data)
callback (#15038) @clins1994@mui/x-charts-pro@7.0.0-beta.6
Same changes as in @mui/x-charts@7.22.0
.
@mui/x-tree-view@7.22.0
default-branch-switch
instances for v7.x
(#15085) @MBilalShafifireEvent
instead of userEvent
(#14927) @LukasTyOct 17, 2024
We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
dataset
prop support for the Scatter Chart componentSpecial thanks go out to the community contributors who have helped make this release possible: @k-rajat19, @kalyan90, @rotembarsela, @wangkailang. Following are all team members who have contributed to this release: @arthurbalduini, @cherniavskii, @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @arminmeh, @romgrk, @KenanYusuf, @oliviertassinari, @samuelsycamore.
@mui/x-data-grid@7.21.0
onRowSelectionModelChange
firing unnecessarily on initial render (#14909) @MBilalShafionRowSelectionModelChange
not being called after row is removed (#14972) @arminmeh@mui/x-data-grid-pro@7.21.0
Same changes as in @mui/x-data-grid@7.21.0
, plus:
rowHeight={undefined}
(#14983) @cherniavskii@mui/x-data-grid-premium@7.21.0
Same changes as in @mui/x-data-grid-pro@7.21.0
.
@mui/x-date-pickers@7.21.0
PageUp
and PageDown
event handlers on time components (#14928) @arthurbalduiniownerState
object (#14889) @flaviendelanglePickerValidDate
usage in the Date Range Picker Toolbar (#14925) @flaviendelangle@mui/x-date-pickers-pro@7.21.0
Same changes as in @mui/x-date-pickers@7.21.0
.
@mui/x-charts@7.21.0
dataset
to be used with the Scatter Chart (#14915) @JCQuintasreduce motion
preference disables animation on page load (#14417) @JCQuintas@mui/x-charts-pro@7.0.0-beta.5
Same changes as in @mui/x-charts@7.21.0
.
@mui/x-tree-view@7.21.0
alpha()
usage with CSS variables (#14969) @wangkailangaria-selected
attribute (#14991) @flaviendelangle@mui/x-codemod@7.21.0
vitest/playwright
(#14926) @JCQuintasAdapterDayjs
coverage calculation (#14957) @LukasTyOct 11, 2024
We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
props.ContentComponent
and props.ContentProps
) have been deprecated and will be removed in the new major version of the Tree View component.Special thanks go out to the community contributors who have helped make this release possible: @k-rajat19, @kalyan90, @uma-neko, @vfbiby. Following are all team members who have contributed to this release: @alelthomas, @arminmeh, @arthurbalduini, @cherniavskii, @flaviendelangle, @JCQuintas, @MBilalShafi, @noraleonte, @oliviertassinari, @samuelsycamore, @siriwatknp.
@mui/x-data-grid@7.20.0
onColumnHeaderContextMenu
event (#14734) @vfbibyscrollToIndexes
(#14888) @arminmehrowId
param to processRowUpdate
(#14821) @k-rajat19@mui/x-data-grid-pro@7.20.0
Same changes as in @mui/x-data-grid@7.20.0
, plus:
rowSelectionPropagation
JSDoc and doc section (#14907) @flaviendelangle@mui/x-data-grid-premium@7.20.0
Same changes as in @mui/x-data-grid-pro@7.20.0
.
@mui/x-date-pickers@7.20.0
PageUp
and PageDown
support for time components (#14812) @arthurbalduiniPickerValidDate
(#14896) @flaviendelangleDateFieldInPickerProps
interface to the DatePicker
folder and rename it DatePickerFieldProps
(same for time and date time) (#14828) @flaviendelangle@mui/x-date-pickers-pro@7.20.0
Same changes as in @mui/x-date-pickers@7.20.0
.
@mui/x-charts@7.20.0
No changes since @mui/x-charts@v7.19.0
.
@mui/x-charts-pro@7.0.0-beta.4
Same changes as in @mui/x-charts@7.20.0
.
@mui/x-tree-view@7.20.0
ContentComponent
and ContentProps
props (#14908) @flaviendelangletooltip
and highlighting
pages (#14824) @JCQuintas<TreeItem2 />
component and the useTreeItem2
hook (#14551) @noraleonte@mui/utils
v6 (#14867) @siriwatknpdata-mui-test
in favour of data-testid
(#14882) @JCQuintasvitest
group (#14856) @JCQuintaswaitFor()
with act()
(#14851) @oliviertassinariOct 4, 2024
We'd like to offer a big thanks to the 26 contributors who made this release possible. Here are some highlights ✨:
minHeight
and maxHeight
on flex parent container for the Data Grid componentpublicAPI
from the useTreeItem2Utils
hook for the Tree ViewSpecial thanks goes out to our community contributors who have helped make this release possible: @AWAIS97, @chucamphong, @GMchris, @JakubSveda, @k-rajat19, @k725, @lhilgert9, @ruiaraujo012, @Sanderand, @thomasmoon, @vallereaugabriel. Following are all team members who have contributed to this release: @alexfauquette, @arminmeh, @arthurbalduini, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @KenanYusuf, @MBilalShafi, @michelengelen, @noraleonte, @oliviertassinari, @romgrk, @sai6855, @samuelsycamore.
@mui/x-data-grid@7.19.0
undefined
value (#14456) @sai6855checkboxSelectionVisibleOnly
reset the selection on filtering (#14677) @MBilalShafiCSSVarsProvider
is used (#12901) @cherniavskiiminHeight
and maxHeight
on flex parent container (#14614) @cherniavskii@mui/x-data-grid-pro@7.19.0
Same changes as in @mui/x-data-grid@7.19.0
, plus:
onRowsScrollEnd
not firing on very fast scrolling (#14171) @arminmeh@mui/x-data-grid-premium@7.19.0
Same changes as in @mui/x-data-grid-pro@7.19.0
, plus:
@mui/x-date-pickers@7.19.0
yearsOrder="desc"
and direction="rtl"
(#14682) @thomasmoonPickerValidDate
type (#14771) @flaviendelangle@mui/x-date-pickers-pro@7.19.0
Same changes as in @mui/x-date-pickers@7.19.0
.
@mui/x-charts@7.19.0
LineChart
area animation being stuck when resizing container (#14711) @alexfauquettewarnOnce
(#14792) @JCQuintas@mui/x-charts-pro@7.0.0-beta.3
Same changes as in @mui/x-charts@7.19.0
.
@mui/x-tree-view@7.19.0
getDefaultizedParams
instead of in the plugin render (#14661) @flaviendelanglepublicAPI
form useTreeItem2Utils
(#14729) @noraleonteinstance.getTreeItemIdAttribute
(#14667) @flaviendelanglepages.ts
navigation (#14782) @samuelsycamoree
identifier (#14724) @samuelsycamoreEscape
event firing event (#14797) @oliviertassinariSep 20, 2024
We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
💫 Support Row spanning on the Data Grid that automatically merges the consecutive cells in a column based on the cell value
⏰ Support date-fns
v4 (#14673) @LukasTy
@mui/x-data-grid@7.18.0
columnGroupHeaderHeight
prop for sizing column group headers (#14637) @KenanYusufdocument
reference when the grid is rendered in a popup window (#14649) @arminmehminFirstColumn
from GetHeadersParams
interface (#14450) @k-rajat19@mui/x-data-grid-pro@7.18.0
Same changes as in @mui/x-data-grid@7.18.0
, plus:
onRowsScrollEnd
being triggered instantly when bottom pinned row is present (#14602) @arminmehisEmpty
and isNotEmpty
filter operators (#14493) @k-rajat19@mui/x-data-grid-premium@7.18.0
Same changes as in @mui/x-data-grid-pro@7.18.0
.
@mui/x-date-pickers@7.18.0
date-fns
v4 (#14673) @LukasTy@mui/x-date-pickers-pro@7.18.0
Same changes as in @mui/x-date-pickers@7.18.0
.
@mui/x-charts@7.18.0
PolarProvider
to manage polar axes (#14642) @alexfauquetteLineChart
animation being stuck with initial drawing area value (#14553) @JCQuintas@mui/x-charts-pro@7.0.0-beta.1
Same changes as in @mui/x-charts@7.18.0
.
@mui/x-tree-view@7.18.0
"use client"
directive to every public component and hook (#14579) @flaviendelanglegroupingValueGetter
callout in column definition docs (#14599) @michelengelenvale-action.yml
from main repo @oliviertassinarivalueGetter
and valueFormatter
signature change (#14613) @cherniavskiiobserve
method to avoid flaky wait for a callback (#14640) @arminmehmaster
(#14644) @cherniavskiipackage.json
repository rule @oliviertassinariSep 13, 2024
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@7.17.0
:has()
selectors (#14559) @KenanYusuf@mui/x-data-grid-pro@7.17.0
Same changes as in @mui/x-data-grid@7.17.0
.
@mui/x-data-grid-premium@7.17.0
Same changes as in @mui/x-data-grid-pro@7.17.0
.
@mui/x-date-pickers@7.17.0
useSplitFieldProps
and make it public (#14514) @flaviendelangle"use client"
directive to every public component and hook (#14562) @flaviendelangle@mui/x-date-pickers-pro@7.17.0
Same changes as in @mui/x-date-pickers@7.17.0
, plus:
currentMonthCalendarPosition
not scrolling to future sibling (#14442) @GMchris@mui/x-charts@7.17.0
"use client"
directive to every public component and hook (#14578) @flaviendelangleonItemClick
on the Legend
component (#14231) @JCQuintasonAxisClick
with layout='horizontal'
(#14547) @alexfauquettepath
with circle
for performance improvement (#14518) @alexfauquette@mui/x-charts-pro@7.0.0-beta.1
Same changes as in @mui/x-charts@7.17.0
.
@mui/x-tree-view@7.17.0
useTreeItem2
stable (#14498) @flaviendelangleconsole.error
messages on charts
docs (#14554) @JCQuintas@mui/x-internals
(#14528) @k-rajat19ESLint plugins
renovate group (#14574) @LukasTyact()
logic (#14529) @oliviertassinariSep 5, 2024
We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
slots
concept introduction documentation page (#13881)@mui/x-data-grid@7.16.0
GridFilterInputMultipleValue
(#14302) @sai6855columns
and columnGroupingModel
update (#14368) @cherniavskiiautoHeight
prop enabled (#14235) @KenanYusuf@mui/x-data-grid-pro@7.16.0
Same changes as in @mui/x-data-grid@7.16.0
, plus:
@mui/x-data-grid-premium@7.16.0
Same changes as in @mui/x-data-grid-pro@7.16.0
.
@mui/x-date-pickers@7.16.0
onError
JSDoc (#14492) @flaviendelangle@mui/x-date-pickers-pro@7.16.0
Same changes as in @mui/x-date-pickers@7.16.0
.
@mui/x-charts@7.16.0
LineChart
not properly animating when hydrating (#14355) @JCQuintas.mjs
extension for ESM build (#14387) @alexfauquettepackage.json
for vendor package (#14465) @alexfauquette@mui/x-charts-pro@7.0.0-beta.0
Same changes as in @mui/x-charts@7.16.0
, plus:
BarChartPro
and LineChartPro
(#14391) @JCQuintas@mui/x-tree-view@7.16.0
@mui/x-codemod@7.16.0
experimentalFeatures
codemod for typescript parser (#14150) @MBilalShafislots
concept introduction page (#13881) @flaviendelanglePieChart
examples (#14297) @JCQuintassecrets: inherit
to workflow call (#14454) @michelengelenAug 29, 2024
We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
@mui/material@6
) peer dependency (#14142) @cherniavskiiYou can now use MUI X components with either v5 or v6 of @mui/material
package 🎉
@mui/x-data-grid-pro@7.15.0
GridRowReorderCell
component (#14079) @genepaul@mui/x-data-grid-premium@7.15.0
Same changes as in @mui/x-data-grid-pro@7.15.0
.
@mui/x-date-pickers@7.15.0
onTouchStart
handler for TimeClock
(#14305) @arthurbalduini@mui/x-date-pickers-pro@7.15.0
Same changes as in @mui/x-date-pickers@7.15.0
, plus:
@mui/x-charts@7.15.0
themeAugmentation
in pro plan (#14313) @lhilgert9LineChart
transition stopping before completion (#14366) @JCQuintas@mui/x-charts-pro@7.0.0-alpha.3
Same changes as in @mui/x-charts@7.15.0
, plus:
@mui/x-charts
package (#14335) @LukasTyh2
@oliviertassinariMUI Core
renovate group (#14382) @LukasTy@mui/material@6
(#14357) @cherniavskiinext
releases of @mui/docs
(#14364) @LukasTy@mui/material@6
peer dependency (#14142) @cherniavskiiuseRtl
instead of useTheme
to access direction (#14359) @LukasTyAug 23, 2024
We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
💫 Allow filtering the axis on zoom, making the axis adapt by removing values outside the view.
📊 Improve bar chart performances
@mui/x-data-grid@7.14.0
getTreeDataPath
(#11743) @pcorpetevent.key
for Tab
and Escape
keys (#14170) @k-rajat19api
in gridCellParams
interface (#14201) @k-rajat19@mui/x-data-grid-pro@7.14.0
Same changes as in @mui/x-data-grid@7.14.0
.
@mui/x-data-grid-premium@7.14.0
Same changes as in @mui/x-data-grid-pro@7.14.0
, plus:
onCellSelectionModelChange
not triggered when additional cell range is selected (#14199) @arminmeh@mui/x-date-pickers@7.14.0
Space
and Enter
on the TimeClock
component @arthurbalduini@mui/x-date-pickers-pro@7.14.0
Same changes as in @mui/x-date-pickers@7.14.0
.
@mui/x-charts@7.14.0
isPointInside
function for both graphs and axis (#14222) @JCQuintas@mui/x-charts-pro@7.0.0-alpha.2
Same changes as in @mui/x-charts@7.14.0
, plus:
eslint-plugin-testing-library
(#14232) @LukasTyAug 16, 2024
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
💫 Allow to edit the label of Tree View's items.
🔧 Improve rows accessibility on the Data Grid features "Tree Data" and "Row Grouping". Certain "Row Grouping" accessibility updates will only be applied if experimental feature flag is enabled. See the documentation for more information.
@mui/x-data-grid@7.13.0
null
and undefined
values (#14166) @k-rajat19useGridStateInitialization
(#14181) @k-rajat19@mui/x-data-grid-pro@7.13.0
Same changes as in @mui/x-data-grid@7.13.0
, plus:
@mui/x-data-grid-premium@7.13.0
Same changes as in @mui/x-data-grid-pro@7.13.0
.
@mui/x-date-pickers@7.13.0
@mui/x-date-pickers-pro@7.13.0
Same changes as in @mui/x-date-pickers@7.13.0
.
@mui/x-charts@7.13.0
baseline
property to the LineChart
series
(#14153) @JCQuintasCartesianContextProvider
to CartesianProvider
(#14102) @JCQuintas@mui/x-charts-pro@7.0.0-alpha.1
Same changes as in @mui/x-charts@7.13.0
.
@mui/x-tree-view@7.13.0
canMoveItemToNewPosition
prop (#14176) @flaviendelanglecache-docs
plugin setup (#14105) @LukasTyAug 8, 2024
We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
@mui/x-charts-pro
is released in alpha version 🧪. This new package introduces two main features:@mui/x-data-grid@7.12.1
checkboxSelectionVisibleOnly
behavior with server-side pagination (#14083) @MBilalShaficolumnHeadersContainerRef
being undefined
before mount (#14051) @samwato@mui/x-data-grid-pro@7.12.1
Same changes as in @mui/x-data-grid@7.12.1
.
@mui/x-data-grid-premium@7.12.1
Same changes as in @mui/x-data-grid-pro@7.12.1
.
@mui/x-date-pickers@7.12.1
@mui/x-date-pickers-pro@7.12.1
Same changes as in @mui/x-date-pickers@7.12.1
.
@mui/x-charts@7.12.1
plugins
to PluginProvider
(#14056) @JCQuintas@mui/x-charts-pro@7.0.0-alpha.0
Same changes as in @mui/x-charts@7.12.1
, plus:
@mui/x-tree-view@7.12.1
No changes since @mui/x-tree-view@7.12.0
.
updateRows()
(#14027) @MBilalShafiRich Tree View-Ordering
page (#14123) @oliviertassinariLatest Version
section (#14132) @michelengelenAug 1, 2024
The Pro plan is receiving two new packages:
@mui/x-tree-view-pro
(available today!)@mui/x-charts-pro
(available in the coming weeks)As always, every feature released as part of the MIT plan will remain free and MIT licensed forever.
This expansion of the Pro plan comes with some adjustments to our pricing strategy. Learn more about those in the Upcoming changes to MUI X pricing in 2024 blog post.
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
🎁 Introduce item reordering using drag and drop on the <RichTreeViewPro />
component
📦 Support CommonJS bundle out of the box on @mui/x-charts
by adding vendored D3 dependencies.
d3
packages installed by @mui/x-charts
and don't have them in your package.json
. You shouldn't be affected otherwise.For more context, the initial issue is caused by D3 only exporting ESM.
The solution up until now was to export charts with only ESM. But some frameworks are confused by this configuration.
So in order to fix this, we are providing a CJS version of D3.
🌍 Improve Turkish (tr-TR) locale on the Data Grid
@mui/x-data-grid@7.12.0
role=presentation
a11y issue (#13891) @romgrk@mui/x-data-grid-pro@7.12.0
Same changes as in @mui/x-data-grid@7.12.0
.
@mui/x-data-grid-premium@7.12.0
Same changes as in @mui/x-data-grid-pro@7.12.0
.
@mui/x-date-pickers@7.12.0
@mui/x-date-pickers-pro@7.12.0
Same changes as in @mui/x-date-pickers@7.12.0
.
@mui/x-charts@7.12.0
axisId
prop being allowed in xAxis/yAxis config. Use id
instead. (#13986) @JCQuintasSeriesProvider
to use in filtering (#14026) @JCQuintas@mui/x-tree-view@7.12.0
onItemClick
on the Tree View components (#14018) @flaviendelangleisEventTargetInDescendants
(#13982) @flaviendelangleminDate
and maxDate
default
description (#14024) @LukasTyrenderCell
& autogenerated rows (#13879) @romgrkcharts
performance with codspeed (#13952) @JCQuintasvale
action paths
filtering (#14038) @LukasTyJul 25, 2024
We'd like to offer a big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
Zoom
to be controllable for charts (#13858) @JCQuintas@mui/x-data-grid@7.11.1
GridPreferencesPanel
(#13934) @k-rajat19@mui/x-data-grid-pro@7.11.1
Same changes as in @mui/x-data-grid@7.11.1
.
@mui/x-data-grid-premium@7.11.1
Same changes as in @mui/x-data-grid-pro@7.11.1
, plus:
api
object to events (#13893) @pcorpet@mui/x-date-pickers@7.11.1
@mui/x-date-pickers-pro@7.11.1
Same changes as in @mui/x-date-pickers@7.11.1
.
@mui/x-charts@7.11.1
ownerState
function to slotProps
typing when available (#13965) @alexfauquetteZoom
to be controllable (#13858) @JCQuintasxAxisKey
/zAxisKey
in favor of xAxisId
/zAxisId
(#13940) @alexfauquette@mui/x-tree-view@7.11.1
SparkLineChart
reference not being correctly capitalised (#13960) @duckboy81@mui/material-nextjs
to MUI Core
renovate group (#13966) @LukasTyuseReactVersion
script from the monorepo (#13710) @cherniavskiiJul 18, 2024
We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@7.11.0
gridEditRowsStateSelector
(#13877) @romgrkcolumnResizeStop
event not emitted when column is not resized (#13307) @mateuseapdate
and datetime-local
input types in GridFilterInputMultipleValue
type (#13411) @karudedios@mui/x-data-grid-pro@7.11.0
Same changes as in @mui/x-data-grid@7.11.0
.
@mui/x-data-grid-premium@7.11.0
Same changes as in @mui/x-data-grid-pro@7.11.0
.
@mui/x-date-pickers@7.11.0
Mui-selected
class to TimeClock
meridiem buttons (#13848) @LukasTy@mui/x-date-pickers-pro@7.11.0
Same changes as in @mui/x-date-pickers@7.11.0
, plus:
name
prop propagation regression (#13821) @LukasTy@mui/x-charts@7.11.0
useChartContainerProps
(#13817) @JCQuintasclassName
to root element (#13647) @JCQuintas@mui/x-tree-view@7.11.0
useTreeView
hook (#13845) @flaviendelangleprocess.env.NODE_ENV
in production (#13869) @cherniavskiionChange
and onAccept
props (#13543) @flaviendelanglerenovate
group (#13846) @LukasTyimport/prefer-default-export
rule @oliviertassinari...other
and test imports in charts (#13844) @JCQuintasnext
tag for @mui/docs
package bumps (#13813) @LukasTy@mui/docs
dependency (#13760) @LukasTyEventManager
to @mui/x-internals
package (#13815) @flaviendelangleJul 11, 2024
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@7.10.0
'standard'
in GridFilterInputMultipleValue
(#13129) @tarunrajputreadonly
on more array props (#13331) @pcorpet@mui/x-data-grid-pro@7.10.0
Same changes as in @mui/x-data-grid@7.10.0
, plus:
@mui/x-data-grid-premium@7.10.0
Same changes as in @mui/x-data-grid-pro@7.10.0
.
@mui/x-date-pickers@7.10.0
readOnly
flag (#13688) @LukasTy@mui/x-date-pickers-pro@7.10.0
Same changes as in @mui/x-date-pickers@7.10.0
, plus:
calendarHeader
slot props propagation (#13780) @LukasTyformat
from given views
(#13743) @LukasTy@mui/x-charts@7.10.0
LineChart
when using the log
scale (#13791) @alexfauquetteOnSeriesItemClick
documentation (#13761) @tonyhallett@mui/x-tree-view@7.10.0
getItemTree
and getItemOrderedChildrenIds
methods to the public API (#13804) @flaviendelangleloading
prop value (#13604) @oliviertassinariDateTimeRangePicker
to the "Commonly used components" demo (#13775) @flaviendelangleDATA_GRID_PROPS_DEFAULT_VALUES
alphabetically (#13783) @oliviertassinariJul 5, 2024
We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
selectItem()
and getItemDOMElement()
methods to the TreeView component public APIusePickersTranslations
hook public in the pickers component@mui/x-data-grid@7.9.0
pagination={undefined}
(#13349) @sai6855@mui/x-data-grid-pro@7.9.0
Same changes as in @mui/x-data-grid@7.9.0
.
@mui/x-data-grid-premium@7.9.0
Same changes as in @mui/x-data-grid-pro@7.9.0
.
@mui/x-date-pickers@7.9.0
usePickersTranslations
hook public (#13657) @flaviendelangle@mui/x-date-pickers-pro@7.9.0
Same changes as in @mui/x-date-pickers@7.9.0
.
@mui/x-charts@7.9.0
Zoom&Pan
to the Pro charts (unreleased) (#13405) @JCQuintas@mui/x-tree-view@7.9.0
selectItem()
and getItemDOMElement()
methods to the public API (#13485) @flaviendelanglereact_next
workflow in CircleCI (#13360) @cherniavskiijscodeshift-add-imports
package (#13720) @LukasTy@mui/docs
usage (#13713) @LukasTyJun 28, 2024
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
🛰 Introduce server-side data source for improved server integration in the Data Grid.
Supports server-side pagination, sorting and filtering on plain and tree data, and automatic caching.
To enable, provide a getRows
function to the unstable_dataSource
prop on the Data Grid component.
const dataSource = {
getRows: async (params: GridServerGetRowsParams) => {
const data = await fetch(
`https://api.example.com/data?${new URLSearchParams({
page: params.page,
pageSize: params.pageSize,
sortModel: JSON.stringify(params.sortModel),
filterModel: JSON.stringify(params.filterModel),
}).toString()}`,
);
return {
rows: data.rows,
totalRows: data.totalRows,
};
},
}
<DataGridPro
unstable_dataSource={dataSource}
{...otherProps}
/>
See server-side data documentation for more details.
📈 Support Date data on the BarChart component
@mui/x-data-grid@7.8.0
columnHeaderSortIcon
slot (#13563) @arminmehhideFooter
option is set (#13034) @tarunrajput@mui/x-data-grid-pro@7.8.0
Same changes as in @mui/x-data-grid@7.8.0
, plus:
@mui/x-data-grid-premium@7.8.0
Same changes as in @mui/x-data-grid-pro@7.8.0
.
@mui/x-date-pickers@7.8.0
@mui/x-date-pickers-pro@7.8.0
Same changes as in @mui/x-date-pickers@7.8.0
.
@mui/x-charts@7.8.0
Date
data (#13471) @alexfauquette@mui/x-tree-view@7.8.0
expansionTrigger
prop (#13533) @noraleonteLuxon
throwOnInvalid
support (#13621) @LukasTy../internals
root (#13633) @JCQuintas\_app
folder with monorepo (#13582) @JanpotJun 21, 2024
We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@7.7.1
@mui/x-data-grid-pro@7.7.1
Same changes as in @mui/x-data-grid@7.7.1
, plus:
getTreeDataPath
reference (#13519) @cherniavskii@mui/x-data-grid-premium@7.7.1
Same changes as in @mui/x-data-grid-pro@7.7.1
.
@mui/x-date-pickers@7.7.1
Space
key down (#13510) @flaviendelangleonAccept
callback (#13511) @flaviendelangleAdapterDateFnsV3
generated method types (#13464) @alexey-kozlenkovview
behavior (#13552) @LukasTy@mui/x-date-pickers-pro@7.7.1
Same changes as in @mui/x-date-pickers@7.7.1
, plus:
@mui/x-charts@7.7.1
CartesianProvider
to use logic in Pro package (#13531) @JCQuintasPro
versions of regular charts (#13547) @JCQuintasChartContainerPro
for future Zoom changes (#13532) @JCQuintas@mui/x-tree-view@7.7.1
useTreeViewId
to the core plugins (#13566) @flaviendelangleuseTreeViewId
(#13579) @flaviendelangleitemId
with escaping characters when using Simple Tree View (#13487) @oukunanPickerValidDate
type override (#13476) @flaviendelangle@testing-library/react
dependency (#13478) @LukasTyJun 13, 2024
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@7.7.0
getFilterState
method (#13418) @cherniavskii@mui/x-data-grid-pro@7.7.0
Same changes as in @mui/x-data-grid@7.7.0
, plus:
@mui/x-data-grid-premium@7.7.0
Same changes as in @mui/x-data-grid-pro@7.7.0
.
@mui/x-date-pickers@7.7.0
@mui/x-date-pickers-pro@7.7.0
Same changes as in @mui/x-date-pickers@7.7.0
.
@mui/x-charts@7.7.0
ResponsiveChartContainer
(#13398) @alexfauquetteZAxisContextProvider
by default in the ChartContainer
(#13465) @alexfauquette@mui/x-tree-view@7.7.0
renderHeader
recipe to the Master Details docs (#13370) @michelengeleneslint-plugin-react-compiler
experimental version and rules (#13415) @JCQuintas<TreeItem2 />
(#13314) @flaviendelangleJun 6, 2024
We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@7.6.2
areElementSizesEqual
utility to improve code readability (#13254) @layerok@mui/x-data-grid-pro@7.6.2
Same changes as in @mui/x-data-grid@7.6.2
.
@mui/x-data-grid-premium@7.6.2
Same changes as in @mui/x-data-grid-pro@7.6.2
.
@mui/x-date-pickers@7.6.2
PageUp
and PageDown
editing on letter sections (#13310) @arthurbalduiniAdapterDayjs
timezone behavior (#13362) @LukasTyuseRtl
instead of useTheme
to access direction (#13363) @flaviendelangle@mui/x-date-pickers-pro@7.6.2
Same changes as in @mui/x-date-pickers@7.6.2
.
@mui/x-charts@7.6.2
Initializable
type and behavior to allow checking if a complex context has been initialized. (#13365) @JCQuintasxAxis
and yAxis
(#13372) @Valyok26tickInterval
(#13355) @alexfauquettequickFilterValues
(#12919) @michelengelenCSS.escape
for the future @oliviertassinaril10n
action setup (#13382) @LukasTymarked
dependency (#13383) @LukasTy@types/prettier
dependency (#13389) @LukasTydocs/.env.local
to .gitignore
(#13377) @KenanYusufMay 31, 2024
We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
🐞 Address the @mui/internal-test-utils
added as a direct dependency to @mui/x-data-grid
by mistake.
@mui/x-data-grid@7.6.1
@mui/internal-test-utils
to dev dependency (#13318) @LukasTy@mui/x-data-grid-pro@7.6.1
Same changes as in @mui/x-data-grid@7.6.1
.
@mui/x-data-grid-premium@7.6.1
Same changes as in @mui/x-data-grid-pro@7.6.1
.
May 30, 2024
We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@7.6.0
GridColumnHeadersProps
(#13229) @cherniavskii@mui/x-data-grid-pro@7.6.0
Same changes as in @mui/x-data-grid@7.6.0
.
@mui/x-data-grid-premium@7.6.0
Same changes as in @mui/x-data-grid-pro@7.6.0
, plus:
@mui/x-date-pickers@7.6.0
DateBuilderReturnType
when the date is undefined
(#13244) @alexey-kozlenkov@mui/x-date-pickers-pro@7.6.0
Same changes as in @mui/x-date-pickers@7.6.0
.
@mui/x-charts@7.6.0
@mui/x-tree-view@7.6.0
l10n
script execution with arguments (#13297) @LukasTy@mui/material
version used in sandboxes (#13260) @LukasTydescribeTreeView
for keyboard navigation tests on disabled items (#13184) @flaviendelangledescribeTreeView
for remaining items tests (#13262) @flaviendelangleDateRangePosition
type in favor of RangePosition
(#13288) @LukasTyMay 23, 2024
We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
label
to be displayed in BarChart@mui/x-data-grid@7.5.1
@mui/x-data-grid-pro@7.5.1
Same changes as in @mui/x-data-grid@7.5.1
.
@mui/x-data-grid-premium@7.5.1
Same changes as in @mui/x-data-grid-pro@7.5.1
.
@mui/x-date-pickers@7.5.1
disableOpenPicker
prop behavior (#13212) @LukasTy@mui/x-date-pickers-pro@7.5.1
Same changes as in @mui/x-date-pickers@7.5.1
.
@mui/x-charts@7.5.1
label
to be displayed inside bars in BarChart (#12988) @JCQuintasapiRef
methods doc examples (#13193) @flaviendelangleraw-loader
package (#13160) @LukasTyyarn
to pnpm
in PropTypes
comment (#13167) @LukasTydescribeTreeView
for items test (partial) (#12893) @flaviendelangledescribeTreeView
for keyboard selection tests (#13164) @flaviendelangledescribeTreeView
for navigation tests (#12907) @flaviendelangledescribeTreeView
for items rendering edge-case tests (#13168) @flaviendelangletest:coverage:inspect
to allow easier debugging (#13198) @JCQuintasyarn proptypes
vs pnpm proptypes
(#13199) @JCQuintasnx
for lerna tasks (#13166) @LukasTyMay 17, 2024
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@7.5.0
rowModesModel
controlled prop (#13056) @Janpot@mui/x-data-grid-pro@7.5.0
Same changes as in @mui/x-data-grid@7.5.0
.
@mui/x-data-grid-premium@7.5.0
Same changes as in @mui/x-data-grid-pro@7.5.0
.
@mui/x-date-pickers@7.5.0
textField
slot placeholder value (#13148) @arthurbalduiniAdapterMomentJalaali
regression (#13144) @LukasTyAdapterDateFnsBase
in Jalali adapters (#13075) @LukasTy@mui/x-date-pickers-pro@7.5.0
Same changes as in @mui/x-date-pickers@7.5.0
.
@mui/x-charts@7.5.0
trigger=axis
now follow touch on mobile (#13043) @wzdorowaseries.label
property to receive a function with the "location" it is going to be displayed on (#12830) @JCQuintasuseSlotProps
types (#13141) @alexfauquette@mui/x-tree-view@7.5.0
@mui/x-date-pickers
imports (#13120) @LukasTySectionTitle
component in the doc (#13139) @alexfauquetteMay 10, 2024
We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
id
attribute on shortcut items of the Date and Time Pickersdate-fns-jalali
v3 in the Date and Time PickersBarChart
@mui/x-data-grid@7.4.0
svg
element (#13028) @oukunan@mui/x-data-grid-pro@7.4.0
Same changes as in @mui/x-data-grid@7.4.0
.
@mui/x-data-grid-premium@7.4.0
Same changes as in @mui/x-data-grid-pro@7.4.0
.
@mui/x-date-pickers@7.4.0
AdapterDateFnsJalaliV3
adapter (#12891) @smmoosaviid
attribute on shortcut items (#12976) @noraleonte@mui/x-date-pickers-pro@7.4.0
Same changes as in @mui/x-date-pickers@7.4.0
.
@mui/x-charts@7.4.0
ChartsGrid
to themeAugmentation
(#13026) @noraleonteBarChart
(#12834) @JCQuintas@mui/x-tree-view@7.4.0
<TreeItem2 />
(#12889) @flaviendelangleMay 2, 2024
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
id
attribute.
It should not affect you, but if you were relying on the gradient id
attribute, please update your usage.@mui/x-data-grid@7.3.2
formattedValue
from the edit value when passing to renderEditCell
(#12870) @cherniavskiiprops.rowCount
change (#12833) @MBilalShafi@mui/x-data-grid-pro@7.3.2
Same changes as in @mui/x-data-grid@7.3.2
.
@mui/x-data-grid-premium@7.3.2
Same changes as in @mui/x-data-grid-pro@7.3.2
, plus:
@mui/x-date-pickers@7.3.2
viewRenderers
prop description (#12915) @flaviendelanglePickersDay
(#12920) @flaviendelangle@mui/x-date-pickers-pro@7.3.2
Same changes as in @mui/x-date-pickers@7.3.2
.
@mui/x-charts@7.3.2
prop.slots
and prop.slotProps
not passed to <ChartsTooltip />
(#12939) @JCQuintasnext.config
settings (#12861) @oliviertassinari@mui/docs/HighlightedCode
(#12848) @alexfauquettet
command (#12948) @LukasTyApr 26, 2024
We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@7.3.1
columnHeaders
slot (#12768) @cherniavskii@mui/x-data-grid-pro@7.3.1
Same changes as in @mui/x-data-grid@7.3.1
.
@mui/x-data-grid-premium@7.3.1
Same changes as in @mui/x-data-grid-pro@7.3.1
.
@mui/x-date-pickers@7.3.1
@mui/x-date-pickers-pro@7.3.1
Same changes as in @mui/x-date-pickers@7.3.1
.
@mui/x-charts@7.3.1
BarCharts
(#12859) @JCQuintas@mui/x-tree-view@7.3.1
aria-activedescendant
attribute (#12867) @flaviendelangletype-ahead
(#12827) @flaviendelanglesx
props (#12791) @derek-0000l10n
GH workflow (#12895) @LukasTysetupFiles
entries in package.json
(#12899) @LukasTydescribeTreeView
for focus tests (#12698) @flaviendelangledescribeTreeView
for type-ahead tests (#12811) @flaviendelanglepnpm
(#11875) @LukasTyApr 18, 2024
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
🎨 Support color scales in Charts (#12490) @alexfauquette
Add a colorMap
configuration to an axis, and the chart will use it to select colors.
Each impacted chart (bar charts, line charts, scatter charts) has a dedicated section explaining how this color map is impacting it.
🌍 Improve Danish (da-DK) locale on the Data Grid
@mui/x-data-grid@7.3.0
onCellEditStop
on error (#12747) @sai6855@mui/x-data-grid-pro@7.3.0
Same changes as in @mui/x-data-grid@7.3.0
, plus:
@mui/x-data-grid-premium@7.3.0
Same changes as in @mui/x-data-grid-pro@7.3.0
.
A typo fix:
- ContinuouseScaleName
+ ContinuousScaleName
@mui/x-charts@7.3.0
dataIndex
to series valueFormatter
(#12745) @JCQuintasDEFAULT_X_AXIS_KEY
and DEFAULT_Y_AXIS_KEY
(#12780) @alexfauquettePieArcLabel
(#12806) @JCQuintas@mui/x-tree-view@7.3.0
defaultMuiPrevented
on the onFocus
prop of the root slot (#12813) @flaviendelangleDateTimeRangePicker
(#12786) @LukasTyApr 12, 2024
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@7.2.0
api
property to GridCallbackDetails
(#12742) @sai6855date
/dateTime
columns (#12709) @cherniavskii@mui/x-data-grid-pro@7.2.0
Same changes as in @mui/x-data-grid@7.2.0
.
@mui/x-data-grid-premium@7.2.0
Same changes as in @mui/x-data-grid-pro@7.2.0
, plus:
@mui/x-date-pickers@7.2.0
@mui/x-date-pickers-pro@7.2.0
Same changes as in @mui/x-date-pickers@7.2.0
, plus:
@mui/x-charts@7.2.0
tickLabelInterval
not working on YAxis
(#12746) @JCQuintas@mui/x-tree-view@7.2.0
getNavigableChildrenIds
method (#12713) @flaviendelanglestate.items.itemTree
(#12717) @flaviendelangleinstance
and publicAPI
methods from plugin and populate the main objects inside useTreeView
(#12650) @flaviendelangleAxisFormatter
documentation for customizing tick/tooltip value formatting (#12700) @JCQuintasl10n
PR packages (#12735) @LukasTydescribeTreeView
for icons tests (#12672) @flaviendelangledescribeTreeView
in existing tests for useTreeViewItems
(#12732) @flaviendelangleApr 5, 2024
We'd like to offer a big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:
setItemExpansion
Tree View API method (#12595) @flaviendelangle@mui/x-data-grid@7.1.1
ColDefChangesGridNoSnap
demo crash (#12663) @MBilalShafirowCount
is used with client-side pagination (#12448) @michelengelenGridFormatterParams
completely (#12660) @romgrk@mui/x-data-grid-pro@7.1.1
Same changes as in @mui/x-data-grid@7.1.1
.
@mui/x-data-grid-premium@7.1.1
Same changes as in @mui/x-data-grid-pro@7.1.1
.
@mui/x-date-pickers@7.1.1
readOnly
behavior (#12609) @LukasTy@mui/x-date-pickers-pro@7.1.1
Same changes as in @mui/x-date-pickers@7.1.1
, plus:
@mui/x-charts@7.1.1
tickInterval
usage for y-axis (#12592) @alexfauquetteid
is a number
(#12677) @JCQuintassx
property on ChartsTooltip
(#12659) @JCQuintas@mui/x-tree-view@7.1.1
publicAPI
methods (#12649) @flaviendelangle<RichTreeViewPro />
component (not released yet) (#12610) @flaviendelanglesetItemExpansion
(#12595) @flaviendelanglecheckboxSelectionVisibleOnly
prop (#12646) @michelengelen_action: 'delete'
in processRowUpdate
(#12670) @michelengelenPieShapeNoSnap
demo (#12636) @alp-exgetItemId
prop description (#12637) @flaviendelanglemargin
usage more visible (#12591) @alexfauquetteday
from the default dayOfWeekFormatter
function params (#12644) @LukasTy<TreeItem2 />
for icon expansion example on <RichTreeView />
(#12563) @flaviendelanglemaster
to v6
action (#12648) @LukasTy@mui/x-tree-view-pro/themeAugmentation
(#12674) @flaviendelangledescribeTreeView
to run test on <SimpleTreeView />
and <RichTreeView />
, using <TreeItem />
and <TreeItem2 />
+ migrate expansion tests (#12428) @flaviendelangletest-types
CI step allowed memory (#12651) @LukasTyexpress
package (#12602) @LukasTyl10n
PR belongs to (#12639) @LukasTydescribeTreeView
for selection tests (#12647) @flaviendelangleMar 28, 2024
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
resizeThrottleMs
prop (#12556) @romgrk@mui/x-data-grid@7.1.0
resizeThrottleMs
prop (#12556) @romgrkrowEditStop
event if row has fields with errors (#11383) @cherniavskiiGridToolbarQuickFilter
component (#12484) @jhawkins11@mui/x-data-grid-pro@7.1.0
Same changes as in @mui/x-data-grid@7.1.0
.
@mui/x-data-grid-premium@7.1.0
Same changes as in @mui/x-data-grid-pro@7.1.0
.
@mui/x-date-pickers@7.1.0
@mui/zero-runtime
(stop using ownerState
in styled
) (#12003) @flaviendelangle@mui/x-date-pickers-pro@7.1.0
Same changes as in @mui/x-date-pickers@7.1.0
, plus:
readOnly
(#12593) @LukasTy@mui/x-charts@7.1.0
@mui/x-tree-view@7.1.0
l10n
script on Windows (#12550) @LukasTyDateTimeRangePicker
tag in releaseChangelog
(#12526) @LukasTyMar 22, 2024
We're excited to announce the first v7 stable release! 🎉🚀
This is now the officially supported major version, where we'll keep rolling out new features, bug fixes, and improvements. Migration guides are available with a complete list of the breaking changes:
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
viewRenderers
on DateTimePicker
(#12441) @LukasTydensity
for the Data Grid (#12332) @MBilalShafiThe density
is a controlled prop now, if you were previously passing the density
prop to the Data Grid, you will need to do one of the following:
initialState.density
to initialize it. <DataGrid
- density="compact"
+ initialState={{ density: "compact" }}
/>
onDensityChange
callback to update the density
prop accordingly for it to work as expected.+ const [density, setDensity] = React.useState<GridDensity>('compact');
<DataGrid
- density="compact"
+ density={density}
+ onDensityChange={(newDensity) => setDensity(newDensity)}
/>
The selector gridDensityValueSelector
was removed, use the gridDensitySelector
instead.
The props rowBuffer
and columnBuffer
were renamed to rowBufferPx
and columnBufferPx
.
Their value is now a pixel value rather than a number of items. Their default value is now 150
.
The props rowThreshold
and columnThreshold
have been removed.
If you had the rowThreshold
prop set to 0
to force new rows to be rendered more often – this is no longer necessary.
@mui/x-data-grid@7.0.0
ElementType
usage (#12479) @cherniavskiirows
an optional prop (#12478) @MBilalShafi@mui/x-data-grid-pro@7.0.0
Same changes as in @mui/x-data-grid@7.0.0
.
@mui/x-data-grid-premium@7.0.0
Same changes as in @mui/x-data-grid-pro@7.0.0
, plus:
DesktopDateTimePicker
view rendering has been optimized by using the same technique as for DesktopDateTimeRangePicker
.dateTimeViewRenderers
have been removed in favor of reusing existing time view renderers (renderTimeViewClock
, renderDigitalClockTimeView
and renderMultiSectionDigitalClockTimeView
) and date view renderer (renderDateViewCalendar
).renderTimeViewClock
to time view renderers will no longer revert to the old behavior of rendering only date or time view.@mui/x-date-pickers@7.0.0
DesktopDateTimePicker
(#12441) @LukasTy@mui/x-date-pickers-pro@7.0.0
Same changes as in @mui/x-date-pickers@7.0.0
, plus:
JSDoc
(#12518) @LukasTy@mui/x-charts@7.0.0
CartesianContextProvider
(#12461) @JanpotnodeId
prop used by <TreeItem />
has been renamed to itemId
for consistency: <TreeView>
- <TreeItem label="Item 1" nodeId="one">
+ <TreeItem label="Item 1" itemId="one">
</TreeView>
The focus is now applied to the Tree Item root element instead of the Tree View root element.
This change will allow new features that require the focus to be on the Tree Item, like the drag and drop reordering of items. It also solves several issues with focus management, like the inability to scroll to the focused item when a lot of items are rendered.
This will mostly impact how you write tests to interact with the Tree View:
For example, if you were writing a test with react-testing-library
, here is what the changes could look like:
it('test example on first item', () => {
- const { getByRole } = render(
+ const { getAllByRole } = render(
<SimpleTreeView>
<TreeItem nodeId="one" />
<TreeItem nodeId="two" />
</SimpleTreeView>
);
- const tree = getByRole('tree');
+ const firstTreeItem = getAllByRole('treeitem')[0];
act(() => {
- tree.focus();
+ firstTreeItem.focus();
});
- fireEvent.keyDown(tree, { key: 'ArrowDown' });
+ fireEvent.keyDown(firstTreeItem, { key: 'ArrowDown' });
})
@mui/x-tree-view@7.0.0
nodeId
to itemId
(#12418) @noraleonteContentComponent
prop to avoid using the word "node" (#12476) @flaviendelangle@mui/x-codemod@7.0.0
@mui/material
peer dependency for all packages (#12516) @LukasTyno-restricted-imports
ESLint rule not working for Data Grid packages (#12477) @cherniavskiino-response
action runs (#12491) @michaldudaklegacy
browserlistrc
entry (#12415) @LukasTyMar 14, 2024
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
lazyLoading
feature flag was removed from the experimentalFeatures
prop.columnHeader--showColumnBorder
class was replaced by columnHeader--withLeftBorder
and columnHeader--withRightBorder
.columnHeadersInner
, columnHeadersInner--scrollable
, and columnHeaderDropZone
classes were removed since the inner wrapper was removed in our effort to simplify the DOM structure and improve accessibility.pinnedColumnHeaders
, pinnedColumnHeaders--left
, and pinnedColumnHeaders--right
classes were removed along with the element they were applied to.
The pinned column headers now use position: 'sticky'
and are rendered in the same row element as the regular column headers.@mui/x-data-grid@7.0.0-beta.7
rowCount
part of the state (#12381) @MBilalShafibaseSwitch
slot (#12439) @romgrk@mui/x-data-grid-pro@7.0.0-beta.7
Same changes as in @mui/x-data-grid@7.0.0-beta.7
, plus:
inputRef
to the props passed to colDef.renderHeaderFilter
(#12328) @vovarudomanenko@mui/x-data-grid-premium@7.0.0-beta.7
Same changes as in @mui/x-data-grid-pro@7.0.0-beta.7
, plus:
@mui/x-date-pickers@7.0.0-beta.7
tabIndex
on accessible field DOM structure (#12311) @flaviendelangle@mui/x-date-pickers-pro@7.0.0-beta.7
Same changes as in @mui/x-date-pickers@7.0.0-beta.7
.
@mui/x-charts@7.0.0-beta.7
The onNodeFocus
callback has been renamed to onItemFocus
for consistency:
<SimpleTreeView
- onNodeFocus={onNodeFocus}
+ onItemFocus={onItemFocus}
/>
@mui/x-tree-view@7.0.0-beta.7
<TreeItem2 />
component and a new useTreeItem2
hook (#11721) @flaviendelangleonNodeFocus
to onItemFocus
(#12419) @noraleontelegacy
bundle drop mention in migration pages (#12424) @LukasTyInfo
import (#12427) @LukasTyrel="noreferrer"
by rel="noopener"
@oliviertassinaridate-fns
weekStarsOn
overriding example (#12416) @LukasTyMar 8, 2024
We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@7.0.0-beta.6
sortModel
(#12325) @MBilalShafistopCellMode
event in renderEditRating
component (#12335) @sai6855@mui/x-data-grid-pro@7.0.0-beta.6
Same changes as in @mui/x-data-grid@7.0.0-beta.6
, plus:
onRowsScrollEnd
to use IntersectionObserver
(#8672) @DanailH@mui/x-data-grid-premium@7.0.0-beta.6
Same changes as in @mui/x-data-grid-pro@7.0.0-beta.6
.
@mui/x-charts@7.0.0-beta.6
The component used to animate the item children is now defined as a slot on the <TreeItem />
component.
If you were passing a TransitionComponent
or TransitionProps
to your <TreeItem />
component,
you need to use the new groupTransition
slot on this component:
<SimpleTreeView>
<TreeItem
nodeId="1"
label="Node 1"
- TransitionComponent={Fade}
+ slots={{ groupTransition: Fade }}
- TransitionProps={{ timeout: 600 }}
+ slotProps={{ groupTransition: { timeout: 600 } }}
/>
</SimpleTreeView>
The group
class of the <TreeItem />
component has been renamed to groupTransition
to match with its new slot name.
const StyledTreeItem = styled(TreeItem)({
- [`& .${treeItemClasses.group}`]: {
+ [`& .${treeItemClasses.groupTransition}`]: {
marginLeft: 20,
},
});
@mui/x-tree-view@7.0.0-beta.6
props.items
(#12359) @flaviendelanglegetItem
(#12251) @flaviendelangleTransitionComponent
and TransitionProps
with a groupTransition
slot (#12336) @flaviendelanglez-index
usage in SVG (#12337) @alexfauquetteCharts
test (#11551) @alexfauquetteMar 1, 2024
We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
getSortComparator
for more advanced sorting behaviors (#12215) @cherniavskiiuse client
directive to the Grid packages (#11803) @MBilalShafi@mui/x-data-grid@7.0.0-beta.5
getSortComparator
for more advanced sorting behaviors (#12215) @cherniavskiiuse client
directive to the Grid packages (#11803) @MBilalShafidisableResetButton
and disableShowHideToggle
flags to not exclude each other (#12169) @adyryquerySelector
call (#12229) @romgrkonColumnWidthChange
called before autosize affects column width (#12140) @shaharyar-shamshiupsertFilterItems
removing filters that are not part of the update (#11954) @gitstart@mui/x-data-grid-pro@7.0.0-beta.5
Same changes as in @mui/x-data-grid@7.0.0-beta.5
, plus:
@mui/x-data-grid-premium@7.0.0-beta.5
Same changes as in @mui/x-data-grid-pro@7.0.0-beta.5
, plus:
@mui/x-date-pickers@7.0.0-beta.5
@mui/x-date-pickers-pro@7.0.0-beta.5
Same changes as in @mui/x-date-pickers@7.0.0-beta.5
.
@mui/x-charts@7.0.0-beta.5
@mui/x-tree-view@7.0.0-beta.5
getComponentInfo
RegExp (#12241) @flaviendelanglewindow.
reference for common globals @oliviertassinarino-response
workflow (#12193) @MBilalShafiFeb 23, 2024
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
legacy
bundle that used to support old browsers like IE 11 is no longer included..MuiDataGrid-cellContent
has been removed, use .MuiDataGrid-cell
to style the cells.@mui/x-data-grid@7.0.0-beta.4
is any of
filter operator (#11939) @gitstart@mui/x-data-grid-pro@7.0.0-beta.4
Same changes as in @mui/x-data-grid@7.0.0-beta.4
.
@mui/x-data-grid-premium@7.0.0-beta.4
Same changes as in @mui/x-data-grid-pro@7.0.0-beta.4
.
The selectedSections
prop no longer accepts start and end indexes.
When selecting several — but not all — sections, the field components were not behaving correctly, you can now only select one or all sections:
<DateField
- selectedSections={{ startIndex: 0, endIndex: 0 }}
+ selectedSections={0}
// If the field has 3 sections
- selectedSections={{ startIndex: 0, endIndex: 2 }}
+ selectedSections="all"
/>
The headless field hooks (e.g.: useDateField
) now returns a new prop called enableAccessibleFieldDOMStructure
.
This property is utilized to determine whether the anticipated UI is constructed using an accessible DOM structure.
Learn more about this new accessible DOM structure in the v8 migration guide.
When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove enableAccessibleFieldDOMStructure
before it is passed to the DOM:
function MyCustomTextField(props) {
const {
+ // Should be ignored
+ enableAccessibleFieldDOMStructure,
// ... rest of the props you are using
} = props;
return ( /* Some UI to edit the date */ )
}
function MyCustomField(props) {
const fieldResponse = useDateField<Dayjs, false, typeof textFieldProps>({
...props,
+ // If you only support one DOM structure, we advise you to hardcode it here to avoid unwanted switches in your application
+ enableAccessibleFieldDOMStructure: false,
});
return <MyCustomTextField ref={ref} {...fieldResponse} />;
}
function App() {
return <DatePicker slots={{ field: MyCustomField }} />;
}
The following internal types were exported by mistake and have been removed from the public API:
UseDateFieldDefaultizedProps
UseTimeFieldDefaultizedProps
UseDateTimeFieldDefaultizedProps
UseSingleInputDateRangeFieldComponentProps
UseSingleInputTimeRangeFieldComponentProps
UseSingleInputDateTimeRangeFieldComponentProps
@mui/x-date-pickers@7.0.0-beta.4
PickersTextField
component in the fields (#10649) @flaviendelangleDateTimePickerTabs
(#12096) @LukasTy@mui/x-date-pickers-pro@7.0.0-beta.4
Same changes as in @mui/x-date-pickers@7.0.0-beta.4
.
@mui/x-charts@7.0.0-beta.4
These components are no longer exported from @mui/x-charts
:
CartesianContextProvider
DrawingProvider
@mui/x-charts@7.0.0-beta.4
@mui/x-tree-view@7.0.0-beta.4
findIndex
to support IE 11 (#12129) @flaviendelanglepro
plan (#12047) @alexfauquetteundefined
(#12128) @alexfauquetteexperimental.cpus
to control amount of export workers in Next.js (#12095) @JanpotdescribeConformance
(#12130) @michaldudakFeb 16, 2024
We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
🎁 Charts get a built in grid
🎛️ Charts get a Gauge component.
🐞 Bugfixes
📚 Documentation improvements
rowEditCommit
event and the related prop onRowEditCommit
was removed. The processRowUpdate
prop can be used in place.@mui/x-data-grid@7.0.0-beta.3
rowEditCommit
(#12073) @MBilalShafi@mui/x-data-grid-pro@7.0.0-beta.3
Same changes as in @mui/x-data-grid@7.0.0-beta.3
.
@mui/x-data-grid-premium@7.0.0-beta.3
Same changes as in @mui/x-data-grid-pro@7.0.0-beta.3
.
@mui/x-charts@7.0.0-beta.3
ChartsGrid
component (#11034) @alexfauquette@mui/x-tree-view@7.0.0-beta.3
dayOfWeekFormatter
typo in the pickers v6 to v7 migration document (#12043) @StylesTripAdapterDateFnsV3
(#12036) @flaviendelanglefocused
prop from demo (#12092) @michelengelenFeb 9, 2024
We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@7.0.0-beta.2
removeAllFilterItems
as a reason of onFilterModelChange
callback (#11911) @shaharyar-shamshipageSizeOptions
prop (#11609) @pcorpetlastPage
in GridPagination
(#11958) @MBilalShafi@mui/x-data-grid-pro@7.0.0-beta.2
Same changes as in @mui/x-data-grid@v7.0.0-beta.2
.
@mui/x-data-grid-premium@v7.0.0-beta.2
Same changes as in @mui/x-data-grid-pro@7.0.0-beta.2
, plus:
@mui/x-date-pickers@7.0.0-beta.2
isWithinRange
method (#11936) @LukasTyTDate
(#11791) @flaviendelangle@mui/x-date-pickers-pro@7.0.0-beta.2
Same changes as in @mui/x-date-pickers@7.0.0-beta.2
.
@mui/x-charts@7.0.0-beta.2
reverse
property to axes (#11899) @alexfauquette@mui/x-tree-view@7.0.0-beta.2
If you're using the commercial license, you need to update the import path:
-import { LicenseInfo } from '@mui/x-license-pro';
+import { LicenseInfo } from '@mui/x-license';
@mui/x-license@7.0.0-beta.2
@mui/x-license-pro
to @mui/x-license
(#11938) @cherniavskiiAdapterDateFnsV3
on the Getting Started page (#11985) @flaviendelangleCharts
breaking change steps (#11971) @alexfauquetteChartsTooltip
typo (#11961) @thisisharsh7Localization
documentation sections (#11989) @LukasTydocs:serve
script (#11935) @cherniavskiiLicenseInfo
re-exports (#11956) @cherniavskiitest_types
failing on the next
branch (#11944) @cherniavskiitest_static
on the next branch (#11977) @cherniavskiiFeb 1, 2024
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
GridColDef
methods signatures (#11573) @cherniavskii🚀 All charts have click handlers (#11411) @alexfauquette Test their respective documentation demonstrations to know more about the data format:
Big thanks to @giladappsforce and @yaredtsy for their contribution on exploring this feature.
The signature of GridColDef['valueGetter']
has been changed for performance reasons:
- valueGetter: ({ value, row }) => value,
+ valueGetter: (value, row, column, apiRef) => value,
The GridValueGetterParams
interface has been removed:
- const customValueGetter = (params: GridValueGetterParams) => params.row.budget;
+ const customValueGetter: GridValueGetterFn = (value, row) => row.budget;
The signature of GridColDef['valueFormatter']
has been changed for performance reasons:
- valueFormatter: ({ value }) => value,
+ valueFormatter: (value, row, column, apiRef) => value,
The GridValueFormatterParams
interface has been removed:
- const gridDateFormatter = ({ value, field, id }: GridValueFormatterParams<Date>) => value.toLocaleDateString();
+ const gridDateFormatter: GridValueFormatter = (value: Date) => value.toLocaleDateString();
The signature of GridColDef['valueSetter']
has been changed for performance reasons:
- valueSetter: (params) => {
- const [firstName, lastName] = params.value!.toString().split(' ');
- return { ...params.row, firstName, lastName };
- }
+ valueSetter: (value, row) => {
+ const [firstName, lastName] = value!.toString().split(' ');
+ return { ...row, firstName, lastName };
+}
The GridValueSetterParams
interface has been removed:
- const setFullName = (params: GridValueSetterParams) => {
- const [firstName, lastName] = params.value!.toString().split(' ');
- return { ...params.row, firstName, lastName };
- };
+ const setFullName: GridValueSetter<Row> = (value, row) => {
+ const [firstName, lastName] = value!.toString().split(' ');
+ return { ...row, firstName, lastName };
+ }
The signature of GridColDef['valueParser']
has been changed for performance reasons:
- valueParser: (value, params: GridCellParams) => value.toLowerCase(),
+ valueParser: (value, row, column, apiRef) => value.toLowerCase(),
The signature of GridColDef['colSpan']
has been changed for performance reasons:
- colSpan: ({ row, field, value }: GridCellParams) => (row.id === 'total' ? 2 : 1),
+ colSpan: (value, row, column, apiRef) => (row.id === 'total' ? 2 : 1),
The signature of GridColDef['pastedValueParser']
has been changed for performance reasons:
- pastedValueParser: (value, params) => new Date(value),
+ pastedValueParser: (value, row, column, apiRef) => new Date(value),
The signature of GridColDef['groupingValueGetter']
has been changed for performance reasons:
- groupingValueGetter: (params) => params.value.name,
+ groupingValueGetter: (value: { name: string }) => value.name,
@mui/x-data-grid@7.0.0-beta.1
toggleAllMode
prop to the columnsManagement
slot (#10794) @H999GridColDef
methods signatures (#11573) @cherniavskii@mui/x-data-grid-pro@7.0.0-beta.1
Same changes as in @mui/x-data-grid@7.0.0-beta.1
.
@mui/x-data-grid-premium@7.0.0-beta.1
Same changes as in @mui/x-data-grid-pro@7.0.0-beta.1
.
@mui/x-date-pickers@7.0.0-beta.1
@mui/x-date-pickers-pro@7.0.0-beta.1
Same changes as in @mui/x-date-pickers@7.0.0-beta.1
.
The line chart now have animation by default.
You can disable it with skipAnimation
prop.
See animation documentation for more information.
Pie charts onClick
get renamed onItemClick
for consistency with other charts click callback.
@mui/x-charts@7.0.0-beta.1
onClick
support (#11411) @alexfauquetteJan 26, 2024
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
The columns management component has been redesigned and the component was extracted from the ColumnsPanel
which now only serves as a wrapper to display the component above the headers as a panel. As a result, a new slot columnsManagement
and the related prop slotProps.columnsManagement
have been introduced. The props corresponding to the columns management component which were previously passed to the prop slotProps.columnsPanel
should now be passed to slotProps.columnsManagement
. slotProps.columnsPanel
could still be used to override props corresponding to the Panel
component used in ColumnsPanel
which uses Popper
component under the hood.
<DataGrid
slotProps={{
- columnsPanel: {
+ columnsManagement: {
sort: 'asc',
autoFocusSearchField: false,
},
}}
/>
Show all
and Hide all
buttons in the ColumnsPanel
have been combined into one Show/Hide All
toggle in the new columns management component. The related props disableShowAllButton
and disableHideAllButton
have been replaced with a new prop disableShowHideToggle
.
<DataGrid
- disableShowAllButton
- disableHideAllButton
+ disableShowHideToggle
/>
@mui/x-data-grid@7.0.0-beta.0
GridColumnTypes
interface for custom column types (#11742) @cherniavskiiapiRef
early (#11792) @cherniavskii@mui/x-data-grid-pro@7.0.0-beta.0
Same changes as in @mui/x-data-grid@7.0.0-beta.0
.
@mui/x-data-grid-premium@7.0.0-beta.0
Same changes as in @mui/x-data-grid-pro@7.0.0-beta.0
.
@mui/x-date-pickers@7.0.0-beta.0
layout.tabs
class to Tabs
slot (#11781) @LukasTy@mui/x-date-pickers-pro@7.0.0-beta.0
Same changes as in @mui/x-date-pickers@7.0.0-beta.0
, plus:
DateTimeRangePicker
component (#9528) @LukasTyDateTimeRangePicker
theme augmentation (#11814) @LukasTycalendars
prop on Mobile
(#11752) @LukasTy@mui/x-tree-view@7.0.0-beta.0
contextValue
to the headless Tree View doc (#11705) @flaviendelangledisableSelection
prop (#11821) @flaviendelangleDateTimeRangePicker
in relevant demos (#11815) @LukasTyJan 19, 2024
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
@mui/material
peer dependency for all packages (#11692) @LukasTy
The minimum required version of @mui/material
is now 5.15.0
.The ariaV7
experimental flag has been removed and the Data Grid now uses the improved accessibility implementation by default.
If you were using the ariaV7
flag, you can remove it from the experimentalFeatures
prop:
-<DataGrid experimentalFeatures={{ ariaV7: true }} />
+<DataGrid />
The most notable changes that might affect your application or tests are:
The role="grid"
attribute along with related ARIA attributes are now applied to the inner div
element instead of the root div
element:
-<div class="MuiDataGrid-root" role="grid" aria-colcount="5" aria-rowcount="101" aria-multiselectable="false">
+<div class="MuiDataGrid-root">
<div class="MuiDataGrid-toolbarContainer"></div>
- <div class="MuiDataGrid-main"></div>
+ <div class="MuiDataGrid-main" role="grid" aria-colcount="5" aria-rowcount="101" aria-multiselectable="false"></div>
<div class="MuiDataGrid-footerContainer"></div>
</div>
When the Tree data feature is used, the grid role is now role="treegrid"
instead of role="grid"
.
The Data Grid cells now have role="gridcell"
instead of role="cell"
.
The buttons in toolbar composable components GridToolbarColumnsButton
, GridToolbarFilterButton
, GridToolbarDensity
, and GridToolbarExport
are now wrapped with a tooltip component and have a consistent interface. To override some props corresponding to the toolbar buttons or their corresponding tooltips, you can use the slotProps
prop. Following is an example diff. See Toolbar section for more details.
function CustomToolbar() {
return (
<GridToolbarContainer>
<GridToolbarColumnsButton />
<GridToolbarFilterButton
- title="Custom filter" // 🛑 This was previously forwarded to the tooltip component
+ slotProps={{ tooltip: { title: 'Custom filter' } }} // ✅ This is the correct way now
/>
<GridToolbarDensitySelector
- variant="outlined" // 🛑 This was previously forwarded to the button component
+ slotProps={{ button: { variant: 'outlined' } }} // ✅ This is the correct way now
/>
</GridToolbarContainer>
);
}
Column grouping is now enabled by default. The flag columnGrouping
is no longer needed to be passed to the experimentalFeatures
prop to enable it.
-<DataGrid experimentalFeatures={{ columnGrouping: true }} />
+<DataGrid />
The column grouping API methods getColumnGroupPath
and getAllGroupDetails
are no longer prefixed with unstable_
.
The column grouping selectors gridFocusColumnGroupHeaderSelector
and gridTabIndexColumnGroupHeaderSelector
are no longer prefixed with unstable_
.
The disabled column specific features like hiding
, sorting
, filtering
, pinning
, row grouping
, etc could now be controlled programmatically using initialState
, respective controlled models, or the API object. See the related docs section.
@mui/x-data-grid@7.0.0-alpha.9
filterModel.logicOperator
(#11673) @MBilalShaficolumn grouping
feature stable (#11698) @MBilalShafiariaV7
experimental flag (#11428) @cherniavskii@mui/x-data-grid-pro@7.0.0-alpha.9
Same changes as in @mui/x-data-grid@7.0.0-alpha.9
, plus:
@mui/x-data-grid-premium@7.0.0-alpha.9
Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.9
, plus:
The locales
export has been removed from the root of the packages.
If you were importing locales from the root, be sure to update it:
-import { frFR } from '@mui/x-date-pickers';
+import { frFR } from '@mui/x-date-pickers/locales';
@mui/x-date-pickers@7.0.0-alpha.9
PickersTextField
and its dependencies public (#11581) @flaviendelanglegetWeekNumber
behavior (#11697) @LukasTylocales
(#11612) @LukasTy@mui/x-date-pickers-pro@7.0.0-alpha.9
Same changes as in @mui/x-date-pickers@7.0.0-alpha.9
.
@mui/x-charts@7.0.0-alpha.9
innerRadius
and outerRadius
to the DOM (#11689) @alexfauquettestackOffset
for LineChart
(#11647) @alexfauquetteThe 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 Tree Item 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/x-tree-view@7.0.0-alpha.9
Theme
generic to variants (#11480) @dhulmeuseTreeItem
to useTreeItemState
(#11712) @flaviendelangleslots
and slotProps
on the Tree View components (#11664) @flaviendelanglepageSizeOptions
prop documentation (#11682) @oliviertassinariclassName
prop (#11693) @oliviertassinari@mui/material
peer dependency for all packages (#11692) @LukasTykarma
run in parallel (#11571) @romgrkkarma-parallel
run under a new command (#11716) @romgrkJan 11, 2024
We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
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';
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/x-data-grid@7.0.0-alpha.8
@mui/x-data-grid-pro@7.0.0-alpha.8
Same changes as in @mui/x-data-grid@7.0.0-alpha.8
.
@mui/x-data-grid-premium@7.0.0-alpha.8
Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.8
.
@mui/x-date-pickers@7.0.0-alpha.8
OpenPickerButton
(#11642) @noraleonteDateRange
to @mui/x-date-pickers-pro/models
(#11611) @flaviendelangle@mui/x-date-pickers-pro@7.0.0-alpha.8
Same changes as in @mui/x-date-pickers@7.0.0-alpha.8
.
@mui/x-tree-view@7.0.0-alpha.8
onKeyDown
handler (#11481) @flaviendelanglex-date-pickers-pro
demo adapter imports (#11628) @LukasTygit diff
format @oliviertassinarijsdom
version (#11652) @cherniavskiiJan 5, 2024
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
@mui/x-data-grid@7.0.0-alpha.7
hasEval
when disableEval
is set (#11516) @reihwaldautoPageSize
and autoHeight
(#11585) @Sboonnyeval
with new Function
(#11557) @oliviertassinariautoPageSize
is used with autoHeight
(#11554) @Sboonny@mui/x-data-grid-pro@7.0.0-alpha.7
Same changes as in @mui/x-data-grid@7.0.0-alpha.7
.
@mui/x-data-grid-premium@7.0.0-alpha.7
Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.7
.
@mui/x-date-pickers@7.0.0-alpha.7
@mui/x-date-pickers-pro@7.0.0-alpha.7
Same changes as in @mui/x-date-pickers@7.0.0-alpha.7
.
@mui/x-charts@7.0.0-alpha.7
arcLabelRadius
property (#11487) @alexfauquettenull
in line chart using dataset (#11550) @alexfauquetteThe 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/x-tree-view@7.0.0-alpha.7
items
prop (#11059) @flaviendelangleonNodeExpansionToggle
prop (#11547) @flaviendelanglenext.config.js
(#11514) @oliviertassinariDec 22, 2023
We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
Date
objects in the filterModel
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 (for example filter panel) will set the value as a Date
object.
@mui/x-data-grid@7.0.0-alpha.6
checkboxSelection
respect the disableMultipleRowSelection
prop (#11448) @cherniavskiiDate
objects in filter model (#7069) @cherniavskiiSelect
s by default (#11330) @cherniavskii@mui/x-data-grid-pro@7.0.0-alpha.6
Same changes as in @mui/x-data-grid@7.0.0-alpha.6
.
@mui/x-data-grid-premium@7.0.0-alpha.6
Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.6
.
@mui/x-date-pickers@7.0.0-alpha.6
PickersInput
sizing styles (#11392) @noraleontePickersTextField
standard
and filled
variants (#11250) @noraleontePickersSectionList
(#11449) @flaviendelanglePickersSectionList
(#11352) @flaviendelangle@mui/x-date-pickers-pro@7.0.0-alpha.6
Same changes as in @mui/x-date-pickers@7.0.0-alpha.6
.
@mui/x-charts@7.0.0-alpha.5
ChartsText
component public (#11370) @alexfauquettefalse
default values for boolean props (#11477) @cherniavskiiname
prop examples (#11422) @LukasTydate-fns
package to v2 in codesandbox (#11463) @LukasTycherry-pick
action (#11446) @LukasTyDec 14, 2023
We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
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/x-data-grid@7.0.0-alpha.5
instanceId
required for state selectors (#11395) @cherniavskii@mui/x-data-grid-pro@7.0.0-alpha.5
Same changes as in @mui/x-data-grid@7.0.0-alpha.5
.
@mui/x-data-grid-premium@7.0.0-alpha.5
Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.5
.
The slot interfaces have been renamed to match with @mui/base
naming.
The SlotsComponent
suffix has been replaced with Slots
and SlotsComponentsProps
with SlotProps
.
-DateCalendarSlotsComponent
-DateCalendarSlotsComponentsProps
+DateCalendarSlots
+DateCalendarSlotProps
Move inputRef
inside the props passed to the field hooks
The field hooks now only receive the props instead of an object containing both the props and the inputRef
.
-const { inputRef, ...otherProps } = props
-const fieldResponse = useDateField({ props: otherProps, inputRef });
+const fieldResponse = useDateField(props);
If you are using a multi input range field hook, the same applies to startInputRef
and endInputRef
params
-const { inputRef: startInputRef, ...otherStartTextFieldProps } = startTextFieldProps
-const { inputRef: endInputRef, ...otherEndTextFieldProps } = endTextFieldProps
const fieldResponse = useMultiInputDateRangeField({
sharedProps,
- startTextFieldProps: otherStartTextFieldProps,
- endTextFieldProps: otherEndTextFieldProps,
- startInputRef
- endInputRef,
+ startTextFieldProps,
+ endTextFieldProps
});
Rename the ref returned by the field hooks to inputRef
When used with the v6 TextField approach (where the input is an <input />
HTML element), the field hooks return a ref that needs to be passed to the <input />
element.
This ref was previously named ref
and has been renamed inputRef
for extra clarity.
const fieldResponse = useDateField(props);
-return <input ref={fieldResponse.ref} />
+return <input ref={fieldResponse.inputRef} />
If you are using a multi input range field hook, the same applies to the ref in the startDate
and endDate
objects
const fieldResponse = useDateField(props);
return (
<div>
- <input ref={fieldResponse.startDate.ref} />
+ <input ref={fieldResponse.startDate.inputRef} />
<span>–</span>
- <input ref={fieldResponse.endDate.ref} />
+ <input ref={fieldResponse.endDate.inputRef} />
</div>
)
Restructure the API of useClearableField
The useClearableField
hook API has been simplified to now take a props
parameter instead of a fieldProps
, InputProps
, clearable
, onClear
, slots
and slotProps
parameters.
You should now be able to directly pass the returned value from your field hook (for example useDateField
) to useClearableField
const fieldResponse = useDateField(props);
-const { InputProps, onClear, clearable, slots, slotProps, ...otherFieldProps } = fieldResponse
-const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField({
- fieldProps: otherFieldProps,
- InputProps,
- clearable,
- onClear,
- slots,
- slotProps,
-});
-
- return <MyCustomTextField {...processedFieldProps} InputProps={ProcessedInputProps} />
+const processedFieldProps = useClearableField(fieldResponse);
+
+return <MyCustomTextField {...processedFieldProps} />
@mui/x-date-pickers@7.0.0-alpha.5
@types/react
version (#11397) @LukasTy@mui/x-date-pickers-pro@7.0.0-alpha.5
Same changes as in @mui/x-date-pickers@7.0.0-alpha.5
, plus:
autoFocus
behavior (#11273) @kealjones-wk@mui/x-charts@7.0.0-alpha.5
@mui/x-codemod@7.0.0-alpha.5
cellSelection
codemod and update migration guide (#11353) @MBilalShafinext
-> master
(#11382) @MBilalShafino-response
workflow (#11369) @MBilalShafiDec 8, 2023
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 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/x-data-grid@7.0.0-alpha.4
GridColDef['type']
(#11270) @cherniavskii@mui/x-data-grid-pro@7.0.0-alpha.4
Same changes as in @mui/x-data-grid@7.0.0-alpha.4
, plus:
@mui/x-data-grid-premium@7.0.0-alpha.4
Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.4
.
@mui/x-date-pickers@7.0.0-alpha.4
PickersTextField
(#11258) @flaviendelangleMultiSectionDigitalClock
issues (#11305) @LukasTy@mui/x-date-pickers-pro@7.0.0-alpha.4
Same changes as in @mui/x-date-pickers@7.0.0-alpha.4
.
@mui/x-charts@7.0.0-alpha.4
@mui/utils
as a dependency (#11351) @michelengelenonPaginationModelChange
docs (#10191) @JFBenzsDemoContainer
styling coverage (#11315) @LukasTyDec 4, 2023
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 (for example: Sunday for en-US
, Monday for fr-FR
).
📈 Fix a lot of Charts package issues
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 Data Grid 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/x-data-grid@7.0.0-alpha.3
onFilterModelChange
being fired with stale field value (#11000) @gitstartpreferencesPanel
slot (#11228) @cherniavskii@mui/x-data-grid-pro@7.0.0-alpha.3
Same changes as in @mui/x-data-grid@7.0.0-alpha.3
.
@mui/x-data-grid-premium@7.0.0-alpha.3
Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.3
, plus:
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, Info } 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):
changeImportance
of the shortcut.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 }} />
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/x-date-pickers@7.0.0-alpha.3
format
parameter (#11130) @LukasTychangeImportance
and shortcut
mandatory in PickersShortcuts
(#10941) @flaviendelanglecustomParseFormat
to constructor (#11151) @michelengelenPickersTextField
styling - outlined variant (#10778) @noraleonteAdapterLuxon
(#10964) @flaviendelangle@mui/x-date-pickers-pro@7.0.0-alpha.3
Same changes as in @mui/x-date-pickers@7.0.0-alpha.3
.
@mui/x-charts@7.0.0-alpha.3
defaultizeValueFormatter
util to accept an optional series.valueFormatter
value (#11144) @michelengelenlabelStyle
and tickLabelStyle
props on <ChartsYAxis />
(#11180) @akamfoadTextField
styling example to customization playground (#10812) @noraleonteDayCalendar
(#11158) @flaviendelanglenewFeature
flag on v6 features (#11168) @flaviendelangle@mui/system
a direct dependency (#11128) @LukasTyENABLE_AD
env variable (#11181) @oliviertassinariplan: Pro
and plan: Premium
labels on Pro / Premium issue templates (#10183) @flaviendelangleNov 23, 2023
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@7.0.0-alpha.2
@mui/x-data-grid-pro@7.0.0-alpha.2
Same changes as in @mui/x-data-grid@7.0.0-alpha.2
.
@mui/x-data-grid-premium@7.0.0-alpha.2
Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.2
.
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/x-date-pickers@7.0.0-alpha.2
defaultCalendarMonth
prop (#10987) @flaviendelangleshouldDisableClock
prop (#11042) @flaviendelangledayPickerClasses
variable dayCalendarClasses
(#11140) @flaviendelangleadapter.date
with the current adapter.dateWithTimezone
(#10979) @flaviendelangle@mui/x-date-pickers-pro@7.0.0-alpha.2
Same changes as in @mui/x-date-pickers@7.0.0-alpha.2
.
@mui/x-charts@7.0.0-alpha.2
ChartsTooltip
component setup (#11152) @LukasTy@mui/x-codemod@7.0.0-alpha.2
referenceDate
instead of defaultCalendarMonth
(#11139) @flaviendelangle@mui/x-data-grid-generator
(#11134) @oliviertassinaribabel-plugin-module-resolver
to 5.0.0 (#11065) @flaviendelangleNov 17, 2023
We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:
@mui/x-date-pickers@7.0.0-alpha.1
/ @mui/x-date-pickers-pro@7.0.0-alpha.1
The string argument of the dayOfWeekFormatter
prop has been replaced in favor of the date object to allow more flexibility.
<DateCalendar
// If you were still using the day string, you can get it back with your date library.
- dayOfWeekFormatter={dayStr => `${dayStr}.`}
+ dayOfWeekFormatter={day => `${day.format('dd')}.`}
// If you were already using the day object, just remove the first argument.
- dayOfWeekFormatter={(_dayStr, day) => `${day.format('dd')}.`}
+ dayOfWeekFormatter={day => `${day.format('dd')}.`}
/>
The imports related to the calendarHeader
slot have been moved from @mui/x-date-pickers/DateCalendar
to @mui/x-date-pickers/PIckersCalendarHeader
:
export {
pickersCalendarHeaderClasses,
PickersCalendarHeaderClassKey,
PickersCalendarHeaderClasses,
PickersCalendarHeader,
PickersCalendarHeaderProps,
PickersCalendarHeaderSlotsComponent,
PickersCalendarHeaderSlotsComponentsProps,
ExportedPickersCalendarHeaderProps,
-} from '@mui/x-date-pickers/DateCalendar';
+} from '@mui/x-date-pickers/PickersCalendarHeader';
The monthAndYear
format has been removed.
It was used in the header of the calendar views, you can replace it with the new format
prop of the calendarHeader
slot:
<LocalizationProvider
adapter={AdapterDayJS}
- formats={{ monthAndYear: 'MM/YYYY' }}
/>
<DatePicker
+ slotProps={{ calendarHeader: { format: 'MM/YYYY' }}}
/>
<DateRangePicker
+ slotProps={{ calendarHeader: { format: 'MM/YYYY' }}}
/>
<LocalizationProvider />
The adapter.getDiff
method have been removed, you can directly use your date library:
// For Day.js
-const diff = adapter.getDiff(value, comparing, unit);
+const diff = value.diff(comparing, unit);
// For Luxon
-const diff = adapter.getDiff(value, comparing, unit);
+const getDiff = (value: DateTime, comparing: DateTime | string, unit?: AdapterUnits) => {
+ const parsedComparing = typeof comparing === 'string'
+ ? DateTime.fromJSDate(new Date(comparing))
+ : comparing;
+ if (unit) {
+ return Math.floor(value.diff(comparing).as(unit));
+ }
+ return value.diff(comparing).as('millisecond');
+};
+
+const diff = getDiff(value, comparing, unit);
// For DateFns
-const diff = adapter.getDiff(value, comparing, unit);
+const getDiff = (value: Date, comparing: Date | string, unit?: AdapterUnits) => {
+ const parsedComparing = typeof comparing === 'string' ? new Date(comparing) : comparing;
+ switch (unit) {
+ case 'years':
+ return dateFns.differenceInYears(value, parsedComparing);
+ case 'quarters':
+ return dateFns.differenceInQuarters(value, parsedComparing);
+ case 'months':
+ return dateFns.differenceInMonths(value, parsedComparing);
+ case 'weeks':
+ return dateFns.differenceInWeeks(value, parsedComparing);
+ case 'days':
+ return dateFns.differenceInDays(value, parsedComparing);
+ case 'hours':
+ return dateFns.differenceInHours(value, parsedComparing);
+ case 'minutes':
+ return dateFns.differenceInMinutes(value, parsedComparing);
+ case 'seconds':
+ return dateFns.differenceInSeconds(value, parsedComparing);
+ default: {
+ return dateFns.differenceInMilliseconds(value, parsedComparing);
+ }
+ }
+};
+
+const diff = getDiff(value, comparing, unit);
// For Moment
-const diff = adapter.getDiff(value, comparing, unit);
+const diff = value.diff(comparing, unit);
The adapter.getFormatHelperText
method have been removed, you can use the adapter.expandFormat
instead:
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format);
And if you need the exact same output you can apply the following transformation:
// For Day.js
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
// For Luxon
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/(a)/g, '(a|p)m').toLocaleLowerCase();
// For DateFns
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/(aaa|aa|a)/g, '(a|p)m').toLocaleLowerCase();
// For Moment
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
The adapter.getMeridiemText
method have been removed, you can use the adapter.setHours
, adapter.date
and adapter.format
methods to recreate its behavior:
-const meridiem = adapter.getMeridiemText('am');
+const getMeridiemText = (meridiem: 'am' | 'pm') => {
+ const date = adapter.setHours(adapter.date()!, meridiem === 'am' ? 2 : 14);
+ return utils.format(date, 'meridiem');
+};
+
+const meridiem = getMeridiemText('am');
The adapter.getMonthArray
method have been removed, you can use the adapter.startOfYear
and adapter.addMonths
methods to recreate its behavior:
-const monthArray = adapter.getMonthArray(value);
+const getMonthArray = (year) => {
+ const firstMonth = utils.startOfYear(year);
+ const months = [firstMonth];
+
+ while (months.length < 12) {
+ const prevMonth = months[months.length - 1];
+ months.push(utils.addMonths(prevMonth, 1));
+ }
+
+ return months;
+}
+
+const monthArray = getMonthArray(value);
The adapter.getNextMonth
method have been removed, you can use the adapter.addMonths
method instead:
-const nextMonth = adapter.getNextMonth(value);
+const nextMonth = adapter.addMonths(value, 1);
The adapter.getPreviousMonth
method have been removed, you can use the adapter.addMonths
method instead:
-const previousMonth = adapter.getPreviousMonth(value);
+const previousMonth = adapter.addMonths(value, -1);
The adapter.getWeekdays
method have been removed, you can use the adapter.startOfWeek
and adapter.addDays
methods instead:
-const weekDays = adapter.getWeekdays(value);
+const getWeekdays = (value) => {
+ const start = adapter.startOfWeek(value);
+ return [0, 1, 2, 3, 4, 5, 6].map((diff) => utils.addDays(start, diff));
+};
+
+const weekDays = getWeekdays(value);
The isNull
method have been removed, you can replace it with a very basic check:
-const isNull = adapter.isNull(value);
+const isNull = value === null;
The adapter.mergeDateAndTime
method have been removed, you can use the adapter.setHours
, adapter.setMinutes
, and adapter.setSeconds
methods to recreate its behavior:
-const result = adapter.mergeDateAndTime(valueWithDate, valueWithTime);
+const mergeDateAndTime = <TDate>(
+ dateParam,
+ timeParam,
+ ) => {
+ let mergedDate = dateParam;
+ mergedDate = utils.setHours(mergedDate, utils.getHours(timeParam));
+ mergedDate = utils.setMinutes(mergedDate, utils.getMinutes(timeParam));
+ mergedDate = utils.setSeconds(mergedDate, utils.getSeconds(timeParam));
+
+ return mergedDate;
+ };
+
+const result = mergeDateAndTime(valueWithDate, valueWithTime);
The adapter.parseISO
method have been removed, you can directly use your date library:
// For Day.js
-const value = adapter.parseISO(isoString);
+const value = dayjs(isoString);
// For Luxon
-const value = adapter.parseISO(isoString);
+const value = DateTime.fromISO(isoString);
// For DateFns
-const value = adapter.parseISO(isoString);
+const value = dateFns.parseISO(isoString);
// For Moment
-const value = adapter.parseISO(isoString);
+const value = moment(isoString, true);
The adapter.toISO
method have been removed, you can directly use your date library:
// For Day.js
-const isoString = adapter.toISO(value);
+const isoString = value.toISOString();
// For Luxon
-const isoString = adapter.toISO(value);
+const isoString = value.toUTC().toISO({ format: 'extended' });
// For DateFns
-const isoString = adapter.toISO(value);
+const isoString = dateFns.formatISO(value, { format: 'extended' });
// For Moment
-const isoString = adapter.toISO(value);
+const isoString = value.toISOString();
The adapter.isEqual
method used to accept any type of value for its two input and tried to parse them before checking if they were equal.
The method has been simplified and now only accepts an already-parsed date or null
(ie: the same formats used by the value
prop in the pickers)
const adapterDayjs = new AdapterDayjs();
const adapterLuxon = new AdapterLuxon();
const adapterDateFns = new AdapterDateFns();
const adapterMoment = new AdatperMoment();
// Supported formats
const isEqual = adapterDayjs.isEqual(null, null); // Same for the other adapters
const isEqual = adapterLuxon.isEqual(DateTime.now(), DateTime.fromISO('2022-04-17'));
const isEqual = adapterMoment.isEqual(moment(), moment('2022-04-17'));
const isEqual = adapterDateFns.isEqual(new Date(), new Date('2022-04-17'));
// Non-supported formats (JS Date)
-const isEqual = adapterDayjs.isEqual(new Date(), new Date('2022-04-17'));
+const isEqual = adapterDayjs.isEqual(dayjs(), dayjs('2022-04-17'));
-const isEqual = adapterLuxon.isEqual(new Date(), new Date('2022-04-17'));
+const isEqual = adapterLuxon.isEqual(DateTime.now(), DateTime.fromISO('2022-04-17'));
-const isEqual = adapterMoment.isEqual(new Date(), new Date('2022-04-17'));
+const isEqual = adapterMoment.isEqual(moment(), moment('2022-04-17'));
// Non-supported formats (string)
-const isEqual = adapterDayjs.isEqual('2022-04-16', '2022-04-17');
+const isEqual = adapterDayjs.isEqual(dayjs('2022-04-17'), dayjs('2022-04-17'));
-const isEqual = adapterLuxon.isEqual('2022-04-16', '2022-04-17');
+const isEqual = adapterLuxon.isEqual(DateTime.fromISO('2022-04-17'), DateTime.fromISO('2022-04-17'));
-const isEqual = adapterMoment.isEqual('2022-04-16', '2022-04-17');
+const isEqual = adapterMoment.isEqual(moment('2022-04-17'), moment('2022-04-17'));
-const isEqual = adapterDateFns.isEqual('2022-04-16', '2022-04-17');
+const isEqual = adapterDateFns.isEqual(new Date('2022-04-17'), new Date('2022-04-17'));
The dateLibInstance
prop of LocalizationProvider
does not work with AdapterDayjs
anymore (#11023). This prop was used to set the pickers in UTC mode before the implementation of a proper timezone support in the components.
You can learn more about the new approach on the dedicated doc page.
// When a `value` or a `defaultValue` is provided
<LocalizationProvider
adapter={AdapterDayjs}
- dateLibInstance={dayjs.utc}
>
<DatePicker value={dayjs.utc('2022-04-17')} />
</LocalizationProvider>
// When no `value` or `defaultValue` is provided
<LocalizationProvider
adapter={AdapterDayjs}
- dateLibInstance={dayjs.utc}
>
- <DatePicker />
+ <DatePicker timezone="UTC" />
</LocalizationProvider>
The property hasLeadingZeros
has been removed from the sections in favor of the more precise hasLeadingZerosInFormat
and hasLeadingZerosInInput
properties (#10994). To keep the same behavior, you can replace it by hasLeadingZerosInFormat
:
const fieldRef = React.useRef<FieldRef<FieldSection>>(null);
React.useEffect(() => {
const firstSection = fieldRef.current!.getSections()[0];
- console.log(firstSection.hasLeadingZeros);
+ console.log(firstSection.hasLeadingZerosInFormat);
}, []);
return (
<DateField unstableFieldRef={fieldRef} />
);
The adapter.getYearRange
method used to accept two params and now accepts a tuple to be consistent with the adapter.isWithinRange
method (#10978):
-adapter.getYearRange(start, end);
+adapter.getYearRange([start, end])
The adapter.isValid
method used to accept any type of value and tried to parse them before checking their validity (#10971).
The method has been simplified and now only accepts an already-parsed date or null
.
Which is the same type as the one accepted by the components value
prop.
const adapterDayjs = new AdapterDayjs();
const adapterLuxon = new AdapterLuxon();
const adapterDateFns = new AdapterDateFns();
const adapterMoment = new AdatperMoment();
// Supported formats
const isValid = adapterDayjs.isValid(null); // Same for the other adapters
const isValid = adapterLuxon.isValid(DateTime.now());
const isValid = adapterMoment.isValid(moment());
const isValid = adapterDateFns.isValid(new Date());
// Non-supported formats (JS Date)
-const isValid = adapterDayjs.isValid(new Date('2022-04-17'));
+const isValid = adapterDayjs.isValid(dayjs('2022-04-17'));
-const isValid = adapterLuxon.isValid(new Date('2022-04-17'));
+const isValid = adapterLuxon.isValid(DateTime.fromISO('2022-04-17'));
-const isValid = adapterMoment.isValid(new Date('2022-04-17'));
+const isValid = adapterMoment.isValid(moment('2022-04-17'));
// Non-supported formats (string)
-const isValid = adapterDayjs.isValid('2022-04-17');
+const isValid = adapterDayjs.isValid(dayjs('2022-04-17'));
-const isValid = adapterLuxon.isValid('2022-04-17');
+const isValid = adapterLuxon.isValid(DateTime.fromISO('2022-04-17'));
-const isValid = adapterMoment.isValid('2022-04-17');
+const isValid = adapterMoment.isValid(moment('2022-04-17'));
-const isValid = adapterDateFns.isValid('2022-04-17');
+const isValid = adapterDateFns.isValid(new Date('2022-04-17'));
adapter.getYearRange
to be consistent with adapter.isWithinRange
(#10978) @flaviendelanglecomponents
/ componentsProps
typings (#11040) @flaviendelangleadapter.isEqual
method to accept TDate | null
instead of any
(#10976) @flaviendelangleadapter.isValid
method to accept TDate | null
instead of any
(#10971) @flaviendelanglehasLeadingZeros
property from FieldSection
(#10994) @flaviendelangledayjs
(#11023) @flaviendelanglecalendarHeader
slot to @mui/x-date-pickers/PickersCalendarHeader
(#11020) @flaviendelangledayOfWeekFormatter
prop (#10992) @flaviendelanglenext
tag (#10996) @LukasTyNov 10, 2023
We're thrilled to announce the first alpha release of our next major version, v7. This release introduces a few breaking changes, paving the way for the upcoming features like Pivoting and DateTimeRangePicker.
A special shoutout to thank the 12 contributors who made this release possible. Here are some highlights ✨:
renderHeader
is used (#10961) @cherniavskii<ChartsReferenceLine />
component is now availablecomponents
and componentsProps
props have been removed. Use slots
and slotProps
instead. See components section for more details.getRowsToExport
function.getApplyFilterFnV7
in GridFilterOperator
was renamed to getApplyFilterFn
.
If you use getApplyFilterFnV7
directly - rename it to getApplyFilterFn
.getApplyFilterFn
has changed for performance reasons: const getApplyFilterFn: GetApplyFilterFn<any, unknown> = (filterItem) => {
if (!filterItem.value) {
return null;
}
const filterRegex = new RegExp(escapeRegExp(filterItem.value), 'i');
- return (cellParams) => {
- const { value } = cellParams;
+ return (value, row, colDef, apiRef) => {
return value != null ? filterRegex.test(String(value)) : false;
};
}
getApplyQuickFilterFnV7
in GridColDef
was renamed to getApplyQuickFilterFn
.
If you use getApplyQuickFilterFnV7
directly - rename it to getApplyQuickFilterFn
.getApplyQuickFilterFn
has changed for performance reasons: const getGridStringQuickFilterFn: GetApplyQuickFilterFn<any, unknown> = (value) => {
if (!value) {
return null;
}
const filterRegex = new RegExp(escapeRegExp(value), 'i');
- return (cellParams) => {
- const { formattedValue } = cellParams;
+ return (value, row, column, apiRef) => {
+ let formattedValue = apiRef.current.getRowFormattedValue(row, column);
return formattedValue != null ? filterRegex.test(formattedValue.toString()) : false;
};
};
@mui/x-data-grid@7.0.0-alpha.0
undefined
slot value (#10937) @romgrkcomponents
and componentsProps
(#10911) @MBilalShafi@mui/x-data-grid-pro@7.0.0-alpha.0
Same changes as in @mui/x-data-grid@7.0.0-alpha.0
, plus:
@mui/x-data-grid-premium@7.0.0-alpha.0
Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.0
, plus:
renderHeader
is used (#10936) @cherniavskiicomponents
and componentsProps
props have been removed. Use slots
and slotProps
instead.@mui/x-date-pickers@7.0.0-alpha.0
MultiInputTimeRangeField
section selection (#10922) @noraleontereferenceDate
behavior in views (#10863) @LukasTycomponents
and componentsProps
props (#10700) @alexfauquette@mui/x-date-pickers-pro@7.0.0-alpha.0
Same changes as in @mui/x-date-pickers@7.0.0-alpha.0
.
@mui/x-charts@7.0.0-alpha.0
Types for slots
and slotProps
have been renamed by removing the "Component" which is meaningless for charts.
Unless you imported those types, to create a wrapper, you should not be impacted by this breaking change.
Here is an example of the renaming for the <ChartsTooltip />
component.
-ChartsTooltipSlotsComponent
+ChartsTooltipSlots
-ChartsTooltipSlotComponentProps
+ChartsTooltipSlotProps
<ChartsReferenceLine />
component (#10597) (#10946) @alexfauquetteslots
and slotProps
types (#10875) @alexfauquette@mui/x-codemod@7.0.0-alpha.0
v7.0.0/preset-safe
(#10973) @LukasTy@next
tag to the installation instructions (#10963) @MBilalShafimaster
into next
(#10929) @cherniavskiiChanges before 7.x are listed in our changelog for older versions.