@mui/x-data-grid 6.2.1 → 6.3.1

package/legacy/joy/joySlots.js

@@ -1,13 +1,59 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"];
+var _excluded = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"],
+  _excluded2 = ["onChange", "label", "placeholder", "value", "inputRef", "type", "size", "variant"],
+  _excluded3 = ["startIcon", "color", "endIcon", "size", "sx", "variant"],
+  _excluded4 = ["color", "size", "sx", "touchRippleRef"],
+  _excluded5 = ["name", "checkedIcon", "color", "disableRipple", "disableFocusRipple", "disableTouchRipple", "edge", "icon", "inputProps", "inputRef", "size", "sx", "onChange", "onClick"],
+  _excluded6 = ["open", "onOpen", "value", "onChange", "size", "color", "variant", "inputProps", "MenuProps", "inputRef", "error", "native", "fullWidth", "labelId"],
+  _excluded7 = ["native"],
+  _excluded8 = ["shrink", "variant", "sx"];
 import * as React from 'react';
 import JoyCheckbox from '@mui/joy/Checkbox';
 import JoyInput from '@mui/joy/Input';
 import JoyFormControl from '@mui/joy/FormControl';
 import JoyFormLabel from '@mui/joy/FormLabel';
+import JoyButton from '@mui/joy/Button';
+import JoyIconButton from '@mui/joy/IconButton';
+import JoySwitch from '@mui/joy/Switch';
+import JoySelect from '@mui/joy/Select';
+import JoyOption from '@mui/joy/Option';
+import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+function convertColor(color) {
+  if (color === 'secondary') {
+    return 'primary';
+  }
+  if (color === 'error') {
+    return 'danger';
+  }
+  if (color === 'default' || color === 'inherit') {
+    return 'neutral';
+  }
+  return color;
+}
+function convertSize(size) {
+  return size ? {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+  }[size] : size;
+}
+function convertVariant(variant) {
+  var defaultVariant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'plain';
+  if (!variant) {
+    return defaultVariant;
+  }
+  return {
+    standard: 'outlined',
+    outlined: 'outlined',
+    contained: 'solid',
+    text: 'plain',
+    filled: 'soft'
+  }[variant] || defaultVariant;
+}
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var touchRippleRef = _ref.touchRippleRef,
     inputProps = _ref.inputProps,
@@ -31,41 +77,207 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }));
 });
 var TextField = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var _props$InputProps, _props$inputProps;
   var onChange = _ref2.onChange,
     label = _ref2.label,
     placeholder = _ref2.placeholder,
     value = _ref2.value,
     inputRef = _ref2.inputRef,
-    type = _ref2.type;
+    type = _ref2.type,
+    size = _ref2.size,
+    variant = _ref2.variant,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  var rootRef = useForkRef(ref, (_props$InputProps = props.InputProps) == null ? void 0 : _props$InputProps.ref);
+  var inputForkRef = useForkRef(inputRef, props == null ? void 0 : (_props$inputProps = props.inputProps) == null ? void 0 : _props$inputProps.ref);
+  var _ref3 = props.InputProps || {},
+    startAdornment = _ref3.startAdornment,
+    endAdornment = _ref3.endAdornment;
   return /*#__PURE__*/_jsxs(JoyFormControl, {
-    ref: ref,
+    ref: rootRef,
     children: [/*#__PURE__*/_jsx(JoyFormLabel, {
-      sx: {
-        fontSize: 12
-      },
       children: label
     }), /*#__PURE__*/_jsx(JoyInput, {
       type: type,
       value: value,
       onChange: onChange,
       placeholder: placeholder,
-      size: "sm",
+      variant: convertVariant(variant, 'outlined'),
+      size: convertSize(size),
       slotProps: {
-        input: {
-          ref: inputRef
-        }
-      }
+        input: _extends({}, props == null ? void 0 : props.inputProps, {
+          ref: inputForkRef
+        })
+      },
+      startDecorator: startAdornment,
+      endDecorator: endAdornment
     })]
   });
 });
