@mui/x-data-grid 6.0.0-alpha.2 → 6.0.0-alpha.4

package/DataGrid/DataGrid.js

@@ -166,7 +166,7 @@ DataGridRaw.propTypes = {
    * If `true`, the selection on click on a row or cell is disabled.
    * @default false
    */
-  disableSelectionOnClick: PropTypes.bool,
+  disableRowSelectionOnClick: PropTypes.bool,
 
   /**
    * If `true`, the virtualization is disabled.
@@ -196,8 +196,6 @@ DataGridRaw.propTypes = {
    */
   experimentalFeatures: PropTypes.shape({
     columnGrouping: PropTypes.bool,
-    newEditingApi: PropTypes.bool,
-    preventCommitWhileValidating: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
 
@@ -374,14 +372,6 @@ DataGridRaw.propTypes = {
    */
   onCellDoubleClick: PropTypes.func,
 
-  /**
-   * Callback fired when the cell changes are committed.
-   * @param {GridCellEditCommitParams} params With all properties from [[GridCellEditCommitParams]].
-   * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
-   * @param {GridCallbackDetails} details Additional details for this callback.
-   */
-  onCellEditCommit: PropTypes.func,
-
   /**
    * Callback fired when the cell turns to edit mode.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].
@@ -482,15 +472,6 @@ DataGridRaw.propTypes = {
    */
   onColumnVisibilityModelChange: PropTypes.func,
 
-  /**
-   * Callback fired when the edit cell value changes.
-   * @param {GridEditCellPropsParams} params With all properties from [[GridEditCellPropsParams]].
-   * @param {MuiEvent<React.SyntheticEvent>} event The event that caused this prop to be called.
-   * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/x/api/data-grid/grid-col-def/)
-   */
-  onEditCellPropsChange: PropTypes.func,
-
   /**
    * Callback fired when the `editRowsModel` changes.
    * @param {GridEditRowsModel} editRowsModel With all properties from [[GridEditRowsModel]].
@@ -620,10 +601,10 @@ DataGridRaw.propTypes = {
 
   /**
    * Callback fired when the selection state of one or multiple rows changes.
-   * @param {GridSelectionModel} selectionModel With all the row ids [[GridSelectionModel]].
+   * @param {GridRowSelectionModel} rowSelectionModel With all the row ids [[GridSelectionModel]].
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
-  onSelectionModelChange: PropTypes.func,
+  onRowSelectionModelChange: PropTypes.func,
 
   /**
    * Callback fired when the sort model changes before a column is sorted.
@@ -677,7 +658,6 @@ DataGridRaw.propTypes = {
 
   /**
    * Callback called before updating a row with new values in the row and cell editing.
-   * Only applied if `props.experimentalFeatures.newEditingApi: true`.
    * @template R
    * @param {R} newRow Row object with the new values.
    * @param {R} oldRow Row object with the old values.
@@ -713,6 +693,17 @@ DataGridRaw.propTypes = {
    */
   rows: PropTypes.arrayOf(PropTypes.object).isRequired,
 
+  /**
+   * Sets the row selection model of the grid.
+   */
+  rowSelectionModel: chainPropTypes(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]), props => {
+    if (!props.checkboxSelection && Array.isArray(props.rowSelectionModel) && props.rowSelectionModel.length > 1) {
+      return new Error([`MUI: \`<DataGrid rowSelectionModel={${JSON.stringify(props.rowSelectionModel)}} />\` is not a valid prop.`, 'rowSelectionModel can only be of 1 item in DataGrid.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock multiple selection.'].join('\n'));
+    }
+
+    return null;
+  }),
+
   /**
    * Sets the type of space between rows added by `getRowSpacing`.
    * @default "margin"
@@ -736,17 +727,6 @@ DataGridRaw.propTypes = {
    */
   scrollbarSize: PropTypes.number,
 
-  /**
-   * Set the selection model of the grid.
-   */
-  selectionModel: chainPropTypes(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]), props => {
-    if (!props.checkboxSelection && Array.isArray(props.selectionModel) && props.selectionModel.length > 1) {
-      return new Error([`MUI: \`<DataGrid selectionModel={${JSON.stringify(props.selectionModel)}} />\` is not a valid prop.`, 'selectionModel can only be of 1 item in DataGrid.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock multiple selection.'].join('\n'));
-    }
-
-    return null;
-  }),
-
   /**
    * If `true`, the right border of the cells are displayed.
    * @default false

package/DataGrid/useDataGridComponent.js

@@ -11,13 +11,12 @@ import { focusStateInitializer, useGridFocus } from '../hooks/features/focus/use
 import { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
 import { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';
 import { useGridPreferencesPanel, preferencePanelStateInitializer } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
-import { useGridEditing as useGridEditing_old, editingStateInitializer as editingStateInitializer_old } from '../hooks/features/editRows/useGridEditing.old';
-import { useGridEditing as useGridEditing_new, editingStateInitializer as editingStateInitializer_new } from '../hooks/features/editRows/useGridEditing.new';
+import { useGridEditing, editingStateInitializer } from '../hooks/features/editing/useGridEditing';
 import { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
 import { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreProcessors';
 import { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
-import { selectionStateInitializer, useGridSelection } from '../hooks/features/selection/useGridSelection';
-import { useGridSelectionPreProcessors } from '../hooks/features/selection/useGridSelectionPreProcessors';
+import { rowSelectionStateInitializer, useGridRowSelection } from '../hooks/features/rowSelection/useGridRowSelection';
+import { useGridRowSelectionPreProcessors } from '../hooks/features/rowSelection/useGridRowSelectionPreProcessors';
 import { useGridSorting, sortingStateInitializer } from '../hooks/features/sorting/useGridSorting';
 import { useGridScroll } from '../hooks/features/scroll/useGridScroll';
 import { useGridEvents } from '../hooks/features/events/useGridEvents';
@@ -26,27 +25,22 @@ import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/row
 import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
 import { useGridColumnGrouping, columnGroupsStateInitializer } from '../hooks/features/columnGrouping/useGridColumnGrouping';
-import { useGridColumnGroupingPreProcessors } from '../hooks/features/columnGrouping/useGridColumnGroupingPreProcessors';
 export const useDataGridComponent = props => {
-  var _props$experimentalFe, _props$experimentalFe2;
-
   const apiRef = useGridInitialization(undefined, props);
   /**
    * Register all pre-processors called during state initialization here.
    */
 
