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

package/legacy/components/headerFiltering/GridHeaderFilterAdornment.js

@@ -0,0 +1,97 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["operators", "item", "field", "buttonRef", "headerFilterMenuRef"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useGridApiContext } from '@mui/x-data-grid';
+import { unstable_useId as useId } from '@mui/utils';
+import { unstable_gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { OPERATOR_SYMBOL_MAPPING } from './constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var sx = {
+  width: 22,
+  height: 22,
+  padding: '0px 0px 2px 2px'
+};
+function GridHeaderFilterAdornment(props) {
+  var _rootProps$slotProps, _OPERATOR_SYMBOL_MAPP;
+  var operators = props.operators,
+    item = props.item,
+    field = props.field,
+    buttonRef = props.buttonRef,
+    headerFilterMenuRef = props.headerFilterMenuRef,
+    others = _objectWithoutProperties(props, _excluded);
+  var buttonId = useId();
+  var menuId = useId();
+  var rootProps = useGridRootProps();
+  var apiRef = useGridApiContext();
+  var open = Boolean(unstable_gridHeaderFilteringMenuSelector(apiRef) === field && headerFilterMenuRef.current);
+  var handleClick = function handleClick(event) {
+    headerFilterMenuRef.current = event.currentTarget;
+    apiRef.current.showHeaderFilterMenu(field);
+  };
+  if (!rootProps.slots.headerFilterMenu) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
+      position: "start",
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+        id: buttonId,
+        ref: buttonRef,
+        "aria-label": apiRef.current.getLocaleText('filterPanelOperator'),
+        title: apiRef.current.getLocaleText('filterPanelOperator'),
+        "aria-controls": menuId,
+        "aria-expanded": open ? 'true' : undefined,
+        "aria-haspopup": "true",
+        tabIndex: -1,
+        size: "small",
+        onClick: handleClick,
+        sx: sx
+      }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+        children: (_OPERATOR_SYMBOL_MAPP = OPERATOR_SYMBOL_MAPPING[item == null ? void 0 : item.operator]) != null ? _OPERATOR_SYMBOL_MAPP : '='
+      }))
+    }), /*#__PURE__*/_jsx(rootProps.slots.headerFilterMenu, _extends({
+      field: field,
+      open: open,
+      item: item,
+      targetRef: headerFilterMenuRef,
+      operators: operators,
+      labelledBy: buttonId,
+      id: menuId
+    }, others))]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridHeaderFilterAdornment.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  applyFilterChanges: PropTypes.func.isRequired,
+  buttonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })]),
+  field: PropTypes.string.isRequired,
+  headerFilterMenuRef: PropTypes.shape({
+    current: PropTypes.object
+  }).isRequired,
+  item: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    operator: PropTypes.string.isRequired,
+    value: PropTypes.any
+  }).isRequired,
+  operators: 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
+  })).isRequired
+} : void 0;
+export { GridHeaderFilterAdornment };

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.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