@mui/x-data-grid-pro 5.15.1 → 5.16.0

package/modern/hooks/features/columnReorder/useGridColumnReorder.js

@@ -39,6 +39,7 @@ export const useGridColumnReorder = (apiRef, props) => {
     y: 0
   });
   const originColumnIndex = React.useRef(null);
+  const forbiddenIndexes = React.useRef({});
   const removeDnDStylesTimeout = React.useRef();
   const ownerState = {
     classes: props.classes
@@ -70,6 +71,57 @@ export const useGridColumnReorder = (apiRef, props) => {
       dragColNode.current.classList.remove(classes.columnHeaderDragging);
     });
     originColumnIndex.current = apiRef.current.getColumnIndex(params.field, false);
+    const draggingColumnGroupPath = apiRef.current.unstable_getColumnGroupPath(params.field);
+    const columnIndex = originColumnIndex.current;
+    const allColumns = apiRef.current.getAllColumns();
+    const groupsLookup = apiRef.current.unstable_getAllGroupDetails(); // The limitingGroupId is the id of the group from which the dragged column should not escape
+
+    let limitingGroupId = null;
+    draggingColumnGroupPath.forEach(groupId => {
+      if (!groupsLookup[groupId]?.freeReordering) {
+        // Only consider group that are made of more than one column
+        if (columnIndex > 0 && allColumns[columnIndex - 1].groupPath?.includes(groupId)) {
+          limitingGroupId = groupId;
+        } else if (columnIndex + 1 < allColumns.length && allColumns[columnIndex + 1].groupPath?.includes(groupId)) {
+          limitingGroupId = groupId;
+        }
+      }
+    });
+    forbiddenIndexes.current = {};
+
+    for (let indexToForbid = 0; indexToForbid < allColumns.length; indexToForbid += 1) {
+      const leftIndex = indexToForbid <= columnIndex ? indexToForbid - 1 : indexToForbid;
+      const rightIndex = indexToForbid < columnIndex ? indexToForbid : indexToForbid + 1;
+
+      if (limitingGroupId !== null) {
+        // verify this indexToForbid will be linked to the limiting group. Otherwise forbid it
+        let allowIndex = false;
+
+        if (leftIndex >= 0 && allColumns[leftIndex].groupPath?.includes(limitingGroupId)) {
+          allowIndex = true;
+        } else if (rightIndex < allColumns.length && allColumns[rightIndex].groupPath?.includes(limitingGroupId)) {
+          allowIndex = true;
+        }
+
+        if (!allowIndex) {
+          forbiddenIndexes.current[indexToForbid] = true;
+        }
+      } // Verify we are not splitting another group
+
+
+      if (leftIndex >= 0 && rightIndex < allColumns.length) {
+        allColumns[rightIndex]?.groupPath?.forEach(groupId => {
+          if (allColumns[leftIndex].groupPath?.includes(groupId)) {
+            if (!draggingColumnGroupPath.includes(groupId)) {
+              // moving here split the group groupId in two distincts chunks
+              if (!groupsLookup[groupId]?.freeReordering) {
+                forbiddenIndexes.current[indexToForbid] = true;
+              }
+            }
+          }
+        });
+      }
+    }
   }, [props.disableColumnReorder, classes.columnHeaderDragging, logger, apiRef]);
   const handleDragEnter = React.useCallback((params, event) => {
     event.preventDefault(); // Prevent drag events propagation.
@@ -100,19 +152,47 @@ export const useGridColumnReorder = (apiRef, props) => {
       const targetCol = apiRef.current.getColumn(params.field);
       const dragColIndex = apiRef.current.getColumnIndex(dragColField, false);
       const visibleColumns = apiRef.current.getVisibleColumns();
+      const allColumns = apiRef.current.getAllColumns();
       const cursorMoveDirectionX = getCursorMoveDirectionX(cursorPosition.current, coordinates);
       const hasMovedLeft = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_LEFT && targetColIndex < dragColIndex;
       const hasMovedRight = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_RIGHT && dragColIndex < targetColIndex;
 
       if (hasMovedLeft || hasMovedRight) {
         let canBeReordered;
+        let indexOffsetInHiddenColumns = 0;
 
         if (!targetCol.disableReorder) {
           canBeReordered = true;
         } else if (hasMovedLeft) {
-          canBeReordered = targetColIndex > 0 && !visibleColumns[targetColIndex - 1].disableReorder;
+          canBeReordered = targetColVisibleIndex > 0 && !visibleColumns[targetColVisibleIndex - 1].disableReorder;
         } else {
-          canBeReordered = targetColIndex < visibleColumns.length - 1 && !visibleColumns[targetColIndex + 1].disableReorder;
+          canBeReordered = targetColVisibleIndex < visibleColumns.length - 1 && !visibleColumns[targetColVisibleIndex + 1].disableReorder;
+        }
+
+        if (forbiddenIndexes.current[targetColIndex]) {
+          let nextVisibleColumnField;
+          let indexWithOffset = targetColIndex + indexOffsetInHiddenColumns;
+
+          if (hasMovedLeft) {
+            nextVisibleColumnField = targetColVisibleIndex > 0 ? visibleColumns[targetColVisibleIndex - 1].field : null;
+
+            while (indexWithOffset > 0 && allColumns[indexWithOffset].field !== nextVisibleColumnField && forbiddenIndexes.current[indexWithOffset]) {
+              indexOffsetInHiddenColumns -= 1;
+              indexWithOffset = targetColIndex + indexOffsetInHiddenColumns;
+            }
+          } else {
+            nextVisibleColumnField = targetColVisibleIndex + 1 < visibleColumns.length ? visibleColumns[targetColVisibleIndex + 1].field : null;
+
+            while (indexWithOffset < allColumns.length - 1 && allColumns[indexWithOffset].field !== nextVisibleColumnField && forbiddenIndexes.current[indexWithOffset]) {
+              indexOffsetInHiddenColumns += 1;
+              indexWithOffset = targetColIndex + indexOffsetInHiddenColumns;
+            }
+          }
+
+          if (forbiddenIndexes.current[indexWithOffset] || allColumns[indexWithOffset].field === nextVisibleColumnField) {
+            // If we ended up on a visible column, or a forbidden one, we can not do the reorder
+            canBeReordered = false;
+          }
         }
 
         const canBeReorderedProcessed = apiRef.current.unstable_applyPipeProcessors('canBeReordered', canBeReordered, {
@@ -120,7 +200,7 @@ export const useGridColumnReorder = (apiRef, props) => {
         });
 
         if (canBeReorderedProcessed) {
-          apiRef.current.setColumnIndex(dragColField, targetColIndex);
+          apiRef.current.setColumnIndex(dragColField, targetColIndex + indexOffsetInHiddenColumns);
         }
       }
 

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -4,7 +4,7 @@ import { ownerDocument, useEventCallback } from '@mui/material/utils';
 import { gridClasses, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
 import { clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
 import { useTheme } from '@mui/material/styles';
-import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField } from '../../../utils/domUtils';
+import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField, findGroupHeaderElementsFromField } from '../../../utils/domUtils';
 // TODO: remove support for Safari < 13.
 // https://caniuse.com/#search=touch-action
 //
@@ -104,6 +104,7 @@ export const useGridColumnResize = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridColumnResize');
   const colDefRef = React.useRef();
   const colElementRef = React.useRef();
+  const colGroupingElementRef = React.useRef();
   const colCellElementsRef = React.useRef();
   const theme = useTheme(); // To improve accessibility, the separator has padding on both sides.
   // Clicking inside the padding area should be treated as a click in the separator.
@@ -124,7 +125,7 @@ export const useGridColumnResize = (apiRef, props) => {
     colElementRef.current.style.width = `${newWidth}px`;
     colElementRef.current.style.minWidth = `${newWidth}px`;
     colElementRef.current.style.maxWidth = `${newWidth}px`;
-    colCellElementsRef.current.forEach(element => {
+    [...colCellElementsRef.current, ...colGroupingElementRef.current].forEach(element => {
       const div = element;
       let finalWidth;
 
@@ -198,6 +199,7 @@ export const useGridColumnResize = (apiRef, props) => {
     }, event);
     colDefRef.current = colDef;
     colElementRef.current = apiRef.current.columnHeadersContainerElementRef?.current.querySelector(`[data-field="${colDef.field}"]`);
+    colGroupingElementRef.current = findGroupHeaderElementsFromField(apiRef.current.columnHeadersContainerElementRef?.current, colDef.field);
     colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
@@ -267,6 +269,7 @@ export const useGridColumnResize = (apiRef, props) => {
     colElementRef.current = findParentElementFromClassName(event.target, gridClasses.columnHeader);
     const field = getFieldFromHeaderElem(colElementRef.current);
     const colDef = apiRef.current.getColumn(field);
+    colGroupingElementRef.current = findGroupHeaderElementsFromField(apiRef.current.columnHeadersContainerElementRef?.current, field);
     logger.debug(`Start Resize on col ${colDef.field}`);
     apiRef.current.publishEvent('columnResizeStart', {
       field

package/modern/hooks/features/treeData/gridTreeDataUtils.js

@@ -1,3 +1,4 @@
+import { passFilterLogic } from '@mui/x-data-grid/internals';
 export const TREE_DATA_STRATEGY = 'tree-data';
 /**
  * A node is visible if one of the following criteria is met:
@@ -21,10 +22,14 @@ export const filterRowTreeFromTreeData = params => {
 
     if (shouldSkipFilters) {
       isMatchingFilters = null;
-    } else if (!isRowMatchingFilters) {
+    } else if (!isRowMatchingFilters || node.position === 'footer') {
       isMatchingFilters = true;
     } else {
-      isMatchingFilters = isRowMatchingFilters(node.id);
+      const {
+        passingFilterItems,
+        passingQuickFilterValues
+      } = isRowMatchingFilters(node.id);
+      isMatchingFilters = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel);
     }
 
     let filteredDescendantCount = 0;

package/modern/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -97,7 +97,8 @@ export const useGridTreeDataPreProcessors = (apiRef, props) => {
     return filterRowTreeFromTreeData({
       rowTree,
       isRowMatchingFilters: params.isRowMatchingFilters,
-      disableChildrenFiltering: props.disableChildrenFiltering
+      disableChildrenFiltering: props.disableChildrenFiltering,
+      filterModel: params.filterModel
     });
   }, [apiRef, props.disableChildrenFiltering]);
   const sortRows = React.useCallback(params => {

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.15.1
+/** @license MUI v5.16.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/utils/domUtils.js

@@ -6,6 +6,9 @@ export function getFieldFromHeaderElem(colCellEl) {
 export function findHeaderElementFromField(elem, field) {
   return elem.querySelector(`[data-field="${field}"]`);
 }
+export function findGroupHeaderElementsFromField(elem, field) {
+  return Array.from(elem.querySelectorAll(`[data-fields*="|-${field}-|"]`) ?? []);
+}
 export function findGridCellElementsFromCol(col, api) {
   const root = findParentElementFromClassName(col, 'MuiDataGrid-root');
 

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY1OTU2NDAwMDAwMA==";
+  const releaseInfo = "MTY2MTM3ODQwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/node/DataGridPro/DataGridPro.js

@@ -130,6 +130,7 @@ DataGridProRaw.propTypes = {
    * @default 3
    */
   columnBuffer: _propTypes.default.number,
+  columnGroupingModel: _propTypes.default.arrayOf(_propTypes.default.object),
 
   /**
    * Set of columns of type [[GridColumns]].
@@ -298,6 +299,7 @@ DataGridProRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: _propTypes.default.shape({
+    columnGrouping: _propTypes.default.bool,
     newEditingApi: _propTypes.default.bool,
     preventCommitWhileValidating: _propTypes.default.bool,
     rowPinning: _propTypes.default.bool,
@@ -502,7 +504,7 @@ DataGridProRaw.propTypes = {
 
   /**
    * Allows to pass the logging level or false to turn off logging.
-   * @default "debug"
+   * @default "error" ("warn" in dev mode)
    */
   logLevel: _propTypes.default.oneOf(['debug', 'error', 'info', 'warn', false]),
 
@@ -846,7 +848,7 @@ DataGridProRaw.propTypes = {
    * @param {GridState} state The new state.
    * @param {MuiEvent<{}>} event The event object.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @internal
+   * @ignore - do not document.
    */
   onStateChange: _propTypes.default.func,
 

package/node/DataGridPro/useDataGridProComponent.js

@@ -42,6 +42,7 @@ const useDataGridProComponent = (inputApiRef, props) => {
    * Register all pre-processors called during state initialization here.
    */
 
+  (0, _internals.useGridColumnGroupingPreProcessors)(apiRef, props);
   (0, _internals.useGridSelectionPreProcessors)(apiRef, props);
   (0, _useGridRowReorderPreProcessors.useGridRowReorderPreProcessors)(apiRef, props);
   (0, _useGridTreeDataPreProcessors.useGridTreeDataPreProcessors)(apiRef, props);
@@ -72,6 +73,7 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridInitializeState)(_internals.paginationStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowsMetaStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnMenuStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.columnGroupsStateInitializer, apiRef, props);
   (0, _useGridTreeData.useGridTreeData)(apiRef);
   (0, _internals.useGridKeyboardNavigation)(apiRef, props);
   (0, _internals.useGridSelection)(apiRef, props);
@@ -82,6 +84,7 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridParamsApi)(apiRef);
   (0, _useGridDetailPanel.useGridDetailPanel)(apiRef, props);
   (0, _internals.useGridColumnSpanning)(apiRef);
+  (0, _internals.useGridColumnGrouping)(apiRef, props);
   const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? _internals.useGridEditing_new : _internals.useGridEditing_old;
   useGridEditing(apiRef, props);
   (0, _internals.useGridFocus)(apiRef, props);

package/node/components/DataGridProColumnHeaders.js

@@ -82,6 +82,7 @@ const GridColumnHeadersPinnedColumnHeaders = (0, _styles.styled)('div', {
   height: '100%',
   zIndex: 1,
   display: 'flex',
+  flexDirection: 'column',
   boxShadow: theme.shadows[2],
   backgroundColor: theme.palette.background.default
 }, theme.palette.mode === 'dark' && {
@@ -122,7 +123,8 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
     renderContext,
     getRootProps,
     getInnerProps,
-    getColumns
+    getColumnHeaders,
+    getColumnGroupHeaders
   } = (0, _internals.useGridColumnHeaders)({
     innerRef,
     minColumnIndex: leftPinnedColumns.length
@@ -143,35 +145,42 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
   }) : null;
   const innerProps = getInnerProps();
   const pinnedColumnHeadersProps = {
-    role: innerProps.role,
-    'aria-rowindex': innerProps['aria-rowindex']
+    role: innerProps.role
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridColumnHeaders, (0, _extends2.default)({
     ref: ref,
     className: className
   }, getRootProps(other), {
-    children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersPinnedColumnHeaders, (0, _extends2.default)({
+    children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeadersPinnedColumnHeaders, (0, _extends2.default)({
       className: classes.leftPinnedColumns,
       ownerState: {
         side: _columnPinning.GridPinnedPosition.left
       }
     }, pinnedColumnHeadersProps, {
-      children: getColumns({
+      children: [getColumnGroupHeaders({
+        renderContext: leftRenderContext,
+        minFirstColumn: leftRenderContext.firstColumnIndex,
+        maxLastColumn: leftRenderContext.lastColumnIndex
+      }), getColumnHeaders({
         renderContext: leftRenderContext,
         minFirstColumn: leftRenderContext.firstColumnIndex,
         maxLastColumn: leftRenderContext.lastColumnIndex
       }, {
         disableReorder: true
-      })
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridColumnHeadersInner, (0, _extends2.default)({
+      })]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridColumnHeadersInner, (0, _extends2.default)({
       isDragging: isDragging
     }, innerProps, {
-      children: getColumns({
+      children: [getColumnGroupHeaders({
         renderContext,
         minFirstColumn: leftPinnedColumns.length,
         maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
-      })
-    })), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersPinnedColumnHeaders, (0, _extends2.default)({
+      }), getColumnHeaders({
+        renderContext,
+        minFirstColumn: leftPinnedColumns.length,
+        maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
+      })]
+    })), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeadersPinnedColumnHeaders, (0, _extends2.default)({
       ownerState: {
         side: _columnPinning.GridPinnedPosition.right
       },
@@ -180,14 +189,18 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
         paddingRight: scrollbarSize
       }
     }, pinnedColumnHeadersProps, {
-      children: getColumns({
+      children: [getColumnGroupHeaders({
+        renderContext: rightRenderContext,
+        minFirstColumn: rightRenderContext.firstColumnIndex,
+        maxLastColumn: rightRenderContext.lastColumnIndex
+      }), getColumnHeaders({
         renderContext: rightRenderContext,
         minFirstColumn: rightRenderContext.firstColumnIndex,
         maxLastColumn: rightRenderContext.lastColumnIndex
       }, {
         disableReorder: true,
         separatorSide: _xDataGrid.GridColumnHeaderSeparatorSides.Left
-      })
+      })]
     }))]
   }));
 });

package/node/hooks/features/columnReorder/useGridColumnReorder.js

@@ -60,6 +60,7 @@ const useGridColumnReorder = (apiRef, props) => {
     y: 0
   });
   const originColumnIndex = React.useRef(null);
+  const forbiddenIndexes = React.useRef({});
   const removeDnDStylesTimeout = React.useRef();
   const ownerState = {
     classes: props.classes
@@ -91,6 +92,69 @@ const useGridColumnReorder = (apiRef, props) => {
       dragColNode.current.classList.remove(classes.columnHeaderDragging);
     });
     originColumnIndex.current = apiRef.current.getColumnIndex(params.field, false);
+    const draggingColumnGroupPath = apiRef.current.unstable_getColumnGroupPath(params.field);
+    const columnIndex = originColumnIndex.current;
+    const allColumns = apiRef.current.getAllColumns();
+    const groupsLookup = apiRef.current.unstable_getAllGroupDetails(); // The limitingGroupId is the id of the group from which the dragged column should not escape
+
+    let limitingGroupId = null;
+    draggingColumnGroupPath.forEach(groupId => {
+      var _groupsLookup$groupId;
+
+      if (!((_groupsLookup$groupId = groupsLookup[groupId]) != null && _groupsLookup$groupId.freeReordering)) {
+        var _allColumns$groupPath, _allColumns$groupPath2;
+
+        // Only consider group that are made of more than one column
+        if (columnIndex > 0 && (_allColumns$groupPath = allColumns[columnIndex - 1].groupPath) != null && _allColumns$groupPath.includes(groupId)) {
+          limitingGroupId = groupId;
+        } else if (columnIndex + 1 < allColumns.length && (_allColumns$groupPath2 = allColumns[columnIndex + 1].groupPath) != null && _allColumns$groupPath2.includes(groupId)) {
+          limitingGroupId = groupId;
+        }
+      }
+    });
+    forbiddenIndexes.current = {};
+
+    for (let indexToForbid = 0; indexToForbid < allColumns.length; indexToForbid += 1) {
+      const leftIndex = indexToForbid <= columnIndex ? indexToForbid - 1 : indexToForbid;
+      const rightIndex = indexToForbid < columnIndex ? indexToForbid : indexToForbid + 1;
+
+      if (limitingGroupId !== null) {
+        var _allColumns$leftIndex, _allColumns$rightInde;
+
+        // verify this indexToForbid will be linked to the limiting group. Otherwise forbid it
+        let allowIndex = false;
+
+        if (leftIndex >= 0 && (_allColumns$leftIndex = allColumns[leftIndex].groupPath) != null && _allColumns$leftIndex.includes(limitingGroupId)) {
+          allowIndex = true;
+        } else if (rightIndex < allColumns.length && (_allColumns$rightInde = allColumns[rightIndex].groupPath) != null && _allColumns$rightInde.includes(limitingGroupId)) {
+          allowIndex = true;
+        }
+
+        if (!allowIndex) {
+          forbiddenIndexes.current[indexToForbid] = true;
+        }
+      } // Verify we are not splitting another group
+
+
+      if (leftIndex >= 0 && rightIndex < allColumns.length) {
+        var _allColumns$rightInde2, _allColumns$rightInde3;
+
+        (_allColumns$rightInde2 = allColumns[rightIndex]) == null ? void 0 : (_allColumns$rightInde3 = _allColumns$rightInde2.groupPath) == null ? void 0 : _allColumns$rightInde3.forEach(groupId => {
+          var _allColumns$leftIndex2;
+
+          if ((_allColumns$leftIndex2 = allColumns[leftIndex].groupPath) != null && _allColumns$leftIndex2.includes(groupId)) {
+            if (!draggingColumnGroupPath.includes(groupId)) {
+              var _groupsLookup$groupId2;
+
+              // moving here split the group groupId in two distincts chunks
+              if (!((_groupsLookup$groupId2 = groupsLookup[groupId]) != null && _groupsLookup$groupId2.freeReordering)) {
+                forbiddenIndexes.current[indexToForbid] = true;
+              }
+            }
+          }
+        });
+      }
+    }
   }, [props.disableColumnReorder, classes.columnHeaderDragging, logger, apiRef]);
   const handleDragEnter = React.useCallback((params, event) => {
     event.preventDefault(); // Prevent drag events propagation.
@@ -121,19 +185,47 @@ const useGridColumnReorder = (apiRef, props) => {
       const targetCol = apiRef.current.getColumn(params.field);
       const dragColIndex = apiRef.current.getColumnIndex(dragColField, false);
       const visibleColumns = apiRef.current.getVisibleColumns();
+      const allColumns = apiRef.current.getAllColumns();
       const cursorMoveDirectionX = getCursorMoveDirectionX(cursorPosition.current, coordinates);
       const hasMovedLeft = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_LEFT && targetColIndex < dragColIndex;
       const hasMovedRight = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_RIGHT && dragColIndex < targetColIndex;
 
       if (hasMovedLeft || hasMovedRight) {
         let canBeReordered;
+        let indexOffsetInHiddenColumns = 0;
 
         if (!targetCol.disableReorder) {
           canBeReordered = true;
         } else if (hasMovedLeft) {
-          canBeReordered = targetColIndex > 0 && !visibleColumns[targetColIndex - 1].disableReorder;
+          canBeReordered = targetColVisibleIndex > 0 && !visibleColumns[targetColVisibleIndex - 1].disableReorder;
         } else {
-          canBeReordered = targetColIndex < visibleColumns.length - 1 && !visibleColumns[targetColIndex + 1].disableReorder;
+          canBeReordered = targetColVisibleIndex < visibleColumns.length - 1 && !visibleColumns[targetColVisibleIndex + 1].disableReorder;
+        }
+
+        if (forbiddenIndexes.current[targetColIndex]) {
+          let nextVisibleColumnField;
+          let indexWithOffset = targetColIndex + indexOffsetInHiddenColumns;
+
+          if (hasMovedLeft) {
+            nextVisibleColumnField = targetColVisibleIndex > 0 ? visibleColumns[targetColVisibleIndex - 1].field : null;
+
+            while (indexWithOffset > 0 && allColumns[indexWithOffset].field !== nextVisibleColumnField && forbiddenIndexes.current[indexWithOffset]) {
+              indexOffsetInHiddenColumns -= 1;
+              indexWithOffset = targetColIndex + indexOffsetInHiddenColumns;
+            }
+          } else {
+            nextVisibleColumnField = targetColVisibleIndex + 1 < visibleColumns.length ? visibleColumns[targetColVisibleIndex + 1].field : null;
+
+            while (indexWithOffset < allColumns.length - 1 && allColumns[indexWithOffset].field !== nextVisibleColumnField && forbiddenIndexes.current[indexWithOffset]) {
+              indexOffsetInHiddenColumns += 1;
+              indexWithOffset = targetColIndex + indexOffsetInHiddenColumns;
+            }
+          }
+
+          if (forbiddenIndexes.current[indexWithOffset] || allColumns[indexWithOffset].field === nextVisibleColumnField) {
+            // If we ended up on a visible column, or a forbidden one, we can not do the reorder
+            canBeReordered = false;
+          }
         }
 
         const canBeReorderedProcessed = apiRef.current.unstable_applyPipeProcessors('canBeReordered', canBeReordered, {
@@ -141,7 +233,7 @@ const useGridColumnReorder = (apiRef, props) => {
         });
 
         if (canBeReorderedProcessed) {
-          apiRef.current.setColumnIndex(dragColField, targetColIndex);
+          apiRef.current.setColumnIndex(dragColField, targetColIndex + indexOffsetInHiddenColumns);
         }
       }
 

package/node/hooks/features/columnResize/useGridColumnResize.js

@@ -127,6 +127,7 @@ const useGridColumnResize = (apiRef, props) => {
   const logger = (0, _xDataGrid.useGridLogger)(apiRef, 'useGridColumnResize');
   const colDefRef = React.useRef();
   const colElementRef = React.useRef();
+  const colGroupingElementRef = React.useRef();
   const colCellElementsRef = React.useRef();
   const theme = (0, _styles.useTheme)(); // To improve accessibility, the separator has padding on both sides.
   // Clicking inside the padding area should be treated as a click in the separator.
@@ -147,7 +148,7 @@ const useGridColumnResize = (apiRef, props) => {
     colElementRef.current.style.width = `${newWidth}px`;
     colElementRef.current.style.minWidth = `${newWidth}px`;
     colElementRef.current.style.maxWidth = `${newWidth}px`;
-    colCellElementsRef.current.forEach(element => {
+    [...colCellElementsRef.current, ...colGroupingElementRef.current].forEach(element => {
       const div = element;
       let finalWidth;
 
@@ -205,7 +206,7 @@ const useGridColumnResize = (apiRef, props) => {
   const handleColumnResizeMouseDown = (0, _utils.useEventCallback)(({
     colDef
   }, event) => {
-    var _apiRef$current$colum;
+    var _apiRef$current$colum, _apiRef$current$colum2;
 
     // Only handle left clicks
     if (event.button !== 0) {
@@ -225,6 +226,7 @@ const useGridColumnResize = (apiRef, props) => {
     }, event);
     colDefRef.current = colDef;
     colElementRef.current = (_apiRef$current$colum = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum.current.querySelector(`[data-field="${colDef.field}"]`);
+    colGroupingElementRef.current = (0, _domUtils.findGroupHeaderElementsFromField)((_apiRef$current$colum2 = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum2.current, colDef.field);
     colCellElementsRef.current = (0, _domUtils.findGridCellElementsFromCol)(colElementRef.current, apiRef.current);
     const doc = (0, _utils.ownerDocument)(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
@@ -273,7 +275,7 @@ const useGridColumnResize = (apiRef, props) => {
     apiRef.current.publishEvent('columnResize', params, nativeEvent);
   });
   const handleTouchStart = (0, _utils.useEventCallback)(event => {
-    var _apiRef$current$colum2;
+    var _apiRef$current$colum3, _apiRef$current$colum4;
 
     const cellSeparator = (0, _internals.findParentElementFromClassName)(event.target, _xDataGrid.gridClasses['columnSeparator--resizable']); // Let the event bubble if the target is not a col separator
 
@@ -296,12 +298,13 @@ const useGridColumnResize = (apiRef, props) => {
     colElementRef.current = (0, _internals.findParentElementFromClassName)(event.target, _xDataGrid.gridClasses.columnHeader);
     const field = (0, _domUtils.getFieldFromHeaderElem)(colElementRef.current);
     const colDef = apiRef.current.getColumn(field);
+    colGroupingElementRef.current = (0, _domUtils.findGroupHeaderElementsFromField)((_apiRef$current$colum3 = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum3.current, field);
     logger.debug(`Start Resize on col ${colDef.field}`);
     apiRef.current.publishEvent('columnResizeStart', {
       field
     }, event);
     colDefRef.current = colDef;
-    colElementRef.current = (0, _domUtils.findHeaderElementFromField)((_apiRef$current$colum2 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum2.current, colDef.field);
+    colElementRef.current = (0, _domUtils.findHeaderElementFromField)((_apiRef$current$colum4 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum4.current, colDef.field);
     colCellElementsRef.current = (0, _domUtils.findGridCellElementsFromCol)(colElementRef.current, apiRef.current);
     resizeDirection.current = getResizeDirection(event.target, theme.direction);
     initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
@@ -342,9 +345,9 @@ const useGridColumnResize = (apiRef, props) => {
     };
   }, [apiRef, handleTouchStart, stopListening]);
   (0, _xDataGrid.useGridNativeEventListener)(apiRef, () => {
-    var _apiRef$current$colum3;
+    var _apiRef$current$colum5;
 
-    return (_apiRef$current$colum3 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum3.current;
+    return (_apiRef$current$colum5 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum5.current;
   }, 'touchstart', handleTouchStart, {
     passive: doesSupportTouchActionNone()
   });

package/node/hooks/features/treeData/gridTreeDataUtils.js

@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.filterRowTreeFromTreeData = exports.TREE_DATA_STRATEGY = void 0;
+
+var _internals = require("@mui/x-data-grid/internals");
+
 const TREE_DATA_STRATEGY = 'tree-data';
 /**
  * A node is visible if one of the following criteria is met:
@@ -31,10 +34,14 @@ const filterRowTreeFromTreeData = params => {
 
     if (shouldSkipFilters) {
       isMatchingFilters = null;
-    } else if (!isRowMatchingFilters) {
+    } else if (!isRowMatchingFilters || node.position === 'footer') {
       isMatchingFilters = true;
     } else {
-      isMatchingFilters = isRowMatchingFilters(node.id);
+      const {
+        passingFilterItems,
+        passingQuickFilterValues
+      } = isRowMatchingFilters(node.id);
+      isMatchingFilters = (0, _internals.passFilterLogic)([passingFilterItems], [passingQuickFilterValues], params.filterModel);
     }
 
     let filteredDescendantCount = 0;

package/node/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -123,7 +123,8 @@ const useGridTreeDataPreProcessors = (apiRef, props) => {
     return (0, _gridTreeDataUtils.filterRowTreeFromTreeData)({
       rowTree,
       isRowMatchingFilters: params.isRowMatchingFilters,
-      disableChildrenFiltering: props.disableChildrenFiltering
+      disableChildrenFiltering: props.disableChildrenFiltering,
+      filterModel: params.filterModel
     });
   }, [apiRef, props.disableChildrenFiltering]);
   const sortRows = React.useCallback(params => {

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.15.1
+/** @license MUI v5.16.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/utils/domUtils.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.findGridCellElementsFromCol = findGridCellElementsFromCol;
+exports.findGroupHeaderElementsFromField = findGroupHeaderElementsFromField;
 exports.findHeaderElementFromField = findHeaderElementFromField;
 exports.getFieldFromHeaderElem = getFieldFromHeaderElem;
 
@@ -19,6 +20,12 @@ function findHeaderElementFromField(elem, field) {
   return elem.querySelector(`[data-field="${field}"]`);
 }
 
+function findGroupHeaderElementsFromField(elem, field) {
+  var _elem$querySelectorAl;
+
+  return Array.from((_elem$querySelectorAl = elem.querySelectorAll(`[data-fields*="|-${field}-|"]`)) != null ? _elem$querySelectorAl : []);
+}
+
 function findGridCellElementsFromCol(col, api) {
   const root = (0, _internals.findParentElementFromClassName)(col, 'MuiDataGrid-root');
 

package/node/utils/releaseInfo.js

@@ -8,7 +8,7 @@ exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 
 const getReleaseInfo = () => {
-  const releaseInfo = "MTY1OTU2NDAwMDAwMA==";
+  const releaseInfo = "MTY2MTM3ODQwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).