@mui/x-data-grid 6.4.0 → 6.6.0

package/components/panel/filterPanel/GridFilterInputValue.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "headerFilterMenu", "isFilterActive", "clearButton", "InputProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -14,7 +14,13 @@ function GridFilterInputValue(props) {
       applyValue,
       type,
       apiRef,
-      focusElementRef
+      focusElementRef,
+      tabIndex,
+      disabled,
+      headerFilterMenu,
+      isFilterActive,
+      clearButton,
+      InputProps
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const filterTimeout = React.useRef();
@@ -46,9 +52,6 @@ function GridFilterInputValue(props) {
     const itemValue = (_item$value2 = item.value) != null ? _item$value2 : '';
     setFilterValueState(String(itemValue));
   }, [item.value]);
-  const InputProps = applying ? {
-    endAdornment: /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {})
-  } : others.InputProps;
   return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
@@ -57,7 +60,20 @@ function GridFilterInputValue(props) {
     onChange: onFilterChange,
     variant: "standard",
     type: type || 'text',
-    InputProps: InputProps,
+    InputProps: _extends({}, applying || clearButton ? {
+      endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+        fontSize: "small",
+        color: "action"
+      }) : clearButton
+    } : {}, headerFilterMenu && isFilterActive ? {
+      startAdornment: headerFilterMenu
+    } : {}, {
+      disabled
+    }, InputProps, {
+      inputProps: _extends({
+        tabIndex
+      }, InputProps == null ? void 0 : InputProps.inputProps)
+    }),
     InputLabelProps: {
       shrink: true
     },
@@ -73,7 +89,14 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
     current: PropTypes.object.isRequired
   }).isRequired,
   applyValue: PropTypes.func.isRequired,
