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

package/modern/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/modern/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";
 
@@ -46,7 +45,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     field,
     colDef,
     hasFocus,
-    debounceMs = rootProps.experimentalFeatures?.newEditingApi ? 200 : SUBMIT_FILTER_STROKE_TIME,
+    debounceMs = 200,
     isProcessingProps,
     onValueChange
   } = props,
@@ -69,7 +68,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     const column = apiRef.current.getColumn(field);
     let parsedValue = newValue;
 
-    if (column.valueParser && rootProps.experimentalFeatures?.newEditingApi) {
+    if (column.valueParser) {
       parsedValue = column.valueParser(newValue, apiRef.current.getCellParams(id, field));
     }
 
@@ -81,7 +80,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       debounceMs,
       unstable_skipValueParser: true
     }, event);
-  }, [apiRef, debounceMs, field, id, onValueChange, rootProps.experimentalFeatures?.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/modern/components/cell/GridEditSingleSelectCell.js

@@ -90,35 +90,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.experimentalFeatures?.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) => {
@@ -128,15 +104,11 @@ function GridEditSingleSelectCell(props) {
     }
 
     if (reason === 'backdropClick' || isEscapeKey(event.key)) {
-      if (rootProps.experimentalFeatures?.newEditingApi) {
-        apiRef.current.stopCellEditMode({
-          id,
-          field,
-          ignoreModifications: true
-        });
-      } else {
-        apiRef.current.setCellMode(id, field, 'view');
-      }
+      apiRef.current.stopCellEditMode({
+        id,
+        field,
+        ignoreModifications: true
+      });
     }
   };
 

package/modern/components/columnHeaders/GridColumnGroupHeader.js

@@ -37,10 +37,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 {
@@ -58,7 +61,7 @@ function GridColumnGroupHeader(props) {
   } = group;
   let headerComponent;
   const render = groupId && columnGroupsLookup[groupId]?.renderHeaderGroup;
-  const renderParams = {
+  const renderParams = React.useMemo(() => ({
     groupId,
     headerName,
     description,
@@ -67,7 +70,7 @@ function GridColumnGroupHeader(props) {
     fields,
     colIndex,
     isLastColumn
-  };
+  }), [groupId, headerName, description, depth, maxDepth, fields, colIndex, isLastColumn]);
 
   if (groupId && render) {
     headerComponent = render(renderParams);
@@ -90,8 +93,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?.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,
@@ -99,7 +126,7 @@ function GridColumnGroupHeader(props) {
     isResizing: false,
     sortDirection: null,
     hasFocus: false,
-    tabIndex: -1,
+    tabIndex: tabIndex,
     isDraggable: false,
     headerComponent: headerComponent,
     headerClassName: headerClassName,
@@ -114,7 +141,7 @@ function GridColumnGroupHeader(props) {
     ,
     "data-fields": `|-${fields.join('-|-')}-|`,
     disableHeaderSeparator: true
-  });
+  }, mouseEventsHandlers));
 }
 
 export { GridColumnGroupHeader };

