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

package/components/headerFiltering/GridHeaderFilterMenu.js

@@ -0,0 +1,69 @@
+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) => {
+        var _op$headerLabel;
+        const label = (_op$headerLabel = op == null ? void 0 : op.headerLabel) != null ? _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/components/headerFiltering/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const OPERATOR_SYMBOL_MAPPING: {
+    [key: string]: string;
+};

package/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/components/headerFiltering/index.d.ts

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

package/components/headerFiltering/index.js

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

package/components/index.d.ts

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

package/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/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/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { UseGridColumnHeadersProps, GetHeadersParams } from '@mui/x-data-grid/internals';
+export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
+    getColumnFilters: (params?: GetHeadersParams, other?: {}) => JSX.Element | null;
+    getRootProps: (other?: {} | undefined) => {
+        style: {
+            minHeight: number;
+            maxHeight: number;
+            lineHeight: string;
+        };
+    };
+    renderContext: import("@mui/x-data-grid").GridRenderContext | null;
+    getColumnHeaders: (params?: GetHeadersParams | undefined, other?: {} | undefined) => JSX.Element | null;
+    getColumnGroupHeaders: (params?: GetHeadersParams | undefined) => JSX.Element[] | null;
+    isDragging: boolean;
+    getInnerProps: () => {
+        ref: ((instance: HTMLDivElement | null) => void) | null;
+        role: string;
+    };
+    headerHeight: number;
+};

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -0,0 +1,111 @@
+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) {
+      var _colDef$filterOperato, _colDef$filterOperato2, _filterModel$items$fi, _rootProps$slotProps;
+      const colDef = renderedColumns[i];
+      const columnIndex = firstColumnToRender + i;
+      const hasFocus = (columnHeaderFilterFocus == null ? void 0 : columnHeaderFilterFocus.field) === colDef.field;
+      const isFirstColumn = columnIndex === 0;
+      const tabIndexField = columnHeaderFilterTabIndexState == null ? void 0 : 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$filterOperato = (_colDef$filterOperato2 = colDef.filterOperators) == null ? void 0 : _colDef$filterOperato2.filter(operator => operator.value !== 'isAnyOf')) != null ? _colDef$filterOperato : [];
+      const item = (_filterModel$items$fi = filterModel == null ? void 0 : filterModel.items.find(it => 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), `${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/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;
@@ -160,7 +167,7 @@ export const useGridColumnResize = (apiRef, props) => {
   const handleColumnResizeMouseDown = useEventCallback(({
     colDef
   }, event) => {
-    var _apiRef$current$colum, _apiRef$current$colum2;
+    var _apiRef$current$colum, _apiRef$current$heade, _apiRef$current$colum2;
     // Only handle left clicks
     if (event.button !== 0) {
       return;
@@ -179,6 +186,10 @@ export const useGridColumnResize = (apiRef, props) => {
     }, event);
     colDefRef.current = colDef;
     colElementRef.current = (_apiRef$current$colum = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum.current.querySelector(`[data-field="${colDef.field}"]`);
+    const headerFilterRowElement = (_apiRef$current$heade = apiRef.current.headerFiltersElementRef) == null ? void 0 : _apiRef$current$heade.current;
+    if (headerFilterRowElement) {
+      headerFilterElementRef.current = headerFilterRowElement.querySelector(`[data-field="${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);
     const doc = ownerDocument(apiRef.current.rootElementRef.current);

package/hooks/features/rowPinning/useGridRowPinningPreProcessors.js

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

package/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -78,6 +78,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/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/internals/index.d.ts

@@ -2,6 +2,7 @@ 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';
+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/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/DataGridPro/DataGridPro.js

@@ -827,6 +827,11 @@ DataGridProRaw.propTypes = {
    * @default false
    */
   treeData: PropTypes.bool,
+  /**
+   * If `true`, enables the data grid filtering on header feature.
+   * @default false
+   */
+  unstable_headerFilters: PropTypes.bool,
   /**
    * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.
    * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export.

package/legacy/DataGridPro/useDataGridProComponent.js

@@ -1,4 +1,4 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer } from '@mui/x-data-grid/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
 import { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
@@ -35,6 +35,7 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   /**
    * Register all state initializers here.
    */
+  useGridInitializeState(headerFilteringStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(detailPanelStateInitializer, apiRef, props);
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
@@ -53,6 +54,7 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
+  useGridHeaderFiltering(apiRef, props);
   useGridTreeData(apiRef);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);

package/legacy/DataGridPro/useDataGridProProps.js

@@ -1,10 +1,9 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["components", "componentsProps"];
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
-import { computeSlots, uncapitalizeObjectKeys } from '@mui/x-data-grid/internals';
+import { computeSlots, uncapitalizeObjectKeys, useProps } from '@mui/x-data-grid/internals';
 import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '../constants/dataGridProDefaultSlotsComponents';
 
 /**
@@ -22,17 +21,19 @@ export var DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_DEF
   rowsLoadingMode: 'client',
   getDetailPanelHeight: function getDetailPanelHeight() {
     return 500;
-  }
+  },
+  unstable_headerFilters: false
 });
 var defaultSlots = uncapitalizeObjectKeys(DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS);
 export var useDataGridProProps = function useDataGridProProps(inProps) {
-  var _useThemeProps = useThemeProps({
+  var _useProps = useProps(useThemeProps({
       props: inProps,
       name: 'MuiDataGrid'
-    }),
-    components = _useThemeProps.components,
-    componentsProps = _useThemeProps.componentsProps,
-    themedProps = _objectWithoutProperties(_useThemeProps, _excluded);
+    })),
+    _useProps2 = _slicedToArray(_useProps, 3),
+    components = _useProps2[0],
+    componentsProps = _useProps2[1],
+    themedProps = _useProps2[2];
   var localeText = React.useMemo(function () {
     return _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText);
   }, [themedProps.localeText]);

package/legacy/components/GridColumnHeaders.js

@@ -8,11 +8,12 @@ import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { styled, alpha, useTheme } from '@mui/material/styles';
 import { getDataGridUtilityClass, gridClasses, useGridApiEventHandler, GridColumnHeaderSeparatorSides } from '@mui/x-data-grid';
-import { GridBaseColumnHeaders, GridColumnHeadersInner, useGridColumnHeaders } from '@mui/x-data-grid/internals';
+import { GridBaseColumnHeaders, GridColumnHeadersInner } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { GridPinnedPosition } from '../hooks/features/columnPinning';
 import { filterColumns } from './DataGridProVirtualScroller';
+import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var leftPinnedColumns = ownerState.leftPinnedColumns,
@@ -144,6 +145,7 @@ var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders
     getRootProps = _useGridColumnHeaders.getRootProps,
     getInnerProps = _useGridColumnHeaders.getInnerProps,
     getColumnHeaders = _useGridColumnHeaders.getColumnHeaders,
+    getColumnFilters = _useGridColumnHeaders.getColumnFilters,
     getColumnGroupHeaders = _useGridColumnHeaders.getColumnGroupHeaders;
   var ownerState = _extends({}, rootProps, {
     leftPinnedColumns: leftPinnedColumns,
@@ -184,6 +186,10 @@ var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders
         maxLastColumn: leftRenderContext.lastColumnIndex
       }, {
         disableReorder: true
+      }), getColumnFilters({
+        renderContext: leftRenderContext,
+        minFirstColumn: leftRenderContext.firstColumnIndex,
+        maxLastColumn: leftRenderContext.lastColumnIndex
       })]
     })), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
       isDragging: isDragging
@@ -196,6 +202,10 @@ var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders
         renderContext: renderContext,
         minFirstColumn: leftPinnedColumns.length,
         maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
+      }), getColumnFilters({
+        renderContext: renderContext,
+        minFirstColumn: leftPinnedColumns.length,
+        maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
       })]
     })), rightRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
       ownerState: _extends({}, ownerState, {
@@ -218,6 +228,10 @@ var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders
       }, {
         disableReorder: true,
         separatorSide: GridColumnHeaderSeparatorSides.Left
+      }), getColumnFilters({
+        renderContext: rightRenderContext,
+        minFirstColumn: rightRenderContext.firstColumnIndex,
+        maxLastColumn: rightRenderContext.lastColumnIndex
       })]
     }))]
   }));

package/legacy/components/GridDetailPanel.js

@@ -5,7 +5,7 @@ var _excluded = ["rowId", "height", "style"];
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-import { useGridRootProps } from '@mui/x-data-grid';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 var DetailPanel = styled(Box, {

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 };