@mui/x-data-grid-pro 6.14.0 → 6.15.0

package/hooks/features/columnResize/useGridColumnResize.js

@@ -1,10 +1,11 @@
 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 { gridClasses, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
-import { clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
+import { gridClasses, useGridApiEventHandler, useGridApiOptionHandler, useGridApiMethod, useGridNativeEventListener, useGridLogger, useGridSelector, gridVirtualizationColumnEnabledSelector } from '@mui/x-data-grid';
+import { clamp, findParentElementFromClassName, gridColumnsStateSelector, useOnMount, useTimeout, createControllablePromise } from '@mui/x-data-grid/internals';
 import { useTheme } from '@mui/material/styles';
-import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField, findGroupHeaderElementsFromField } from '../../../utils/domUtils';
+import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField, findGroupHeaderElementsFromField, findGridHeader, findGridCells } from '../../../utils/domUtils';
+import { DEFAULT_GRID_AUTOSIZE_OPTIONS } from './gridColumnResizeApi';
 // TODO: remove support for Safari < 13.
 // https://caniuse.com/#search=touch-action
 //
@@ -73,12 +74,104 @@ function getResizeDirection(element, direction) {
   }
   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 = {};
+  columns.forEach(column => {
+    const cells = findGridCells(apiRef.current, column.field);
+    const widths = cells.map(cell => {
+      var _getAttribute, _cell$firstElementChi, _cell$firstElementChi2;
+      const id = (_getAttribute = cell.parentElement.getAttribute('data-id')) != null ? _getAttribute : '';
+      const hasAutoHeight = apiRef.current.rowHasAutoHeight(id);
+      if (hasAutoHeight) {
+        var _computedWidth;
+        return (_computedWidth = column.computedWidth) != null ? _computedWidth : column.width;
+      }
+      const style = window.getComputedStyle(cell, null);
+      const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
+      const contentWidth = ((_cell$firstElementChi = (_cell$firstElementChi2 = cell.firstElementChild) == null ? void 0 : _cell$firstElementChi2.scrollWidth) != null ? _cell$firstElementChi : -1) + 1;
+      return paddingWidth + contentWidth;
+    });
+    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 element = title != null ? 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 = paddingWidth + contentWidth;
+        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);
+  });
+  return widthByField;
+}
 export const columnResizeStateInitializer = state => _extends({}, state, {
   columnResize: {
     resizingColumnField: ''
   }
 });
