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

package/hooks/features/density/useGridDensity.js

@@ -1,43 +1,35 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridDensitySelector } from './densitySelector';
-import { isDeepEqual } from '../../../utils/utils';
-export const COMPACT_DENSITY_FACTOR = 0.7;
-export const COMFORTABLE_DENSITY_FACTOR = 1.3;
-const DENSITY_FACTORS = {
-  compact: COMPACT_DENSITY_FACTOR,
-  comfortable: COMFORTABLE_DENSITY_FACTOR,
-  standard: 1
-};
 export const densityStateInitializer = (state, props) => _extends({}, state, {
-  density: {
-    value: props.density,
-    factor: DENSITY_FACTORS[props.density]
-  }
+  density: props.initialState?.density ?? props.density ?? 'standard'
 });
 export const useGridDensity = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useDensity');
-  const setDensity = React.useCallback(newDensity => {
+  apiRef.current.registerControlState({
+    stateId: 'density',
+    propModel: props.density,
+    propOnChange: props.onDensityChange,
+    stateSelector: gridDensitySelector,
+    changeEvent: 'densityChange'
+  });
+  const setDensity = useEventCallback(newDensity => {
+    const currentDensity = gridDensitySelector(apiRef.current.state);
+    if (currentDensity === newDensity) {
+      return;
+    }
     logger.debug(`Set grid density to ${newDensity}`);
-    apiRef.current.setState(state => {
-      const currentDensityState = gridDensitySelector(state);
-      const newDensityState = {
-        value: newDensity,
-        factor: DENSITY_FACTORS[newDensity]
-      };
-      if (isDeepEqual(currentDensityState, newDensityState)) {
-        return state;
-      }
-      return _extends({}, state, {
-        density: newDensityState
-      });
-    });
-    apiRef.current.forceUpdate();
-  }, [logger, apiRef]);
+    apiRef.current.setState(state => _extends({}, state, {
+      density: newDensity
+    }));
+  });
   React.useEffect(() => {
-    apiRef.current.setDensity(props.density);
+    if (props.density) {
+      apiRef.current.setDensity(props.density);
+    }
   }, [apiRef, props.density]);
   const densityApi = {
     setDensity

package/hooks/features/dimensions/useGridDimensions.d.ts

@@ -3,7 +3,7 @@ import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridDimensions } from './gridDimensionsApi';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
-type RootProps = Pick<DataGridProcessedProps, 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'getRowHeight' | 'rowHeight' | 'columnHeaderHeight'>;
+type RootProps = Pick<DataGridProcessedProps, 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'getRowHeight' | 'rowHeight' | 'resizeThrottleMs' | 'columnHeaderHeight'>;
 export type GridDimensionsState = GridDimensions;
 export declare const dimensionsStateInitializer: GridStateInitializer<RootProps>;
 export declare function useGridDimensions(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: RootProps): void;

package/hooks/features/dimensions/useGridDimensions.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_debounce as debounce, unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_ownerWindow as ownerWindow } from '@mui/utils';
+import { unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_ownerWindow as ownerWindow } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { throttle } from '../../../utils/throttle';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnsTotalWidthSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
 import { gridDimensionsSelector } from './gridDimensionsSelectors';
