@mui/x-data-grid 5.5.1 → 5.7.0

package/legacy/hooks/features/preferencesPanel/gridPreferencePanelsValue.js

@@ -0,0 +1,8 @@
+var GridPreferencePanelsValue;
+
+(function (GridPreferencePanelsValue) {
+  GridPreferencePanelsValue["filters"] = "filters";
+  GridPreferencePanelsValue["columns"] = "columns";
+})(GridPreferencePanelsValue || (GridPreferencePanelsValue = {}));
+
+export { GridPreferencePanelsValue };

package/legacy/hooks/features/preferencesPanel/index.js

@@ -0,0 +1,3 @@
+export * from './gridPreferencePanelSelector';
+export * from './gridPreferencePanelState';
+export * from './gridPreferencePanelsValue';

package/legacy/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -0,0 +1,108 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridLogger } from '../../utils/useGridLogger';
+import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { gridPreferencePanelStateSelector } from './gridPreferencePanelSelector';
+export var preferencePanelStateInitializer = function preferencePanelStateInitializer(state, props) {
+  var _props$initialState$p, _props$initialState;
+
+  return _extends({}, state, {
+    preferencePanel: (_props$initialState$p = (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.preferencePanel) != null ? _props$initialState$p : {
+      open: false
+    }
+  });
+};
+/**
+ * TODO: Add a single `setPreferencePanel` method to avoid multiple `setState`
+ */
+
+export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef) {
+  var logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
+  var hideTimeout = React.useRef();
+  var immediateTimeout = React.useRef();
+  /**
+   * API METHODS
+   */
+
+  var hidePreferences = React.useCallback(function () {
+    logger.debug('Hiding Preferences Panel');
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        preferencePanel: {
+          open: false
+        }
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, logger]); // This is to prevent the preferences from closing when you open a select box or another panel,
+  // The issue is in MUI core V4 => Fixed in V5
+
+  var doNotHidePanel = React.useCallback(function () {
+    immediateTimeout.current = setTimeout(function () {
+      return clearTimeout(hideTimeout.current);
+    }, 0);
+  }, []); // This is a hack for the issue with Core V4, by delaying hiding the panel on the clickAwayListener,
+  // we can cancel the action if the trigger element still need the panel...
+
+  var hidePreferencesDelayed = React.useCallback(function () {
+    hideTimeout.current = setTimeout(hidePreferences, 100);
+  }, [hidePreferences]);
+  var showPreferences = React.useCallback(function (newValue) {
+    logger.debug('Opening Preferences Panel');
+    doNotHidePanel();
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        preferencePanel: _extends({}, state.preferencePanel, {
+          open: true,
+          openedPanelValue: newValue
+        })
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [doNotHidePanel, apiRef, logger]);
+  useGridApiMethod(apiRef, {
+    showPreferences: showPreferences,
+    hidePreferences: hidePreferencesDelayed
+  }, 'ColumnMenuApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  var stateExportPreProcessing = React.useCallback(function (prevState) {
+    var preferencePanelToExport = gridPreferencePanelStateSelector(apiRef.current.state);
+
+    if (!preferencePanelToExport.open && !preferencePanelToExport.openedPanelValue) {
+      return prevState;
+    }
+
+    return _extends({}, prevState, {
+      preferencePanel: preferencePanelToExport
+    });
+  }, [apiRef]);
+  var stateRestorePreProcessing = React.useCallback(function (params, context) {
+    var preferencePanel = context.stateToRestore.preferencePanel;
+
+    if (preferencePanel != null) {
+      apiRef.current.setState(function (state) {
+        return _extends({}, state, {
+          preferencePanel: preferencePanel
+        });
+      });
+    }
+
+    return params;
+  }, [apiRef]);
+  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  /**
+   * EFFECTS
+   */
+
+  React.useEffect(function () {
+    return function () {
+      clearTimeout(hideTimeout.current);
+      clearTimeout(immediateTimeout.current);
+    };
+  }, []);
+};

package/legacy/hooks/features/rows/gridRowsMetaSelector.js

@@ -0,0 +1,3 @@
+export var gridRowsMetaSelector = function gridRowsMetaSelector(state) {
+  return state.rowsMeta;
+};