-
 /**
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
@@ -97,7 +190,7 @@ export const useGridColumnResize = (apiRef, props) => {
   // This ref stores the offset between the click and the separator.
   const initialOffsetToSeparator = React.useRef();
   const resizeDirection = React.useRef();
-  const stopResizeEventTimeout = React.useRef();
+  const stopResizeEventTimeout = useTimeout();
   const touchId = React.useRef();
   const updateWidth = newWidth => {
     logger.debug(`Updating width to ${newWidth} for col ${colDefRef.current.field}`);
@@ -137,8 +230,7 @@ export const useGridColumnResize = (apiRef, props) => {
       apiRef.current.setColumnWidth(colDefRef.current.field, colDefRef.current.width);
       logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
     }
-    clearTimeout(stopResizeEventTimeout.current);
-    stopResizeEventTimeout.current = setTimeout(() => {
+    stopResizeEventTimeout.start(0, () => {
       apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
     });
   };
@@ -159,44 +251,6 @@ export const useGridColumnResize = (apiRef, props) => {
     };
     apiRef.current.publishEvent('columnResize', params, nativeEvent);
   });
-  const handleColumnResizeMouseDown = useEventCallback(({
-    colDef
-  }, event) => {
-    var _apiRef$current$colum, _apiRef$current$heade, _apiRef$current$colum2;
-    // 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);
-    colDefRef.current = colDef;
-    colElementRef.current = (_apiRef$current$colum = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum.current.querySelector(`[data-field="${colDef.field}"]`);
-    const headerFilterRowElement = (_apiRef$current$heade = apiRef.current.headerFiltersElementRef) == null ? void 0 : _apiRef$current$heade.current;
-    if (headerFilterRowElement) {
-      headerFilterElementRef.current = headerFilterRowElement.querySelector(`[data-field="${colDef.field}"]`);
-    }
-    colGroupingElementRef.current = findGroupHeaderElementsFromField((_apiRef$current$colum2 = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum2.current, colDef.field);
-    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
-    const doc = ownerDocument(apiRef.current.rootElementRef.current);
-    doc.body.style.cursor = 'col-resize';
-    resizeDirection.current = getResizeDirection(event.currentTarget, theme.direction);
-    initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
-    doc.addEventListener('mousemove', handleResizeMouseMove);
-    doc.addEventListener('mouseup', handleResizeMouseUp);
-
-    // Fixes https://github.com/mui/mui-x/issues/4777
-    colElementRef.current.style.pointerEvents = 'none';
-  });
   const handleTouchEnd = useEventCallback(nativeEvent => {
     const finger = trackFinger(nativeEvent, touchId.current);
     if (!finger) {
@@ -226,7 +280,7 @@ export const useGridColumnResize = (apiRef, props) => {
     apiRef.current.publishEvent('columnResize', params, nativeEvent);
   });
   const handleTouchStart = useEventCallback(event => {
-    var _apiRef$current$colum3, _apiRef$current$colum4;
+    var _apiRef$current$colum, _apiRef$current$colum2;
     const cellSeparator = findParentElementFromClassName(event.target, gridClasses['columnSeparator--resizable']);
     // Let the event bubble if the target is not a col separator
     if (!cellSeparator) {
@@ -244,13 +298,13 @@ export const useGridColumnResize = (apiRef, props) => {
     colElementRef.current = findParentElementFromClassName(event.target, gridClasses.columnHeader);
     const field = getFieldFromHeaderElem(colElementRef.current);
     const colDef = apiRef.current.getColumn(field);
-    colGroupingElementRef.current = findGroupHeaderElementsFromField((_apiRef$current$colum3 = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum3.current, field);
+    colGroupingElementRef.current = findGroupHeaderElementsFromField((_apiRef$current$colum = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum.current, field);
     logger.debug(`Start Resize on col ${colDef.field}`);
     apiRef.current.publishEvent('columnResizeStart', {
       field
     }, event);
     colDefRef.current = colDef;
-    colElementRef.current = findHeaderElementFromField((_apiRef$current$colum4 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum4.current, colDef.field);
+    colElementRef.current = findHeaderElementFromField((_apiRef$current$colum2 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum2.current, colDef.field);
     colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     resizeDirection.current = getResizeDirection(event.target, theme.direction);
     initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
@@ -265,6 +319,11 @@ export const useGridColumnResize = (apiRef, props) => {
     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 (colElementRef.current) {
       colElementRef.current.style.pointerEvents = 'unset';
     }
@@ -287,21 +346,142 @@ export const useGridColumnResize = (apiRef, props) => {
     }));
     apiRef.current.forceUpdate();
   }, [apiRef]);
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(stopResizeEventTimeout.current);
-      stopListening();
-    };
-  }, [apiRef, handleTouchStart, stopListening]);
+  const handleColumnResizeMouseDown = useEventCallback(({
+    colDef
+  }, event) => {
+    var _apiRef$current$colum3, _apiRef$current$heade, _apiRef$current$colum4;
+    // 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);
+    colDefRef.current = colDef;
+    colElementRef.current = (_apiRef$current$colum3 = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum3.current.querySelector(`[data-field="${colDef.field}"]`);
+    const headerFilterRowElement = (_apiRef$current$heade = apiRef.current.headerFiltersElementRef) == null ? void 0 : _apiRef$current$heade.current;
+    if (headerFilterRowElement) {
+      headerFilterElementRef.current = headerFilterRowElement.querySelector(`[data-field="${colDef.field}"]`);
+    }
+    colGroupingElementRef.current = findGroupHeaderElementsFromField((_apiRef$current$colum4 = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum4.current, colDef.field);
+    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
+    const doc = ownerDocument(apiRef.current.rootElementRef.current);
+    doc.body.style.cursor = 'col-resize';
+    resizeDirection.current = getResizeDirection(event.currentTarget, theme.direction);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
+    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 => {
+    var _apiRef$current$rootE, _userOptions$columns;
+    const root = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE.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 = userOptions == null ? void 0 : userOptions.columns) != null ? _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) {
+        var _apiRef$current$getRo, _apiRef$current$getRo2;
+        const visibleColumns = state.orderedFields.map(field => state.lookup[field]).filter(c => state.columnVisibilityModel[c.field] !== false);
+        const totalWidth = visibleColumns.reduce((total, column) => {
+          var _ref, _widthByField$column$;
+          return total + ((_ref = (_widthByField$column$ = widthByField[column.field]) != null ? _widthByField$column$ : column.computedWidth) != null ? _ref : column.width);
+        }, 0);
+        const availableWidth = (_apiRef$current$getRo = (_apiRef$current$getRo2 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo2.viewportInnerSize.width) != null ? _apiRef$current$getRo : 0;
+        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);
+    } 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, () => {
     var _apiRef$current$colum5;
     return (_apiRef$current$colum5 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum5.current;
   }, 'touchstart', handleTouchStart, {
     passive: doesSupportTouchActionNone()
   });
-  useGridApiEventHandler(apiRef, 'columnSeparatorMouseDown', handleColumnResizeMouseDown);
-  useGridApiEventHandler(apiRef, 'columnResizeStart', handleResizeStart);
+  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);
 };

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v6.14.0
+ * @mui/x-data-grid-pro v6.15.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/DataGridPro/DataGridPro.js

@@ -69,6 +69,21 @@ DataGridProRaw.propTypes = {
    * @default false
    */
   autoPageSize: PropTypes.bool,
