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

package/components/GridRow.js

@@ -157,7 +157,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   }, [apiRef, rowId]);
   const publishClick = React.useCallback(event => {
     const cell = findParentElementFromClassName(event.target, gridClasses.cell);
-    const field = cell == null ? void 0 : cell.getAttribute('data-field');
+    const field = cell?.getAttribute('data-field');
 
     // Check if the field is available because the cell that fills the empty
     // space of the row has no field.
@@ -184,7 +184,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
 
       // User clicked a button from the "actions" column type
       const column = apiRef.current.getColumn(field);
-      if ((column == null ? void 0 : column.type) === GRID_ACTIONS_COLUMN_TYPE) {
+      if (column?.type === GRID_ACTIONS_COLUMN_TYPE) {
         return;
       }
     }
@@ -199,9 +199,8 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const sizes = useGridSelector(apiRef, () => _extends({}, apiRef.current.unstable_getRowInternalSizes(rowId)), objectShallowCompare);
   let minHeight = rowHeight;
   if (minHeight === 'auto' && sizes) {
-    var _sizes$baseCenter;
     const numberOfBaseSizes = 1;
-    const maximumSize = (_sizes$baseCenter = sizes.baseCenter) != null ? _sizes$baseCenter : 0;
+    const maximumSize = sizes.baseCenter ?? 0;
     if (maximumSize > 0 && numberOfBaseSizes > 1) {
       minHeight = maximumSize;
     }
@@ -220,11 +219,11 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       minHeight,
       '--height': typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight
     });
-    if (sizes != null && sizes.spacingTop) {
+    if (sizes?.spacingTop) {
       const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
       rowStyle[property] = sizes.spacingTop;
     }
-    if (sizes != null && sizes.spacingBottom) {
+    if (sizes?.spacingBottom) {
       const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
       let propertyValue = rowStyle[property];
       // avoid overriding existing value
@@ -238,8 +237,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   }, [isNotVisible, rowHeight, styleProp, minHeight, sizes, rootProps.rowSpacingType]);
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
   if (typeof rootProps.getRowClassName === 'function') {
-    var _currentPage$range;
-    const indexRelativeToCurrentPage = index - (((_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0);
+    const indexRelativeToCurrentPage = index - (currentPage.range?.firstRowIndex || 0);
     const rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
       isFirstVisible: indexRelativeToCurrentPage === 0,
       isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
@@ -248,24 +246,22 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = PinnedPosition.NONE) => {
-    var _cellColSpanInfo$cell, _cellColSpanInfo$cell2, _editRowsState$rowId$, _editRowsState$rowId;
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
-    if (cellColSpanInfo != null && cellColSpanInfo.spannedByColSpan) {
+    if (cellColSpanInfo?.spannedByColSpan) {
       return null;
     }
-    const width = (_cellColSpanInfo$cell = cellColSpanInfo == null ? void 0 : cellColSpanInfo.cellProps.width) != null ? _cellColSpanInfo$cell : column.computedWidth;
-    const colSpan = (_cellColSpanInfo$cell2 = cellColSpanInfo == null ? void 0 : cellColSpanInfo.cellProps.colSpan) != null ? _cellColSpanInfo$cell2 : 1;
+    const width = cellColSpanInfo?.cellProps.width ?? column.computedWidth;
+    const colSpan = cellColSpanInfo?.cellProps.colSpan ?? 1;
     const pinnedOffset = getPinnedCellOffset(gridPinnedColumnPositionLookup[pinnedPosition], column.computedWidth, indexRelativeToAllColumns, columnPositions, dimensions);
-    if ((rowNode == null ? void 0 : rowNode.type) === 'skeletonRow') {
-      var _column$align;
+    if (rowNode?.type === 'skeletonRow') {
       return /*#__PURE__*/_jsx(slots.skeletonCell, {
         width: width,
         height: rowHeight,
         field: column.field,
-        align: (_column$align = column.align) != null ? _column$align : 'left'
+        align: column.align ?? 'left'
       }, column.field);
     }
-    const editCellState = (_editRowsState$rowId$ = (_editRowsState$rowId = editRowsState[rowId]) == null ? void 0 : _editRowsState$rowId[column.field]) != null ? _editRowsState$rowId$ : null;
+    const editCellState = editRowsState[rowId]?.[column.field] ?? null;
 
     // when the cell is a reorder cell we are not allowing to reorder the col
     // fixes https://github.com/mui/mui-x/issues/11126
@@ -289,7 +285,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       pinnedPosition: pinnedPosition,
       sectionIndex: indexInSection,
       sectionLength: sectionLength
-    }, slotProps == null ? void 0 : slotProps.cell), column.field);
+    }, slotProps?.cell), column.field);
   };
 
   /* Start of rendering */

package/components/base/GridFooterPlaceholder.js

@@ -3,10 +3,9 @@ import * as React from 'react';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridFooterPlaceholder() {
-  var _rootProps$slotProps;
   const rootProps = useGridRootProps();
   if (rootProps.hideFooter) {
     return null;
   }
-  return /*#__PURE__*/_jsx(rootProps.slots.footer, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.footer /* FIXME: typing error */));
+  return /*#__PURE__*/_jsx(rootProps.slots.footer, _extends({}, rootProps.slotProps?.footer /* FIXME: typing error */));
 }

package/components/base/GridOverlays.js

@@ -91,18 +91,15 @@ export function GridOverlays() {
   let overlay = null;
   let overlayType = '';
   if (showNoRowsOverlay) {
-    var _rootProps$slotProps;
-    overlay = /*#__PURE__*/_jsx(rootProps.slots.noRowsOverlay, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.noRowsOverlay));
+    overlay = /*#__PURE__*/_jsx(rootProps.slots.noRowsOverlay, _extends({}, rootProps.slotProps?.noRowsOverlay));
     overlayType = 'noRowsOverlay';
   }
   if (showNoResultsOverlay) {
-    var _rootProps$slotProps2;
-    overlay = /*#__PURE__*/_jsx(rootProps.slots.noResultsOverlay, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.noResultsOverlay));
+    overlay = /*#__PURE__*/_jsx(rootProps.slots.noResultsOverlay, _extends({}, rootProps.slotProps?.noResultsOverlay));
     overlayType = 'noResultsOverlay';
   }
   if (loading) {
-    var _rootProps$slotProps3;
-    overlay = /*#__PURE__*/_jsx(rootProps.slots.loadingOverlay, _extends({}, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.loadingOverlay));
+    overlay = /*#__PURE__*/_jsx(rootProps.slots.loadingOverlay, _extends({}, rootProps.slotProps?.loadingOverlay));
     overlayType = 'loadingOverlay';
   }
   if (overlay === null) {

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,15 +152,17 @@ function GridColumnHeaderItem(props) {
     if (hasFocus && !columnMenuState.open) {
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
-      elementToFocus == null || elementToFocus.focus();
-      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      elementToFocus?.focus();
+      if (apiRef.current.columnHeadersContainerRef?.current) {
+        apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      }
     }
   }, [apiRef, hasFocus]);
   const headerClassName = typeof colDef.headerClassName === 'function' ? colDef.headerClassName({
     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, {