package/legacy/hooks/features/rows/gridRowsMetaState.js

@@ -0,0 +1 @@
+export {};

package/legacy/hooks/features/rows/gridRowsSelector.js

@@ -0,0 +1,25 @@
+import { createSelector } from '../../../utils/createSelector';
+export var gridRowsStateSelector = function gridRowsStateSelector(state) {
+  return state.rows;
+};
+export var gridRowCountSelector = createSelector(gridRowsStateSelector, function (rows) {
+  return rows.totalRowCount;
+});
+export var gridTopLevelRowCountSelector = createSelector(gridRowsStateSelector, function (rows) {
+  return rows.totalTopLevelRowCount;
+});
+export var gridRowsLookupSelector = createSelector(gridRowsStateSelector, function (rows) {
+  return rows.idRowsLookup;
+});
+export var gridRowTreeSelector = createSelector(gridRowsStateSelector, function (rows) {
+  return rows.tree;
+});
+export var gridRowGroupingNameSelector = createSelector(gridRowsStateSelector, function (rows) {
+  return rows.groupingName;
+});
+export var gridRowTreeDepthSelector = createSelector(gridRowsStateSelector, function (rows) {
+  return rows.treeDepth;
+});
+export var gridRowIdsSelector = createSelector(gridRowsStateSelector, function (rows) {
+  return rows.ids;
+});

package/legacy/hooks/features/rows/gridRowsState.js

@@ -0,0 +1 @@
+export {};

package/legacy/hooks/features/rows/index.js

@@ -0,0 +1,4 @@
+export * from './gridRowsMetaSelector';
+export * from './gridRowsMetaState';
+export * from './gridRowsSelector';
+export {};

package/legacy/hooks/features/rows/useGridParamsApi.js

