@mui/x-data-grid 6.14.0 → 6.15.0

package/CHANGELOG.md

@@ -3,6 +3,89 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.15.0
+
+_Sep 22, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Implement columns auto-sizing (#10180) @romgrk
+- 🎁 Add support for `getRowsToExport` option to print export on the data grid (#10084) @zreecespieces
+- 🌍 Improve Finnish (fi-FI) locale
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.15.0`
+
+- [DataGrid] Add support for `getRowsToExport` option to print export (#10084) @zreecespieces
+- [DataGrid] Fix dev warning about `InputLabelProps` (#10413) @romgrk
+- [DataGrid] Refactor `GridMenu` prop `onClickAway` to `onClose` (#10411) @romgrk
+- [DataGrid] Restore focus after `GridMenu` closes (#10412) @romgrk
+- [DataGrid] Fix typing of `GridActionsCellItem` (#10344) @romgrk
+- [DataGrid] Hide `eval` from bundlers (#10329) @romgrk
+- [DataGrid] Add `border: 0` to unmounted focused cell to avoid layout shifts in that row (#10318) @lauri865
+
+#### `@mui/x-data-grid-pro@6.15.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.15.0`, plus:
+
+- [DataGridPro] Implement columns auto-sizing (#10180) @romgrk
+- [DataGridPro] Fix keyboard navigation issue in header filters (#10358) @MBilalShafi
+- [DataGridPro] Add missing row hover styles (#10252) @cherniavskii
+- [DataGridPro] Make default filter items have stable references in header filters (#10338) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@6.15.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.15.0`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.15.0`
+
+- [pickers] Support tokens without spaces (#10185) @alexfauquette
+- [l10n] Improve Finnish (fi-FI) locale (#10346) @samijouppila
+
+#### `@mui/x-date-pickers-pro@6.15.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.15.0`.
+
+### Charts / `@mui/x-charts@6.0.0-alpha.12`
+
+- [charts] Fix sparkline scale and rendering (#10402) @alexfauquette
+- [charts] Remove components from `@mui/material` (#10115) @alexfauquette
+
+### Tree View / `@mui/x-tree-view@6.0.0-alpha.4`
+
+- [TreeView] Split features into plugins to prepare for Pro version (#10123) @flaviendelangle
+
+### Docs
+
+- [docs] Add charts documentation pages to complete pricing table (#10394) @alexfauquette
+- [docs] Add missing MIT packages on the Licensing page (#10348) @flaviendelangle
+- [docs] Clearer component pattern @oliviertassinari
+- [docs] Easier to understand demo (#10370) @oliviertassinari
+- [docs] Fix `301` to Material UI @oliviertassinari
+- [docs] Improve the column visibility section (#10327) @MBilalShafi
+- [docs] Improve the documentation section `rowIdentifier` (#10326) @MBilalShafi
+- [docs] Improve pickers localization documentation (#10202) @flaviendelangle
+- [docs] Polish typescript ref usage (#10359) @oliviertassinari
+- [docs] Improve charts tooltip wording (#10406) @alexfauquette
+
+### Core
+
+- [core] Cleanup GitHub issues template (#10372) @romgrk
+- [core] Fix Circle CI OOM (#10385) @romgrk
+- [core] Improve sleep test helper @oliviertassinari
+- [core] Remove unwanted prefixes @oliviertassinari
+- [core] Remove duplicate label @oliviertassinari
+- [core] Simplify source @oliviertassinari
+- [core] Upgrade monorepo (#10425) @cherniavskii
+- [core] Upgrade monorepo to have the new typescript-to-proptype (#10224) @flaviendelangle
+- [test] Do not use deprecated adapter methods (#10416) @flaviendelangle
+- [test] Name test suites according to sentence case (#10429) @alexfauquette
+
 ## 6.14.0
 
 _Sep 14, 2023_

package/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 const useDataGridComponent = (inputApiRef, props) => {
-  const privateApiRef = useGridInitialization(inputApiRef, props);
+  const 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/components/DataGridVirtualScroller.d.ts

@@ -1,6 +1,3 @@
 import * as React from 'react';
-interface DataGridVirtualScrollerProps extends React.HTMLAttributes<HTMLDivElement> {
-    disableVirtualization?: boolean;
-}
-declare const DataGridVirtualScroller: React.ForwardRefExoticComponent<DataGridVirtualScrollerProps & React.RefAttributes<HTMLDivElement>>;
+declare const DataGridVirtualScroller: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export { DataGridVirtualScroller };

package/components/DataGridVirtualScroller.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "disableVirtualization"];
+const _excluded = ["className"];
 import * as React from 'react';
 import { GridVirtualScroller } from './virtualization/GridVirtualScroller';
 import { GridVirtualScrollerContent } from './virtualization/GridVirtualScrollerContent';
@@ -11,8 +11,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DataGridVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridVirtualScroller(props, ref) {
   const {
-      className,
-      disableVirtualization
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -21,8 +20,7 @@ const DataGridVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridV
     getRenderZoneProps,
     getRows
   } = useGridVirtualScroller({
-    ref,
-    disableVirtualization
+    ref
   });
   return /*#__PURE__*/_jsxs(GridVirtualScroller, _extends({
     className: className

package/components/GridRow.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
+const _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';
@@ -57,6 +57,7 @@ function EmptyCell({
 const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
       selected,
+      hovered,
       rowId,
       row,
       index,
@@ -92,6 +93,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
 
   const ownerState = {
     selected,
+    hovered,
     isLastVisible,
     classes: rootProps.classes,
     editing: apiRef.current.getRowMode(rowId) === GridRowModes.Edit,
@@ -328,7 +330,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
-    className: clsx(...rowClassNames, classes.root, className),
+    className: clsx(...rowClassNames, classes.root, className, hovered && 'Mui-hovered'),
     "aria-rowindex": ariaRowIndex,
     "aria-selected": selected,
     style: style

package/components/base/GridBody.d.ts

@@ -4,7 +4,6 @@ interface GridBodyProps {
     ColumnHeadersProps?: Record<string, any>;
     VirtualScrollerComponent: React.JSXElementConstructor<React.HTMLAttributes<HTMLDivElement> & {
         ref: React.Ref<HTMLDivElement>;
-        disableVirtualization: boolean;
     }>;
 }
 declare function GridBody(props: GridBodyProps): React.JSX.Element;

package/components/base/GridBody.js

@@ -39,7 +39,6 @@ function GridBody(props) {
   const columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
   const columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
   const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
-  const [isVirtualizationDisabled, setIsVirtualizationDisabled] = React.useState(rootProps.disableVirtualization);
   useEnhancedEffect(() => {
     apiRef.current.computeSizeAndPublishResizeEvent();
     const elementToObserve = rootRef.current;
@@ -49,7 +48,7 @@ function GridBody(props) {
     let animationFrame;
     const observer = new ResizeObserver(() => {
       // See https://github.com/mui/mui-x/issues/8733
-      animationFrame = window.requestAnimationFrame(() => {
+      animationFrame = requestAnimationFrame(() => {
         apiRef.current.computeSizeAndPublishResizeEvent();
       });
     });
@@ -65,24 +64,6 @@ function GridBody(props) {
       }
     };
   }, [apiRef]);
-  const disableVirtualization = React.useCallback(() => {
-    setIsVirtualizationDisabled(true);
-  }, []);
-  const enableVirtualization = React.useCallback(() => {
-    setIsVirtualizationDisabled(false);
-  }, []);
-  React.useEffect(() => {
-    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;
   const columnHeadersRef = React.useRef(null);
   const columnsContainerRef = React.useRef(null);
   const virtualScrollerRef = React.useRef(null);
@@ -119,8 +100,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/components/cell/GridActionsCell.js

@@ -165,11 +165,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/components/cell/GridActionsCellItem.d.ts

@@ -4,6 +4,8 @@ import { MenuItemProps } from '@mui/material/MenuItem';
 export type GridActionsCellItemProps = {
     label: string;
     icon?: React.ReactElement;
+    /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
+    component?: React.ElementType;
 } & (({
     showInMenu?: false;
     icon: React.ReactElement;
@@ -13,6 +15,8 @@ export type GridActionsCellItemProps = {
 declare const GridActionsCellItem: React.ForwardRefExoticComponent<(Omit<{
     label: string;
     icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
+    component?: React.ElementType<any> | undefined;
 } & {
     showInMenu?: false | undefined;
     icon: React.ReactElement;
@@ -23,6 +27,8 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<(Omit<{
 }, "ref"> | Omit<{
     label: string;
     icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
+    component?: React.ElementType<any> | undefined;
 } & {
     showInMenu: true;
 } & import("@mui/material/MenuItem").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {

package/components/cell/GridCell.js

@@ -232,7 +232,8 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       return {
         padding: 0,
         opacity: 0,
-        width: 0
+        width: 0,
+        border: 0
       };
     }
     const cellStyle = {
@@ -497,7 +498,8 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
       return {
         padding: 0,
         opacity: 0,
-        width: 0
+        width: 0,
+        border: 0
       };
     }
     const cellStyle = {

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -95,7 +95,8 @@ function GridColumnHeaderItem(props) {
     onDragEnd: publish('columnHeaderDragEnd')
   } : {}, [isDraggable, publish]);
   const columnHeaderSeparatorProps = React.useMemo(() => ({
-    onMouseDown: publish('columnSeparatorMouseDown')
+    onMouseDown: publish('columnSeparatorMouseDown'),
+    onDoubleClick: publish('columnSeparatorDoubleClick')
   }), [publish]);
   React.useEffect(() => {
     if (!showColumnMenuIcon) {

package/components/menu/GridMenu.d.ts

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { ClickAwayListenerProps } from '@mui/material/ClickAwayListener';
 import { GrowProps } from '@mui/material/Grow';
 import { PopperProps } from '@mui/material/Popper';
 type MenuPosition = 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top' | undefined;
 export interface GridMenuProps extends Omit<PopperProps, 'onKeyDown' | 'children'> {
     open: boolean;
     target: HTMLElement | null;
-    onClickAway: ClickAwayListenerProps['onClickAway'];
+    onClose: (event?: Event) => void;
     position?: MenuPosition;
     onExited?: GrowProps['onExited'];
     children: React.ReactNode;

package/components/menu/GridMenu.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["open", "target", "onClickAway", "children", "position", "className", "onExited"];
+const _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) {
   const {
       open,
       target,
-      onClickAway,
+      onClose,
       children,
       position,
       className,
@@ -54,6 +54,16 @@ function GridMenu(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
+  const savedFocusRef = React.useRef(null);
+  useEnhancedEffect(() => {
+    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(() => {
     // Emit menuOpen or menuClose events
     const eventName = open ? 'menuOpen' : 'menuClose';
@@ -69,6 +79,12 @@ function GridMenu(props) {
       onExited(node);
     }
   };
+  const 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),
@@ -82,7 +98,7 @@ function GridMenu(props) {
       TransitionProps,
       placement
     }) => /*#__PURE__*/_jsx(ClickAwayListener, {
-      onClickAway: onClickAway,
+      onClickAway: handleClickAway,
       mouseEvent: "onMouseDown",
       children: /*#__PURE__*/_jsx(Grow, _extends({}, TransitionProps, {
         style: {
@@ -102,7 +118,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/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";
@@ -17,13 +17,16 @@ function GridColumnHeaderMenu({
 }) {
   const apiRef = useGridApiContext();
   const colDef = apiRef.current.getColumn(field);
-  const hideMenu = React.useCallback(event => {
-    // Prevent triggering the sorting
-    event.stopPropagation();
-    if (!(target != null && target.contains(event.target))) {
-      apiRef.current.hideColumnMenu();
+  const hideMenu = useEventCallback(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;
   }
@@ -31,7 +34,7 @@ function GridColumnHeaderMenu({
     placement: `bottom-${colDef.align === 'right' ? 'start' : 'end'}`,
     open: open,
     target: target,
-    onClickAway: hideMenu,
+    onClose: hideMenu,
     onExited: onExited,
     children: /*#__PURE__*/_jsx(ContentComponent, _extends({
       colDef: colDef,

package/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label"];
+const _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';

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "isFilterActive", "clearButton"];
+const _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';

package/components/toolbar/GridToolbarDensitySelector.js

@@ -56,12 +56,7 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
     setOpen(prevOpen => !prevOpen);
     onClick == null || onClick(event);
   };
-  const 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;
-    }
+  const handleDensitySelectorClose = () => {
     setOpen(false);
   };
   const handleDensityUpdate = newDensity => {
@@ -105,7 +100,7 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
-      onClickAway: handleDensitySelectorClickAway,
+      onClose: handleDensitySelectorClose,
       position: "bottom-start",
       children: /*#__PURE__*/_jsx(MenuList, {
         id: densityMenuId,

package/components/toolbar/GridToolbarExportContainer.js

@@ -38,14 +38,6 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
       handleMenuClose();
     }
   };
-  const 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;
   }
@@ -66,7 +58,7 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
-      onClickAway: handleMenuClickAway,
+      onClose: handleMenuClose,
       position: "bottom-start",
       children: /*#__PURE__*/_jsx(MenuList, {
         id: exportMenuId,

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -4,6 +4,7 @@ import * as ReactDOM from 'react-dom';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { styled, useTheme } from '@mui/system';
 import { defaultMemoize } from 'reselect';
+import { useGridSelector } from '../../utils';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
@@ -11,6 +12,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";
 const GridColumnHeaderRow = styled('div', {
@@ -46,6 +48,7 @@ export const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
+  const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const rootProps = useGridRootProps();
   const innerRef = React.useRef(null);
   const handleInnerRef = useForkRef(innerRefProp, innerRef);
@@ -164,7 +167,7 @@ export const useGridColumnHeaders = props => {
       maxLastIndex: currentPage.rows.length,
       buffer: rootProps.rowBuffer
     });
-    const firstColumnToRender = getFirstColumnIndexToRenderRef.current({
+    const firstColumnToRender = !hasVirtualization ? 0 : getFirstColumnIndexToRenderRef.current({
       firstColumnIndex: nextRenderContext.firstColumnIndex,
       minColumnIndex: minFirstColumn,
       columnBuffer: rootProps.columnBuffer,
@@ -173,7 +176,7 @@ export const useGridColumnHeaders = props => {
       lastRowToRender,
       visibleRows: currentPage.rows
     });
-    const lastColumnToRender = Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
+    const lastColumnToRender = !hasVirtualization ? maxLastColumn : Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns,