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

package/legacy/components/headerFiltering/GridHeaderFilterCell.js

@@ -0,0 +1,230 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _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";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var colDef = ownerState.colDef,
+    classes = ownerState.classes,
+    showColumnVerticalBorder = ownerState.showColumnVerticalBorder;
+  var 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);
+};
+var GridHeaderFilterCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _filterOperators$find, _currentOperator$head, _colDef$headerName;
+  var colIndex = props.colIndex,
+    height = props.height,
+    hasFocus = props.hasFocus,
+    headerFilterComponent = props.headerFilterComponent,
+    filterOperators = props.filterOperators,
+    width = props.width,
+    headerClassName = props.headerClassName,
+    colDef = props.colDef,
+    item = props.item,
+    headerFilterMenuRef = props.headerFilterMenuRef,
+    InputComponentProps = props.InputComponentProps,
+    _props$showClearIcon = props.showClearIcon,
+    showClearIcon = _props$showClearIcon === void 0 ? true : _props$showClearIcon,
+    other = _objectWithoutProperties(props, _excluded);
+  var apiRef = useGridPrivateApiContext();
+  var columnFields = gridVisibleColumnFieldsSelector(apiRef);
+  var rootProps = useGridRootProps();
+  var cellRef = React.useRef(null);
+  var handleRef = useForkRef(ref, cellRef);
+  var inputRef = React.useRef(null);
+  var buttonRef = React.useRef(null);
+  var isEditing = unstable_gridHeaderFilteringEditFieldSelector(apiRef) === colDef.field;
+  var isMenuOpen = unstable_gridHeaderFilteringMenuSelector(apiRef) === colDef.field;
+  var currentOperator = filterOperators[0];
+  var InputComponent = colDef.filterable ? currentOperator.InputComponent : null;
+  var applyFilterChanges = React.useCallback(function (updatedItem) {
+    if (item.value && !updatedItem.value) {
+      apiRef.current.deleteFilterItem(updatedItem);
+      return;
+    }
+    apiRef.current.upsertFilterItem(updatedItem);
+  }, [apiRef, item]);
+  var clearFilterItem = React.useCallback(function () {
+    apiRef.current.deleteFilterItem(item);
+  }, [apiRef, item]);
+  React.useLayoutEffect(function () {
+    if (hasFocus && !isMenuOpen) {
+      var focusableElement = cellRef.current.querySelector('[tabindex="0"]');
+      if (isEditing && InputComponent) {
+        focusableElement = inputRef.current;
+      }
+      var elementToFocus = focusableElement || cellRef.current;
+      elementToFocus == null ? void 0 : elementToFocus.focus();
+      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+    }
+  }, [InputComponent, apiRef, hasFocus, isEditing, isMenuOpen]);
+  var onKeyDown = React.useCallback(function (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) {
+            var _columnFields;
+            var fieldToFocus = (_columnFields = columnFields[colIndex + (event.shiftKey ? -1 : 1)]) != null ? _columnFields : 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]);
+  var publish = React.useCallback(function (eventName, propHandler) {
+    return function (event) {
+      apiRef.current.publishEvent(eventName, apiRef.current.getColumnHeaderParams(colDef.field), event);
+      if (propHandler) {
+        propHandler(event);
+      }
+    };
+  }, [apiRef, colDef.field]);
+  var onMouseDown = React.useCallback(function (event) {
+    if (!hasFocus) {
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+      apiRef.current.setColumnHeaderFilterFocus(colDef.field, event);
+    }
+  }, [apiRef, colDef.field, hasFocus]);
+  var mouseEventsHandlers = React.useMemo(function () {
+    return {
+      onKeyDown: publish('headerFilterKeyDown', onKeyDown),
+      onClick: publish('headerFilterClick'),
+      onMouseDown: publish('headerFilterMouseDown', onMouseDown)
+    };
+  }, [onMouseDown, onKeyDown, publish]);
+  var ownerState = _extends({}, rootProps, {
+    colDef: colDef
+  });
+  var classes = useUtilityClasses(ownerState);
+  var isNoInputOperator = (filterOperators == null ? void 0 : (_filterOperators$find = filterOperators.find(function (_ref) {
+    var value = _ref.value;
+    return item.operator === value;
+  })) == null ? void 0 : _filterOperators$find.requiresFilterValue) === false;
+  var isApplied = Boolean(item == null ? void 0 : item.value) || isNoInputOperator;
+  var label = (_currentOperator$head = currentOperator.headerLabel) != null ? _currentOperator$head : apiRef.current.getLocaleText("headerFilterOperator".concat(capitalize(item.operator)));
+  var isFilterActive = isApplied || hasFocus;
+  return /*#__PURE__*/_jsxs("div", _extends({
+    className: clsx(classes.root, headerClassName),
+    ref: handleRef,
+    style: {
+      height: height,
+      width: width,
+      minWidth: width,
+      maxWidth: width
+    },
+    role: "columnheader",
+    "aria-colindex": colIndex + 1,
+    "aria-label": headerFilterComponent == null ? (_colDef$headerName = colDef.headerName) != 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: function onFocus() {
+        return apiRef.current.startHeaderFilterEditMode(colDef.field);
+      },
+      onBlur: function onBlur() {
+        return 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 == null ? void 0 : 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/legacy/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";
+var sx = {
+  padding: '2px'
+};
+function GridHeaderFilterClearButton(_ref) {
+  var _rootProps$slotProps;
+  var onClick = _ref.onClick;
+  var rootProps = useGridRootProps();
+  return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+    tabIndex: -1,
+    "aria-label": "Clear filter",
+    size: "small",
+    onClick: onClick,
+    sx: sx
+  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+    children: /*#__PURE__*/_jsx(rootProps.slots.headerFilterClearIcon, {
+      fontSize: "inherit"
+    })
+  }));
+}
+export { GridHeaderFilterClearButton };

package/legacy/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(_ref) {
+  var open = _ref.open,
+    field = _ref.field,
+    targetRef = _ref.targetRef,
+    applyFilterChanges = _ref.applyFilterChanges,
+    operators = _ref.operators,
+    item = _ref.item,
+    id = _ref.id,
+    labelledBy = _ref.labelledBy;
+  var apiRef = useGridApiContext();
+  var hideMenu = React.useCallback(function () {
+    apiRef.current.hideHeaderFilterMenu();
+  }, [apiRef]);
+  var handleListKeyDown = React.useCallback(function (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(function (op, i) {
+        var _op$headerLabel;
+        var label = (_op$headerLabel = op == null ? void 0 : op.headerLabel) != null ? _op$headerLabel : apiRef.current.getLocaleText("headerFilterOperator".concat(capitalize(op.value)));
+        return /*#__PURE__*/_jsxs(MenuItem, {
+          onClick: function 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
+          })]
+        }, "".concat(field, "-").concat(op.value));
+      })
+    })
+  });
+}
+export { GridHeaderFilterMenu };

package/legacy/components/headerFiltering/constants.js

@@ -0,0 +1,30 @@
+export var 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/legacy/components/headerFiltering/index.js

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

package/legacy/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/legacy/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 var DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS = _extends({}, DATA_GRID_DEFAULT_SLOTS_COMPONENTS, materialSlots, {
   ColumnMenu: GridProColumnMenu,
-  ColumnHeaders: GridColumnHeaders
+  ColumnHeaders: GridColumnHeaders,
+  HeaderFilterCell: GridHeaderFilterCell,
+  HeaderFilterMenu: GridHeaderFilterMenu
 });

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

@@ -0,0 +1,120 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _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";
+var GridHeaderFilterRow = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'HeaderFilterRow',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.headerFilterRow;
+  }
+})(function () {
+  return {
+    display: 'flex',
+    borderTop: '1px solid rgba(224, 224, 224, 1)'
+  };
+});
+export var useGridColumnHeaders = function useGridColumnHeaders(props) {
+  var apiRef = useGridPrivateApiContext();
+  var headerGroupingMaxDepth = props.headerGroupingMaxDepth,
+    hasOtherElementInTabSequence = props.hasOtherElementInTabSequence;
+  var columnHeaderFilterTabIndexState = useGridSelector(apiRef, unstable_gridTabIndexColumnHeaderFilterSelector);
+  var _useGridColumnHeaders = useGridColumnHeadersCommunity(_extends({}, props, {
+      hasOtherElementInTabSequence: hasOtherElementInTabSequence || columnHeaderFilterTabIndexState !== null
+    })),
+    getColumnsToRender = _useGridColumnHeaders.getColumnsToRender,
+    getRootProps = _useGridColumnHeaders.getRootProps,
+    otherProps = _objectWithoutProperties(_useGridColumnHeaders, _excluded);
+  var headerFiltersRef = React.useRef(null);
+  apiRef.current.register('private', {
+    headerFiltersElementRef: headerFiltersRef
+  });
+  var headerFilterMenuRef = React.useRef(null);
+  var rootProps = useGridRootProps();
+  var disableHeaderFiltering = !rootProps.unstable_headerFilters;
+  var headerHeight = Math.floor(rootProps.columnHeaderHeight * props.densityFactor);
+  var filterModel = useGridSelector(apiRef, gridFilterModelSelector);
+  var totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight) + (disableHeaderFiltering ? 0 : headerHeight);
+  var columnHeaderFilterFocus = useGridSelector(apiRef, unstable_gridFocusColumnHeaderFilterSelector);
+  var getColumnFilters = function getColumnFilters(params) {
+    var other = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    if (disableHeaderFiltering) {
+      return null;
+    }
+    var columnsToRender = getColumnsToRender(params);
+    if (columnsToRender == null) {
+      return null;
+    }
+    var renderedColumns = columnsToRender.renderedColumns,
+      firstColumnToRender = columnsToRender.firstColumnToRender;
+    var filters = [];
+    var _loop = function _loop() {
+      var _colDef$filterOperato, _colDef$filterOperato2, _filterModel$items$fi, _rootProps$slotProps;
+      var colDef = renderedColumns[i];
+      var columnIndex = firstColumnToRender + i;
+      var hasFocus = (columnHeaderFilterFocus == null ? void 0 : columnHeaderFilterFocus.field) === colDef.field;
+      var isFirstColumn = columnIndex === 0;
+      var tabIndexField = columnHeaderFilterTabIndexState == null ? void 0 : columnHeaderFilterTabIndexState.field;
+      var tabIndex = tabIndexField === colDef.field || isFirstColumn && !props.hasOtherElementInTabSequence ? 0 : -1;
+      var headerFilterComponent;
+      if (colDef.renderHeaderFilter) {
+        headerFilterComponent = colDef.renderHeaderFilter(apiRef.current.getColumnHeaderParams(colDef.field));
+      }
+      var headerClassName = typeof colDef.headerClassName === 'function' ? colDef.headerClassName({
+        field: colDef.field,
+        colDef: colDef
+      }) : colDef.headerClassName;
+
+      // TODO: Support for `isAnyOf` operator
+      var filterOperators = (_colDef$filterOperato = (_colDef$filterOperato2 = colDef.filterOperators) == null ? void 0 : _colDef$filterOperato2.filter(function (operator) {
+        return operator.value !== 'isAnyOf';
+      })) != null ? _colDef$filterOperato : [];
+      var item = (_filterModel$items$fi = filterModel == null ? void 0 : filterModel.items.find(function (it) {
+        return it.field === colDef.field && it.operator !== 'isAnyOf';
+      })) != null ? _filterModel$items$fi : 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 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.headerFilterCell, other), "".concat(colDef.field, "-filter")));
+    };
+    for (var i = 0; i < renderedColumns.length; i += 1) {
+      _loop();
+    }
+    return /*#__PURE__*/_jsx(GridHeaderFilterRow, {
+      ref: headerFiltersRef,
+      ownerState: rootProps,
+      role: "row",
+      "aria-rowindex": headerGroupingMaxDepth + 2,
+      children: filters
+    });
+  };
+  var rootStyle = {
+    minHeight: totalHeaderHeight,
+    maxHeight: totalHeaderHeight,
+    lineHeight: "".concat(headerHeight, "px")
+  };
+  return _extends({}, otherProps, {
+    getColumnFilters: getColumnFilters,
+    getRootProps: disableHeaderFiltering ? getRootProps : function () {
+      var other = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      return _extends({
+        style: rootStyle
+      }, other);
+    }
+  });
+};

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