+  /**
+   * If `true`, columns are autosized after the datagrid is mounted.
+   * @default false
+   */
+  autosizeOnMount: PropTypes.bool,
+  /**
+   * The options for autosize when user-initiated.
+   */
+  autosizeOptions: PropTypes.shape({
+    columns: PropTypes.arrayOf(PropTypes.string),
+    expand: PropTypes.bool,
+    includeHeaders: PropTypes.bool,
+    includeOutliers: PropTypes.bool,
+    outliersFactor: PropTypes.number
+  }),
   /**
    * Controls the modes of the cells.
    */
@@ -148,6 +163,11 @@ DataGridProRaw.propTypes = {
    * The row ids to show the detail panel.
    */
   detailPanelExpandedRowIds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired),
+  /**
+   * If `true`, column autosizing on header separator double-click is disabled.
+   * @default false
+   */
+  disableAutosize: PropTypes.bool,
   /**
    * If `true`, the filtering will only be applied to the top level rows when grouping rows with the `treeData` prop.
    * @default false

package/legacy/DataGridPro/useDataGridProComponent.js

@@ -1,4 +1,4 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering } from '@mui/x-data-grid/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
 import { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
@@ -54,6 +54,7 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
+  useGridInitializeState(virtualizationStateInitializer, apiRef, props);
   useGridHeaderFiltering(apiRef, props);
   useGridTreeData(apiRef);
   useGridKeyboardNavigation(apiRef, props);
@@ -87,5 +88,6 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   useGridDimensions(apiRef, props);
   useGridEvents(apiRef, props);
   useGridStatePersistence(apiRef);
+  useGridVirtualization(apiRef, props);
   return apiRef;
 };

package/legacy/DataGridPro/useDataGridProProps.js

@@ -13,6 +13,8 @@ export var DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_DEF
   scrollEndThreshold: 80,
   treeData: false,
   defaultGroupingExpansionDepth: 0,
+  autosizeOnMount: false,
+  disableAutosize: false,
   disableColumnPinning: false,
   keepColumnPositionIfDraggedOutside: false,
   disableChildrenFiltering: false,

package/legacy/components/headerFiltering/GridHeaderFilterCell.js

@@ -128,7 +128,7 @@ var GridHeaderFilterCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [apiRef, colDef.field]);
   var onMouseDown = React.useCallback(function (event) {
     if (!hasFocus) {
-      if (inputRef.current) {
+      if (inputRef.current && inputRef.current.contains(event.target)) {
         inputRef.current.focus();
       }
       apiRef.current.setColumnHeaderFilterFocus(colDef.field, event);
@@ -175,8 +175,22 @@ var GridHeaderFilterCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
         onFocus: function onFocus() {
           return apiRef.current.startHeaderFilterEditMode(colDef.field);
         },
-        onBlur: function onBlur() {
-          return apiRef.current.stopHeaderFilterEditMode();
+        onBlur: function onBlur(event) {
+          var _event$relatedTarget;
+          apiRef.current.stopHeaderFilterEditMode();
+          // Blurring an input element should reset focus state only if `relatedTarget` is not the header filter cell
+          if (!((_event$relatedTarget = event.relatedTarget) != null && _event$relatedTarget.className.includes('columnHeader'))) {
+            apiRef.current.setState(function (state) {
+              return _extends({}, state, {
+                focus: {
+                  cell: null,
+                  columnHeader: null,
+                  columnHeaderFilter: null,
+                  columnGroupHeader: null
+                }
+              });
+            });
+          }
         },
         label: capitalize(label),
         placeholder: "",

package/legacy/components/headerFiltering/GridHeaderFilterMenu.js

@@ -34,7 +34,7 @@ function GridHeaderFilterMenu(_ref) {
     placement: "bottom-end",
     open: open,
     target: target,
-    onClickAway: hideMenu,
+    onClose: hideMenu,
     onExited: hideMenu,
     children: /*#__PURE__*/_jsx(MenuList, {
       "aria-labelledby": labelledBy,

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

@@ -28,6 +28,7 @@ var GridHeaderFilterRow = styled('div', {
     display: 'flex'
   };
 });
+var filterItemsCache = Object.create(null);
 export var useGridColumnHeaders = function useGridColumnHeaders(props) {
   var apiRef = useGridPrivateApiContext();
   var headerGroupingMaxDepth = props.headerGroupingMaxDepth,
@@ -51,6 +52,24 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
   var filterModel = useGridSelector(apiRef, gridFilterModelSelector);
   var totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight) + (disableHeaderFiltering ? 0 : headerHeight);
   var columnHeaderFilterFocus = useGridSelector(apiRef, unstable_gridFocusColumnHeaderFilterSelector);
+  var getFilterItem = React.useCallback(function (colDef) {
+    var filterModelItem = filterModel == null ? void 0 : filterModel.items.find(function (it) {
+      return it.field === colDef.field && it.operator !== 'isAnyOf';
+    });
+    if (filterModelItem != null) {
+      // there's a valid `filterModelItem` for this column
+      return filterModelItem;
+    }
+    var defaultCachedItem = filterItemsCache[colDef.field];
+    if (defaultCachedItem != null) {
+      // there's a cached `defaultItem` for this column
+      return defaultCachedItem;
+    }
+    // there's no cached `defaultItem` for this column, let's generate one and cache it
+    var defaultItem = getGridFilter(colDef);
+    filterItemsCache[colDef.field] = defaultItem;
+    return defaultItem;
+  }, [filterModel]);
   var getColumnFilters = function getColumnFilters(params) {
     var other = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     if (disableHeaderFiltering) {
@@ -63,8 +82,8 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
     var renderedColumns = columnsToRender.renderedColumns,
       firstColumnToRender = columnsToRender.firstColumnToRender;
     var filters = [];
-    var _loop = function _loop() {
-      var _colDef$filterOperato, _colDef$filterOperato2, _filterModel$items$fi, _rootProps$slotProps;
+    for (var i = 0; i < renderedColumns.length; i += 1) {
+      var _colDef$filterOperato, _colDef$filterOperato2, _rootProps$slotProps;
       var colDef = renderedColumns[i];
       var columnIndex = firstColumnToRender + i;
       var hasFocus = (columnHeaderFilterFocus == null ? void 0 : columnHeaderFilterFocus.field) === colDef.field;
@@ -80,9 +99,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
       var filterOperators = (_colDef$filterOperato = (_colDef$filterOperato2 = colDef.filterOperators) == null ? void 0 : _colDef$filterOperato2.filter(function (operator) {
         return operator.value !== 'isAnyOf';
       })) != null ? _colDef$filterOperato : [];
-      var item = (_filterModel$items$fi = filterModel == null ? void 0 : filterModel.items.find(function (it) {
-        return it.field === colDef.field && it.operator !== 'isAnyOf';
-      })) != null ? _filterModel$items$fi : getGridFilter(colDef);
+      var item = getFilterItem(colDef);
       filters.push( /*#__PURE__*/_jsx(rootProps.slots.headerFilterCell, _extends({
         colIndex: columnIndex,
         height: headerHeight,
@@ -96,9 +113,6 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
         "data-field": colDef.field,
         item: item
       }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.headerFilterCell, other), "".concat(colDef.field, "-filter")));
-    };
-    for (var i = 0; i < renderedColumns.length; i += 1) {
-      _loop();
     }
     return /*#__PURE__*/_jsx(GridHeaderFilterRow, {
       ref: headerFiltersRef,

package/legacy/hooks/features/columnPinning/useGridColumnPinning.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
-import { useGridSelector, gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector, gridVisibleColumnFieldsSelector, gridClasses, useGridApiMethod, useGridApiEventHandler, gridColumnFieldsSelector } from '@mui/x-data-grid';
+import { useGridSelector, gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector, gridVisibleColumnFieldsSelector, useGridApiMethod, useGridApiEventHandler, gridColumnFieldsSelector } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GridPinnedPosition } from './gridColumnPinningInterface';
 import { gridPinnedColumnsSelector } from './gridColumnPinningSelector';
@@ -40,49 +40,6 @@ export var useGridColumnPinning = function useGridColumnPinning(apiRef, props) {
   var _props$initialState4;
   var pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
   var theme = useTheme();
-  // Each visible row (not to be confused with a filter result) is composed of a central .MuiDataGrid-row element
-  // and up to two additional .MuiDataGrid-row's, one for the columns pinned to the left and another
-  // for those on the right side. When hovering any of these elements, the :hover styles are applied only to
-  // the row element that was actually hovered, not its additional siblings. To make it look like a contiguous row,
-  // this method adds/removes the .Mui-hovered class to all of the row elements inside one visible row.
-  var updateHoveredClassOnSiblingRows = React.useCallback(function (event) {
-    var _pinnedColumns$left$l, _pinnedColumns$left, _pinnedColumns$right$, _pinnedColumns$right;
-    if (props.disableColumnPinning) {
-      return;
-    }
-    if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) {
-      return;
-    }
-    var nbLeftPinnedColumns = (_pinnedColumns$left$l = (_pinnedColumns$left = pinnedColumns.left) == null ? void 0 : _pinnedColumns$left.length) != null ? _pinnedColumns$left$l : 0;
-    var nbRightPinnedColumns = (_pinnedColumns$right$ = (_pinnedColumns$right = pinnedColumns.right) == null ? void 0 : _pinnedColumns$right.length) != null ? _pinnedColumns$right$ : 0;
-    if (nbLeftPinnedColumns + nbRightPinnedColumns === 0) {
-      return;
-    }
-    var rowContainer = apiRef.current.virtualScrollerRef.current;
-    if (!rowContainer) {
-      return;
-    }
-    var index = event.currentTarget.dataset.rowindex;
-    var rowElements = rowContainer.querySelectorAll(".".concat(gridClasses.row, "[data-rowindex=\"").concat(index, "\"]"));
-    rowElements.forEach(function (row) {
-      // Ignore rows from other grid inside the hovered row
-      if (row.closest(".".concat(gridClasses.virtualScroller)) === apiRef.current.virtualScrollerRef.current) {
-        if (event.type === 'mouseenter') {
-          row.classList.add('Mui-hovered');
-        } else {
-          row.classList.remove('Mui-hovered');
-        }
-      }
-    });
-  }, [apiRef, pinnedColumns.left, pinnedColumns.right, props.disableColumnPinning]);
-  var handleMouseEnter = React.useCallback(function (params, event) {
-    updateHoveredClassOnSiblingRows(event);
-  }, [updateHoveredClassOnSiblingRows]);
-  var handleMouseLeave = React.useCallback(function (params, event) {
-    updateHoveredClassOnSiblingRows(event);
-  }, [updateHoveredClassOnSiblingRows]);
-  useGridApiEventHandler(apiRef, 'rowMouseEnter', handleMouseEnter);
-  useGridApiEventHandler(apiRef, 'rowMouseLeave', handleMouseLeave);
 
   /**
    * PRE-PROCESSING

package/legacy/hooks/features/columnResize/gridColumnResizeApi.js

@@ -0,0 +1,10 @@
+export var DEFAULT_GRID_AUTOSIZE_OPTIONS = {
+  includeHeaders: true,
+  includeOutliers: false,
+  outliersFactor: 1.5,
+  expand: false
+};
+
+/**
+ * The Resize API interface that is available in the grid `apiRef`.
+ */

package/legacy/hooks/features/columnResize/index.js

@@ -1,2 +1,3 @@
 export * from './columnResizeSelector';
-export * from './columnResizeState';
+export * from './columnResizeState';
+export * from './gridColumnResizeApi';