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

package/legacy/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 var useDataGridComponent = function useDataGridComponent(props) {
-  var _props$experimentalFe, _props$experimentalFe2;
-
   var 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 var useDataGridComponent = function 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);
-  var useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
   useGridPreferencesPanel(apiRef, props);

package/legacy/DataGrid/useDataGridProps.js

@@ -8,7 +8,7 @@ var DATA_GRID_FORCED_PROPS = {
   apiRef: undefined,
   disableMultipleColumnsFiltering: true,
   disableMultipleColumnsSorting: true,
-  disableMultipleSelection: true,
+  disableMultipleRowSelection: true,
   throttleRowsMs: undefined,
   hideFooterRowCount: false,
   pagination: true,
@@ -38,9 +38,9 @@ export var 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/legacy/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 var GRID_CHECKBOX_SELECTION_FIELD = '__check__';

package/legacy/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/legacy/components/GridRow.js

@@ -21,7 +21,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 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   var columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   var sortModel = useGridSelector(apiRef, gridSortModelSelector);
   var treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
-  var headerGroupingMaxDepth = useGridSelector(apiRef, gridDensityHeaderGroupingMaxDepthSelector);
+  var headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
   var handleRef = useForkRef(ref, refProp);
   var ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 

package/legacy/components/base/GridBody.js

@@ -6,7 +6,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";
 
@@ -16,7 +16,7 @@ function GridBody(props) {
       ColumnHeadersComponent = props.ColumnHeadersComponent;
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
-  var totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
+  var totalHeaderHeight = useGridSelector(apiRef, gridTotalHeaderHeightSelector);
 
   var _React$useState = React.useState(rootProps.disableVirtualization),
       _React$useState2 = _slicedToArray(_React$useState, 2),

package/legacy/components/cell/GridEditInputCell.js

@@ -13,7 +13,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";
 
@@ -42,8 +41,6 @@ var GridEditInputCellRoot = styled(InputBase, {
   });
 });
 var GridEditInputCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _rootProps$experiment, _rootProps$experiment3;
-
   var rootProps = useGridRootProps();
 
   var id = props.id,
@@ -61,7 +58,7 @@ var GridEditInputCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
       getValue = props.getValue,
       isValidating = props.isValidating,
       _props$debounceMs = props.debounceMs,
-      debounceMs = _props$debounceMs === void 0 ? (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi ? 200 : SUBMIT_FILTER_STROKE_TIME : _props$debounceMs,
+      debounceMs = _props$debounceMs === void 0 ? 200 : _props$debounceMs,
       isProcessingProps = props.isProcessingProps,
       onValueChange = props.onValueChange,
       other = _objectWithoutProperties(props, _excluded);
@@ -80,8 +77,6 @@ var GridEditInputCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var classes = useUtilityClasses(ownerState);
   var handleChange = React.useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
-      var _rootProps$experiment2;
-
       var newValue, column, parsedValue;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -101,7 +96,7 @@ var GridEditInputCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
               column = apiRef.current.getColumn(field);
               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));
               }
 
@@ -125,7 +120,7 @@ var GridEditInputCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return function (_x) {
       return _ref2.apply(this, arguments);
     };
-  }(), [apiRef, debounceMs, field, id, onValueChange, (_rootProps$experiment3 = rootProps.experimentalFeatures) == null ? void 0 : _rootProps$experiment3.newEditingApi]);
+  }(), [apiRef, debounceMs, field, id, onValueChange]);
   var meta = apiRef.current.unstable_getEditCellMeta ? apiRef.current.unstable_getEditCellMeta(id, field) : {};
   React.useEffect(function () {
     if (meta.changeReason !== 'debouncedSetEditCellValue') {

package/legacy/components/cell/GridEditSingleSelectCell.js

@@ -101,9 +101,7 @@ function GridEditSingleSelectCell(props) {
 
   var handleChange = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
-      var _rootProps$experiment;
-
-      var target, formattedTargetValue, isValid, canCommit, params;
+      var target, formattedTargetValue;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
@@ -130,44 +128,6 @@ function GridEditSingleSelectCell(props) {
               }, event);
 
             case 8:
-              isValid = _context.sent;
-
-              if (!((_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi)) {
-                _context.next = 11;
-                break;
-              }
-
-              return _context.abrupt("return");
-
-            case 11:
-              if (!(rootProps.editMode === GridEditModes.Row || isValid === false)) {
-                _context.next = 13;
-                break;
-              }
-
-              return _context.abrupt("return");
-
-            case 13:
-              _context.next = 15;
-              return Promise.resolve(apiRef.current.commitCellChange({
-                id: id,
-                field: field
-              }, event));
-
-            case 15:
-              canCommit = _context.sent;
-
-              if (canCommit) {
-                apiRef.current.setCellMode(id, field, 'view');
-
-                if (event.key) {
-                  // TODO v6: remove once we stop ignoring events fired from portals
-                  params = apiRef.current.getCellParams(id, field);
-                  apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
-                }
-              }
-
-            case 17:
             case "end":
               return _context.stop();
           }
@@ -187,17 +147,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: id,
-          field: field,
-          ignoreModifications: true
-        });
-      } else {
-        apiRef.current.setCellMode(id, field, 'view');
-      }
+      apiRef.current.stopCellEditMode({
+        id: id,
+        field: field,
+        ignoreModifications: true
+      });
     }
   };
 

