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

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

@@ -0,0 +1,553 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import { useTheme } from '@mui/material/styles';
+import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, findGroupHeaderElementsFromField, findGridHeader, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol } from '../../../utils/domUtils';
+import { DEFAULT_GRID_AUTOSIZE_OPTIONS } from './gridColumnResizeApi';
+import { gridClasses } from '../../../constants/gridClasses';
+import { useGridApiEventHandler, useGridApiMethod, useGridApiOptionHandler, useGridLogger, useGridNativeEventListener, useGridSelector, useOnMount } from '../../utils';
+import { gridVirtualizationColumnEnabledSelector } from '../virtualization';
+import { createControllablePromise } from '../../../utils/createControllablePromise';
+import { clamp } from '../../../utils/utils';
+import { useTimeout } from '../../utils/useTimeout';
+import { GridPinnedColumnPosition } from '../columns/gridColumnsInterfaces';
+import { gridColumnsStateSelector } from '../columns';
+// TODO: remove support for Safari < 13.
+// https://caniuse.com/#search=touch-action
+//
+// Safari, on iOS, supports touch action since v13.
+// Over 80% of the iOS phones are compatible
+// in August 2020.
+// Utilizing the CSS.supports method to check if touch-action is supported.
+// Since CSS.supports is supported on all but Edge@12 and IE and touch-action
+// is supported on both Edge@12 and IE if CSS.supports is not available that means that
+// touch-action will be supported
+let cachedSupportsTouchActionNone = false;
+function doesSupportTouchActionNone() {
+  if (cachedSupportsTouchActionNone === undefined) {
+    if (typeof CSS !== 'undefined' && typeof CSS.supports === 'function') {
+      cachedSupportsTouchActionNone = CSS.supports('touch-action', 'none');
+    } else {
+      cachedSupportsTouchActionNone = true;
+    }
+  }
+  return cachedSupportsTouchActionNone;
+}
+function trackFinger(event, currentTouchId) {
+  if (currentTouchId !== undefined && event.changedTouches) {
+    for (let i = 0; i < event.changedTouches.length; i += 1) {
+      const touch = event.changedTouches[i];
+      if (touch.identifier === currentTouchId) {
+        return {
+          x: touch.clientX,
+          y: touch.clientY
+        };
+      }
+    }
+    return false;
+  }
+  return {
+    x: event.clientX,
+    y: event.clientY
+  };
+}
+function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, resizeDirection) {
+  let newWidth = initialOffsetToSeparator;
+  if (resizeDirection === 'Right') {
+    newWidth += clickX - columnBounds.left;
+  } else {
+    newWidth += columnBounds.right - clickX;
+  }
+  return newWidth;
+}
+function computeOffsetToSeparator(clickX, columnBounds, resizeDirection) {
+  if (resizeDirection === 'Left') {
+    return clickX - columnBounds.left;
+  }
+  return columnBounds.right - clickX;
+}
+function flipResizeDirection(side) {
+  if (side === 'Right') {
+    return 'Left';
+  }
+  return 'Right';
+}
+function getResizeDirection(separator, direction) {
+  const side = separator.classList.contains(gridClasses['columnSeparator--sideRight']) ? 'Right' : 'Left';
+  if (direction === 'rtl') {
+    // Resizing logic should be mirrored in the RTL case
+    return flipResizeDirection(side);
+  }
+  return side;
+}
+function preventClick(event) {
+  event.preventDefault();
+  event.stopImmediatePropagation();
+}
+
+/**
+ * Checker that returns a promise that resolves when the column virtualization
+ * is disabled.
+ */
+function useColumnVirtualizationDisabled(apiRef) {
+  const promise = React.useRef();
+  const selector = () => gridVirtualizationColumnEnabledSelector(apiRef);
+  const value = useGridSelector(apiRef, selector);
+  React.useEffect(() => {
+    if (promise.current && value === false) {
+      promise.current.resolve();
+      promise.current = undefined;
+    }
+  });
+  const asyncCheck = () => {
+    if (!promise.current) {
+      if (selector() === false) {
+        return Promise.resolve();
+      }
+      promise.current = createControllablePromise();
+    }
+    return promise.current;
+  };
+  return asyncCheck;
+}
+
+/**
+ * Basic statistical outlier detection, checks if the value is `F * IQR` away from
+ * the Q1 and Q3 boundaries. IQR: interquartile range.
+ */
+function excludeOutliers(inputValues, factor) {
+  if (inputValues.length < 4) {
+    return inputValues;
+  }
+  const values = inputValues.slice();
+  values.sort((a, b) => a - b);
+  const q1 = values[Math.floor(values.length * 0.25)];
+  const q3 = values[Math.floor(values.length * 0.75) - 1];
+  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.
+  // 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.
+  const deviation = iqr < 5 ? 5 : iqr * factor;
+  return values.filter(v => v > q1 - deviation && v < q3 + deviation);
+}
+function extractColumnWidths(apiRef, options, columns) {
+  const widthByField = {};
+  const root = apiRef.current.rootElementRef.current;
+  root.classList.add(gridClasses.autosizing);
+  columns.forEach(column => {
+    const cells = findGridCells(apiRef.current, column.field);
+    const widths = cells.map(cell => {
+      return cell.getBoundingClientRect().width ?? 0;
+    });
+    const filteredWidths = options.includeOutliers ? widths : excludeOutliers(widths, options.outliersFactor);
+    if (options.includeHeaders) {
+      const header = findGridHeader(apiRef.current, column.field);
+      if (header) {
+        const title = header.querySelector(`.${gridClasses.columnHeaderTitle}`);
+        const content = header.querySelector(`.${gridClasses.columnHeaderTitleContainerContent}`);
+        const iconContainer = header.querySelector(`.${gridClasses.iconButtonContainer}`);
+        const menuContainer = header.querySelector(`.${gridClasses.menuIcon}`);
+        const element = title ?? content;
+        const style = window.getComputedStyle(header, null);
+        const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
+        const contentWidth = element.scrollWidth + 1;
+        const width = contentWidth + paddingWidth + (iconContainer?.clientWidth ?? 0) + (menuContainer?.clientWidth ?? 0);
+        filteredWidths.push(width);
+      }
+    }
+    const hasColumnMin = column.minWidth !== -Infinity && column.minWidth !== undefined;
+    const hasColumnMax = column.maxWidth !== Infinity && column.maxWidth !== undefined;
+    const min = hasColumnMin ? column.minWidth : 0;
+    const max = hasColumnMax ? column.maxWidth : Infinity;
+    const maxContent = filteredWidths.length === 0 ? 0 : Math.max(...filteredWidths);
+    widthByField[column.field] = clamp(maxContent, min, max);
+  });
+  root.classList.remove(gridClasses.autosizing);
+  return widthByField;
+}
+export const columnResizeStateInitializer = state => _extends({}, state, {
+  columnResize: {
+    resizingColumnField: ''
+  }
+});
+/**
+ * @requires useGridColumns (method, event)
+ * TODO: improve experience for last column
+ */
+export const useGridColumnResize = (apiRef, props) => {
+  const theme = useTheme();
+  const logger = useGridLogger(apiRef, 'useGridColumnResize');
+  const colDefRef = React.useRef();
+  const previousMouseClickEvent = React.useRef();
+  const columnHeaderElementRef = React.useRef();
+  const headerFilterElementRef = React.useRef();
+  const groupHeaderElementsRef = React.useRef([]);
+  const cellElementsRef = React.useRef([]);
+  const leftPinnedCellsAfterRef = React.useRef([]);
+  const rightPinnedCellsBeforeRef = React.useRef([]);
+  const fillerLeftRef = React.useRef();
+  const fillerRightRef = React.useRef();
+  const leftPinnedHeadersAfterRef = React.useRef([]);
+  const rightPinnedHeadersBeforeRef = React.useRef([]);
+
+  // To improve accessibility, the separator has padding on both sides.
+  // Clicking inside the padding area should be treated as a click in the separator.
+  // This ref stores the offset between the click and the separator.
+  const initialOffsetToSeparator = React.useRef();
+  const resizeDirection = React.useRef();
+  const stopResizeEventTimeout = useTimeout();
+  const touchId = React.useRef();
+  const updateWidth = newWidth => {
+    logger.debug(`Updating width to ${newWidth} for col ${colDefRef.current.field}`);
+    const prevWidth = columnHeaderElementRef.current.offsetWidth;
+    const widthDiff = newWidth - prevWidth;
+    colDefRef.current.computedWidth = newWidth;
+    colDefRef.current.width = newWidth;
+    colDefRef.current.flex = 0;
+    columnHeaderElementRef.current.style.width = `${newWidth}px`;
+    columnHeaderElementRef.current.style.minWidth = `${newWidth}px`;
+    columnHeaderElementRef.current.style.maxWidth = `${newWidth}px`;
+    const headerFilterElement = headerFilterElementRef.current;
+    if (headerFilterElement) {
+      headerFilterElement.style.width = `${newWidth}px`;
+      headerFilterElement.style.minWidth = `${newWidth}px`;
+      headerFilterElement.style.maxWidth = `${newWidth}px`;
+    }
+    groupHeaderElementsRef.current.forEach(element => {
+      const div = element;
+      let finalWidth;
+      if (div.getAttribute('aria-colspan') === '1') {
+        finalWidth = `${newWidth}px`;
+      } else {
+        // Cell with colspan > 1 cannot be just updated width new width.
+        // Instead, we add width diff to the current width.
+        finalWidth = `${div.offsetWidth + widthDiff}px`;
+      }
+      div.style.width = finalWidth;
+      div.style.minWidth = finalWidth;
+      div.style.maxWidth = finalWidth;
+    });
+    cellElementsRef.current.forEach(element => {
+      const div = element;
+      let finalWidth;
+      if (div.getAttribute('aria-colspan') === '1') {
+        finalWidth = `${newWidth}px`;
+      } else {
+        // Cell with colspan > 1 cannot be just updated width new width.
+        // Instead, we add width diff to the current width.
+        finalWidth = `${div.offsetWidth + widthDiff}px`;
+      }
+      div.style.setProperty('--width', finalWidth);
+    });
+    const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, colDefRef.current.field);
+    if (pinnedPosition === GridPinnedColumnPosition.LEFT) {
+      updateProperty(fillerLeftRef.current, 'width', widthDiff);
+      leftPinnedCellsAfterRef.current.forEach(cell => {
+        updateProperty(cell, 'left', widthDiff);
+      });
+      leftPinnedHeadersAfterRef.current.forEach(header => {
+        updateProperty(header, 'left', widthDiff);
+      });
+    }
+    if (pinnedPosition === GridPinnedColumnPosition.RIGHT) {
+      updateProperty(fillerRightRef.current, 'width', widthDiff);
+      rightPinnedCellsBeforeRef.current.forEach(cell => {
+        updateProperty(cell, 'right', widthDiff);
+      });
+      rightPinnedHeadersBeforeRef.current.forEach(header => {
+        updateProperty(header, 'right', widthDiff);
+      });
+    }
+  };
+  const finishResize = nativeEvent => {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    stopListening();
+
+    // Prevent double-clicks from being interpreted as two separate clicks
+    if (previousMouseClickEvent.current) {
+      const prevEvent = previousMouseClickEvent.current;
+      const prevTimeStamp = prevEvent.timeStamp;
+      const prevClientX = prevEvent.clientX;
+      const prevClientY = prevEvent.clientY;
+
+      // Check if the current event is part of a double-click
+      if (nativeEvent.timeStamp - prevTimeStamp < 300 && nativeEvent.clientX === prevClientX && nativeEvent.clientY === prevClientY) {
+        previousMouseClickEvent.current = undefined;
+        return;
+      }
+    }
+    if (colDefRef.current) {
+      apiRef.current.setColumnWidth(colDefRef.current.field, colDefRef.current.width);
+      logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
+    }
+    stopResizeEventTimeout.start(0, () => {
+      apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
+    });
+  };
+  const storeReferences = (colDef, separator, xStart) => {
+    const root = apiRef.current.rootElementRef.current;
+    colDefRef.current = colDef;
+    columnHeaderElementRef.current = findHeaderElementFromField(apiRef.current.columnHeadersContainerRef.current, colDef.field);
+    const headerFilterElement = root.querySelector(`.${gridClasses.headerFilterRow} [data-field="${colDef.field}"]`);
+    if (headerFilterElement) {
+      headerFilterElementRef.current = headerFilterElement;
+    }
+    groupHeaderElementsRef.current = findGroupHeaderElementsFromField(apiRef.current.columnHeadersContainerRef?.current, colDef.field);
+    cellElementsRef.current = findGridCellElementsFromCol(columnHeaderElementRef.current, apiRef.current);
+    fillerLeftRef.current = findGridElement(apiRef.current, 'filler--pinnedLeft');
+    fillerRightRef.current = findGridElement(apiRef.current, 'filler--pinnedRight');
+    const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, colDefRef.current.field);
+    leftPinnedCellsAfterRef.current = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedCellsAfterCol(apiRef.current, columnHeaderElementRef.current);
+    rightPinnedCellsBeforeRef.current = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedCellsBeforeCol(apiRef.current, columnHeaderElementRef.current);
+    leftPinnedHeadersAfterRef.current = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedHeadersAfterCol(apiRef.current, columnHeaderElementRef.current);
+    rightPinnedHeadersBeforeRef.current = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedHeadersBeforeCol(apiRef.current, columnHeaderElementRef.current);
+    resizeDirection.current = getResizeDirection(separator, theme.direction);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(xStart, columnHeaderElementRef.current.getBoundingClientRect(), resizeDirection.current);
+  };
+  const handleResizeMouseUp = useEventCallback(finishResize);
+  const handleResizeMouseMove = useEventCallback(nativeEvent => {
+    // Cancel move in case some other element consumed a mouseup event and it was not fired.
+    if (nativeEvent.buttons === 0) {
+      handleResizeMouseUp(nativeEvent);
+      return;
+    }
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, columnHeaderElementRef.current.getBoundingClientRect(), resizeDirection.current);
+    newWidth = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
+    updateWidth(newWidth);
+    const params = {
+      element: columnHeaderElementRef.current,
+      colDef: colDefRef.current,
+      width: newWidth
+    };
+    apiRef.current.publishEvent('columnResize', params, nativeEvent);
+  });
+  const handleTouchEnd = useEventCallback(nativeEvent => {
+    const finger = trackFinger(nativeEvent, touchId.current);
+    if (!finger) {
+      return;
+    }
+    finishResize(nativeEvent);
+  });
+  const handleTouchMove = useEventCallback(nativeEvent => {
+    const finger = trackFinger(nativeEvent, touchId.current);
+    if (!finger) {
+      return;
+    }
+
+    // Cancel move in case some other element consumed a touchmove event and it was not fired.
+    if (nativeEvent.type === 'mousemove' && nativeEvent.buttons === 0) {
+      handleTouchEnd(nativeEvent);
+      return;
+    }
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, columnHeaderElementRef.current.getBoundingClientRect(), resizeDirection.current);
+    newWidth = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
+    updateWidth(newWidth);
+    const params = {
+      element: columnHeaderElementRef.current,
+      colDef: colDefRef.current,
+      width: newWidth
+    };
+    apiRef.current.publishEvent('columnResize', params, nativeEvent);
+  });
+  const handleTouchStart = useEventCallback(event => {
+    const cellSeparator = findParentElementFromClassName(event.target, gridClasses['columnSeparator--resizable']);
+    // Let the event bubble if the target is not a col separator
+    if (!cellSeparator) {
+      return;
+    }
+    // If touch-action: none; is not supported we need to prevent the scroll manually.
+    if (!doesSupportTouchActionNone()) {
+      event.preventDefault();
+    }
+    const touch = event.changedTouches[0];
+    if (touch != null) {
+      // A number that uniquely identifies the current finger in the touch session.
+      touchId.current = touch.identifier;
+    }
+    const columnHeaderElement = findParentElementFromClassName(event.target, gridClasses.columnHeader);
+    const field = getFieldFromHeaderElem(columnHeaderElement);
+    const colDef = apiRef.current.getColumn(field);
+    logger.debug(`Start Resize on col ${colDef.field}`);
+    apiRef.current.publishEvent('columnResizeStart', {
+      field
+    }, event);
+    storeReferences(colDef, cellSeparator, touch.clientX);
+    const doc = ownerDocument(event.currentTarget);
+    doc.addEventListener('touchmove', handleTouchMove);
+    doc.addEventListener('touchend', handleTouchEnd);
+  });
+  const stopListening = React.useCallback(() => {
+    const doc = ownerDocument(apiRef.current.rootElementRef.current);
+    doc.body.style.removeProperty('cursor');
+    doc.removeEventListener('mousemove', handleResizeMouseMove);
+    doc.removeEventListener('mouseup', handleResizeMouseUp);
+    doc.removeEventListener('touchmove', handleTouchMove);
+    doc.removeEventListener('touchend', handleTouchEnd);
+    // The click event runs right after the mouseup event, we want to wait until it
+    // has been canceled before removing our handler.
+    setTimeout(() => {
+      doc.removeEventListener('click', preventClick, true);
+    }, 100);
+    if (columnHeaderElementRef.current) {
+      columnHeaderElementRef.current.style.pointerEvents = 'unset';
+    }
+  }, [apiRef, columnHeaderElementRef, handleResizeMouseMove, handleResizeMouseUp, handleTouchMove, handleTouchEnd]);
+  const handleResizeStart = React.useCallback(({
+    field
+  }) => {
+    apiRef.current.setState(state => _extends({}, state, {
+      columnResize: _extends({}, state.columnResize, {
+        resizingColumnField: field
+      })
+    }));
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  const handleResizeStop = React.useCallback(() => {
+    apiRef.current.setState(state => _extends({}, state, {
+      columnResize: _extends({}, state.columnResize, {
+        resizingColumnField: ''
+      })
+    }));
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  const handleColumnResizeMouseDown = useEventCallback(({
+    colDef
+  }, event) => {
+    // Only handle left clicks
+    if (event.button !== 0) {
+      return;
+    }
+
+    // Skip if the column isn't resizable
+    if (!event.currentTarget.classList.contains(gridClasses['columnSeparator--resizable'])) {
+      return;
+    }
+
+    // Avoid text selection
+    event.preventDefault();
+    logger.debug(`Start Resize on col ${colDef.field}`);
+    apiRef.current.publishEvent('columnResizeStart', {
+      field: colDef.field
+    }, event);
+    storeReferences(colDef, event.currentTarget, event.clientX);
+    const doc = ownerDocument(apiRef.current.rootElementRef.current);
+    doc.body.style.cursor = 'col-resize';
+    previousMouseClickEvent.current = event.nativeEvent;
+    doc.addEventListener('mousemove', handleResizeMouseMove);
+    doc.addEventListener('mouseup', handleResizeMouseUp);
+
+    // Prevent the click event if we have resized the column.
+    // Fixes https://github.com/mui/mui-x/issues/4777
+    doc.addEventListener('click', preventClick, true);
+  });
+  const handleColumnSeparatorDoubleClick = useEventCallback((params, event) => {
+    if (props.disableAutosize) {
+      return;
+    }
+
+    // Only handle left clicks
+    if (event.button !== 0) {
+      return;
+    }
+    const column = apiRef.current.state.columns.lookup[params.field];
+    if (column.resizable === false) {
+      return;
+    }
+    apiRef.current.autosizeColumns(_extends({}, props.autosizeOptions, {
+      columns: [column.field]
+    }));
+  });
+
+  /**
+   * API METHODS
+   */
+
+  const columnVirtualizationDisabled = useColumnVirtualizationDisabled(apiRef);
+  const isAutosizingRef = React.useRef(false);
+  const autosizeColumns = React.useCallback(async userOptions => {
+    const root = apiRef.current.rootElementRef?.current;
+    if (!root) {
+      return;
+    }
+    if (isAutosizingRef.current) {
+      return;
+    }
+    isAutosizingRef.current = true;
+    const state = gridColumnsStateSelector(apiRef.current.state);
+    const options = _extends({}, DEFAULT_GRID_AUTOSIZE_OPTIONS, userOptions, {
+      columns: userOptions?.columns ?? state.orderedFields
+    });
+    options.columns = options.columns.filter(c => state.columnVisibilityModel[c] !== false);
+    const columns = options.columns.map(c => apiRef.current.state.columns.lookup[c]);
+    try {
+      apiRef.current.unstable_setColumnVirtualization(false);
+      await columnVirtualizationDisabled();
+      const widthByField = extractColumnWidths(apiRef, options, columns);
+      const newColumns = columns.map(column => _extends({}, column, {
+        width: widthByField[column.field],
+        computedWidth: widthByField[column.field]
+      }));
+      if (options.expand) {
+        const visibleColumns = state.orderedFields.map(field => state.lookup[field]).filter(c => state.columnVisibilityModel[c.field] !== false);
+        const totalWidth = visibleColumns.reduce((total, column) => total + (widthByField[column.field] ?? column.computedWidth ?? column.width), 0);
+        const availableWidth = apiRef.current.getRootDimensions().viewportInnerSize.width;
+        const remainingWidth = availableWidth - totalWidth;
+        if (remainingWidth > 0) {
+          const widthPerColumn = remainingWidth / (newColumns.length || 1);
+          newColumns.forEach(column => {
+            column.width += widthPerColumn;
+            column.computedWidth += widthPerColumn;
+          });
+        }
+      }
+      apiRef.current.updateColumns(newColumns);
+      newColumns.forEach((newColumn, index) => {
+        if (newColumn.width !== columns[index].width) {
+          const width = newColumn.width;
+          apiRef.current.publishEvent('columnWidthChange', {
+            element: apiRef.current.getColumnHeaderElement(newColumn.field),
+            colDef: newColumn,
+            width
+          });
+        }
+      });
+    } finally {
+      apiRef.current.unstable_setColumnVirtualization(true);
+      isAutosizingRef.current = false;
+    }
+  }, [apiRef, columnVirtualizationDisabled]);
+
+  /**
+   * EFFECTS
+   */
+
+  React.useEffect(() => stopListening, [stopListening]);
+  useOnMount(() => {
+    if (props.autosizeOnMount) {
+      Promise.resolve().then(() => {
+        apiRef.current.autosizeColumns(props.autosizeOptions);
+      });
+    }
+  });
+  useGridNativeEventListener(apiRef, () => apiRef.current.columnHeadersContainerRef?.current, 'touchstart', handleTouchStart, {
+    passive: doesSupportTouchActionNone()
+  });
+  useGridApiMethod(apiRef, {
+    autosizeColumns
+  }, 'public');
+  useGridApiEventHandler(apiRef, 'columnResizeStop', handleResizeStop);
+  useGridApiEventHandler(apiRef, 'columnResizeStart', handleResizeStart);
+  useGridApiEventHandler(apiRef, 'columnSeparatorMouseDown', handleColumnResizeMouseDown);
+  useGridApiEventHandler(apiRef, 'columnSeparatorDoubleClick', handleColumnSeparatorDoubleClick);
+  useGridApiOptionHandler(apiRef, 'columnResize', props.onColumnResize);
+  useGridApiOptionHandler(apiRef, 'columnWidthChange', props.onColumnWidthChange);
+};
+function updateProperty(element, property, delta) {
+  if (!element) {
+    return;
+  }
+  element.style[property] = `${parseInt(element.style[property], 10) + delta}px`;
+}

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

@@ -3,6 +3,7 @@ import { DEFAULT_GRID_COL_TYPE_KEY, GRID_STRING_COL_DEF, getGridDefaultColumnTyp
 import { gridColumnsStateSelector, gridColumnVisibilityModelSelector } from './gridColumnsSelector';
 import { clamp } from '../../../utils/utils';
 import { gridDensityFactorSelector } from '../density/densitySelector';
+import { gridHeaderFilteringEnabledSelector } from '../headerFiltering/gridHeaderFilteringSelectors';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
 export const COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
 const COLUMN_TYPES = getGridDefaultColumnTypes();
@@ -325,5 +326,7 @@ export function getFirstColumnIndexToRender({
 export function getTotalHeaderHeight(apiRef, headerHeight) {
   const densityFactor = gridDensityFactorSelector(apiRef);
   const maxDepth = gridColumnGroupsHeaderMaxDepthSelector(apiRef);
-  return Math.floor(headerHeight * densityFactor) * ((maxDepth ?? 0) + 1);
+  const isHeaderFilteringEnabled = gridHeaderFilteringEnabledSelector(apiRef);
+  const multiplicationFactor = isHeaderFilteringEnabled ? 2 : 1;
+  return Math.floor(headerHeight * densityFactor) * ((maxDepth ?? 0) + multiplicationFactor);
 }

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

@@ -53,9 +53,7 @@ export function useGridDimensions(apiRef, props) {
   const rowHeight = Math.floor(props.rowHeight * densityFactor);
   const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
   const columnsTotalWidth = roundToDecimalPlaces(gridColumnsTotalWidthSelector(apiRef), 6);
-  // XXX: The `props as any` below is not resilient to change.
-  const hasHeaderFilters = Boolean(props.headerFilters);
-  const headersTotalHeight = getTotalHeaderHeight(apiRef, props.columnHeaderHeight) + Number(hasHeaderFilters) * headerHeight;
+  const headersTotalHeight = getTotalHeaderHeight(apiRef, props.columnHeaderHeight);
   const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
   const [savedSize, setSavedSize] = React.useState();
@@ -112,8 +110,9 @@ export function useGridDimensions(apiRef, props) {
     const scrollbarSize = measureScrollbarSize(rootElement, columnsTotalWidth, props.scrollbarSize);
     const topContainerHeight = headersTotalHeight + pinnedRowsHeight.top;
     const bottomContainerHeight = pinnedRowsHeight.bottom;
+    const nonPinnedColumnsTotalWidth = columnsTotalWidth - leftPinnedWidth - rightPinnedWidth;
     const contentSize = {
-      width: columnsTotalWidth,
+      width: nonPinnedColumnsTotalWidth,
       height: rowsMeta.currentPageTotalHeight
     };
     let viewportOuterSize;
@@ -162,7 +161,7 @@ export function useGridDimensions(apiRef, props) {
     }
     const rowWidth = Math.max(viewportOuterSize.width, columnsTotalWidth + (hasScrollY ? scrollbarSize : 0));
     const minimumSize = {
-      width: contentSize.width,
+      width: columnsTotalWidth,
       height: topContainerHeight + contentSize.height + bottomContainerHeight
     };
     const newDimensions = {

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

@@ -234,8 +234,27 @@ export const useGridCellEditing = (apiRef, props) => {
       initialValue
     } = params;
     let newValue = apiRef.current.getCellValue(id, field);
-    if (deleteValue || initialValue) {
-      newValue = deleteValue ? '' : initialValue;
+    if (deleteValue) {
+      const fieldType = apiRef.current.getColumn(field).type;
+      switch (fieldType) {
+        case 'boolean':
+          newValue = false;
+          break;
+        case 'date':
+        case 'dateTime':
+        case 'number':
+          newValue = undefined;
+          break;
+        case 'singleSelect':
+          newValue = null;
+          break;
+        case 'string':
+        default:
+          newValue = '';
+          break;
+      }
+    } else if (initialValue) {
+      newValue = initialValue;
     }
     const newProps = {
       value: newValue,

package/modern/hooks/features/export/useGridPrintExport.js

@@ -8,7 +8,7 @@ import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { defaultGetRowsToExport, getColumnsToExport } from './utils';
-import { mergeStateWithPaginationModel } from '../pagination/useGridPagination';
+import { getDerivedPaginationModel } from '../pagination/useGridPaginationModel';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GridPrintExportMenuItem } from '../../../components/toolbar/GridToolbarExport';
 import { getTotalHeaderHeight } from '../columns/gridColumnsUtils';
@@ -95,9 +95,6 @@ export const useGridPrintExport = (apiRef, props) => {
 
     // See https://support.google.com/chrome/thread/191619088?hl=en&msgid=193009642
     gridClone.style.contain = 'size';
-    const columnHeaders = gridClone.querySelector(`.${gridClasses.columnHeaders}`);
-    const columnHeadersInner = columnHeaders.querySelector(`.${gridClasses.columnHeadersInner}`);
-    columnHeadersInner.style.width = '100%';
     let gridToolbarElementHeight = gridRootElement.querySelector(`.${gridClasses.toolbarContainer}`)?.offsetHeight || 0;
     let gridFooterElementHeight = gridRootElement.querySelector(`.${gridClasses.footerContainer}`)?.offsetHeight || 0;
     if (normalizeOptions.hideToolbar) {
@@ -218,9 +215,13 @@ export const useGridPrintExport = (apiRef, props) => {
         page: 0,
         pageSize: visibleRowCount
       };
-      apiRef.current.updateControlState('pagination',
-      // Using signature `DataGridPro` to allow more than 100 rows in the print export
-      mergeStateWithPaginationModel(visibleRowCount, 'DataGridPro', paginationModel));
+      apiRef.current.setState(state => _extends({}, state, {
+        pagination: _extends({}, state.pagination, {
+          paginationModel: getDerivedPaginationModel(state.pagination,
+          // Using signature `DataGridPro` to allow more than 100 rows in the print export
+          'DataGridPro', paginationModel)
+        })
+      }));
       apiRef.current.forceUpdate();
     }
     await updateGridColumnsForPrint(options?.fields, options?.allColumns, options?.includeCheckboxes);

package/modern/hooks/features/headerFiltering/gridHeaderFilteringSelectors.js

@@ -1,4 +1,7 @@
 import { createSelector } from '../../../utils/createSelector';
 export const gridHeaderFilteringStateSelector = state => state.headerFiltering;
+export const gridHeaderFilteringEnabledSelector = createSelector(gridHeaderFilteringStateSelector,
+// No initialization in MIT, so we need to default to false to be used by `getTotalHeaderHeight`
+headerFilteringState => headerFilteringState?.enabled ?? false);
 export const gridHeaderFilteringEditFieldSelector = createSelector(gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.editing);
 export const gridHeaderFilteringMenuSelector = createSelector(gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.menuOpen);