+var Button = /*#__PURE__*/React.forwardRef(function Button(_ref4, ref) {
+  var startIcon = _ref4.startIcon,
+    color = _ref4.color,
+    endIcon = _ref4.endIcon,
+    size = _ref4.size,
+    sx = _ref4.sx,
+    variant = _ref4.variant,
+    props = _objectWithoutProperties(_ref4, _excluded3);
+  return /*#__PURE__*/_jsx(JoyButton, _extends({}, props, {
+    size: convertSize(size),
+    color: convertColor(color),
+    variant: convertVariant(variant),
+    ref: ref,
+    startDecorator: startIcon,
+    endDecorator: endIcon,
+    sx: sx
+  }));
+});
+var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref5, ref) {
+  var _convertColor;
+  var color = _ref5.color,
+    size = _ref5.size,
+    sx = _ref5.sx,
+    touchRippleRef = _ref5.touchRippleRef,
+    props = _objectWithoutProperties(_ref5, _excluded4);
+  return /*#__PURE__*/_jsx(JoyIconButton, _extends({}, props, {
+    size: convertSize(size),
+    color: (_convertColor = convertColor(color)) != null ? _convertColor : 'neutral',
+    variant: "plain",
+    ref: ref,
+    sx: sx
+  }));
+});
+var Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref6, ref) {
+  var name = _ref6.name,
+    checkedIcon = _ref6.checkedIcon,
+    colorProp = _ref6.color,
+    disableRipple = _ref6.disableRipple,
+    disableFocusRipple = _ref6.disableFocusRipple,
+    disableTouchRipple = _ref6.disableTouchRipple,
+    edge = _ref6.edge,
+    icon = _ref6.icon,
+    inputProps = _ref6.inputProps,
+    inputRef = _ref6.inputRef,
+    size = _ref6.size,
+    sx = _ref6.sx,
+    onChange = _ref6.onChange,
+    onClick = _ref6.onClick,
+    props = _objectWithoutProperties(_ref6, _excluded5);
+  return /*#__PURE__*/_jsx(JoySwitch, _extends({}, props, {
+    onChange: onChange,
+    size: convertSize(size),
+    color: convertColor(colorProp),
+    ref: ref,
+    slotProps: {
+      input: _extends({}, inputProps, {
+        name: name,
+        onClick: onClick,
+        ref: inputRef
+      }),
+      thumb: {
+        children: icon
+      }
+    },
+    sx: [_extends({}, edge === 'start' && {
+      ml: '-8px'
+    }, edge === 'end' && {
+      mr: '-8px'
+    })].concat(_toConsumableArray(Array.isArray(sx) ? sx : [sx]))
+  }));
+});
+var Select = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
+  var open = _ref7.open,
+    onOpen = _ref7.onOpen,
+    value = _ref7.value,
+    onChange = _ref7.onChange,
+    size = _ref7.size,
+    color = _ref7.color,
+    variant = _ref7.variant,
+    inputProps = _ref7.inputProps,
+    MenuProps = _ref7.MenuProps,
+    inputRef = _ref7.inputRef,
+    error = _ref7.error,
+    native = _ref7.native,
+    fullWidth = _ref7.fullWidth,
+    labelId = _ref7.labelId,
+    props = _objectWithoutProperties(_ref7, _excluded6);
+  var handleChange = function handleChange(event, newValue) {
+    if (event && onChange) {
+      // Same as in https://github.com/mui/material-ui/blob/e5558282a8f36856aef1299f3a36f3235e92e770/packages/mui-material/src/Select/SelectInput.js#L288-L300
+
+      // Redefine target to allow name and value to be read.
+      // This allows seamless integration with the most popular form libraries.
+      // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
+      // Clone the event to not override `target` of the original event.
+      var nativeEvent = event.nativeEvent || event;
+      // @ts-ignore The nativeEvent is function, not object
+      var clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
+      Object.defineProperty(clonedEvent, 'target', {
+        writable: true,
+        value: {
+          value: newValue,
+          name: props.name
+        }
+      });
+      onChange(clonedEvent, null);
+    }
+  };
+  return /*#__PURE__*/_jsx(JoySelect, _extends({}, props, {
+    listboxOpen: open,
+    onListboxOpenChange: function onListboxOpenChange(isOpen) {
+      if (isOpen) {
+        onOpen == null ? void 0 : onOpen({});
+      } else {
+        var _MenuProps$onClose;
+        MenuProps == null ? void 0 : (_MenuProps$onClose = MenuProps.onClose) == null ? void 0 : _MenuProps$onClose.call(MenuProps, {}, undefined);
+      }
+    },
+    size: convertSize(size),
+    color: convertColor(color),
+    variant: convertVariant(variant, 'outlined'),
+    ref: ref,
+    value: value,
+    onChange: handleChange,
+    slotProps: {
+      button: {
+        'aria-labelledby': labelId,
+        ref: inputRef
+      },
+      listbox: {
+        disablePortal: false,
+        sx: {
+          zIndex: 1350
+        }
+      }
+    }
+  }));
+});
+var Option = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
+  var native = _ref8.native,
+    props = _objectWithoutProperties(_ref8, _excluded7);
+  return /*#__PURE__*/_jsx(JoyOption, _extends({}, props, {
+    ref: ref
+  }));
+});
+var InputLabel = /*#__PURE__*/React.forwardRef(function (_ref9, ref) {
+  var shrink = _ref9.shrink,
+    variant = _ref9.variant,
+    sx = _ref9.sx,
+    props = _objectWithoutProperties(_ref9, _excluded8);
+  return /*#__PURE__*/_jsx(JoyFormLabel, _extends({}, props, {
+    ref: ref,
+    sx: sx
+  }));
+});
 var joySlots = {
   baseCheckbox: Checkbox,
-  baseTextField: TextField
-  // BaseFormControl: MUIFormControl,
-  // BaseSelect: MUISelect,
-  // BaseSwitch: MUISwitch,
-  // BaseButton: MUIButton,
-  // BaseIconButton: MUIIconButton,
+  baseTextField: TextField,
+  baseButton: Button,
+  baseIconButton: IconButton,
+  baseSwitch: Switch,
+  baseSelect: Select,
+  baseSelectOption: Option,
+  baseInputLabel: InputLabel,
+  baseFormControl: JoyFormControl
   // BaseTooltip: MUITooltip,
   // BasePopper: MUIPopper,
 };