package/legacy/components/columnHeaders/GridColumnGroupHeader.js

@@ -36,9 +36,12 @@ function GridColumnGroupHeader(props) {
       fields = props.fields,
       height = props.height,
       colIndex = props.colIndex,
+      hasFocus = props.hasFocus,
+      tabIndex = props.tabIndex,
       isLastColumn = props.isLastColumn,
       extendRowFullWidth = props.extendRowFullWidth;
   var rootProps = useGridRootProps();
+  var headerCellRef = React.useRef(null);
   var apiRef = useGridApiContext();
   var columnGroupsLookup = useGridSelector(apiRef, gridColumnGroupsLookupSelector);
 
@@ -58,16 +61,18 @@ function GridColumnGroupHeader(props) {
       headerAlign = _group$headerAlign === void 0 ? undefined : _group$headerAlign;
   var headerComponent;
   var render = groupId && ((_columnGroupsLookup$g = columnGroupsLookup[groupId]) == null ? void 0 : _columnGroupsLookup$g.renderHeaderGroup);
-  var renderParams = {
-    groupId: groupId,
-    headerName: headerName,
-    description: description,
-    depth: depth,
-    maxDepth: maxDepth,
-    fields: fields,
-    colIndex: colIndex,
-    isLastColumn: isLastColumn
-  };
+  var renderParams = React.useMemo(function () {
+    return {
+      groupId: groupId,
+      headerName: headerName,
+      description: description,
+      depth: depth,
+      maxDepth: maxDepth,
+      fields: fields,
+      colIndex: colIndex,
+      isLastColumn: isLastColumn
+    };
+  }, [groupId, headerName, description, depth, maxDepth, fields, colIndex, isLastColumn]);
 
   if (groupId && render) {
     headerComponent = render(renderParams);
@@ -90,8 +95,36 @@ function GridColumnGroupHeader(props) {
   var id = useId();
   var elementId = groupId === null ? "empty-group-cell-".concat(id) : groupId;
   var classes = useUtilityClasses(ownerState);
+  React.useLayoutEffect(function () {
+    if (hasFocus) {
+      var focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
+      var elementToFocus = focusableElement || headerCellRef.current;
+      elementToFocus == null ? void 0 : elementToFocus.focus();
+    }
+  }, [apiRef, hasFocus]);
+  var publish = React.useCallback(function (eventName) {
+    return function (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]);
+  var mouseEventsHandlers = React.useMemo(function () {
+    return {
+      onKeyDown: publish('columnGroupHeaderKeyDown'),
+      onFocus: publish('columnGroupHeaderFocus'),
+      onBlur: publish('columnGroupHeaderBlur')
+    };
+  }, [publish]);
   var 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 +132,7 @@ function GridColumnGroupHeader(props) {
     isResizing: false,
     sortDirection: null,
     hasFocus: false,
-    tabIndex: -1,
+    tabIndex: tabIndex,
     isDraggable: false,
     headerComponent: headerComponent,
     headerClassName: headerClassName,
@@ -114,7 +147,7 @@ function GridColumnGroupHeader(props) {
     ,
     "data-fields": "|-".concat(fields.join('-|-'), "-|"),
     disableHeaderSeparator: true
-  });
+  }, mouseEventsHandlers));
 }
 
 export { GridColumnGroupHeader };

package/legacy/components/columnSelection/GridHeaderCheckbox.js

@@ -7,7 +7,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';
@@ -42,7 +42,7 @@ var GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderCheckb
   };
   var classes = useUtilityClasses(ownerState);
   var tabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
