@mui/x-data-grid 6.3.1 → 6.5.0

package/components/panel/filterPanel/GridFilterInputSingleSelect.d.ts

@@ -1,8 +1,15 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 import { GridSingleSelectColDef } from '../../../models/colDef/gridColDef';
 export type GridFilterInputSingleSelectProps = GridFilterInputValueProps & TextFieldProps & Pick<GridSingleSelectColDef, 'getOptionLabel' | 'getOptionValue'> & {
+    headerFilterMenu?: React.ReactNode | null;
+    clearButton?: React.ReactNode | null;
+    /**
+     * It is `true` if the filter either has a value or an operator with no value
+     * required is selected (e.g. `isEmpty`)
+     */
+    isFilterActive?: boolean;
     type?: 'singleSelect';
 };
 declare function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps): JSX.Element | null;

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -1,9 +1,10 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "headerFilterMenu", "isFilterActive", "clearButton"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
+import { styled } from '@mui/material/styles';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getValueFromValueOptions, isSingleSelectColDef } from './filterPanelUtils';
 import { createElement as _createElement } from "react";
@@ -33,6 +34,11 @@ const renderSingleSelectOptions = ({
     }), label);
   });
 };
+const SingleSelectOperatorContainer = styled('div')({
+  display: 'flex',
+  alignItems: 'flex-end',
+  width: '100%'
+});
 function GridFilterInputSingleSelect(props) {
   var _item$value, _rootProps$slotProps$, _rootProps$slotProps, _rootProps$slotProps$2, _resolvedColumn, _resolvedColumn2, _rootProps$slotProps2, _rootProps$slotProps3, _rootProps$slotProps4;
   const {
@@ -42,7 +48,13 @@ function GridFilterInputSingleSelect(props) {
       apiRef,
       focusElementRef,
       getOptionLabel: getOptionLabelProp,
-      getOptionValue: getOptionValueProp
+      getOptionValue: getOptionValueProp,
+      placeholder,
+      tabIndex,
+      label: labelProp,
+      headerFilterMenu,
+      isFilterActive,
+      clearButton
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState((_item$value = item.value) != null ? _item$value : '');
@@ -101,36 +113,40 @@ function GridFilterInputSingleSelect(props) {
   if (!isSingleSelectColDef(resolvedColumn)) {
     return null;
   }
-  const label = apiRef.current.getLocaleText('filterPanelInputLabel');
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseInputLabel, {
-      id: labelId,
-      shrink: true,
-      variant: "standard",
-      children: label
-    })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
-      id: id,
-      label: label,
-      labelId: labelId,
-      value: filterValueState,
-      onChange: onFilterChange,
-      variant: "standard",
-      type: type || 'text',
-      inputProps: {
-        ref: focusElementRef,
-        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder')
-      },
-      native: isSelectNative
-    }, others, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect, {
-      children: renderSingleSelectOptions({
-        column: resolvedColumn,
-        OptionComponent: rootProps.slots.baseSelectOption,
-        getOptionLabel,
-        getOptionValue,
-        isSelectNative,
-        baseSelectOptionProps: (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseSelectOption
-      })
-    }))]
+  const label = labelProp != null ? labelProp : apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/_jsxs(SingleSelectOperatorContainer, {
+    children: [/*#__PURE__*/_jsxs(rootProps.slots.baseFormControl, {
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseInputLabel, {
+        id: labelId,
+        shrink: true,
+        variant: "standard",
+        children: label
+      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
+        id: id,
+        label: label,
+        labelId: labelId,
+        value: filterValueState,
+        onChange: onFilterChange,
+        startAdornment: isFilterActive ? headerFilterMenu : null,
+        variant: "standard",
+        type: type || 'text',
+        inputProps: {
+          tabIndex,
+          ref: focusElementRef,
+          placeholder: placeholder != null ? placeholder : apiRef.current.getLocaleText('filterPanelInputPlaceholder')
+        },
+        native: isSelectNative
+      }, others, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect, {
+        children: renderSingleSelectOptions({
+          column: resolvedColumn,
+          OptionComponent: rootProps.slots.baseSelectOption,
+          getOptionLabel,
+          getOptionValue,
+          isSelectNative,
+          baseSelectOptionProps: (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseSelectOption
+        })
+      }))]
+    }), clearButton]
   });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {
@@ -142,6 +158,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
     current: PropTypes.object.isRequired
   }).isRequired,
   applyValue: PropTypes.func.isRequired,
