@mui/x-data-grid-pro 5.6.1 → 5.7.0

package/node/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -17,14 +17,10 @@ var _xDataGrid = require("@mui/x-data-grid");
 
 var _internals = require("@mui/x-data-grid/internals");
 
-var _buildRowTree = require("../../../utils/tree/buildRowTree");
-
 var _gridRowGroupingSelector = require("./gridRowGroupingSelector");
 
 var _gridRowGroupingUtils = require("./gridRowGroupingUtils");
 
-var _sortRowTree = require("../../../utils/tree/sortRowTree");
-
 var _GridRowGroupableColumnMenuItems = require("../../../components/GridRowGroupableColumnMenuItems");
 
 var _GridRowGroupingColumnMenuItems = require("../../../components/GridRowGroupingColumnMenuItems");
@@ -40,7 +36,8 @@ const rowGroupingStateInitializer = (state, props) => {
 
   return (0, _extends2.default)({}, state, {
     rowGrouping: {
-      model: (_ref = (_props$rowGroupingMod = props.rowGroupingModel) != null ? _props$rowGroupingMod : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$r = _props$initialState.rowGrouping) == null ? void 0 : _props$initialState$r.model) != null ? _ref : []
+      model: (_ref = (_props$rowGroupingMod = props.rowGroupingModel) != null ? _props$rowGroupingMod : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$r = _props$initialState.rowGrouping) == null ? void 0 : _props$initialState$r.model) != null ? _ref : [],
+      unstable_sanitizedModelOnLastRowTreeCreation: []
     }
   });
 };
@@ -63,158 +60,6 @@ const useGridRowGrouping = (apiRef, props) => {
     stateSelector: _gridRowGroupingSelector.gridRowGroupingModelSelector,
     changeEvent: _xDataGrid.GridEvents.rowGroupingModelChange
   });
