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

package/modern/components/headerFiltering/GridHeaderFilterCell.js

@@ -0,0 +1,222 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["colIndex", "height", "hasFocus", "headerFilterComponent", "filterOperators", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
+import { gridVisibleColumnFieldsSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
+import { useGridPrivateApiContext, unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector, isNavigationKey } from '@mui/x-data-grid/internals';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridHeaderFilterAdornment } from './GridHeaderFilterAdornment';
+import { GridHeaderFilterClearButton } from './GridHeaderFilterClearButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    colDef,
+    classes,
+    showColumnVerticalBorder
+  } = ownerState;
+  const slots = {
+    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', 'withBorderColor', showColumnVerticalBorder && 'columnHeader--withRightBorder']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+      colIndex,
+      height,
+      hasFocus,
+      headerFilterComponent,
+      filterOperators,
+      width,
+      headerClassName,
+      colDef,
+      item,
+      headerFilterMenuRef,
+      InputComponentProps,
+      showClearIcon = true
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridPrivateApiContext();
+  const columnFields = gridVisibleColumnFieldsSelector(apiRef);
+  const rootProps = useGridRootProps();
+  const cellRef = React.useRef(null);
+  const handleRef = useForkRef(ref, cellRef);
+  const inputRef = React.useRef(null);
+  const buttonRef = React.useRef(null);
+  const isEditing = unstable_gridHeaderFilteringEditFieldSelector(apiRef) === colDef.field;
+  const isMenuOpen = unstable_gridHeaderFilteringMenuSelector(apiRef) === colDef.field;
+  const currentOperator = filterOperators[0];
+  const InputComponent = colDef.filterable ? currentOperator.InputComponent : null;
+  const applyFilterChanges = React.useCallback(updatedItem => {
+    if (item.value && !updatedItem.value) {
+      apiRef.current.deleteFilterItem(updatedItem);
+      return;
+    }
+    apiRef.current.upsertFilterItem(updatedItem);
+  }, [apiRef, item]);
+  const clearFilterItem = React.useCallback(() => {
+    apiRef.current.deleteFilterItem(item);
+  }, [apiRef, item]);
+  React.useLayoutEffect(() => {
+    if (hasFocus && !isMenuOpen) {
+      let focusableElement = cellRef.current.querySelector('[tabindex="0"]');
+      if (isEditing && InputComponent) {
+        focusableElement = inputRef.current;
+      }
+      const elementToFocus = focusableElement || cellRef.current;
+      elementToFocus?.focus();
+      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+    }
+  }, [InputComponent, apiRef, hasFocus, isEditing, isMenuOpen]);
+  const onKeyDown = React.useCallback(event => {
+    if (isMenuOpen || isNavigationKey(event.key)) {
+      return;
+    }
+    switch (event.key) {
+      case 'Escape':
+        if (isEditing) {
+          apiRef.current.stopHeaderFilterEditMode();
+        }
+        break;
+      case 'Enter':
+        if (isEditing) {
+          apiRef.current.stopHeaderFilterEditMode();
+          break;
+        }
+        if (event.metaKey || event.ctrlKey) {
+          headerFilterMenuRef.current = buttonRef.current;
+          apiRef.current.showHeaderFilterMenu(colDef.field);
+          break;
+        }
+        apiRef.current.startHeaderFilterEditMode(colDef.field);
+        break;
+      case 'Tab':
+        {
+          if (isEditing) {
+            const fieldToFocus = columnFields[colIndex + (event.shiftKey ? -1 : 1)] ?? null;
+            if (fieldToFocus) {
+              apiRef.current.startHeaderFilterEditMode(fieldToFocus);
+              apiRef.current.setColumnHeaderFilterFocus(fieldToFocus, event);
+            }
+          }
+          break;
+        }
+      default:
+        if (isEditing || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) {
+          break;
+        }
+        apiRef.current.startHeaderFilterEditMode(colDef.field);
+        break;
+    }
+  }, [apiRef, colDef.field, colIndex, columnFields, headerFilterMenuRef, isEditing, isMenuOpen]);
+  const publish = React.useCallback((eventName, propHandler) => event => {
+    apiRef.current.publishEvent(eventName, apiRef.current.getColumnHeaderParams(colDef.field), event);
+    if (propHandler) {
+      propHandler(event);
+    }
+  }, [apiRef, colDef.field]);
+  const onMouseDown = React.useCallback(event => {
+    if (!hasFocus) {
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+      apiRef.current.setColumnHeaderFilterFocus(colDef.field, event);
+    }
+  }, [apiRef, colDef.field, hasFocus]);
+  const mouseEventsHandlers = React.useMemo(() => ({
+    onKeyDown: publish('headerFilterKeyDown', onKeyDown),
+    onClick: publish('headerFilterClick'),
+    onMouseDown: publish('headerFilterMouseDown', onMouseDown)
+  }), [onMouseDown, onKeyDown, publish]);
+  const ownerState = _extends({}, rootProps, {
+    colDef
+  });
+  const classes = useUtilityClasses(ownerState);
+  const isNoInputOperator = filterOperators?.find(({
+    value
+  }) => item.operator === value)?.requiresFilterValue === false;
+  const isApplied = Boolean(item?.value) || isNoInputOperator;
+  const label = currentOperator.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${capitalize(item.operator)}`);
+  const isFilterActive = isApplied || hasFocus;
+  return /*#__PURE__*/_jsxs("div", _extends({
+    className: clsx(classes.root, headerClassName),
+    ref: handleRef,
+    style: {
+      height,
+      width,
+      minWidth: width,
+      maxWidth: width
+    },
+    role: "columnheader",
+    "aria-colindex": colIndex + 1,
+    "aria-label": headerFilterComponent == null ? colDef.headerName ?? colDef.field : undefined
+  }, other, mouseEventsHandlers, {
+    children: [headerFilterComponent, InputComponent && headerFilterComponent === undefined ? /*#__PURE__*/_jsx(InputComponent, _extends({
+      apiRef: apiRef,
+      item: item,
+      inputRef: inputRef,
+      applyValue: applyFilterChanges,
+      onFocus: () => apiRef.current.startHeaderFilterEditMode(colDef.field),
+      onBlur: () => apiRef.current.stopHeaderFilterEditMode(),
+      placeholder: apiRef.current.getLocaleText('columnMenuFilter'),
+      label: isFilterActive ? capitalize(label) : ' ',
+      isFilterActive: isFilterActive,
+      headerFilterMenu: /*#__PURE__*/_jsx(GridHeaderFilterAdornment, {
+        operators: filterOperators,
+        item: item,
+        field: colDef.field,
+        applyFilterChanges: applyFilterChanges,
+        headerFilterMenuRef: headerFilterMenuRef,
+        buttonRef: buttonRef
+      }),
+      clearButton: showClearIcon && isApplied ? /*#__PURE__*/_jsx(GridHeaderFilterClearButton, {
+        onClick: clearFilterItem
+      }) : null,
+      disabled: isNoInputOperator,
+      tabIndex: -1
+    }, currentOperator?.InputComponentProps, InputComponentProps)) : null]
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  colDef: PropTypes.object.isRequired,
+  colIndex: PropTypes.number.isRequired,
+  filterOperators: PropTypes.arrayOf(PropTypes.shape({
+    getApplyFilterFn: PropTypes.func.isRequired,
+    getValueAsString: PropTypes.func,
+    headerLabel: PropTypes.string,
+    InputComponent: PropTypes.elementType,
+    InputComponentProps: PropTypes.object,
+    label: PropTypes.string,
+    requiresFilterValue: PropTypes.bool,
+    value: PropTypes.string.isRequired
+  })),
+  hasFocus: PropTypes.bool,
+  /**
+   * Class name that will be added in the column header cell.
+   */
+  headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  headerFilterComponent: PropTypes.node,
+  headerFilterMenuRef: PropTypes.shape({
+    current: PropTypes.object
+  }).isRequired,
+  height: PropTypes.number.isRequired,
+  InputComponentProps: PropTypes.object,
+  item: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    operator: PropTypes.string.isRequired,
+    value: PropTypes.any
+  }).isRequired,
+  showClearIcon: PropTypes.bool,
+  sortIndex: PropTypes.number,
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  width: PropTypes.number.isRequired
+} : void 0;
+export { GridHeaderFilterCell };

package/modern/components/headerFiltering/GridHeaderFilterClearButton.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const sx = {
+  padding: '2px'
+};
+function GridHeaderFilterClearButton({
+  onClick
+}) {
+  const rootProps = useGridRootProps();
+  return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+    tabIndex: -1,
+    "aria-label": "Clear filter",
+    size: "small",
+    onClick: onClick,
+    sx: sx
+  }, rootProps.slotProps?.baseIconButton, {
+    children: /*#__PURE__*/_jsx(rootProps.slots.headerFilterClearIcon, {
+      fontSize: "inherit"
+    })
+  }));
+}
+export { GridHeaderFilterClearButton };

package/modern/components/headerFiltering/GridHeaderFilterMenu.js

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { unstable_capitalize as capitalize } from '@mui/utils';
+import { useGridApiContext, GridMenu } from '@mui/x-data-grid';
+import { OPERATOR_SYMBOL_MAPPING } from './constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function GridHeaderFilterMenu({
+  open,
+  field,
+  targetRef,
+  applyFilterChanges,
+  operators,
+  item,
+  id,
+  labelledBy
+}) {
+  const apiRef = 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__*/_jsx(GridMenu, {
+    placement: "bottom-start",
+    open: open,
+    target: targetRef.current,
+    onClickAway: hideMenu,
+    onExited: hideMenu,
+    children: /*#__PURE__*/_jsx(MenuList, {
+      "aria-labelledby": labelledBy,
+      id: id,
+      onKeyDown: handleListKeyDown,
+      children: operators.map((op, i) => {
+        const label = op?.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${capitalize(op.value)}`);
+        return /*#__PURE__*/_jsxs(MenuItem, {
+          onClick: () => {
+            applyFilterChanges(_extends({}, item, {
+              operator: op.value
+            }));
+            hideMenu();
+          },
+          autoFocus: i === 0 ? open : false,
+          selected: op.value === item.operator,
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            children: OPERATOR_SYMBOL_MAPPING[op.value]
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            children: label
+          })]
+        }, `${field}-${op.value}`);
+      })
+    })
+  });
+}
+export { GridHeaderFilterMenu };