+  clearButton: PropTypes.node,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Used to determine the label displayed for a given value option.
@@ -155,6 +172,12 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
    * @returns {string} The value to be used.
    */
   getOptionValue: PropTypes.func,
+  headerFilterMenu: PropTypes.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.bool,
   item: PropTypes.shape({
     field: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/components/panel/filterPanel/GridFilterInputValue.d.ts

@@ -1,11 +1,18 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 export declare const SUBMIT_FILTER_STROKE_TIME = 500;
-export interface GridTypeFilterInputValueProps extends GridFilterInputValueProps {
+export type GridTypeFilterInputValueProps = GridFilterInputValueProps & TextFieldProps & {
     type?: 'text' | 'number' | 'date' | 'datetime-local';
-}
-declare function GridFilterInputValue(props: GridTypeFilterInputValueProps & TextFieldProps): JSX.Element;
+    headerFilterMenu?: React.ReactNode | null;
+    clearButton?: React.ReactNode | null;
+    /**
+     * It is `true` if the filter either has a value or an operator with no value
+     * required is selected (e.g. `isEmpty`)
+     */
+    isFilterActive?: boolean;
+};
+declare function GridFilterInputValue(props: GridTypeFilterInputValueProps): JSX.Element;
 declare namespace GridFilterInputValue {
     var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputValue.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "headerFilterMenu", "isFilterActive", "clearButton", "InputProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -14,7 +14,13 @@ function GridFilterInputValue(props) {
       applyValue,
       type,
       apiRef,
-      focusElementRef
+      focusElementRef,
+      tabIndex,
+      disabled,
+      headerFilterMenu,
+      isFilterActive,
+      clearButton,
+      InputProps
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const filterTimeout = React.useRef();
@@ -46,9 +52,6 @@ function GridFilterInputValue(props) {
     const itemValue = (_item$value2 = item.value) != null ? _item$value2 : '';
     setFilterValueState(String(itemValue));
   }, [item.value]);
-  const InputProps = applying ? {
-    endAdornment: /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {})
-  } : others.InputProps;
   return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
@@ -57,7 +60,20 @@ function GridFilterInputValue(props) {
     onChange: onFilterChange,
     variant: "standard",
     type: type || 'text',
-    InputProps: InputProps,
+    InputProps: _extends({}, applying || clearButton ? {
+      endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+        fontSize: "small",
+        color: "action"
+      }) : clearButton
+    } : {}, headerFilterMenu && isFilterActive ? {
+      startAdornment: headerFilterMenu
+    } : {}, {
+      disabled
+    }, InputProps, {
+      inputProps: _extends({
+        tabIndex
+      }, InputProps == null ? void 0 : InputProps.inputProps)
+    }),
     InputLabelProps: {
       shrink: true
     },
@@ -73,7 +89,14 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
     current: PropTypes.object.isRequired
   }).isRequired,
   applyValue: PropTypes.func.isRequired,
+  clearButton: PropTypes.node,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
+  headerFilterMenu: PropTypes.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.bool,
   item: PropTypes.shape({
     field: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/components/panel/filterPanel/GridFilterPanel.d.ts

@@ -29,5 +29,6 @@ export interface GridFilterPanelProps extends Pick<GridFilterFormProps, 'logicOp
      */
     children?: React.ReactNode;
 }
+declare const getGridFilter: (col: GridStateColDef) => GridFilterItem;
 declare const GridFilterPanel: React.ForwardRefExoticComponent<GridFilterPanelProps & React.RefAttributes<HTMLDivElement>>;
-export { GridFilterPanel };
+export { GridFilterPanel, getGridFilter };

package/components/panel/filterPanel/GridFilterPanel.js

@@ -209,4 +209,4 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
-export { GridFilterPanel };
+export { GridFilterPanel, getGridFilter };

package/components/panel/filterPanel/index.d.ts

@@ -2,7 +2,9 @@ export * from './GridFilterForm';
 export * from './GridFilterInputValue';
 export * from './GridFilterInputDate';
 export * from './GridFilterInputSingleSelect';
+export * from './GridFilterInputBoolean';
 export * from './GridFilterInputValueProps';
-export * from './GridFilterPanel';
+export { GridFilterPanel } from './GridFilterPanel';
+export type { GetColumnForNewFilterArgs } from './GridFilterPanel';
 export * from './GridFilterInputMultipleValue';
 export * from './GridFilterInputMultipleSingleSelect';

package/components/panel/filterPanel/index.js

@@ -2,7 +2,8 @@ export * from './GridFilterForm';
 export * from './GridFilterInputValue';
 export * from './GridFilterInputDate';
 export * from './GridFilterInputSingleSelect';
+export * from './GridFilterInputBoolean';
 export * from './GridFilterInputValueProps';
-export * from './GridFilterPanel';
+export { GridFilterPanel } from './GridFilterPanel';
 export * from './GridFilterInputMultipleValue';
 export * from './GridFilterInputMultipleSingleSelect';

package/constants/localeTextConstants.js

@@ -58,6 +58,32 @@ export 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/hooks/core/pipeProcessing/gridPipeProcessingApi.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridCellIndexCoordinates, GridScrollParams, GridColDef, GridCellCoordinates, GridCellParams } from '../../../models';
+import { GridCellIndexCoordinates, GridScrollParams, GridColDef, GridCellCoordinates, GridCellParams, GridEditMode } from '../../../models';
 import { GridInitialStateCommunity } from '../../../models/gridStateCommunity';
 import { GridExportStateParams, GridRestoreStatePreProcessingContext, GridRestoreStatePreProcessingValue } from '../../features/statePersistence/gridStatePersistenceInterface';
 import { GridHydrateColumnsValue } from '../../features/columns/gridColumnsInterfaces';
