@mui/x-data-grid 6.3.1 → 6.5.0

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

@@ -13,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "headerFilterMenu", "isFilterActive", "clearButton", "InputProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const SUBMIT_FILTER_STROKE_TIME = 500;
@@ -24,7 +24,13 @@ function GridFilterInputValue(props) {
       applyValue,
       type,
       apiRef,
-      focusElementRef
+      focusElementRef,
+      tabIndex,
+      disabled,
+      headerFilterMenu,
+      isFilterActive,
+      clearButton,
+      InputProps
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const filterTimeout = React.useRef();
@@ -55,9 +61,6 @@ function GridFilterInputValue(props) {
     const itemValue = item.value ?? '';
     setFilterValueState(String(itemValue));
   }, [item.value]);
-  const InputProps = applying ? {
-    endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {})
-  } : others.InputProps;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
@@ -66,7 +69,20 @@ function GridFilterInputValue(props) {
     onChange: onFilterChange,
     variant: "standard",
     type: type || 'text',
-    InputProps: InputProps,
+    InputProps: (0, _extends2.default)({}, applying || clearButton ? {
+      endAdornment: applying ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {
+        fontSize: "small",
+        color: "action"
+      }) : clearButton
+    } : {}, headerFilterMenu && isFilterActive ? {
+      startAdornment: headerFilterMenu
+    } : {}, {
+      disabled
+    }, InputProps, {
+      inputProps: (0, _extends2.default)({
+        tabIndex
+      }, InputProps?.inputProps)
+    }),
     InputLabelProps: {
       shrink: true
     },
@@ -82,7 +98,14 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
     current: _propTypes.default.object.isRequired
   }).isRequired,
   applyValue: _propTypes.default.func.isRequired,