+  clearButton: PropTypes.node,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
+  headerFilterMenu: PropTypes.node,
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (e.g. `isEmpty`)
+   */
+  isFilterActive: PropTypes.bool,
   item: PropTypes.shape({
     field: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/components/panel/filterPanel/GridFilterPanel.d.ts

@@ -29,5 +29,6 @@ export interface GridFilterPanelProps extends Pick<GridFilterFormProps, 'logicOp
      */
     children?: React.ReactNode;
 }
+declare const getGridFilter: (col: GridStateColDef) => GridFilterItem;
 declare const GridFilterPanel: React.ForwardRefExoticComponent<GridFilterPanelProps & React.RefAttributes<HTMLDivElement>>;
-export { GridFilterPanel };
+export { GridFilterPanel, getGridFilter };

package/components/panel/filterPanel/GridFilterPanel.js

@@ -209,4 +209,4 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
-export { GridFilterPanel };
+export { GridFilterPanel, getGridFilter };

package/components/panel/filterPanel/index.d.ts

@@ -2,7 +2,9 @@ export * from './GridFilterForm';
 export * from './GridFilterInputValue';
 export * from './GridFilterInputDate';
 export * from './GridFilterInputSingleSelect';
+export * from './GridFilterInputBoolean';
 export * from './GridFilterInputValueProps';
-export * from './GridFilterPanel';
+export { GridFilterPanel } from './GridFilterPanel';
+export type { GetColumnForNewFilterArgs } from './GridFilterPanel';
 export * from './GridFilterInputMultipleValue';
 export * from './GridFilterInputMultipleSingleSelect';

package/components/panel/filterPanel/index.js

@@ -2,7 +2,8 @@ export * from './GridFilterForm';
 export * from './GridFilterInputValue';
 export * from './GridFilterInputDate';
 export * from './GridFilterInputSingleSelect';
+export * from './GridFilterInputBoolean';
 export * from './GridFilterInputValueProps';
-export * from './GridFilterPanel';
+export { GridFilterPanel } from './GridFilterPanel';
 export * from './GridFilterInputMultipleValue';
 export * from './GridFilterInputMultipleSingleSelect';

package/components/toolbar/GridToolbarColumnsButton.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["onClick"];
 import * as React from 'react';
+import { unstable_useId as useId } from '@mui/material/utils';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
 import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
@@ -14,17 +15,16 @@ export const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function G
       onClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const columnButtonId = useId();
+  const columnPanelId = useId();
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const {
-    open,
-    openedPanelValue
-  } = useGridSelector(apiRef, gridPreferencePanelStateSelector);
+  const preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const showColumns = event => {
-    if (open && openedPanelValue === GridPreferencePanelsValue.columns) {
+    if (preferencePanel.open && preferencePanel.openedPanelValue === GridPreferencePanelsValue.columns) {
       apiRef.current.hidePreferences();
     } else {
-      apiRef.current.showPreferences(GridPreferencePanelsValue.columns);
+      apiRef.current.showPreferences(GridPreferencePanelsValue.columns, columnPanelId, columnButtonId);
     }
     onClick == null ? void 0 : onClick(event);
   };
@@ -33,10 +33,15 @@ export const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function G
   if (rootProps.disableColumnSelector) {
     return null;
   }
+  const isOpen = preferencePanel.open && preferencePanel.panelId === columnPanelId;
   return /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
     ref: ref,
+    id: columnButtonId,
     size: "small",
     "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
+    "aria-haspopup": "menu",
+    "aria-expanded": isOpen,
+    "aria-controls": isOpen ? columnPanelId : undefined,
     startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {})
   }, other, {
     onClick: showColumns

package/components/toolbar/GridToolbarDensitySelector.js

@@ -94,9 +94,9 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
       size: "small",
       startIcon: startIcon,
       "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
-      "aria-expanded": open ? 'true' : undefined,
       "aria-haspopup": "menu",
-      "aria-controls": densityMenuId,
+      "aria-expanded": open,
+      "aria-controls": open ? densityMenuId : undefined,
       id: densityButtonId
     }, other, {
       onClick: handleDensitySelectorOpen

package/components/toolbar/GridToolbarExport.d.ts

@@ -19,7 +19,7 @@ export interface GridToolbarExportProps extends ButtonProps {
     printOptions?: GridPrintExportOptions & GridExportDisplayOptions;
     [key: string]: any;
 }
-export declare function GridCsvExportMenuItem(props: GridCsvExportMenuItemProps): JSX.Element;
-export declare function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps): JSX.Element;
+export declare function GridCsvExportMenuItem(props: GridCsvExportMenuItemProps): React.JSX.Element;
+export declare function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps): React.JSX.Element;
 declare const GridToolbarExport: React.ForwardRefExoticComponent<Omit<GridToolbarExportProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarExport };

package/components/toolbar/GridToolbarExportContainer.js

@@ -20,8 +20,8 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const buttonId = useId();
-  const menuId = useId();
+  const exportButtonId = useId();
+  const exportMenuId = useId();
   const [open, setOpen] = React.useState(false);
   const buttonRef = React.useRef(null);
   const handleRef = useForkRef(ref, buttonRef);
@@ -54,11 +54,11 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
       ref: handleRef,
       size: "small",
       startIcon: /*#__PURE__*/_jsx(rootProps.slots.exportIcon, {}),
-      "aria-expanded": open ? 'true' : undefined,
+      "aria-expanded": open,
       "aria-label": apiRef.current.getLocaleText('toolbarExportLabel'),
       "aria-haspopup": "menu",
