@mui/x-data-grid 6.2.1 → 6.3.1

package/joy/joySlots.js

@@ -1,13 +1,57 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"];
+const _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, defaultVariant = 'plain') {
+  if (!variant) {
+    return defaultVariant;
+  }
+  return {
+    standard: 'outlined',
+    outlined: 'outlined',
+    contained: 'solid',
+    text: 'plain',
+    filled: 'soft'
+  }[variant] || defaultVariant;
+}
 const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       inputProps,
@@ -27,43 +71,209 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange: onChange
   }));
 });
-const TextField = /*#__PURE__*/React.forwardRef(({
-  onChange,
-  label,
-  placeholder,
-  value,
-  inputRef,
-  type
-}, ref) => {
+const TextField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  var _props$InputProps, _props$inputProps;
+  let {
+      onChange,
+      label,
+      placeholder,
+      value,
+      inputRef,
+      type,
+      size,
+      variant
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  const rootRef = useForkRef(ref, (_props$InputProps = props.InputProps) == null ? void 0 : _props$InputProps.ref);
+  const inputForkRef = useForkRef(inputRef, props == null ? void 0 : (_props$inputProps = props.inputProps) == null ? void 0 : _props$inputProps.ref);
+  const {
+    startAdornment,
+    endAdornment
+  } = props.InputProps || {};
   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
     })]
   });
 });
+const Button = /*#__PURE__*/React.forwardRef(function Button(_ref3, ref) {
+  let {
+      startIcon,
+      color,
+      endIcon,
+      size,
+      sx,
+      variant
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  return /*#__PURE__*/_jsx(JoyButton, _extends({}, props, {
+    size: convertSize(size),
+    color: convertColor(color),
+    variant: convertVariant(variant),
+    ref: ref,
+    startDecorator: startIcon,
+    endDecorator: endIcon,
+    sx: sx
+  }));
+});
+const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref4, ref) {
+  var _convertColor;
+  let {
+      color,
+      size,
+      sx
+    } = _ref4,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+  return /*#__PURE__*/_jsx(JoyIconButton, _extends({}, props, {
+    size: convertSize(size),
+    color: (_convertColor = convertColor(color)) != null ? _convertColor : 'neutral',
+    variant: "plain",
+    ref: ref,
+    sx: sx
+  }));
+});
+const Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref5, ref) {
+  let {
+      name,
+      color: colorProp,
+      edge,
+      icon,
+      inputProps,
+      inputRef,
+      size,
+      sx,
+      onChange,
+      onClick
+    } = _ref5,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+  return /*#__PURE__*/_jsx(JoySwitch, _extends({}, props, {
+    onChange: onChange,
+    size: convertSize(size),
+    color: convertColor(colorProp),
+    ref: ref,
+    slotProps: {
+      input: _extends({}, inputProps, {
+        name,
+        onClick: onClick,
+        ref: inputRef
+      }),
+      thumb: {
+        children: icon
+      }
+    },
+    sx: [_extends({}, edge === 'start' && {
+      ml: '-8px'
+    }, edge === 'end' && {
+      mr: '-8px'
+    }), ...(Array.isArray(sx) ? sx : [sx])]
+  }));
+});
+const Select = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let {
+      open,
+      onOpen,
+      value,
+      onChange,
+      size,
+      color,
+      variant,
+      MenuProps,
+      inputRef,
+      labelId
+    } = _ref6,
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
+  const 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.
+      const nativeEvent = event.nativeEvent || event;
+      // @ts-ignore The nativeEvent is function, not object
+      const 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: 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
+        }
+      }
+    }
+  }));
+});
+const Option = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+  let props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
+  return /*#__PURE__*/_jsx(JoyOption, _extends({}, props, {
+    ref: ref
+  }));
+});
+const InputLabel = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
+  let {
+      sx
+    } = _ref8,
+    props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
+  return /*#__PURE__*/_jsx(JoyFormLabel, _extends({}, props, {
+    ref: ref,
+    sx: sx
+  }));
+});
 const 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/components/GridPagination.js

@@ -43,9 +43,11 @@ export var GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginatio
     apiRef.current.setPage(page);
   }, [apiRef]);
   if (process.env.NODE_ENV !== 'production') {
+    var _rootProps$pagination, _rootProps$pagination2;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     var warnedOnceMissingInPageSizeOptions = React.useRef(false);
-    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(paginationModel.pageSize)) {
+    var pageSize = (_rootProps$pagination = (_rootProps$pagination2 = rootProps.paginationModel) == null ? void 0 : _rootProps$pagination2.pageSize) != null ? _rootProps$pagination : paginationModel.pageSize;
+    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(pageSize)) {
       console.warn(["MUI: The page size `".concat(paginationModel.pageSize, "` is not preset in the `pageSizeOptions`"), "Add it to show the pagination select."].join('\n'));
       warnedOnceMissingInPageSizeOptions.current = true;
     }

package/legacy/components/base/GridBody.js

