@mui/x-data-grid 6.14.0 → 6.16.0

package/internals/index.js

@@ -16,6 +16,7 @@ export { useGridColumnMenu, columnMenuStateInitializer } from '../hooks/features
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
 export { getTotalHeaderHeight } from '../hooks/features/columns/gridColumnsUtils';
 export { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
+export { gridColumnsStateSelector } from '../hooks/features/columns/gridColumnsSelector';
 export { useGridColumnGrouping, columnGroupsStateInitializer } from '../hooks/features/columnGrouping/useGridColumnGrouping';
 export { useGridDensity, densityStateInitializer } from '../hooks/features/density/useGridDensity';
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
@@ -46,10 +47,12 @@ export { useGridEvents } from '../hooks/features/events/useGridEvents';
 export { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
 export { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 export { useGridVirtualScroller, getRenderableIndexes } from '../hooks/features/virtualization/useGridVirtualScroller';
+export * from '../hooks/features/virtualization';
 export { useTimeout } from '../hooks/utils/useTimeout';
 export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibleRows';
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
+export * from '../utils/createControllablePromise';
 export { createSelector, createSelectorMemoized, unstable_resetCreateSelectorCache } from '../utils/createSelector';
 export { findParentElementFromClassName, getActiveElement } from '../utils/domUtils';
 export { isNavigationKey } from '../utils/keyboardUtils';
@@ -57,6 +60,7 @@ export { clamp, isDeepEqual, isNumber, isFunction, isObject } from '../utils/uti
 export { buildWarning } from '../utils/warning';
 export { exportAs } from '../utils/exportAs';
 export { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
+export * from '../hooks/utils/useOnMount';
 export { serializeCellValue } from '../hooks/features/export/serializers/csvSerializer';
 export * from '../colDef/utils';
 export * from './utils';

package/legacy/DataGrid/useDataGridComponent.js

@@ -25,53 +25,56 @@ import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/row
 import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
 import { useGridColumnGrouping, columnGroupsStateInitializer } from '../hooks/features/columnGrouping/useGridColumnGrouping';
+import { useGridVirtualization, virtualizationStateInitializer } from '../hooks/features/virtualization';
 export var useDataGridComponent = function useDataGridComponent(inputApiRef, props) {
-  var privateApiRef = useGridInitialization(inputApiRef, props);
+  var apiRef = useGridInitialization(inputApiRef, props);
 
   /**
    * Register all pre-processors called during state initialization here.
    */
-  useGridRowSelectionPreProcessors(privateApiRef, props);
-  useGridRowsPreProcessors(privateApiRef);
+  useGridRowSelectionPreProcessors(apiRef, props);
+  useGridRowsPreProcessors(apiRef);
 
   /**
    * Register all state initializers here.
    */
-  useGridInitializeState(rowSelectionStateInitializer, privateApiRef, props);
-  useGridInitializeState(columnsStateInitializer, privateApiRef, props);
-  useGridInitializeState(rowsStateInitializer, privateApiRef, props);
-  useGridInitializeState(editingStateInitializer, privateApiRef, props);
-  useGridInitializeState(focusStateInitializer, privateApiRef, props);
-  useGridInitializeState(sortingStateInitializer, privateApiRef, props);
-  useGridInitializeState(preferencePanelStateInitializer, privateApiRef, props);
-  useGridInitializeState(filterStateInitializer, privateApiRef, props);
-  useGridInitializeState(densityStateInitializer, privateApiRef, props);
-  useGridInitializeState(paginationStateInitializer, privateApiRef, props);
-  useGridInitializeState(rowsMetaStateInitializer, privateApiRef, props);
-  useGridInitializeState(columnMenuStateInitializer, privateApiRef, props);
-  useGridInitializeState(columnGroupsStateInitializer, privateApiRef, props);
-  useGridKeyboardNavigation(privateApiRef, props);
-  useGridRowSelection(privateApiRef, props);
-  useGridColumns(privateApiRef, props);
-  useGridRows(privateApiRef, props);
-  useGridParamsApi(privateApiRef, props);
-  useGridColumnSpanning(privateApiRef);
-  useGridColumnGrouping(privateApiRef, props);
-  useGridEditing(privateApiRef, props);
-  useGridFocus(privateApiRef, props);
-  useGridPreferencesPanel(privateApiRef, props);
-  useGridFilter(privateApiRef, props);
-  useGridSorting(privateApiRef, props);
-  useGridDensity(privateApiRef, props);
-  useGridPagination(privateApiRef, props);
-  useGridRowsMeta(privateApiRef, props);
-  useGridScroll(privateApiRef, props);
-  useGridColumnMenu(privateApiRef);
-  useGridCsvExport(privateApiRef, props);
-  useGridPrintExport(privateApiRef, props);
-  useGridClipboard(privateApiRef, props);
-  useGridDimensions(privateApiRef, props);
-  useGridEvents(privateApiRef, props);
-  useGridStatePersistence(privateApiRef);
-  return privateApiRef;
+  useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
+  useGridInitializeState(columnsStateInitializer, apiRef, props);
+  useGridInitializeState(rowsStateInitializer, apiRef, props);
+  useGridInitializeState(editingStateInitializer, apiRef, props);
+  useGridInitializeState(focusStateInitializer, apiRef, props);
+  useGridInitializeState(sortingStateInitializer, apiRef, props);
+  useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
+  useGridInitializeState(filterStateInitializer, apiRef, props);
+  useGridInitializeState(densityStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
+  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
+  useGridInitializeState(columnMenuStateInitializer, apiRef, props);
+  useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
+  useGridInitializeState(virtualizationStateInitializer, apiRef, props);
+  useGridKeyboardNavigation(apiRef, props);
+  useGridRowSelection(apiRef, props);
+  useGridColumns(apiRef, props);
+  useGridRows(apiRef, props);
+  useGridParamsApi(apiRef, props);
+  useGridColumnSpanning(apiRef);
+  useGridColumnGrouping(apiRef, props);
+  useGridEditing(apiRef, props);
+  useGridFocus(apiRef, props);
+  useGridPreferencesPanel(apiRef, props);
+  useGridFilter(apiRef, props);
+  useGridSorting(apiRef, props);
+  useGridDensity(apiRef, props);
+  useGridPagination(apiRef, props);
+  useGridRowsMeta(apiRef, props);
+  useGridScroll(apiRef, props);
+  useGridColumnMenu(apiRef);
+  useGridCsvExport(apiRef, props);
+  useGridPrintExport(apiRef, props);
+  useGridClipboard(apiRef, props);
+  useGridDimensions(apiRef, props);
+  useGridEvents(apiRef, props);
+  useGridStatePersistence(apiRef);
+  useGridVirtualization(apiRef, props);
+  return apiRef;
 };

package/legacy/components/DataGridVirtualScroller.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "disableVirtualization"];
+var _excluded = ["className"];
 import * as React from 'react';
 import { GridVirtualScroller } from './virtualization/GridVirtualScroller';
 import { GridVirtualScrollerContent } from './virtualization/GridVirtualScrollerContent';
@@ -11,11 +11,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var DataGridVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridVirtualScroller(props, ref) {
   var className = props.className,
-    disableVirtualization = props.disableVirtualization,
     other = _objectWithoutProperties(props, _excluded);
   var _useGridVirtualScroll = useGridVirtualScroller({
-      ref: ref,
-      disableVirtualization: disableVirtualization
+      ref: ref
     }),
     getRootProps = _useGridVirtualScroll.getRootProps,
     getContentProps = _useGridVirtualScroll.getContentProps,

package/legacy/components/GridRow.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
+var _excluded = ["selected", "hovered", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -55,6 +55,7 @@ function EmptyCell(_ref) {
 
 var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   var selected = props.selected,
+    hovered = props.hovered,
     rowId = props.rowId,
     row = props.row,
     index = props.index,
@@ -92,6 +93,7 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
 
   var ownerState = {
     selected: selected,
+    hovered: hovered,
     isLastVisible: isLastVisible,
     classes: rootProps.classes,
     editing: apiRef.current.getRowMode(rowId) === GridRowModes.Edit,
@@ -333,7 +335,7 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
-    className: clsx.apply(void 0, _toConsumableArray(rowClassNames).concat([classes.root, className])),
+    className: clsx.apply(void 0, _toConsumableArray(rowClassNames).concat([classes.root, className, hovered && 'Mui-hovered'])),
     "aria-rowindex": ariaRowIndex,
     "aria-selected": selected,
     style: style

package/legacy/components/base/GridBody.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
@@ -38,10 +37,6 @@ function GridBody(props) {
   var columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
   var columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
   var hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
-  var _React$useState = React.useState(rootProps.disableVirtualization),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isVirtualizationDisabled = _React$useState2[0],
-    setIsVirtualizationDisabled = _React$useState2[1];
   useEnhancedEffect(function () {
     apiRef.current.computeSizeAndPublishResizeEvent();
     var elementToObserve = rootRef.current;
@@ -51,7 +46,7 @@ function GridBody(props) {
     var animationFrame;
     var observer = new ResizeObserver(function () {
       // See https://github.com/mui/mui-x/issues/8733
-      animationFrame = window.requestAnimationFrame(function () {
+      animationFrame = requestAnimationFrame(function () {
         apiRef.current.computeSizeAndPublishResizeEvent();
       });
     });
@@ -67,24 +62,6 @@ function GridBody(props) {
       }
     };
   }, [apiRef]);
-  var disableVirtualization = React.useCallback(function () {
-    setIsVirtualizationDisabled(true);
-  }, []);
-  var enableVirtualization = React.useCallback(function () {
-    setIsVirtualizationDisabled(false);
-  }, []);
-  React.useEffect(function () {
-    setIsVirtualizationDisabled(rootProps.disableVirtualization);
-  }, [rootProps.disableVirtualization]);
-
-  // The `useGridApiMethod` hook can't be used here, because it only installs the
-  // method if it doesn't exist yet. Once installed, it's never updated again.
-  // This break the methods above, since their closure comes from the first time
-  // they were installed. Which means that calling `setIsVirtualizationDisabled`
-  // will trigger a re-render, but it won't update the state. That can be solved
-  // by migrating the virtualization status to the global state.
-  apiRef.current.unstable_disableVirtualization = disableVirtualization;
-  apiRef.current.unstable_enableVirtualization = enableVirtualization;
   var columnHeadersRef = React.useRef(null);
   var columnsContainerRef = React.useRef(null);
   var virtualScrollerRef = React.useRef(null);
@@ -121,8 +98,7 @@ function GridBody(props) {
     // If this event is published while dimensions haven't been computed,
     // the `onFetchRows` prop won't be called during mount.
     , {
-      ref: virtualScrollerRef,
-      disableVirtualization: isVirtualizationDisabled
+      ref: virtualScrollerRef
     }), children]
   });
 }

package/legacy/components/cell/GridActionsCell.js

@@ -196,11 +196,11 @@ function GridActionsCell(props) {
         fontSize: "small"
       })
     })), menuButtons.length > 0 && /*#__PURE__*/_jsx(GridMenu, {
-      onClickAway: hideMenu,
-      onClick: hideMenu,
       open: open,
       target: buttonRef.current,
       position: position,
+      onClose: hideMenu,
+      onClick: hideMenu,
       children: /*#__PURE__*/_jsx(MenuList, {
         id: menuId,
         className: gridClasses.menuList,

package/legacy/components/cell/GridCell.js

@@ -233,7 +233,8 @@ var GridCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return {
         padding: 0,
         opacity: 0,
-        width: 0
+        width: 0,
+        border: 0
       };
     }
     var cellStyle = {
@@ -503,7 +504,8 @@ var GridCellV7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return {
         padding: 0,
         opacity: 0,
-        width: 0
+        width: 0,
+        border: 0
       };
     }
     var cellStyle = {

package/legacy/components/columnHeaders/GridColumnHeaderItem.js

@@ -104,7 +104,8 @@ function GridColumnHeaderItem(props) {
   }, [isDraggable, publish]);
   var columnHeaderSeparatorProps = React.useMemo(function () {
     return {
-      onMouseDown: publish('columnSeparatorMouseDown')
+      onMouseDown: publish('columnSeparatorMouseDown'),
+      onDoubleClick: publish('columnSeparatorDoubleClick')
     };
   }, [publish]);
   React.useEffect(function () {

package/legacy/components/menu/GridMenu.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["open", "target", "onClickAway", "children", "position", "className", "onExited"];
+var _excluded = ["open", "target", "onClose", "children", "position", "className", "onExited"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
-import { unstable_composeClasses as composeClasses, HTMLElementType } from '@mui/utils';
+import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect, HTMLElementType } from '@mui/utils';
 import Grow from '@mui/material/Grow';
 import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
@@ -44,7 +44,7 @@ function GridMenu(props) {
   var _rootProps$slotProps;
   var open = props.open,
     target = props.target,
-    onClickAway = props.onClickAway,
+    onClose = props.onClose,
     _children = props.children,
     position = props.position,
     className = props.className,
@@ -53,6 +53,16 @@ function GridMenu(props) {
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
   var classes = useUtilityClasses(rootProps);
+  var savedFocusRef = React.useRef(null);
+  useEnhancedEffect(function () {
+    if (open) {
+      savedFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    } else {
+      var _savedFocusRef$curren, _savedFocusRef$curren2;
+      (_savedFocusRef$curren = savedFocusRef.current) == null || (_savedFocusRef$curren2 = _savedFocusRef$curren.focus) == null || _savedFocusRef$curren2.call(_savedFocusRef$curren);
+      savedFocusRef.current = null;
+    }
+  }, [open]);
   React.useEffect(function () {
     // Emit menuOpen or menuClose events
     var eventName = open ? 'menuOpen' : 'menuClose';
@@ -70,6 +80,12 @@ function GridMenu(props) {
       }
     };
   };
+  var handleClickAway = function handleClickAway(event) {
+    if (event.target && (target === event.target || target != null && target.contains(event.target))) {
+      return;
+    }
+    onClose(event);
+  };
   return /*#__PURE__*/_jsx(GridMenuRoot, _extends({
     as: rootProps.slots.basePopper,
     className: clsx(className, classes.root),
@@ -83,7 +99,7 @@ function GridMenu(props) {
       var TransitionProps = _ref3.TransitionProps,
         placement = _ref3.placement;
       return /*#__PURE__*/_jsx(ClickAwayListener, {
-        onClickAway: onClickAway,
+        onClickAway: handleClickAway,
         mouseEvent: "onMouseDown",
         children: /*#__PURE__*/_jsx(Grow, _extends({}, TransitionProps, {
           style: {
@@ -104,7 +120,7 @@ process.env.NODE_ENV !== "production" ? GridMenu.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
-  onClickAway: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
   onExited: PropTypes.func,
   /**
    * If `true`, the component is shown.

package/legacy/components/menu/columnMenu/GridColumnHeaderMenu.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { HTMLElementType } from '@mui/utils';
+import { unstable_useEventCallback as useEventCallback, HTMLElementType } from '@mui/utils';
 import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
 import { GridMenu } from '../GridMenu';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,13 +16,16 @@ function GridColumnHeaderMenu(_ref) {
     onExited = _ref.onExited;
   var apiRef = useGridApiContext();
   var colDef = apiRef.current.getColumn(field);
-  var hideMenu = React.useCallback(function (event) {
-    // Prevent triggering the sorting
-    event.stopPropagation();
-    if (!(target != null && target.contains(event.target))) {
-      apiRef.current.hideColumnMenu();
+  var hideMenu = useEventCallback(function (event) {
+    if (event) {
+      // Prevent triggering the sorting
+      event.stopPropagation();
+      if (target != null && target.contains(event.target)) {
+        return;
+      }
     }
-  }, [apiRef, target]);
+    apiRef.current.hideColumnMenu();
+  });
   if (!target || !colDef) {
     return null;
   }
@@ -30,7 +33,7 @@ function GridColumnHeaderMenu(_ref) {
     placement: "bottom-".concat(colDef.align === 'right' ? 'start' : 'end'),
     open: open,
     target: target,
-    onClickAway: hideMenu,
+    onClose: hideMenu,
     onExited: onExited,
     children: /*#__PURE__*/_jsx(ContentComponent, _extends({
       colDef: colDef,

package/legacy/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label"];
+var _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType, unstable_useId as useId } from '@mui/utils';
@@ -27,6 +27,7 @@ function GridFilterInputBoolean(props) {
     clearButton = props.clearButton,
     tabIndex = props.tabIndex,
     labelProp = props.label,
+    InputLabelProps = props.InputLabelProps,
     others = _objectWithoutProperties(props, _excluded);
   var _React$useState = React.useState(item.value || ''),
     _React$useState2 = _slicedToArray(_React$useState, 2),

package/legacy/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "isFilterActive", "clearButton"];
+var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "isFilterActive", "clearButton", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -56,6 +56,7 @@ function GridFilterInputSingleSelect(props) {
     labelProp = props.label,
     isFilterActive = props.isFilterActive,
     clearButton = props.clearButton,
+    InputLabelProps = props.InputLabelProps,
     others = _objectWithoutProperties(props, _excluded);
   var _React$useState = React.useState((_item$value = item.value) != null ? _item$value : ''),
     _React$useState2 = _slicedToArray(_React$useState, 2),

package/legacy/components/toolbar/GridToolbarDensitySelector.js

@@ -60,12 +60,7 @@ export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function G
     });
     onClick == null || onClick(event);
   };
-  var handleDensitySelectorClickAway = function handleDensitySelectorClickAway(event) {
-    var _buttonRef$current;
-    if (buttonRef.current === event.target || // if user clicked on the icon
-    (_buttonRef$current = buttonRef.current) != null && _buttonRef$current.contains(event.target)) {
-      return;
-    }
+  var handleDensitySelectorClose = function handleDensitySelectorClose() {
     setOpen(false);
   };
   var handleDensityUpdate = function handleDensityUpdate(newDensity) {
@@ -113,7 +108,7 @@ export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function G
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
-      onClickAway: handleDensitySelectorClickAway,
+      onClose: handleDensitySelectorClose,
       position: "bottom-start",
       children: /*#__PURE__*/_jsx(MenuList, {
         id: densityMenuId,

package/legacy/components/toolbar/GridToolbarExportContainer.js

@@ -44,14 +44,6 @@ export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function G
       handleMenuClose();
     }
   };
-  var handleMenuClickAway = function handleMenuClickAway(event) {
-    var _buttonRef$current;
-    if (buttonRef.current === event.target || // if user clicked on the icon
-    (_buttonRef$current = buttonRef.current) != null && _buttonRef$current.contains(event.target)) {
-      return;
-    }
-    setOpen(false);
-  };
   if (children == null) {
     return null;
   }
@@ -72,7 +64,7 @@ export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function G
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
-      onClickAway: handleMenuClickAway,
+      onClose: handleMenuClose,
       position: "bottom-start",
       children: /*#__PURE__*/_jsx(MenuList, {
         id: exportMenuId,

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

@@ -3,8 +3,9 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import { styled, useTheme } from '@mui/system';
+import { styled, useTheme } from '@mui/material/styles';
 import { defaultMemoize } from 'reselect';
+import { useGridSelector } from '../../utils';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
@@ -12,6 +13,7 @@ import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColu
 import { getFirstColumnIndexToRender, getTotalHeaderHeight } from '../columns/gridColumnsUtils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { areRenderContextsEqual, getRenderableIndexes } from '../virtualization/useGridVirtualScroller';
+import { gridVirtualizationColumnEnabledSelector } from '../virtualization';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
 import { jsx as _jsx } from "react/jsx-runtime";
 var GridColumnHeaderRow = styled('div', {
@@ -56,6 +58,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
     resizeCol = _React$useState4[0],
     setResizeCol = _React$useState4[1];
   var apiRef = useGridPrivateApiContext();
+  var hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   var rootProps = useGridRootProps();
   var innerRef = React.useRef(null);
   var handleInnerRef = useForkRef(innerRefProp, innerRef);
@@ -197,7 +200,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
       _getRenderableIndexes4 = _slicedToArray(_getRenderableIndexes3, 2),
       firstRowToRender = _getRenderableIndexes4[0],
       lastRowToRender = _getRenderableIndexes4[1];
-    var firstColumnToRender = getFirstColumnIndexToRenderRef.current({
+    var firstColumnToRender = !hasVirtualization ? 0 : getFirstColumnIndexToRenderRef.current({
       firstColumnIndex: nextRenderContext.firstColumnIndex,
       minColumnIndex: minFirstColumn,
       columnBuffer: rootProps.columnBuffer,
@@ -206,7 +209,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
       lastRowToRender: lastRowToRender,
       visibleRows: currentPage.rows
     });
-    var lastColumnToRender = Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
+    var lastColumnToRender = !hasVirtualization ? maxLastColumn : Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
     var renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns: renderedColumns,