@mui/x-data-grid 5.6.1 → 5.7.0

package/node/hooks/features/editRows/useGridRowEditing.new.js

@@ -0,0 +1,499 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridRowEditing = void 0;
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+
+var _gridEvents = require("../../../models/events/gridEvents");
+
+var _gridEditRowModel = require("../../../models/gridEditRowModel");
+
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+
+var _gridEditRowsSelector = require("./gridEditRowsSelector");
+
+var _keyboardUtils = require("../../../utils/keyboardUtils");
+
+var _gridColumnsSelector = require("../columns/gridColumnsSelector");
+
+var _gridRowParams = require("../../../models/params/gridRowParams");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const useGridRowEditing = (apiRef, props) => {
+  const focusTimeout = React.useRef(null);
+  const nextFocusedCell = React.useRef(null);
+  const {
+    processRowUpdate
+  } = props;
+
+  const runIfEditModeIsRow = callback => (...args) => {
+    if (props.editMode === _gridEditRowModel.GridEditModes.Row) {
+      callback(...args);
+    }
+  };
+
+  const throwIfNotEditable = React.useCallback((id, field) => {
+    const params = apiRef.current.getCellParams(id, field);
+
+    if (!apiRef.current.isCellEditable(params)) {
+      throw new Error(`MUI: The cell with id=${id} and field=${field} is not editable.`);
+    }
+  }, [apiRef]);
+  const throwIfNotInMode = React.useCallback((id, mode) => {
+    if (apiRef.current.getRowMode(id) !== mode) {
+      throw new Error(`MUI: The row with id=${id} is not in ${mode} mode.`);
+    }
+  }, [apiRef]);
+  const handleCellDoubleClick = React.useCallback((params, event) => {
+    if (!params.isEditable) {
+      return;
+    }
+
+    if (apiRef.current.getRowMode(params.id) === _gridEditRowModel.GridRowModes.Edit) {
+      return;
+    }
+
+    const rowParams = apiRef.current.getRowParams(params.id);
+    const newParams = (0, _extends2.default)({}, rowParams, {
+      field: params.field,
+      reason: _gridRowParams.GridRowEditStartReasons.cellDoubleClick
+    });
+    apiRef.current.publishEvent(_gridEvents.GridEvents.rowEditStart, newParams, event);
+  }, [apiRef]);
+  const handleCellFocusIn = React.useCallback(params => {
+    nextFocusedCell.current = params;
+  }, []);
+  const handleCellFocusOut = React.useCallback((params, event) => {
+    if (!params.isEditable) {
+      return;
+    }
+
+    if (apiRef.current.getRowMode(params.id) === _gridEditRowModel.GridRowModes.View) {
+      return;
+    } // The mechanism to detect if we can stop editing a row is different from
+    // the cell editing. Instead of triggering it when clicking outside a cell,
+    // we must check if another cell in the same row was not clicked. To achieve
+    // that, first we keep track of all cells that gained focus. When a cell loses
+    // focus we check if the next cell that received focus is from a different row.
+
+
+    nextFocusedCell.current = null;
+    focusTimeout.current = setTimeout(() => {
+      var _nextFocusedCell$curr;
+
+      focusTimeout.current = null;
+
+      if (((_nextFocusedCell$curr = nextFocusedCell.current) == null ? void 0 : _nextFocusedCell$curr.id) !== params.id) {
+        const rowParams = apiRef.current.getRowParams(params.id);
+        const newParams = (0, _extends2.default)({}, rowParams, {
+          field: params.field,
+          reason: _gridRowParams.GridRowEditStopReasons.rowFocusOut
+        });
+        apiRef.current.publishEvent(_gridEvents.GridEvents.rowEditStop, newParams, event);
+      }
+    });
+  }, [apiRef]);
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(focusTimeout.current);
+    };
+  }, []);
+  const handleCellKeyDown = React.useCallback((params, event) => {
+    if (params.cellMode === _gridEditRowModel.GridRowModes.Edit) {
+      let reason;
+
+      if (event.key === 'Escape') {
+        reason = _gridRowParams.GridRowEditStopReasons.escapeKeyDown;
+      } else if (event.key === 'Enter') {
+        reason = _gridRowParams.GridRowEditStopReasons.enterKeyDown;
+      } else if (event.key === 'Tab') {
+        const columnFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef).filter(field => apiRef.current.isCellEditable(apiRef.current.getCellParams(params.id, field)));
+
+        if (event.shiftKey) {
+          if (params.field === columnFields[0]) {
+            // Exit if user pressed Shift+Tab on the first field
+            reason = _gridRowParams.GridRowEditStopReasons.shiftTabKeyDown;
+          }
+        } else if (params.field === columnFields[columnFields.length - 1]) {
+          // Exit if user pressed Tab on the last field
+          reason = _gridRowParams.GridRowEditStopReasons.tabKeyDown;
+        }
+
+        if (reason) {
+          event.preventDefault(); // Prevent going to the next element in the tab sequence
+        }
+      }
+
+      if (reason) {
+        const rowParams = apiRef.current.getRowParams(params.id);
+        const newParams = (0, _extends2.default)({}, rowParams, {
+          reason,
+          field: params.field
+        });
+        apiRef.current.publishEvent(_gridEvents.GridEvents.rowEditStop, newParams, event);
+      }
+    } else if (params.isEditable) {
+      let reason;
+
+      if ((0, _keyboardUtils.isPrintableKey)(event.key)) {
+        if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) {
+          return;
+        }
+
+        reason = _gridRowParams.GridRowEditStartReasons.printableKeyDown;
+      } else if (event.key === 'Enter') {
+        reason = _gridRowParams.GridRowEditStartReasons.enterKeyDown;
+      } else if (event.key === 'Delete') {
+        reason = _gridRowParams.GridRowEditStartReasons.deleteKeyDown;
+      }
+
+      if (reason) {
+        const rowParams = apiRef.current.getRowParams(params.id);
+        const newParams = (0, _extends2.default)({}, rowParams, {
+          field: params.field,
+          reason
+        });
+        apiRef.current.publishEvent(_gridEvents.GridEvents.rowEditStart, newParams, event);
+      }
+    }
+  }, [apiRef]);
+  const handleRowEditStart = React.useCallback((params, event) => {
+    const {
+      id,
+      field,
+      reason
+    } = params;
+    apiRef.current.startRowEditMode({
+      id,
+      fieldToFocus: field
+    });
+
+    if (reason === _gridRowParams.GridRowEditStartReasons.deleteKeyDown || reason === _gridRowParams.GridRowEditStartReasons.printableKeyDown) {
+      apiRef.current.setEditCellValue({
+        id,
+        field: field,
+        value: ''
+      }, event);
+    }
+  }, [apiRef]);
+  const handleRowEditStop = React.useCallback(params => {
+    const {
+      id,
+      reason,
+      field
+    } = params;
+    apiRef.current.unstable_runPendingEditCellValueMutation(id);
+    let cellToFocusAfter;
+
+    if (reason === _gridRowParams.GridRowEditStopReasons.enterKeyDown) {
+      cellToFocusAfter = 'below';
+    } else if (reason === _gridRowParams.GridRowEditStopReasons.tabKeyDown) {
+      cellToFocusAfter = 'right';
+    } else if (reason === _gridRowParams.GridRowEditStopReasons.shiftTabKeyDown) {
+      cellToFocusAfter = 'left';
+    }
+
+    let ignoreModifications = reason === 'escapeKeyDown';
+    const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
+
+    if (!ignoreModifications) {
+      // The user wants to stop editing the cell but we can't wait for the props to be processed.
+      // In this case, discard the modifications if any field is processing its props.
+      ignoreModifications = Object.values(editingState[id]).some(fieldProps => {
+        return fieldProps.isProcessingProps;
+      });
+    }
+
+    apiRef.current.stopRowEditMode({
+      id,
+      ignoreModifications,
+      field,
+      cellToFocusAfter
+    });
+  }, [apiRef]);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellDoubleClick, runIfEditModeIsRow(handleCellDoubleClick));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellFocusIn, runIfEditModeIsRow(handleCellFocusIn));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellFocusOut, runIfEditModeIsRow(handleCellFocusOut));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellKeyDown, runIfEditModeIsRow(handleCellKeyDown));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.rowEditStart, runIfEditModeIsRow(handleRowEditStart));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.rowEditStop, runIfEditModeIsRow(handleRowEditStop));
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _gridEvents.GridEvents.rowEditStart, props.onRowEditStart);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _gridEvents.GridEvents.rowEditStop, props.onRowEditStop);
+  const getRowMode = React.useCallback(id => {
+    if (props.editMode === _gridEditRowModel.GridEditModes.Cell) {
+      return _gridEditRowModel.GridRowModes.View;
+    }
+
+    const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
+    const isEditing = editingState[id] && Object.keys(editingState[id]).length > 0;
+    return isEditing ? _gridEditRowModel.GridRowModes.Edit : _gridEditRowModel.GridRowModes.View;
+  }, [apiRef, props.editMode]);
+  const updateOrDeleteRowState = React.useCallback((id, newProps) => {
+    apiRef.current.setState(state => {
+      const newEditingState = (0, _extends2.default)({}, state.editRows);
+
+      if (newProps !== null) {
+        newEditingState[id] = newProps;
+      } else {
+        delete newEditingState[id];
+      }
+
+      return (0, _extends2.default)({}, state, {
+        editRows: newEditingState
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  const updateOrDeleteFieldState = React.useCallback((id, field, newProps) => {
+    apiRef.current.setState(state => {
+      const newEditingState = (0, _extends2.default)({}, state.editRows);
+
+      if (newProps !== null) {
+        newEditingState[id] = (0, _extends2.default)({}, newEditingState[id], {
+          [field]: (0, _extends2.default)({}, newProps)
+        });
+      } else {
+        delete newEditingState[id][field];
+
+        if (Object.keys(newEditingState[id]).length === 0) {
+          delete newEditingState[id];
+        }
+      }
+
+      return (0, _extends2.default)({}, state, {
+        editRows: newEditingState
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  const startRowEditMode = React.useCallback(params => {
+    const {
+      id,
+      fieldToFocus
+    } = params;
+    throwIfNotInMode(id, _gridEditRowModel.GridRowModes.View);
+
+    if (apiRef.current.getRowMode(id) === _gridEditRowModel.GridRowModes.Edit) {
+      throw new Error(`MUI: The cell with id=${id} is already in edit mode.`);
+    }
+
+    const columnFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
+    const newProps = columnFields.reduce((acc, field) => {
+      const cellParams = apiRef.current.getCellParams(id, field);
+
+      if (!cellParams.isEditable) {
+        return acc;
+      }
+
+      acc[field] = {
+        value: apiRef.current.getCellValue(id, field),
+        error: false,
+        isProcessingProps: false
+      };
+      return acc;
+    }, {});
+    updateOrDeleteRowState(id, newProps);
+
+    if (fieldToFocus) {
+      apiRef.current.setCellFocus(id, fieldToFocus);
+    }
+  }, [apiRef, throwIfNotInMode, updateOrDeleteRowState]);
+  const stopRowEditMode = React.useCallback(params => {
+    const {
+      id,
+      ignoreModifications,
+      field: focusedField,
+      cellToFocusAfter = 'none'
+    } = params;
+    throwIfNotInMode(id, _gridEditRowModel.GridRowModes.Edit);
+    apiRef.current.unstable_runPendingEditCellValueMutation(id);
+
+    const updateFocusedCellIfNeeded = () => {
+      if (cellToFocusAfter !== 'none' && focusedField) {
+        apiRef.current.unstable_moveFocusToRelativeCell(id, focusedField, cellToFocusAfter);
+      }
+    };
+
+    if (ignoreModifications) {
+      updateFocusedCellIfNeeded();
+      updateOrDeleteRowState(id, null);
+      return;
+    }
+
+    const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
+    const row = apiRef.current.getRow(id);
+    const isSomeFieldProcessingProps = Object.values(editingState[id]).some(fieldProps => fieldProps.isProcessingProps);
+
+    if (isSomeFieldProcessingProps) {
+      return;
+    }
+
+    const hasSomeFieldWithError = Object.values(editingState[id]).some(fieldProps => fieldProps.error);
+
+    if (hasSomeFieldWithError) {
+      return;
+    }
+
+    let rowUpdate = (0, _extends2.default)({}, row);
+    Object.entries(editingState[id]).forEach(([field, fieldProps]) => {
+      const column = apiRef.current.getColumn(field);
+
+      if (column.valueSetter) {
+        rowUpdate = column.valueSetter({
+          value: fieldProps.value,
+          row: rowUpdate
+        });
+      } else {
+        rowUpdate[field] = fieldProps.value;
+      }
+    });
+
+    if (processRowUpdate) {
+      Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
+        apiRef.current.updateRows([finalRowUpdate]);
+        updateFocusedCellIfNeeded();
+        updateOrDeleteRowState(id, null);
+      });
+    } else {
+      apiRef.current.updateRows([rowUpdate]);
+      updateFocusedCellIfNeeded();
+      updateOrDeleteRowState(id, null);
+    }
+  }, [apiRef, processRowUpdate, throwIfNotInMode, updateOrDeleteRowState]);
+  const setRowEditingEditCellValue = React.useCallback(params => {
+    const {
+      id,
+      field,
+      value
+    } = params;
+    throwIfNotEditable(id, field);
+    const column = apiRef.current.getColumn(field);
+    const row = apiRef.current.getRow(id);
+    let parsedValue = value;
+
+    if (column.valueParser) {
+      parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
+    }
+
+    let editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
+    let newProps = (0, _extends2.default)({}, editingState[id][field], {
+      value: parsedValue
+    });
+
+    if (!column.preProcessEditCellProps) {
+      updateOrDeleteFieldState(id, field, newProps);
+    }
+
+    return new Promise(resolve => {
+      const promises = [];
+
+      if (column.preProcessEditCellProps) {
+        const hasChanged = newProps.value !== editingState[id][field].value;
+        newProps = (0, _extends2.default)({}, newProps, {
+          isProcessingProps: true
+        });
+        updateOrDeleteFieldState(id, field, newProps);
+        const _editingState$id = editingState[id],
+              otherFieldsProps = (0, _objectWithoutPropertiesLoose2.default)(_editingState$id, [field].map(_toPropertyKey2.default));
+        const promise = Promise.resolve(column.preProcessEditCellProps({
+          id,
+          row,
+          props: newProps,
+          hasChanged,
+          otherFieldsProps
+        })).then(processedProps => {
+          // Check again if the row is in edit mode because the user may have
+          // discarded the changes while the props were being processed.
+          if (apiRef.current.getRowMode(id) === _gridEditRowModel.GridRowModes.View) {
+            resolve(false);
+            return;
+          }
+
+          editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
+          processedProps = (0, _extends2.default)({}, processedProps, {
+            isProcessingProps: false
+          }); // We don't reuse the value from the props pre-processing because when the
+          // promise resolves it may be already outdated. The only exception to this rule
+          // is when there's no pre-processing.
+
+          processedProps.value = column.preProcessEditCellProps ? editingState[id][field].value : parsedValue;
+          updateOrDeleteFieldState(id, field, processedProps);
+        });
+        promises.push(promise);
+      }
+
+      Object.entries(editingState[id]).forEach(([thisField, fieldProps]) => {
+        if (thisField === field) {
+          return;
+        }
+
+        const fieldColumn = apiRef.current.getColumn(thisField);
+
+        if (!fieldColumn.preProcessEditCellProps) {
+          return;
+        }
+
+        fieldProps = (0, _extends2.default)({}, fieldProps, {
+          isProcessingProps: true
+        });
+        updateOrDeleteFieldState(id, thisField, fieldProps);
+        editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
+        const _editingState$id2 = editingState[id],
+              otherFieldsProps = (0, _objectWithoutPropertiesLoose2.default)(_editingState$id2, [thisField].map(_toPropertyKey2.default));
+        const promise = Promise.resolve(fieldColumn.preProcessEditCellProps({
+          id,
+          row,
+          props: fieldProps,
+          hasChanged: false,
+          otherFieldsProps
+        })).then(processedProps => {
+          // Check again if the row is in edit mode because the user may have
+          // discarded the changes while the props were being processed.
+          if (apiRef.current.getRowMode(id) === _gridEditRowModel.GridRowModes.View) {
+            resolve(false);
+            return;
+          }
+
+          processedProps = (0, _extends2.default)({}, processedProps, {
+            isProcessingProps: false
+          });
+          updateOrDeleteFieldState(id, thisField, processedProps);
+        });
+        promises.push(promise);
+      });
+      Promise.all(promises).then(() => {
+        if (apiRef.current.getRowMode(id) === _gridEditRowModel.GridRowModes.Edit) {
+          editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
+          resolve(!editingState[id][field].error);
+        } else {
+          resolve(false);
+        }
+      });
+    });
+  }, [apiRef, throwIfNotEditable, updateOrDeleteFieldState]);
+  const editingApi = {
+    getRowMode,
+    startRowEditMode,
+    stopRowEditMode,
+    unstable_setRowEditingEditCellValue: setRowEditingEditCellValue
+  };
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, editingApi, 'EditingApi');
+};
+
+exports.useGridRowEditing = useGridRowEditing;

package/node/hooks/features/editRows/{useGridRowEditing.js → useGridRowEditing.old.js}

@@ -38,7 +38,7 @@ const useGridRowEditing = (apiRef, props) => {
 
   const focusTimeout = React.useRef(null);
   const nextFocusedCell = React.useRef(null);
-  const columnFields = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnFieldsSelector);
+  const columns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnDefinitionsSelector);
 
   const buildCallback = callback => (...args) => {
     if (props.editMode === _gridEditRowModel.GridEditModes.Row) {
@@ -56,11 +56,11 @@ const useGridRowEditing = (apiRef, props) => {
 
       if (mode === _gridEditRowModel.GridRowModes.Edit) {
         newEditRowsState[id] = {};
-        columnFields.forEach(field => {
-          const cellParams = apiRef.current.getCellParams(id, field);
+        columns.forEach(column => {
+          const cellParams = apiRef.current.getCellParams(id, column.field);
 
           if (cellParams.isEditable) {
-            newEditRowsState[id][field] = {
+            newEditRowsState[id][column.field] = {
               value: cellParams.value
             };
           }
@@ -74,7 +74,7 @@ const useGridRowEditing = (apiRef, props) => {
       });
     });
     apiRef.current.forceUpdate();
-  }, [apiRef, columnFields]);
+  }, [apiRef, columns]);
   const getRowMode = React.useCallback(id => {
     if (props.editMode === _gridEditRowModel.GridEditModes.Cell) {
       return _gridEditRowModel.GridRowModes.View;
@@ -90,7 +90,7 @@ const useGridRowEditing = (apiRef, props) => {
       throw new Error(`MUI: You can't commit changes when the edit mode is 'cell'.`);
     }
 
-    apiRef.current.unstable_runPendingEditCellValueChangeDebounce(id);
+    apiRef.current.unstable_runPendingEditCellValueMutation(id);
     const model = apiRef.current.getEditRowsModel();
     const editRowProps = model[id];
 

package/node/hooks/features/filter/useGridFilter.js

@@ -35,10 +35,12 @@ var _rows = require("../rows");
 
 var _preProcessing = require("../../core/preProcessing");
 
-var _useGridRegisterFilteringMethod = require("./useGridRegisterFilteringMethod");
+var _strategyProcessing = require("../../core/strategyProcessing");
 
 var _gridFilterUtils = require("./gridFilterUtils");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -65,9 +67,9 @@ const filterStateInitializer = (state, props, apiRef) => {
 exports.filterStateInitializer = filterStateInitializer;
 
 const useGridFilter = (apiRef, props) => {
+  var _props$componentsProp2;
+
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridFilter');
-  const filteringMethodCollectionRef = React.useRef({});
-  const lastFilteringMethodApplied = React.useRef(null);
   apiRef.current.unstable_updateControlState({
     stateId: 'filter',
     propModel: props.filterModel,
@@ -81,17 +83,9 @@ const useGridFilter = (apiRef, props) => {
 
   const applyFilters = React.useCallback(() => {
     apiRef.current.setState(state => {
-      const rowGroupingName = (0, _rows.gridRowGroupingNameSelector)(state, apiRef.current.instanceId);
-      const filteringMethod = filteringMethodCollectionRef.current[rowGroupingName];
-
-      if (!filteringMethod) {
-        throw new Error('MUI: Invalid filtering method.');
-      }
-
       const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(state, apiRef.current.instanceId);
       const isRowMatchingFilters = props.filterMode === _gridFeatureMode.GridFeatureModeConstant.client ? (0, _gridFilterUtils.buildAggregatedFilterApplier)(filterModel, apiRef) : null;
-      lastFilteringMethodApplied.current = filteringMethod;
-      const filteringResult = filteringMethod({
+      const filteringResult = apiRef.current.unstable_applyStrategyProcessor('filtering', {
         isRowMatchingFilters
       });
       return (0, _extends2.default)({}, state, {
@@ -226,6 +220,16 @@ const useGridFilter = (apiRef, props) => {
       callbacks: [...params.callbacks, apiRef.current.unstable_applyFilters]
     });
   }, [apiRef, props.disableMultipleColumnsFiltering]);
+  const preferencePanelPreProcessing = React.useCallback((initialValue, value) => {
+    if (value === _gridPreferencePanelsValue.GridPreferencePanelsValue.filters) {
+      var _props$componentsProp;
+
+      const FilterPanel = props.components.FilterPanel;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterPanel, (0, _extends2.default)({}, (_props$componentsProp = props.componentsProps) == null ? void 0 : _props$componentsProp.filterPanel));
+    }
+
+    return initialValue;
+  }, [props.components.FilterPanel, (_props$componentsProp2 = props.componentsProps) == null ? void 0 : _props$componentsProp2.filterPanel]);
   const flatFilteringMethod = React.useCallback(params => {
     if (props.filterMode === _gridFeatureMode.GridFeatureModeConstant.client && params.isRowMatchingFilters) {
       const rowIds = (0, _rows.gridRowIdsSelector)(apiRef);
@@ -252,7 +256,8 @@ const useGridFilter = (apiRef, props) => {
   }, [apiRef, props.filterMode]);
   (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'exportState', stateExportPreProcessing);
   (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
-  (0, _useGridRegisterFilteringMethod.useGridRegisterFilteringMethod)(apiRef, 'none', flatFilteringMethod);
+  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'preferencePanel', preferencePanelPreProcessing);
+  (0, _strategyProcessing.useGridRegisterStrategyProcessor)(apiRef, _strategyProcessing.GRID_DEFAULT_STRATEGY, 'filtering', flatFilteringMethod);
   /**
    * EVENTS
    */
@@ -269,30 +274,20 @@ const useGridFilter = (apiRef, props) => {
       }));
     }
   }, [apiRef, logger]);
-  const handlePreProcessorRegister = React.useCallback(name => {
-    if (name !== 'filteringMethod') {
-      return;
-    }
-
-    filteringMethodCollectionRef.current = apiRef.current.unstable_applyPreProcessors('filteringMethod', {});
-    const rowGroupingName = (0, _rows.gridRowGroupingNameSelector)(apiRef);
-
-    if (lastFilteringMethodApplied.current !== filteringMethodCollectionRef.current[rowGroupingName]) {
+  const handleStrategyProcessorChange = React.useCallback(methodName => {
+    if (methodName === 'filtering') {
       apiRef.current.unstable_applyFilters();
     }
   }, [apiRef]);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.rowsSet, apiRef.current.unstable_applyFilters);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.rowExpansionChange, apiRef.current.unstable_applyFilters);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnsChange, handleColumnsChange);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
   /**
    * 1ST RENDER
    */
 
   (0, _useFirstRender.useFirstRender)(() => {
-    // This line of pre-processor initialization should always come after the registration of `flatFilteringMethod`
-    // Otherwise on the 1st render there would be no filtering method registered
-    filteringMethodCollectionRef.current = apiRef.current.unstable_applyPreProcessors('filteringMethod', {});
     apiRef.current.unstable_applyFilters();
   });
   /**