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

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 (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.
+  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();
@@ -303,27 +304,10 @@ export function getFirstNonSpannedColumnToRender({
   }
   return firstNonSpannedColumnToRender;
 }
-export 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;
-}
 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/density/densitySelector.js

@@ -1,4 +1,10 @@
 import { createSelector } from '../../../utils/createSelector';
+export const COMPACT_DENSITY_FACTOR = 0.7;
+export const COMFORTABLE_DENSITY_FACTOR = 1.3;
+const DENSITY_FACTORS = {
+  compact: COMPACT_DENSITY_FACTOR,
+  comfortable: COMFORTABLE_DENSITY_FACTOR,
+  standard: 1
+};
 export const gridDensitySelector = state => state.density;
-export const gridDensityValueSelector = createSelector(gridDensitySelector, density => density.value);
-export const gridDensityFactorSelector = createSelector(gridDensitySelector, density => density.factor);
+export const gridDensityFactorSelector = createSelector(gridDensitySelector, density => DENSITY_FACTORS[density]);

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

@@ -1,43 +1,35 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridDensitySelector } from './densitySelector';
-import { isDeepEqual } from '../../../utils/utils';
-export const COMPACT_DENSITY_FACTOR = 0.7;
-export const COMFORTABLE_DENSITY_FACTOR = 1.3;
-const DENSITY_FACTORS = {
-  compact: COMPACT_DENSITY_FACTOR,
-  comfortable: COMFORTABLE_DENSITY_FACTOR,
-  standard: 1
-};
 export const densityStateInitializer = (state, props) => _extends({}, state, {
-  density: {
-    value: props.density,
-    factor: DENSITY_FACTORS[props.density]
-  }
+  density: props.initialState?.density ?? props.density ?? 'standard'
 });
 export const useGridDensity = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useDensity');
-  const setDensity = React.useCallback(newDensity => {
+  apiRef.current.registerControlState({
+    stateId: 'density',
+    propModel: props.density,
+    propOnChange: props.onDensityChange,
+    stateSelector: gridDensitySelector,
+    changeEvent: 'densityChange'
+  });
+  const setDensity = useEventCallback(newDensity => {
+    const currentDensity = gridDensitySelector(apiRef.current.state);
+    if (currentDensity === newDensity) {
+      return;
+    }
     logger.debug(`Set grid density to ${newDensity}`);
-    apiRef.current.setState(state => {
-      const currentDensityState = gridDensitySelector(state);
-      const newDensityState = {
-        value: newDensity,
-        factor: DENSITY_FACTORS[newDensity]
-      };
-      if (isDeepEqual(currentDensityState, newDensityState)) {
-        return state;
-      }
-      return _extends({}, state, {
-        density: newDensityState
-      });
-    });
-    apiRef.current.forceUpdate();
-  }, [logger, apiRef]);
+    apiRef.current.setState(state => _extends({}, state, {
+      density: newDensity
+    }));
+  });
   React.useEffect(() => {
-    apiRef.current.setDensity(props.density);
+    if (props.density) {
+      apiRef.current.setDensity(props.density);
+    }
   }, [apiRef, props.density]);
   const densityApi = {
     setDensity