MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
Published by JCQuintas 6 months ago
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights β¨:
id
attribute.id
attribute, please update your usage.@mui/[email protected]
formattedValue
from the edit value when passing to renderEditCell
(#12870) @cherniavskiiprops.rowCount
change (#12833) @MBilalShafi@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
Same changes as in @mui/[email protected]
, plus:
@mui/[email protected]
viewRenderers
prop description (#12915) @flaviendelanglePickersDay
(#12920) @flaviendelangle@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
prop.slots
and prop.slotProps
not passed to <ChartsTooltip />
(#12939) @JCQuintasnext.config
settings (#12861) @oliviertassinari@mui/docs/HighlightedCode
(#12848) @alexfauquettet
command (#12948) @LukasTyPublished by MBilalShafi 6 months ago
We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights β¨:
@mui/[email protected]
columnHeaders
slot (#12768) @cherniavskii@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
BarCharts
(#12859) @JCQuintas@mui/[email protected]
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) @LukasTyPublished by cherniavskii 6 months ago
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights β¨:
π Support unknown and estimated row count in server-side pagination (#12490) @MBilalShafi
π¨ 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
π Bugfixes
π Documentation improvements
@mui/[email protected]
onCellEditStop
on error (#12747) @sai6855@mui/[email protected]
Same changes as in @mui/[email protected]
, plus:
@mui/[email protected]
Same changes as in @mui/[email protected]
.
A typo fix:
- ContinuouseScaleName
+ ContinuousScaleName
@mui/[email protected]
dataIndex
to series valueFormatter
(#12745) @JCQuintasDEFAULT_X_AXIS_KEY
and DEFAULT_Y_AXIS_KEY
(#12780) @alexfauquettePieArcLabel
(#12806) @JCQuintas@mui/[email protected]
defaultMuiPrevented
on the onFocus
prop of the root slot (#12813) @flaviendelangleDateTimeRangePicker
(#12786) @LukasTyPublished by cherniavskii 6 months ago
We'd like to offer a big thanks to the 1 contributor who made this release possible. Here are some highlights β¨:
@mui/[email protected]
@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
Same changes as in @mui/[email protected]
.
Published by DanailH 6 months ago
We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights β¨:
@mui/[email protected]
@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
Same changes as in @mui/[email protected]
.
Published by DanailH 6 months ago
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights β¨:
@mui/[email protected]
api
property to GridCallbackDetails
(#12742) @sai6855date
/dateTime
columns (#12709) @cherniavskii@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
Same changes as in @mui/[email protected]
, plus:
@mui/[email protected]
@mui/[email protected]
Same changes as in @mui/[email protected]
, plus:
@mui/[email protected]
tickLabelInterval
not working on YAxis
(#12746) @JCQuintas@mui/[email protected]
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) @flaviendelanglePublished by LukasTy 7 months ago
We'd like to offer a big thanks to the 20 contributors who made this release possible. Here are some highlights β¨:
setItemExpansion
Tree View API method (#12595) @flaviendelangle@mui/[email protected]
ColDefChangesGridNoSnap
demo crash (#12663) @MBilalShafirowCount
is used with client-side pagination (#12448) @michelengelenGridFormatterParams
completely (#12660) @romgrk@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
readOnly
behavior (#12609) @LukasTy@mui/[email protected]
Same changes as in @mui/[email protected]
, plus:
@mui/[email protected]
tickInterval
usage for y-axis (#12592) @alexfauquetteid
is a number
(#12677) @JCQuintassx
property on ChartsTooltip
(#12659) @JCQuintas@mui/[email protected]
publicAPI
methods (#12649) @flaviendelangleRichTreeViewPro
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) @LukasTyTreeItem2
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) @flaviendelanglePublished by LukasTy 7 months ago
We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights β¨:
@mui/[email protected]
rowEditCommit
(#12087) @MBilalShafi@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
No changes.
@mui/[email protected]
readOnly
(#12605) @LukasTycheckboxSelectionVisibleOnly
prop (#12667) @michelengelen_action: 'delete'
in processRowUpdate
(#12673) @michelengelenPublished by michelengelen 7 months ago
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights β¨:
resizeThrottleMs
prop (#12556) @romgrk@mui/[email protected]
resizeThrottleMs
prop (#12556) @romgrkrowEditStop
event if row has fields with errors (#11383) @cherniavskiiGridToolbarQuickFilter
component (#12484) @jhawkins11@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
@mui/zero-runtime
(stop using ownerState
in styled
) (#12003) @flaviendelangle@mui/[email protected]
Same changes as in @mui/[email protected]
, plus:
readOnly
(#12593) @LukasTy@mui/[email protected]
@mui/[email protected]
RichTreeView
(#12512) @flaviendelanglel10n
script on Windows (#12550) @LukasTyDateTimeRangePicker
tag in releaseChangelog
(#12526) @LukasTyPublished by noraleonte 7 months ago
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/[email protected]
ElementType
usage (#12479) @cherniavskiirows
an optional prop (#12478) @MBilalShafi@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
Same changes as in @mui/[email protected]
, 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/[email protected]
DesktopDateTimePicker
(#12441) @LukasTy@mui/[email protected]
Same changes as in @mui/[email protected]
, plus:
JSDoc
(#12518) @LukasTy@mui/[email protected]
CartesianContextProvider
(#12461) @JanpotnodeId
prop used by the 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/[email protected]
nodeId
to itemId
(#12418) @noraleonteContentComponent
prop to avoid using the word "node" (#12476) @flaviendelangle@mui/[email protected]
@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) @LukasTyPublished by noraleonte 7 months ago
We'd like to offer a big thanks to the 3 contributors who made this release possible.
@mui/[email protected]
ElementType
usage (#12505) @cherniavskii@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
Same changes as in @mui/[email protected]
, plus:
Published by alexfauquette 7 months ago
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.position: 'sticky'
and are rendered in the same row element as the regular column headers.@mui/[email protected]
rowCount
part of the state (#12381) @MBilalShafibaseSwitch
slot (#12439) @romgrk@mui/[email protected]
Same changes as in @mui/[email protected]
, plus:
inputRef
to the props passed to colDef.renderHeaderFilter
(#12328) @vovarudomanenko@mui/[email protected]
Same changes as in @mui/[email protected]
, plus:
@mui/[email protected]
tabIndex
on accessible field DOM structure (#12311) @flaviendelangle@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
The onNodeFocus
callback has been renamed to onItemFocus
for consistency:
<SimpleTreeView
- onNodeFocus={onNodeFocus}
+ onItemFocus={onItemFocus}
/>
@mui/[email protected]
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) @LukasTyPublished by alexfauquette 7 months ago
We'd like to offer a big thanks to @LukasTy who made this release possible.
@mui/[email protected]
@mui/[email protected]
Same changes as in @mui/[email protected]
.
Published by flaviendelangle 8 months ago
We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights β¨:
@mui/[email protected]
sortModel
(#12325) @MBilalShafistopCellMode
event in renderEditRating
component (#12335) @sai6855@mui/[email protected]
Same changes as in @mui/[email protected]
, plus:
onRowsScrollEnd
to use IntersectionObserver
(#8672) @DanailH@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
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/[email protected]
props.items
(#12359) @flaviendelangleRichTreeView
, do not use the item id as the HTML id attribute (#12319) @flaviendelanglegetItem
(#12251) @flaviendelangleTransitionComponent
and TransitionProps
with a groupTransition
slot (#12336) @flaviendelanglez-index
usage in SVG (#12337) @alexfauquetteRichTreeView
customization docs (#12231) @noraleonteCharts
test (#11551) @alexfauquettePublished by romgrk 8 months ago
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/[email protected]
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/[email protected]
Same changes as in @mui/[email protected]
, plus:
@mui/[email protected]
Same changes as in @mui/[email protected]
, plus:
@mui/[email protected]
@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
@mui/[email protected]
getComponentInfo
RegExp (#12241) @flaviendelanglewindow.
reference for common globals @oliviertassinarino-response
workflow (#12193) @MBilalShafiPublished by romgrk 8 months ago
We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights β¨:
@mui/[email protected]
replaceRows
(@martijn-basesoft)@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
Same changes as in @mui/[email protected]
, plus:
@mui/[email protected]
@mui/[email protected]
Same changes as in @mui/[email protected]
.
Published by MBilalShafi 8 months ago
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 IE11 is no longer included..MuiDataGrid-cellContent
has been removed, use .MuiDataGrid-cell
to style the cells.@mui/[email protected]
is any of
filter operator (#11939) @gitstart@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
Same changes as in @mui/[email protected]
.
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.
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/[email protected]
PickersTextField
component in the fields (#10649) @flaviendelangleDateTimePickerTabs
(#12096) @LukasTy@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
These components are no longer exported from @mui/x-charts
:
CartesianContextProvider
DrawingProvider
@mui/[email protected]
@mui/[email protected]
findIndex
to support IE11 (#12129) @flaviendelanglepro
plan (#12047) @alexfauquetteundefined
(#12128) @alexfauquetteexperimental.cpus
to control amount of export workers in Next.js (#12095) @JanpotdescribeConformance
(#12130) @michaldudakPublished by MBilalShafi 8 months ago
We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights β¨:
@mui/[email protected]
@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
referenceDate
day calendar focus (#12136) @LukasTyDateTimePickerTabs
(#12131) @LukasTy@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
AdapterDateFnsV3
(#12037) @flaviendelanglefocused
prop from demo (#12126) @michelengelenPublished by MBilalShafi 8 months ago
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/[email protected]
rowEditCommit
(#12073) @MBilalShafi@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
ChartsGrid
component (#11034) @alexfauquette@mui/[email protected]
dayOfWeekFormatter
typo in the pickers v6 to v7 migration document (#12043) @StylesTripAdapterDateFnsV3
(#12036) @flaviendelanglefocused
prop from demo (#12092) @michelengelenPublished by DanailH 9 months ago
We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights β¨:
@mui/[email protected]
removeAllFilterItems
as a reason for onFilterModelChange
callback (#11911) @shaharyar-shamshipageSizeOptions
prop (#11609) @pcorpetlastPage
in GridPagination
(#11958) @MBilalShafi@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
Same changes as in @mui/[email protected]
, plus:
@mui/[email protected]
isWithinRange
method (#11936) @LukasTyTDate
(#11791) @flaviendelangle@mui/[email protected]
Same changes as in @mui/[email protected]
.
@mui/[email protected]
reverse
property to axes (#11899) @alexfauquette@mui/[email protected]
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/[email protected]
@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) @cherniavskii