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

package/esm/components/GridColumnMenuRowGroupItem.js

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

package/esm/components/GridColumnMenuRowUngroupItem.js

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

package/esm/components/GridExcelExportMenuItem.js

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

package/esm/components/GridGroupingColumnLeafCell.js

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

package/esm/components/GridGroupingCriteriaCell.js

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

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

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

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

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

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

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

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

@@ -1,15 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { ownerDocument, useEventCallback } from '@mui/material/utils';
-import { 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 } from '@mui/x-data-grid-pro';
+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;
 }
@@ -23,8 +20,10 @@ export const useGridCellSelection = (apiRef, props) => {
   const mousePosition = React.useRef(null);
   const autoScrollRAF = React.useRef();
   const sortedRowIds = useGridSelector(apiRef, gridSortedRowIdsSelector);
+  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',
@@ -120,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;
@@ -146,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
     });
@@ -165,20 +162,14 @@ export const useGridCellSelection = (apiRef, props) => {
     };
   }, []);
   const startAutoScroll = React.useCallback(() => {
-    var _apiRef$current$virtu, _apiRef$current$virtu2;
     if (autoScrollRAF.current) {
       return;
     }
-    if (!((_apiRef$current$virtu = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu.current)) {
-      return;
-    }
-    const virtualScrollerRect = (_apiRef$current$virtu2 = apiRef.current.virtualScrollerRef) == null || (_apiRef$current$virtu2 = _apiRef$current$virtu2.current) == null ? void 0 : _apiRef$current$virtu2.getBoundingClientRect();
-    if (!virtualScrollerRect) {
+    if (!apiRef.current.virtualScrollerRef?.current) {
       return;
     }
     function autoScroll() {
-      var _apiRef$current$virtu3;
-      if (!mousePosition.current || !((_apiRef$current$virtu3 = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu3.current)) {
+      if (!mousePosition.current || !apiRef.current.virtualScrollerRef?.current) {
         return;
       }
       const {
@@ -188,11 +179,10 @@ export const useGridCellSelection = (apiRef, props) => {
       const {
         height,
         width
-      } = virtualScrollerRect;
+      } = dimensions.viewportInnerSize;
       let deltaX = 0;
       let deltaY = 0;
       let factor = 0;
-      const dimensions = apiRef.current.getRootDimensions();
       if (mouseY <= AUTO_SCROLL_SENSITIVITY && dimensions.hasScrollY) {
         // When scrolling up, the multiplier increases going closer to the top edge
         factor = (AUTO_SCROLL_SENSITIVITY - mouseY) / -AUTO_SCROLL_SENSITIVITY;
@@ -223,9 +213,8 @@ export const useGridCellSelection = (apiRef, props) => {
       autoScrollRAF.current = requestAnimationFrame(autoScroll);
     }
     autoScroll();
-  }, [apiRef]);
+  }, [apiRef, dimensions]);
   const handleCellMouseOver = React.useCallback((params, event) => {
-    var _apiRef$current$virtu4;
     if (!lastMouseDownCell.current) {
       return;
     }
@@ -237,18 +226,20 @@ export const useGridCellSelection = (apiRef, props) => {
       id,
       field
     }, event.ctrlKey || event.metaKey);
-    const virtualScrollerRect = (_apiRef$current$virtu4 = apiRef.current.virtualScrollerRef) == null || (_apiRef$current$virtu4 = _apiRef$current$virtu4.current) == null ? void 0 : _apiRef$current$virtu4.getBoundingClientRect();
+    const virtualScrollerRect = apiRef.current.virtualScrollerRef?.current?.getBoundingClientRect();
     if (!virtualScrollerRect) {
       return;
     }
     const {
-      height,
-      width,
       x,
       y
     } = virtualScrollerRect;
+    const {
+      height,
+      width
+    } = dimensions.viewportInnerSize;
     const mouseX = event.clientX - x;
-    const mouseY = event.clientY - y;
+    const mouseY = event.clientY - y - totalHeaderHeight;
     mousePosition.current = {
       x: mouseX,
       y: mouseY
@@ -263,7 +254,7 @@ export const useGridCellSelection = (apiRef, props) => {
       // Mouse has left the sensitivity area while auto scroll is on
       stopAutoScroll();
     }
-  }, [apiRef, startAutoScroll, stopAutoScroll]);
+  }, [apiRef, startAutoScroll, stopAutoScroll, totalHeaderHeight, dimensions]);
   const handleCellClick = useEventCallback((params, event) => {
     const {
       id,
@@ -358,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);
@@ -456,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, {