@mui/x-data-grid-premium 7.0.0-beta.7 → 7.0.0

package/CHANGELOG.md

@@ -3,6 +3,189 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v7.0.0
+
+_Mar 22, 2024_
+
+We're excited to [announce the first v7 stable release](https://mui.com/blog/mui-x-v7/)! 🎉🚀
+
+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:
+
+- [Data Grid](https://mui.com/x/migration/migration-data-grid-v6/)
+- [Date and Time Pickers](https://mui.com/x/migration/migration-pickers-v6/)
+- [Tree View](https://mui.com/x/migration/migration-tree-view-v6/)
+- [Charts](https://mui.com/x/migration/migration-charts-v6/)
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Improve the usage of custom `viewRenderers` on `DateTimePicker` (#12441) @LukasTy
+- ✨ Set focus on the focused Tree Item instead of the Tree View (#12226) @flaviendelangle
+- 🕹️ Support controlled `density` for the Data Grid (#12332) @MBilalShafi
+- 🎁 Dynamic virtualization range for the Data Grid (#12353) @romgrk
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### Breaking changes
+
+- The `density` is a [controlled prop](https://mui.com/x/react-data-grid/accessibility/#set-the-density-programmatically) now, if you were previously passing the `density` prop to the Data Grid, you will need to do one of the following:
+
+  1. Move it to the `initialState.density` to initialize it.
+
+  ```diff
+   <DataGrid
+  -  density="compact"
+  +  initialState={{ density: "compact" }}
+   />
+  ```
+
+  2. Move it to the state and use `onDensityChange` callback to update the `density` prop accordingly for it to work as expected.
+
+  ```diff
+  + 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`
+
+- [DataGrid] Allow to control the grid density (#12332) @MBilalShafi
+- [DataGrid] Dynamic virtualization range (#12353) @romgrk
+- [DataGrid] Fix `ElementType` usage (#12479) @cherniavskii
+- [DataGrid] Fix cell value formatting on copy (#12357) @sai6855
+- [DataGrid] Fix checkbox selection is keeping selection when filtering (#11751) @g1mishra
+- [DataGrid] Make `rows` an optional prop (#12478) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@7.0.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.0.0`.
+
+#### `@mui/x-data-grid-premium@7.0.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.0.0`, plus:
+
+- [DataGridPremium] Add support for confirmation before clipboard paste (#12225) @cherniavskii
+- [DataGridPremium] Fix single grouping column sorting (#9679) @cherniavskii
+- [DataGridPremium] Fix boolean cell not rendered in group rows (#12492) @sai6855
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The `DesktopDateTimePicker` view rendering has been optimized by using the same technique as for `DesktopDateTimeRangePicker`.
+  - The `dateTimeViewRenderers` have been removed in favor of reusing existing time view renderers (`renderTimeViewClock`, `renderDigitalClockTimeView` and `renderMultiSectionDigitalClockTimeView`) and date view renderer (`renderDateViewCalendar`).
+  - Passing `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`
+
+- [fields] Allow to override the separator between the start and the end date in all range fields (#12174) @flaviendelangle
+- [fields] Support format without separator (#12489) @flaviendelangle
+- [pickers] Use renderer interceptor on `DesktopDateTimePicker` (#12441) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.0.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.0.0`, plus:
+
+- [DateTimeRangePicker] Add component `JSDoc` (#12518) @LukasTy
+- [DateTimeRangePicker] Fix views behavior regression (#12529) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.0.0`
+
+- [charts] Fix small typo in `CartesianContextProvider` (#12461) @Janpot
+
+### Tree View
+
+#### Breaking changes
+
+- The required `nodeId` prop used by the `TreeItem` has been renamed to `itemId` for consistency:
+
+```diff
+ <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:
+
+  ```diff
+   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`
+
+- [TreeView] Rename `nodeId` to `itemId` (#12418) @noraleonte
+- [TreeView] Set focus on the focused Tree Item instead of the Tree View (#12226) @flaviendelangle
+- [TreeView] Update JSDoc of the `ContentComponent` prop to avoid using the word "node" (#12476) @flaviendelangle
+
+### `@mui/x-codemod@7.0.0`
+
+- [codemod] Add a codemod and update the grid migration guide (#12488) @MBilalShafi
+
+### Docs
+
+- [docs] Finalize migration guide (#12501) @noraleonte
+- [docs] Fix nested cells alignment in the popular features demo (#12450) @cherniavskii
+- [docs] Fix some Vale errors (#12469) @oliviertassinari
+- [docs] Remove mentions of pre release (#12513) @noraleonte
+- [docs] Update branch name and tags (#12498) @cherniavskii
+- [docs] Update links to v6 (#12496) @cherniavskii
+- [docs] Update links to v7 docs (#12500) @noraleonte
+- [docs] Update supported versions (#12508) @joserodolfofreitas
+- [docs] Update "What's new in MUI X" page #12527 @cherniavskii
+
+### Core
+
+- [core] Bump `@mui/material` peer dependency for all packages (#12516) @LukasTy
+- [core] Fix `no-restricted-imports` ESLint rule not working for Data Grid packages (#12477) @cherniavskii
+- [core] Lower the frequency of `no-response` action runs (#12491) @michaldudak
+- [core] Remove leftover `legacy` `browserlistrc` entry (#12415) @LukasTy
+- [core] Update NPM tag (#12511) @cherniavskii
+- [core] Update supported browsers (browserlistrc) (#12521) @LukasTy
+- [core] Use Circle CI context @oliviertassinari
+- [license] Fix grammar on expired license error message (#12460) @joserodolfofreitas
+
 ## 7.0.0-beta.7
 
 _Mar 14, 2024_
@@ -90,7 +273,7 @@ The `onNodeFocus` callback has been renamed to `onItemFocus` for consistency:
 - [docs] Add `legacy` bundle drop mention in migration pages (#12424) @LukasTy
 - [docs] Add missing luxon `Info` import (#12427) @LukasTy
 - [docs] Improve slots definitions for charts (#12408) @alexfauquette
-- [docs] Polish What's new in MUI X blog titles (#12309) @oliviertassinari
+- [docs] Polish What's new in MUI X blog titles (#12309) @oliviertassinari
 - [docs] Replace `rel="noreferrer"` by `rel="noopener"` @oliviertassinari
 - [docs] Update `date-fns` `weekStarsOn` overriding example (#12416) @LukasTy
 
@@ -252,7 +435,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-beta.5`.
 ### Docs
 
 - [docs] Fix image layout shift when loading @oliviertassinari
-- [docs] Match Material UI repo comment for redirections @oliviertassinari
+- [docs] Match Material UI repo comment for redirections @oliviertassinari
 - [docs] Non breaking spaces @oliviertassinari
 - [docs] Polish the Date Picker playground (#11869) @zanivan
 - [docs] Standardize WAI-ARIA references @oliviertassinari
@@ -263,9 +446,9 @@ Same changes as in `@mui/x-date-pickers@7.0.0-beta.5`.
 - [core] Remove grid folder from `getComponentInfo` RegExp (#12241) @flaviendelangle
 - [core] Remove `window.` reference for common globals @oliviertassinari
 - [core] Use runtime agnostic setTimeout type @oliviertassinari
-- [docs-infra] Fix Stack Overflow breaking space @oliviertassinari
+- [docs-infra] Fix Stack Overflow breaking space @oliviertassinari
 - [docs-infra] Fix missing non breaking spaces @oliviertassinari
-- [github] Update `no-response` workflow (#12193) @MBilalShafi
+- [infra] Update `no-response` workflow (#12193) @MBilalShafi
 - [infra] Fix missing permission reset @oliviertassinari
 
 ## 7.0.0-beta.4
@@ -282,7 +465,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 
 ### Breaking changes
 
-- The support for IE11 has been removed from all MUI X packages. The `legacy` bundle that used to support old browsers like IE11 is no longer included.
+- The support for IE11 has been removed from all MUI X packages. The `legacy` bundle that used to support old browsers like IE11 is no longer included.
 
 ### Data Grid
 
@@ -324,7 +507,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`.
 - 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](/x/react-date-pickers/fields/#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:
+  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:
 
   ```diff
     function MyCustomTextField(props) {
@@ -392,7 +575,7 @@ These components are no longer exported from `@mui/x-charts`:
 ### Docs
 
 - [docs] Add recipe for hiding separator on non-resizable columns (#12134) @michelengelen
-- [docs] Add small improvements to the Gauge Chart page (#12076) @danilo-leal
+- [docs] Add small improvements to the Gauge page (#12076) @danilo-leal
 - [docs] Add the 'point' scaleType to the axis documentation (#12179) @alexfauquette
 - [docs] Clarify Pickers 'Component composition' section (#12097) @LukasTy
 - [docs] Fix "Licensing" page link (#12156) @LukasTy
@@ -975,7 +1158,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.9`.
 
 - [charts] Do not propagate `innerRadius` and `outerRadius` to the DOM (#11689) @alexfauquette
 - [charts] Fix default `stackOffset` for `LineChart` (#11647) @alexfauquette
-- [charts] Remove a TS ignore (#11688) @alexfauquette
+- [charts] Remove a TypeScript ignore (#11688) @alexfauquette
 
 ### Tree View
 
@@ -1404,7 +1587,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.7`.
 - [core] Fix release changelog (#11496) @romgrk
 - [core] Fix use of ::before & ::after (#11515) @oliviertassinari
 - [core] Localize the issue template to MUI X (#11511) @oliviertassinari
-- [core] Regen api files (#11542) @flaviendelangle
+- [core] Regenerate API files (#11542) @flaviendelangle
 - [core] Remove issue emoji @oliviertassinari
 - [core] Sync the release instructions with MUI Core @oliviertassinari
 - [core] Yaml format match most common convention @oliviertassinari
@@ -1447,7 +1630,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
 
 - The `filterModel` now supports `Date` objects as values for `date` and `dateTime` column types.
   The `filterModel` still accepts strings as values for `date` and `dateTime` column types,
-  but all updates to the `filterModel` coming from the UI (e.g. filter panel) will set the value as a `Date` object.
+  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`
 
@@ -1658,7 +1841,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.5`, plus:
 ### Core
 
 - [core] Automate cherry-pick of PRs from `next` -> `master` (#11382) @MBilalShafi
-- [github] Update `no-response` workflow (#11369) @MBilalShafi
+- [infra] Update `no-response` workflow (#11369) @MBilalShafi
 - [test] Fix flaky screenshots (#11388) @cherniavskii
 
 ## 7.0.0-alpha.4
@@ -1896,7 +2079,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.3`.
 
 - [charts] Adjusted `defaultizeValueFormatter` util to accept an optional `series.valueFormatter` value (#11144) @michelengelen
 - [charts] Apply `labelStyle` and `tickLabelStyle` props on `<ChartsYAxis />` (#11180) @akamfoad
-- [charts] Fix TS config (#11259) @alexfauquette
+- [charts] Fix TypeScript config (#11259) @alexfauquette
 - [charts] Fix error with empty dataset (#11063) @alexfauquette
 - [charts] Fix export strategy (#11235) @alexfauquette
 - [charts] Remove outdated prop-types (#11045) @alexfauquette

package/DataGridPremium/DataGridPremium.js

@@ -145,10 +145,10 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   clipboardCopyCellDelimiter: _propTypes.default.string,
   /**
-   * Number of extra columns to be rendered before/after the visible slice.
-   * @default 3
+   * Column region in pixels to render before/after the viewport
+   * @default 150
    */
-  columnBuffer: _propTypes.default.number,
+  columnBufferPx: _propTypes.default.number,
   columnGroupingModel: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * Sets the height in pixel of the column headers in the Data Grid.
@@ -159,11 +159,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Set of columns of type [[GridColDef]][].
    */
   columns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
-  /**
-   * Number of rows from the `columnBuffer` that can be visible before a new slice is rendered.
-   * @default 3
-   */
-  columnThreshold: _propTypes.default.number,
   /**
    * Set the column visibility model of the Data Grid.
    * If defined, the Data Grid will ignore the `hide` property in [[GridColDef]].
@@ -510,6 +505,14 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onAggregationModelChange: _propTypes.default.func,
+  /**
+   * Callback fired before the clipboard paste operation starts.
+   * Use it to confirm or cancel the paste operation.
+   * @param {object} params Params passed to the callback.
+   * @param {string[][]} params.data The raw pasted data split by rows and cells.
+   * @returns {Promise<any>} A promise that resolves to confirm the paste operation, and rejects to cancel it.
+   */
+  onBeforeClipboardPasteStart: _propTypes.default.func,
   /**
    * Callback fired when any cell is clicked.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].
@@ -637,6 +640,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnWidthChange: _propTypes.default.func,
+  /**
+   * Callback fired when the density changes.
+   * @param {GridDensity} density New density value.
+   */
+  onDensityChange: _propTypes.default.func,
   /**
    * Callback fired when the detail panel of a row is opened or closed.
    * @param {GridRowId[]} ids The ids of the rows which have the detail panel open.
@@ -838,10 +846,10 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   processRowUpdate: _propTypes.default.func,
   /**
-   * Number of extra rows to be rendered before/after the visible slice.
-   * @default 3
+   * Row region in pixels to render before/after the viewport
+   * @default 150
    */
-  rowBuffer: _propTypes.default.number,
+  rowBufferPx: _propTypes.default.number,
   /**
    * Set the total number of rows, if it is different from the length of the value `rows` prop.
    * If some rows have children (for instance in the tree data), this number represents the amount of top level rows.
@@ -880,8 +888,9 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   rowReordering: _propTypes.default.bool,
   /**
    * Set of rows of type [[GridRowsProp]].
+   * @default []
    */
-  rows: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  rows: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * If `false`, the row selection mode is disabled.
    * @default true
@@ -903,11 +912,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default "margin"
    */
   rowSpacingType: _propTypes.default.oneOf(['border', 'margin']),
-  /**
-   * Number of rows from the `rowBuffer` that can be visible before a new slice is rendered.
-   * @default 3
-   */
-  rowThreshold: _propTypes.default.number,
   /**
    * Override the height/width of the Data Grid inner scrollbar.
    */

package/README.md

@@ -15,7 +15,7 @@ This component has the following peer dependencies that you will need to install
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.15.0",
+  "@mui/material": "^5.15.14",
   "react": "^17.0.0 || ^18.0.0",
   "react-dom": "^17.0.0 || ^18.0.0"
 },

package/esm/DataGridPremium/DataGridPremium.js

@@ -138,10 +138,10 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   clipboardCopyCellDelimiter: PropTypes.string,
   /**
-   * Number of extra columns to be rendered before/after the visible slice.
-   * @default 3
+   * Column region in pixels to render before/after the viewport
+   * @default 150
    */
-  columnBuffer: PropTypes.number,
+  columnBufferPx: PropTypes.number,
   columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
   /**
    * Sets the height in pixel of the column headers in the Data Grid.
@@ -152,11 +152,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Set of columns of type [[GridColDef]][].
    */
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  /**
-   * Number of rows from the `columnBuffer` that can be visible before a new slice is rendered.
-   * @default 3
-   */
-  columnThreshold: PropTypes.number,
   /**
    * Set the column visibility model of the Data Grid.
    * If defined, the Data Grid will ignore the `hide` property in [[GridColDef]].
@@ -503,6 +498,14 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onAggregationModelChange: PropTypes.func,
+  /**
+   * Callback fired before the clipboard paste operation starts.
+   * Use it to confirm or cancel the paste operation.
+   * @param {object} params Params passed to the callback.
+   * @param {string[][]} params.data The raw pasted data split by rows and cells.
+   * @returns {Promise<any>} A promise that resolves to confirm the paste operation, and rejects to cancel it.
+   */
+  onBeforeClipboardPasteStart: PropTypes.func,
   /**
    * Callback fired when any cell is clicked.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].
@@ -630,6 +633,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnWidthChange: PropTypes.func,
+  /**
+   * Callback fired when the density changes.
+   * @param {GridDensity} density New density value.
+   */
+  onDensityChange: PropTypes.func,
   /**
    * Callback fired when the detail panel of a row is opened or closed.
    * @param {GridRowId[]} ids The ids of the rows which have the detail panel open.
@@ -831,10 +839,10 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   processRowUpdate: PropTypes.func,
   /**
-   * Number of extra rows to be rendered before/after the visible slice.
-   * @default 3
+   * Row region in pixels to render before/after the viewport
+   * @default 150
    */
-  rowBuffer: PropTypes.number,
+  rowBufferPx: PropTypes.number,
   /**
    * Set the total number of rows, if it is different from the length of the value `rows` prop.
    * If some rows have children (for instance in the tree data), this number represents the amount of top level rows.
@@ -873,8 +881,9 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   rowReordering: PropTypes.bool,
   /**
    * Set of rows of type [[GridRowsProp]].
+   * @default []
    */
-  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  rows: PropTypes.arrayOf(PropTypes.object),
   /**
    * If `false`, the row selection mode is disabled.
    * @default true
@@ -896,11 +905,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default "margin"
    */
   rowSpacingType: PropTypes.oneOf(['border', 'margin']),
-  /**
-   * Number of rows from the `rowBuffer` that can be visible before a new slice is rendered.
-   * @default 3
-   */
-  rowThreshold: PropTypes.number,
   /**
    * Override the height/width of the Data Grid inner scrollbar.
    */

package/esm/components/GridAggregationHeader.js

@@ -53,7 +53,6 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridAggregationHeader(props) {
-  var _colDef$headerName;
   const {
       renderHeader
     } = props,
@@ -80,7 +79,7 @@ function GridAggregationHeader(props) {
     ownerState: ownerState,
     className: classes.root,
     children: [renderHeader ? renderHeader(params) : /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
-      label: (_colDef$headerName = colDef.headerName) != null ? _colDef$headerName : colDef.field,
+      label: colDef.headerName ?? colDef.field,
       description: colDef.description,
       columnWidth: colDef.computedWidth
     }), /*#__PURE__*/_jsx(GridAggregationFunctionLabel, {

package/esm/components/GridColumnMenuAggregationItem.js

@@ -44,13 +44,12 @@ function GridColumnMenuAggregationItem(props) {
     return '';
   }, [rootProps.aggregationFunctions, aggregationModel, colDef]);
   const handleAggregationItemChange = event => {
-    var _event$target;
-    const newAggregationItem = ((_event$target = event.target) == null ? void 0 : _event$target.value) || undefined;
+    const newAggregationItem = event.target?.value || undefined;
     const currentModel = gridAggregationModelSelector(apiRef);
     const _colDef$field = colDef.field,
       otherColumnItems = _objectWithoutPropertiesLoose(currentModel, [_colDef$field].map(_toPropertyKey));
     const newModel = newAggregationItem == null ? otherColumnItems : _extends({}, otherColumnItems, {
-      [colDef == null ? void 0 : colDef.field]: newAggregationItem
+      [colDef?.field]: newAggregationItem
     });
     apiRef.current.setAggregationModel(newModel);
     apiRef.current.hideColumnMenu();

package/esm/components/GridColumnMenuRowGroupItem.js

@@ -20,13 +20,12 @@ function GridColumnMenuRowGroupItem(props) {
   const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
   const rootProps = useGridRootProps();
   const renderUnGroupingMenuItem = field => {
-    var _groupedColumn$header;
     const ungroupColumn = event => {
       apiRef.current.removeRowGroupingCriteria(field);
       onClick(event);
     };
     const groupedColumn = columnsLookup[field];
-    const name = (_groupedColumn$header = groupedColumn.headerName) != null ? _groupedColumn$header : field;
+    const name = groupedColumn.headerName ?? field;
     return /*#__PURE__*/_jsxs(MenuItem, {
       onClick: ungroupColumn,
       disabled: !groupedColumn.groupable,

package/esm/components/GridColumnMenuRowUngroupItem.js

@@ -10,7 +10,6 @@ import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function GridColumnMenuRowUngroupItem(props) {
-  var _columnsLookup$colDef;
   const {
     colDef,
     onClick
@@ -30,7 +29,7 @@ function GridColumnMenuRowUngroupItem(props) {
     apiRef.current.addRowGroupingCriteria(colDef.field);
     onClick(event);
   };
-  const name = (_columnsLookup$colDef = columnsLookup[colDef.field].headerName) != null ? _columnsLookup$colDef : colDef.field;
+  const name = columnsLookup[colDef.field].headerName ?? colDef.field;
   if (rowGroupingModel.includes(colDef.field)) {
     return /*#__PURE__*/_jsxs(MenuItem, {
       onClick: ungroupColumn,

package/esm/components/GridExcelExportMenuItem.js

@@ -16,7 +16,7 @@ function GridExcelExportMenuItem(props) {
   return /*#__PURE__*/_jsx(MenuItem, _extends({
     onClick: () => {
       apiRef.current.exportDataAsExcel(options);
-      hideMenu == null || hideMenu();
+      hideMenu?.();
     }
   }, other, {
     children: apiRef.current.getLocaleText('toolbarExportExcel')

package/esm/components/GridGroupingColumnLeafCell.js

@@ -3,7 +3,6 @@ import Box from '@mui/material/Box';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridGroupingColumnLeafCell(props) {
-  var _props$formattedValue;
   const {
     rowNode
   } = props;
@@ -12,7 +11,7 @@ function GridGroupingColumnLeafCell(props) {
     sx: {
       ml: rootProps.rowGroupingColumnMode === 'multiple' ? 1 : theme => `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(rowNode.depth)})`
     },
-    children: (_props$formattedValue = props.formattedValue) != null ? _props$formattedValue : props.value
+    children: props.formattedValue ?? props.value
   });
 }
 export { GridGroupingColumnLeafCell };

package/esm/components/GridGroupingCriteriaCell.js

@@ -18,7 +18,6 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 export function GridGroupingCriteriaCell(props) {
-  var _filteredDescendantCo, _rootProps$slotProps;
   const {
     id,
     field,
@@ -33,7 +32,7 @@ export function GridGroupingCriteriaCell(props) {
   };
   const classes = useUtilityClasses(ownerState);
   const filteredDescendantCountLookup = useGridSelector(apiRef, gridFilteredDescendantCountLookupSelector);
-  const filteredDescendantCount = (_filteredDescendantCo = filteredDescendantCountLookup[rowNode.id]) != null ? _filteredDescendantCo : 0;
+  const filteredDescendantCount = filteredDescendantCountLookup[rowNode.id] ?? 0;
   const Icon = rowNode.childrenExpanded ? rootProps.slots.groupingCriteriaCollapseIcon : rootProps.slots.groupingCriteriaExpandIcon;
   const handleKeyDown = event => {
     if (event.key === ' ') {
@@ -74,7 +73,7 @@ export function GridGroupingCriteriaCell(props) {
         onKeyDown: handleKeyDown,
         tabIndex: -1,
         "aria-label": rowNode.childrenExpanded ? apiRef.current.getLocaleText('treeDataCollapse') : apiRef.current.getLocaleText('treeDataExpand')
-      }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+      }, rootProps.slotProps?.baseIconButton, {
         children: /*#__PURE__*/_jsx(Icon, {
           fontSize: "inherit"
         })

package/esm/hooks/features/aggregation/gridAggregationUtils.js

@@ -143,18 +143,18 @@ export const addFooterRows = ({
  * Compares two sets of aggregation rules to determine if they are equal or not.
  */
 export const areAggregationRulesEqual = (previousValue, newValue) => {
-  const previousFields = Object.keys(previousValue != null ? previousValue : {});
+  const previousFields = Object.keys(previousValue ?? {});
   const newFields = Object.keys(newValue);
   if (!isDeepEqual(previousFields, newFields)) {
     return false;
   }
   return newFields.every(field => {
-    const previousRule = previousValue == null ? void 0 : previousValue[field];
+    const previousRule = previousValue?.[field];
     const newRule = newValue[field];
-    if ((previousRule == null ? void 0 : previousRule.aggregationFunction) !== (newRule == null ? void 0 : newRule.aggregationFunction)) {
+    if (previousRule?.aggregationFunction !== newRule?.aggregationFunction) {
       return false;
     }
-    if ((previousRule == null ? void 0 : previousRule.aggregationFunctionName) !== (newRule == null ? void 0 : newRule.aggregationFunctionName)) {
+    if (previousRule?.aggregationFunctionName !== newRule?.aggregationFunctionName) {
       return false;
     }
     return true;

package/esm/hooks/features/aggregation/useGridAggregation.js

@@ -5,14 +5,13 @@ import { gridAggregationModelSelector } from './gridAggregationSelectors';
 import { getAggregationRules, mergeStateWithAggregationModel, areAggregationRulesEqual } from './gridAggregationUtils';
 import { createAggregationLookup } from './createAggregationLookup';
 export const aggregationStateInitializer = (state, props, apiRef) => {
-  var _ref, _props$aggregationMod, _props$initialState;
   apiRef.current.caches.aggregation = {
     rulesOnLastColumnHydration: {},
     rulesOnLastRowHydration: {}
   };
   return _extends({}, state, {
     aggregation: {
-      model: (_ref = (_props$aggregationMod = props.aggregationModel) != null ? _props$aggregationMod : (_props$initialState = props.initialState) == null || (_props$initialState = _props$initialState.aggregation) == null ? void 0 : _props$initialState.model) != null ? _ref : {}
+      model: props.aggregationModel ?? props.initialState?.aggregation?.model ?? {}
     }
   });
 };

package/esm/hooks/features/aggregation/useGridAggregationPreProcessors.js

@@ -85,11 +85,10 @@ export const useGridAggregationPreProcessors = (apiRef, props) => {
     });
   }, [apiRef, props.disableAggregation]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
-    var _context$stateToResto;
     if (props.disableAggregation) {
       return params;
     }
-    const aggregationModel = (_context$stateToResto = context.stateToRestore.aggregation) == null ? void 0 : _context$stateToResto.model;
+    const aggregationModel = context.stateToRestore.aggregation?.model;
     if (aggregationModel != null) {
       apiRef.current.setState(mergeStateWithAggregationModel(aggregationModel));
     }