package/modern/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';
@@ -36,7 +36,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(() => {
@@ -100,7 +100,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/modern/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/modern/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) {
   const apiRef = useGridApiContext();
   const searchInputRef = React.useRef(null);
@@ -72,7 +76,8 @@ function GridColumnsPanel(props) {
   const classes = useUtilityClasses(ownerState);
 
   const {
-    sort
+    sort,
+    searchPredicate = defaultSearchPredicate
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -112,8 +117,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();
   }, []);
@@ -171,6 +176,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/modern/components/panel/filterPanel/GridFilterForm.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"],
+const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "filterColumns", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"],
       _excluded2 = ["InputComponentProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -13,6 +13,7 @@ import { capitalize, unstable_useId as useId } from '@mui/material/utils';
 import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
 import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
+import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilterSelector';
 import { useGridSelector } from '../../../hooks/utils/useGridSelector';
 import { GridLinkOperator } from '../../../models/gridFilterItem';
 import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
@@ -118,6 +119,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     focusElementRef,
     linkOperators = [GridLinkOperator.And, GridLinkOperator.Or],
     columnsSort,
+    filterColumns,
     deleteIconProps = {},
     linkOperatorInputProps = {},
     operatorInputProps = {},
@@ -128,6 +130,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
 
   const apiRef = useGridApiContext();
   const filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
+  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
   const columnSelectId = useId();
   const columnSelectLabelId = useId();
   const operatorSelectId = useId();
@@ -150,18 +153,30 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   } = valueInputProps,
         valueInputPropsOther = _objectWithoutPropertiesLoose(valueInputProps, _excluded2);
 
-  const sortedFilterableColumns = React.useMemo(() => {
+  const filteredColumns = React.useMemo(() => {
+    if (filterColumns === undefined || typeof filterColumns !== 'function') {
+      return filterableColumns;
+    }
+
+    const filteredFields = filterColumns({
+      field: item.columnField,
+      columns: filterableColumns,
+      currentFilters: filterModel?.items || []
+    });
+    return filterableColumns.filter(column => filteredFields.includes(column.field));
+  }, [filterColumns, filterModel?.items, filterableColumns, item.columnField]);
+  const sortedFilteredColumns = React.useMemo(() => {
     switch (columnsSort) {
       case 'asc':
-        return filterableColumns.sort((a, b) => collator.compare(getColumnLabel(a), getColumnLabel(b)));
+        return filteredColumns.sort((a, b) => collator.compare(getColumnLabel(a), getColumnLabel(b)));
 
       case 'desc':
-        return filterableColumns.sort((a, b) => -collator.compare(getColumnLabel(a), getColumnLabel(b)));
+        return filteredColumns.sort((a, b) => -collator.compare(getColumnLabel(a), getColumnLabel(b)));
 
       default:
-        return filterableColumns;
+        return filteredColumns;
     }
-  }, [filterableColumns, columnsSort]);
+  }, [filteredColumns, columnsSort]);
   const currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   const currentOperator = React.useMemo(() => {
     if (!item.operatorValue || !currentColumn) {
@@ -286,7 +301,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         onChange: changeColumn,
         native: isBaseSelectNative
       }, rootProps.componentsProps?.baseSelect, {
-        children: sortedFilterableColumns.map(col => /*#__PURE__*/_jsx(OptionComponent, {
+        children: sortedFilteredColumns.map(col => /*#__PURE__*/_jsx(OptionComponent, {
           value: col.field,
           children: getColumnLabel(col)
         }, col.field))
@@ -380,6 +395,13 @@ process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
    */
   disableMultiFilterOperator: PropTypes.bool,
 
+  /**
+   * 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: PropTypes.func,
+
   /**
    * A ref allowing to set imperative focus.
    * It can be passed to the el

package/modern/components/panel/filterPanel/GridFilterPanel.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["linkOperators", "columnsSort", "filterFormProps", "children"];
+const _excluded = ["linkOperators", "columnsSort", "filterFormProps", "getColumnForNewFilter", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridLinkOperator } from '../../../models/gridFilterItem';
@@ -16,6 +16,13 @@ import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilt
 import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const getGridFilter = col => ({
+  columnField: col.field,
+  operatorValue: col.filterOperators[0].value,
+  id: Math.round(Math.random() * 1e5)
+});
+
 const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
@@ -26,7 +33,8 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
   const {
     linkOperators = [GridLinkOperator.And, GridLinkOperator.Or],
     columnsSort,
-    filterFormProps
+    filterFormProps,
+    getColumnForNewFilter
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -36,37 +44,67 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
   const applyFilterLinkOperator = React.useCallback(operator => {
     apiRef.current.setFilterLinkOperator(operator);
   }, [apiRef]);
-  const getDefaultItem = React.useCallback(() => {
-    const firstColumnWithOperator = filterableColumns.find(colDef => colDef.filterOperators?.length);
+  const getDefaultFilter = React.useCallback(() => {
+    let nextColumnWithOperator;
+
+    if (getColumnForNewFilter && typeof getColumnForNewFilter === 'function') {
+      // To allow override the column for default (first) filter
+      const nextColumnFieldName = getColumnForNewFilter({
+        currentFilters: filterModel?.items || [],
+        columns: filterableColumns
+      });
+      nextColumnWithOperator = filterableColumns.find(({
+        field
+      }) => field === nextColumnFieldName);
+    } else {
+      nextColumnWithOperator = filterableColumns.find(colDef => colDef.filterOperators?.length);
+    }
 
-    if (!firstColumnWithOperator) {
+    if (!nextColumnWithOperator) {
       return null;
     }
 
-    return {
-      columnField: firstColumnWithOperator.field,
-      operatorValue: firstColumnWithOperator.filterOperators[0].value,
-      id: Math.round(Math.random() * 1e5)
-    };
-  }, [filterableColumns]);
+    return getGridFilter(nextColumnWithOperator);
+  }, [filterModel?.items, filterableColumns, getColumnForNewFilter]);
+  const getNewFilter = React.useCallback(() => {
+    if (getColumnForNewFilter === undefined || typeof getColumnForNewFilter !== 'function') {
+      return getDefaultFilter();
+    }
+
+    const currentFilters = filterModel.items.length ? filterModel.items : [getDefaultFilter()].filter(Boolean); // If no items are there in filterModel, we have to pass defaultFilter
+
+    const nextColumnFieldName = getColumnForNewFilter({
+      currentFilters: currentFilters,
+      columns: filterableColumns
+    });
+    const nextColumnWithOperator = filterableColumns.find(({
+      field
+    }) => field === nextColumnFieldName);
+
+    if (!nextColumnWithOperator) {
+      return null;
+    }
+
+    return getGridFilter(nextColumnWithOperator);
+  }, [filterModel.items, filterableColumns, getColumnForNewFilter, getDefaultFilter]);
   const items = React.useMemo(() => {
     if (filterModel.items.length) {
       return filterModel.items;
     }
 
-    const defaultItem = getDefaultItem();
-    return defaultItem ? [defaultItem] : [];
-  }, [filterModel.items, getDefaultItem]);
+    const defaultFilter = getDefaultFilter();
+    return defaultFilter ? [defaultFilter] : [];
+  }, [filterModel.items, getDefaultFilter]);
   const hasMultipleFilters = items.length > 1;
 
   const addNewFilter = () => {
-    const defaultItem = getDefaultItem();
+    const newFilter = getNewFilter();
 
-    if (!defaultItem) {
+    if (!newFilter) {
       return;
     }
 
-    apiRef.current.upsertFilterItems([...items, defaultItem]);
+    apiRef.current.upsertFilterItems([...items, newFilter]);
   };
 
   const deleteFilter = React.useCallback(item => {
@@ -143,6 +181,13 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
     valueInputProps: PropTypes.any
   }),
 
+  /**
+   * Function that returns the next filter item to be picked as default filter.
+   * @param {GetColumnForNewFilterArgs} args Currently configured filters and columns.
+   * @returns {GridColDef['field']} The field to be used for the next filter.
+   */
+  getColumnForNewFilter: PropTypes.func,
+
   /**
    * Sets the available logic operators.
    * @default [GridLinkOperator.And, GridLinkOperator.Or]

package/modern/hooks/features/columnGrouping/gridColumnGroupsSelector.js

@@ -5,4 +5,17 @@ import { createSelector } from '../../../utils/createSelector';
  * @ignore - do not document.
  */
 export const gridColumnGroupingSelector = state => state.columnGrouping;
-export const gridColumnGroupsLookupSelector = createSelector(gridColumnGroupingSelector, columnGrouping => columnGrouping.lookup);
+export const gridColumnGroupsUnwrappedModelSelector = createSelector(gridColumnGroupingSelector, columnGrouping => columnGrouping?.unwrappedGroupingModel ?? {});
+export const gridColumnGroupsLookupSelector = createSelector(gridColumnGroupingSelector, columnGrouping => columnGrouping?.lookup ?? {});
+export const gridColumnGroupsHeaderStructureSelector = createSelector(gridColumnGroupingSelector, columnGrouping => columnGrouping?.headerStructure ?? []);
+export const gridColumnGroupsHeaderMaxDepthSelector = createSelector(gridColumnGroupingSelector, columnGrouping => columnGrouping?.maxDepth ?? 0);
+
+const getGroupingHeader = state => ({
+  columnGrouping: state.columnGrouping,
+  density: state.density
+});
+
+export const gridTotalHeaderHeightSelector = createSelector(getGroupingHeader, ({
+  columnGrouping,
+  density
+}) => density.headerHeight * ((columnGrouping?.maxDepth ?? 0) + 1));

package/modern/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -0,0 +1,83 @@
+import { isLeaf } from '../../../models/gridColumnGrouping';
+import { isDeepEqual } from '../../../utils/utils';
+
+// This is the recurrence function that help writing `unwrapGroupingColumnModel()`
+const recurrentUnwrapGroupingColumnModel = (columnGroupNode, parents, unwrappedGroupingModelToComplet) => {
+  if (isLeaf(columnGroupNode)) {
+    if (unwrappedGroupingModelToComplet[columnGroupNode.field] !== undefined) {
+      throw new Error([`MUI: columnGroupingModel contains duplicated field`, `column field ${columnGroupNode.field} occurrs two times in the grouping model:`, `- ${unwrappedGroupingModelToComplet[columnGroupNode.field].join(' > ')}`, `- ${parents.join(' > ')}`].join('\n'));
+    }
+
+    unwrappedGroupingModelToComplet[columnGroupNode.field] = parents;
+    return;
+  }
+
+  const {
+    groupId,
+    children
+  } = columnGroupNode;
+  children.forEach(child => {
+    recurrentUnwrapGroupingColumnModel(child, [...parents, groupId], unwrappedGroupingModelToComplet);
+  });
+};
+/**
+ * This is a function that provide for each column the array of its parents.
+ * Parents are ordered from the root to the leaf.
+ * @param columnGroupingModel The model such as provided in DataGrid props
+ * @returns An object `{[field]: groupIds}` where `groupIds` is the parents of the column `field`
+ */
+
+
+export const unwrapGroupingColumnModel = columnGroupingModel => {
+  if (!columnGroupingModel) {
+    return {};
+  }
+
+  const unwrappedSubTree = {};
+  columnGroupingModel.forEach(columnGroupNode => {
+    recurrentUnwrapGroupingColumnModel(columnGroupNode, [], unwrappedSubTree);
+  });
+  return unwrappedSubTree;
+};
+export const getColumnGroupsHeaderStructure = (orderedColumns, unwrappedGroupingModel) => {
+  const getParents = field => unwrappedGroupingModel[field] ?? [];
+
+  const groupingHeaderStructure = [];
+  const maxDepth = Math.max(...orderedColumns.map(field => getParents(field).length));
+
+  const haveSameParents = (field1, field2, depth) => isDeepEqual(getParents(field1).slice(0, depth + 1), getParents(field2).slice(0, depth + 1));
+
+  for (let depth = 0; depth < maxDepth; depth += 1) {
+    const depthStructure = orderedColumns.reduce((structure, newField) => {
+      const groupId = getParents(newField)[depth] ?? null;
+
+      if (structure.length === 0) {
+        return [{
+          columnFields: [newField],
+          groupId
+        }];
+      }
+
+      const lastGroup = structure[structure.length - 1];
+      const prevField = lastGroup.columnFields[lastGroup.columnFields.length - 1];
+      const prevGroupId = lastGroup.groupId;
+
+      if (prevGroupId !== groupId || !haveSameParents(prevField, newField, depth)) {
+        // It's a new group
+        return [...structure, {
+          columnFields: [newField],
+          groupId
+        }];
+      } // It extends the previous group
+
+
+      return [...structure.slice(0, structure.length - 1), {
+        columnFields: [...lastGroup.columnFields, newField],
+        groupId
+      }];
+    }, []);
+    groupingHeaderStructure.push(depthStructure);
+  }
+
+  return groupingHeaderStructure;
+};