-  useGridColumnGroupingPreProcessors(apiRef, props);
-  useGridSelectionPreProcessors(apiRef, props);
+  useGridRowSelectionPreProcessors(apiRef, props);
   useGridRowsPreProcessors(apiRef);
   /**
    * Register all state initializers here.
    */
 
-  useGridInitializeState(selectionStateInitializer, apiRef, props);
+  useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
-  useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
-  useGridInitializeState((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.newEditingApi ? editingStateInitializer_new : editingStateInitializer_old, apiRef, props);
+  useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, apiRef, props);
   useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
@@ -55,14 +49,14 @@ export const useDataGridComponent = props => {
   useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
+  useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
-  useGridSelection(apiRef, props);
+  useGridRowSelection(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
   useGridColumnSpanning(apiRef);
   useGridColumnGrouping(apiRef, props);
-  const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
   useGridPreferencesPanel(apiRef, props);

package/DataGrid/useDataGridProps.js

@@ -7,7 +7,7 @@ const DATA_GRID_FORCED_PROPS = {
   apiRef: undefined,
   disableMultipleColumnsFiltering: true,
   disableMultipleColumnsSorting: true,
-  disableMultipleSelection: true,
+  disableMultipleRowSelection: true,
   throttleRowsMs: undefined,
   hideFooterRowCount: false,
   pagination: true,
@@ -37,9 +37,9 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableColumnSelector: false,
   disableDensitySelector: false,
   disableMultipleColumnsFiltering: false,
-  disableMultipleSelection: false,
+  disableMultipleRowSelection: false,
   disableMultipleColumnsSorting: false,
-  disableSelectionOnClick: false,
+  disableRowSelectionOnClick: false,
   disableVirtualization: false,
   disableIgnoreModificationsIfProcessingProps: false,
   editMode: GridEditModes.Cell,

package/colDef/gridCheckboxSelectionColDef.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GridCellCheckboxRenderer } from '../components/columnSelection/GridCellCheckboxRenderer';
 import { GridHeaderCheckbox } from '../components/columnSelection/GridHeaderCheckbox';
-import { selectedIdsLookupSelector } from '../hooks/features/selection/gridSelectionSelector';
+import { selectedIdsLookupSelector } from '../hooks/features/rowSelection/gridRowSelectionSelector';
 import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GRID_CHECKBOX_SELECTION_FIELD = '__check__';

package/colDef/gridNumericOperators.d.ts

@@ -1,6 +1,6 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
 import { GridCellParams } from '../models';
-export declare const getGridNumericQuickFilterFn: (value: any) => (({ value }: GridCellParams) => boolean) | null;
+export declare const getGridNumericQuickFilterFn: (value: any) => (({ value: columnValue }: GridCellParams) => boolean) | null;
 export declare const getGridNumericOperators: () => GridFilterOperator<any, number | string | null, any>[];
 /**
  * @deprecated Use `getGridNumericOperators` instead.

package/colDef/gridSingleSelectOperators.d.ts

@@ -1,5 +1,5 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
 import { GridCellParams, GridColDef } from '../models';
 import { GridApiCommunity } from '../models/api/gridApiCommunity';
-export declare const getGridSingleSelectQuickFilterFn: (value: any, column: GridColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => (({ value }: GridCellParams) => boolean) | null;
+export declare const getGridSingleSelectQuickFilterFn: (value: any, column: GridColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => (({ value: columnValue }: GridCellParams) => boolean) | null;
 export declare const getGridSingleSelectOperators: () => GridFilterOperator[];

package/colDef/gridStringOperators.d.ts

@@ -1,4 +1,4 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
 import { GridCellParams } from '../models';
-export declare const getGridStringQuickFilterFn: (value: any) => (({ value }: GridCellParams) => boolean) | null;
+export declare const getGridStringQuickFilterFn: (value: any) => (({ value: columnValue }: GridCellParams) => boolean) | null;
 export declare const getGridStringOperators: (disableTrim?: boolean) => GridFilterOperator<any, number | string | null, any>[];

package/components/GridFooter.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
 import { gridTopLevelRowCountSelector } from '../hooks/features/rows/gridRowsSelector';
-import { selectedGridRowsCountSelector } from '../hooks/features/selection/gridSelectionSelector';
+import { selectedGridRowsCountSelector } from '../hooks/features/rowSelection/gridRowSelectionSelector';
 import { gridVisibleTopLevelRowCountSelector } from '../hooks/features/filter/gridFilterSelector';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { GridRowCount } from './GridRowCount';

package/components/GridRow.js

@@ -19,7 +19,7 @@ import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
 import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
 import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
-import { gridDensityHeaderGroupingMaxDepthSelector } from '../hooks/features/density/densitySelector';
+import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
 import { randomNumberBetween } from '../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -89,7 +89,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
   const treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
-  const headerGroupingMaxDepth = useGridSelector(apiRef, gridDensityHeaderGroupingMaxDepthSelector);
+  const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
   const handleRef = useForkRef(ref, refProp);
   const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 

package/components/base/GridBody.js

@@ -5,7 +5,7 @@ import { GridMainContainer } from '../containers/GridMainContainer';
 import { GridAutoSizer } from '../GridAutoSizer';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridDensityTotalHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
+import { gridTotalHeaderHeightSelector } from '../../hooks/features/columnGrouping/gridColumnGroupsSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -17,7 +17,7 @@ function GridBody(props) {
   } = props;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
+  const totalHeaderHeight = useGridSelector(apiRef, gridTotalHeaderHeightSelector);
   const [isVirtualizationDisabled, setIsVirtualizationDisabled] = React.useState(rootProps.disableVirtualization);
   const disableVirtualization = React.useCallback(() => {
     setIsVirtualizationDisabled(true);

package/components/cell/GridEditInputCell.js

@@ -10,7 +10,6 @@ import InputBase from '@mui/material/InputBase';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridLoadIcon } from '../icons/index';
-import { SUBMIT_FILTER_STROKE_TIME } from '../panel/filterPanel/GridFilterInputValue';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -38,8 +37,6 @@ const GridEditInputCellRoot = styled(InputBase, {
   }
 }));
 const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _rootProps$experiment, _rootProps$experiment3;
-
   const rootProps = useGridRootProps();
 
   const {
@@ -48,7 +45,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     field,
     colDef,
     hasFocus,
-    debounceMs = (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi ? 200 : SUBMIT_FILTER_STROKE_TIME,
+    debounceMs = 200,
     isProcessingProps,
     onValueChange
   } = props,
@@ -62,8 +59,6 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
   const classes = useUtilityClasses(ownerState);
   const handleChange = React.useCallback(async event => {
-    var _rootProps$experiment2;
-
     const newValue = event.target.value;
 
     if (onValueChange) {
@@ -73,7 +68,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     const column = apiRef.current.getColumn(field);
     let parsedValue = newValue;
 
-    if (column.valueParser && (_rootProps$experiment2 = rootProps.experimentalFeatures) != null && _rootProps$experiment2.newEditingApi) {
+    if (column.valueParser) {
       parsedValue = column.valueParser(newValue, apiRef.current.getCellParams(id, field));
     }
 
@@ -85,7 +80,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       debounceMs,
       unstable_skipValueParser: true
     }, event);
-  }, [apiRef, debounceMs, field, id, onValueChange, (_rootProps$experiment3 = rootProps.experimentalFeatures) == null ? void 0 : _rootProps$experiment3.newEditingApi]);
+  }, [apiRef, debounceMs, field, id, onValueChange]);
   const meta = apiRef.current.unstable_getEditCellMeta ? apiRef.current.unstable_getEditCellMeta(id, field) : {};
   React.useEffect(() => {
     if (meta.changeReason !== 'debouncedSetEditCellValue') {

package/components/cell/GridEditSingleSelectCell.js

@@ -83,8 +83,6 @@ function GridEditSingleSelectCell(props) {
   }
 
   const handleChange = async event => {
-    var _rootProps$experiment;
-
     setOpen(false);
     const target = event.target; // NativeSelect casts the value to a string.
 
@@ -94,35 +92,11 @@ function GridEditSingleSelectCell(props) {
       await onValueChange(event, formattedTargetValue);
     }
 
-    const isValid = await apiRef.current.setEditCellValue({
+    await apiRef.current.setEditCellValue({
       id,
       field,
       value: formattedTargetValue
     }, event);
-
-    if ((_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi) {
-      return;
-    } // We use isValid === false because the default return is undefined which evaluates to true with !isValid
-
-
-    if (rootProps.editMode === GridEditModes.Row || isValid === false) {
-      return;
-    }
-
-    const canCommit = await Promise.resolve(apiRef.current.commitCellChange({
-      id,
-      field
-    }, event));
-
-    if (canCommit) {
-      apiRef.current.setCellMode(id, field, 'view');
-
-      if (event.key) {
-        // TODO v6: remove once we stop ignoring events fired from portals
-        const params = apiRef.current.getCellParams(id, field);
-        apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
-      }
-    }
   };
 
   const handleClose = (event, reason) => {
@@ -132,17 +106,11 @@ function GridEditSingleSelectCell(props) {
     }
 
     if (reason === 'backdropClick' || isEscapeKey(event.key)) {
-      var _rootProps$experiment2;
-
-      if ((_rootProps$experiment2 = rootProps.experimentalFeatures) != null && _rootProps$experiment2.newEditingApi) {
-        apiRef.current.stopCellEditMode({
-          id,
-          field,
-          ignoreModifications: true
-        });
-      } else {
-        apiRef.current.setCellMode(id, field, 'view');
-      }
+      apiRef.current.stopCellEditMode({
+        id,
+        field,
+        ignoreModifications: true
+      });
     }
   };
 

package/components/columnHeaders/GridColumnGroupHeader.d.ts

@@ -9,6 +9,8 @@ interface GridColumnGroupHeaderProps {
     depth: number;
     maxDepth: number;
     height: number;
+    hasFocus?: boolean;
+    tabIndex: 0 | -1;
 }
 declare function GridColumnGroupHeader(props: GridColumnGroupHeaderProps): JSX.Element;
 export { GridColumnGroupHeader };

package/components/columnHeaders/GridColumnGroupHeader.js

@@ -39,10 +39,13 @@ function GridColumnGroupHeader(props) {
     fields,
     height,
     colIndex,
+    hasFocus,
+    tabIndex,
     isLastColumn,
     extendRowFullWidth
   } = props;
   const rootProps = useGridRootProps();
+  const headerCellRef = React.useRef(null);
   const apiRef = useGridApiContext();
   const columnGroupsLookup = useGridSelector(apiRef, gridColumnGroupsLookupSelector);
   const {
@@ -60,7 +63,7 @@ function GridColumnGroupHeader(props) {
   } = group;
   let headerComponent;
   const render = groupId && ((_columnGroupsLookup$g = columnGroupsLookup[groupId]) == null ? void 0 : _columnGroupsLookup$g.renderHeaderGroup);
-  const renderParams = {
+  const renderParams = React.useMemo(() => ({
     groupId,
     headerName,
     description,
@@ -69,7 +72,7 @@ function GridColumnGroupHeader(props) {
     fields,
     colIndex,
     isLastColumn
-  };
+  }), [groupId, headerName, description, depth, maxDepth, fields, colIndex, isLastColumn]);
 
   if (groupId && render) {
     headerComponent = render(renderParams);
@@ -92,8 +95,32 @@ function GridColumnGroupHeader(props) {
   const id = useId();
   const elementId = groupId === null ? `empty-group-cell-${id}` : groupId;
   const classes = useUtilityClasses(ownerState);
+  React.useLayoutEffect(() => {
+    if (hasFocus) {
+      const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
+      const elementToFocus = focusableElement || headerCellRef.current;
+      elementToFocus == null ? void 0 : elementToFocus.focus();
+    }
+  }, [apiRef, hasFocus]);
+  const publish = React.useCallback(eventName => event => {
+    // Ignore portal
+    // See https://github.com/mui/mui-x/issues/1721
+    if (!event.currentTarget.contains(event.target)) {
+      return;
+    }
+
+    apiRef.current.publishEvent(eventName, renderParams, event);
+  }, // For now this is stupid, because renderParams change all the time.
+  // Need to move it's computation in the api, such that for a given depth+columnField, I can get the group parameters
+  [apiRef, renderParams]);
+  const mouseEventsHandlers = React.useMemo(() => ({
+    onKeyDown: publish('columnGroupHeaderKeyDown'),
+    onFocus: publish('columnGroupHeaderFocus'),
+    onBlur: publish('columnGroupHeaderBlur')
+  }), [publish]);
   const headerClassName = typeof group.headerClassName === 'function' ? group.headerClassName(renderParams) : group.headerClassName;
-  return /*#__PURE__*/_jsx(GridGenericColumnHeaderItem, {
+  return /*#__PURE__*/_jsx(GridGenericColumnHeaderItem, _extends({
+    ref: headerCellRef,
     classes: classes,
     columnMenuOpen: false,
     colIndex: colIndex,
@@ -101,7 +128,7 @@ function GridColumnGroupHeader(props) {
     isResizing: false,
     sortDirection: null,
     hasFocus: false,
-    tabIndex: -1,
+    tabIndex: tabIndex,
     isDraggable: false,
     headerComponent: headerComponent,
     headerClassName: headerClassName,
@@ -116,7 +143,7 @@ function GridColumnGroupHeader(props) {
     ,
     "data-fields": `|-${fields.join('-|-')}-|`,
     disableHeaderSeparator: true
-  });
+  }, mouseEventsHandlers));
 }
 
 export { GridColumnGroupHeader };

package/components/columnSelection/GridHeaderCheckbox.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridTabIndexColumnHeaderSelector } from '../../hooks/features/focus/gridFocusStateSelector';
-import { gridSelectionStateSelector } from '../../hooks/features/selection/gridSelectionSelector';
+import { gridRowSelectionStateSelector } from '../../hooks/features/rowSelection/gridRowSelectionSelector';
 import { isNavigationKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
@@ -38,7 +38,7 @@ const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderChec
   };
   const classes = useUtilityClasses(ownerState);
   const tabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
-  const selection = useGridSelector(apiRef, gridSelectionStateSelector);
+  const selection = useGridSelector(apiRef, gridRowSelectionStateSelector);
   const visibleRowIds = useGridSelector(apiRef, gridVisibleSortedRowIdsSelector);
   const paginatedVisibleRowIds = useGridSelector(apiRef, gridPaginatedVisibleSortedGridRowIdsSelector);
   const filteredSelection = React.useMemo(() => {
@@ -102,7 +102,7 @@ const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderChec
     forceUpdate(p => !p);
   }, []);
   React.useEffect(() => {
-    return apiRef.current.subscribeEvent('selectionChange', handleSelectionChange);
+    return apiRef.current.subscribeEvent('rowSelectionChange', handleSelectionChange);
   }, [apiRef, handleSelectionChange]);
   const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
   return /*#__PURE__*/_jsx(rootProps.components.BaseCheckbox, _extends({

package/components/containers/GridRoot.js

@@ -12,7 +12,8 @@ import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { gridDensityHeaderGroupingMaxDepthSelector, gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
+import { gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
+import { gridColumnGroupsHeaderMaxDepthSelector } from '../../hooks/features/columnGrouping/gridColumnGroupsSelector';
 import { gridPinnedRowsCountSelector, gridRowCountSelector } from '../../hooks/features/rows/gridRowsSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -41,7 +42,7 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   const densityValue = useGridSelector(apiRef, gridDensityValueSelector);
-  const headerGroupingMaxDepth = useGridSelector(apiRef, gridDensityHeaderGroupingMaxDepthSelector);
+  const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
   const rootContainerRef = React.useRef(null);
   const handleRef = useForkRef(rootContainerRef, ref);
   const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
@@ -73,7 +74,7 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
     role: "grid",
     "aria-colcount": visibleColumns.length,
     "aria-rowcount": headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,
-    "aria-multiselectable": !rootProps.disableMultipleSelection,
+    "aria-multiselectable": !rootProps.disableMultipleRowSelection,
     "aria-label": rootProps['aria-label'],
     "aria-labelledby": rootProps['aria-labelledby']
   }, other, {

package/components/panel/GridColumnsPanel.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { GridPanelWrapperProps } from './GridPanelWrapper';
+import { GridStateColDef } from '../../models/colDef/gridColDef';
 export interface GridColumnsPanelProps extends GridPanelWrapperProps {
     sort?: 'asc' | 'desc';
+    searchPredicate?: (column: GridStateColDef, searchValue: string) => boolean;
 }
 declare function GridColumnsPanel(props: GridColumnsPanelProps): JSX.Element;
 declare namespace GridColumnsPanel {

package/components/panel/GridColumnsPanel.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["sort"];
+const _excluded = ["sort", "searchPredicate"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -59,6 +59,10 @@ const GridIconButtonRoot = styled(IconButton)({
 });
 const collator = new Intl.Collator();
 
+const defaultSearchPredicate = (column, searchValue) => {
+  return (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1;
+};
+
 function GridColumnsPanel(props) {
   var _rootProps$components, _rootProps$components3, _rootProps$components4;
 
@@ -74,7 +78,8 @@ function GridColumnsPanel(props) {
   const classes = useUtilityClasses(ownerState);
 
   const {
-    sort
+    sort,
+    searchPredicate = defaultSearchPredicate
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -114,8 +119,8 @@ function GridColumnsPanel(props) {
     }
 
     const searchValueToCheck = searchValue.toLowerCase();
-    return sortedColumns.filter(column => (column.headerName || column.field).toLowerCase().indexOf(searchValueToCheck) > -1);
-  }, [sortedColumns, searchValue]);
+    return sortedColumns.filter(column => searchPredicate(column, searchValueToCheck));
+  }, [sortedColumns, searchValue, searchPredicate]);
   React.useEffect(() => {
     searchInputRef.current.focus();
   }, []);
@@ -177,6 +182,7 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  searchPredicate: PropTypes.func,
   sort: PropTypes.oneOf(['asc', 'desc'])
 } : void 0;
 export { GridColumnsPanel };

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

@@ -1,5 +1,11 @@
 import * as React from 'react';
 import { GridFilterItem, GridLinkOperator } from '../../../models/gridFilterItem';
+import { GridColDef, GridStateColDef } from '../../../models/colDef/gridColDef';
+export interface FilterColumnsArgs {
+    field: GridColDef['field'];
+    columns: GridStateColDef[];
+    currentFilters: GridFilterItem[];
+}
 export interface GridFilterFormProps {
     /**
      * The [[GridFilterItem]] representing this form.
@@ -42,6 +48,12 @@ export interface GridFilterFormProps {
      * @param {GridFilterItem} item The deleted [[GridFilterItem]].
      */
     deleteFilter: (item: GridFilterItem) => void;
+    /**
+     * Allows to filter the columns displayed in the filter form.
+     * @param {FilterColumnsArgs} args The columns of the grid and name of field.
+     * @returns {GridColDef['field'][]} The filtered fields array.
+     */
+    filterColumns?: (args: FilterColumnsArgs) => GridColDef['field'][];
     /**
      * Sets the available logic operators.
      * @default [GridLinkOperator.And, GridLinkOperator.Or]