package/legacy/locales/frFR.js

@@ -39,7 +39,7 @@ var frFRGrid = {
   columnsPanelHideAllButton: 'Tout cacher',
   // Filter panel text
   filterPanelAddFilter: 'Ajouter un filtre',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Tout supprimer',
   filterPanelDeleteIconLabel: 'Supprimer',
   filterPanelLogicOperator: 'Opérateur logique',
   filterPanelOperator: 'Opérateur',
@@ -69,7 +69,7 @@ var frFRGrid = {
   // Column menu text
   columnMenuLabel: 'Menu',
   columnMenuShowColumns: 'Afficher les colonnes',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Gérer les colonnes',
   columnMenuFilter: 'Filtrer',
   columnMenuHideColumn: 'Cacher',
   columnMenuUnsort: 'Annuler le tri',

package/legacy/locales/trTR.js

@@ -39,7 +39,7 @@ var trTRGrid = {
   columnsPanelHideAllButton: 'Hepsini gizle',
   // Filter panel text
   filterPanelAddFilter: 'Filtre Ekle',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Hepsini kaldır',
   filterPanelDeleteIconLabel: 'Kaldır',
   filterPanelLogicOperator: 'Mantıksal operatörler',
   filterPanelOperator: 'Operatör',
@@ -69,7 +69,7 @@ var trTRGrid = {
   // Column menu text
   columnMenuLabel: 'Menü',
   columnMenuShowColumns: 'Sütunları göster',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Sütunları yönet',
   columnMenuFilter: 'Filtre uygula',
   columnMenuHideColumn: 'Gizle',
   columnMenuUnsort: 'Sıralama',

package/legacy/locales/zhCN.js

@@ -39,7 +39,7 @@ var zhCNGrid = {
   columnsPanelHideAllButton: '隐藏所有',
   // Filter panel text
   filterPanelAddFilter: '添加筛选器',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: '清除全部',
   filterPanelDeleteIconLabel: '删除',
   filterPanelLogicOperator: '逻辑操作器',
   filterPanelOperator: '操作器',
@@ -69,7 +69,7 @@ var zhCNGrid = {
   // Column menu text
   columnMenuLabel: '菜单',
   columnMenuShowColumns: '显示',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: '管理列',
   columnMenuFilter: '筛选器',
   columnMenuHideColumn: '隐藏',
   columnMenuUnsort: '恢复默认',

package/locales/frFR.js

@@ -37,7 +37,7 @@ const frFRGrid = {
   columnsPanelHideAllButton: 'Tout cacher',
   // Filter panel text
   filterPanelAddFilter: 'Ajouter un filtre',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Tout supprimer',
   filterPanelDeleteIconLabel: 'Supprimer',
   filterPanelLogicOperator: 'Opérateur logique',
   filterPanelOperator: 'Opérateur',
@@ -67,7 +67,7 @@ const frFRGrid = {
   // Column menu text
   columnMenuLabel: 'Menu',
   columnMenuShowColumns: 'Afficher les colonnes',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Gérer les colonnes',
   columnMenuFilter: 'Filtrer',
   columnMenuHideColumn: 'Cacher',
   columnMenuUnsort: 'Annuler le tri',

package/locales/trTR.js

@@ -37,7 +37,7 @@ const trTRGrid = {
   columnsPanelHideAllButton: 'Hepsini gizle',
   // Filter panel text
   filterPanelAddFilter: 'Filtre Ekle',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Hepsini kaldır',
   filterPanelDeleteIconLabel: 'Kaldır',
   filterPanelLogicOperator: 'Mantıksal operatörler',
   filterPanelOperator: 'Operatör',
@@ -67,7 +67,7 @@ const trTRGrid = {
   // Column menu text
   columnMenuLabel: 'Menü',
   columnMenuShowColumns: 'Sütunları göster',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Sütunları yönet',
   columnMenuFilter: 'Filtre uygula',
   columnMenuHideColumn: 'Gizle',
   columnMenuUnsort: 'Sıralama',

package/locales/zhCN.js

@@ -37,7 +37,7 @@ const zhCNGrid = {
   columnsPanelHideAllButton: '隐藏所有',
   // Filter panel text
   filterPanelAddFilter: '添加筛选器',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: '清除全部',
   filterPanelDeleteIconLabel: '删除',
   filterPanelLogicOperator: '逻辑操作器',
   filterPanelOperator: '操作器',
@@ -67,7 +67,7 @@ const zhCNGrid = {
   // Column menu text
   columnMenuLabel: '菜单',
   columnMenuShowColumns: '显示',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: '管理列',
   columnMenuFilter: '筛选器',
   columnMenuHideColumn: '隐藏',
   columnMenuUnsort: '恢复默认',

package/material/index.d.ts

@@ -15,12 +15,13 @@ declare const materialSlots: {
     BaseButton: import("@mui/material").ExtendButtonBase<import("@mui/material/Button").ButtonTypeMap<{}, "button">>;
     BaseIconButton: import("@mui/material").ExtendButtonBase<import("@mui/material/IconButton").IconButtonTypeMap<{}, "button">>;
     BaseTooltip: typeof MUITooltip;
-    BasePopper: import("react").ForwardRefExoticComponent<Omit<import("@mui/base").PopperUnstyledProps<"div", {}>, "direction"> & {
+    BasePopper: import("react").ForwardRefExoticComponent<Omit<import("@mui/base").PopperProps<"div">, "direction"> & {
+        component?: import("react").ElementType<any> | undefined;
         components?: {
             Root?: import("react").ElementType<any> | undefined;
         } | undefined;
         componentsProps?: {
-            root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperUnstyledRootSlotPropsOverrides, import("@mui/base").PopperUnstyledOwnProps> | undefined;
+            root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperRootSlotPropsOverrides, import("@mui/base").PopperOwnProps> | undefined;
         } | undefined;
         sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;

package/modern/components/GridPagination.js

@@ -41,7 +41,8 @@ export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginat
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const warnedOnceMissingInPageSizeOptions = React.useRef(false);
-    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(paginationModel.pageSize)) {
+    const pageSize = rootProps.paginationModel?.pageSize ?? paginationModel.pageSize;
+    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(pageSize)) {
       console.warn([`MUI: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\``, `Add it to show the pagination select.`].join('\n'));
       warnedOnceMissingInPageSizeOptions.current = true;
     }

package/modern/components/base/GridBody.js

@@ -18,7 +18,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 function GridBody(props) {
   const {
     VirtualScrollerComponent,
-    ColumnHeadersProps
+    ColumnHeadersProps,
+    children
   } = props;
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
@@ -45,13 +46,20 @@ function GridBody(props) {
     if (typeof ResizeObserver === 'undefined') {
       return () => {};
     }
+    let animationFrame;
     const observer = new ResizeObserver(() => {
-      apiRef.current.computeSizeAndPublishResizeEvent();
+      // See https://github.com/mui/mui-x/issues/8733
+      animationFrame = window.requestAnimationFrame(() => {
+        apiRef.current.computeSizeAndPublishResizeEvent();
+      });
     });
     if (elementToObserve) {
       observer.observe(elementToObserve);
     }
     return () => {
+      if (animationFrame) {
+        window.cancelAnimationFrame(animationFrame);
+      }
       if (elementToObserve) {
         observer.unobserve(elementToObserve);
       }
@@ -112,7 +120,7 @@ function GridBody(props) {
     , {
       ref: virtualScrollerRef,
       disableVirtualization: isVirtualizationDisabled
-    })]
+    }), children]
   });
 }
 process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
@@ -120,6 +128,7 @@ process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  children: PropTypes.node,
   ColumnHeadersProps: PropTypes.object,
   VirtualScrollerComponent: PropTypes.elementType.isRequired
 } : void 0;

package/modern/components/cell/GridActionsCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "focusElementRef"];
+const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuList from '@mui/material/MenuList';
@@ -188,6 +188,7 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  api: PropTypes.object,
   /**
    * The mode of the cell.
    */
@@ -210,6 +211,9 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
       focus: PropTypes.func.isRequired
     })
   })]),
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
   formattedValue: PropTypes.any,
   /**
    * If true, the cell is the active element.
@@ -236,6 +240,10 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
    * the tabIndex value.
    */
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
   value: PropTypes.any
 } : void 0;
 export { GridActionsCell };

package/modern/components/containers/GridRootStyles.js

@@ -204,7 +204,9 @@ export const GridRootStyles = styled('div', {
       minWidth: 0,
       flex: 1,
       whiteSpace: 'nowrap',
-      overflow: 'hidden'
+      overflow: 'hidden',
+      // to anchor the aggregation label
+      position: 'relative'
     },
     [`& .${gridClasses.columnHeaderTitleContainerContent}`]: {
       overflow: 'hidden',

package/modern/components/toolbar/GridToolbarFilterButton.js

@@ -68,7 +68,9 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
         children: activeFilters.map((item, index) => _extends({}, lookup[item.field] && /*#__PURE__*/_jsx("li", {
           children: `${lookup[item.field].headerName || item.field}
                   ${getOperatorLabel(item)}
-                  ${item.value ? getFilterItemValue(item) : ''}`
+                  ${
+          // implicit check for null and undefined
+          item.value != null ? getFilterItemValue(item) : ''}`
         }, index)))
       })]
     });

package/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/modern/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -7,10 +7,7 @@ import { gridColumnGroupsLookupSelector, gridColumnGroupsUnwrappedModelSelector
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { getColumnGroupsHeaderStructure, unwrapGroupingColumnModel } from './gridColumnGroupsUtils';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { gridColumnFieldsSelector,
-// GridColumnsState,
-gridVisibleColumnFieldsSelector } from '../columns';
-import { useGridSelector } from '../../utils/useGridSelector';
+import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from '../columns';
 const createGroupLookup = columnGroupingModel => {
   let groupLookup = {};
   columnGroupingModel.forEach(node => {
@@ -94,18 +91,14 @@ export const useGridColumnGrouping = (apiRef, props) => {
       });
     });
   }, [apiRef, props.columnGroupingModel]);
-  useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
-  const columnFields = useGridSelector(apiRef, gridColumnFieldsSelector);
-  const visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
-  /**
-   * EFFECTS
-   */
-  React.useEffect(() => {
+  const updateColumnGroupingState = React.useCallback(columnGroupingModel => {
     if (!props.experimentalFeatures?.columnGrouping) {
       return;
     }
-    const groupLookup = createGroupLookup(props.columnGroupingModel ?? []);
-    const unwrappedGroupingModel = unwrapGroupingColumnModel(props.columnGroupingModel ?? []);
+    const columnFields = gridColumnFieldsSelector(apiRef);
+    const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
+    const groupLookup = createGroupLookup(columnGroupingModel ?? []);
+    const unwrappedGroupingModel = unwrapGroupingColumnModel(columnGroupingModel ?? []);
     const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel);
     const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => unwrappedGroupingModel[field]?.length ?? 0));
     apiRef.current.setState(state => {
@@ -118,5 +111,19 @@ export const useGridColumnGrouping = (apiRef, props) => {
         }
       });
     });
-  }, [apiRef, columnFields, visibleColumnFields, props.columnGroupingModel, props.experimentalFeatures?.columnGrouping]);
+  }, [apiRef, props.experimentalFeatures?.columnGrouping]);
+  useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
+  useGridApiEventHandler(apiRef, 'columnsChange', () => {
+    updateColumnGroupingState(props.columnGroupingModel);
+  });
+  useGridApiEventHandler(apiRef, 'columnVisibilityModelChange', () => {
+    updateColumnGroupingState(props.columnGroupingModel);
+  });
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    updateColumnGroupingState(props.columnGroupingModel);
+  }, [updateColumnGroupingState, props.columnGroupingModel]);
 };

package/modern/hooks/features/focus/useGridFocus.js

@@ -298,9 +298,9 @@ export const useGridFocus = (apiRef, props) => {
   useGridApiMethod(apiRef, focusPrivateApi, 'private');
   React.useEffect(() => {
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
-    doc.addEventListener('click', handleDocumentClick);
+    doc.addEventListener('mouseup', handleDocumentClick);
     return () => {
-      doc.removeEventListener('click', handleDocumentClick);
+      doc.removeEventListener('mouseup', handleDocumentClick);
     };
   }, [apiRef, handleDocumentClick]);
   useGridApiEventHandler(apiRef, 'columnHeaderBlur', handleBlur);

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.2.1
+ * @mui/x-data-grid v6.3.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the