@@ -64,6 +64,17 @@ export interface GridPipeProcessingLookup {
             cell: GridCellParams | null;
         };
     };
+    clipboardCopy: {
+        value: string;
+    };
+    canStartEditing: {
+        value: boolean;
+        context: {
+            event: React.KeyboardEvent;
+            cellParams: GridCellParams;
+            editMode: GridEditMode;
+        };
+    };
 }
 export type GridPipeProcessor<P extends GridPipeProcessorGroup> = (value: GridPipeProcessingLookup[P]['value'], context: GridPipeProcessingLookup[P] extends {
     context: any;

package/hooks/features/clipboard/useGridClipboard.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 /**
  * @requires useGridCsvExport (method)
  * @requires useGridSelection (method)
  */
-export declare const useGridClipboard: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => void;
+export declare const useGridClipboard: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_ignoreValueFormatterDuringExport' | 'onClipboardCopy' | 'clipboardCopyCellDelimiter'>) => void;

package/hooks/features/clipboard/useGridClipboard.js

@@ -1,5 +1,7 @@
 import * as React from 'react';
-import { useGridApiMethod, useGridNativeEventListener } from '../../utils';
+import { useGridApiOptionHandler, useGridNativeEventListener } from '../../utils';
+import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
+import { serializeCellValue } from '../export/serializers/csvSerializer';
 function writeToClipboardPolyfill(data) {
   const span = document.createElement('span');
   span.style.whiteSpace = 'pre';
@@ -18,6 +20,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) {
   var _window$getSelection;
   // When getSelection is called on an <iframe> that is not displayed Firefox will return null.
@@ -38,24 +49,11 @@ function hasNativeSelection(element) {
  * @requires useGridCsvExport (method)
  * @requires useGridSelection (method)
  */
-export 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 => {
+export const useGridClipboard = (apiRef, props) => {
+  const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
+  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : 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).
@@ -67,11 +65,30 @@ export const useGridClipboard = apiRef => {
     if (hasNativeSelection(event.target)) {
       return;
     }
-    apiRef.current.unstable_copySelectedRowsToClipboard();
-  }, [apiRef]);
-  useGridNativeEventListener(apiRef, apiRef.current.rootElementRef, 'keydown', handleKeydown);
-  const clipboardApi = {
-    unstable_copySelectedRowsToClipboard: copySelectedRowsToClipboard
-  };
-  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 = gridFocusCellSelector(apiRef);
+      if (focusedCell) {
+        const cellParams = apiRef.current.getCellParams(focusedCell.id, focusedCell.field);
+        textToCopy = serializeCellValue(cellParams, {
+          delimiterCharacter: clipboardCopyCellDelimiter,
+          ignoreValueFormatter
+        });
+      }
+    }
+    textToCopy = apiRef.current.unstable_applyPipeProcessors('clipboardCopy', textToCopy);
+    if (textToCopy) {
+      copyToClipboard(textToCopy);
+      apiRef.current.publishEvent('clipboardCopy', textToCopy);
+    }
+  }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
+  useGridNativeEventListener(apiRef, apiRef.current.rootElementRef, 'keydown', handleCopy);
+  useGridApiOptionHandler(apiRef, 'clipboardCopy', props.onClipboardCopy);
 };

package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -25,7 +25,7 @@ export interface UseGridColumnHeadersProps {
     columnGroupsHeaderStructure: GridGroupingStructure[][];
     hasOtherElementInTabSequence: boolean;
 }
-interface GetHeadersParams {
+export interface GetHeadersParams {
     renderContext: GridRenderContext | null;
     minFirstColumn?: number;
     maxLastColumn?: number;
@@ -33,6 +33,13 @@ interface GetHeadersParams {
 export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
     renderContext: GridRenderContext | null;
     getColumnHeaders: (params?: GetHeadersParams, other?: {}) => JSX.Element | null;
+    getColumnsToRender: (params?: GetHeadersParams) => {
+        renderedColumns: GridStateColDef[];
+        firstColumnToRender: number;
+        lastColumnToRender: number;
+        minFirstColumn: number;
+        maxLastColumn: number;
+    } | null;
     getColumnGroupHeaders: (params?: GetHeadersParams) => JSX.Element[] | null;
     isDragging: boolean;
     getRootProps: (other?: {}) => {
@@ -46,5 +53,5 @@ export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) =>
         ref: ((instance: HTMLDivElement | null) => void) | null;
         role: string;
     };
+    headerHeight: number;
 };
-export {};

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -263,7 +263,7 @@ export 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,
@@ -319,6 +319,7 @@ export const useGridColumnHeaders = props => {
   return {
     renderContext,
     getColumnHeaders,
+    getColumnsToRender,
     getColumnGroupHeaders,
     isDragging: !!dragCol,
     getRootProps: (other = {}) => _extends({
@@ -327,6 +328,7 @@ export const useGridColumnHeaders = props => {
     getInnerProps: () => ({
       ref: handleInnerRef,
       role: 'rowgroup'
-    })
+    }),
+    headerHeight
   };
 };

package/hooks/features/dimensions/useGridDimensions.js

@@ -10,7 +10,6 @@ import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
 import { getTotalHeaderHeight } from '../columns/gridColumnsUtils';
-import { gridClasses } from '../../../constants/gridClasses';
 const isTestEnvironment = process.env.NODE_ENV === 'test';
 const hasScroll = ({
   content,
@@ -151,14 +150,13 @@ export function useGridDimensions(apiRef, props) {
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
   }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
   const computeSizeAndPublishResizeEvent = React.useCallback(() => {
-    var _apiRef$current$rootE2, _previousSize$current, _previousSize$current2;
-    const rootEl = (_apiRef$current$rootE2 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE2.current;
-    const mainEl = rootEl == null ? void 0 : rootEl.querySelector(`.${gridClasses.main}`);
+    var _apiRef$current$mainE, _previousSize$current, _previousSize$current2;
+    const mainEl = (_apiRef$current$mainE = apiRef.current.mainElementRef) == null ? void 0 : _apiRef$current$mainE.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 = ownerWindow(mainEl);
     const computedStyle = win.getComputedStyle(mainEl);
     const paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;

package/hooks/features/editing/useGridCellEditing.js

@@ -90,10 +90,14 @@ export 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 (isPrintableKey(event)) {
         reason = GridCellEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {

package/hooks/features/editing/useGridEditing.js

@@ -29,9 +29,6 @@ export 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/hooks/features/editing/useGridRowEditing.js

@@ -144,10 +144,14 @@ export 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 (isPrintableKey(event)) {
         reason = GridRowEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {

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

@@ -1,12 +1,17 @@
 import { GridRowId } from '../../../../models';
 import { GridCellParams } from '../../../../models/params/gridCellParams';
 import { GridStateColDef } from '../../../../models/colDef/gridColDef';
+export declare const serializeCellValue: (cellParams: GridCellParams, options: {
+    delimiterCharacter: string;
+    ignoreValueFormatter: boolean;
+}) => any;
 interface BuildCSVOptions {
     columns: GridStateColDef[];
     rowIds: GridRowId[];
     getCellParams: (id: GridRowId, field: string) => GridCellParams;
     delimiterCharacter: string;
     includeHeaders: boolean;
+    ignoreValueFormatter: boolean;
 }
 export declare function buildCSV(options: BuildCSVOptions): string;
 export {};