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

package/node/components/cell/GridActionsCell.js

@@ -137,7 +137,7 @@ function GridActionsCell(props) {
     }
     if (newIndex !== focusedButtonIndex) {
       event.preventDefault(); // Prevent scrolling
-      event.stopPropagation(); // Don't stop propagation for other keys, e.g. ArrowUp
+      event.stopPropagation(); // Don't stop propagation for other keys, for example ArrowUp
       setFocusedButtonIndex(newIndex);
     }
   };

package/node/components/cell/GridActionsCellItem.js

@@ -70,6 +70,10 @@ process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component
+   */
+  component: _propTypes.default.elementType,
   icon: _propTypes.default.element,
   label: _propTypes.default.string.isRequired,
   showInMenu: _propTypes.default.bool

package/node/components/cell/GridBooleanCell.js

@@ -15,7 +15,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _gridRowsUtils = require("../../hooks/features/rows/gridRowsUtils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex", "hideDescendantCount"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -85,6 +85,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
    * If true, the cell is the active element.
    */
   hasFocus: _propTypes.default.bool.isRequired,
+  hideDescendantCount: _propTypes.default.bool,
   /**
    * The grid row id.
    */
@@ -113,7 +114,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
 } : void 0;
 const GridBooleanCell = exports.GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
 const renderBooleanCell = params => {
-  if ((0, _gridRowsUtils.isAutoGeneratedRow)(params.rowNode)) {
+  if (params.field !== '__row_group_by_columns_group__' && (0, _gridRowsUtils.isAutoGeneratedRow)(params.rowNode)) {
     return '';
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridBooleanCell, (0, _extends2.default)({}, params));

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -161,7 +161,9 @@ function GridColumnHeaderItem(props) {
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
       elementToFocus?.focus();
-      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      if (apiRef.current.columnHeadersContainerRef?.current) {
+        apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      }
     }
   }, [apiRef, hasFocus]);
   const headerClassName = typeof colDef.headerClassName === 'function' ? colDef.headerClassName({

package/node/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -64,7 +64,9 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = /*#__P
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
       elementToFocus?.focus();
-      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      if (apiRef.current.columnHeadersContainerRef?.current) {
+        apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      }
     }
   }, [apiRef, hasFocus]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({

package/node/components/containers/GridRoot.js

@@ -47,11 +47,11 @@ const GridRoot = exports.GridRoot = /*#__PURE__*/React.forwardRef(function GridR
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
-  const densityValue = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityValueSelector);
+  const density = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensitySelector);
   const rootElementRef = apiRef.current.rootElementRef;
   const handleRef = (0, _utils.unstable_useForkRef)(rootElementRef, ref);
   const ownerState = (0, _extends2.default)({}, rootProps, {
-    density: densityValue
+    density
   });
   const classes = useUtilityClasses(ownerState);
 

package/node/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -107,7 +107,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
   focusElementRef: _utils.refType,
   /**
    * It is `true` if the filter either has a value or an operator with no value
-   * required is selected (e.g. `isEmpty`)
+   * required is selected (for example `isEmpty`)
    */
   isFilterActive: _propTypes.default.bool,
   item: _propTypes.default.shape({

package/node/components/panel/filterPanel/GridFilterInputDate.js

@@ -108,7 +108,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
    * It is `true` if the filter either has a value or an operator with no value
-   * required is selected (e.g. `isEmpty`)
+   * required is selected (for example `isEmpty`)
    */
   isFilterActive: _propTypes.default.bool,
   item: _propTypes.default.shape({

package/node/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -142,7 +142,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
    * It is `true` if the filter either has a value or an operator with no value
-   * required is selected (e.g. `isEmpty`)
+   * required is selected (for example `isEmpty`)
    */
   isFilterActive: _propTypes.default.bool,
   item: _propTypes.default.shape({

package/node/components/panel/filterPanel/GridFilterInputValue.js

@@ -95,7 +95,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
    * It is `true` if the filter either has a value or an operator with no value
-   * required is selected (e.g. `isEmpty`)
+   * required is selected (for example `isEmpty`)
    */
   isFilterActive: _propTypes.default.bool,
   item: _propTypes.default.shape({

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -30,7 +30,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
   const tooltipProps = slotProps.tooltip || {};
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const densityValue = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityValueSelector);
+  const density = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensitySelector);
   const densityButtonId = (0, _utils.unstable_useId)();
   const densityMenuId = (0, _utils.unstable_useId)();
   const [open, setOpen] = React.useState(false);
@@ -50,7 +50,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
     value: 'comfortable'
   }];
   const startIcon = React.useMemo(() => {
-    switch (densityValue) {
+    switch (density) {
       case 'compact':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.densityCompactIcon, {});
       case 'comfortable':
@@ -58,7 +58,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
       default:
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.densityStandardIcon, {});
     }
-  }, [densityValue, rootProps]);
+  }, [density, rootProps]);
   const handleDensitySelectorOpen = event => {
     setOpen(prevOpen => !prevOpen);
     buttonProps.onClick?.(event);
@@ -85,7 +85,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
   }
   const densityElements = densityOptions.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
     onClick: () => handleDensityUpdate(option.value),
-    selected: option.value === densityValue,
+    selected: option.value === density,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
       children: option.icon
     }), option.label]