-  /**
-   * ROW GROUPING
-   */
-  // Tracks the model on the last pre-processing to check if we need to re-build the grouping columns when the grid upserts a column.
-
-  const sanitizedModelOnLastRowPreProcessing = React.useRef([]);
-  const updateRowGrouping = React.useCallback(() => {
-    const groupRows = params => {
-      const rowGroupingModel = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)(apiRef);
-      const columnsLookup = (0, _xDataGrid.gridColumnLookupSelector)(apiRef);
-      sanitizedModelOnLastRowPreProcessing.current = rowGroupingModel;
-
-      if (props.disableRowGrouping || rowGroupingModel.length === 0) {
-        return null;
-      }
-
-      const distinctValues = Object.fromEntries(rowGroupingModel.map(groupingField => [groupingField, {
-        lookup: {},
-        list: []
-      }]));
-
-      const getCellGroupingCriteria = ({
-        row,
-        id,
-        colDef
-      }) => {
-        let key;
-
-        if (colDef.groupingValueGetter) {
-          const groupingValueGetterParams = {
-            colDef,
-            field: colDef.field,
-            value: row[colDef.field],
-            id,
-            row,
-            rowNode: {
-              isAutoGenerated: false,
-              id
-            }
-          };
-          key = colDef.groupingValueGetter(groupingValueGetterParams);
-        } else {
-          key = row[colDef.field];
-        }
-
-        return {
-          key,
-          field: colDef.field
-        };
-      };
-
-      params.ids.forEach(rowId => {
-        const row = params.idRowsLookup[rowId];
-        rowGroupingModel.forEach(groupingCriteria => {
-          const {
-            key
-          } = getCellGroupingCriteria({
-            row,
-            id: rowId,
-            colDef: columnsLookup[groupingCriteria]
-          });
-          const groupingFieldsDistinctKeys = distinctValues[groupingCriteria];
-
-          if (key != null && !groupingFieldsDistinctKeys.lookup[key.toString()]) {
-            groupingFieldsDistinctKeys.lookup[key.toString()] = true;
-            groupingFieldsDistinctKeys.list.push(key);
-          }
-        });
-      });
-      const rows = params.ids.map(rowId => {
-        const row = params.idRowsLookup[rowId];
-        const parentPath = rowGroupingModel.map(groupingField => getCellGroupingCriteria({
-          row,
-          id: rowId,
-          colDef: columnsLookup[groupingField]
-        })).filter(cell => cell.key != null);
-        const leafGroupingCriteria = {
-          key: rowId.toString(),
-          field: null
-        };
-        return {
-          path: [...parentPath, leafGroupingCriteria],
-          id: rowId
-        };
-      });
-      return (0, _buildRowTree.buildRowTree)((0, _extends2.default)({}, params, {
-        rows,
-        defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
-        isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-        groupingName: _gridRowGroupingUtils.GROUPING_COLUMNS_FEATURE_NAME
-      }));
-    };
-
-    return apiRef.current.unstable_registerRowGroupsBuilder('rowGrouping', groupRows);
-  }, [apiRef, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault, props.disableRowGrouping]);
-  (0, _xDataGrid.useFirstRender)(() => {
-    updateRowGrouping();
-  });
-  const isFirstRender = React.useRef(true);
-  React.useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return () => {};
-    }
-
-    return updateRowGrouping();
-  }, [updateRowGrouping]);
-  /**
-   * PRE-PROCESSING
-   */
-
-  const addColumnMenuButtons = React.useCallback((initialValue, columns) => {
-    if (props.disableRowGrouping) {
-      return initialValue;
-    }
-
-    let menuItems;
-
-    if ((0, _gridRowGroupingUtils.isGroupingColumn)(columns.field)) {
-      menuItems = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRowGroupingColumnMenuItems.GridRowGroupingColumnMenuItems, {});
-    } else if (columns.groupable) {
-      menuItems = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRowGroupableColumnMenuItems.GridRowGroupableColumnMenuItems, {});
-    } else {
-      menuItems = null;
-    }
-
-    if (menuItems == null) {
-      return initialValue;
-    }
-
-    return [...initialValue, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {}), menuItems];
-  }, [props.disableRowGrouping]);
-  const filteringMethod = React.useCallback(params => {
-    const rowTree = (0, _xDataGrid.gridRowTreeSelector)(apiRef);
-    return (0, _gridRowGroupingUtils.filterRowTreeFromGroupingColumns)({
-      rowTree,
-      isRowMatchingFilters: params.isRowMatchingFilters
-    });
-  }, [apiRef]);
-  const sortingMethod = React.useCallback(params => {
-    const rowTree = (0, _xDataGrid.gridRowTreeSelector)(apiRef);
-    const rowIds = (0, _xDataGrid.gridRowIdsSelector)(apiRef);
-    return (0, _sortRowTree.sortRowTree)({
-      rowTree,
-      rowIds,
-      sortRowList: params.sortRowList,
-      disableChildrenSorting: false
-    });
-  }, [apiRef]);
-  (0, _internals.useGridRegisterPreProcessor)(apiRef, 'columnMenu', addColumnMenuButtons);
-  (0, _internals.useGridRegisterFilteringMethod)(apiRef, _gridRowGroupingUtils.GROUPING_COLUMNS_FEATURE_NAME, filteringMethod);
-  (0, _internals.useGridRegisterSortingMethod)(apiRef, _gridRowGroupingUtils.GROUPING_COLUMNS_FEATURE_NAME, sortingMethod);
   /**
    * API METHODS
    */
