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

package/hooks/features/columns/useGridColumns.js

@@ -10,19 +10,18 @@ import { hydrateColumnsWidth, createColumnsState, COLUMNS_DIMENSION_PROPERTIES }
 import { GridPreferencePanelsValue } from '../preferencesPanel';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const columnsStateInitializer = (state, props, apiRef) => {
-  var _props$initialState, _ref, _props$columnVisibili, _props$initialState2, _state$pinnedColumns;
   const columnsState = createColumnsState({
     apiRef,
     columnsToUpsert: props.columns,
-    initialState: (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.columns,
-    columnVisibilityModel: (_ref = (_props$columnVisibili = props.columnVisibilityModel) != null ? _props$columnVisibili : (_props$initialState2 = props.initialState) == null || (_props$initialState2 = _props$initialState2.columns) == null ? void 0 : _props$initialState2.columnVisibilityModel) != null ? _ref : {},
+    initialState: props.initialState?.columns,
+    columnVisibilityModel: props.columnVisibilityModel ?? props.initialState?.columns?.columnVisibilityModel ?? {},
     keepOnlyColumnsToUpsert: true
   });
   return _extends({}, state, {
     columns: columnsState,
     // In pro/premium, this part of the state is defined. We give it an empty but defined value
     // for the community version.
-    pinnedColumns: (_state$pinnedColumns = state.pinnedColumns) != null ? _state$pinnedColumns : EMPTY_PINNED_COLUMN_FIELDS
+    pinnedColumns: state.pinnedColumns ?? EMPTY_PINNED_COLUMN_FIELDS
   });
 };
 
@@ -32,7 +31,6 @@ export const columnsStateInitializer = (state, props, apiRef) => {
  * TODO: Impossible priority - useGridParamsApi also needs to be after useGridColumns
  */
 export function useGridColumns(apiRef, props) {
-  var _props$initialState4, _props$slotProps2;
   const logger = useGridLogger(apiRef, 'useGridColumns');
   const previousColumnsProp = React.useRef(props.columns);
   apiRef.current.registerControlState({
@@ -43,11 +41,10 @@ export function useGridColumns(apiRef, props) {
     changeEvent: 'columnVisibilityModelChange'
   });
   const setGridColumnsState = React.useCallback(columnsState => {
-    var _apiRef$current$updat, _apiRef$current;
     logger.debug('Updating columns state.');
     apiRef.current.setState(mergeColumnsState(columnsState));
     apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
-    (_apiRef$current$updat = (_apiRef$current = apiRef.current).updateRenderContext) == null || _apiRef$current$updat.call(_apiRef$current);
+    apiRef.current.updateRenderContext?.();
     apiRef.current.forceUpdate();
   }, [logger, apiRef]);
 
@@ -68,7 +65,6 @@ export function useGridColumns(apiRef, props) {
   const setColumnVisibilityModel = React.useCallback(model => {
     const currentModel = gridColumnVisibilityModelSelector(apiRef);
     if (currentModel !== model) {
-      var _apiRef$current$updat2, _apiRef$current2;
       apiRef.current.setState(state => _extends({}, state, {
         columns: createColumnsState({
           apiRef,
@@ -78,7 +74,7 @@ export function useGridColumns(apiRef, props) {
           keepOnlyColumnsToUpsert: false
         })
       }));
-      (_apiRef$current$updat2 = (_apiRef$current2 = apiRef.current).updateRenderContext) == null || _apiRef$current$updat2.call(_apiRef$current2);
+      apiRef.current.updateRenderContext?.();
       apiRef.current.forceUpdate();
     }
   }, [apiRef]);
@@ -92,9 +88,8 @@ export function useGridColumns(apiRef, props) {
     setGridColumnsState(columnsState);
   }, [apiRef, setGridColumnsState]);
   const setColumnVisibility = React.useCallback((field, isVisible) => {
-    var _columnVisibilityMode;
     const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
-    const isCurrentlyVisible = (_columnVisibilityMode = columnVisibilityModel[field]) != null ? _columnVisibilityMode : true;
+    const isCurrentlyVisible = columnVisibilityModel[field] ?? true;
     if (isVisible !== isCurrentlyVisible) {
       const newModel = _extends({}, columnVisibilityModel, {
         [field]: isVisible
@@ -167,7 +162,6 @@ export function useGridColumns(apiRef, props) {
    * PRE-PROCESSING
    */
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
-    var _props$initialState$c, _props$initialState3;
     const columnsStateToExport = {};
     const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
     const shouldExportColumnVisibilityModel =
@@ -177,7 +171,7 @@ export function useGridColumns(apiRef, props) {
     props.columnVisibilityModel != null ||
     // Always export if the model has been initialized
     // TODO v6 Do a nullish check instead to export even if the initial model equals "{}"
-    Object.keys((_props$initialState$c = (_props$initialState3 = props.initialState) == null || (_props$initialState3 = _props$initialState3.columns) == null ? void 0 : _props$initialState3.columnVisibilityModel) != null ? _props$initialState$c : {}).length > 0 ||
+    Object.keys(props.initialState?.columns?.columnVisibilityModel ?? {}).length > 0 ||
     // Always export if the model is not empty
     Object.keys(columnVisibilityModelToExport).length > 0;
     if (shouldExportColumnVisibilityModel) {
@@ -205,10 +199,9 @@ export function useGridColumns(apiRef, props) {
     return _extends({}, prevState, {
       columns: columnsStateToExport
     });
-  }, [apiRef, props.columnVisibilityModel, (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.columns]);
+  }, [apiRef, props.columnVisibilityModel, props.initialState?.columns]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
-    var _context$stateToResto;
-    const columnVisibilityModelToImport = (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel;
+    const columnVisibilityModelToImport = context.stateToRestore.columns?.columnVisibilityModel;
     const initialState = context.stateToRestore.columns;
     if (columnVisibilityModelToImport == null && initialState == null) {
       return params;
@@ -228,12 +221,11 @@ export function useGridColumns(apiRef, props) {
   }, [apiRef]);
   const preferencePanelPreProcessing = React.useCallback((initialValue, value) => {
     if (value === GridPreferencePanelsValue.columns) {
-      var _props$slotProps;
       const ColumnsPanel = props.slots.columnsPanel;
-      return /*#__PURE__*/_jsx(ColumnsPanel, _extends({}, (_props$slotProps = props.slotProps) == null ? void 0 : _props$slotProps.columnsPanel));
+      return /*#__PURE__*/_jsx(ColumnsPanel, _extends({}, props.slotProps?.columnsPanel));
     }
     return initialValue;
-  }, [props.slots.columnsPanel, (_props$slotProps2 = props.slotProps) == null ? void 0 : _props$slotProps2.columnsPanel]);
+  }, [props.slots.columnsPanel, props.slotProps?.columnsPanel]);
   const addColumnMenuItems = React.useCallback(columnMenuItems => {
     if (props.disableColumnSelector) {
       return columnMenuItems;

package/hooks/features/density/densitySelector.d.ts

@@ -1,4 +1,6 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
-export declare const gridDensitySelector: (state: GridStateCommunity) => import("./densityState").GridDensityState;
-export declare const gridDensityValueSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridDensity>;
+import { GridDensity } from '../../../models/gridDensity';
+export declare const COMPACT_DENSITY_FACTOR = 0.7;
+export declare const COMFORTABLE_DENSITY_FACTOR = 1.3;
+export declare const gridDensitySelector: (state: GridStateCommunity) => GridDensity;
 export declare const gridDensityFactorSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;

package/hooks/features/density/densitySelector.js

@@ -1,4 +1,10 @@
 import { createSelector } from '../../../utils/createSelector';
+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 gridDensitySelector = state => state.density;
-export const gridDensityValueSelector = createSelector(gridDensitySelector, density => density.value);
-export const gridDensityFactorSelector = createSelector(gridDensitySelector, density => density.factor);
+export const gridDensityFactorSelector = createSelector(gridDensitySelector, density => DENSITY_FACTORS[density]);

package/hooks/features/density/densityState.d.ts

@@ -1,5 +1,2 @@
 import { GridDensity } from '../../../models/gridDensity';
-export interface GridDensityState {
-    value: GridDensity;
-    factor: number;
-}
+export type GridDensityState = GridDensity;

package/hooks/features/density/useGridDensity.d.ts

@@ -2,7 +2,5 @@ import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
-export declare const COMPACT_DENSITY_FACTOR = 0.7;
-export declare const COMFORTABLE_DENSITY_FACTOR = 1.3;
-export declare const densityStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'density'>>;
-export declare const useGridDensity: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'density'>) => void;
+export declare const densityStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'initialState' | 'density'>>;
+export declare const useGridDensity: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'density' | 'onDensityChange'>) => void;

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.js

@@ -53,9 +53,7 @@ export function useGridDimensions(apiRef, props) {
   const rowHeight = Math.floor(props.rowHeight * densityFactor);
   const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
   const columnsTotalWidth = roundToDecimalPlaces(gridColumnsTotalWidthSelector(apiRef), 6);
-  // XXX: The `props as any` below is not resilient to change.
-  const hasHeaderFilters = Boolean(props.headerFilters);
-  const headersTotalHeight = getTotalHeaderHeight(apiRef, props.columnHeaderHeight) + Number(hasHeaderFilters) * headerHeight;
+  const headersTotalHeight = getTotalHeaderHeight(apiRef, props.columnHeaderHeight);
   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();
@@ -68,7 +66,6 @@ export function useGridDimensions(apiRef, props) {
     }));
   });
   const resize = React.useCallback(() => {
-    var _previousSize$current, _previousSize$current2;
     const element = apiRef.current.mainElementRef.current;
     if (!element) {
       return;
@@ -76,8 +73,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,
@@ -108,14 +105,14 @@ 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);
     const topContainerHeight = headersTotalHeight + pinnedRowsHeight.top;
     const bottomContainerHeight = pinnedRowsHeight.bottom;
+    const nonPinnedColumnsTotalWidth = columnsTotalWidth - leftPinnedWidth - rightPinnedWidth;
     const contentSize = {
-      width: columnsTotalWidth,
+      width: nonPinnedColumnsTotalWidth,
       height: rowsMeta.currentPageTotalHeight
     };
     let viewportOuterSize;
@@ -164,7 +161,7 @@ export function useGridDimensions(apiRef, props) {
     }
     const rowWidth = Math.max(viewportOuterSize.width, columnsTotalWidth + (hasScrollY ? scrollbarSize : 0));
     const minimumSize = {
-      width: contentSize.width,
+      width: columnsTotalWidth,
       height: topContainerHeight + contentSize.height + bottomContainerHeight
     };
     const newDimensions = {
@@ -192,7 +189,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);
@@ -234,8 +234,27 @@ export const useGridCellEditing = (apiRef, props) => {
       initialValue
     } = params;
     let newValue = apiRef.current.getCellValue(id, field);
-    if (deleteValue || initialValue) {
-      newValue = deleteValue ? '' : initialValue;
+    if (deleteValue) {
+      const fieldType = apiRef.current.getColumn(field).type;
+      switch (fieldType) {
+        case 'boolean':
+          newValue = false;
+          break;
+        case 'date':
+        case 'dateTime':
+        case 'number':
+          newValue = undefined;
+          break;
+        case 'singleSelect':
+          newValue = null;
+          break;
+        case 'string':
+        default:
+          newValue = '';
+          break;
+      }
+    } else if (initialValue) {
+      newValue = initialValue;
     }
     const newProps = {
       value: newValue,
@@ -320,7 +339,6 @@ export const useGridCellEditing = (apiRef, props) => {
     }
   });
   const setCellEditingEditCellValue = React.useCallback(async params => {
-    var _editingState$id;
     const {
       id,
       field,
@@ -370,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);
@@ -413,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);
@@ -76,8 +76,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;
@@ -541,9 +540,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, {