+  clearButton: _propTypes.default.node,
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  headerFilterMenu: _propTypes.default.node,
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (e.g. `isEmpty`)
+   */
+  isFilterActive: _propTypes.default.bool,
   item: _propTypes.default.shape({
     field: _propTypes.default.string.isRequired,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridFilterPanel = void 0;
+exports.getGridFilter = exports.GridFilterPanel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -28,6 +28,7 @@ const getGridFilter = col => ({
   operator: col.filterOperators[0].value,
   id: Math.round(Math.random() * 1e5)
 });
+exports.getGridFilter = getGridFilter;
 const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();

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

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  GridFilterPanel: true
+};
+Object.defineProperty(exports, "GridFilterPanel", {
+  enumerable: true,
+  get: function () {
+    return _GridFilterPanel.GridFilterPanel;
+  }
+});
 var _GridFilterForm = require("./GridFilterForm");
 Object.keys(_GridFilterForm).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridFilterForm[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +27,7 @@ Object.keys(_GridFilterForm).forEach(function (key) {
 var _GridFilterInputValue = require("./GridFilterInputValue");
 Object.keys(_GridFilterInputValue).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridFilterInputValue[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +39,7 @@ Object.keys(_GridFilterInputValue).forEach(function (key) {
 var _GridFilterInputDate = require("./GridFilterInputDate");
 Object.keys(_GridFilterInputDate).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridFilterInputDate[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,6 +51,7 @@ Object.keys(_GridFilterInputDate).forEach(function (key) {
 var _GridFilterInputSingleSelect = require("./GridFilterInputSingleSelect");
 Object.keys(_GridFilterInputSingleSelect).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridFilterInputSingleSelect[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -47,31 +60,35 @@ Object.keys(_GridFilterInputSingleSelect).forEach(function (key) {
     }
   });
 });
-var _GridFilterInputValueProps = require("./GridFilterInputValueProps");
-Object.keys(_GridFilterInputValueProps).forEach(function (key) {
+var _GridFilterInputBoolean = require("./GridFilterInputBoolean");
+Object.keys(_GridFilterInputBoolean).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _GridFilterInputValueProps[key]) return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridFilterInputBoolean[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _GridFilterInputValueProps[key];
+      return _GridFilterInputBoolean[key];
     }
   });
 });
-var _GridFilterPanel = require("./GridFilterPanel");
-Object.keys(_GridFilterPanel).forEach(function (key) {
+var _GridFilterInputValueProps = require("./GridFilterInputValueProps");
+Object.keys(_GridFilterInputValueProps).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _GridFilterPanel[key]) return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridFilterInputValueProps[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _GridFilterPanel[key];
+      return _GridFilterInputValueProps[key];
     }
   });
 });
+var _GridFilterPanel = require("./GridFilterPanel");
 var _GridFilterInputMultipleValue = require("./GridFilterInputMultipleValue");
 Object.keys(_GridFilterInputMultipleValue).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridFilterInputMultipleValue[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -83,6 +100,7 @@ Object.keys(_GridFilterInputMultipleValue).forEach(function (key) {
 var _GridFilterInputMultipleSingleSelect = require("./GridFilterInputMultipleSingleSelect");
 Object.keys(_GridFilterInputMultipleSingleSelect).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridFilterInputMultipleSingleSelect[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,

package/node/constants/localeTextConstants.js

@@ -64,6 +64,32 @@ const GRID_DEFAULT_LOCALE_TEXT = {
   filterOperatorIsEmpty: 'is empty',
   filterOperatorIsNotEmpty: 'is not empty',
   filterOperatorIsAnyOf: 'is any of',
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
+  // Header filter operators text
+  headerFilterOperatorContains: 'Contains',
+  headerFilterOperatorEquals: 'Equals',
+  headerFilterOperatorStartsWith: 'Starts with',
+  headerFilterOperatorEndsWith: 'Ends with',
+  headerFilterOperatorIs: 'Is',
+  headerFilterOperatorNot: 'Is not',
+  headerFilterOperatorAfter: 'Is after',
+  headerFilterOperatorOnOrAfter: 'Is on or after',
+  headerFilterOperatorBefore: 'Is before',
+  headerFilterOperatorOnOrBefore: 'Is on or before',
+  headerFilterOperatorIsEmpty: 'Is empty',
+  headerFilterOperatorIsNotEmpty: 'Is not empty',
+  headerFilterOperatorIsAnyOf: 'Is any of',
+  'headerFilterOperator=': 'Equals',
+  'headerFilterOperator!=': 'Not equals',
+  'headerFilterOperator>': 'Is greater than',
+  'headerFilterOperator>=': 'Is greater than or equal to',
+  'headerFilterOperator<': 'Is less than',
+  'headerFilterOperator<=': 'Is less than or equal to',
   // Filter values text
   filterValueAny: 'any',
   filterValueTrue: 'true',

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

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridClipboard = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("../../utils");
+var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
+var _csvSerializer = require("../export/serializers/csvSerializer");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function writeToClipboardPolyfill(data) {
@@ -26,6 +28,15 @@ function writeToClipboardPolyfill(data) {
     document.body.removeChild(span);
   }
 }
+function copyToClipboard(data) {
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(data).catch(() => {
+      writeToClipboardPolyfill(data);
+    });
+  } else {
+    writeToClipboardPolyfill(data);
+  }
+}
 function hasNativeSelection(element) {
   // When getSelection is called on an <iframe> that is not displayed Firefox will return null.
   if (window.getSelection()?.toString()) {
@@ -45,24 +56,11 @@ function hasNativeSelection(element) {
  * @requires useGridCsvExport (method)
  * @requires useGridSelection (method)
  */
-const useGridClipboard = apiRef => {
-  const copySelectedRowsToClipboard = React.useCallback(() => {
-    if (apiRef.current.getSelectedRows().size === 0) {
-      return;
-    }
-    const data = apiRef.current.getDataAsCsv({
-      includeHeaders: false,
-      delimiter: '\t'
-    });
-    if (navigator.clipboard) {
-      navigator.clipboard.writeText(data).catch(() => {
-        writeToClipboardPolyfill(data);
-      });
-    } else {
-      writeToClipboardPolyfill(data);
-    }
-  }, [apiRef]);
-  const handleKeydown = React.useCallback(event => {
+const useGridClipboard = (apiRef, props) => {
+  const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
+  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
+  const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
+  const handleCopy = React.useCallback(event => {
     const isModifierKeyPressed = event.ctrlKey || event.metaKey;
     // event.code === 'KeyC' is not enough as event.code assume a QWERTY keyboard layout which would
     // be wrong with a Dvorak keyboard (as if pressing J).
@@ -74,12 +72,31 @@ const useGridClipboard = apiRef => {
     if (hasNativeSelection(event.target)) {
       return;
     }
-    apiRef.current.unstable_copySelectedRowsToClipboard();
-  }, [apiRef]);
-  (0, _utils.useGridNativeEventListener)(apiRef, apiRef.current.rootElementRef, 'keydown', handleKeydown);
-  const clipboardApi = {
-    unstable_copySelectedRowsToClipboard: copySelectedRowsToClipboard
-  };
-  (0, _utils.useGridApiMethod)(apiRef, clipboardApi, 'public');
+    let textToCopy = '';
+    const selectedRows = apiRef.current.getSelectedRows();
+    if (selectedRows.size > 0) {
+      textToCopy = apiRef.current.getDataAsCsv({
+        includeHeaders: false,
+        // TODO: make it configurable
+        delimiter: clipboardCopyCellDelimiter
+      });
+    } else {
+      const focusedCell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
+      if (focusedCell) {
+        const cellParams = apiRef.current.getCellParams(focusedCell.id, focusedCell.field);
+        textToCopy = (0, _csvSerializer.serializeCellValue)(cellParams, {
+          delimiterCharacter: clipboardCopyCellDelimiter,
+          ignoreValueFormatter
+        });
+      }
+    }
+    textToCopy = apiRef.current.unstable_applyPipeProcessors('clipboardCopy', textToCopy);
+    if (textToCopy) {
+      copyToClipboard(textToCopy);
+      apiRef.current.publishEvent('clipboardCopy', textToCopy);
+    }
+  }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
+  (0, _utils.useGridNativeEventListener)(apiRef, apiRef.current.rootElementRef, 'keydown', handleCopy);
+  (0, _utils.useGridApiOptionHandler)(apiRef, 'clipboardCopy', props.onClipboardCopy);
 };
 exports.useGridClipboard = useGridClipboard;

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -269,7 +269,7 @@ const useGridColumnHeaders = props => {
         const tabIndex = columnGroupHeaderTabIndexState !== null && columnGroupHeaderTabIndexState.depth === depth && columnFields.includes(columnGroupHeaderTabIndexState.field) ? 0 : -1;
         const headerInfo = {
           groupId,
-          width: columnFields.map(field => apiRef.current.getColumn(field).computedWidth).reduce((acc, val) => acc + val, 0),
+          width: columnFields.reduce((acc, field) => acc + apiRef.current.getColumn(field).computedWidth, 0),
           fields: columnFields,
           colIndex: columnIndex,
           hasFocus,
@@ -325,6 +325,7 @@ const useGridColumnHeaders = props => {
   return {
     renderContext,
     getColumnHeaders,
+    getColumnsToRender,
     getColumnGroupHeaders,
     isDragging: !!dragCol,
     getRootProps: (other = {}) => (0, _extends2.default)({
@@ -333,7 +334,8 @@ const useGridColumnHeaders = props => {
     getInnerProps: () => ({
       ref: handleInnerRef,
       role: 'rowgroup'
-    })
+    }),
+    headerHeight
   };
 };
 exports.useGridColumnHeaders = useGridColumnHeaders;

package/node/hooks/features/dimensions/useGridDimensions.js

@@ -16,7 +16,6 @@ var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
-var _gridClasses = require("../../../constants/gridClasses");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const isTestEnvironment = process.env.NODE_ENV === 'test';
@@ -158,13 +157,12 @@ function useGridDimensions(apiRef, props) {
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
   }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
   const computeSizeAndPublishResizeEvent = React.useCallback(() => {
-    const rootEl = apiRef.current.rootElementRef?.current;
-    const mainEl = rootEl?.querySelector(`.${_gridClasses.gridClasses.main}`);
+    const mainEl = apiRef.current.mainElementRef?.current;
     if (!mainEl) {
       return;
     }
-    const height = mainEl.offsetHeight || 0;
-    const width = mainEl.offsetWidth || 0;
+    const height = mainEl.clientHeight || 0;
+    const width = mainEl.clientWidth || 0;
     const win = (0, _utils.unstable_ownerWindow)(mainEl);
     const computedStyle = win.getComputedStyle(mainEl);
     const paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;

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

@@ -99,10 +99,14 @@ const useGridCellEditing = (apiRef, props) => {
       }
     } else if (params.isEditable) {
       let reason;
-      if (event.key === ' ') {
-        return; // Space scrolls to the last row
+      const canStartEditing = apiRef.current.unstable_applyPipeProcessors('canStartEditing', true, {
+        event,
+        cellParams: params,
+        editMode: 'cell'
+      });
+      if (!canStartEditing) {
+        return;
       }
-
       if ((0, _keyboardUtils.isPrintableKey)(event)) {
         reason = _gridEditCellParams.GridCellEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {

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

@@ -39,9 +39,6 @@ const useGridEditing = (apiRef, props) => {
     if (isCellEditableProp) {
       return isCellEditableProp(params);
     }
-    if (params.rowNode.type === 'pinnedRow') {
-      return false;
-    }
     return true;
   }, [isCellEditableProp]);
   const maybeDebounce = (id, field, debounceMs, callback) => {

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

@@ -152,10 +152,14 @@ const useGridRowEditing = (apiRef, props) => {
       }
     } else if (params.isEditable) {
       let reason;
-      if (event.key === ' ') {
-        return; // Space scrolls to the last row
+      const canStartEditing = apiRef.current.unstable_applyPipeProcessors('canStartEditing', true, {
+        event,
+        cellParams: params,
+        editMode: 'row'
+      });
+      if (!canStartEditing) {
+        return;
       }
-
       if ((0, _keyboardUtils.isPrintableKey)(event)) {
         reason = _gridRowParams.GridRowEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {

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

@@ -4,9 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.buildCSV = buildCSV;
+exports.serializeCellValue = void 0;
 var _colDef = require("../../../../colDef");
 var _warning = require("../../../../utils/warning");
-const serializeCellValue = (value, delimiterCharacter) => {
+function sanitizeCellValue(value, delimiterCharacter) {
   if (typeof value === 'string') {
     const formattedValue = value.replace(/"/g, '""');
 
@@ -17,16 +18,48 @@ const serializeCellValue = (value, delimiterCharacter) => {
     return formattedValue;
   }
   return value;
+}
+const serializeCellValue = (cellParams, options) => {
+  const {
+    delimiterCharacter,
+    ignoreValueFormatter
+  } = options;
+  let value;
+  if (ignoreValueFormatter) {
+    const columnType = cellParams.colDef.type;
+    if (columnType === 'number') {
+      value = String(cellParams.value);
+    } else if (columnType === 'date' || columnType === 'dateTime') {
+      value = cellParams.value?.toISOString();
+    } else if (typeof cellParams.value?.toString === 'function') {
+      value = cellParams.value.toString();
+    } else {
+      value = cellParams.value;
+    }
+  } else {
+    value = cellParams.formattedValue;
+  }
+  return sanitizeCellValue(value, delimiterCharacter);
 };
+exports.serializeCellValue = serializeCellValue;
 const objectFormattedValueWarning = (0, _warning.buildWarning)(['MUI: 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.']);
-const serializeRow = (id, columns, getCellParams, delimiterCharacter) => columns.map(column => {
+const serializeRow = ({
+  id,
+  columns,
+  getCellParams,
+  delimiterCharacter,
+  ignoreValueFormatter
+}) => columns.map(column => {
   const cellParams = getCellParams(id, column.field);
   if (process.env.NODE_ENV !== 'production') {
     if (String(cellParams.formattedValue) === '[object Object]') {
       objectFormattedValueWarning();
     }
   }
-  return serializeCellValue(cellParams.formattedValue, delimiterCharacter);
+  return serializeCellValue(cellParams, {
+    delimiterCharacter,
+    ignoreValueFormatter
+  });
 });
 function buildCSV(options) {
   const {
@@ -34,12 +67,19 @@ function buildCSV(options) {
     rowIds,
     getCellParams,
     delimiterCharacter,
-    includeHeaders
+    includeHeaders,
+    ignoreValueFormatter
   } = options;
-  const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow(id, columns, getCellParams, delimiterCharacter).join(delimiterCharacter)}\r\n`, '').trim();
+  const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow({
+    id,
+    columns,
+    getCellParams,
+    delimiterCharacter,
+    ignoreValueFormatter
+  }).join(delimiterCharacter)}\r\n`, '').trim();
   if (!includeHeaders) {
     return CSVBody;
   }
-  const CSVHead = `${columns.filter(column => column.field !== _colDef.GRID_CHECKBOX_SELECTION_COL_DEF.field).map(column => serializeCellValue(column.headerName || column.field, delimiterCharacter)).join(delimiterCharacter)}\r\n`;
+  const CSVHead = `${columns.filter(column => column.field !== _colDef.GRID_CHECKBOX_SELECTION_COL_DEF.field).map(column => sanitizeCellValue(column.headerName || column.field, delimiterCharacter)).join(delimiterCharacter)}\r\n`;
   return `${CSVHead}${CSVBody}`.trim();
 }

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

@@ -22,8 +22,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-const useGridCsvExport = apiRef => {
+const useGridCsvExport = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridCsvExport');
+  const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
+  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.csvExport : ignoreValueFormatterProp) || false;
   const getDataAsCsv = React.useCallback((options = {}) => {
     logger.debug(`Get data as CSV`);
     const exportedColumns = (0, _utils.getColumnsToExport)({
@@ -39,9 +41,10 @@ const useGridCsvExport = apiRef => {
       rowIds: exportedRowIds,
       getCellParams: apiRef.current.getCellParams,
       delimiterCharacter: options.delimiter || ',',
-      includeHeaders: options.includeHeaders ?? true
+      includeHeaders: options.includeHeaders ?? true,
+      ignoreValueFormatter
     });
-  }, [logger, apiRef]);
+  }, [logger, apiRef, ignoreValueFormatter]);
   const exportDataAsCsv = React.useCallback(options => {
     logger.debug(`Export data as CSV`);
     const csv = getDataAsCsv(options);

package/node/hooks/features/focus/gridFocusStateSelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unstable_gridTabIndexColumnGroupHeaderSelector = exports.unstable_gridFocusColumnGroupHeaderSelector = exports.gridTabIndexStateSelector = exports.gridTabIndexColumnHeaderSelector = exports.gridTabIndexCellSelector = exports.gridFocusStateSelector = exports.gridFocusColumnHeaderSelector = exports.gridFocusCellSelector = void 0;
+exports.unstable_gridTabIndexColumnHeaderFilterSelector = exports.unstable_gridTabIndexColumnGroupHeaderSelector = exports.unstable_gridFocusColumnHeaderFilterSelector = exports.unstable_gridFocusColumnGroupHeaderSelector = exports.gridTabIndexStateSelector = exports.gridTabIndexColumnHeaderSelector = exports.gridTabIndexCellSelector = exports.gridFocusStateSelector = exports.gridFocusColumnHeaderSelector = exports.gridFocusCellSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 const gridFocusStateSelector = state => state.focus;
 exports.gridFocusStateSelector = gridFocusStateSelector;
@@ -13,6 +13,10 @@ const gridFocusColumnHeaderSelector = (0, _createSelector.createSelector)(gridFo
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 exports.gridFocusColumnHeaderSelector = gridFocusColumnHeaderSelector;
+const unstable_gridFocusColumnHeaderFilterSelector = (0, _createSelector.createSelector)(gridFocusStateSelector, focusState => focusState.columnHeaderFilter);
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+exports.unstable_gridFocusColumnHeaderFilterSelector = unstable_gridFocusColumnHeaderFilterSelector;
 const unstable_gridFocusColumnGroupHeaderSelector = (0, _createSelector.createSelector)(gridFocusStateSelector, focusState => focusState.columnGroupHeader);
 exports.unstable_gridFocusColumnGroupHeaderSelector = unstable_gridFocusColumnGroupHeaderSelector;
 const gridTabIndexStateSelector = state => state.tabIndex;
@@ -23,5 +27,9 @@ const gridTabIndexColumnHeaderSelector = (0, _createSelector.createSelector)(gri
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 exports.gridTabIndexColumnHeaderSelector = gridTabIndexColumnHeaderSelector;
+const unstable_gridTabIndexColumnHeaderFilterSelector = (0, _createSelector.createSelector)(gridTabIndexStateSelector, state => state.columnHeaderFilter);
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+exports.unstable_gridTabIndexColumnHeaderFilterSelector = unstable_gridTabIndexColumnHeaderFilterSelector;
 const unstable_gridTabIndexColumnGroupHeaderSelector = (0, _createSelector.createSelector)(gridTabIndexStateSelector, state => state.columnGroupHeader);
 exports.unstable_gridTabIndexColumnGroupHeaderSelector = unstable_gridTabIndexColumnGroupHeaderSelector;