@mui/x-data-grid 6.0.3 → 6.0.4

package/locales/svSE.js

@@ -37,7 +37,7 @@ const svSEGrid = {
   columnsPanelHideAllButton: 'Dölj alla',
   // Filter panel text
   filterPanelAddFilter: 'Lägg till filter',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Ta bort alla',
   filterPanelDeleteIconLabel: 'Ta bort',
   filterPanelLogicOperator: 'Logisk operatör',
   filterPanelOperator: 'Operatör',
@@ -67,7 +67,7 @@ const svSEGrid = {
   // Column menu text
   columnMenuLabel: 'Meny',
   columnMenuShowColumns: 'Visa kolumner',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Hantera kolumner',
   columnMenuFilter: 'Filtrera',
   columnMenuHideColumn: 'Dölj',
   columnMenuUnsort: 'Osortera',

package/modern/components/GridRow.js

@@ -48,7 +48,7 @@ function EmptyCell({
     width
   };
   return /*#__PURE__*/_jsx("div", {
-    className: "MuiDataGrid-cell MuiDataGrid-withBorderColor",
+    className: `${gridClasses.cell} ${gridClasses.withBorderColor}`,
     style: style
   }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
 }

package/modern/components/columnHeaders/GridColumnHeaderTitle.js

@@ -46,14 +46,13 @@ const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHead
 function GridColumnHeaderTitle(props) {
   const {
     label,
-    description,
-    columnWidth
+    description
   } = props;
   const rootProps = useGridRootProps();
   const titleRef = React.useRef(null);
   const [tooltip, setTooltip] = React.useState('');
-  React.useEffect(() => {
-    if (!description && titleRef && titleRef.current) {
+  const handleMouseOver = React.useCallback(() => {
+    if (!description && titleRef?.current) {
       const isOver = isOverflown(titleRef.current);
       if (isOver) {
         setTooltip(label);
@@ -61,11 +60,12 @@ function GridColumnHeaderTitle(props) {
         setTooltip('');
       }
     }
-  }, [titleRef, columnWidth, description, label]);
+  }, [description, label]);
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: description || tooltip
   }, rootProps.slotProps?.baseTooltip, {
     children: /*#__PURE__*/_jsx(ColumnHeaderInnerTitle, {
+      onMouseOver: handleMouseOver,
       ref: titleRef,
       children: label
     })

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

@@ -20,8 +20,10 @@ function GridColumnHeaderMenu({
   const hideMenu = React.useCallback(event => {
     // Prevent triggering the sorting
     event.stopPropagation();
-    apiRef.current.hideColumnMenu();
-  }, [apiRef]);
+    if (!target?.contains(event.target)) {
+      apiRef.current.hideColumnMenu();
+    }
+  }, [apiRef, target]);
   if (!target) {
     return null;
   }

package/modern/components/menu/columnMenu/GridColumnMenu.js

@@ -1,20 +1,20 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["defaultComponents", "defaultComponentsProps", "components", "componentsProps"];
+const _excluded = ["defaultSlots", "defaultSlotProps", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useGridColumnMenuComponents } from '../../../hooks/features/columnMenu/useGridColumnMenuComponents';
+import { useGridColumnMenuSlots } from '../../../hooks/features/columnMenu/useGridColumnMenuSlots';
 import { GridColumnMenuContainer } from './GridColumnMenuContainer';
 import { GridColumnMenuColumnsItem } from './menuItems/GridColumnMenuColumnsItem';
 import { GridColumnMenuFilterItem } from './menuItems/GridColumnMenuFilterItem';
 import { GridColumnMenuSortItem } from './menuItems/GridColumnMenuSortItem';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const GRID_COLUMN_MENU_COMPONENTS = {
-  ColumnMenuSortItem: GridColumnMenuSortItem,
-  ColumnMenuFilterItem: GridColumnMenuFilterItem,
-  ColumnMenuColumnsItem: GridColumnMenuColumnsItem
+export const GRID_COLUMN_MENU_SLOTS = {
+  columnMenuSortItem: GridColumnMenuSortItem,
+  columnMenuFilterItem: GridColumnMenuFilterItem,
+  columnMenuColumnsItem: GridColumnMenuColumnsItem
 };
-export const GRID_COLUMN_MENU_COMPONENTS_PROPS = {
+export const GRID_COLUMN_MENU_SLOT_PROPS = {
   columnMenuSortItem: {
     displayOrder: 10
   },
@@ -27,29 +27,29 @@ export const GRID_COLUMN_MENU_COMPONENTS_PROPS = {
 };
 const GridGenericColumnMenu = /*#__PURE__*/React.forwardRef(function GridGenericColumnMenu(props, ref) {
   const {
-      defaultComponents,
-      defaultComponentsProps,
-      components,
-      componentsProps
+      defaultSlots,
+      defaultSlotProps,
+      slots,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const orderedComponents = useGridColumnMenuComponents(_extends({}, other, {
-    defaultComponents,
-    defaultComponentsProps,
-    components,
-    componentsProps
+  const orderedSlots = useGridColumnMenuSlots(_extends({}, other, {
+    defaultSlots,
+    defaultSlotProps,
+    slots,
+    slotProps
   }));
   return /*#__PURE__*/_jsx(GridColumnMenuContainer, _extends({
     ref: ref
   }, other, {
-    children: orderedComponents.map(([Component, componentProps], index) => /*#__PURE__*/_jsx(Component, _extends({}, componentProps), index))
+    children: orderedSlots.map(([Component, otherProps], index) => /*#__PURE__*/_jsx(Component, _extends({}, otherProps), index))
   }));
 });
 const GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(props, ref) {
   return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({}, props, {
     ref: ref,
-    defaultComponents: GRID_COLUMN_MENU_COMPONENTS,
-    defaultComponentsProps: GRID_COLUMN_MENU_COMPONENTS_PROPS
+    defaultSlots: GRID_COLUMN_MENU_SLOTS,
+    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS
   }));
 });
 process.env.NODE_ENV !== "production" ? GridColumnMenu.propTypes = {
@@ -58,20 +58,20 @@ process.env.NODE_ENV !== "production" ? GridColumnMenu.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   colDef: PropTypes.object.isRequired,
-  /**
-   * `components` could be used to add new and (or) override default column menu items
-   * If you register a nee component you must pass it's `displayOrder` in `componentsProps`
-   * or it will be placed in the end of the list
-   */
-  components: PropTypes.object,
+  hideMenu: PropTypes.func.isRequired,
+  id: PropTypes.string,
+  labelledby: PropTypes.string,
+  open: PropTypes.bool.isRequired,
   /**
    * Could be used to pass new props or override props specific to a column menu component
    * e.g. `displayOrder`
    */
-  componentsProps: PropTypes.object,
-  hideMenu: PropTypes.func.isRequired,
-  id: PropTypes.string,
-  labelledby: PropTypes.string,
-  open: PropTypes.bool.isRequired
+  slotProps: PropTypes.object,
+  /**
+   * `slots` could be used to add new and (or) override default column menu items
+   * If you register a nee component you must pass it's `displayOrder` in `slotProps`
+   * or it will be placed in the end of the list
+   */
+  slots: PropTypes.object
 } : void 0;
 export { GridColumnMenu, GridGenericColumnMenu };

package/modern/components/panel/filterPanel/GridFilterPanel.js

@@ -143,7 +143,7 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
         logicOperators: logicOperators,
         columnsSort: columnsSort
       }, filterFormProps), item.id == null ? index : item.id))
-    }), !rootProps.disableMultipleColumnsFiltering && !disableAddFilterButton && !disableRemoveAllButton ? /*#__PURE__*/_jsxs(GridPanelFooter, {
+    }), !rootProps.disableMultipleColumnsFiltering && !(disableAddFilterButton && disableRemoveAllButton) ? /*#__PURE__*/_jsxs(GridPanelFooter, {
       children: [!disableAddFilterButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: addNewFilter,
         startIcon: /*#__PURE__*/_jsx(rootProps.slots.filterPanelAddIcon, {})

package/modern/components/reexportable.js

@@ -1 +1 @@
-export { GridColumnMenu, GRID_COLUMN_MENU_COMPONENTS, GRID_COLUMN_MENU_COMPONENTS_PROPS } from './menu/columnMenu/GridColumnMenu';
+export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from './menu/columnMenu/GridColumnMenu';

package/modern/hooks/features/columnMenu/{useGridColumnMenuComponents.js → useGridColumnMenuSlots.js}

@@ -4,44 +4,39 @@ const _excluded = ["displayOrder"];
 import * as React from 'react';
 import Divider from '@mui/material/Divider';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
-const camelize = pascalCase => {
-  const camelCase = pascalCase.split('');
-  camelCase[0] = camelCase[0].toLowerCase();
-  return camelCase.join('');
-};
-const useGridColumnMenuComponents = props => {
+const useGridColumnMenuSlots = props => {
   const apiRef = useGridPrivateApiContext();
   const {
-    defaultComponents,
-    defaultComponentsProps,
-    components = {},
-    componentsProps = {},
+    defaultSlots,
+    defaultSlotProps,
+    slots = {},
+    slotProps = {},
     hideMenu,
     colDef,
     addDividers = true
   } = props;
-  const processedComponents = React.useMemo(() => _extends({}, defaultComponents, components), [defaultComponents, components]);
-  const processedComponentsProps = React.useMemo(() => {
-    if (!componentsProps || Object.keys(componentsProps).length === 0) {
-      return defaultComponentsProps;
+  const processedComponents = React.useMemo(() => _extends({}, defaultSlots, slots), [defaultSlots, slots]);
+  const processedSlotProps = React.useMemo(() => {
+    if (!slotProps || Object.keys(slotProps).length === 0) {
+      return defaultSlotProps;
     }
-    const mergedProps = _extends({}, componentsProps);
-    Object.entries(defaultComponentsProps).forEach(([key, currentComponentProps]) => {
-      mergedProps[key] = _extends({}, currentComponentProps, componentsProps[key] || {});
+    const mergedProps = _extends({}, slotProps);
+    Object.entries(defaultSlotProps).forEach(([key, currentSlotProps]) => {
+      mergedProps[key] = _extends({}, currentSlotProps, slotProps[key] || {});
     });
     return mergedProps;
-  }, [defaultComponentsProps, componentsProps]);
+  }, [defaultSlotProps, slotProps]);
   const defaultItems = apiRef.current.unstable_applyPipeProcessors('columnMenu', [], props.colDef);
   const userItems = React.useMemo(() => {
-    const defaultComponentKeys = Object.keys(defaultComponents);
-    return Object.keys(components).filter(key => !defaultComponentKeys.includes(key));
-  }, [components, defaultComponents]);
+    const defaultComponentKeys = Object.keys(defaultSlots);
+    return Object.keys(slots).filter(key => !defaultComponentKeys.includes(key));
+  }, [slots, defaultSlots]);
   return React.useMemo(() => {
     const uniqueItems = Array.from(new Set([...defaultItems, ...userItems]));
     const cleansedItems = uniqueItems.filter(key => processedComponents[key] != null);
     const sorted = cleansedItems.sort((a, b) => {
-      const leftItemProps = processedComponentsProps[camelize(a)];
-      const rightItemProps = processedComponentsProps[camelize(b)];
+      const leftItemProps = processedSlotProps[a];
+      const rightItemProps = processedSlotProps[b];
       const leftDisplayOrder = Number.isFinite(leftItemProps?.displayOrder) ? leftItemProps.displayOrder : 100;
       const rightDisplayOrder = Number.isFinite(rightItemProps?.displayOrder) ? rightItemProps.displayOrder : 100;
       return leftDisplayOrder - rightDisplayOrder;
@@ -51,13 +46,13 @@ const useGridColumnMenuComponents = props => {
         colDef,
         onClick: hideMenu
       };
-      const processedComponentProps = processedComponentsProps[camelize(key)];
+      const processedComponentProps = processedSlotProps[key];
       if (processedComponentProps) {
         const customProps = _objectWithoutPropertiesLoose(processedComponentProps, _excluded);
         itemProps = _extends({}, itemProps, customProps);
       }
       return addDividers && index !== sorted.length - 1 ? [...acc, [processedComponents[key], itemProps], [Divider, {}]] : [...acc, [processedComponents[key], itemProps]];
     }, []);
-  }, [addDividers, colDef, defaultItems, hideMenu, processedComponents, processedComponentsProps, userItems]);
+  }, [addDividers, colDef, defaultItems, hideMenu, processedComponents, processedSlotProps, userItems]);
 };
-export { useGridColumnMenuComponents };
+export { useGridColumnMenuSlots };

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

@@ -226,7 +226,7 @@ export function useGridColumns(apiRef, props) {
     if (props.disableColumnSelector) {
       return columnMenuItems;
     }
-    return [...columnMenuItems, 'ColumnMenuColumnsItem'];
+    return [...columnMenuItems, 'columnMenuColumnsItem'];
   }, [props.disableColumnSelector]);
   useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuItems);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);

package/modern/hooks/features/filter/useGridFilter.js

@@ -57,7 +57,7 @@ export const useGridFilter = (apiRef, props) => {
     if (colDef == null || colDef.filterable === false || props.disableColumnFilter) {
       return columnMenuItems;
     }
-    return [...columnMenuItems, 'ColumnMenuFilterItem'];
+    return [...columnMenuItems, 'columnMenuFilterItem'];
   }, [props.disableColumnFilter]);
 
   /**

package/modern/hooks/features/sorting/useGridSorting.js

@@ -70,7 +70,7 @@ export const useGridSorting = (apiRef, props) => {
     }
     const sortingOrder = colDef.sortingOrder || props.sortingOrder;
     if (sortingOrder.some(item => !!item)) {
-      return [...columnMenuItems, 'ColumnMenuSortItem'];
+      return [...columnMenuItems, 'columnMenuSortItem'];
     }
     return columnMenuItems;
   }, [props.sortingOrder]);

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -425,7 +425,7 @@ export const useGridVirtualScroller = props => {
     prevRootRowStyle.current = rootRowStyle;
     return rows;
   };
-  const needsHorizontalScrollbar = containerDimensions.width && columnsTotalWidth > containerDimensions.width;
+  const needsHorizontalScrollbar = containerDimensions.width && columnsTotalWidth >= containerDimensions.width;
   const contentSize = React.useMemo(() => {
     // In cases where the columns exceed the available width,
     // the horizontal scrollbar should be shown even when there're no rows.

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.0.3
+ * @mui/x-data-grid v6.0.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -22,7 +22,7 @@ export { GridColumnHeaders } from './components/GridColumnHeaders';
 /**
  * Reexportable components.
  */
-export { GridColumnMenu, GRID_COLUMN_MENU_COMPONENTS, GRID_COLUMN_MENU_COMPONENTS_PROPS } from './components/reexportable';
+export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from './components/reexportable';
 
 /**
  * The full grid API.

package/modern/locales/daDK.js

@@ -20,17 +20,15 @@ const daDKGrid = {
   toolbarFiltersTooltipShow: 'Vis filtre',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} aktive filtre` : `${count} aktivt filter`,
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search…',
-  // toolbarQuickFilterLabel: 'Search',
-  // toolbarQuickFilterDeleteIconLabel: 'Clear',
-
+  toolbarQuickFilterPlaceholder: 'Søg…',
+  toolbarQuickFilterLabel: 'Søg',
+  toolbarQuickFilterDeleteIconLabel: 'Ryd',
   // Export selector toolbar button text
-  // toolbarExport: 'Export',
+  toolbarExport: 'Eksport',
   toolbarExportLabel: 'Eksporter',
   toolbarExportCSV: 'Download som CSV',
   toolbarExportPrint: 'Print',
-  // toolbarExportExcel: 'Download as Excel',
-
+  toolbarExportExcel: 'Download som Excel',
   // Columns panel text
   columnsPanelTextFieldLabel: 'Find kolonne',
   columnsPanelTextFieldPlaceholder: 'Kolonne titel',
@@ -39,7 +37,7 @@ const daDKGrid = {
   columnsPanelHideAllButton: 'Skjul alle',
   // Filter panel text
   filterPanelAddFilter: 'Tilføj filter',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Fjern alle',
   filterPanelDeleteIconLabel: 'Slet',
   filterPanelLogicOperator: 'Logisk operator',
   filterPanelOperator: 'Operatorer',
@@ -69,7 +67,7 @@ const daDKGrid = {
   // Column menu text
   columnMenuLabel: 'Menu',
   columnMenuShowColumns: 'Vis Kolonner',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Administrer kolonner',
   columnMenuFilter: 'Filtre',
   columnMenuHideColumn: 'Skjul',
   columnMenuUnsort: 'Fjern sortering',
@@ -109,20 +107,17 @@ const daDKGrid = {
   groupColumn: name => `Gruppér efter ${name}`,
   unGroupColumn: name => `Fjern gruppéring efter ${name}`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
+  detailPanelToggle: 'Udvid/kollaps detaljepanel',
   expandDetailPanel: 'Udvid',
-  collapseDetailPanel: 'Kollaps'
-
+  collapseDetailPanel: 'Kollaps',
   // Row reordering text
-  // rowReorderingHeaderName: 'Row reordering',
-
+  rowReorderingHeaderName: 'Omarrangering af rækker',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Aggregation',
+  aggregationFunctionLabelSum: 'sum',
+  aggregationFunctionLabelAvg: 'gns',
+  aggregationFunctionLabelMin: 'min',
+  aggregationFunctionLabelMax: 'max',
+  aggregationFunctionLabelSize: 'størrelse'
 };
-
 export const daDK = getGridLocalization(daDKGrid, daDKCore);

package/modern/locales/esES.js

@@ -67,7 +67,7 @@ const esESGrid = {
   // Column menu text
   columnMenuLabel: 'Menú',
   columnMenuShowColumns: 'Mostrar columnas',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Administrar columnas',
   columnMenuFilter: 'Filtro',
   columnMenuHideColumn: 'Ocultar',
   columnMenuUnsort: 'Desordenar',

package/modern/locales/nbNO.js

@@ -37,7 +37,7 @@ const nbNOGrid = {
   columnsPanelHideAllButton: 'Skjul alle',
   // Filter panel text
   filterPanelAddFilter: 'Legg til filter',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Fjern alle',
   filterPanelDeleteIconLabel: 'Slett',
   filterPanelLogicOperator: 'Logisk operator',
   filterPanelOperator: 'Operatører',
@@ -67,7 +67,7 @@ const nbNOGrid = {
   // Column menu text
   columnMenuLabel: 'Meny',
   columnMenuShowColumns: 'Vis kolonner',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Administrer kolonner',
   columnMenuFilter: 'Filter',
   columnMenuHideColumn: 'Skjul',
   columnMenuUnsort: 'Usorter',
@@ -107,19 +107,17 @@ const nbNOGrid = {
   groupColumn: name => `Grupper på ${name}`,
   unGroupColumn: name => `Stopp å grupper på ${name}`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
+  detailPanelToggle: 'Utvid/kollaps detalj panel',
   expandDetailPanel: 'Utvid',
   collapseDetailPanel: 'Kollaps',
   // Row reordering text
-  rowReorderingHeaderName: 'Rad reorganisering'
-
+  rowReorderingHeaderName: 'Rad reorganisering',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Aggregering',
+  aggregationFunctionLabelSum: 'sum',
+  aggregationFunctionLabelAvg: 'snitt',
+  aggregationFunctionLabelMin: 'min',
+  aggregationFunctionLabelMax: 'maks',
+  aggregationFunctionLabelSize: 'størrelse'
 };
-
 export const nbNO = getGridLocalization(nbNOGrid, nbNOCore);

package/modern/locales/svSE.js

@@ -37,7 +37,7 @@ const svSEGrid = {
   columnsPanelHideAllButton: 'Dölj alla',
   // Filter panel text
   filterPanelAddFilter: 'Lägg till filter',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Ta bort alla',
   filterPanelDeleteIconLabel: 'Ta bort',
   filterPanelLogicOperator: 'Logisk operatör',
   filterPanelOperator: 'Operatör',
@@ -67,7 +67,7 @@ const svSEGrid = {
   // Column menu text
   columnMenuLabel: 'Meny',
   columnMenuShowColumns: 'Visa kolumner',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Hantera kolumner',
   columnMenuFilter: 'Filtrera',
   columnMenuHideColumn: 'Dölj',
   columnMenuUnsort: 'Osortera',

package/node/components/GridRow.js

@@ -56,7 +56,7 @@ function EmptyCell({
     width
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "MuiDataGrid-cell MuiDataGrid-withBorderColor",
+    className: `${_gridClasses.gridClasses.cell} ${_gridClasses.gridClasses.withBorderColor}`,
     style: style
   }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
 }

package/node/components/columnHeaders/GridColumnHeaderTitle.js

@@ -55,14 +55,13 @@ const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHead
 function GridColumnHeaderTitle(props) {
   const {
     label,
-    description,
-    columnWidth
+    description
   } = props;
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const titleRef = React.useRef(null);
   const [tooltip, setTooltip] = React.useState('');
-  React.useEffect(() => {
-    if (!description && titleRef && titleRef.current) {
+  const handleMouseOver = React.useCallback(() => {
+    if (!description && titleRef?.current) {
       const isOver = (0, _domUtils.isOverflown)(titleRef.current);
       if (isOver) {
         setTooltip(label);
@@ -70,11 +69,12 @@ function GridColumnHeaderTitle(props) {
         setTooltip('');
       }
     }
-  }, [titleRef, columnWidth, description, label]);
+  }, [description, label]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
     title: description || tooltip
   }, rootProps.slotProps?.baseTooltip, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnHeaderInnerTitle, {
+      onMouseOver: handleMouseOver,
       ref: titleRef,
       children: label
     })

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

@@ -29,8 +29,10 @@ function GridColumnHeaderMenu({
   const hideMenu = React.useCallback(event => {
     // Prevent triggering the sorting
     event.stopPropagation();
-    apiRef.current.hideColumnMenu();
-  }, [apiRef]);
+    if (!target?.contains(event.target)) {
+      apiRef.current.hideColumnMenu();
+    }
+  }, [apiRef, target]);
   if (!target) {
     return null;
   }