@@ -0,0 +1,179 @@
+import * as React from 'react';
+import { getGridCellElement, getGridColumnHeaderElement, getGridRowElement } from '../../../utils/domUtils';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
+import { buildWarning } from '../../../utils/warning';
+var warnedOnceMissingColumn = false;
+
+function warnMissingColumn(field) {
+  console.warn(["MUI: You are calling getValue('".concat(field, "') but the column `").concat(field, "` is not defined."), "Instead, you can access the data from `params.row.".concat(field, "`.")].join('\n'));
+  warnedOnceMissingColumn = true;
+}
+
+var getCellValueWarning = buildWarning(["MUI: You are calling getValue. This method is deprecated and will be removed in the next major version.", 'Instead, you can access the data from `params.row`.']);
+/**
+ * @requires useGridColumns (method)
+ * @requires useGridRows (method)
+ * @requires useGridFocus (state)
+ * @requires useGridEditing (method)
+ * TODO: Impossible priority - useGridEditing also needs to be after useGridParamsApi
+ * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
+ */
+
+export function useGridParamsApi(apiRef) {
+  var getColumnHeaderParams = React.useCallback(function (field) {
+    return {
+      field: field,
+      colDef: apiRef.current.getColumn(field)
+    };
+  }, [apiRef]);
+  /**
+   * We want to remove the `getValue` param from `getRowParams`, `getCellParams` and `getBaseCellParams`
+   */
+
+  var getCellValueWithDeprecationWarning = React.useCallback(function () {
+    var _apiRef$current;
+
+    if (process.env.NODE_ENV !== 'production') {
+      getCellValueWarning();
+    }
+
+    return (_apiRef$current = apiRef.current).getCellValue.apply(_apiRef$current, arguments);
+  }, [apiRef]);
+  var getRowParams = React.useCallback(function (id) {
+    var row = apiRef.current.getRow(id);
+
+    if (!row) {
+      throw new Error("No row with id #".concat(id, " found"));
+    }
+
+    var params = {
+      id: id,
+      columns: apiRef.current.getAllColumns(),
+      row: row,
+      // TODO v6: remove
+      getValue: getCellValueWithDeprecationWarning
+    };
+    return params;
+  }, [apiRef, getCellValueWithDeprecationWarning]);
+  var getBaseCellParams = React.useCallback(function (id, field) {
+    var row = apiRef.current.getRow(id);
+    var rowNode = apiRef.current.getRowNode(id);
+
+    if (!row || !rowNode) {
+      throw new Error("No row with id #".concat(id, " found"));
+    }
+
+    var cellFocus = gridFocusCellSelector(apiRef);
+    var cellTabIndex = gridTabIndexCellSelector(apiRef);
+    var params = {
+      id: id,
+      field: field,
+      row: row,
+      rowNode: rowNode,
+      value: row[field],
+      colDef: apiRef.current.getColumn(field),
+      cellMode: apiRef.current.getCellMode(id, field),
+      // TODO v6: remove
+      getValue: getCellValueWithDeprecationWarning,
+      api: apiRef.current,
+      hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,
+      tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1
+    };
+    return params;
+  }, [apiRef, getCellValueWithDeprecationWarning]);
+  var getCellParams = React.useCallback(function (id, field) {
+    var colDef = apiRef.current.getColumn(field);
+    var value = apiRef.current.getCellValue(id, field);
+    var row = apiRef.current.getRow(id);
+    var rowNode = apiRef.current.getRowNode(id);
+
+    if (!row || !rowNode) {
+      throw new Error("No row with id #".concat(id, " found"));
+    }
+
+    var cellFocus = gridFocusCellSelector(apiRef);
+    var cellTabIndex = gridTabIndexCellSelector(apiRef);
+    var params = {
+      id: id,
+      field: field,
+      row: row,
+      rowNode: rowNode,
+      colDef: colDef,
+      cellMode: apiRef.current.getCellMode(id, field),
+      // TODO v6: remove
+      getValue: getCellValueWithDeprecationWarning,
+      hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,
+      tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1,
+      value: value,
+      formattedValue: value
+    };
+
+    if (colDef.valueFormatter) {
+      params.formattedValue = colDef.valueFormatter({
+        id: id,
+        field: params.field,
+        value: params.value,
+        api: apiRef.current
+      });
+    }
+
+    params.isEditable = colDef && apiRef.current.isCellEditable(params);
+    return params;
+  }, [apiRef, getCellValueWithDeprecationWarning]);
+  var getCellValue = React.useCallback(function (id, field) {
+    var colDef = apiRef.current.getColumn(field);
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (!colDef && !warnedOnceMissingColumn) {
+        warnMissingColumn(field);
+      }
+    }
+
+    if (!colDef || !colDef.valueGetter) {
+      var rowModel = apiRef.current.getRow(id);
+
+      if (!rowModel) {
+        throw new Error("No row with id #".concat(id, " found"));
+      }
+
+      return rowModel[field];
+    }
+
+    return colDef.valueGetter(getBaseCellParams(id, field));
+  }, [apiRef, getBaseCellParams]);
+  var getColumnHeaderElement = React.useCallback(function (field) {
+    if (!apiRef.current.rootElementRef.current) {
+      return null;
+    }
+
+    return getGridColumnHeaderElement(apiRef.current.rootElementRef.current, field);
+  }, [apiRef]);
+  var getRowElement = React.useCallback(function (id) {
+    if (!apiRef.current.rootElementRef.current) {
+      return null;
+    }
+
+    return getGridRowElement(apiRef.current.rootElementRef.current, id);
+  }, [apiRef]);
+  var getCellElement = React.useCallback(function (id, field) {
+    if (!apiRef.current.rootElementRef.current) {
+      return null;
+    }
+
+    return getGridCellElement(apiRef.current.rootElementRef.current, {
+      id: id,
+      field: field
+    });
+  }, [apiRef]);
+  var paramsApi = {
+    getCellValue: getCellValue,
+    getCellParams: getCellParams,
+    getCellElement: getCellElement,
+    getRowParams: getRowParams,
+    getRowElement: getRowElement,
+    getColumnHeaderParams: getColumnHeaderParams,
+    getColumnHeaderElement: getColumnHeaderElement
+  };
+  useGridApiMethod(apiRef, paramsApi, 'GridParamsApi');
+}

package/legacy/hooks/features/rows/useGridRows.js

