@mui/x-data-grid 5.4.0 → 5.6.0

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

@@ -0,0 +1,197 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridParamsApi = useGridParamsApi;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _domUtils = require("../../../utils/domUtils");
+
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+
+var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
+
+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; }
+
+let warnedOnceMissingColumn = false;
+
+function warnMissingColumn(field) {
+  console.warn([`MUI: You are calling getValue('${field}') but the column \`${field}\` is not defined.`, `Instead, you can access the data from \`params.row.${field}\`.`].join('\n'));
+  warnedOnceMissingColumn = true;
+}
+
+let warnedOnceGetValue = false;
+
+function warnGetValue() {
+  console.warn([`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}\`.`].join('\n'));
+  warnedOnceGetValue = true;
+}
+/**
+ * @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
+ */
+
+
+function useGridParamsApi(apiRef) {
+  const getColumnHeaderParams = React.useCallback(field => ({
+    field,
+    colDef: apiRef.current.getColumn(field)
+  }), [apiRef]);
+  /**
+   * We want to remove the `getValue` param from `getRowParams`, `getCellParams` and `getBaseCellParams`
+   */
+
+  const getCellValueWithDeprecationWarning = React.useCallback((...args) => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!warnedOnceGetValue) {
+        warnGetValue();
+      }
+    }
+
+    return apiRef.current.getCellValue(...args);
+  }, [apiRef]);
+  const getRowParams = React.useCallback(id => {
+    const row = apiRef.current.getRow(id);
+
+    if (!row) {
+      throw new Error(`No row with id #${id} found`);
+    }
+
+    const params = {
+      id,
+      columns: apiRef.current.getAllColumns(),
+      row,
+      // TODO v6: remove
+      getValue: getCellValueWithDeprecationWarning
+    };
+    return params;
+  }, [apiRef, getCellValueWithDeprecationWarning]);
+  const getBaseCellParams = React.useCallback((id, field) => {
+    const row = apiRef.current.getRow(id);
+    const rowNode = apiRef.current.getRowNode(id);
+
+    if (!row || !rowNode) {
+      throw new Error(`No row with id #${id} found`);
+    }
+
+    const cellFocus = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
+    const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
+    const params = {
+      id,
+      field,
+      row,
+      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]);
+  const getCellParams = React.useCallback((id, field) => {
+    const colDef = apiRef.current.getColumn(field);
+    const value = apiRef.current.getCellValue(id, field);
+    const row = apiRef.current.getRow(id);
+    const rowNode = apiRef.current.getRowNode(id);
+
+    if (!row || !rowNode) {
+      throw new Error(`No row with id #${id} found`);
+    }
+
+    const cellFocus = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
+    const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
+    const params = {
+      id,
+      field,
+      row,
+      rowNode,
+      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,
+      formattedValue: value
+    };
+
+    if (colDef.valueFormatter) {
+      params.formattedValue = colDef.valueFormatter({
+        id,
+        field: params.field,
+        value: params.value,
+        api: apiRef.current
+      });
+    }
+
+    params.isEditable = colDef && apiRef.current.isCellEditable(params);
+    return params;
+  }, [apiRef, getCellValueWithDeprecationWarning]);
+  const getCellValue = React.useCallback((id, field) => {
+    const colDef = apiRef.current.getColumn(field);
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (!colDef && !warnedOnceMissingColumn) {
+        warnMissingColumn(field);
+      }
+    }
+
+    if (!colDef || !colDef.valueGetter) {
+      const rowModel = apiRef.current.getRow(id);
+
+      if (!rowModel) {
+        throw new Error(`No row with id #${id} found`);
+      }
+
+      return rowModel[field];
+    }
+
+    return colDef.valueGetter(getBaseCellParams(id, field));
+  }, [apiRef, getBaseCellParams]);
+  const getColumnHeaderElement = React.useCallback(field => {
+    if (!apiRef.current.rootElementRef.current) {
+      return null;
+    }
+
+    return (0, _domUtils.getGridColumnHeaderElement)(apiRef.current.rootElementRef.current, field);
+  }, [apiRef]);
+  const getRowElement = React.useCallback(id => {
+    if (!apiRef.current.rootElementRef.current) {
+      return null;
+    }
+
+    return (0, _domUtils.getGridRowElement)(apiRef.current.rootElementRef.current, id);
+  }, [apiRef]);
+  const getCellElement = React.useCallback((id, field) => {
+    if (!apiRef.current.rootElementRef.current) {
+      return null;
+    }
+
+    return (0, _domUtils.getGridCellElement)(apiRef.current.rootElementRef.current, {
+      id,
+      field
+    });
+  }, [apiRef]);
+  const paramsApi = {
+    getCellValue,
+    getCellParams,
+    getCellElement,
+    getRowParams,
+    getRowElement,
+    getColumnHeaderParams,
+    getColumnHeaderElement
+  };
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, paramsApi, 'GridParamsApi');
+}

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