-      "aria-labelledby": menuId,
-      id: buttonId
+      "aria-controls": open ? exportMenuId : undefined,
+      id: exportButtonId
     }, other, {
       onClick: handleMenuOpen
     }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseButton, {
@@ -69,9 +69,9 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
       onClickAway: handleMenuClickAway,
       position: "bottom-start",
       children: /*#__PURE__*/_jsx(MenuList, {
-        id: menuId,
+        id: exportMenuId,
         className: gridClasses.menuList,
-        "aria-labelledby": buttonId,
+        "aria-labelledby": exportButtonId,
         onKeyDown: handleListKeyDown,
         autoFocusItem: open,
         children: React.Children.map(children, child => {

package/components/toolbar/GridToolbarFilterButton.js

@@ -4,7 +4,7 @@ const _excluded = ["componentsProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
+import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize, unstable_useId as useId } from '@mui/utils';
 import Badge from '@mui/material/Badge';
 import { gridColumnLookupSelector } from '../../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
@@ -28,7 +28,7 @@ const useUtilityClasses = ownerState => {
 const GridToolbarFilterListRoot = styled('ul', {
   name: 'MuiDataGrid',
   slot: 'ToolbarFilterList',
-  overridesResolver: (props, styles) => styles.toolbarFilterList
+  overridesResolver: (_props, styles) => styles.toolbarFilterList
 })(({
   theme
 }) => ({
@@ -48,6 +48,8 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
   const lookup = useGridSelector(apiRef, gridColumnLookupSelector);
   const preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const classes = useUtilityClasses(rootProps);
+  const filterButtonId = useId();
+  const filterPanelId = useId();
   const tooltipContentNode = React.useMemo(() => {
     if (preferencePanel.open) {
       return apiRef.current.getLocaleText('toolbarFiltersTooltipHide');
@@ -83,9 +85,9 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
       openedPanelValue
     } = preferencePanel;
     if (open && openedPanelValue === GridPreferencePanelsValue.filters) {
-      apiRef.current.hideFilterPanel();
+      apiRef.current.hidePreferences();
     } else {
-      apiRef.current.showFilterPanel();
+      apiRef.current.showPreferences(GridPreferencePanelsValue.filters, filterPanelId, filterButtonId);
     }
     (_buttonProps$onClick = buttonProps.onClick) == null ? void 0 : _buttonProps$onClick.call(buttonProps, event);
   };
@@ -94,14 +96,19 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
   if (rootProps.disableColumnFilter) {
     return null;
   }
+  const isOpen = preferencePanel.open && preferencePanel.panelId === filterPanelId;
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: tooltipContentNode,
     enterDelay: 1000
   }, other, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
       ref: ref,
+      id: filterButtonId,
       size: "small",
       "aria-label": apiRef.current.getLocaleText('toolbarFiltersLabel'),
+      "aria-controls": isOpen ? filterPanelId : undefined,
+      "aria-expanded": isOpen,
+      "aria-haspopup": true,
       startIcon: /*#__PURE__*/_jsx(Badge, {
         badgeContent: activeFilters.length,
         color: "primary",

package/components/toolbar/GridToolbarQuickFilter.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
 import { GridFilterModel } from '../../models/gridFilterModel';
 export type GridToolbarQuickFilterProps = TextFieldProps & {
@@ -20,7 +20,7 @@ export type GridToolbarQuickFilterProps = TextFieldProps & {
      */
     debounceMs?: number;
 };
-declare function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps): JSX.Element;
+declare function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps): React.JSX.Element;
 declare namespace GridToolbarQuickFilter {
     var propTypes: any;
 }

package/constants/localeTextConstants.js

@@ -58,6 +58,32 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   filterOperatorIsEmpty: 'is empty',
   filterOperatorIsNotEmpty: 'is not empty',
   filterOperatorIsAnyOf: 'is any of',
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
+  // Header filter operators text
+  headerFilterOperatorContains: 'Contains',
+  headerFilterOperatorEquals: 'Equals',
+  headerFilterOperatorStartsWith: 'Starts with',
+  headerFilterOperatorEndsWith: 'Ends with',
+  headerFilterOperatorIs: 'Is',
+  headerFilterOperatorNot: 'Is not',
+  headerFilterOperatorAfter: 'Is after',
+  headerFilterOperatorOnOrAfter: 'Is on or after',
+  headerFilterOperatorBefore: 'Is before',
+  headerFilterOperatorOnOrBefore: 'Is on or before',
+  headerFilterOperatorIsEmpty: 'Is empty',
+  headerFilterOperatorIsNotEmpty: 'Is not empty',
+  headerFilterOperatorIsAnyOf: 'Is any of',
+  'headerFilterOperator=': 'Equals',
+  'headerFilterOperator!=': 'Not equals',
+  'headerFilterOperator>': 'Is greater than',
+  'headerFilterOperator>=': 'Is greater than or equal to',
+  'headerFilterOperator<': 'Is less than',
+  'headerFilterOperator<=': 'Is less than or equal to',
   // Filter values text
   filterValueAny: 'any',
   filterValueTrue: 'true',

package/context/GridContextProvider.d.ts

@@ -5,5 +5,5 @@ type GridContextProviderProps = {
     props: {};
     children: React.ReactNode;
 };
-export declare function GridContextProvider({ privateApiRef, props, children }: GridContextProviderProps): JSX.Element;
+export declare function GridContextProvider({ privateApiRef, props, children }: GridContextProviderProps): React.JSX.Element;
 export {};

package/hooks/core/strategyProcessing/gridStrategyProcessingApi.d.ts

@@ -1,5 +1,5 @@
-import { GridRowTreeCreationParams, GridRowTreeCreationValue } from '../../features/rows/gridRowsInterfaces';
-import { GridFilteringMethodParams, GridFilteringMethodValue } from '../../features/filter/gridFilterState';
+import { GridRowTreeCreationParams, GridRowTreeCreationValue, GridRowsState } from '../../features/rows/gridRowsInterfaces';
+import { GridFilteringMethodParams, GridFilteringMethodValue, GridFilterState, GridVisibleRowsLookupState } from '../../features/filter/gridFilterState';
 import { GridSortingMethodParams, GridSortingMethodValue } from '../../features/sorting/gridSortingState';
 export type GridStrategyProcessorName = keyof GridStrategyProcessingLookup;
 export type GridStrategyGroup = GridStrategyProcessingLookup[keyof GridStrategyProcessingLookup]['group'];
@@ -19,6 +19,14 @@ export interface GridStrategyProcessingLookup {
         params: GridSortingMethodParams;
         value: GridSortingMethodValue;
     };
+    visibleRowsLookupCreation: {
+        group: 'rowTree';
+        params: {
+            tree: GridRowsState['tree'];
+            filteredRowsLookup: GridFilterState['filteredRowsLookup'];
+        };
+        value: GridVisibleRowsLookupState;
+    };
 }
 export type GridStrategyProcessor<P extends GridStrategyProcessorName> = (params: GridStrategyProcessingLookup[P]['params']) => GridStrategyProcessingLookup[P]['value'];
 export interface GridStrategyProcessingApi {

package/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -6,7 +6,8 @@ export const GRID_DEFAULT_STRATEGY = 'none';
 export const GRID_STRATEGIES_PROCESSORS = {
   rowTreeCreation: 'rowTree',
   filtering: 'rowTree',
-  sorting: 'rowTree'
+  sorting: 'rowTree',
+  visibleRowsLookupCreation: 'rowTree'
 };
 /**
  * Implements a variant of the Strategy Pattern (see https://en.wikipedia.org/wiki/Strategy_pattern)

package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -25,14 +25,21 @@ export interface UseGridColumnHeadersProps {
     columnGroupsHeaderStructure: GridGroupingStructure[][];
     hasOtherElementInTabSequence: boolean;
 }
-interface GetHeadersParams {
+export interface GetHeadersParams {
     renderContext: GridRenderContext | null;
     minFirstColumn?: number;
     maxLastColumn?: number;
 }
 export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
     renderContext: GridRenderContext | null;
-    getColumnHeaders: (params?: GetHeadersParams, other?: {}) => JSX.Element | null;
+    getColumnHeaders: (params?: GetHeadersParams, other?: {}) => React.JSX.Element | null;
+    getColumnsToRender: (params?: GetHeadersParams) => {
+        renderedColumns: GridStateColDef[];
+        firstColumnToRender: number;
+        lastColumnToRender: number;
+        minFirstColumn: number;
+        maxLastColumn: number;
+    } | null;
     getColumnGroupHeaders: (params?: GetHeadersParams) => JSX.Element[] | null;
     isDragging: boolean;
     getRootProps: (other?: {}) => {
@@ -46,5 +53,5 @@ export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) =>
         ref: ((instance: HTMLDivElement | null) => void) | null;
         role: string;
     };
+    headerHeight: number;
 };
-export {};

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -263,7 +263,7 @@ export const useGridColumnHeaders = props => {
         const tabIndex = columnGroupHeaderTabIndexState !== null && columnGroupHeaderTabIndexState.depth === depth && columnFields.includes(columnGroupHeaderTabIndexState.field) ? 0 : -1;
         const headerInfo = {
           groupId,
-          width: columnFields.map(field => apiRef.current.getColumn(field).computedWidth).reduce((acc, val) => acc + val, 0),
+          width: columnFields.reduce((acc, field) => acc + apiRef.current.getColumn(field).computedWidth, 0),
           fields: columnFields,
           colIndex: columnIndex,
           hasFocus,
@@ -319,6 +319,7 @@ export const useGridColumnHeaders = props => {
   return {
     renderContext,
     getColumnHeaders,
+    getColumnsToRender,
     getColumnGroupHeaders,
     isDragging: !!dragCol,
     getRootProps: (other = {}) => _extends({
@@ -327,6 +328,7 @@ export const useGridColumnHeaders = props => {
     getInnerProps: () => ({
       ref: handleInnerRef,
       role: 'rowgroup'
-    })
+    }),
+    headerHeight
   };
 };

package/hooks/features/dimensions/useGridDimensions.js

@@ -155,8 +155,8 @@ export function useGridDimensions(apiRef, props) {
     if (!mainEl) {
       return;
     }
-    const height = mainEl.offsetHeight || 0;
-    const width = mainEl.offsetWidth || 0;
+    const height = mainEl.clientHeight || 0;
+    const width = mainEl.clientWidth || 0;
     const win = ownerWindow(mainEl);
     const computedStyle = win.getComputedStyle(mainEl);
     const paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;

package/hooks/features/editing/useGridEditing.js

@@ -29,9 +29,6 @@ export const useGridEditing = (apiRef, props) => {
     if (isCellEditableProp) {
       return isCellEditableProp(params);
     }
-    if (params.rowNode.type === 'pinnedRow') {
-      return false;
-    }
     return true;
   }, [isCellEditableProp]);
   const maybeDebounce = (id, field, debounceMs, callback) => {

package/hooks/features/filter/gridFilterSelector.d.ts

@@ -11,10 +11,10 @@ export declare const gridFilterModelSelector: import("../../../utils/createSelec
  */
 export declare const gridQuickFilterValuesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, any[] | undefined>;
 /**
- * @category Filtering
+ * @category Visible rows
  * @ignore - do not document.
  */
-export declare const gridVisibleRowsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<import("../../..").GridRowId, boolean>>;
+export declare const gridVisibleRowsLookupSelector: (state: GridStateCommunity) => import("./gridFilterState").GridVisibleRowsLookupState;
 /**
  * @category Filtering
  * @ignore - do not document.

package/hooks/features/filter/gridFilterSelector.js

@@ -21,10 +21,10 @@ export const gridFilterModelSelector = createSelector(gridFilterStateSelector, f
 export const gridQuickFilterValuesSelector = createSelector(gridFilterModelSelector, filterModel => filterModel.quickFilterValues);
 
 /**
- * @category Filtering
+ * @category Visible rows
  * @ignore - do not document.
  */
-export const gridVisibleRowsLookupSelector = createSelector(gridFilterStateSelector, filterState => filterState.visibleRowsLookup);
+export const gridVisibleRowsLookupSelector = state => state.visibleRowsLookup;
 
 /**
  * @category Filtering

package/hooks/features/filter/gridFilterState.d.ts

@@ -17,12 +17,6 @@ export interface GridFilterState {
      * This is the equivalent of the `visibleRowsLookup` if all the groups were expanded.
      */
     filteredRowsLookup: Record<GridRowId, boolean>;
-    /**
-     * Visibility status for each row.
-     * A row is visible if it is passing the filters AND if its parents are expanded.
-     * If a row is not registered in this lookup, it is visible.
-     */
-    visibleRowsLookup: Record<GridRowId, boolean>;
     /**
      * Amount of descendants that are passing the filters.
      * For the Tree Data, it includes all the intermediate depth levels (= amount of children + amount of grand children + ...).
@@ -47,3 +41,9 @@ export interface GridFilteringMethodParams {
     filterModel: GridFilterModel;
 }
 export type GridFilteringMethodValue = Omit<GridFilterState, 'filterModel'>;
+/**
+ * Visibility status for each row.
+ * A row is visible if it is passing the filters AND if its parents are expanded.
+ * If a row is not registered in this lookup, it is visible.
+ */
+export type GridVisibleRowsLookupState = Record<GridRowId, boolean>;

package/hooks/features/filter/gridFilterState.js

@@ -9,4 +9,10 @@ export const getDefaultGridFilterModel = () => ({
 /**
  * @param {GridRowId} rowId The id of the row we want to filter.
  * @param {(filterItem: GridFilterItem) => boolean} shouldApplyItem An optional callback to allow the filtering engine to only apply some items.
+ */
+
+/**
+ * Visibility status for each row.
+ * A row is visible if it is passing the filters AND if its parents are expanded.
+ * If a row is not registered in this lookup, it is visible.
  */

package/hooks/features/filter/useGridFilter.js

@@ -20,11 +20,21 @@ export const filterStateInitializer = (state, props, apiRef) => {
   return _extends({}, state, {
     filter: {
       filterModel: sanitizeFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef),
-      visibleRowsLookup: {},
       filteredDescendantCountLookup: {}
-    }
+    },
+    visibleRowsLookup: {}
   });
 };
+const getVisibleRowsLookup = params => {
+  // For flat tree, the `visibleRowsLookup` and the `filteredRowsLookup` are equals since no row is collapsed.
+  return params.filteredRowsLookup;
+};
+function getVisibleRowsLookupState(apiRef, state) {
+  return apiRef.current.applyStrategyProcessor('visibleRowsLookupCreation', {
+    tree: state.rows.tree,
+    filteredRowsLookup: state.filter.filteredRowsLookup
+  });
+}
 
 /**
  * @requires useGridColumns (method, event)
@@ -49,9 +59,13 @@ export const useGridFilter = (apiRef, props) => {
         isRowMatchingFilters,
         filterModel: filterModel != null ? filterModel : getDefaultGridFilterModel()
       });
-      return _extends({}, state, {
+      const newState = _extends({}, state, {
         filter: _extends({}, state.filter, filteringResult)
       });
+      const visibleRowsLookupState = getVisibleRowsLookupState(apiRef, newState);
+      return _extends({}, newState, {
+        visibleRowsLookup: visibleRowsLookupState
+      });
     });
     apiRef.current.publishEvent('filteredRowsSet');
   }, [props.filterMode, apiRef]);
@@ -107,7 +121,7 @@ export const useGridFilter = (apiRef, props) => {
       items
     }), 'deleteFilterItem');
   }, [apiRef]);
-  const showFilterPanel = React.useCallback(targetColumnField => {
+  const showFilterPanel = React.useCallback((targetColumnField, panelId, labelId) => {
     logger.debug('Displaying filter panel');
     if (targetColumnField) {
       const filterModel = gridFilterModelSelector(apiRef);
@@ -153,7 +167,7 @@ export const useGridFilter = (apiRef, props) => {
         items: newFilterItems
       }));
     }
-    apiRef.current.showPreferences(GridPreferencePanelsValue.filters);
+    apiRef.current.showPreferences(GridPreferencePanelsValue.filters, panelId, labelId);
   }, [apiRef, logger, props.disableMultipleColumnsFiltering]);
   const hideFilterPanel = React.useCallback(() => {
     logger.debug('Hiding filter panel');
@@ -262,13 +276,10 @@ export const useGridFilter = (apiRef, props) => {
       }
       return {
         filteredRowsLookup,
-        // For flat tree, the `visibleRowsLookup` and the `filteredRowsLookup` are equals since no row is collapsed.
-        visibleRowsLookup: filteredRowsLookup,
         filteredDescendantCountLookup: {}
       };
     }
     return {
-      visibleRowsLookup: {},
       filteredRowsLookup: {},
       filteredDescendantCountLookup: {}
     };
@@ -278,6 +289,7 @@ export const useGridFilter = (apiRef, props) => {
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
   useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'filtering', flatFilteringMethod);
+  useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'visibleRowsLookupCreation', getVisibleRowsLookup);
 
   /**
    * EVENTS
@@ -298,13 +310,21 @@ export const useGridFilter = (apiRef, props) => {
       apiRef.current.unstable_applyFilters();
     }
   }, [apiRef]);
+  const updateVisibleRowsLookupState = React.useCallback(() => {
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        visibleRowsLookup: getVisibleRowsLookupState(apiRef, state)
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
 
   // Do not call `apiRef.current.forceUpdate` to avoid re-render before updating the sorted rows.
   // Otherwise, the state is not consistent during the render
   useGridApiEventHandler(apiRef, 'rowsSet', updateFilteredRows);
-  useGridApiEventHandler(apiRef, 'rowExpansionChange', apiRef.current.unstable_applyFilters);
   useGridApiEventHandler(apiRef, 'columnsChange', handleColumnsChange);
   useGridApiEventHandler(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
+  useGridApiEventHandler(apiRef, 'rowExpansionChange', updateVisibleRowsLookupState);
 
   /**
    * 1ST RENDER

package/hooks/features/focus/gridFocusState.d.ts

@@ -9,10 +9,12 @@ export type GridColumnGroupIdentifier = {
 export interface GridFocusState {
     cell: GridCellCoordinates | null;
     columnHeader: GridColumnIdentifier | null;
+    columnHeaderFilter: GridColumnIdentifier | null;
     columnGroupHeader: GridColumnGroupIdentifier | null;
 }
 export interface GridTabIndexState {
     cell: GridCellCoordinates | null;
     columnHeader: GridColumnIdentifier | null;
+    columnHeaderFilter: GridColumnIdentifier | null;
     columnGroupHeader: GridColumnGroupIdentifier | null;
 }

package/hooks/features/focus/gridFocusStateSelector.d.ts

@@ -3,8 +3,10 @@ import { GridFocusState, GridTabIndexState } from './gridFocusState';
 export declare const gridFocusStateSelector: (state: GridStateCommunity) => GridFocusState;
 export declare const gridFocusCellSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridCellCoordinates | null>;
 export declare const gridFocusColumnHeaderSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
+export declare const unstable_gridFocusColumnHeaderFilterSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
 export declare const unstable_gridFocusColumnGroupHeaderSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnGroupIdentifier | null>;
 export declare const gridTabIndexStateSelector: (state: GridStateCommunity) => GridTabIndexState;
 export declare const gridTabIndexCellSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridCellCoordinates | null>;
 export declare const gridTabIndexColumnHeaderSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
+export declare const unstable_gridTabIndexColumnHeaderFilterSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
 export declare const unstable_gridTabIndexColumnGroupHeaderSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnGroupIdentifier | null>;