@@ -224,10 +69,10 @@ const useGridRowGrouping = (apiRef, props) => {
 
     if (currentModel !== model) {
       apiRef.current.setState((0, _gridRowGroupingUtils.mergeStateWithRowGroupingModel)(model));
-      updateRowGrouping();
+      (0, _gridRowGroupingUtils.setStrategyAvailability)(apiRef, props.disableRowGrouping);
       apiRef.current.forceUpdate();
     }
-  }, [apiRef, updateRowGrouping]);
+  }, [apiRef, props.disableRowGrouping]);
   const addRowGroupingCriteria = React.useCallback((field, groupingIndex) => {
     const currentModel = (0, _gridRowGroupingSelector.gridRowGroupingModelSelector)(apiRef);
 
@@ -271,6 +116,27 @@ const useGridRowGrouping = (apiRef, props) => {
    * PRE-PROCESSING
    */
 
+  const addColumnMenuButtons = React.useCallback((initialValue, columns) => {
+    if (props.disableRowGrouping) {
+      return initialValue;
+    }
+
+    let menuItems;
+
+    if ((0, _gridRowGroupingUtils.isGroupingColumn)(columns.field)) {
+      menuItems = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRowGroupingColumnMenuItems.GridRowGroupingColumnMenuItems, {});
+    } else if (columns.groupable) {
+      menuItems = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRowGroupableColumnMenuItems.GridRowGroupableColumnMenuItems, {});
+    } else {
+      menuItems = null;
+    }
+
+    if (menuItems == null) {
+      return initialValue;
+    }
+
+    return [...initialValue, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {}), menuItems];
+  }, [props.disableRowGrouping]);
   const stateExportPreProcessing = React.useCallback(prevState => {
     if (props.disableRowGrouping) {
       return prevState;
@@ -303,6 +169,7 @@ const useGridRowGrouping = (apiRef, props) => {
 
     return params;
   }, [apiRef, props.disableRowGrouping]);
+  (0, _internals.useGridRegisterPreProcessor)(apiRef, 'columnMenu', addColumnMenuButtons);
   (0, _internals.useGridRegisterPreProcessor)(apiRef, 'exportState', stateExportPreProcessing);
   (0, _internals.useGridRegisterPreProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
@@ -329,15 +196,25 @@ const useGridRowGrouping = (apiRef, props) => {
   }, [apiRef, props.rowGroupingColumnMode]);
   const checkGroupingColumnsModelDiff = React.useCallback(() => {
     const rowGroupingModel = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)(apiRef);
-    const lastGroupingColumnsModelApplied = sanitizedModelOnLastRowPreProcessing.current;
+    const lastGroupingColumnsModelApplied = (0, _gridRowGroupingSelector.gridRowGroupingStateSelector)(apiRef.current.state).unstable_sanitizedModelOnLastRowTreeCreation;
 
     if (!(0, _internals.isDeepEqual)(lastGroupingColumnsModelApplied, rowGroupingModel)) {
-      sanitizedModelOnLastRowPreProcessing.current = rowGroupingModel; // Refresh the column pre-processing
+      apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+        rowGrouping: (0, _extends2.default)({}, state.rowGrouping, {
+          unstable_sanitizedModelOnLastRowTreeCreation: rowGroupingModel
+        })
+      })); // Refresh the column pre-processing
+      // TODO: Add a clean way to re-run a pipe processing without faking a change
 
       apiRef.current.updateColumns([]);
-      updateRowGrouping();
+      (0, _gridRowGroupingUtils.setStrategyAvailability)(apiRef, props.disableRowGrouping); // Refresh the row tree creation strategy processing
+      // TODO: Add a clean way to re-run a strategy processing without publishing a private event
+
+      if (apiRef.current.unstable_getActiveStrategy('rowTree') === _gridRowGroupingUtils.ROW_GROUPING_STRATEGY) {
+        apiRef.current.publishEvent(_xDataGrid.GridEvents.activeStrategyProcessorChange, 'rowTreeCreation');
+      }
     }
-  }, [apiRef, updateRowGrouping]);
+  }, [apiRef, props.disableRowGrouping]);
   (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.cellKeyDown, handleCellKeyDown);
   (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.columnsChange, checkGroupingColumnsModelDiff);
   (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.rowGroupingModelChange, checkGroupingColumnsModelDiff);

package/node/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -1,12 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useGridRowGroupingPreProcessors = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var React = _interopRequireWildcard(require("react"));
 
+var _xDataGrid = require("@mui/x-data-grid");
+
 var _internals = require("@mui/x-data-grid/internals");
 
 var _gridRowGroupingSelector = require("./gridRowGroupingSelector");
@@ -15,6 +21,10 @@ var _createGroupingColDef = require("./createGroupingColDef");
 
 var _gridRowGroupingUtils = require("./gridRowGroupingUtils");
 
+var _buildRowTree = require("../../../utils/tree/buildRowTree");
+
+var _sortRowTree = require("../../../utils/tree/sortRowTree");
+
 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; }
@@ -88,7 +98,130 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
     columnsState.lookup = newColumnsLookup;
     return columnsState;
   }, [getGroupingColDefs]);
