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

package/esm/components/GridGroupingCriteriaCell.js

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

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

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

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

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

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

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

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

@@ -15,8 +15,7 @@ const getAggregationValueWrappedValueGetter = ({
     const rowId = apiRef.current.getRowId(row);
     const cellAggregationResult = getCellAggregationResult(rowId, column.field);
     if (cellAggregationResult != null) {
-      var _cellAggregationResul;
-      return (_cellAggregationResul = cellAggregationResult == null ? void 0 : cellAggregationResult.value) != null ? _cellAggregationResul : null;
+      return cellAggregationResult?.value ?? null;
     }
     if (valueGetter) {
       return valueGetter(value, row, column, apiRef);
@@ -40,8 +39,7 @@ const getAggregationValueWrappedValueFormatter = ({
     if (rowId != null) {
       const cellAggregationResult = getCellAggregationResult(rowId, column.field);
       if (cellAggregationResult != null) {
-        var _aggregationRule$aggr, _aggregationRule$aggr2;
-        return (_aggregationRule$aggr = (_aggregationRule$aggr2 = aggregationRule.aggregationFunction).valueFormatter) == null ? void 0 : _aggregationRule$aggr.call(_aggregationRule$aggr2, {
+        return aggregationRule.aggregationFunction.valueFormatter?.({
           id: rowId,
           field: column.field,
           value,
@@ -64,7 +62,6 @@ const getAggregationValueWrappedRenderCell = ({
   const wrappedRenderCell = params => {
     const cellAggregationResult = getCellAggregationResult(params.id, params.field);
     if (cellAggregationResult != null) {
-      var _aggregationFunction$;
       if (!renderCell) {
         if (cellAggregationResult.position === 'footer') {
           return /*#__PURE__*/_jsx(GridFooterCell, _extends({}, params));
@@ -72,7 +69,7 @@ const getAggregationValueWrappedRenderCell = ({
         return params.formattedValue;
       }
       const aggregationMeta = {
-        hasCellUnit: (_aggregationFunction$ = aggregationRule.aggregationFunction.hasCellUnit) != null ? _aggregationFunction$ : true,
+        hasCellUnit: aggregationRule.aggregationFunction.hasCellUnit ?? true,
         aggregationFunctionName: aggregationRule.aggregationFunctionName
       };
       return renderCell(_extends({}, params, {
@@ -140,7 +137,6 @@ export const wrapColumnWithAggregationValue = ({
   aggregationRule
 }) => {
   const getCellAggregationResult = (id, field) => {
-    var _rowNode$parent, _gridAggregationLooku;
     let cellAggregationPosition = null;
     const rowNode = apiRef.current.getRowNode(id);
     if (rowNode.type === 'group') {
@@ -153,8 +149,8 @@ export const wrapColumnWithAggregationValue = ({
     }
 
     // TODO: Add custom root id
-    const groupId = cellAggregationPosition === 'inline' ? id : (_rowNode$parent = rowNode.parent) != null ? _rowNode$parent : '';
-    const aggregationResult = (_gridAggregationLooku = gridAggregationLookupSelector(apiRef)) == null || (_gridAggregationLooku = _gridAggregationLooku[groupId]) == null ? void 0 : _gridAggregationLooku[field];
+    const groupId = cellAggregationPosition === 'inline' ? id : rowNode.parent ?? '';
+    const aggregationResult = gridAggregationLookupSelector(apiRef)?.[groupId]?.[field];
     if (!aggregationResult || aggregationResult.position !== cellAggregationPosition) {
       return null;
     }

package/esm/hooks/features/cellSelection/useGridCellSelection.js

@@ -4,12 +4,9 @@ import { ownerDocument, useEventCallback } from '@mui/material/utils';
 import { getTotalHeaderHeight, isNavigationKey, serializeCellValue, useGridRegisterPipeProcessor, useGridVisibleRows } from '@mui/x-data-grid-pro/internals';
 import { useGridApiEventHandler, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridRowsDataRowIdToIdLookupSelector, gridClasses, gridFocusCellSelector, GRID_REORDER_COL_DEF, useGridSelector, gridSortedRowIdsSelector, gridDimensionsSelector } from '@mui/x-data-grid-pro';
 import { gridCellSelectionStateSelector } from './gridCellSelectionSelector';
-export const cellSelectionStateInitializer = (state, props) => {
-  var _props$cellSelectionM, _props$initialState;
-  return _extends({}, state, {
-    cellSelection: _extends({}, (_props$cellSelectionM = props.cellSelectionModel) != null ? _props$cellSelectionM : (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.cellSelection)
-  });
-};
+export const cellSelectionStateInitializer = (state, props) => _extends({}, state, {
+  cellSelection: _extends({}, props.cellSelectionModel ?? props.initialState?.cellSelection)
+});
 function isKeyboardEvent(event) {
   return !!event.key;
 }
@@ -26,7 +23,7 @@ export const useGridCellSelection = (apiRef, props) => {
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const totalHeaderHeight = getTotalHeaderHeight(apiRef, props.columnHeaderHeight);
   const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
-  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.clipboardExport : ignoreValueFormatterProp) || false;
+  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
   const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
   apiRef.current.registerControlState({
     stateId: 'cellSelection',
@@ -122,15 +119,13 @@ export const useGridCellSelection = (apiRef, props) => {
     return params.rowNode.type !== 'pinnedRow';
   }, [apiRef]);
   const handleMouseUp = useEventCallback(() => {
-    var _apiRef$current$rootE;
     lastMouseDownCell.current = null;
-    (_apiRef$current$rootE = apiRef.current.rootElementRef) == null || (_apiRef$current$rootE = _apiRef$current$rootE.current) == null || _apiRef$current$rootE.classList.remove(gridClasses['root--disableUserSelection']);
+    apiRef.current.rootElementRef?.current?.classList.remove(gridClasses['root--disableUserSelection']);
 
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     stopAutoScroll();
   });
   const handleCellMouseDown = React.useCallback((params, event) => {
-    var _apiRef$current$rootE2, _apiRef$current$rootE3;
     // Skip if the click comes from the right-button or, only on macOS, Ctrl is pressed
     // Fix for https://github.com/mui/mui-x/pull/6567#issuecomment-1329155578
     const isMacOs = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
@@ -148,8 +143,8 @@ export const useGridCellSelection = (apiRef, props) => {
       id: params.id,
       field: params.field
     };
-    (_apiRef$current$rootE2 = apiRef.current.rootElementRef) == null || (_apiRef$current$rootE2 = _apiRef$current$rootE2.current) == null || _apiRef$current$rootE2.classList.add(gridClasses['root--disableUserSelection']);
-    const document = ownerDocument((_apiRef$current$rootE3 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE3.current);
+    apiRef.current.rootElementRef?.current?.classList.add(gridClasses['root--disableUserSelection']);
+    const document = ownerDocument(apiRef.current.rootElementRef?.current);
     document.addEventListener('mouseup', handleMouseUp, {
       once: true
     });
@@ -167,16 +162,14 @@ export const useGridCellSelection = (apiRef, props) => {
     };
   }, []);
   const startAutoScroll = React.useCallback(() => {
-    var _apiRef$current$virtu;
     if (autoScrollRAF.current) {
       return;
     }
-    if (!((_apiRef$current$virtu = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu.current)) {
+    if (!apiRef.current.virtualScrollerRef?.current) {
       return;
     }
     function autoScroll() {
-      var _apiRef$current$virtu2;
-      if (!mousePosition.current || !((_apiRef$current$virtu2 = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu2.current)) {
+      if (!mousePosition.current || !apiRef.current.virtualScrollerRef?.current) {
         return;
       }
       const {
@@ -222,7 +215,6 @@ export const useGridCellSelection = (apiRef, props) => {
     autoScroll();
   }, [apiRef, dimensions]);
   const handleCellMouseOver = React.useCallback((params, event) => {
-    var _apiRef$current$virtu3;
     if (!lastMouseDownCell.current) {
       return;
     }
@@ -234,7 +226,7 @@ export const useGridCellSelection = (apiRef, props) => {
       id,
       field
     }, event.ctrlKey || event.metaKey);
-    const virtualScrollerRect = (_apiRef$current$virtu3 = apiRef.current.virtualScrollerRef) == null || (_apiRef$current$virtu3 = _apiRef$current$virtu3.current) == null ? void 0 : _apiRef$current$virtu3.getBoundingClientRect();
+    const virtualScrollerRect = apiRef.current.virtualScrollerRef?.current?.getBoundingClientRect();
     if (!virtualScrollerRect) {
       return;
     }
@@ -357,8 +349,7 @@ export const useGridCellSelection = (apiRef, props) => {
     }
   }, [apiRef, props.cellSelectionModel]);
   React.useEffect(() => {
-    var _apiRef$current$rootE4;
-    const rootRef = (_apiRef$current$rootE4 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE4.current;
+    const rootRef = apiRef.current.rootElementRef?.current;
     return () => {
       stopAutoScroll();
       const document = ownerDocument(rootRef);
@@ -455,7 +446,8 @@ export const useGridCellSelection = (apiRef, props) => {
           const cellParams = apiRef.current.getCellParams(rowId, field);
           cellData = serializeCellValue(cellParams, {
             delimiterCharacter: clipboardCopyCellDelimiter,
-            ignoreValueFormatter
+            ignoreValueFormatter,
+            shouldAppendQuotes: true
           });
         } else {
           cellData = '';

package/esm/hooks/features/clipboard/useGridClipboardImport.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GRID_CHECKBOX_SELECTION_FIELD, gridFocusCellSelector, gridVisibleColumnFieldsSelector, useGridApiOptionHandler, useGridApiEventHandler, gridPaginatedVisibleSortedGridRowIdsSelector, gridExpandedSortedRowIdsSelector } from '@mui/x-data-grid';
-import { buildWarning, getRowIdFromRowModel, getActiveElement, useGridRegisterPipeProcessor, getPublicApiRef, isPasteShortcut } from '@mui/x-data-grid/internals';
+import { buildWarning, getRowIdFromRowModel, getActiveElement, useGridRegisterPipeProcessor, getPublicApiRef, isPasteShortcut, useGridLogger } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_REORDER_COL_DEF } from '@mui/x-data-grid-pro';
 import { unstable_debounce as debounce } from '@mui/utils';
-const missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
+const missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
 const columnFieldsToExcludeFromPaste = [GRID_CHECKBOX_SELECTION_FIELD, GRID_REORDER_COL_DEF.field, GRID_DETAIL_PANEL_TOGGLE_FIELD];
 
 // Batches rows that are updated during clipboard paste to reduce `updateRows` calls
@@ -33,9 +33,8 @@ async function getTextFromClipboard(rootEl) {
     el.style.top = '0';
     el.style.left = '0';
     const handlePasteEvent = event => {
-      var _event$clipboardData;
       el.removeEventListener('paste', handlePasteEvent);
-      const text = (_event$clipboardData = event.clipboardData) == null ? void 0 : _event$clipboardData.getData('text/plain');
+      const text = event.clipboardData?.getData('text/plain');
       if (focusedCell instanceof HTMLElement) {
         focusedCell.focus({
           preventScroll: true
@@ -236,13 +235,17 @@ function defaultPasteResolver({
   });
 }
 export const useGridClipboardImport = (apiRef, props) => {
-  var _apiRef$current$rootE;
   const processRowUpdate = props.processRowUpdate;
   const onProcessRowUpdateError = props.onProcessRowUpdateError;
   const getRowId = props.getRowId;
   const enableClipboardPaste = !props.disableClipboardPaste;
-  const rootEl = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE.current;
+  const rootEl = apiRef.current.rootElementRef?.current;
+  const logger = useGridLogger(apiRef, 'useGridClipboardImport');
   const splitClipboardPastedText = props.splitClipboardPastedText;
+  const {
+    pagination,
+    onBeforeClipboardPasteStart
+  } = props;
   const handlePaste = React.useCallback(async (params, event) => {
     if (!enableClipboardPaste) {
       return;
@@ -269,6 +272,16 @@ export const useGridClipboardImport = (apiRef, props) => {
     if (!pastedData) {
       return;
     }
+    if (onBeforeClipboardPasteStart) {
+      try {
+        await onBeforeClipboardPasteStart({
+          data: pastedData
+        });
+      } catch (error) {
+        logger.debug('Clipboard paste operation cancelled');
+        return;
+      }
+    }
     const cellUpdater = new CellValueUpdater({
       apiRef,
       processRowUpdate,
@@ -284,10 +297,10 @@ export const useGridClipboardImport = (apiRef, props) => {
       updateCell: (...args) => {
         cellUpdater.updateCell(...args);
       },
-      pagination: props.pagination
+      pagination
     });
     cellUpdater.applyUpdates();
-  }, [apiRef, processRowUpdate, onProcessRowUpdateError, getRowId, enableClipboardPaste, rootEl, splitClipboardPastedText, props.pagination]);
+  }, [apiRef, processRowUpdate, onProcessRowUpdateError, getRowId, enableClipboardPaste, rootEl, splitClipboardPastedText, pagination, onBeforeClipboardPasteStart, logger]);
   const checkIfCanStartEditing = React.useCallback((initialValue, {
     event
   }) => {

package/esm/hooks/features/export/serializer/excelSerializer.js

@@ -2,9 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from '@mui/x-data-grid-pro';
 import { buildWarning, isObject, isSingleSelectColDef } from '@mui/x-data-grid/internals';
 const getExcelJs = async () => {
-  var _excelJsModule$defaul;
   const excelJsModule = await import('exceljs');
-  return (_excelJsModule$defaul = excelJsModule.default) != null ? _excelJsModule$defaul : excelJsModule;
+  return excelJsModule.default ?? excelJsModule;
 };
 const warnInvalidFormattedValue = buildWarning(['MUI X: When the value of a field is an object or a `renderCell` is provided, the Excel export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
 const getFormattedValueOptions = (colDef, row, valueOptions, api) => {
@@ -85,7 +84,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
             }
           }
           if (isObject(formattedValue)) {
-            row[castColumn.field] = formattedValue == null ? void 0 : formattedValue.label;
+            row[castColumn.field] = formattedValue?.label;
           } else {
             row[castColumn.field] = formattedValue;
           }
@@ -138,28 +137,24 @@ const defaultColumnsStyles = {
   }
 };
 export const serializeColumn = (column, columnsStyles) => {
-  var _column$headerName;
   const {
     field,
     type
   } = column;
   return {
     key: field,
-    headerText: (_column$headerName = column.headerName) != null ? _column$headerName : column.field,
+    headerText: column.headerName ?? column.field,
     // Excel width must stay between 0 and 255 (https://support.microsoft.com/en-us/office/change-the-column-width-and-row-height-72f5e3cc-994d-43e8-ae58-9774a0905f46)
     // From the example of column width behavior (https://docs.microsoft.com/en-US/office/troubleshoot/excel/determine-column-widths#example-of-column-width-behavior)
     // a value of 10 corresponds to 75px. This is an approximation, because column width depends on the font-size
     width: Math.min(255, column.width ? column.width / 7.5 : 8.43),
-    style: _extends({}, type && (defaultColumnsStyles == null ? void 0 : defaultColumnsStyles[type]), columnsStyles == null ? void 0 : columnsStyles[field])
+    style: _extends({}, type && defaultColumnsStyles?.[type], columnsStyles?.[field])
   };
 };
 const addColumnGroupingHeaders = (worksheet, columns, columnGroupPaths, columnGroupDetails) => {
   const maxDepth = Math.max(...columns.map(({
     key
-  }) => {
-    var _columnGroupPaths$key, _columnGroupPaths$key2;
-    return (_columnGroupPaths$key = (_columnGroupPaths$key2 = columnGroupPaths[key]) == null ? void 0 : _columnGroupPaths$key2.length) != null ? _columnGroupPaths$key : 0;
-  }));
+  }) => columnGroupPaths[key]?.length ?? 0));
   if (maxDepth === 0) {
     return;
   }
@@ -178,10 +173,7 @@ const addColumnGroupingHeaders = (worksheet, columns, columnGroupPaths, columnGr
         parents: groupingPath.slice(0, rowIndex)
       });
     });
-    const newRow = worksheet.addRow(row.map(group => {
-      var _group$headerName;
-      return group.groupId === null ? null : (_group$headerName = group == null ? void 0 : group.headerName) != null ? _group$headerName : group.groupId;
-    }));
+    const newRow = worksheet.addRow(row.map(group => group.groupId === null ? null : group?.headerName ?? group.groupId));
 
     // use `rowCount`, since worksheet can have additional rows added in `exceljsPreProcess`
     const lastRowIndex = newRow.worksheet.rowCount;
@@ -226,10 +218,9 @@ export async function getDataForValueOptionsSheet(columns, valueOptionsSheetName
     key: column.field
   }));
   return candidateColumns.reduce((acc, column) => {
-    var _column$headerName2;
     const singleSelectColumn = column;
     const formattedValueOptions = getFormattedValueOptions(singleSelectColumn, {}, singleSelectColumn.valueOptions, api);
-    const header = (_column$headerName2 = column.headerName) != null ? _column$headerName2 : column.field;
+    const header = column.headerName ?? column.field;
     const values = [header, ...formattedValueOptions];
     const letter = worksheet.getColumn(column.field).letter;
     const address = `${valueOptionsSheetName}!$${letter}$2:$${letter}$${values.length}`;
@@ -305,10 +296,7 @@ export async function buildExcel(options, api) {
     addColumnGroupingHeaders(worksheet, serializedColumns, columnGroupPaths, api.getAllGroupDetails());
   }
   if (includeHeaders) {
-    worksheet.addRow(columns.map(column => {
-      var _column$headerName3;
-      return (_column$headerName3 = column.headerName) != null ? _column$headerName3 : column.field;
-    }));
+    worksheet.addRow(columns.map(column => column.headerName ?? column.field));
   }
   const valueOptionsData = await getDataForValueOptionsSheet(columns, valueOptionsSheetName, api);
   createValueOptionsSheetIfNeeded(valueOptionsData, valueOptionsSheetName, workbook);
@@ -327,7 +315,6 @@ export async function buildExcel(options, api) {
 export function setupExcelExportWebWorker(workerOptions = {}) {
   // eslint-disable-next-line no-restricted-globals
   addEventListener('message', async event => {
-    var _options$includeHeade;
     const {
       serializedColumns,
       serializedRows,
@@ -354,7 +341,7 @@ export function setupExcelExportWebWorker(workerOptions = {}) {
     if (options.includeColumnGroupsHeaders) {
       addColumnGroupingHeaders(worksheet, serializedColumns, columnGroupPaths, columnGroupDetails);
     }
-    const includeHeaders = (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true;
+    const includeHeaders = options.includeHeaders ?? true;
     if (includeHeaders) {
       worksheet.addRow(serializedColumns.map(column => column.headerText));
     }

package/esm/hooks/features/export/useGridExcelExport.js

@@ -17,9 +17,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const useGridExcelExport = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridExcelExport');
   const getDataAsExcel = React.useCallback((options = {}) => {
-    var _options$getRowsToExp, _options$includeHeade, _options$includeColum;
     logger.debug(`Get data as excel`);
-    const getRowsToExport = (_options$getRowsToExp = options.getRowsToExport) != null ? _options$getRowsToExp : defaultGetRowsToExport;
+    const getRowsToExport = options.getRowsToExport ?? defaultGetRowsToExport;
     const exportedRowIds = getRowsToExport({
       apiRef
     });
@@ -30,12 +29,12 @@ export const useGridExcelExport = (apiRef, props) => {
     return buildExcel({
       columns: exportedColumns,
       rowIds: exportedRowIds,
-      includeHeaders: (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true,
-      includeColumnGroupsHeaders: (_options$includeColum = options.includeColumnGroupsHeaders) != null ? _options$includeColum : true,
-      valueOptionsSheetName: (options == null ? void 0 : options.valueOptionsSheetName) || 'Options',
-      columnsStyles: options == null ? void 0 : options.columnsStyles,
-      exceljsPreProcess: options == null ? void 0 : options.exceljsPreProcess,
-      exceljsPostProcess: options == null ? void 0 : options.exceljsPostProcess
+      includeHeaders: options.includeHeaders ?? true,
+      includeColumnGroupsHeaders: options.includeColumnGroupsHeaders ?? true,
+      valueOptionsSheetName: options?.valueOptionsSheetName || 'Options',
+      columnsStyles: options?.columnsStyles,
+      exceljsPreProcess: options?.exceljsPreProcess,
+      exceljsPostProcess: options?.exceljsPostProcess
     }, apiRef.current);
   }, [logger, apiRef]);
   const exportDataAsExcel = React.useCallback(async (options = {}) => {
@@ -51,7 +50,7 @@ export const useGridExcelExport = (apiRef, props) => {
       const blob = new Blob([buffer], {
         type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
       });
-      exportAs(blob, 'xlsx', options == null ? void 0 : options.fileName);
+      exportAs(blob, 'xlsx', options?.fileName);
     };
     if (!workerFn) {
       apiRef.current.publishEvent('excelExportStateChange', 'pending');
@@ -114,8 +113,7 @@ export const useGridExcelExport = (apiRef, props) => {
    * PRE-PROCESSING
    */
   const addExportMenuButtons = React.useCallback((initialValue, options) => {
-    var _options$excelOptions;
-    if ((_options$excelOptions = options.excelOptions) != null && _options$excelOptions.disableToolbarButton) {
+    if (options.excelOptions?.disableToolbarButton) {
       return initialValue;
     }
     return [...initialValue, {

package/esm/hooks/features/rowGrouping/createGroupingColDef.js

@@ -26,10 +26,9 @@ const GROUPING_COL_DEF_FORCED_PROPERTIES = {
  * TODO: Make this index comparator depth invariant, the logic should not be inverted when sorting in the "desc" direction (but the current return format of `sortComparator` does not support this behavior).
  */
 const groupingFieldIndexComparator = (v1, v2, cellParams1, cellParams2) => {
-  var _groupingField, _groupingField2;
   const model = gridRowGroupingSanitizedModelSelector(cellParams1.api.state, cellParams1.api.instanceId);
-  const groupingField1 = (_groupingField = cellParams1.rowNode.groupingField) != null ? _groupingField : null;
-  const groupingField2 = (_groupingField2 = cellParams2.rowNode.groupingField) != null ? _groupingField2 : null;
+  const groupingField1 = cellParams1.rowNode.groupingField ?? null;
+  const groupingField2 = cellParams2.rowNode.groupingField ?? null;
   if (groupingField1 === groupingField2) {
     return 0;
   }
@@ -44,23 +43,20 @@ const groupingFieldIndexComparator = (v1, v2, cellParams1, cellParams2) => {
   }
   return 1;
 };
-const getLeafProperties = leafColDef => {
-  var _leafColDef$headerNam;
-  return {
-    headerName: (_leafColDef$headerNam = leafColDef.headerName) != null ? _leafColDef$headerNam : leafColDef.field,
-    sortable: leafColDef.sortable,
-    filterable: leafColDef.filterable,
-    valueOptions: isSingleSelectColDef(leafColDef) ? leafColDef.valueOptions : undefined,
-    filterOperators: leafColDef.filterOperators,
-    sortComparator: (v1, v2, cellParams1, cellParams2) => {
-      // We only want to sort the leaves
-      if (cellParams1.rowNode.type === 'leaf' && cellParams2.rowNode.type === 'leaf') {
-        return leafColDef.sortComparator(v1, v2, cellParams1, cellParams2);
-      }
-      return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2);
+const getLeafProperties = leafColDef => ({
+  headerName: leafColDef.headerName ?? leafColDef.field,
+  sortable: leafColDef.sortable,
+  filterable: leafColDef.filterable,
+  valueOptions: isSingleSelectColDef(leafColDef) ? leafColDef.valueOptions : undefined,
+  filterOperators: leafColDef.filterOperators,
+  sortComparator: (v1, v2, cellParams1, cellParams2) => {
+    // We only want to sort the leaves
+    if (cellParams1.rowNode.type === 'leaf' && cellParams2.rowNode.type === 'leaf') {
+      return leafColDef.sortComparator(v1, v2, cellParams1, cellParams2);
     }
-  };
-};
+    return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2);
+  }
+});
 const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
   const properties = {
     sortable: groupedByColDef.sortable,
@@ -68,16 +64,16 @@ const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
     valueOptions: isSingleSelectColDef(groupedByColDef) ? groupedByColDef.valueOptions : undefined,
     sortComparator: (v1, v2, cellParams1, cellParams2) => {
       // We only want to sort the groups of the current grouping criteria
-      if (cellParams1.rowNode.type === 'group' && cellParams1.rowNode.groupingField === groupedByColDef.field && cellParams2.rowNode.type === 'group' && cellParams2.rowNode.groupingField === groupedByColDef.field) {
-        return groupedByColDef.sortComparator(v1, v2, cellParams1, cellParams2);
+      if (cellParams1.rowNode.type === 'group' && cellParams2.rowNode.type === 'group' && cellParams1.rowNode.groupingField === cellParams2.rowNode.groupingField) {
+        const colDef = cellParams1.api.getColumn(cellParams1.rowNode.groupingField);
+        return colDef.sortComparator(v1, v2, cellParams1, cellParams2);
       }
       return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2);
     },
     filterOperators: groupedByColDef.filterOperators
   };
   if (applyHeaderName) {
-    var _groupedByColDef$head;
-    properties.headerName = (_groupedByColDef$head = groupedByColDef.headerName) != null ? _groupedByColDef$head : groupedByColDef.field;
+    properties.headerName = groupedByColDef.headerName ?? groupedByColDef.field;
   }
   return properties;
 };
@@ -90,8 +86,7 @@ export const createGroupingColDefForOneGroupingCriteria = ({
   groupingCriteria,
   colDefOverride
 }) => {
-  var _groupedByColDef$widt, _leafColDef$width;
-  const _ref = colDefOverride != null ? colDefOverride : {},
+  const _ref = colDefOverride ?? {},
     {
       leafField,
       mainGroupingCriteria,
@@ -102,7 +97,7 @@ export const createGroupingColDefForOneGroupingCriteria = ({
 
   // The properties that do not depend on the presence of a `leafColDef` and that can be overridden by `colDefOverride`
   const commonProperties = {
-    width: Math.max(((_groupedByColDef$widt = groupedByColDef.width) != null ? _groupedByColDef$widt : GRID_STRING_COL_DEF.width) + 40, (_leafColDef$width = leafColDef == null ? void 0 : leafColDef.width) != null ? _leafColDef$width : 0),
+    width: Math.max((groupedByColDef.width ?? GRID_STRING_COL_DEF.width) + 40, leafColDef?.width ?? 0),
     renderCell: params => {
       // Render footer
       if (params.rowNode.type === 'footer' || params.rowNode.type === 'pinnedRow') {
@@ -183,8 +178,7 @@ export const createGroupingColDefForAllGroupingCriteria = ({
   rowGroupingModel,
   colDefOverride
 }) => {
-  var _leafColDef$width2;
-  const _ref2 = colDefOverride != null ? colDefOverride : {},
+  const _ref2 = colDefOverride ?? {},
     {
       leafField,
       mainGroupingCriteria,
@@ -196,10 +190,7 @@ export const createGroupingColDefForAllGroupingCriteria = ({
   // The properties that do not depend on the presence of a `leafColDef` and that can be overridden by `colDefOverride`
   const commonProperties = {
     headerName: apiRef.current.getLocaleText('groupingColumnHeaderName'),
-    width: Math.max(...rowGroupingModel.map(field => {
-      var _columnsLookup$field$;
-      return ((_columnsLookup$field$ = columnsLookup[field].width) != null ? _columnsLookup$field$ : GRID_STRING_COL_DEF.width) + 40;
-    }), (_leafColDef$width2 = leafColDef == null ? void 0 : leafColDef.width) != null ? _leafColDef$width2 : 0),
+    width: Math.max(...rowGroupingModel.map(field => (columnsLookup[field].width ?? GRID_STRING_COL_DEF.width) + 40), leafColDef?.width ?? 0),
     renderCell: params => {
       // Render footer
       if (params.rowNode.type === 'footer' || params.rowNode.type === 'pinnedRow') {

package/esm/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -142,13 +142,10 @@ export const getCellGroupingCriteria = ({
 export const getGroupingRules = ({
   sanitizedRowGroupingModel,
   columnsLookup
-}) => sanitizedRowGroupingModel.map(field => {
-  var _columnsLookup$field;
-  return {
-    field,
-    groupingValueGetter: (_columnsLookup$field = columnsLookup[field]) == null ? void 0 : _columnsLookup$field.groupingValueGetter
-  };
-});
+}) => sanitizedRowGroupingModel.map(field => ({
+  field,
+  groupingValueGetter: columnsLookup[field]?.groupingValueGetter
+}));
 
 /**
  * Compares two sets of grouping rules to determine if they are equal or not.