@@ -90,6 +90,7 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useGridColumnResize');
   var colDefRef = React.useRef();
   var colElementRef = React.useRef();
+  var headerFilterElementRef = React.useRef();
   var colGroupingElementRef = React.useRef();
   var colCellElementsRef = React.useRef();
   var theme = useTheme();
@@ -111,6 +112,12 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
     colElementRef.current.style.width = "".concat(newWidth, "px");
     colElementRef.current.style.minWidth = "".concat(newWidth, "px");
     colElementRef.current.style.maxWidth = "".concat(newWidth, "px");
+    var headerFilterElement = headerFilterElementRef.current;
+    if (headerFilterElement) {
+      headerFilterElement.style.width = "".concat(newWidth, "px");
+      headerFilterElement.style.minWidth = "".concat(newWidth, "px");
+      headerFilterElement.style.maxWidth = "".concat(newWidth, "px");
+    }
     [].concat(_toConsumableArray(colCellElementsRef.current), _toConsumableArray(colGroupingElementRef.current)).forEach(function (element) {
       var div = element;
       var finalWidth;
@@ -161,7 +168,7 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
     apiRef.current.publishEvent('columnResize', params, nativeEvent);
   });
   var handleColumnResizeMouseDown = useEventCallback(function (_ref, event) {
-    var _apiRef$current$colum, _apiRef$current$colum2;
+    var _apiRef$current$colum, _apiRef$current$heade, _apiRef$current$colum2;
     var colDef = _ref.colDef;
     // Only handle left clicks
     if (event.button !== 0) {
@@ -181,6 +188,10 @@ export var useGridColumnResize = function 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=\"".concat(colDef.field, "\"]"));
+    var headerFilterRowElement = (_apiRef$current$heade = apiRef.current.headerFiltersElementRef) == null ? void 0 : _apiRef$current$heade.current;
+    if (headerFilterRowElement) {
+      headerFilterElementRef.current = headerFilterRowElement.querySelector("[data-field=\"".concat(colDef.field, "\"]"));
+    }
     colGroupingElementRef.current = findGroupHeaderElementsFromField((_apiRef$current$colum2 = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum2.current, colDef.field);
     colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     var doc = ownerDocument(apiRef.current.rootElementRef.current);

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

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

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

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

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v6.4.0
+ * @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/legacy/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/legacy/material/icons.js

@@ -14,4 +14,7 @@ export var 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 var 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/legacy/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';
 var iconSlots = {
   ColumnMenuPinRightIcon: GridPushPinRightIcon,
-  ColumnMenuPinLeftIcon: GridPushPinLeftIcon
+  ColumnMenuPinLeftIcon: GridPushPinLeftIcon,
+  HeaderFilterClearIcon: GridHighlightOffIcon
 };
 var materialSlots = _extends({}, iconSlots);
 export default materialSlots;

package/legacy/models/gridProSlotProps.js

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

package/legacy/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTY4Mzg0MjQwMDAwMA==";
+  var 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/legacy/utils/tree/createRowTree.js

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

package/legacy/utils/tree/insertDataRowInTree.js

@@ -10,6 +10,7 @@ export var insertDataRowInTree = function insertDataRowInTree(_ref) {
   var id = _ref.id,
     path = _ref.path,
     updatedGroupsManager = _ref.updatedGroupsManager,
+    previousTree = _ref.previousTree,
     tree = _ref.tree,
     treeDepths = _ref.treeDepths,
     onDuplicatePath = _ref.onDuplicatePath,
@@ -41,6 +42,7 @@ export var insertDataRowInTree = function insertDataRowInTree(_ref) {
         updatedGroupsManager == null ? void 0 : updatedGroupsManager.addAction(parentNodeId, 'insertChildren');
         insertNodeInTree({
           node: leafNode,
+          previousTree: previousTree,
           tree: tree,
           treeDepths: treeDepths
         });
@@ -54,6 +56,7 @@ export var insertDataRowInTree = function insertDataRowInTree(_ref) {
           updatedGroupsManager == null ? void 0 : updatedGroupsManager.addAction(parentNodeId, 'insertChildren');
           updateGroupNodeIdAndAutoGenerated({
             tree: tree,
+            previousTree: previousTree,
             treeDepths: treeDepths,
             node: existingNodeWithPartialPath,
             updatedNode: {
@@ -93,6 +96,7 @@ export var insertDataRowInTree = function insertDataRowInTree(_ref) {
           defaultGroupingExpansionDepth: defaultGroupingExpansionDepth,
           isGroupExpandedByDefault: isGroupExpandedByDefault
         }),
+        previousTree: previousTree,
         tree: tree,
         treeDepths: treeDepths
       });