package/node/components/toolbar/GridToolbarQuickFilter.js

@@ -8,19 +8,31 @@ exports.GridToolbarQuickFilter = GridToolbarQuickFilter;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _constants = require("../../constants");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _filter = require("../../hooks/features/filter");
 var _utils2 = require("../../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs"];
+const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs", "className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['toolbarQuickFilter']
+  };
+  return (0, _composeClasses.default)(slots, _constants.getDataGridUtilityClass, classes);
+};
 const GridToolbarQuickFilterRoot = (0, _styles.styled)(_TextField.default, {
   name: 'MuiDataGrid',
   slot: 'ToolbarQuickFilter',
@@ -56,11 +68,13 @@ const defaultSearchValueFormatter = values => values.join(' ');
 function GridToolbarQuickFilter(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
   const quickFilterValues = (0, _useGridSelector.useGridSelector)(apiRef, _filter.gridQuickFilterValuesSelector);
   const {
       quickFilterParser = defaultSearchValueParser,
       quickFilterFormatter = defaultSearchValueFormatter,
-      debounceMs = rootProps.filterDebounceMs
+      debounceMs = rootProps.filterDebounceMs,
+      className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues ?? []));
@@ -95,6 +109,7 @@ function GridToolbarQuickFilter(props) {
     variant: "standard",
     value: searchValue,
     onChange: handleSearchValueChange,
+    className: (0, _clsx.default)(className, classes.root),
     placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
     "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
     type: "search"

package/node/hooks/features/clipboard/useGridClipboard.js

@@ -75,7 +75,8 @@ const useGridClipboard = (apiRef, props) => {
       textToCopy = apiRef.current.getDataAsCsv({
         includeHeaders: false,
         // TODO: make it configurable
-        delimiter: clipboardCopyCellDelimiter
+        delimiter: clipboardCopyCellDelimiter,
+        shouldAppendQuotes: false
       });
     } else {
       const focusedCell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
@@ -83,7 +84,8 @@ const useGridClipboard = (apiRef, props) => {
         const cellParams = apiRef.current.getCellParams(focusedCell.id, focusedCell.field);
         textToCopy = (0, _csvSerializer.serializeCellValue)(cellParams, {
           delimiterCharacter: clipboardCopyCellDelimiter,
-          ignoreValueFormatter
+          ignoreValueFormatter,
+          shouldAppendQuotes: false
         });
       }
     }

package/node/hooks/features/columnResize/useGridColumnResize.js

@@ -135,7 +135,7 @@ function excludeOutliers(inputValues, factor) {
   const iqr = q3 - q1;
 
   // We make a small adjustment if `iqr < 5` for the cases where the IQR is
-  // very small (e.g. zero) due to very close by values in the input data.
+  // very small (for example zero) due to very close by values in the input data.
   // Otherwise, with an IQR of `0`, anything outside that would be considered
   // an outlier, but it makes more sense visually to allow for this 5px variance
   // rather than showing a cropped cell.

package/node/hooks/features/columns/gridColumnsUtils.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.applyInitialState = exports.COLUMNS_DIMENSION_PROPERTIES = void 0;
 exports.computeFlexColumnsWidth = computeFlexColumnsWidth;
 exports.createColumnsState = void 0;
-exports.getFirstColumnIndexToRender = getFirstColumnIndexToRender;
 exports.getFirstNonSpannedColumnToRender = getFirstNonSpannedColumnToRender;
 exports.getTotalHeaderHeight = getTotalHeaderHeight;
 exports.hydrateColumnsWidth = void 0;
@@ -320,25 +319,6 @@ function getFirstNonSpannedColumnToRender({
   }
   return firstNonSpannedColumnToRender;
 }
-function getFirstColumnIndexToRender({
-  firstColumnIndex,
-  minColumnIndex,
-  columnBuffer,
-  firstRowToRender,
-  lastRowToRender,
-  apiRef,
-  visibleRows
-}) {
-  const initialFirstColumnToRender = Math.max(firstColumnIndex - columnBuffer, minColumnIndex);
-  const firstColumnToRender = getFirstNonSpannedColumnToRender({
-    firstColumnToRender: initialFirstColumnToRender,
-    apiRef,
-    firstRowToRender,
-    lastRowToRender,
-    visibleRows
-  });
-  return firstColumnToRender;
-}
 function getTotalHeaderHeight(apiRef, headerHeight) {
   const densityFactor = (0, _densitySelector.gridDensityFactorSelector)(apiRef);
   const maxDepth = (0, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector)(apiRef);

package/node/hooks/features/density/densitySelector.js

@@ -3,9 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridDensityValueSelector = exports.gridDensitySelector = exports.gridDensityFactorSelector = void 0;
+exports.gridDensitySelector = exports.gridDensityFactorSelector = exports.COMPACT_DENSITY_FACTOR = exports.COMFORTABLE_DENSITY_FACTOR = void 0;
 var _createSelector = require("../../../utils/createSelector");
+const COMPACT_DENSITY_FACTOR = exports.COMPACT_DENSITY_FACTOR = 0.7;
+const COMFORTABLE_DENSITY_FACTOR = exports.COMFORTABLE_DENSITY_FACTOR = 1.3;
+const DENSITY_FACTORS = {
+  compact: COMPACT_DENSITY_FACTOR,
+  comfortable: COMFORTABLE_DENSITY_FACTOR,
+  standard: 1
+};
 const gridDensitySelector = state => state.density;
 exports.gridDensitySelector = gridDensitySelector;
-const gridDensityValueSelector = exports.gridDensityValueSelector = (0, _createSelector.createSelector)(gridDensitySelector, density => density.value);
-const gridDensityFactorSelector = exports.gridDensityFactorSelector = (0, _createSelector.createSelector)(gridDensitySelector, density => density.factor);
+const gridDensityFactorSelector = exports.gridDensityFactorSelector = (0, _createSelector.createSelector)(gridDensitySelector, density => DENSITY_FACTORS[density]);

package/node/hooks/features/density/useGridDensity.js

@@ -4,50 +4,42 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridDensity = exports.densityStateInitializer = exports.COMPACT_DENSITY_FACTOR = exports.COMFORTABLE_DENSITY_FACTOR = void 0;
+exports.useGridDensity = exports.densityStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useGridLogger = require("../../utils/useGridLogger");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _densitySelector = require("./densitySelector");
-var _utils = require("../../../utils/utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const COMPACT_DENSITY_FACTOR = exports.COMPACT_DENSITY_FACTOR = 0.7;
-const COMFORTABLE_DENSITY_FACTOR = exports.COMFORTABLE_DENSITY_FACTOR = 1.3;
-const DENSITY_FACTORS = {
-  compact: COMPACT_DENSITY_FACTOR,
-  comfortable: COMFORTABLE_DENSITY_FACTOR,
-  standard: 1
-};
 const densityStateInitializer = (state, props) => (0, _extends2.default)({}, state, {
-  density: {
-    value: props.density,
-    factor: DENSITY_FACTORS[props.density]
-  }
+  density: props.initialState?.density ?? props.density ?? 'standard'
 });
 exports.densityStateInitializer = densityStateInitializer;
 const useGridDensity = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useDensity');
-  const setDensity = React.useCallback(newDensity => {
+  apiRef.current.registerControlState({
+    stateId: 'density',
+    propModel: props.density,
+    propOnChange: props.onDensityChange,
+    stateSelector: _densitySelector.gridDensitySelector,
+    changeEvent: 'densityChange'
+  });
+  const setDensity = (0, _useEventCallback.default)(newDensity => {
+    const currentDensity = (0, _densitySelector.gridDensitySelector)(apiRef.current.state);
+    if (currentDensity === newDensity) {
+      return;
+    }
     logger.debug(`Set grid density to ${newDensity}`);
-    apiRef.current.setState(state => {
-      const currentDensityState = (0, _densitySelector.gridDensitySelector)(state);
-      const newDensityState = {
-        value: newDensity,
-        factor: DENSITY_FACTORS[newDensity]
-      };
-      if ((0, _utils.isDeepEqual)(currentDensityState, newDensityState)) {
-        return state;
-      }
-      return (0, _extends2.default)({}, state, {
-        density: newDensityState
-      });
-    });
-    apiRef.current.forceUpdate();
-  }, [logger, apiRef]);
+    apiRef.current.setState(state => (0, _extends2.default)({}, 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/node/hooks/features/dimensions/useGridDimensions.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
+var _throttle = require("../../../utils/throttle");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _columns = require("../columns");
 var _gridDimensionsSelectors = require("./gridDimensionsSelectors");
@@ -68,7 +69,7 @@ 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(() => (0, _utils.unstable_debounce)(setSavedSize, 60), []);
+  const debouncedSetSavedSize = React.useMemo(() => (0, _throttle.throttle)(setSavedSize, props.resizeThrottleMs), [props.resizeThrottleMs]);
   const previousSize = React.useRef();
   const getRootDimensions = () => apiRef.current.state.dimensions;
   const setDimensions = (0, _utils.unstable_useEventCallback)(dimensions => {

package/node/hooks/features/editing/useGridCellEditing.js

@@ -23,7 +23,7 @@ const _excluded = ["id", "field"],
   _excluded2 = ["id", "field"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const missingOnProcessRowUpdateErrorWarning = (0, _warning.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 = (0, _warning.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 useGridCellEditing = (apiRef, props) => {
   const [cellModesModel, setCellModesModel] = React.useState({});
   const cellModesModelRef = React.useRef(cellModesModel);

package/node/hooks/features/editing/useGridRowEditing.js

@@ -25,7 +25,7 @@ const _excluded = ["id"],
   _excluded2 = ["id"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const missingOnProcessRowUpdateErrorWarning = (0, _warning.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 = (0, _warning.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 useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
@@ -54,6 +54,10 @@ 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 = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
+    return Object.values(editingState[rowId]).some(fieldProps => fieldProps.error);
+  }, [apiRef]);
   const handleCellDoubleClick = React.useCallback((params, event) => {
     if (!params.isEditable) {
       return;
@@ -95,6 +99,9 @@ const useGridRowEditing = (apiRef, props) => {
         if (apiRef.current.getRowMode(params.id) === _gridEditRowModel.GridRowModes.View) {
           return;
         }
+        if (hasFieldsWithErrors(params.id)) {
+          return;
+        }
         const rowParams = apiRef.current.getRowParams(params.id);
         const newParams = (0, _extends2.default)({}, rowParams, {
           field: params.field,
@@ -103,7 +110,7 @@ const useGridRowEditing = (apiRef, props) => {
         apiRef.current.publishEvent('rowEditStop', newParams, event);
       }
     });
-  }, [apiRef]);
+  }, [apiRef, hasFieldsWithErrors]);
   React.useEffect(() => {
     return () => {
       clearTimeout(focusTimeout.current);
@@ -149,6 +156,9 @@ const useGridRowEditing = (apiRef, props) => {
         }
       }
       if (reason) {
+        if (reason !== _gridRowParams.GridRowEditStopReasons.escapeKeyDown && hasFieldsWithErrors(params.id)) {
+          return;
+        }
         const newParams = (0, _extends2.default)({}, apiRef.current.getRowParams(params.id), {
           reason,
           field: params.field
@@ -183,7 +193,7 @@ const useGridRowEditing = (apiRef, props) => {
         apiRef.current.publishEvent('rowEditStart', newParams, event);
       }
     }
-  }, [apiRef]);
+  }, [apiRef, hasFieldsWithErrors]);
   const handleRowEditStart = React.useCallback(params => {
     const {
       id,
@@ -367,8 +377,7 @@ const useGridRowEditing = (apiRef, props) => {
       prevRowModesModel.current[id].mode = _gridEditRowModel.GridRowModes.Edit;
       return;
     }
-    const hasSomeFieldWithError = Object.values(editingState[id]).some(fieldProps => fieldProps.error);
-    if (hasSomeFieldWithError) {
+    if (hasFieldsWithErrors(id)) {
       prevRowModesModel.current[id].mode = _gridEditRowModel.GridRowModes.Edit;
       // Revert the mode in the rowModesModel prop back to "edit"
       updateRowInRowModesModel(id, {

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

@@ -7,11 +7,14 @@ exports.buildCSV = buildCSV;
 exports.serializeCellValue = void 0;
 var _colDef = require("../../../../colDef");
 var _warning = require("../../../../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;
   }
@@ -20,7 +23,8 @@ function sanitizeCellValue(value, delimiterCharacter) {
 const serializeCellValue = (cellParams, options) => {
   const {
     delimiterCharacter,
-    ignoreValueFormatter
+    ignoreValueFormatter,
+    shouldAppendQuotes
   } = options;
   let value;
   if (ignoreValueFormatter) {
@@ -37,7 +41,7 @@ const serializeCellValue = (cellParams, options) => {
   } else {
     value = cellParams.formattedValue;
   }
-  return sanitizeCellValue(value, delimiterCharacter);
+  return sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes);
 };
 exports.serializeCellValue = serializeCellValue;
 const objectFormattedValueWarning = (0, _warning.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.']);
@@ -55,7 +59,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;
     }
@@ -70,10 +74,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);
@@ -84,7 +90,8 @@ const serializeRow = ({
     }
     row.addValue(serializeCellValue(cellParams, {
       delimiterCharacter,
-      ignoreValueFormatter
+      ignoreValueFormatter,
+      shouldAppendQuotes
     }));
   });
   return row.getRowString();
@@ -97,14 +104,16 @@ 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;
@@ -123,7 +132,8 @@ 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 => {
@@ -135,7 +145,8 @@ function buildCSV(options) {
   }
   const mainHeaderRow = new CSVRow({
     delimiterCharacter,
-    sanitizeCellValue
+    sanitizeCellValue,
+    shouldAppendQuotes
   });
   filteredColumns.forEach(column => {
     mainHeaderRow.addValue(column.headerName || column.field);

package/node/hooks/features/export/useGridCsvExport.js

@@ -43,7 +43,8 @@ const useGridCsvExport = (apiRef, props) => {
       includeHeaders: options.includeHeaders ?? true,
       includeColumnGroupsHeaders: options.includeColumnGroupsHeaders ?? true,
       ignoreValueFormatter,
-      apiRef
+      apiRef,
+      shouldAppendQuotes: options.shouldAppendQuotes ?? true
     });
   }, [logger, apiRef, ignoreValueFormatter]);
   const exportDataAsCsv = React.useCallback(options => {

package/node/hooks/features/filter/gridFilterUtils.js

@@ -167,7 +167,7 @@ const buildAggregatedFilterItemsApplier = (filterModel, apiRef, disableEval) =>
   }
 
   // We generate a new function with `new Function()` to avoid expensive patterns for JS engines
-  // such as a dynamic object assignment, e.g. `{ [dynamicKey]: value }`.
+  // such as a dynamic object assignment, for example `{ [dynamicKey]: value }`.
   const filterItemCore = new Function('appliers', 'row', 'shouldApplyFilter', `"use strict";
 ${appliers.map((applier, i) => `const shouldApply${i} = !shouldApplyFilter || shouldApplyFilter(${JSON.stringify(applier.item.field)});`).join('\n')}
 

package/node/hooks/features/rowSelection/useGridRowSelection.js

@@ -284,7 +284,8 @@ const useGridRowSelection = (apiRef, props) => {
   const handleHeaderSelectionCheckboxChange = React.useCallback(params => {
     const shouldLimitSelectionToCurrentPage = props.checkboxSelectionVisibleOnly && props.pagination;
     const rowsToBeSelected = shouldLimitSelectionToCurrentPage ? (0, _pagination.gridPaginatedVisibleSortedGridRowIdsSelector)(apiRef) : (0, _gridFilterSelector.gridExpandedSortedRowIdsSelector)(apiRef);
-    apiRef.current.selectRows(rowsToBeSelected, params.value);
+    const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
+    apiRef.current.selectRows(rowsToBeSelected, params.value, filterModel?.items.length > 0);
   }, [apiRef, props.checkboxSelectionVisibleOnly, props.pagination]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Get the most recent cell mode because it may have been changed by another listener