@@ -57,7 +58,7 @@ export function useGridDimensions(apiRef, props) {
   const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
   const [savedSize, setSavedSize] = React.useState();
-  const debouncedSetSavedSize = React.useMemo(() => debounce(setSavedSize, 60), []);
+  const debouncedSetSavedSize = React.useMemo(() => throttle(setSavedSize, props.resizeThrottleMs), [props.resizeThrottleMs]);
   const previousSize = React.useRef();
   const getRootDimensions = () => apiRef.current.state.dimensions;
   const setDimensions = useEventCallback(dimensions => {
@@ -66,7 +67,6 @@ export function useGridDimensions(apiRef, props) {
     }));
   });
   const resize = React.useCallback(() => {
-    var _previousSize$current, _previousSize$current2;
     const element = apiRef.current.mainElementRef.current;
     if (!element) {
       return;
@@ -74,8 +74,8 @@ export function useGridDimensions(apiRef, props) {
     const computedStyle = ownerWindow(element).getComputedStyle(element);
     const height = parseFloat(computedStyle.height) || 0;
     const width = parseFloat(computedStyle.width) || 0;
-    const hasHeightChanged = height !== ((_previousSize$current = previousSize.current) == null ? void 0 : _previousSize$current.height);
-    const hasWidthChanged = width !== ((_previousSize$current2 = previousSize.current) == null ? void 0 : _previousSize$current2.width);
+    const hasHeightChanged = height !== previousSize.current?.height;
+    const hasWidthChanged = width !== previousSize.current?.width;
     if (!previousSize.current || hasHeightChanged || hasWidthChanged) {
       const size = {
         width,
@@ -106,7 +106,6 @@ export function useGridDimensions(apiRef, props) {
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
   }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
   const updateDimensions = React.useCallback(() => {
-    var _apiRef$current$updat, _apiRef$current;
     const rootElement = apiRef.current.rootElementRef.current;
     const pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
     const scrollbarSize = measureScrollbarSize(rootElement, columnsTotalWidth, props.scrollbarSize);
@@ -191,7 +190,7 @@ export function useGridDimensions(apiRef, props) {
     if (newDimensions.viewportInnerSize.width !== prevDimensions.viewportInnerSize.width || newDimensions.viewportInnerSize.height !== prevDimensions.viewportInnerSize.height) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newDimensions.viewportInnerSize);
     }
-    (_apiRef$current$updat = (_apiRef$current = apiRef.current).updateRenderContext) == null || _apiRef$current$updat.call(_apiRef$current);
+    apiRef.current.updateRenderContext?.();
   }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
   const apiPublic = {
     resize,

package/hooks/features/editing/useGridCellEditing.js

@@ -14,7 +14,7 @@ import { buildWarning } from '../../../utils/warning';
 import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
 import { deepClone } from '../../../utils/utils';
 import { GridCellEditStartReasons, GridCellEditStopReasons } from '../../../models/params/gridEditCellParams';
-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');
 export const useGridCellEditing = (apiRef, props) => {
   const [cellModesModel, setCellModesModel] = React.useState({});
   const cellModesModelRef = React.useRef(cellModesModel);
@@ -339,7 +339,6 @@ export const useGridCellEditing = (apiRef, props) => {
     }
   });
   const setCellEditingEditCellValue = React.useCallback(async params => {
-    var _editingState$id;
     const {
       id,
       field,
@@ -389,7 +388,7 @@ export const useGridCellEditing = (apiRef, props) => {
     newProps.value = column.preProcessEditCellProps ? editingState[id][field].value : parsedValue;
     updateOrDeleteFieldState(id, field, newProps);
     editingState = gridEditRowsStateSelector(apiRef.current.state);
-    return !((_editingState$id = editingState[id]) != null && (_editingState$id = _editingState$id[field]) != null && _editingState$id.error);
+    return !editingState[id]?.[field]?.error;
   }, [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
   const getRowWithUpdatedValuesFromCellEditing = React.useCallback((id, field) => {
     const column = apiRef.current.getColumn(field);
@@ -432,9 +431,8 @@ export const useGridCellEditing = (apiRef, props) => {
 
     Object.entries(cellModesModel).forEach(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {
-        var _copyOfPrevCellModes$, _idToIdLookup$id;
-        const prevMode = ((_copyOfPrevCellModes$ = copyOfPrevCellModes[id]) == null || (_copyOfPrevCellModes$ = _copyOfPrevCellModes$[field]) == null ? void 0 : _copyOfPrevCellModes$.mode) || GridCellModes.View;
-        const originalId = (_idToIdLookup$id = idToIdLookup[id]) != null ? _idToIdLookup$id : id;
+        const prevMode = copyOfPrevCellModes[id]?.[field]?.mode || GridCellModes.View;
+        const originalId = idToIdLookup[id] ?? id;
         if (params.mode === GridCellModes.Edit && prevMode === GridCellModes.View) {
           updateStateToStartCellEditMode(_extends({
             id: originalId,

package/hooks/features/editing/useGridEditing.js

@@ -106,9 +106,8 @@ export const useGridEditing = (apiRef, props) => {
     return props.editMode === GridEditModes.Cell ? apiRef.current.getRowWithUpdatedValuesFromCellEditing(id, field) : apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
   }, [apiRef, props.editMode]);
   const getEditCellMeta = React.useCallback((id, field) => {
-    var _editingState$id$fiel, _editingState$id;
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
-    return (_editingState$id$fiel = (_editingState$id = editingState[id]) == null ? void 0 : _editingState$id[field]) != null ? _editingState$id$fiel : null;
+    return editingState[id]?.[field] ?? null;
   }, [apiRef]);
   const editingSharedApi = {
     isCellEditable,

package/hooks/features/editing/useGridRowEditing.js

@@ -16,7 +16,7 @@ import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
 import { deepClone } from '../../../utils/utils';
 import { GridRowEditStopReasons, GridRowEditStartReasons } from '../../../models/params/gridRowParams';
 import { GRID_ACTIONS_COLUMN_TYPE } from '../../../colDef';
-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');
 export const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
@@ -45,6 +45,10 @@ export const useGridRowEditing = (apiRef, props) => {
       throw new Error(`MUI X: The row with id=${id} is not in ${mode} mode.`);
     }
   }, [apiRef]);
+  const hasFieldsWithErrors = React.useCallback(rowId => {
+    const editingState = gridEditRowsStateSelector(apiRef.current.state);
+    return Object.values(editingState[rowId]).some(fieldProps => fieldProps.error);
+  }, [apiRef]);
   const handleCellDoubleClick = React.useCallback((params, event) => {
     if (!params.isEditable) {
       return;
@@ -76,8 +80,7 @@ export const useGridRowEditing = (apiRef, props) => {
     // focus we check if the next cell that received focus is from a different row.
     nextFocusedCell.current = null;
     focusTimeout.current = setTimeout(() => {
-      var _nextFocusedCell$curr;
-      if (((_nextFocusedCell$curr = nextFocusedCell.current) == null ? void 0 : _nextFocusedCell$curr.id) !== params.id) {
+      if (nextFocusedCell.current?.id !== params.id) {
         // The row might have been deleted during the click
         if (!apiRef.current.getRow(params.id)) {
           return;
@@ -87,6 +90,9 @@ export const useGridRowEditing = (apiRef, props) => {
         if (apiRef.current.getRowMode(params.id) === GridRowModes.View) {
           return;
         }
+        if (hasFieldsWithErrors(params.id)) {
+          return;
+        }
         const rowParams = apiRef.current.getRowParams(params.id);
         const newParams = _extends({}, rowParams, {
           field: params.field,
@@ -95,7 +101,7 @@ export const useGridRowEditing = (apiRef, props) => {
         apiRef.current.publishEvent('rowEditStop', newParams, event);
       }
     });
-  }, [apiRef]);
+  }, [apiRef, hasFieldsWithErrors]);
   React.useEffect(() => {
     return () => {
       clearTimeout(focusTimeout.current);
@@ -141,6 +147,9 @@ export const useGridRowEditing = (apiRef, props) => {
         }
       }
       if (reason) {
+        if (reason !== GridRowEditStopReasons.escapeKeyDown && hasFieldsWithErrors(params.id)) {
+          return;
+        }
         const newParams = _extends({}, apiRef.current.getRowParams(params.id), {
           reason,
           field: params.field
@@ -175,7 +184,7 @@ export const useGridRowEditing = (apiRef, props) => {
         apiRef.current.publishEvent('rowEditStart', newParams, event);
       }
     }
-  }, [apiRef]);
+  }, [apiRef, hasFieldsWithErrors]);
   const handleRowEditStart = React.useCallback(params => {
     const {
       id,
@@ -359,8 +368,7 @@ export const useGridRowEditing = (apiRef, props) => {
       prevRowModesModel.current[id].mode = GridRowModes.Edit;
       return;
     }
-    const hasSomeFieldWithError = Object.values(editingState[id]).some(fieldProps => fieldProps.error);
-    if (hasSomeFieldWithError) {
+    if (hasFieldsWithErrors(id)) {
       prevRowModesModel.current[id].mode = GridRowModes.Edit;
       // Revert the mode in the rowModesModel prop back to "edit"
       updateRowInRowModesModel(id, {
@@ -541,9 +549,8 @@ export const useGridRowEditing = (apiRef, props) => {
     prevRowModesModel.current = deepClone(rowModesModel); // Do a deep-clone because the attributes might be changed later
 
     Object.entries(rowModesModel).forEach(([id, params]) => {
-      var _copyOfPrevRowModesMo, _idToIdLookup$id;
-      const prevMode = ((_copyOfPrevRowModesMo = copyOfPrevRowModesModel[id]) == null ? void 0 : _copyOfPrevRowModesMo.mode) || GridRowModes.View;
-      const originalId = (_idToIdLookup$id = idToIdLookup[id]) != null ? _idToIdLookup$id : id;
+      const prevMode = copyOfPrevRowModesModel[id]?.mode || GridRowModes.View;
+      const originalId = idToIdLookup[id] ?? id;
       if (params.mode === GridRowModes.Edit && prevMode === GridRowModes.View) {
         updateStateToStartRowEditMode(_extends({
           id: originalId

package/hooks/features/export/serializers/csvSerializer.d.ts

@@ -6,6 +6,7 @@ import type { GridApiCommunity } from '../../../../models/api/gridApiCommunity';
 export declare const serializeCellValue: (cellParams: GridCellParams, options: {
     delimiterCharacter: string;
     ignoreValueFormatter: boolean;
+    shouldAppendQuotes: boolean;
 }) => any;
 interface BuildCSVOptions {
     columns: GridStateColDef[];
@@ -15,6 +16,7 @@ interface BuildCSVOptions {
     includeColumnGroupsHeaders: NonNullable<GridCsvExportOptions['includeColumnGroupsHeaders']>;
     ignoreValueFormatter: boolean;
     apiRef: React.MutableRefObject<GridApiCommunity>;
+    shouldAppendQuotes: boolean;
 }
 export declare function buildCSV(options: BuildCSVOptions): string;
 export {};

package/hooks/features/export/serializers/csvSerializer.js

@@ -1,10 +1,13 @@
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { buildWarning } from '../../../../utils/warning';
-function sanitizeCellValue(value, delimiterCharacter) {
+function sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes) {
   if (typeof value === 'string') {
     // Make sure value containing delimiter or line break won't be split into multiple rows
     if ([delimiterCharacter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
-      return `"${value.replace(/"/g, '""')}"`;
+      if (shouldAppendQuotes) {
+        return `"${value.replace(/"/g, '""')}"`;
+      }
+      return `${value.replace(/"/g, '""')}`;
     }
     return value;
   }
@@ -13,18 +16,17 @@ function sanitizeCellValue(value, delimiterCharacter) {
 export const serializeCellValue = (cellParams, options) => {
   const {
     delimiterCharacter,
-    ignoreValueFormatter
+    ignoreValueFormatter,
+    shouldAppendQuotes
   } = options;
   let value;
   if (ignoreValueFormatter) {
-    var _cellParams$value2;
     const columnType = cellParams.colDef.type;
     if (columnType === 'number') {
       value = String(cellParams.value);
     } else if (columnType === 'date' || columnType === 'dateTime') {
-      var _cellParams$value;
-      value = (_cellParams$value = cellParams.value) == null ? void 0 : _cellParams$value.toISOString();
-    } else if (typeof ((_cellParams$value2 = cellParams.value) == null ? void 0 : _cellParams$value2.toString) === 'function') {
+      value = cellParams.value?.toISOString();
+    } else if (typeof cellParams.value?.toString === 'function') {
       value = cellParams.value.toString();
     } else {
       value = cellParams.value;
@@ -32,7 +34,7 @@ export const serializeCellValue = (cellParams, options) => {
   } else {
     value = cellParams.formattedValue;
   }
-  return sanitizeCellValue(value, delimiterCharacter);
+  return sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes);
 };
 const objectFormattedValueWarning = buildWarning(['MUI X: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
 class CSVRow {
@@ -49,7 +51,7 @@ class CSVRow {
     if (value === null || value === undefined) {
       this.rowString += '';
     } else if (typeof this.options.sanitizeCellValue === 'function') {
-      this.rowString += this.options.sanitizeCellValue(value, this.options.delimiterCharacter);
+      this.rowString += this.options.sanitizeCellValue(value, this.options.delimiterCharacter, this.options.shouldAppendQuotes);
     } else {
       this.rowString += value;
     }
@@ -64,10 +66,12 @@ const serializeRow = ({
   columns,
   getCellParams,
   delimiterCharacter,
-  ignoreValueFormatter
+  ignoreValueFormatter,
+  shouldAppendQuotes
 }) => {
   const row = new CSVRow({
-    delimiterCharacter
+    delimiterCharacter,
+    shouldAppendQuotes
   });
   columns.forEach(column => {
     const cellParams = getCellParams(id, column.field);
@@ -78,7 +82,8 @@ const serializeRow = ({
     }
     row.addValue(serializeCellValue(cellParams, {
       delimiterCharacter,
-      ignoreValueFormatter
+      ignoreValueFormatter,
+      shouldAppendQuotes
     }));
   });
   return row.getRowString();
@@ -91,14 +96,16 @@ export function buildCSV(options) {
     includeHeaders,
     includeColumnGroupsHeaders,
     ignoreValueFormatter,
-    apiRef
+    apiRef,
+    shouldAppendQuotes
   } = options;
   const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow({
     id,
     columns,
     getCellParams: apiRef.current.getCellParams,
     delimiterCharacter,
-    ignoreValueFormatter
+    ignoreValueFormatter,
+    shouldAppendQuotes
   })}\r\n`, '').trim();
   if (!includeHeaders) {
     return CSVBody;
@@ -117,7 +124,8 @@ export function buildCSV(options) {
     for (let i = 0; i < maxColumnGroupsDepth; i += 1) {
       const headerGroupRow = new CSVRow({
         delimiterCharacter,
-        sanitizeCellValue
+        sanitizeCellValue,
+        shouldAppendQuotes
       });
       headerRows.push(headerGroupRow);
       filteredColumns.forEach(column => {
@@ -129,7 +137,8 @@ export function buildCSV(options) {
   }
   const mainHeaderRow = new CSVRow({
     delimiterCharacter,
-    sanitizeCellValue
+    sanitizeCellValue,
+    shouldAppendQuotes
   });
   filteredColumns.forEach(column => {
     mainHeaderRow.addValue(column.headerName || column.field);

package/hooks/features/export/useGridCsvExport.js

@@ -17,15 +17,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const useGridCsvExport = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridCsvExport');
   const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
-  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.csvExport : ignoreValueFormatterProp) || false;
+  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.csvExport : ignoreValueFormatterProp) || false;
   const getDataAsCsv = React.useCallback((options = {}) => {
-    var _options$getRowsToExp, _options$includeHeade, _options$includeColum;
     logger.debug(`Get data as CSV`);
     const exportedColumns = getColumnsToExport({
       apiRef,
       options
     });
-    const getRowsToExport = (_options$getRowsToExp = options.getRowsToExport) != null ? _options$getRowsToExp : defaultGetRowsToExport;
+    const getRowsToExport = options.getRowsToExport ?? defaultGetRowsToExport;
     const exportedRowIds = getRowsToExport({
       apiRef
     });
@@ -33,19 +32,20 @@ export const useGridCsvExport = (apiRef, props) => {
       columns: exportedColumns,
       rowIds: exportedRowIds,
       delimiterCharacter: options.delimiter || ',',
-      includeHeaders: (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true,
-      includeColumnGroupsHeaders: (_options$includeColum = options.includeColumnGroupsHeaders) != null ? _options$includeColum : true,
+      includeHeaders: options.includeHeaders ?? true,
+      includeColumnGroupsHeaders: options.includeColumnGroupsHeaders ?? true,
       ignoreValueFormatter,
-      apiRef
+      apiRef,
+      shouldAppendQuotes: options.shouldAppendQuotes ?? true
     });
   }, [logger, apiRef, ignoreValueFormatter]);
   const exportDataAsCsv = React.useCallback(options => {
     logger.debug(`Export data as CSV`);
     const csv = getDataAsCsv(options);
-    const blob = new Blob([options != null && options.utf8WithBom ? new Uint8Array([0xef, 0xbb, 0xbf]) : '', csv], {
+    const blob = new Blob([options?.utf8WithBom ? new Uint8Array([0xef, 0xbb, 0xbf]) : '', csv], {
       type: 'text/csv'
     });
-    exportAs(blob, 'csv', options == null ? void 0 : options.fileName);
+    exportAs(blob, 'csv', options?.fileName);
   }, [logger, getDataAsCsv]);
   const csvExportApi = {
     getDataAsCsv,
@@ -57,8 +57,7 @@ export const useGridCsvExport = (apiRef, props) => {
    * PRE-PROCESSING
    */
   const addExportMenuButtons = React.useCallback((initialValue, options) => {
-    var _options$csvOptions;
-    if ((_options$csvOptions = options.csvOptions) != null && _options$csvOptions.disableToolbarButton) {
+    if (options.csvOptions?.disableToolbarButton) {
       return initialValue;
     }
     return [...initialValue, {

package/hooks/features/export/useGridPrintExport.js

@@ -75,7 +75,6 @@ export const useGridPrintExport = (apiRef, props) => {
     apiRef.current.setRows(newRows);
   }, [apiRef]);
   const handlePrintWindowLoad = React.useCallback((printWindow, options) => {
-    var _querySelector, _querySelector2;
     const normalizeOptions = _extends({
       copyStyles: true,
       hideToolbar: false,
@@ -96,16 +95,14 @@ export const useGridPrintExport = (apiRef, props) => {
 
     // See https://support.google.com/chrome/thread/191619088?hl=en&msgid=193009642
     gridClone.style.contain = 'size';
-    let gridToolbarElementHeight = ((_querySelector = gridRootElement.querySelector(`.${gridClasses.toolbarContainer}`)) == null ? void 0 : _querySelector.offsetHeight) || 0;
-    let gridFooterElementHeight = ((_querySelector2 = gridRootElement.querySelector(`.${gridClasses.footerContainer}`)) == null ? void 0 : _querySelector2.offsetHeight) || 0;
+    let gridToolbarElementHeight = gridRootElement.querySelector(`.${gridClasses.toolbarContainer}`)?.offsetHeight || 0;
+    let gridFooterElementHeight = gridRootElement.querySelector(`.${gridClasses.footerContainer}`)?.offsetHeight || 0;
     if (normalizeOptions.hideToolbar) {
-      var _gridClone$querySelec;
-      (_gridClone$querySelec = gridClone.querySelector(`.${gridClasses.toolbarContainer}`)) == null || _gridClone$querySelec.remove();
+      gridClone.querySelector(`.${gridClasses.toolbarContainer}`)?.remove();
       gridToolbarElementHeight = 0;
     }
     if (normalizeOptions.hideFooter) {
-      var _gridClone$querySelec2;
-      (_gridClone$querySelec2 = gridClone.querySelector(`.${gridClasses.footerContainer}`)) == null || _gridClone$querySelec2.remove();
+      gridClone.querySelector(`.${gridClasses.footerContainer}`)?.remove();
       gridFooterElementHeight = 0;
     }
 
@@ -186,13 +183,12 @@ export const useGridPrintExport = (apiRef, props) => {
     }
   }, [apiRef, doc, props.columnHeaderHeight]);
   const handlePrintWindowAfterPrint = React.useCallback(printWindow => {
-    var _previousGridState$cu;
     // Remove the print iframe
     doc.current.body.removeChild(printWindow);
 
     // Revert grid to previous state
     apiRef.current.restoreState(previousGridState.current || {});
-    if (!((_previousGridState$cu = previousGridState.current) != null && (_previousGridState$cu = _previousGridState$cu.columns) != null && _previousGridState$cu.columnVisibilityModel)) {
+    if (!previousGridState.current?.columns?.columnVisibilityModel) {
       // if the apiRef.current.exportState(); did not exported the column visibility, we update it
       apiRef.current.setColumnVisibilityModel(previousColumnVisibility.current);
     }
@@ -205,7 +201,6 @@ export const useGridPrintExport = (apiRef, props) => {
     previousRows.current = [];
   }, [apiRef]);
   const exportDataAsPrint = React.useCallback(async options => {
-    var _options$getRowsToExp;
     logger.debug(`Export data as Print`);
     if (!apiRef.current.rootElementRef.current) {
       throw new Error('MUI X: No grid root element available.');
@@ -229,11 +224,11 @@ export const useGridPrintExport = (apiRef, props) => {
       }));
       apiRef.current.forceUpdate();
     }
-    await updateGridColumnsForPrint(options == null ? void 0 : options.fields, options == null ? void 0 : options.allColumns, options == null ? void 0 : options.includeCheckboxes);
-    updateGridRowsForPrint((_options$getRowsToExp = options == null ? void 0 : options.getRowsToExport) != null ? _options$getRowsToExp : defaultGetRowsToExport);
+    await updateGridColumnsForPrint(options?.fields, options?.allColumns, options?.includeCheckboxes);
+    updateGridRowsForPrint(options?.getRowsToExport ?? defaultGetRowsToExport);
     apiRef.current.unstable_setVirtualization(false);
     await raf(); // wait for the state changes to take action
-    const printWindow = buildPrintWindow(options == null ? void 0 : options.fileName);
+    const printWindow = buildPrintWindow(options?.fileName);
     if (process.env.NODE_ENV === 'test') {
       doc.current.body.appendChild(printWindow);
       // In test env, run the all pipeline without waiting for loading
@@ -262,8 +257,7 @@ export const useGridPrintExport = (apiRef, props) => {
    * PRE-PROCESSING
    */
   const addExportMenuButtons = React.useCallback((initialValue, options) => {
-    var _options$printOptions;
-    if ((_options$printOptions = options.printOptions) != null && _options$printOptions.disableToolbarButton) {
+    if (options.printOptions?.disableToolbarButton) {
       return initialValue;
     }
     return [...initialValue, {

package/hooks/features/export/utils.js

@@ -21,14 +21,13 @@ export const getColumnsToExport = ({
 export const defaultGetRowsToExport = ({
   apiRef
 }) => {
-  var _pinnedRows$top, _pinnedRows$bottom;
   const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
   const rowTree = gridRowTreeSelector(apiRef);
   const selectedRows = apiRef.current.getSelectedRows();
   const bodyRows = filteredSortedRowIds.filter(id => rowTree[id].type !== 'footer');
   const pinnedRows = gridPinnedRowsSelector(apiRef);
-  const topPinnedRowsIds = (pinnedRows == null || (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.map(row => row.id)) || [];
-  const bottomPinnedRowsIds = (pinnedRows == null || (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.map(row => row.id)) || [];
+  const topPinnedRowsIds = pinnedRows?.top?.map(row => row.id) || [];
+  const bottomPinnedRowsIds = pinnedRows?.bottom?.map(row => row.id) || [];
   bodyRows.unshift(...topPinnedRowsIds);
   bodyRows.push(...bottomPinnedRowsIds);
   if (selectedRows.size > 0) {

package/hooks/features/filter/gridFilterSelector.js

@@ -74,10 +74,7 @@ export const gridFilteredSortedTopLevelRowEntriesSelector = createSelectorMemoiz
   if (rowTreeDepth < 2) {
     return visibleSortedRows;
   }
-  return visibleSortedRows.filter(row => {
-    var _rowTree$row$id;
-    return ((_rowTree$row$id = rowTree[row.id]) == null ? void 0 : _rowTree$row$id.depth) === 0;
-  });
+  return visibleSortedRows.filter(row => rowTree[row.id]?.depth === 0);
 });
 
 /**
@@ -96,24 +93,20 @@ export const gridFilteredTopLevelRowCountSelector = createSelector(gridFilteredS
  * @category Filtering
  * @ignore - do not document.
  */
-export const gridFilterActiveItemsSelector = createSelectorMemoized(gridFilterModelSelector, gridColumnLookupSelector, (filterModel, columnLookup) => {
-  var _filterModel$items;
-  return (_filterModel$items = filterModel.items) == null ? void 0 : _filterModel$items.filter(item => {
-    var _column$filterOperato, _item$value;
-    if (!item.field) {
-      return false;
-    }
-    const column = columnLookup[item.field];
-    if (!(column != null && column.filterOperators) || (column == null || (_column$filterOperato = column.filterOperators) == null ? void 0 : _column$filterOperato.length) === 0) {
-      return false;
-    }
-    const filterOperator = column.filterOperators.find(operator => operator.value === item.operator);
-    if (!filterOperator) {
-      return false;
-    }
-    return !filterOperator.InputComponent || item.value != null && ((_item$value = item.value) == null ? void 0 : _item$value.toString()) !== '';
-  });
-});
+export const gridFilterActiveItemsSelector = createSelectorMemoized(gridFilterModelSelector, gridColumnLookupSelector, (filterModel, columnLookup) => filterModel.items?.filter(item => {
+  if (!item.field) {
+    return false;
+  }
+  const column = columnLookup[item.field];
+  if (!column?.filterOperators || column?.filterOperators?.length === 0) {
+    return false;
+  }
+  const filterOperator = column.filterOperators.find(operator => operator.value === item.operator);
+  if (!filterOperator) {
+    return false;
+  }
+  return !filterOperator.InputComponent || item.value != null && item.value?.toString() !== '';
+}));
 /**
  * @category Filtering
  * @ignore - do not document.