+  const createRowTree = React.useCallback(params => {
+    const rowGroupingModel = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)(apiRef);
+    const columnsLookup = (0, _xDataGrid.gridColumnLookupSelector)(apiRef);
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      rowGrouping: (0, _extends2.default)({}, state.rowGrouping, {
+        unstable_sanitizedModelOnLastRowTreeCreation: rowGroupingModel
+      })
+    }));
+    const distinctValues = Object.fromEntries(rowGroupingModel.map(groupingField => [groupingField, {
+      lookup: {},
+      list: []
+    }]));
+
+    const getCellGroupingCriteria = ({
+      row,
+      id,
+      colDef
+    }) => {
+      let key;
+
+      if (colDef.groupingValueGetter) {
+        const groupingValueGetterParams = {
+          colDef,
+          field: colDef.field,
+          value: row[colDef.field],
+          id,
+          row,
+          rowNode: {
+            isAutoGenerated: false,
+            id
+          }
+        };
+        key = colDef.groupingValueGetter(groupingValueGetterParams);
+      } else {
+        key = row[colDef.field];
+      }
+
+      return {
+        key,
+        field: colDef.field
+      };
+    };
+
+    params.ids.forEach(rowId => {
+      const row = params.idRowsLookup[rowId];
+      rowGroupingModel.forEach(groupingCriteria => {
+        const {
+          key
+        } = getCellGroupingCriteria({
+          row,
+          id: rowId,
+          colDef: columnsLookup[groupingCriteria]
+        });
+        const groupingFieldsDistinctKeys = distinctValues[groupingCriteria];
+
+        if (key != null && !groupingFieldsDistinctKeys.lookup[key.toString()]) {
+          groupingFieldsDistinctKeys.lookup[key.toString()] = true;
+          groupingFieldsDistinctKeys.list.push(key);
+        }
+      });
+    });
+    const rows = params.ids.map(rowId => {
+      const row = params.idRowsLookup[rowId];
+      const parentPath = rowGroupingModel.map(groupingField => getCellGroupingCriteria({
+        row,
+        id: rowId,
+        colDef: columnsLookup[groupingField]
+      })).filter(cell => cell.key != null);
+      const leafGroupingCriteria = {
+        key: rowId.toString(),
+        field: null
+      };
+      return {
+        path: [...parentPath, leafGroupingCriteria],
+        id: rowId
+      };
+    });
+    return (0, _buildRowTree.buildRowTree)((0, _extends2.default)({}, params, {
+      rows,
+      defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+      isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+      groupingName: _gridRowGroupingUtils.ROW_GROUPING_STRATEGY
+    }));
+  }, [apiRef, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
+  const filterRows = React.useCallback(params => {
+    const rowTree = (0, _xDataGrid.gridRowTreeSelector)(apiRef);
+    return (0, _gridRowGroupingUtils.filterRowTreeFromGroupingColumns)({
+      rowTree,
+      isRowMatchingFilters: params.isRowMatchingFilters
+    });
+  }, [apiRef]);
+  const sortRows = React.useCallback(params => {
+    const rowTree = (0, _xDataGrid.gridRowTreeSelector)(apiRef);
+    const rowIds = (0, _xDataGrid.gridRowIdsSelector)(apiRef);
+    return (0, _sortRowTree.sortRowTree)({
+      rowTree,
+      rowIds,
+      sortRowList: params.sortRowList,
+      disableChildrenSorting: false
+    });
+  }, [apiRef]);
   (0, _internals.useGridRegisterPreProcessor)(apiRef, 'hydrateColumns', updateGroupingColumn);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.ROW_GROUPING_STRATEGY, 'rowTreeCreation', createRowTree);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.ROW_GROUPING_STRATEGY, 'filtering', filterRows);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.ROW_GROUPING_STRATEGY, 'sorting', sortRows);
+  /**
+   * 1ST RENDER
+   */
+
+  (0, _xDataGrid.useFirstRender)(() => {
+    (0, _gridRowGroupingUtils.setStrategyAvailability)(apiRef, props.disableRowGrouping);
+  });
+  /**
+   * EFFECTS
+   */
+
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (!isFirstRender.current) {
+      (0, _gridRowGroupingUtils.setStrategyAvailability)(apiRef, props.disableRowGrouping);
+    } else {
+      isFirstRender.current = false;
+    }
+  }, [apiRef, props.disableRowGrouping]);
 };
 
 exports.useGridRowGroupingPreProcessors = useGridRowGroupingPreProcessors;

package/node/hooks/features/treeData/gridTreeDataUtils.js

@@ -3,13 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.filterRowTreeFromTreeData = void 0;
-
+exports.filterRowTreeFromTreeData = exports.TREE_DATA_STRATEGY = void 0;
+const TREE_DATA_STRATEGY = 'tree-data';
 /**
  * A node is visible if one of the following criteria is met:
  * - One of its children is passing the filter
  * - It is passing the filter
  */