-  var selection = useGridSelector(apiRef, gridSelectionStateSelector);
+  var selection = useGridSelector(apiRef, gridRowSelectionStateSelector);
   var visibleRowIds = useGridSelector(apiRef, gridVisibleSortedRowIdsSelector);
   var paginatedVisibleRowIds = useGridSelector(apiRef, gridPaginatedVisibleSortedGridRowIdsSelector);
   var filteredSelection = React.useMemo(function () {
@@ -112,7 +112,7 @@ var GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderCheckb
     });
   }, []);
   React.useEffect(function () {
-    return apiRef.current.subscribeEvent('selectionChange', handleSelectionChange);
+    return apiRef.current.subscribeEvent('rowSelectionChange', handleSelectionChange);
   }, [apiRef, handleSelectionChange]);
   var label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
   return /*#__PURE__*/_jsx(rootProps.components.BaseCheckbox, _extends({

package/legacy/components/containers/GridRoot.js

@@ -13,7 +13,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";
 
@@ -38,7 +39,7 @@ var GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   var totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   var densityValue = useGridSelector(apiRef, gridDensityValueSelector);
-  var headerGroupingMaxDepth = useGridSelector(apiRef, gridDensityHeaderGroupingMaxDepthSelector);
+  var headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
   var rootContainerRef = React.useRef(null);
   var handleRef = useForkRef(rootContainerRef, ref);
   var pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
@@ -74,7 +75,7 @@ var 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/legacy/components/panel/GridColumnsPanel.js

@@ -3,7 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["sort"];
+var _excluded = ["sort", "searchPredicate"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -66,6 +66,10 @@ var GridIconButtonRoot = styled(IconButton)({
 });
 var collator = new Intl.Collator();
 
+var defaultSearchPredicate = function defaultSearchPredicate(column, searchValue) {
+  return (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1;
+};
+
 function GridColumnsPanel(props) {
   var _rootProps$components, _rootProps$components3, _rootProps$components4;
 
@@ -86,6 +90,8 @@ function GridColumnsPanel(props) {
   var classes = useUtilityClasses(ownerState);
 
   var sort = props.sort,
+      _props$searchPredicat = props.searchPredicate,
+      searchPredicate = _props$searchPredicat === void 0 ? defaultSearchPredicate : _props$searchPredicat,
       other = _objectWithoutProperties(props, _excluded);
 
   var sortedColumns = React.useMemo(function () {
@@ -132,9 +138,9 @@ function GridColumnsPanel(props) {
 
     var searchValueToCheck = searchValue.toLowerCase();
     return sortedColumns.filter(function (column) {
-      return (column.headerName || column.field).toLowerCase().indexOf(searchValueToCheck) > -1;
+      return searchPredicate(column, searchValueToCheck);
     });
-  }, [sortedColumns, searchValue]);
+  }, [sortedColumns, searchValue, searchPredicate]);
   React.useEffect(function () {
     searchInputRef.current.focus();
   }, []);
@@ -200,6 +206,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/legacy/components/panel/filterPanel/GridFilterForm.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"],
+var _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';
@@ -134,6 +135,7 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
       _props$linkOperators = props.linkOperators,
       linkOperators = _props$linkOperators === void 0 ? [GridLinkOperator.And, GridLinkOperator.Or] : _props$linkOperators,
       columnsSort = props.columnsSort,
+      filterColumns = props.filterColumns,
       _props$deleteIconProp = props.deleteIconProps,
       deleteIconProps = _props$deleteIconProp === void 0 ? {} : _props$deleteIconProp,
       _props$linkOperatorIn = props.linkOperatorInputProps,
@@ -149,6 +151,7 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
 
   var apiRef = useGridApiContext();
   var filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
+  var filterModel = useGridSelector(apiRef, gridFilterModelSelector);
   var columnSelectId = useId();
   var columnSelectLabelId = useId();
   var operatorSelectId = useId();
@@ -169,22 +172,36 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
   var InputComponentProps = valueInputProps.InputComponentProps,
       valueInputPropsOther = _objectWithoutProperties(valueInputProps, _excluded2);
 
-  var sortedFilterableColumns = React.useMemo(function () {
+  var filteredColumns = React.useMemo(function () {
+    if (filterColumns === undefined || typeof filterColumns !== 'function') {
+      return filterableColumns;
+    }
+
+    var filteredFields = filterColumns({
+      field: item.columnField,
+      columns: filterableColumns,
+      currentFilters: (filterModel == null ? void 0 : filterModel.items) || []
+    });
+    return filterableColumns.filter(function (column) {
+      return filteredFields.includes(column.field);
+    });
+  }, [filterColumns, filterModel == null ? void 0 : filterModel.items, filterableColumns, item.columnField]);
+  var sortedFilteredColumns = React.useMemo(function () {
     switch (columnsSort) {
       case 'asc':
-        return filterableColumns.sort(function (a, b) {
+        return filteredColumns.sort(function (a, b) {
           return collator.compare(getColumnLabel(a), getColumnLabel(b));
         });
 
       case 'desc':
-        return filterableColumns.sort(function (a, b) {
+        return filteredColumns.sort(function (a, b) {
           return -collator.compare(getColumnLabel(a), getColumnLabel(b));
         });
 
       default:
-        return filterableColumns;
+        return filteredColumns;
     }
-  }, [filterableColumns, columnsSort]);
+  }, [filteredColumns, columnsSort]);
   var currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   var currentOperator = React.useMemo(function () {
     var _currentColumn$filter;
@@ -323,7 +340,7 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
         onChange: changeColumn,
         native: isBaseSelectNative
       }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseSelect, {
-        children: sortedFilterableColumns.map(function (col) {
+        children: sortedFilteredColumns.map(function (col) {
           return /*#__PURE__*/_jsx(OptionComponent, {
             value: col.field,
             children: getColumnLabel(col)
@@ -421,6 +438,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