@mui/x-data-grid-pro 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/DataGridPro/DataGridPro.js

@@ -120,10 +120,10 @@ DataGridProRaw.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.
@@ -134,11 +134,6 @@ DataGridProRaw.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]].
@@ -570,6 +565,11 @@ DataGridProRaw.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.
@@ -760,10 +760,10 @@ DataGridProRaw.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.
@@ -792,8 +792,9 @@ DataGridProRaw.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
@@ -815,11 +816,6 @@ DataGridProRaw.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/components/headerFiltering/GridHeaderFilterCell.js

@@ -13,7 +13,6 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
-var _cellBorderUtils = require("@mui/x-data-grid/utils/cellBorderUtils");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _GridHeaderFilterMenuContainer = require("./GridHeaderFilterMenuContainer");
 var _GridHeaderFilterClearButton = require("./GridHeaderFilterClearButton");
@@ -172,8 +171,8 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     onMouseDown: publish('headerFilterMouseDown', onMouseDown),
     onBlur: publish('headerFilterBlur')
   }), [onMouseDown, onKeyDown, publish]);
-  const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
-  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder);
+  const showLeftBorder = (0, _internals.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
+  const showRightBorder = (0, _internals.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder);
   const ownerState = (0, _extends2.default)({}, rootProps, {
     pinnedPosition,
     colDef,

package/esm/DataGridPro/DataGridPro.js

@@ -113,10 +113,10 @@ DataGridProRaw.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.
@@ -127,11 +127,6 @@ DataGridProRaw.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]].
@@ -563,6 +558,11 @@ DataGridProRaw.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.
@@ -753,10 +753,10 @@ DataGridProRaw.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.
@@ -785,8 +785,9 @@ DataGridProRaw.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
@@ -808,11 +809,6 @@ DataGridProRaw.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/GridDetailPanelToggleCell.js

@@ -18,7 +18,6 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridDetailPanelToggleCell(props) {
-  var _rootProps$slotProps;
   const {
     id,
     value: isExpanded
@@ -39,7 +38,7 @@ function GridDetailPanelToggleCell(props) {
     disabled: !hasContent,
     className: classes.root,
     "aria-label": isExpanded ? apiRef.current.getLocaleText('collapseDetailPanel') : apiRef.current.getLocaleText('expandDetailPanel')
-  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+  }, rootProps.slotProps?.baseIconButton, {
     children: /*#__PURE__*/_jsx(Icon, {
       fontSize: "inherit"
     })

package/esm/components/GridTreeDataGroupingCell.js

@@ -19,7 +19,6 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridTreeDataGroupingCell(props) {
-  var _filteredDescendantCo, _rootProps$slotProps;
   const {
     id,
     field,
@@ -35,7 +34,7 @@ function GridTreeDataGroupingCell(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.treeDataCollapseIcon : rootProps.slots.treeDataExpandIcon;
   const handleClick = event => {
     apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
@@ -54,7 +53,7 @@ function GridTreeDataGroupingCell(props) {
         onClick: handleClick,
         tabIndex: -1,
         "aria-label": rowNode.childrenExpanded ? apiRef.current.getLocaleText('treeDataCollapse') : apiRef.current.getLocaleText('treeDataExpand')
-      }, rootProps == null || (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+      }, rootProps?.slotProps?.baseIconButton, {
         children: /*#__PURE__*/_jsx(Icon, {
           fontSize: "inherit"
         })

package/esm/components/headerFiltering/GridHeaderFilterCell.js

@@ -6,8 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
 import { gridVisibleColumnFieldsSelector, getDataGridUtilityClass, useGridSelector, gridFilterModelSelector, gridFilterableColumnLookupSelector } from '@mui/x-data-grid';
-import { fastMemo, useGridPrivateApiContext, gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey } from '@mui/x-data-grid/internals';
-import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '@mui/x-data-grid/utils/cellBorderUtils';
+import { fastMemo, useGridPrivateApiContext, gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey, shouldCellShowLeftBorder, shouldCellShowRightBorder } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridHeaderFilterMenuContainer } from './GridHeaderFilterMenuContainer';
 import { GridHeaderFilterClearButton } from './GridHeaderFilterClearButton';
@@ -32,7 +31,6 @@ const dateSx = {
   }
 };
 const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _colDef$filterOperato, _colDef$filterOperato2, _filterOperators$find, _currentOperator$head, _colDef$headerName;
   const {
       colIndex,
       height,
@@ -63,11 +61,11 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const isMenuOpen = menuOpenField === colDef.field;
 
   // TODO: Support for `isAnyOf` operator
-  const filterOperators = (_colDef$filterOperato = (_colDef$filterOperato2 = colDef.filterOperators) == null ? void 0 : _colDef$filterOperato2.filter(operator => operator.value !== 'isAnyOf')) != null ? _colDef$filterOperato : [];
+  const filterOperators = colDef.filterOperators?.filter(operator => operator.value !== 'isAnyOf') ?? [];
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
   const filterableColumnsLookup = useGridSelector(apiRef, gridFilterableColumnLookupSelector);
   const isFilterReadOnly = React.useMemo(() => {
-    if (!(filterModel != null && filterModel.items.length)) {
+    if (!filterModel?.items.length) {
       return false;
     }
     const filterModelItem = filterModel.items.find(it => it.field === colDef.field);
@@ -98,7 +96,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
         focusableElement = inputRef.current;
       }
       const elementToFocus = focusableElement || cellRef.current;
-      elementToFocus == null || elementToFocus.focus();
+      elementToFocus?.focus();
       apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
     }
   }, [InputComponent, apiRef, hasFocus, isEditing, isMenuOpen]);
@@ -129,8 +127,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       case 'Tab':
         {
           if (isEditing) {
-            var _columnFields;
-            const fieldToFocus = (_columnFields = columnFields[colIndex + (event.shiftKey ? -1 : 1)]) != null ? _columnFields : null;
+            const fieldToFocus = columnFields[colIndex + (event.shiftKey ? -1 : 1)] ?? null;
             if (fieldToFocus) {
               apiRef.current.startHeaderFilterEditMode(fieldToFocus);
               apiRef.current.setColumnHeaderFilterFocus(fieldToFocus, event);
@@ -154,8 +151,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [apiRef, colDef.field]);
   const onMouseDown = React.useCallback(event => {
     if (!hasFocus) {
-      var _inputRef$current, _inputRef$current$con;
-      if ((_inputRef$current = inputRef.current) != null && (_inputRef$current$con = _inputRef$current.contains) != null && _inputRef$current$con.call(_inputRef$current, event.target)) {
+      if (inputRef.current?.contains?.(event.target)) {
         inputRef.current.focus();
       }
       apiRef.current.setColumnHeaderFilterFocus(colDef.field, event);
@@ -176,11 +172,11 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     showRightBorder
   });
   const classes = useUtilityClasses(ownerState);
-  const isNoInputOperator = (filterOperators == null || (_filterOperators$find = filterOperators.find(({
+  const isNoInputOperator = filterOperators?.find(({
     value
-  }) => item.operator === value)) == null ? void 0 : _filterOperators$find.requiresFilterValue) === false;
-  const isApplied = Boolean(item == null ? void 0 : item.value) || isNoInputOperator;
-  const label = (_currentOperator$head = currentOperator.headerLabel) != null ? _currentOperator$head : apiRef.current.getLocaleText(`headerFilterOperator${capitalize(item.operator)}`);
+  }) => item.operator === value)?.requiresFilterValue === false;
+  const isApplied = Boolean(item?.value) || isNoInputOperator;
+  const label = currentOperator.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${capitalize(item.operator)}`);
   const isFilterActive = isApplied || hasFocus;
   return /*#__PURE__*/_jsxs("div", _extends({
     className: clsx(classes.root, headerClassName),
@@ -193,7 +189,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     }, styleProp),
     role: "columnheader",
     "aria-colindex": colIndex + 1,
-    "aria-label": headerFilterComponent == null ? (_colDef$headerName = colDef.headerName) != null ? _colDef$headerName : colDef.field : undefined
+    "aria-label": headerFilterComponent == null ? colDef.headerName ?? colDef.field : undefined
   }, other, mouseEventsHandlers, {
     children: [headerFilterComponent, InputComponent && headerFilterComponent === undefined ? /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(InputComponent, _extends({
@@ -203,10 +199,9 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
         applyValue: applyFilterChanges,
         onFocus: () => apiRef.current.startHeaderFilterEditMode(colDef.field),
         onBlur: event => {
-          var _event$relatedTarget;
           apiRef.current.stopHeaderFilterEditMode();
           // Blurring an input element should reset focus state only if `relatedTarget` is not the header filter cell
-          if (!((_event$relatedTarget = event.relatedTarget) != null && _event$relatedTarget.className.includes('columnHeader'))) {
+          if (!event.relatedTarget?.className.includes('columnHeader')) {
             apiRef.current.setState(state => _extends({}, state, {
               focus: {
                 cell: null,
@@ -230,7 +225,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
         sx: colDef.type === 'date' || colDef.type === 'dateTime' ? dateSx : undefined
       }, isNoInputOperator ? {
         value: ''
-      } : {}, currentOperator == null ? void 0 : currentOperator.InputComponentProps, InputComponentProps)), /*#__PURE__*/_jsx(GridHeaderFilterMenuContainer, {
+      } : {}, currentOperator?.InputComponentProps, InputComponentProps)), /*#__PURE__*/_jsx(GridHeaderFilterMenuContainer, {
         operators: filterOperators,
         item: item,
         field: colDef.field,

package/esm/components/headerFiltering/GridHeaderFilterClearButton.js

@@ -6,14 +6,13 @@ const sx = {
   padding: '2px'
 };
 function GridHeaderFilterClearButton(props) {
-  var _rootProps$slotProps;
   const rootProps = useGridRootProps();
   return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
     tabIndex: -1,
     "aria-label": "Clear filter",
     size: "small",
     sx: sx
-  }, props, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+  }, props, rootProps.slotProps?.baseIconButton, {
     children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuClearIcon, {
       fontSize: "inherit"
     })

package/esm/components/headerFiltering/GridHeaderFilterMenu.js

@@ -41,8 +41,7 @@ function GridHeaderFilterMenu({
       id: id,
       onKeyDown: handleListKeyDown,
       children: operators.map((op, i) => {
-        var _op$headerLabel;
-        const label = (_op$headerLabel = op == null ? void 0 : op.headerLabel) != null ? _op$headerLabel : apiRef.current.getLocaleText(`headerFilterOperator${capitalize(op.value)}`);
+        const label = op?.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${capitalize(op.value)}`);
         return /*#__PURE__*/_jsx(MenuItem, {
           onClick: () => {
             applyFilterChanges(_extends({}, item, {

package/esm/components/headerFiltering/GridHeaderFilterMenuContainer.js

@@ -15,7 +15,6 @@ const sx = {
   margin: 'auto 0 10px 5px'
 };
 function GridHeaderFilterMenuContainer(props) {
-  var _rootProps$slotProps;
   const {
       operators,
       item,
@@ -54,7 +53,7 @@ function GridHeaderFilterMenuContainer(props) {
       onClick: handleClick,
       sx: sx,
       disabled: disabled
-    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+    }, rootProps.slotProps?.baseIconButton, {
       children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {
         fontSize: "small"
       })