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

package/components/cell/GridActionsCell.js

@@ -14,7 +14,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const hasActions = colDef => typeof colDef.getActions === 'function';
 function GridActionsCell(props) {
-  var _rootProps$slotProps;
   const {
       colDef,
       id,
@@ -45,7 +44,7 @@ function GridActionsCell(props) {
   React.useLayoutEffect(() => {
     if (!hasFocus) {
       Object.entries(touchRippleRefs.current).forEach(([index, ref]) => {
-        ref == null || ref.stop({}, () => {
+        ref?.stop({}, () => {
           delete touchRippleRefs.current[index];
         });
       });
@@ -107,7 +106,6 @@ function GridActionsCell(props) {
       return;
     }
     const getNewIndex = (index, direction) => {
-      var _options;
       if (index < 0 || index > options.length) {
         return index;
       }
@@ -117,7 +115,7 @@ function GridActionsCell(props) {
       const indexMod = (direction === 'left' ? -1 : 1) * rtlMod;
 
       // if the button that should receive focus is disabled go one more step
-      return (_options = options[index + indexMod]) != null && _options.props.disabled ? getNewIndex(index + indexMod, direction) : index + indexMod;
+      return options[index + indexMod]?.props.disabled ? getNewIndex(index + indexMod, direction) : index + indexMod;
     };
     let newIndex = focusedButtonIndex;
     if (event.key === 'ArrowRight') {
@@ -130,7 +128,7 @@ function GridActionsCell(props) {
     }
     if (newIndex !== focusedButtonIndex) {
       event.preventDefault(); // Prevent scrolling
-      event.stopPropagation(); // Don't stop propagation for other keys, e.g. ArrowUp
+      event.stopPropagation(); // Don't stop propagation for other keys, for example ArrowUp
       setFocusedButtonIndex(newIndex);
     }
   };
@@ -166,7 +164,7 @@ function GridActionsCell(props) {
       onClick: showMenu,
       touchRippleRef: handleTouchRippleRef(buttonId),
       tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
-    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+    }, rootProps.slotProps?.baseIconButton, {
       children: /*#__PURE__*/_jsx(rootProps.slots.moreActionsIcon, {
         fontSize: "small"
       })

package/components/cell/GridActionsCellItem.d.ts

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import { IconButtonProps } from '@mui/material/IconButton';
 import { MenuItemProps } from '@mui/material/MenuItem';
-export type GridActionsCellItemProps = {
+interface GridActionsCellItemCommonProps {
     label: string;
     icon?: React.ReactElement;
     /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
     component?: React.ElementType;
-} & (({
+}
+export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
     showInMenu?: false;
     icon: React.ReactElement;
-} & IconButtonProps) | ({
+} & Omit<IconButtonProps, 'component'>) | ({
     showInMenu: true;
     /**
      * If false, the menu will not close when this item is clicked.
@@ -17,25 +18,11 @@ export type GridActionsCellItemProps = {
      */
     closeMenuOnClick?: boolean;
     closeMenu?: () => void;
-} & MenuItemProps));
-declare const GridActionsCellItem: React.ForwardRefExoticComponent<(Omit<{
-    label: string;
-    icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-} & {
+} & Omit<MenuItemProps, 'component'>));
+declare const GridActionsCellItem: React.ForwardRefExoticComponent<(Omit<GridActionsCellItemCommonProps & {
     showInMenu?: false | undefined;
     icon: React.ReactElement;
-} & import("@mui/material/IconButton").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "color" | "size" | "style" | "disabled" | "action" | "className" | "tabIndex" | "children" | "sx" | "classes" | "onFocusVisible" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-}, "ref"> | Omit<{
-    label: string;
-    icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-} & {
+} & Omit<IconButtonProps, "component">, "ref"> | Omit<GridActionsCellItemCommonProps & {
     showInMenu: true;
     /**
      * If false, the menu will not close when this item is clicked.
@@ -43,9 +30,5 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<(Omit<{
      */
     closeMenuOnClick?: boolean | undefined;
     closeMenu?: (() => void) | undefined;
-} & import("@mui/material/MenuItem").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
-}, "style" | "dense" | "disabled" | "action" | "selected" | "autoFocus" | "className" | "tabIndex" | "children" | "sx" | "classes" | "disableGutters" | "divider" | "onFocusVisible" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef"> & {
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-}, "ref">) & React.RefAttributes<HTMLElement>>;
+} & Omit<MenuItemProps, "component">, "ref">) & React.RefAttributes<HTMLElement>>;
 export { GridActionsCellItem };

package/components/cell/GridActionsCellItem.js

@@ -12,7 +12,6 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
   if (!props.showInMenu) {
-    var _rootProps$slotProps;
     const {
         label,
         icon,
@@ -20,7 +19,7 @@ const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded);
     const handleClick = event => {
-      onClick == null || onClick(event);
+      onClick?.(event);
     };
     return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
       ref: ref,
@@ -29,7 +28,7 @@ const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       "aria-label": label
     }, other, {
       onClick: handleClick
-    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+    }, rootProps.slotProps?.baseIconButton, {
       children: /*#__PURE__*/React.cloneElement(icon, {
         fontSize: 'small'
       })
@@ -44,9 +43,9 @@ const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded2);
   const handleClick = event => {
-    onClick == null || onClick(event);
+    onClick?.(event);
     if (closeMenuOnClick) {
-      closeMenu == null || closeMenu();
+      closeMenu?.();
     }
   };
   return /*#__PURE__*/_jsxs(MenuItem, _extends({
@@ -63,6 +62,10 @@ process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component
+   */
+  component: PropTypes.elementType,
   icon: PropTypes.element,
   label: PropTypes.string.isRequired,
   showInMenu: PropTypes.bool

package/components/cell/GridBooleanCell.d.ts

@@ -3,6 +3,7 @@ import { SvgIconProps } from '@mui/material/SvgIcon';
 import { GridRenderCellParams } from '../../models/params/gridCellParams';
 import { GridColDef } from '../../models/colDef/gridColDef';
 interface GridBooleanCellProps extends GridRenderCellParams, Omit<SvgIconProps, 'tabIndex' | 'id'> {
+    hideDescendantCount?: boolean;
 }
 declare function GridBooleanCellRaw(props: GridBooleanCellProps): React.JSX.Element;
 declare namespace GridBooleanCellRaw {

package/components/cell/GridBooleanCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex", "hideDescendantCount"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -76,6 +76,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
    * If true, the cell is the active element.
    */
   hasFocus: PropTypes.bool.isRequired,
+  hideDescendantCount: PropTypes.bool,
   /**
    * The grid row id.
    */
@@ -105,7 +106,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
 const GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
 export { GridBooleanCell };
 export const renderBooleanCell = params => {
-  if (isAutoGeneratedRow(params.rowNode)) {
+  if (params.field !== '__row_group_by_columns_group__' && isAutoGeneratedRow(params.rowNode)) {
     return '';
   }
   return /*#__PURE__*/_jsx(GridBooleanCell, _extends({}, params));

package/components/cell/GridCell.js

@@ -76,7 +76,6 @@ let warnedOnce = false;
 // TODO(v7): Removing the wrapper will break the docs performance visualization demo.
 
 const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _getActions, _ref, _rootProps$cellSelect, _rootProps$experiment;
   const {
       column,
       rowId,
@@ -134,7 +133,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     value,
     formattedValue
   } = cellParamsWithAPI;
-  const canManageOwnFocus = column.type === 'actions' && ((_getActions = (_ref = column).getActions) == null ? void 0 : _getActions.call(_ref, apiRef.current.getRowParams(rowId)).some(action => !action.props.disabled));
+  const canManageOwnFocus = column.type === 'actions' && column.getActions?.(apiRef.current.getRowParams(rowId)).some(action => !action.props.disabled);
   const tabIndex = (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParamsWithAPI.tabIndex : -1;
   const {
     classes: rootClasses,
@@ -161,7 +160,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const handleRef = useForkRef(ref, cellRef);
   const focusElementRef = React.useRef(null);
   // @ts-expect-error To access `cellSelection` flag as it's a `premium` feature
-  const isSelectionMode = (_rootProps$cellSelect = rootProps.cellSelection) != null ? _rootProps$cellSelect : false;
+  const isSelectionMode = rootProps.cellSelection ?? false;
   const position = gridPinnedColumnPositionLookup[pinnedPosition];
   const showLeftBorder = shouldCellShowLeftBorder(position, sectionIndex);
   const showRightBorder = shouldCellShowRightBorder(position, sectionIndex, sectionLength, rootProps.showCellVerticalBorder);
@@ -244,17 +243,17 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     return null;
   }
   let handleFocus = other.onFocus;
-  if (process.env.NODE_ENV === 'test' && (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.warnIfFocusStateIsNotSynced) {
+  if (process.env.NODE_ENV === 'test' && rootProps.experimentalFeatures?.warnIfFocusStateIsNotSynced) {
     handleFocus = event => {
       const focusedCell = gridFocusCellSelector(apiRef);
-      if ((focusedCell == null ? void 0 : focusedCell.id) === rowId && focusedCell.field === field) {
+      if (focusedCell?.id === rowId && focusedCell.field === field) {
         if (typeof other.onFocus === 'function') {
           other.onFocus(event);
         }
         return;
       }
       if (!warnedOnce) {
-        console.warn([`MUI X: The cell with id=${rowId} and field=${field} received focus.`, `According to the state, the focus should be at id=${focusedCell == null ? void 0 : focusedCell.id}, field=${focusedCell == null ? void 0 : focusedCell.field}.`, "Not syncing the state may cause unwanted behaviors since the `cellFocusIn` event won't be fired.", 'Call `fireEvent.mouseUp` before the `fireEvent.click` to sync the focus with the state.'].join('\n'));
+        console.warn([`MUI X: The cell with id=${rowId} and field=${field} received focus.`, `According to the state, the focus should be at id=${focusedCell?.id}, field=${focusedCell?.field}.`, "Not syncing the state may cause unwanted behaviors since the `cellFocusIn` event won't be fired.", 'Call `fireEvent.mouseUp` before the `fireEvent.click` to sync the focus with the state.'].join('\n'));
         warnedOnce = true;
       }
     };
@@ -274,10 +273,10 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     }, editCellStateRest);
     children = column.renderEditCell(params);
     classNames.push(gridClasses['cell--editing']);
-    classNames.push(rootClasses == null ? void 0 : rootClasses['cell--editing']);
+    classNames.push(rootClasses?.['cell--editing']);
   }
   if (children === undefined) {
-    const valueString = valueToRender == null ? void 0 : valueToRender.toString();
+    const valueString = valueToRender?.toString();
     children = valueString;
     title = valueString;
   }

package/components/cell/GridEditBooleanCell.js

@@ -19,7 +19,6 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridEditBooleanCell(props) {
-  var _rootProps$slotProps;
   const {
       id: idProp,
       value,
@@ -68,7 +67,7 @@ function GridEditBooleanCell(props) {
       checked: Boolean(valueState),
       onChange: handleChange,
       size: "small"
-    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseCheckbox))
+    }, rootProps.slotProps?.baseCheckbox))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {

package/components/cell/GridEditDateCell.js

@@ -43,7 +43,7 @@ function GridEditDateCell(props) {
     } else if (valueProp instanceof Date) {
       parsedDate = valueProp;
     } else {
-      parsedDate = new Date((valueProp != null ? valueProp : '').toString());
+      parsedDate = new Date((valueProp ?? '').toString());
     }
     let formattedDate;
     if (parsedDate == null || Number.isNaN(parsedDate.getTime())) {
@@ -96,8 +96,7 @@ function GridEditDateCell(props) {
   }, [apiRef, field, id, onValueChange, parseValueToDate]);
   React.useEffect(() => {
     setValueState(state => {
-      var _valueTransformed$par, _state$parsed;
-      if (valueTransformed.parsed !== state.parsed && ((_valueTransformed$par = valueTransformed.parsed) == null ? void 0 : _valueTransformed$par.getTime()) !== ((_state$parsed = state.parsed) == null ? void 0 : _state$parsed.getTime())) {
+      if (valueTransformed.parsed !== state.parsed && valueTransformed.parsed?.getTime() !== state.parsed?.getTime()) {
         return valueTransformed;
       }
       return state;

package/components/cell/GridEditInputCell.js

@@ -70,7 +70,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [apiRef, debounceMs, field, id, onValueChange]);
   const meta = apiRef.current.unstable_getEditCellMeta(id, field);
   React.useEffect(() => {
-    if ((meta == null ? void 0 : meta.changeReason) !== 'debouncedSetEditCellValue') {
+    if (meta?.changeReason !== 'debouncedSetEditCellValue') {
       setValueState(value);
     }
   }, [meta, value]);
@@ -86,7 +86,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     ownerState: rootProps,
     fullWidth: true,
     type: colDef.type === 'number' ? colDef.type : 'text',
-    value: valueState != null ? valueState : '',
+    value: valueState ?? '',
     onChange: handleChange,
     endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
       fontSize: "small",

package/components/cell/GridEditSingleSelectCell.js

@@ -17,7 +17,6 @@ function isKeyboardEvent(event) {
   return !!event.key;
 }
 function GridEditSingleSelectCell(props) {
-  var _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2;
   const rootProps = useGridRootProps();
   const {
       id,
@@ -35,17 +34,16 @@ function GridEditSingleSelectCell(props) {
   const ref = React.useRef();
   const inputRef = React.useRef();
   const [open, setOpen] = React.useState(initialOpen);
-  const baseSelectProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseSelect) || {};
-  const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : false;
-  const _ref = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelect) || {},
+  const baseSelectProps = rootProps.slotProps?.baseSelect || {};
+  const isSelectNative = baseSelectProps.native ?? false;
+  const _ref = rootProps.slotProps?.baseSelect || {},
     {
       MenuProps
     } = _ref,
     otherBaseSelectProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
   useEnhancedEffect(() => {
     if (hasFocus) {
-      var _inputRef$current;
-      (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
+      inputRef.current?.focus();
     }
   }, [hasFocus]);
   if (!isSingleSelectColDef(colDef)) {
@@ -113,9 +111,8 @@ function GridEditSingleSelectCell(props) {
     fullWidth: true
   }, other, otherBaseSelectProps, {
     children: valueOptions.map(valueOption => {
-      var _rootProps$slotProps3;
       const value = getOptionValue(valueOption);
-      return /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, ((_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelectOption) || {}, {
+      return /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, rootProps.slotProps?.baseSelectOption || {}, {
         native: isSelectNative,
         key: value,
         value: value

package/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -17,7 +17,6 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
-  var _rootProps$slotProps, _rootProps$slotProps2;
   const {
     colDef,
     open,
@@ -41,7 +40,7 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
       title: apiRef.current.getLocaleText('columnMenuLabel'),
       enterDelay: 1000
-    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+    }, rootProps.slotProps?.baseTooltip, {
       children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
         ref: iconButtonRef,
         tabIndex: -1,
@@ -53,7 +52,7 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
         "aria-expanded": open,
         "aria-controls": open ? columnMenuId : undefined,
         id: columnMenuButtonId
-      }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseIconButton, {
+      }, rootProps.slotProps?.baseIconButton, {
         children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {
           fontSize: "small"
         })

package/components/columnHeaders/GridColumnGroupHeader.js

@@ -29,7 +29,6 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridColumnGroupHeader(props) {
-  var _columnGroupsLookup$g;
   const {
     groupId,
     width,
@@ -52,12 +51,12 @@ function GridColumnGroupHeader(props) {
   const columnGroupsLookup = useGridSelector(apiRef, gridColumnGroupsLookupSelector);
   const group = groupId ? columnGroupsLookup[groupId] : {};
   const {
-    headerName = groupId != null ? groupId : '',
+    headerName = groupId ?? '',
     description = '',
     headerAlign = undefined
   } = group;
   let headerComponent;
-  const render = groupId && ((_columnGroupsLookup$g = columnGroupsLookup[groupId]) == null ? void 0 : _columnGroupsLookup$g.renderHeaderGroup);
+  const render = groupId && columnGroupsLookup[groupId]?.renderHeaderGroup;
   const renderParams = React.useMemo(() => ({
     groupId,
     headerName,
@@ -81,7 +80,7 @@ function GridColumnGroupHeader(props) {
     depth,
     isDragging: false
   });
-  const label = headerName != null ? headerName : groupId;
+  const label = headerName ?? groupId;
   const id = useId();
   const elementId = groupId === null ? `empty-group-cell-${id}` : groupId;
   const classes = useUtilityClasses(ownerState);
@@ -89,7 +88,7 @@ function GridColumnGroupHeader(props) {
     if (hasFocus) {
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
-      elementToFocus == null || elementToFocus.focus();
+      elementToFocus?.focus();
     }
   }, [apiRef, hasFocus]);
   const publish = React.useCallback(eventName => event => {

package/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -22,7 +22,6 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridColumnHeaderFilterIconButton(props) {
-  var _rootProps$slotProps, _rootProps$slotProps2;
   const {
     counter,
     field,
@@ -67,7 +66,7 @@ function GridColumnHeaderFilterIconButton(props) {
     "aria-haspopup": "menu",
     "aria-expanded": open,
     "aria-controls": open ? panelId : undefined
-  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+  }, rootProps.slotProps?.baseIconButton, {
     children: /*#__PURE__*/_jsx(rootProps.slots.columnFilteredIcon, {
       className: classes.icon,
       fontSize: "small"
@@ -76,7 +75,7 @@ function GridColumnHeaderFilterIconButton(props) {
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: apiRef.current.getLocaleText('columnHeaderFiltersTooltipActive')(counter),
     enterDelay: 1000
-  }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseTooltip, {
+  }, rootProps.slotProps?.baseTooltip, {
     children: /*#__PURE__*/_jsxs(GridIconButtonContainer, {
       children: [counter > 1 && /*#__PURE__*/_jsx(Badge, {
         badgeContent: counter,

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -38,7 +38,6 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridColumnHeaderItem(props) {
-  var _rootProps$slotProps, _colDef$sortingOrder, _rootProps$slotProps2, _colDef$headerName;
   const {
     colDef,
     columnMenuOpen,
@@ -132,16 +131,16 @@ function GridColumnHeaderItem(props) {
     open: columnMenuOpen,
     target: iconButtonRef.current,
     ContentComponent: rootProps.slots.columnMenu,
-    contentComponentProps: (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.columnMenu,
+    contentComponentProps: rootProps.slotProps?.columnMenu,
     onExited: handleExited
   });
-  const sortingOrder = (_colDef$sortingOrder = colDef.sortingOrder) != null ? _colDef$sortingOrder : rootProps.sortingOrder;
+  const sortingOrder = colDef.sortingOrder ?? rootProps.sortingOrder;
   const showSortIcon = (colDef.sortable || sortDirection != null) && !colDef.hideSortIcons && !rootProps.disableColumnSorting;
   const columnTitleIconButtons = /*#__PURE__*/_jsxs(React.Fragment, {
     children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.slots.columnHeaderFilterIconButton, _extends({
       field: colDef.field,
       counter: filterItemsCounter
-    }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.columnHeaderFilterIconButton)), showSortIcon && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
+    }, rootProps.slotProps?.columnHeaderFilterIconButton)), showSortIcon && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
       direction: sortDirection,
       index: sortIndex,
       sortingOrder: sortingOrder,
@@ -153,7 +152,7 @@ function GridColumnHeaderItem(props) {
     if (hasFocus && !columnMenuState.open) {
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
-      elementToFocus == null || elementToFocus.focus();
+      elementToFocus?.focus();
       apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
     }
   }, [apiRef, hasFocus]);
@@ -161,7 +160,7 @@ function GridColumnHeaderItem(props) {
     field: colDef.field,
     colDef
   }) : colDef.headerClassName;
-  const label = (_colDef$headerName = colDef.headerName) != null ? _colDef$headerName : colDef.field;
+  const label = colDef.headerName ?? colDef.field;
   return /*#__PURE__*/_jsx(GridGenericColumnHeaderItem, _extends({
     ref: headerCellRef,
     classes: classes,

package/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -35,7 +35,6 @@ function getIcon(icons, direction, className, sortingOrder) {
   }, iconProps)) : null;
 }
 function GridColumnHeaderSortIconRaw(props) {
-  var _rootProps$slotProps;
   const {
     direction,
     index,
@@ -58,7 +57,7 @@ function GridColumnHeaderSortIconRaw(props) {
     title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
     size: "small",
     disabled: disabled
-  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+  }, rootProps.slotProps?.baseIconButton, {
     children: iconElement
   }));
   return /*#__PURE__*/_jsxs(GridIconButtonContainer, {

package/components/columnHeaders/GridColumnHeaderTitle.js

@@ -44,7 +44,6 @@ const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHead
 });
 // No React.memo here as if we display the sort icon, we need to recalculate the isOver
 function GridColumnHeaderTitle(props) {
-  var _rootProps$slotProps;
   const {
     label,
     description
@@ -53,7 +52,7 @@ function GridColumnHeaderTitle(props) {
   const titleRef = React.useRef(null);
   const [tooltip, setTooltip] = React.useState('');
   const handleMouseOver = React.useCallback(() => {
-    if (!description && titleRef != null && titleRef.current) {
+    if (!description && titleRef?.current) {
       const isOver = isOverflown(titleRef.current);
       if (isOver) {
         setTooltip(label);
@@ -64,7 +63,7 @@ function GridColumnHeaderTitle(props) {
   }, [description, label]);
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: description || tooltip
-  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+  }, rootProps.slotProps?.baseTooltip, {
     children: /*#__PURE__*/_jsx(ColumnHeaderInnerTitle, {
       onMouseOver: handleMouseOver,
       ref: titleRef,

package/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -55,7 +55,7 @@ const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridG
     if (hasFocus && !columnMenuState.open) {
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
-      elementToFocus == null || elementToFocus.focus();
+      elementToFocus?.focus();
       apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
     }
   }, [apiRef, hasFocus]);

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -18,7 +18,6 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCellCheckboxRenderer(props, ref) {
-  var _rootProps$slotProps;
   const {
       field,
       id,
@@ -54,9 +53,8 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
   }, [apiRef, tabIndex, id, field]);
   React.useEffect(() => {
     if (hasFocus) {
-      var _checkboxElement$curr;
-      const input = (_checkboxElement$curr = checkboxElement.current) == null ? void 0 : _checkboxElement$curr.querySelector('input');
-      input == null || input.focus({
+      const input = checkboxElement.current?.querySelector('input');
+      input?.focus({
         preventScroll: true
       });
     } else if (rippleRef.current) {
@@ -88,7 +86,7 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     onKeyDown: handleKeyDown,
     disabled: !isSelectable,
     touchRippleRef: rippleRef /* FIXME: typing error */
-  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseCheckbox, other));
+  }, rootProps.slotProps?.baseCheckbox, other));
 });
 process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/columnSelection/GridHeaderCheckbox.js

@@ -24,7 +24,6 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderCheckbox(props, ref) {
-  var _rootProps$slotProps;
   const other = _objectWithoutPropertiesLoose(props, _excluded);
   const [, forceUpdate] = React.useState(false);
   const apiRef = useGridApiContext();
@@ -106,7 +105,7 @@ const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderChec
     tabIndex: tabIndex,
     onKeyDown: handleKeyDown,
     disabled: !isMultipleRowSelectionEnabled(rootProps)
-  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseCheckbox, other));
+  }, rootProps.slotProps?.baseCheckbox, other));
 });
 process.env.NODE_ENV !== "production" ? GridHeaderCheckbox.propTypes = {
   // ----------------------------- Warning --------------------------------