@@ -18,7 +18,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function GridBody(props) {
   var VirtualScrollerComponent = props.VirtualScrollerComponent,
-    ColumnHeadersProps = props.ColumnHeadersProps;
+    ColumnHeadersProps = props.ColumnHeadersProps,
+    children = props.children;
   var apiRef = useGridPrivateApiContext();
   var rootProps = useGridRootProps();
   var rootRef = React.useRef(null);
@@ -47,13 +48,20 @@ function GridBody(props) {
     if (typeof ResizeObserver === 'undefined') {
       return function () {};
     }
+    var animationFrame;
     var observer = new ResizeObserver(function () {
-      apiRef.current.computeSizeAndPublishResizeEvent();
+      // See https://github.com/mui/mui-x/issues/8733
+      animationFrame = window.requestAnimationFrame(function () {
+        apiRef.current.computeSizeAndPublishResizeEvent();
+      });
     });
     if (elementToObserve) {
       observer.observe(elementToObserve);
     }
     return function () {
+      if (animationFrame) {
+        window.cancelAnimationFrame(animationFrame);
+      }
       if (elementToObserve) {
         observer.unobserve(elementToObserve);
       }
@@ -114,7 +122,7 @@ function GridBody(props) {
     , {
       ref: virtualScrollerRef,
       disableVirtualization: isVirtualizationDisabled
-    })]
+    }), children]
   });
 }
 process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
@@ -122,6 +130,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/legacy/components/cell/GridActionsCell.js

@@ -1,7 +1,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";
-var _excluded = ["colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "focusElementRef"];
+var _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';
@@ -18,7 +18,8 @@ var hasActions = function hasActions(colDef) {
 };
 function GridActionsCell(props) {
   var _rootProps$slotProps;
-  var colDef = props.colDef,
+  var api = props.api,
+    colDef = props.colDef,
     id = props.id,
     hasFocus = props.hasFocus,
     isEditable = props.isEditable,
@@ -221,6 +222,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.
    */
@@ -243,6 +245,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.
@@ -269,6 +274,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/legacy/components/containers/GridRootStyles.js

@@ -82,7 +82,9 @@ export var GridRootStyles = styled('div', {
     minWidth: 0,
     flex: 1,
     whiteSpace: 'nowrap',
-    overflow: 'hidden'
+    overflow: 'hidden',
+    // to anchor the aggregation label
+    position: 'relative'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeaderTitleContainerContent), {
     overflow: 'hidden',
     display: 'flex',

package/legacy/components/toolbar/GridToolbarFilterButton.js

@@ -73,7 +73,9 @@ var GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbar
         ownerState: rootProps,
         children: activeFilters.map(function (item, index) {
           return _extends({}, lookup[item.field] && /*#__PURE__*/_jsx("li", {
-            children: "".concat(lookup[item.field].headerName || item.field, "\n                  ").concat(getOperatorLabel(item), "\n                  ").concat(item.value ? getFilterItemValue(item) : '')
+            children: "".concat(lookup[item.field].headerName || item.field, "\n                  ").concat(getOperatorLabel(item), "\n                  ").concat(
+            // implicit check for null and undefined
+            item.value != null ? getFilterItemValue(item) : '')
           }, index));
         })
       })]

package/legacy/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export var 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 var 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/legacy/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -9,10 +9,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';
 var createGroupLookup = function createGroupLookup(columnGroupingModel) {
   var groupLookup = {};
   columnGroupingModel.forEach(function (node) {
@@ -100,19 +97,15 @@ export var useGridColumnGrouping = function useGridColumnGrouping(apiRef, props)
       });
     });
   }, [apiRef, props.columnGroupingModel]);
-  useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
-  var columnFields = useGridSelector(apiRef, gridColumnFieldsSelector);
-  var visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
-  /**
-   * EFFECTS
-   */
-  React.useEffect(function () {
-    var _props$experimentalFe2, _props$columnGrouping4, _props$columnGrouping5;
+  var updateColumnGroupingState = React.useCallback(function (columnGroupingModel) {
+    var _props$experimentalFe2;
     if (!((_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.columnGrouping)) {
       return;
     }
-    var groupLookup = createGroupLookup((_props$columnGrouping4 = props.columnGroupingModel) != null ? _props$columnGrouping4 : []);
-    var unwrappedGroupingModel = unwrapGroupingColumnModel((_props$columnGrouping5 = props.columnGroupingModel) != null ? _props$columnGrouping5 : []);
+    var columnFields = gridColumnFieldsSelector(apiRef);
+    var visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
+    var groupLookup = createGroupLookup(columnGroupingModel != null ? columnGroupingModel : []);
+    var unwrappedGroupingModel = unwrapGroupingColumnModel(columnGroupingModel != null ? columnGroupingModel : []);
     var columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel);
     var maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max.apply(Math, _toConsumableArray(visibleColumnFields.map(function (field) {
       var _unwrappedGroupingMod4, _unwrappedGroupingMod5;
@@ -128,5 +121,19 @@ export var useGridColumnGrouping = function useGridColumnGrouping(apiRef, props)
         }
       });
     });
-  }, [apiRef, columnFields, visibleColumnFields, props.columnGroupingModel, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.columnGrouping]);
+  }, [apiRef, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.columnGrouping]);
+  useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
+  useGridApiEventHandler(apiRef, 'columnsChange', function () {
+    updateColumnGroupingState(props.columnGroupingModel);
+  });
+  useGridApiEventHandler(apiRef, 'columnVisibilityModelChange', function () {
+    updateColumnGroupingState(props.columnGroupingModel);
+  });
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(function () {
+    updateColumnGroupingState(props.columnGroupingModel);
+  }, [updateColumnGroupingState, props.columnGroupingModel]);
 };

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

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

package/legacy/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