@@ -0,0 +1,331 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridEvents } from '../../../models/events';
+import { checkGridRowIdIsValid } from '../../../models/gridRows';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridLogger } from '../../utils/useGridLogger';
+import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowIdsSelector, gridRowGroupingNameSelector } from './gridRowsSelector';
+import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
+
+function getGridRowId(rowModel, getRowId, detailErrorMessage) {
+  var id = getRowId ? getRowId(rowModel) : rowModel.id;
+  checkGridRowIdIsValid(id, rowModel, detailErrorMessage);
+  return id;
+}
+
+var convertGridRowsPropToState = function convertGridRowsPropToState(_ref) {
+  var prevState = _ref.prevState,
+      rows = _ref.rows,
+      getRowId = _ref.getRowId;
+  var value;
+
+  if (rows) {
+    value = {
+      idRowsLookup: {},
+      ids: []
+    };
+
+    for (var i = 0; i < rows.length; i += 1) {
+      var row = rows[i];
+      var id = getGridRowId(row, getRowId);
+      value.idRowsLookup[id] = row;
+      value.ids.push(id);
+    }
+  } else {
+    value = prevState.value;
+  }
+
+  return {
+    value: value,
+    rowsBeforePartialUpdates: rows != null ? rows : prevState.rowsBeforePartialUpdates
+  };
+};
+
+var getRowsStateFromCache = function getRowsStateFromCache(rowsCache, previousTree, apiRef, rowCountProp) {
+  var value = rowsCache.state.value;
+  var rowCount = rowCountProp != null ? rowCountProp : 0;
+  var groupingResponse = apiRef.current.unstable_applyStrategyProcessor('rowTreeCreation', _extends({}, value, {
+    previousTree: previousTree
+  }));
+  var dataTopLevelRowCount = groupingResponse.treeDepth === 1 ? groupingResponse.ids.length : Object.values(groupingResponse.tree).filter(function (node) {
+    return node.parent == null;
+  }).length;
+  return _extends({}, groupingResponse, {
+    totalRowCount: Math.max(rowCount, groupingResponse.ids.length),
+    totalTopLevelRowCount: Math.max(rowCount, dataTopLevelRowCount)
+  });
+};
+
+export var rowsStateInitializer = function rowsStateInitializer(state, props, apiRef) {
+  var rowsCache = {
+    state: convertGridRowsPropToState({
+      rows: props.rows,
+      getRowId: props.getRowId,
+      prevState: {
+        value: {
+          idRowsLookup: {},
+          ids: []
+        },
+        rowsBeforePartialUpdates: []
+      }
+    }),
+    timeout: null,
+    lastUpdateMs: Date.now()
+  };
+  return _extends({}, state, {
+    rows: getRowsStateFromCache(rowsCache, null, apiRef, props.rowCount),
+    rowsCache: rowsCache // TODO remove from state
+
+  });
+};
+export var useGridRows = function useGridRows(apiRef, props) {
+  if (process.env.NODE_ENV !== 'production') {
+    // Freeze rows for immutability
+    Object.freeze(props.rows);
+  }
+
+  var logger = useGridLogger(apiRef, 'useGridRows');
+  var rowsCache = React.useRef(apiRef.current.state.rowsCache); // To avoid listing rowsCache as useEffect dep
+
+  var currentPage = useGridVisibleRows(apiRef, props);
+  var getRow = React.useCallback(function (id) {
+    var _gridRowsLookupSelect;
+
+    return (_gridRowsLookupSelect = gridRowsLookupSelector(apiRef)[id]) != null ? _gridRowsLookupSelect : null;
+  }, [apiRef]);
+  var lookup = React.useMemo(function () {
+    return currentPage.rows.reduce(function (acc, _ref2, index) {
+      var id = _ref2.id;
+      acc[id] = index;
+      return acc;
+    }, {});
+  }, [currentPage.rows]);
+  var throttledRowsChange = React.useCallback(function (newState, throttle) {
+    var run = function run() {
+      rowsCache.current.timeout = null;
+      rowsCache.current.lastUpdateMs = Date.now();
+      apiRef.current.setState(function (state) {
+        return _extends({}, state, {
+          rows: getRowsStateFromCache(rowsCache.current, gridRowTreeSelector(apiRef), apiRef, props.rowCount)
+        });
+      });
+      apiRef.current.publishEvent(GridEvents.rowsSet);
+      apiRef.current.forceUpdate();
+    };
+
+    if (rowsCache.current.timeout) {
+      clearTimeout(rowsCache.current.timeout);
+    }
+
+    rowsCache.current.state = newState;
+    rowsCache.current.timeout = null;
+
+    if (!throttle) {
+      run();
+      return;
+    }
+
+    var throttleRemainingTimeMs = props.throttleRowsMs - (Date.now() - rowsCache.current.lastUpdateMs);
+
+    if (throttleRemainingTimeMs > 0) {
+      rowsCache.current.timeout = setTimeout(run, throttleRemainingTimeMs);
+      return;
+    }
+
+    run();
+  }, [props.throttleRowsMs, props.rowCount, apiRef]);
+  /**
+   * API METHODS
+   */
+
+  var setRows = React.useCallback(function (rows) {
+    logger.debug("Updating all rows, new length ".concat(rows.length));
+    throttledRowsChange(convertGridRowsPropToState({
+      rows: rows,
+      prevState: rowsCache.current.state,
+      getRowId: props.getRowId
+    }), true);
+  }, [logger, props.getRowId, throttledRowsChange]);
+  var updateRows = React.useCallback(function (updates) {
+    if (props.signature === GridSignature.DataGrid && updates.length > 1) {
+      // TODO: Add test with direct call to `apiRef.current.updateRows` in DataGrid after enabling the `apiRef` on the free plan.
+      throw new Error(["MUI: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", 'You need to upgrade to the DataGridPro component to unlock this feature.'].join('\n'));
+    } // we remove duplicate updates. A server can batch updates, and send several updates for the same row in one fn call.
+
+
+    var uniqUpdates = new Map();
+    updates.forEach(function (update) {
+      var id = getGridRowId(update, props.getRowId, 'A row was provided without id when calling updateRows():');
+
+      if (uniqUpdates.has(id)) {
+        uniqUpdates.set(id, _extends({}, uniqUpdates.get(id), update));
+      } else {
+        uniqUpdates.set(id, update);
+      }
+    });
+    var deletedRowIds = [];
+    var newStateValue = {
+      idRowsLookup: _extends({}, rowsCache.current.state.value.idRowsLookup),
+      ids: _toConsumableArray(rowsCache.current.state.value.ids)
+    };
+    uniqUpdates.forEach(function (partialRow, id) {
+      // eslint-disable-next-line no-underscore-dangle
+      if (partialRow._action === 'delete') {
+        delete newStateValue.idRowsLookup[id];
+        deletedRowIds.push(id);
+        return;
+      }
+
+      var oldRow = apiRef.current.getRow(id);
+
+      if (!oldRow) {
+        newStateValue.idRowsLookup[id] = partialRow;
+        newStateValue.ids.push(id);
+        return;
+      }
+
+      newStateValue.idRowsLookup[id] = _extends({}, apiRef.current.getRow(id), partialRow);
+    });
+
+    if (deletedRowIds.length > 0) {
+      newStateValue.ids = newStateValue.ids.filter(function (id) {
+        return !deletedRowIds.includes(id);
+      });
+    }
+
+    var state = _extends({}, rowsCache.current.state, {
+      value: newStateValue
+    });
+
+    throttledRowsChange(state, true);
+  }, [apiRef, props.getRowId, throttledRowsChange, props.signature]);
+  var getRowModels = React.useCallback(function () {
+    var allRows = gridRowIdsSelector(apiRef);
+    var idRowsLookup = gridRowsLookupSelector(apiRef);
+    return new Map(allRows.map(function (id) {
+      return [id, idRowsLookup[id]];
+    }));
+  }, [apiRef]);
+  var getRowsCount = React.useCallback(function () {
+    return gridRowCountSelector(apiRef);
+  }, [apiRef]);
+  var getAllRowIds = React.useCallback(function () {
+    return gridRowIdsSelector(apiRef);
+  }, [apiRef]);
+  var getRowIndexRelativeToVisibleRows = React.useCallback(function (id) {
+    return lookup[id];
+  }, [lookup]);
+  var setRowChildrenExpansion = React.useCallback(function (id, isExpanded) {
+    var currentNode = apiRef.current.getRowNode(id);
+
+    if (!currentNode) {
+      throw new Error("MUI: No row with id #".concat(id, " found"));
+    }
+
+    var newNode = _extends({}, currentNode, {
+      childrenExpanded: isExpanded
+    });
+
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        rows: _extends({}, state.rows, {
+          tree: _extends({}, state.rows.tree, _defineProperty({}, id, newNode))
+        })
+      });
+    });
+    apiRef.current.forceUpdate();
+    apiRef.current.publishEvent(GridEvents.rowExpansionChange, newNode);
+  }, [apiRef]);
+  var getRowNode = React.useCallback(function (id) {
+    var _gridRowTreeSelector$;
+
+    return (_gridRowTreeSelector$ = gridRowTreeSelector(apiRef)[id]) != null ? _gridRowTreeSelector$ : null;
+  }, [apiRef]);
+  var rowApi = {
+    getRow: getRow,
+    getRowModels: getRowModels,
+    getRowsCount: getRowsCount,
+    getAllRowIds: getAllRowIds,
+    setRows: setRows,
+    updateRows: updateRows,
+    setRowChildrenExpansion: setRowChildrenExpansion,
+    getRowNode: getRowNode,
+    getRowIndexRelativeToVisibleRows: getRowIndexRelativeToVisibleRows
+  };
+  /**
+   * EVENTS
+   */
+
+  var groupRows = React.useCallback(function () {
+    logger.info("Row grouping pre-processing have changed, regenerating the row tree");
+    var rows;
+
+    if (rowsCache.current.state.rowsBeforePartialUpdates === props.rows) {
+      // The `props.rows` has not changed since the last row grouping
+      // We can keep the potential updates stored in `inputRowsAfterUpdates` on the new grouping
+      rows = undefined;
+    } else {
+      // The `props.rows` has changed since the last row grouping
+      // We must use the new `props.rows` on the new grouping
+      // This occurs because this event is triggered before the `useEffect` on the rows when both the grouping pre-processing and the rows changes on the same render
+      rows = props.rows;
+    }
+
+    throttledRowsChange(convertGridRowsPropToState({
+      rows: rows,
+      getRowId: props.getRowId,
+      prevState: rowsCache.current.state
+    }), false);
+  }, [logger, throttledRowsChange, props.getRowId, props.rows]);
+  var handleStrategyProcessorChange = React.useCallback(function (methodName) {
+    if (methodName === 'rowTreeCreation') {
+      groupRows();
+    }
+  }, [groupRows]);
+  var handleStrategyActivityChange = React.useCallback(function () {
+    // `rowTreeCreation` is the only processor ran when `strategyAvailabilityChange` is fired.
+    // All the other processors listen to `rowsSet` which will be published by the `groupRows` method below.
+    if (apiRef.current.unstable_getActiveStrategy('rowTree') !== gridRowGroupingNameSelector(apiRef)) {
+      groupRows();
+    }
+  }, [apiRef, groupRows]);
+  useGridApiEventHandler(apiRef, GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
+  useGridApiEventHandler(apiRef, GridEvents.strategyAvailabilityChange, handleStrategyActivityChange);
+  useGridApiMethod(apiRef, rowApi, 'GridRowApi');
+  /**
+   * EFFECTS
+   */
+
+  React.useEffect(function () {
+    return function () {
+      if (rowsCache.current.timeout !== null) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        clearTimeout(rowsCache.current.timeout);
+      }
+    };
+  }, []); // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridRows`
+  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
+
+  var isFirstRender = React.useRef(true);
+  React.useEffect(function () {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    } // The new rows have already been applied (most likely in the `GridEvents.rowGroupsPreProcessingChange` listener)
+
+
+    if (rowsCache.current.state.rowsBeforePartialUpdates === props.rows) {
+      return;
+    }
+
+    logger.debug("Updating all rows, new length ".concat(props.rows.length));
+    throttledRowsChange(convertGridRowsPropToState({
+      rows: props.rows,
+      getRowId: props.getRowId,
+      prevState: rowsCache.current.state
+    }), false);
+  }, [props.rows, props.rowCount, props.getRowId, logger, throttledRowsChange]);
+};