+
+exports.TREE_DATA_STRATEGY = TREE_DATA_STRATEGY;
+
 const filterRowTreeFromTreeData = params => {
   const {
     rowTree,

package/node/hooks/features/treeData/useGridTreeData.js

@@ -1,114 +1,25 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridTreeData = exports.TREE_DATA_GROUPING_NAME = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+exports.useGridTreeData = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
 var _xDataGrid = require("@mui/x-data-grid");
 
-var _internals = require("@mui/x-data-grid/internals");
-
-var _buildRowTree = require("../../../utils/tree/buildRowTree");
-
-var _sortRowTree = require("../../../utils/tree/sortRowTree");
-
-var _gridTreeDataUtils = require("./gridTreeDataUtils");
-
 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 TREE_DATA_GROUPING_NAME = 'tree-data';
 /**
  * Only available in DataGridPro
- * @requires useGridPreProcessing (method)
- * @requires useGridRowGroupsPreProcessing (method)
  */
-
-exports.TREE_DATA_GROUPING_NAME = TREE_DATA_GROUPING_NAME;
-
-const useGridTreeData = (apiRef, props) => {
-  /**
-   * ROW GROUPING
-   */
-  const updateRowGrouping = React.useCallback(() => {
-    if (!props.treeData) {
-      return apiRef.current.unstable_registerRowGroupsBuilder('treeData', null);
-    }
-
-    const groupRows = params => {
-      if (!props.getTreeDataPath) {
-        throw new Error('MUI: No getTreeDataPath given.');
-      }
-
-      const rows = params.ids.map(rowId => ({
-        id: rowId,
-        path: props.getTreeDataPath(params.idRowsLookup[rowId]).map(key => ({
-          key,
-          field: null
-        }))
-      })).sort((a, b) => a.path.length - b.path.length);
-      return (0, _buildRowTree.buildRowTree)((0, _extends2.default)({
-        rows
-      }, params, {
-        defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
-        isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-        groupingName: TREE_DATA_GROUPING_NAME,
-        onDuplicatePath: (firstId, secondId, path) => {
-          throw new Error(['MUI: The path returned by `getTreeDataPath` should be unique.', `The rows with id #${firstId} and #${secondId} have the same.`, `Path: ${JSON.stringify(path.map(step => step.key))}.`].join('\n'));
-        }
-      }));
-    };
-
-    return apiRef.current.unstable_registerRowGroupsBuilder('treeData', groupRows);
-  }, [apiRef, props.getTreeDataPath, props.treeData, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
-  (0, _xDataGrid.useFirstRender)(() => {
-    updateRowGrouping();
-  });
-  const isFirstRender = React.useRef(true);
-  React.useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return;
-    }
-
-    updateRowGrouping();
-  }, [updateRowGrouping]);
-  /**
-   * PRE-PROCESSING
-   */
-
-  const filteringMethod = React.useCallback(params => {
-    const rowTree = (0, _xDataGrid.gridRowTreeSelector)(apiRef);
-    return (0, _gridTreeDataUtils.filterRowTreeFromTreeData)({
-      rowTree,
-      isRowMatchingFilters: params.isRowMatchingFilters,
-      disableChildrenFiltering: props.disableChildrenFiltering
-    });
-  }, [apiRef, props.disableChildrenFiltering]);
-  const sortingMethod = React.useCallback(params => {
-    const rowTree = (0, _xDataGrid.gridRowTreeSelector)(apiRef);
-    const rowIds = (0, _xDataGrid.gridRowIdsSelector)(apiRef);
-    return (0, _sortRowTree.sortRowTree)({
-      rowTree,
-      rowIds,
-      sortRowList: params.sortRowList,
-      disableChildrenSorting: props.disableChildrenSorting
-    });
-  }, [apiRef, props.disableChildrenSorting]);
-  (0, _internals.useGridRegisterFilteringMethod)(apiRef, TREE_DATA_GROUPING_NAME, filteringMethod);
-  (0, _internals.useGridRegisterSortingMethod)(apiRef, TREE_DATA_GROUPING_NAME, sortingMethod);
+const useGridTreeData = apiRef => {
   /**
    * EVENTS
    */
-
   const handleCellKeyDown = React.useCallback((params, event) => {
     const cellParams = apiRef.current.getCellParams(params.id, params.field);
 

package/node/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -13,14 +13,20 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var React = _interopRequireWildcard(require("react"));
 
+var _xDataGrid = require("@mui/x-data-grid");
+
 var _internals = require("@mui/x-data-grid/internals");
 
 var _gridTreeDataGroupColDef = require("./gridTreeDataGroupColDef");
 
-var _useGridTreeData = require("./useGridTreeData");
+var _gridTreeDataUtils = require("./gridTreeDataUtils");
 
 var _components = require("../../../components");
 
+var _buildRowTree = require("../../../utils/tree/buildRowTree");
+
+var _sortRowTree = require("../../../utils/tree/sortRowTree");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["hideDescendantCount"];
@@ -30,6 +36,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 useGridTreeDataPreProcessors = (apiRef, props) => {
+  const setStrategyAvailability = React.useCallback(() => {
+    apiRef.current.unstable_setStrategyAvailability('rowTree', _gridTreeDataUtils.TREE_DATA_STRATEGY, props.treeData ? () => true : () => false);
+  }, [apiRef, props.treeData]);
   const getGroupingColDef = React.useCallback(() => {
     var _colDefOverride;
 
@@ -38,7 +47,7 @@ const useGridTreeDataPreProcessors = (apiRef, props) => {
 
     if (typeof groupingColDefProp === 'function') {
       const params = {
-        groupingName: _useGridTreeData.TREE_DATA_GROUPING_NAME,
+        groupingName: _gridTreeDataUtils.TREE_DATA_STRATEGY,
         fields: []
       };
       colDefOverride = groupingColDefProp(params);
@@ -86,7 +95,70 @@ const useGridTreeDataPreProcessors = (apiRef, props) => {
 
     return columnsState;
   }, [props.treeData, getGroupingColDef]);
+  const createRowTree = React.useCallback(params => {
+    if (!props.getTreeDataPath) {
+      throw new Error('MUI: No getTreeDataPath given.');
+    }
+
+    const rows = params.ids.map(rowId => ({
+      id: rowId,
+      path: props.getTreeDataPath(params.idRowsLookup[rowId]).map(key => ({
+        key,
+        field: null
+      }))
+    })).sort((a, b) => a.path.length - b.path.length);
+    return (0, _buildRowTree.buildRowTree)((0, _extends2.default)({
+      rows
+    }, params, {
+      defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+      isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+      groupingName: _gridTreeDataUtils.TREE_DATA_STRATEGY,
+      onDuplicatePath: (firstId, secondId, path) => {
+        throw new Error(['MUI: The path returned by `getTreeDataPath` should be unique.', `The rows with id #${firstId} and #${secondId} have the same.`, `Path: ${JSON.stringify(path.map(step => step.key))}.`].join('\n'));
+      }
+    }));
+  }, [props.getTreeDataPath, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
+  const filterRows = React.useCallback(params => {
+    const rowTree = (0, _xDataGrid.gridRowTreeSelector)(apiRef);
+    return (0, _gridTreeDataUtils.filterRowTreeFromTreeData)({
+      rowTree,
+      isRowMatchingFilters: params.isRowMatchingFilters,
+      disableChildrenFiltering: props.disableChildrenFiltering
+    });
+  }, [apiRef, props.disableChildrenFiltering]);
+  const sortRows = React.useCallback(params => {
+    const rowTree = (0, _xDataGrid.gridRowTreeSelector)(apiRef);
+    const rowIds = (0, _xDataGrid.gridRowIdsSelector)(apiRef);
+    return (0, _sortRowTree.sortRowTree)({
+      rowTree,
+      rowIds,
+      sortRowList: params.sortRowList,
+      disableChildrenSorting: props.disableChildrenSorting
+    });
+  }, [apiRef, props.disableChildrenSorting]);
   (0, _internals.useGridRegisterPreProcessor)(apiRef, 'hydrateColumns', updateGroupingColumn);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridTreeDataUtils.TREE_DATA_STRATEGY, 'rowTreeCreation', createRowTree);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridTreeDataUtils.TREE_DATA_STRATEGY, 'filtering', filterRows);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridTreeDataUtils.TREE_DATA_STRATEGY, 'sorting', sortRows);
+  /**
+   * 1ST RENDER
+   */
+
+  (0, _xDataGrid.useFirstRender)(() => {
+    setStrategyAvailability();
+  });
+  /**
+   * EFFECTS
+   */
+
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (!isFirstRender.current) {
+      setStrategyAvailability();
+    } else {
+      isFirstRender.current = false;
+    }
+  }, [setStrategyAvailability]);
 };
 
 exports.useGridTreeDataPreProcessors = useGridTreeDataPreProcessors;

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.1
+/** @license MUI v5.7.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.