package/modern/components/headerFiltering/constants.js

@@ -0,0 +1,30 @@
+export 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: '≤'
+};

package/modern/components/headerFiltering/index.js

@@ -0,0 +1,2 @@
+export * from './GridHeaderFilterAdornment';
+export * from './GridHeaderFilterCell';

package/modern/components/index.js

@@ -2,4 +2,5 @@
 export * from './GridTreeDataGroupingCell';
 export * from './GridColumnMenuPinningItem';
 export * from './GridDetailPanelToggleCell';
-export * from '../material/icons';
+export * from '../material/icons';
+export * from './headerFiltering';

package/modern/constants/dataGridProDefaultSlotsComponents.js

@@ -2,8 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid/internals';
 import { GridProColumnMenu } from '../components/GridProColumnMenu';
 import { GridColumnHeaders } from '../components/GridColumnHeaders';
+import { GridHeaderFilterMenu } from '../components/headerFiltering/GridHeaderFilterMenu';
+import { GridHeaderFilterCell } from '../components/headerFiltering/GridHeaderFilterCell';
 import materialSlots from '../material';
 export const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS = _extends({}, DATA_GRID_DEFAULT_SLOTS_COMPONENTS, materialSlots, {
   ColumnMenu: GridProColumnMenu,
-  ColumnHeaders: GridColumnHeaders
+  ColumnHeaders: GridColumnHeaders,
+  HeaderFilterCell: GridHeaderFilterCell,
+  HeaderFilterMenu: GridHeaderFilterMenu
 });

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