@@ -0,0 +1,313 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridRows = exports.rowsStateInitializer = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _events = require("../../../models/events");
+
+var _gridRows = require("../../../models/gridRows");
+
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+
+var _useGridLogger = require("../../utils/useGridLogger");
+
+var _gridRowsSelector = require("./gridRowsSelector");
+
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+
+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; }
+
+function getGridRowId(rowModel, getRowId, detailErrorMessage) {
+  const id = getRowId ? getRowId(rowModel) : rowModel.id;
+  (0, _gridRows.checkGridRowIdIsValid)(id, rowModel, detailErrorMessage);
+  return id;
+}
+
+const convertGridRowsPropToState = ({
+  prevState,
+  rows,
+  getRowId
+}) => {
+  let value;
+
+  if (rows) {
+    value = {
+      idRowsLookup: {},
+      ids: []
+    };
+
+    for (let i = 0; i < rows.length; i += 1) {
+      const row = rows[i];
+      const id = getGridRowId(row, getRowId);
+      value.idRowsLookup[id] = row;
+      value.ids.push(id);
+    }
+  } else {
+    value = prevState.value;
+  }
+
+  return {
+    value,
+    rowsBeforePartialUpdates: rows != null ? rows : prevState.rowsBeforePartialUpdates
+  };
+};
+
+const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp) => {
+  const {
+    value
+  } = rowsCache.state;
+  const rowCount = rowCountProp != null ? rowCountProp : 0;
+  const groupingResponse = apiRef.current.unstable_groupRows((0, _extends2.default)({}, value, {
+    previousTree
+  }));
+  const dataTopLevelRowCount = Object.values(groupingResponse.tree).filter(node => node.parent == null).length;
+  const totalRowCount = rowCount > groupingResponse.ids.length ? rowCount : groupingResponse.ids.length;
+  const totalTopLevelRowCount = rowCount > dataTopLevelRowCount ? rowCount : dataTopLevelRowCount;
+  return (0, _extends2.default)({}, groupingResponse, {
+    totalRowCount,
+    totalTopLevelRowCount
+  });
+};
+
+const rowsStateInitializer = (state, props, apiRef) => {
+  const rowsCache = {
+    state: convertGridRowsPropToState({
+      rows: props.rows,
+      getRowId: props.getRowId,
+      prevState: {
+        value: {
+          idRowsLookup: {},
+          ids: []
+        },
+        rowsBeforePartialUpdates: []
+      }
+    }),
+    timeout: null,
+    lastUpdateMs: Date.now()
+  };
+  return (0, _extends2.default)({}, state, {
+    rows: getRowsStateFromCache(rowsCache, null, apiRef, props.rowCount),
+    rowsCache // TODO remove from state
+
+  });
+};
+/**
+ * @requires useGridRowGroupsPreProcessing (method)
+ */
+
+
+exports.rowsStateInitializer = rowsStateInitializer;
+
+const useGridRows = (apiRef, props) => {
+  if (process.env.NODE_ENV !== 'production') {
+    // Freeze rows for immutability
+    Object.freeze(props.rows);
+  }
+
+  const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridRows');
+  const rowsCache = React.useRef(apiRef.current.state.rowsCache); // To avoid listing rowsCache as useEffect dep
+
+  const getRow = React.useCallback(id => {
+    var _gridRowsLookupSelect;
+
+    return (_gridRowsLookupSelect = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef)[id]) != null ? _gridRowsLookupSelect : null;
+  }, [apiRef]);
+  const throttledRowsChange = React.useCallback((newState, throttle) => {
+    const run = () => {
+      rowsCache.current.timeout = null;
+      rowsCache.current.lastUpdateMs = Date.now();
+      apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+        rows: getRowsStateFromCache(rowsCache.current, (0, _gridRowsSelector.gridRowTreeSelector)(apiRef), apiRef, props.rowCount)
+      }));
+      apiRef.current.publishEvent(_events.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;
+    }
+
+    const throttleRemainingTimeMs = props.throttleRowsMs - (Date.now() - rowsCache.current.lastUpdateMs);
+
+    if (throttleRemainingTimeMs > 0) {
+      rowsCache.current.timeout = setTimeout(run, throttleRemainingTimeMs);
+      return;
+    }
+
+    run();
+  }, [props.throttleRowsMs, props.rowCount, apiRef]);
+  const setRows = React.useCallback(rows => {
+    logger.debug(`Updating all rows, new length ${rows.length}`);
+    throttledRowsChange(convertGridRowsPropToState({
+      rows,
+      prevState: rowsCache.current.state,
+      getRowId: props.getRowId
+    }), true);
+  }, [logger, props.getRowId, throttledRowsChange]);
+  const updateRows = React.useCallback(updates => {
+    if (props.signature === _useGridApiEventHandler.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 removes duplicate updates. A server can batch updates, and send several updates for the same row in one fn call.
+
+
+    const uniqUpdates = new Map();
+    updates.forEach(update => {
+      const id = getGridRowId(update, props.getRowId, 'A row was provided without id when calling updateRows():');
+
+      if (uniqUpdates.has(id)) {
+        uniqUpdates.set(id, (0, _extends2.default)({}, uniqUpdates.get(id), update));
+      } else {
+        uniqUpdates.set(id, update);
+      }
+    });
+    const deletedRowIds = [];
+    const newStateValue = {
+      idRowsLookup: (0, _extends2.default)({}, rowsCache.current.state.value.idRowsLookup),
+      ids: [...rowsCache.current.state.value.ids]
+    };
+    uniqUpdates.forEach((partialRow, id) => {
+      // eslint-disable-next-line no-underscore-dangle
+      if (partialRow._action === 'delete') {
+        delete newStateValue.idRowsLookup[id];
+        deletedRowIds.push(id);
+        return;
+      }
+
+      const oldRow = apiRef.current.getRow(id);
+
+      if (!oldRow) {
+        newStateValue.idRowsLookup[id] = partialRow;
+        newStateValue.ids.push(id);
+        return;
+      }
+
+      newStateValue.idRowsLookup[id] = (0, _extends2.default)({}, apiRef.current.getRow(id), partialRow);
+    });
+
+    if (deletedRowIds.length > 0) {
+      newStateValue.ids = newStateValue.ids.filter(id => !deletedRowIds.includes(id));
+    }
+
+    const state = (0, _extends2.default)({}, rowsCache.current.state, {
+      value: newStateValue
+    });
+    throttledRowsChange(state, true);
+  }, [apiRef, props.getRowId, throttledRowsChange, props.signature]);
+  const getRowModels = React.useCallback(() => {
+    const allRows = (0, _gridRowsSelector.gridRowIdsSelector)(apiRef);
+    const idRowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
+    return new Map(allRows.map(id => [id, idRowsLookup[id]]));
+  }, [apiRef]);
+  const getRowsCount = React.useCallback(() => (0, _gridRowsSelector.gridRowCountSelector)(apiRef), [apiRef]);
+  const getAllRowIds = React.useCallback(() => (0, _gridRowsSelector.gridRowIdsSelector)(apiRef), [apiRef]);
+  const setRowChildrenExpansion = React.useCallback((id, isExpanded) => {
+    const currentNode = apiRef.current.getRowNode(id);
+
+    if (!currentNode) {
+      throw new Error(`MUI: No row with id #${id} found`);
+    }
+
+    const newNode = (0, _extends2.default)({}, currentNode, {
+      childrenExpanded: isExpanded
+    });
+    apiRef.current.setState(state => {
+      return (0, _extends2.default)({}, state, {
+        rows: (0, _extends2.default)({}, state.rows, {
+          tree: (0, _extends2.default)({}, state.rows.tree, {
+            [id]: newNode
+          })
+        })
+      });
+    });
+    apiRef.current.forceUpdate();
+    apiRef.current.publishEvent(_events.GridEvents.rowExpansionChange, newNode);
+  }, [apiRef]);
+  const getRowNode = React.useCallback(id => {
+    var _gridRowTreeSelector$;
+
+    return (_gridRowTreeSelector$ = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef)[id]) != null ? _gridRowTreeSelector$ : null;
+  }, [apiRef]);
+  React.useEffect(() => {
+    return () => {
+      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
+
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    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 ${props.rows.length}`);
+    throttledRowsChange(convertGridRowsPropToState({
+      rows: props.rows,
+      getRowId: props.getRowId,
+      prevState: rowsCache.current.state
+    }), false);
+  }, [props.rows, props.rowCount, props.getRowId, logger, throttledRowsChange]);
+  const handleGroupRows = React.useCallback(() => {
+    logger.info(`Row grouping pre-processing have changed, regenerating the row tree`);
+    let 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,
+      getRowId: props.getRowId,
+      prevState: rowsCache.current.state
+    }), false);
+  }, [logger, throttledRowsChange, props.getRowId, props.rows]);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.rowGroupsPreProcessingChange, handleGroupRows);
+  const rowApi = {
+    getRow,
+    getRowModels,
+    getRowsCount,
+    getAllRowIds,
+    setRows,
+    updateRows,
+    setRowChildrenExpansion,
+    getRowNode
+  };
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowApi, 'GridRowApi');
+};
+
+exports.useGridRows = useGridRows;

package/node/hooks/features/rows/useGridRowsMeta.js

@@ -0,0 +1,145 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridRowsMeta = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _useCurrentPageRows = require("../../utils/useCurrentPageRows");
+
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+
+var _useGridSelector = require("../../utils/useGridSelector");
+
+var _densitySelector = require("../density/densitySelector");
+
+var _gridFilterSelector = require("../filter/gridFilterSelector");
+
+var _gridPaginationSelector = require("../pagination/gridPaginationSelector");
+
+var _gridSortingSelector = require("../sorting/gridSortingSelector");
+
+var _useGridStateInit = require("../../utils/useGridStateInit");
+
+var _gridEvents = require("../../../models/events/gridEvents");
+
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+
+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; }
+
+/**
+ * @requires useGridPageSize (method)
+ * @requires useGridPage (method)
+ */
+const useGridRowsMeta = (apiRef, props) => {
+  const {
+    getRowHeight,
+    pagination,
+    paginationMode
+  } = props;
+  const rowsHeightLookup = React.useRef({});
+  const rowHeight = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityRowHeightSelector);
+  const filterState = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterStateSelector);
+  const paginationState = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationSelector);
+  const sortingState = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortingStateSelector);
+  (0, _useGridStateInit.useGridStateInit)(apiRef, state => (0, _extends2.default)({}, state, {
+    rowsMeta: {
+      currentPageTotalHeight: 0,
+      positions: []
+    }
+  }));
+  const hydrateRowsMeta = React.useCallback(() => {
+    const {
+      rows
+    } = (0, _useCurrentPageRows.getCurrentPageRows)(apiRef, {
+      pagination,
+      paginationMode
+    });
+    apiRef.current.setState(state => {
+      const positions = [];
+      const densityFactor = (0, _densitySelector.gridDensityFactorSelector)(state, apiRef.current.instanceId);
+      const currentRowHeight = (0, _densitySelector.gridDensityRowHeightSelector)(state, apiRef.current.instanceId);
+      const currentPageTotalHeight = rows.reduce((acc, row) => {
+        positions.push(acc);
+        let baseRowHeight;
+        const isResized = rowsHeightLookup.current[row.id] && rowsHeightLookup.current[row.id].isResized || false;
+
+        if (isResized) {
+          // do not recalculate resized row height and use the value from the lookup
+          baseRowHeight = rowsHeightLookup.current[row.id].value;
+        } else {
+          baseRowHeight = currentRowHeight;
+
+          if (getRowHeight) {
+            var _getRowHeight;
+
+            // Default back to base rowHeight if getRowHeight returns null or undefined.
+            baseRowHeight = (_getRowHeight = getRowHeight((0, _extends2.default)({}, row, {
+              densityFactor
+            }))) != null ? _getRowHeight : currentRowHeight;
+          }
+        }
+
+        const heights = apiRef.current.unstable_applyPreProcessors('rowHeight', {
+          base: baseRowHeight
+        }, // We use an object to make simple to check if a size was already added or not
+        row);
+        const finalRowHeight = Object.values(heights).reduce((acc2, value) => acc2 + value, 0);
+        rowsHeightLookup.current[row.id] = {
+          value: baseRowHeight,
+          isResized
+        };
+        return acc + finalRowHeight;
+      }, 0);
+      return (0, _extends2.default)({}, state, {
+        rowsMeta: {
+          currentPageTotalHeight,
+          positions
+        }
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, pagination, paginationMode, getRowHeight]);
+
+  const getTargetRowHeight = rowId => {
+    var _rowsHeightLookup$cur;
+
+    return ((_rowsHeightLookup$cur = rowsHeightLookup.current[rowId]) == null ? void 0 : _rowsHeightLookup$cur.value) || rowHeight;
+  };
+
+  const setRowHeight = React.useCallback((id, height) => {
+    rowsHeightLookup.current[id] = {
+      value: height,
+      isResized: true
+    };
+    hydrateRowsMeta();
+  }, [hydrateRowsMeta]); // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
+  // Because of variable row height this is needed for the virtualization
+
+  React.useEffect(() => {
+    hydrateRowsMeta();
+  }, [rowHeight, filterState, paginationState, sortingState, hydrateRowsMeta]);
+  const handlePreProcessorRegister = React.useCallback(name => {
+    if (name !== 'rowHeight') {
+      return;
+    }
+
+    hydrateRowsMeta();
+  }, [hydrateRowsMeta]);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  const rowsMetaApi = {
+    unstable_getRowHeight: getTargetRowHeight,
+    unstable_setRowHeight: setRowHeight
+  };
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowsMetaApi, 'GridRowsMetaApi');
+};
+
+exports.useGridRowsMeta = useGridRowsMeta;