@mui/x-data-grid-pro 6.3.1 → 6.5.0

package/node/components/headerFiltering/GridHeaderFilterMenu.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridHeaderFilterMenu = GridHeaderFilterMenu;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+var _utils = require("@mui/utils");
+var _xDataGrid = require("@mui/x-data-grid");
+var _constants = require("./constants");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function GridHeaderFilterMenu({
+  open,
+  field,
+  targetRef,
+  applyFilterChanges,
+  operators,
+  item,
+  id,
+  labelledBy
+}) {
+  const apiRef = (0, _xDataGrid.useGridApiContext)();
+  const hideMenu = React.useCallback(() => {
+    apiRef.current.hideHeaderFilterMenu();
+  }, [apiRef]);
+  const handleListKeyDown = React.useCallback(event => {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+    }
+    if (event.key === 'Escape' || event.key === 'Tab') {
+      hideMenu();
+    }
+  }, [hideMenu]);
+  if (!targetRef.current) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridMenu, {
+    placement: "bottom-start",
+    open: open,
+    target: targetRef.current,
+    onClickAway: hideMenu,
+    onExited: hideMenu,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
+      "aria-labelledby": labelledBy,
+      id: id,
+      onKeyDown: handleListKeyDown,
+      children: operators.map((op, i) => {
+        const label = op?.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${(0, _utils.unstable_capitalize)(op.value)}`);
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+          onClick: () => {
+            applyFilterChanges((0, _extends2.default)({}, item, {
+              operator: op.value
+            }));
+            hideMenu();
+          },
+          autoFocus: i === 0 ? open : false,
+          selected: op.value === item.operator,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
+            children: _constants.OPERATOR_SYMBOL_MAPPING[op.value]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+            children: label
+          })]
+        }, `${field}-${op.value}`);
+      })
+    })
+  });
+}

package/node/components/headerFiltering/constants.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OPERATOR_SYMBOL_MAPPING = void 0;
+const OPERATOR_SYMBOL_MAPPING = {
+  contains: '∋',
+  equals: '=',
+  '=': '=',
+  '!=': '≠',
+  '>': '>',
+  '>=': '≥',
+  '<': '<',
+  '<=': '≤',
+  startsWith: '⊃',
+  endsWith: '⊂',
+  is: '=',
+  not: '≠',
+  isNot: '≠',
+  isEmpty: '∅',
+  isNotEmpty: '∉',
+  isIn: '∈',
+  isNotIn: '∉',
+  isLessThan: '<',
+  isLessThanOrEqual: '≤',
+  isGreaterThan: '>',
+  isGreaterThanOrEqual: '≥',
+  isBetween: '∈',
+  isNotBetween: '∉',
+  isAnyOf: '∈',
+  after: '>',
+  onOrAfter: '≥',
+  before: '<',
+  onOrBefore: '≤'
+};
+exports.OPERATOR_SYMBOL_MAPPING = OPERATOR_SYMBOL_MAPPING;

package/node/components/headerFiltering/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _GridHeaderFilterAdornment = require("./GridHeaderFilterAdornment");
+Object.keys(_GridHeaderFilterAdornment).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridHeaderFilterAdornment[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridHeaderFilterAdornment[key];
+    }
+  });
+});
+var _GridHeaderFilterCell = require("./GridHeaderFilterCell");
+Object.keys(_GridHeaderFilterCell).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridHeaderFilterCell[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridHeaderFilterCell[key];
+    }
+  });
+});

package/node/components/index.js

@@ -46,4 +46,15 @@ Object.keys(_icons).forEach(function (key) {
       return _icons[key];
     }
   });
+});
+var _headerFiltering = require("./headerFiltering");
+Object.keys(_headerFiltering).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _headerFiltering[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _headerFiltering[key];
+    }
+  });
 });

package/node/constants/dataGridProDefaultSlotsComponents.js

@@ -9,9 +9,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _internals = require("@mui/x-data-grid/internals");
 var _GridProColumnMenu = require("../components/GridProColumnMenu");
 var _GridColumnHeaders = require("../components/GridColumnHeaders");
+var _GridHeaderFilterMenu = require("../components/headerFiltering/GridHeaderFilterMenu");
+var _GridHeaderFilterCell = require("../components/headerFiltering/GridHeaderFilterCell");
 var _material = _interopRequireDefault(require("../material"));
 const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS = (0, _extends2.default)({}, _internals.DATA_GRID_DEFAULT_SLOTS_COMPONENTS, _material.default, {
   ColumnMenu: _GridProColumnMenu.GridProColumnMenu,
-  ColumnHeaders: _GridColumnHeaders.GridColumnHeaders
+  ColumnHeaders: _GridColumnHeaders.GridColumnHeaders,
+  HeaderFilterCell: _GridHeaderFilterCell.GridHeaderFilterCell,
+  HeaderFilterMenu: _GridHeaderFilterMenu.GridHeaderFilterMenu
 });
 exports.DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS = DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS;

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridColumnHeaders = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _xDataGrid = require("@mui/x-data-grid");
+var _system = require("@mui/system");
+var _internals = require("@mui/x-data-grid/internals");
+var _useGridRootProps = require("../../utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["getColumnsToRender", "getRootProps"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const GridHeaderFilterRow = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'HeaderFilterRow',
+  overridesResolver: (props, styles) => styles.headerFilterRow
+})(() => ({
+  display: 'flex',
+  borderTop: '1px solid rgba(224, 224, 224, 1)'
+}));
+const useGridColumnHeaders = props => {
+  const apiRef = (0, _internals.useGridPrivateApiContext)();
+  const {
+    headerGroupingMaxDepth,
+    hasOtherElementInTabSequence
+  } = props;
+  const columnHeaderFilterTabIndexState = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.unstable_gridTabIndexColumnHeaderFilterSelector);
+  const _useGridColumnHeaders = (0, _internals.useGridColumnHeaders)((0, _extends2.default)({}, props, {
+      hasOtherElementInTabSequence: hasOtherElementInTabSequence || columnHeaderFilterTabIndexState !== null
+    })),
+    {
+      getColumnsToRender,
+      getRootProps
+    } = _useGridColumnHeaders,
+    otherProps = (0, _objectWithoutPropertiesLoose2.default)(_useGridColumnHeaders, _excluded);
+  const headerFiltersRef = React.useRef(null);
+  apiRef.current.register('private', {
+    headerFiltersElementRef: headerFiltersRef
+  });
+  const headerFilterMenuRef = React.useRef(null);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const disableHeaderFiltering = !rootProps.unstable_headerFilters;
+  const headerHeight = Math.floor(rootProps.columnHeaderHeight * props.densityFactor);
+  const filterModel = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFilterModelSelector);
+  const totalHeaderHeight = (0, _internals.getTotalHeaderHeight)(apiRef, rootProps.columnHeaderHeight) + (disableHeaderFiltering ? 0 : headerHeight);
+  const columnHeaderFilterFocus = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.unstable_gridFocusColumnHeaderFilterSelector);
+  const getColumnFilters = (params, other = {}) => {
+    if (disableHeaderFiltering) {
+      return null;
+    }
+    const columnsToRender = getColumnsToRender(params);
+    if (columnsToRender == null) {
+      return null;
+    }
+    const {
+      renderedColumns,
+      firstColumnToRender
+    } = columnsToRender;
+    const filters = [];
+    for (let i = 0; i < renderedColumns.length; i += 1) {
+      const colDef = renderedColumns[i];
+      const columnIndex = firstColumnToRender + i;
+      const hasFocus = columnHeaderFilterFocus?.field === colDef.field;
+      const isFirstColumn = columnIndex === 0;
+      const tabIndexField = columnHeaderFilterTabIndexState?.field;
+      const tabIndex = tabIndexField === colDef.field || isFirstColumn && !props.hasOtherElementInTabSequence ? 0 : -1;
+      let headerFilterComponent;
+      if (colDef.renderHeaderFilter) {
+        headerFilterComponent = colDef.renderHeaderFilter(apiRef.current.getColumnHeaderParams(colDef.field));
+      }
+      const headerClassName = typeof colDef.headerClassName === 'function' ? colDef.headerClassName({
+        field: colDef.field,
+        colDef
+      }) : colDef.headerClassName;
+
+      // TODO: Support for `isAnyOf` operator
+      const filterOperators = colDef.filterOperators?.filter(operator => operator.value !== 'isAnyOf') ?? [];
+      const item = filterModel?.items.find(it => it.field === colDef.field && it.operator !== 'isAnyOf') ?? (0, _internals.getGridFilter)(colDef);
+      filters.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.headerFilterCell, (0, _extends2.default)({
+        colIndex: columnIndex,
+        height: headerHeight,
+        width: colDef.computedWidth,
+        colDef: colDef,
+        hasFocus: hasFocus,
+        tabIndex: tabIndex,
+        headerFilterMenuRef: headerFilterMenuRef,
+        headerFilterComponent: headerFilterComponent,
+        headerClassName: headerClassName,
+        filterOperators: filterOperators,
+        "data-field": colDef.field,
+        item: item
+      }, rootProps.slotProps?.headerFilterCell, other), `${colDef.field}-filter`));
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridHeaderFilterRow, {
+      ref: headerFiltersRef,
+      ownerState: rootProps,
+      role: "row",
+      "aria-rowindex": headerGroupingMaxDepth + 2,
+      children: filters
+    });
+  };
+  const rootStyle = {
+    minHeight: totalHeaderHeight,
+    maxHeight: totalHeaderHeight,
+    lineHeight: `${headerHeight}px`
+  };
+  return (0, _extends2.default)({}, otherProps, {
+    getColumnFilters,
+    getRootProps: disableHeaderFiltering ? getRootProps : (other = {}) => (0, _extends2.default)({
+      style: rootStyle
+    }, other)
+  });
+};
+exports.useGridColumnHeaders = useGridColumnHeaders;

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

@@ -97,6 +97,7 @@ const useGridColumnResize = (apiRef, props) => {
   const logger = (0, _xDataGrid.useGridLogger)(apiRef, 'useGridColumnResize');
   const colDefRef = React.useRef();
   const colElementRef = React.useRef();
+  const headerFilterElementRef = React.useRef();
   const colGroupingElementRef = React.useRef();
   const colCellElementsRef = React.useRef();
   const theme = (0, _styles.useTheme)();
@@ -118,6 +119,12 @@ const useGridColumnResize = (apiRef, props) => {
     colElementRef.current.style.width = `${newWidth}px`;
     colElementRef.current.style.minWidth = `${newWidth}px`;
     colElementRef.current.style.maxWidth = `${newWidth}px`;
+    const headerFilterElement = headerFilterElementRef.current;
+    if (headerFilterElement) {
+      headerFilterElement.style.width = `${newWidth}px`;
+      headerFilterElement.style.minWidth = `${newWidth}px`;
+      headerFilterElement.style.maxWidth = `${newWidth}px`;
+    }
     [...colCellElementsRef.current, ...colGroupingElementRef.current].forEach(element => {
       const div = element;
       let finalWidth;
@@ -187,6 +194,10 @@ const useGridColumnResize = (apiRef, props) => {
     }, event);
     colDefRef.current = colDef;
     colElementRef.current = apiRef.current.columnHeadersContainerElementRef?.current.querySelector(`[data-field="${colDef.field}"]`);
+    const headerFilterRowElement = apiRef.current.headerFiltersElementRef?.current;
+    if (headerFilterRowElement) {
+      headerFilterElementRef.current = headerFilterRowElement.querySelector(`[data-field="${colDef.field}"]`);
+    }
     colGroupingElementRef.current = (0, _domUtils.findGroupHeaderElementsFromField)(apiRef.current.columnHeadersContainerElementRef?.current, colDef.field);
     colCellElementsRef.current = (0, _domUtils.findGridCellElementsFromCol)(colElementRef.current, apiRef.current);
     const doc = (0, _utils.unstable_ownerDocument)(apiRef.current.rootElementRef.current);

package/node/hooks/features/rowPinning/useGridRowPinningPreProcessors.js

@@ -36,6 +36,7 @@ function addPinnedRow({
     isAutoGenerated
   };
   (0, _utils.insertNodeInTree)({
+    previousTree: null,
     node,
     tree,
     treeDepths

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

@@ -86,6 +86,7 @@ const useGridTreeDataPreProcessors = (privateApiRef, props) => {
     };
     if (params.updates.type === 'full') {
       return (0, _createRowTree.createRowTree)({
+        previousTree: params.previousTree,
         nodes: params.updates.rows.map(getRowTreeBuilderNode),
         defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
         isGroupExpandedByDefault: props.isGroupExpandedByDefault,

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v6.3.1
+ * @mui/x-data-grid-pro v6.5.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/node/internals/index.js

@@ -7,6 +7,7 @@ var _exportNames = {
   DataGridProVirtualScroller: true,
   GridColumnHeaders: true,
   DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS: true,
+  useGridColumnHeaders: true,
   useGridColumnResize: true,
   columnResizeStateInitializer: true,
   useGridColumnPinning: true,
@@ -125,6 +126,12 @@ Object.defineProperty(exports, "updateRowTree", {
     return _updateRowTree.updateRowTree;
   }
 });
+Object.defineProperty(exports, "useGridColumnHeaders", {
+  enumerable: true,
+  get: function () {
+    return _useGridColumnHeaders.useGridColumnHeaders;
+  }
+});
 Object.defineProperty(exports, "useGridColumnPinning", {
   enumerable: true,
   get: function () {
@@ -230,6 +237,7 @@ Object.keys(_internals).forEach(function (key) {
 var _DataGridProVirtualScroller = require("../components/DataGridProVirtualScroller");
 var _GridColumnHeaders = require("../components/GridColumnHeaders");
 var _dataGridProDefaultSlotsComponents = require("../constants/dataGridProDefaultSlotsComponents");
+var _useGridColumnHeaders = require("../hooks/features/columnHeaders/useGridColumnHeaders");
 var _useGridColumnResize = require("../hooks/features/columnResize/useGridColumnResize");
 var _useGridColumnPinning = require("../hooks/features/columnPinning/useGridColumnPinning");
 var _useGridColumnPinningPreProcessors = require("../hooks/features/columnPinning/useGridColumnPinningPreProcessors");

package/node/material/icons.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridPushPinRightIcon = exports.GridPushPinLeftIcon = void 0;
+exports.GridPushPinRightIcon = exports.GridPushPinLeftIcon = exports.GridHighlightOffIcon = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/material/utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -24,4 +24,8 @@ const GridPushPinLeftIcon = (0, _utils.createSvgIcon)( /*#__PURE__*/(0, _jsxRunt
     fillRule: "evenodd"
   })
 }), 'PushPinLeft');
-exports.GridPushPinLeftIcon = GridPushPinLeftIcon;
+exports.GridPushPinLeftIcon = GridPushPinLeftIcon;
+const GridHighlightOffIcon = (0, _utils.createSvgIcon)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+  d: "M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+}), 'HighlightOff');
+exports.GridHighlightOffIcon = GridHighlightOffIcon;

package/node/material/index.js

@@ -9,7 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _icons = require("./icons");
 const iconSlots = {
   ColumnMenuPinRightIcon: _icons.GridPushPinRightIcon,
-  ColumnMenuPinLeftIcon: _icons.GridPushPinLeftIcon
+  ColumnMenuPinLeftIcon: _icons.GridPushPinLeftIcon,
+  HeaderFilterClearIcon: _icons.GridHighlightOffIcon
 };
 const materialSlots = (0, _extends2.default)({}, iconSlots);
 var _default = materialSlots;

package/node/models/gridProSlotProps.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTY4MzIzNzYwMDAwMA==";
+  const releaseInfo = "MTY4NDQ0MzYwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/node/utils/tree/createRowTree.js

@@ -21,6 +21,7 @@ const createRowTree = params => {
     dataRowIds.push(node.id);
     (0, _insertDataRowInTree.insertDataRowInTree)({
       tree,
+      previousTree: params.previousTree,
       id: node.id,
       path: node.path,
       onDuplicatePath: params.onDuplicatePath,

package/node/utils/tree/insertDataRowInTree.js

@@ -16,6 +16,7 @@ const insertDataRowInTree = ({
   id,
   path,
   updatedGroupsManager,
+  previousTree,
   tree,
   treeDepths,
   onDuplicatePath,
@@ -48,6 +49,7 @@ const insertDataRowInTree = ({
         updatedGroupsManager?.addAction(parentNodeId, 'insertChildren');
         (0, _utils.insertNodeInTree)({
           node: leafNode,
+          previousTree,
           tree,
           treeDepths
         });
@@ -61,6 +63,7 @@ const insertDataRowInTree = ({
           updatedGroupsManager?.addAction(parentNodeId, 'insertChildren');
           (0, _utils.updateGroupNodeIdAndAutoGenerated)({
             tree,
+            previousTree,
             treeDepths,
             node: existingNodeWithPartialPath,
             updatedNode: {
@@ -100,6 +103,7 @@ const insertDataRowInTree = ({
           defaultGroupingExpansionDepth,
           isGroupExpandedByDefault
         }),
+        previousTree,
         tree,
         treeDepths
       });

package/node/utils/tree/removeDataRowFromTree.js

@@ -54,6 +54,7 @@ const replaceDataGroupWithAutoGeneratedGroup = ({
   updatedGroupsManager?.addAction(node.parent, 'removeChildren');
   updatedGroupsManager?.addAction(node.parent, 'insertChildren');
   (0, _utils.updateGroupNodeIdAndAutoGenerated)({
+    previousTree: null,
     tree,
     treeDepths,
     node,

package/node/utils/tree/updateRowTree.js

@@ -21,6 +21,7 @@ const updateRowTree = params => {
       path
     } = params.nodes.inserted[i];
     (0, _insertDataRowInTree.insertDataRowInTree)({
+      previousTree: params.previousTree,
       tree,
       treeDepths,
       updatedGroupsManager,
@@ -58,6 +59,7 @@ const updateRowTree = params => {
         id
       });
       (0, _insertDataRowInTree.insertDataRowInTree)({
+        previousTree: params.previousTree,
         tree,
         treeDepths,
         updatedGroupsManager,

package/node/utils/tree/utils.js

@@ -55,6 +55,7 @@ const addGroupDefaultExpansion = ({
 exports.addGroupDefaultExpansion = addGroupDefaultExpansion;
 const insertNodeInTree = ({
   node,
+  previousTree,
   tree,
   treeDepths
 }) => {
@@ -69,22 +70,25 @@ const insertNodeInTree = ({
   if (node.type === 'footer') {
     // For footers,
     // Register the node from its parent `footerId` property.
-    tree[node.parent] = (0, _extends2.default)({}, parentNode, {
-      footerId: node.id
-    });
+    parentNode.footerId = node.id;
   } else if (node.type === 'group' || node.type === 'leaf') {
     // For groups and leaves,
     // Register the node from its parents `children` and `childrenFromPath` properties.
-    const groupingField = node.groupingField ?? '__no_field__';
-    const groupingKey = node.groupingKey ?? '__no_key__';
-    tree[node.parent] = (0, _extends2.default)({}, parentNode, {
-      childrenFromPath: (0, _extends2.default)({}, parentNode.childrenFromPath, {
-        [groupingField]: (0, _extends2.default)({}, parentNode.childrenFromPath?.[groupingField], {
-          [groupingKey.toString()]: node.id
-        })
-      }),
-      children: [...parentNode.children, node.id]
-    });
+    const groupingFieldName = node.groupingField ?? '__no_field__';
+    const groupingKeyName = node.groupingKey ?? '__no_key__';
+    const groupingField = parentNode.childrenFromPath?.[groupingFieldName];
+    if (previousTree !== null && previousTree[parentNode.id] === tree[parentNode.id]) {
+      parentNode.children = [...parentNode.children, node.id];
+    } else {
+      parentNode.children.push(node.id);
+    }
+    if (groupingField == null) {
+      parentNode.childrenFromPath[groupingFieldName] = {
+        [groupingKeyName.toString()]: node.id
+      };
+    } else {
+      groupingField[groupingKeyName.toString()] = node.id;
+    }
   }
 };
 
@@ -149,6 +153,7 @@ exports.removeNodeFromTree = removeNodeFromTree;
 const updateGroupNodeIdAndAutoGenerated = ({
   node,
   updatedNode,
+  previousTree,
   tree,
   treeDepths
 }) => {
@@ -169,6 +174,7 @@ const updateGroupNodeIdAndAutoGenerated = ({
   // 3. Add the new group in the tree
   const groupNode = (0, _extends2.default)({}, node, updatedNode);
   insertNodeInTree({
+    previousTree,
     node: groupNode,
     tree,
     treeDepths

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "6.3.1",
+  "version": "6.5.0",
   "description": "The Pro plan edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@babel/runtime": "^7.21.0",
     "@mui/utils": "^5.12.3",
-    "@mui/x-data-grid": "6.3.1",
+    "@mui/x-data-grid": "6.5.0",
     "@mui/x-license-pro": "6.0.4",
     "@types/format-util": "^1.0.2",
     "clsx": "^1.2.1",

package/typeOverloads/modules.d.ts

@@ -1,8 +1,18 @@
-import { GridRowId } from '@mui/x-data-grid';
+/// <reference types="react" />
+import { GridRowId, GridColumnHeaderParams, GridValidRowModel } from '@mui/x-data-grid';
 import type { GridRowScrollEndParams, GridRowOrderChangeParams, GridFetchRowsParams } from '../models';
 import type { GridColumnPinningInternalCache, GridPinnedColumns } from '../hooks/features/columnPinning/gridColumnPinningInterface';
 import type { GridCanBeReorderedPreProcessingContext } from '../hooks/features/columnReorder/columnReorderInterfaces';
 import { GridRowPinningInternalCache } from '../hooks/features/rowPinning/gridRowPinningInterface';
+export interface GridColDefPro<R extends GridValidRowModel = any, V = any, F = V> {
+    /**
+     * Allows to render a component in the column header filter cell.
+     * @template R, V, F
+     * @param {GridColumnHeaderParams<R, V, F>} params Object containing parameters for the renderer.
+     * @returns {React.ReactNode} The element to be rendered.
+     */
+    renderHeaderFilter?: (params: GridColumnHeaderParams<R, V, F>) => React.ReactNode;
+}
 export interface GridControlledStateEventLookupPro {
     /**
      * Fired when the open detail panels are changed.
@@ -60,4 +70,6 @@ declare module '@mui/x-data-grid' {
 declare module '@mui/x-data-grid/internals' {
     interface GridApiCaches extends GridApiCachesPro {
     }
+    interface GridBaseColDef<R, V, F> extends GridColDefPro<R, V, F> {
+    }
 }

package/utils/releaseInfo.js

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

package/utils/tree/createRowTree.d.ts

@@ -1,7 +1,9 @@
+import { GridRowTreeConfig } from '@mui/x-data-grid';
 import { GridRowTreeCreationValue } from '@mui/x-data-grid/internals';
 import { RowTreeBuilderNode, GridTreePathDuplicateHandler } from './models';
 import { DataGridProProps } from '../../models/dataGridProProps';
 interface CreateRowTreeParams {
+    previousTree: GridRowTreeConfig | null;
     nodes: RowTreeBuilderNode[];
     defaultGroupingExpansionDepth: number;
     isGroupExpandedByDefault?: DataGridProProps['isGroupExpandedByDefault'];

package/utils/tree/createRowTree.js

@@ -15,6 +15,7 @@ export const createRowTree = params => {
     dataRowIds.push(node.id);
     insertDataRowInTree({
       tree,
+      previousTree: params.previousTree,
       id: node.id,
       path: node.path,
       onDuplicatePath: params.onDuplicatePath,

package/utils/tree/insertDataRowInTree.d.ts

@@ -20,6 +20,10 @@ interface InsertDataRowInTreeParams {
      * - `tree[nodeId].children.push(newNodeId)` => invalid
      */
     tree: GridRowTreeConfig;
+    /**
+     * Previous tree instance for comparison.
+     */
+    previousTree: GridRowTreeConfig | null;
     /**
      * Amount of nodes at each depth of the tree.
      * This object can be mutated.
@@ -47,5 +51,5 @@ interface InsertDataRowInTreeParams {
  * - if a node exists with the same partial path, it will register this node as the ancestor of the data row.
  * - if not, it will create an auto-generated node and register it as ancestor of the data row.
  */
-export declare const insertDataRowInTree: ({ id, path, updatedGroupsManager, tree, treeDepths, onDuplicatePath, isGroupExpandedByDefault, defaultGroupingExpansionDepth, }: InsertDataRowInTreeParams) => void;
+export declare const insertDataRowInTree: ({ id, path, updatedGroupsManager, previousTree, tree, treeDepths, onDuplicatePath, isGroupExpandedByDefault, defaultGroupingExpansionDepth, }: InsertDataRowInTreeParams) => void;
 export {};