@@ -0,0 +1,110 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["getColumnsToRender", "getRootProps"];
+import * as React from 'react';
+import { unstable_gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, unstable_gridTabIndexColumnHeaderFilterSelector } from '@mui/x-data-grid';
+import { styled } from '@mui/system';
+import { useGridColumnHeaders as useGridColumnHeadersCommunity, getTotalHeaderHeight, useGridPrivateApiContext, getGridFilter } from '@mui/x-data-grid/internals';
+import { useGridRootProps } from '../../utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridHeaderFilterRow = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'HeaderFilterRow',
+  overridesResolver: (props, styles) => styles.headerFilterRow
+})(() => ({
+  display: 'flex',
+  borderTop: '1px solid rgba(224, 224, 224, 1)'
+}));
+export const useGridColumnHeaders = props => {
+  const apiRef = useGridPrivateApiContext();
+  const {
+    headerGroupingMaxDepth,
+    hasOtherElementInTabSequence
+  } = props;
+  const columnHeaderFilterTabIndexState = useGridSelector(apiRef, unstable_gridTabIndexColumnHeaderFilterSelector);
+  const _useGridColumnHeaders = useGridColumnHeadersCommunity(_extends({}, props, {
+      hasOtherElementInTabSequence: hasOtherElementInTabSequence || columnHeaderFilterTabIndexState !== null
+    })),
+    {
+      getColumnsToRender,
+      getRootProps
+    } = _useGridColumnHeaders,
+    otherProps = _objectWithoutPropertiesLoose(_useGridColumnHeaders, _excluded);
+  const headerFiltersRef = React.useRef(null);
+  apiRef.current.register('private', {
+    headerFiltersElementRef: headerFiltersRef
+  });
+  const headerFilterMenuRef = React.useRef(null);
+  const rootProps = useGridRootProps();
+  const disableHeaderFiltering = !rootProps.unstable_headerFilters;
+  const headerHeight = Math.floor(rootProps.columnHeaderHeight * props.densityFactor);
+  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
+  const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight) + (disableHeaderFiltering ? 0 : headerHeight);
+  const columnHeaderFilterFocus = useGridSelector(apiRef, 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') ?? getGridFilter(colDef);
+      filters.push( /*#__PURE__*/_jsx(rootProps.slots.headerFilterCell, _extends({
+        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__*/_jsx(GridHeaderFilterRow, {
+      ref: headerFiltersRef,
+      ownerState: rootProps,
+      role: "row",
+      "aria-rowindex": headerGroupingMaxDepth + 2,
+      children: filters
+    });
+  };
+  const rootStyle = {
+    minHeight: totalHeaderHeight,
+    maxHeight: totalHeaderHeight,
+    lineHeight: `${headerHeight}px`
+  };
+  return _extends({}, otherProps, {
+    getColumnFilters,
+    getRootProps: disableHeaderFiltering ? getRootProps : (other = {}) => _extends({
+      style: rootStyle
+    }, other)
+  });
+};

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

@@ -87,6 +87,7 @@ export const useGridColumnResize = (apiRef, props) => {
   const logger = 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 = useTheme();
@@ -108,6 +109,12 @@ export 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;
@@ -177,6 +184,10 @@ export 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 = findGroupHeaderElementsFromField(apiRef.current.columnHeadersContainerElementRef?.current, colDef.field);
     colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     const doc = ownerDocument(apiRef.current.rootElementRef.current);

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

@@ -26,6 +26,7 @@ export function addPinnedRow({
     isAutoGenerated
   };
   insertNodeInTree({
+    previousTree: null,
     node,
     tree,
     treeDepths

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

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

package/modern/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/modern/internals/index.js

@@ -1,7 +1,11 @@
+// eslint-disable-next-line import/export
 export * from '@mui/x-data-grid/internals';
 export { DataGridProVirtualScroller } from '../components/DataGridProVirtualScroller';
 export { GridColumnHeaders } from '../components/GridColumnHeaders';
 export { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '../constants/dataGridProDefaultSlotsComponents';
+
+// eslint-disable-next-line import/export
+export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 export { useGridColumnResize, columnResizeStateInitializer } from '../hooks/features/columnResize/useGridColumnResize';
 export { useGridColumnPinning, columnPinningStateInitializer } from '../hooks/features/columnPinning/useGridColumnPinning';
 export { useGridColumnPinningPreProcessors } from '../hooks/features/columnPinning/useGridColumnPinningPreProcessors';

package/modern/material/icons.js

@@ -14,4 +14,7 @@ export const GridPushPinLeftIcon = createSvgIcon( /*#__PURE__*/_jsx("g", {
     d: "M16,9V4l1,0c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H7C6.45,2,6,2.45,6,3v0 c0,0.55,0.45,1,1,1l1,0v5c0,1.66-1.34,3-3,3h0v2h5.97v7l1,1l1-1v-7H19v-2h0C17.34,12,16,10.66,16,9z",
     fillRule: "evenodd"
   })
-}), 'PushPinLeft');
+}), 'PushPinLeft');
+export const GridHighlightOffIcon = createSvgIcon( /*#__PURE__*/_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');

package/modern/material/index.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridPushPinRightIcon, GridPushPinLeftIcon } from './icons';
+import { GridPushPinRightIcon, GridPushPinLeftIcon, GridHighlightOffIcon } from './icons';
 const iconSlots = {
   ColumnMenuPinRightIcon: GridPushPinRightIcon,
-  ColumnMenuPinLeftIcon: GridPushPinLeftIcon
+  ColumnMenuPinLeftIcon: GridPushPinLeftIcon,
+  HeaderFilterClearIcon: GridHighlightOffIcon
 };
 const materialSlots = _extends({}, iconSlots);
 export default materialSlots;

package/modern/models/gridProSlotProps.js

@@ -0,0 +1 @@
+export {};

package/modern/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/modern/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/modern/utils/tree/insertDataRowInTree.js

@@ -10,6 +10,7 @@ export const insertDataRowInTree = ({
   id,
   path,
   updatedGroupsManager,
+  previousTree,
   tree,
   treeDepths,
   onDuplicatePath,
@@ -42,6 +43,7 @@ export const insertDataRowInTree = ({
         updatedGroupsManager?.addAction(parentNodeId, 'insertChildren');
         insertNodeInTree({
           node: leafNode,
+          previousTree,
           tree,
           treeDepths
         });
@@ -55,6 +57,7 @@ export const insertDataRowInTree = ({
           updatedGroupsManager?.addAction(parentNodeId, 'insertChildren');
           updateGroupNodeIdAndAutoGenerated({
             tree,
+            previousTree,
             treeDepths,
             node: existingNodeWithPartialPath,
             updatedNode: {
@@ -94,6 +97,7 @@ export const insertDataRowInTree = ({
           defaultGroupingExpansionDepth,
           isGroupExpandedByDefault
         }),
+        previousTree,
         tree,
         treeDepths
       });

package/modern/utils/tree/removeDataRowFromTree.js

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

package/modern/utils/tree/updateRowTree.js

@@ -14,6 +14,7 @@ export const updateRowTree = params => {
       path
     } = params.nodes.inserted[i];
     insertDataRowInTree({
+      previousTree: params.previousTree,
       tree,
       treeDepths,
       updatedGroupsManager,
@@ -51,6 +52,7 @@ export const updateRowTree = params => {
         id
       });
       insertDataRowInTree({
+        previousTree: params.previousTree,
         tree,
         treeDepths,
         updatedGroupsManager,