@mui/x-data-grid 8.0.0-alpha.1 → 8.0.0-alpha.11

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

@@ -24,42 +24,29 @@ const preferencePanelStateInitializer = (state, props) => (0, _extends2.default)
 exports.preferencePanelStateInitializer = preferencePanelStateInitializer;
 const useGridPreferencesPanel = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridPreferencesPanel');
-  const hideTimeout = React.useRef();
-  const immediateTimeout = React.useRef();
 
   /**
    * API METHODS
    */
   const hidePreferences = React.useCallback(() => {
-    logger.debug('Hiding Preferences Panel');
-    const preferencePanelState = (0, _gridPreferencePanelSelector.gridPreferencePanelStateSelector)(apiRef.current.state);
-    if (preferencePanelState.openedPanelValue) {
+    apiRef.current.setState(state => {
+      if (!state.preferencePanel.open) {
+        return state;
+      }
+      logger.debug('Hiding Preferences Panel');
+      const preferencePanelState = (0, _gridPreferencePanelSelector.gridPreferencePanelStateSelector)(state);
       apiRef.current.publishEvent('preferencePanelClose', {
         openedPanelValue: preferencePanelState.openedPanelValue
       });
-    }
-    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-      preferencePanel: {
-        open: false
-      }
-    }));
-    apiRef.current.forceUpdate();
+      return (0, _extends2.default)({}, state, {
+        preferencePanel: {
+          open: false
+        }
+      });
+    });
   }, [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
-  const doNotHidePanel = React.useCallback(() => {
-    immediateTimeout.current = setTimeout(() => 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...
-  const hidePreferencesDelayed = React.useCallback(() => {
-    hideTimeout.current = setTimeout(hidePreferences, 100);
-  }, [hidePreferences]);
   const showPreferences = React.useCallback((newValue, panelId, labelId) => {
     logger.debug('Opening Preferences Panel');
-    doNotHidePanel();
     apiRef.current.setState(state => (0, _extends2.default)({}, state, {
       preferencePanel: (0, _extends2.default)({}, state.preferencePanel, {
         open: true,
@@ -71,11 +58,10 @@ const useGridPreferencesPanel = (apiRef, props) => {
     apiRef.current.publishEvent('preferencePanelOpen', {
       openedPanelValue: newValue
     });
-    apiRef.current.forceUpdate();
-  }, [logger, doNotHidePanel, apiRef]);
+  }, [logger, apiRef]);
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, {
     showPreferences,
-    hidePreferences: hidePreferencesDelayed
+    hidePreferences
   }, 'public');
 
   /**
@@ -108,15 +94,5 @@ const useGridPreferencesPanel = (apiRef, props) => {
   }, [apiRef]);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
-
-  /**
-   * EFFECTS
-   */
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(hideTimeout.current);
-      clearTimeout(immediateTimeout.current);
-    };
-  }, []);
 };
 exports.useGridPreferencesPanel = useGridPreferencesPanel;

package/node/hooks/features/rowSelection/useGridRowSelection.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridRowSelection = exports.rowSelectionStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _signature = require("../../../constants/signature");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
@@ -55,7 +56,7 @@ const useGridRowSelection = (apiRef, props) => {
       callback(...args);
     }
   }, [props.rowSelection]);
-  const applyAutoSelection = props.signature !== _useGridApiEventHandler.GridSignature.DataGrid && (props.rowSelectionPropagation?.parents || props.rowSelectionPropagation?.descendants);
+  const applyAutoSelection = props.signature !== _signature.GridSignature.DataGrid && (props.rowSelectionPropagation?.parents || props.rowSelectionPropagation?.descendants);
   const propRowSelectionModel = React.useMemo(() => {
     return getSelectionModelPropValue(props.rowSelectionModel, (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state));
   }, [apiRef, props.rowSelectionModel]);
@@ -73,7 +74,6 @@ const useGridRowSelection = (apiRef, props) => {
     isRowSelectable: propIsRowSelectable
   } = props;
   const canHaveMultipleSelection = (0, _utils.isMultipleRowSelectionEnabled)(props);
-  const visibleRows = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
   const tree = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowTreeSelector);
   const isNestedData = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowMaximumTreeDepthSelector) > 1;
   const expandMouseRowRangeSelection = React.useCallback(id => {
@@ -104,7 +104,7 @@ const useGridRowSelection = (apiRef, props) => {
    * API METHODS
    */
   const setRowSelectionModel = React.useCallback(model => {
-    if (props.signature === _useGridApiEventHandler.GridSignature.DataGrid && !canHaveMultipleSelection && Array.isArray(model) && model.length > 1) {
+    if (props.signature === _signature.GridSignature.DataGrid && !canHaveMultipleSelection && Array.isArray(model) && model.length > 1) {
       throw new Error(['MUI X: `rowSelectionModel` can only contain 1 item in DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock multiple selection.'].join('\n'));
     }
     const currentModel = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state);
@@ -252,16 +252,12 @@ const useGridRowSelection = (apiRef, props) => {
     selectRowRange
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, selectionPublicApi, 'public');
-  (0, _useGridApiMethod.useGridApiMethod)(apiRef, selectionPrivateApi, props.signature === _useGridApiEventHandler.GridSignature.DataGrid ? 'private' : 'public');
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, selectionPrivateApi, props.signature === _signature.GridSignature.DataGrid ? 'private' : 'public');
 
   /*
    * EVENTS
    */
-  const isFirstRender = React.useRef(true);
   const removeOutdatedSelection = React.useCallback((sortModelUpdated = false) => {
-    if (isFirstRender.current) {
-      return;
-    }
     const currentSelection = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state);
     const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
     const filteredRowsLookup = (0, _gridFilterSelector.gridFilteredRowsLookupSelector)(apiRef);
@@ -272,7 +268,7 @@ const useGridRowSelection = (apiRef, props) => {
       if (props.filterMode === 'server') {
         return !rowsLookup[id];
       }
-      return filteredRowsLookup[id] !== true;
+      return !rowsLookup[id] || filteredRowsLookup[id] === false;
     };
     let hasChanged = false;
     currentSelection.forEach(id => {
@@ -326,11 +322,12 @@ const useGridRowSelection = (apiRef, props) => {
 
     const isMultipleSelectionDisabled = !checkboxSelection && !hasCtrlKey && !(0, _keyboardUtils.isKeyboardEvent)(event);
     const resetSelection = !canHaveMultipleSelection || isMultipleSelectionDisabled;
-    const isSelected = apiRef.current.isRowSelected(id);
-    if (resetSelection) {
-      apiRef.current.selectRow(id, !isMultipleSelectionDisabled ? !isSelected : true, true);
+    const selectedRowsCount = apiRef.current.getSelectedRows().size;
+    if (canHaveMultipleSelection && selectedRowsCount > 1 && !hasCtrlKey) {
+      apiRef.current.selectRow(id, true, resetSelection);
     } else {
-      apiRef.current.selectRow(id, !isSelected, false);
+      const isSelected = apiRef.current.isRowSelected(id);
+      apiRef.current.selectRow(id, !isSelected, resetSelection);
     }
   }, [apiRef, canHaveMultipleSelection, checkboxSelection]);
   const handleRowClick = React.useCallback((params, event) => {
@@ -425,6 +422,7 @@ const useGridRowSelection = (apiRef, props) => {
             end = previousRowIndex;
           }
         }
+        const visibleRows = (0, _useGridVisibleRows.getVisibleRows)(apiRef);
         const rowsBetweenStartAndEnd = visibleRows.rows.slice(start, end + 1).map(row => row.id);
         apiRef.current.selectRows(rowsBetweenStartAndEnd, !isNextRowSelected);
         return;
@@ -439,7 +437,7 @@ const useGridRowSelection = (apiRef, props) => {
       event.preventDefault();
       selectRows(apiRef.current.getAllRowIds(), true);
     }
-  }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
+  }, [apiRef, handleSingleRowSelection, selectRows, canHaveMultipleSelection]);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'sortedRowsSet', runIfRowSelectionIsEnabled(() => removeOutdatedSelection(true)));
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'filteredRowsSet', runIfRowSelectionIsEnabled(removeOutdatedSelection));
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowClick', runIfRowSelectionIsEnabled(handleRowClick));
@@ -489,10 +487,5 @@ const useGridRowSelection = (apiRef, props) => {
   React.useEffect(() => {
     runIfRowSelectionIsEnabled(removeOutdatedSelection);
   }, [removeOutdatedSelection, runIfRowSelectionIsEnabled]);
-  React.useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-    }
-  }, []);
 };
 exports.useGridRowSelection = useGridRowSelection;

package/node/hooks/features/rowSelection/utils.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.findRowsToSelect = exports.findRowsToDeselect = exports.ROW_SELECTION_PROPAGATION_DEFAULT = void 0;
 exports.getCheckboxPropsSelector = getCheckboxPropsSelector;
 exports.isMultipleRowSelectionEnabled = isMultipleRowSelectionEnabled;
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _signature = require("../../../constants/signature");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _gridSortingSelector = require("../sorting/gridSortingSelector");
@@ -14,8 +14,8 @@ var _gridRowSelectionSelector = require("./gridRowSelectionSelector");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _createSelector = require("../../../utils/createSelector");
 const ROW_SELECTION_PROPAGATION_DEFAULT = exports.ROW_SELECTION_PROPAGATION_DEFAULT = {
-  parents: false,
-  descendants: false
+  parents: true,
+  descendants: true
 };
 function getGridRowGroupSelectableDescendants(apiRef, groupId) {
   const rowTree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
@@ -71,7 +71,7 @@ function getCheckboxPropsSelector(groupId, autoSelectParents) {
   });
 }
 function isMultipleRowSelectionEnabled(props) {
-  if (props.signature === _useGridApiEventHandler.GridSignature.DataGrid) {
+  if (props.signature === _signature.GridSignature.DataGrid) {
     // DataGrid Community has multiple row selection enabled only if checkbox selection is enabled.
     return props.checkboxSelection && props.disableMultipleRowSelection !== true;
   }
@@ -100,7 +100,7 @@ const getFilteredRowNodeSiblings = (tree, filteredRows, id) => {
     return [];
   }
   const parentNode = tree[parent];
-  return parentNode.children.filter(childId => childId !== id && filteredRows[childId]);
+  return parentNode.children.filter(childId => childId !== id && filteredRows[childId] !== false);
 };
 const findRowsToSelect = (apiRef, tree, selectedRow, autoSelectDescendants, autoSelectParents, addRow) => {
   const filteredRows = (0, _gridFilterSelector.gridFilteredRowsLookupSelector)(apiRef);

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridTopLevelRowCountSelector = exports.gridRowsLookupSelector = exports.gridRowsLoadingSelector = exports.gridRowsDataRowIdToIdLookupSelector = exports.gridRowTreeSelector = exports.gridRowTreeDepthsSelector = exports.gridRowMaximumTreeDepthSelector = exports.gridRowGroupsToFetchSelector = exports.gridRowGroupingNameSelector = exports.gridRowCountSelector = exports.gridPinnedRowsSelector = exports.gridPinnedRowsCountSelector = exports.gridDataRowIdsSelector = exports.gridAdditionalRowGroupsSelector = void 0;
+exports.gridTopLevelRowCountSelector = exports.gridRowsLookupSelector = exports.gridRowsLoadingSelector = exports.gridRowTreeSelector = exports.gridRowTreeDepthsSelector = exports.gridRowMaximumTreeDepthSelector = exports.gridRowGroupsToFetchSelector = exports.gridRowGroupingNameSelector = exports.gridRowCountSelector = exports.gridPinnedRowsSelector = exports.gridPinnedRowsCountSelector = exports.gridDataRowIdsSelector = exports.gridAdditionalRowGroupsSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 const gridRowsStateSelector = state => state.rows;
 const gridRowCountSelector = exports.gridRowCountSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.totalRowCount);
@@ -12,7 +12,6 @@ const gridTopLevelRowCountSelector = exports.gridTopLevelRowCountSelector = (0,
 
 // TODO rows v6: Rename
 const gridRowsLookupSelector = exports.gridRowsLookupSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.dataRowIdToModelLookup);
-const gridRowsDataRowIdToIdLookupSelector = exports.gridRowsDataRowIdToIdLookupSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.dataRowIdToIdLookup);
 const gridRowTreeSelector = exports.gridRowTreeSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.tree);
 const gridRowGroupsToFetchSelector = exports.gridRowGroupsToFetchSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.groupsToFetch);
 const gridRowGroupingNameSelector = exports.gridRowGroupingNameSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.groupingName);
@@ -22,7 +21,7 @@ const gridRowMaximumTreeDepthSelector = exports.gridRowMaximumTreeDepthSelector
   if (entries.length === 0) {
     return 1;
   }
-  return entries.filter(([, nodeCount]) => nodeCount > 0).map(([depth]) => Number(depth)).sort((a, b) => b - a)[0] + 1;
+  return (entries.filter(([, nodeCount]) => nodeCount > 0).map(([depth]) => Number(depth)).sort((a, b) => b - a)[0] ?? 0) + 1;
 });
 const gridDataRowIdsSelector = exports.gridDataRowIdsSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.dataRowIds);
 

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

@@ -5,12 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.buildRootGroup = exports.GRID_ROOT_GROUP_ID = exports.GRID_ID_AUTOGENERATED = void 0;
-exports.calculatePinnedRowsHeight = calculatePinnedRowsHeight;
 exports.checkGridRowIdIsValid = checkGridRowIdIsValid;
 exports.computeRowsUpdates = computeRowsUpdates;
 exports.updateCacheWithNewRows = exports.rowHeightWarning = exports.minimalContentHeight = exports.isAutogeneratedRowNode = exports.isAutogeneratedRow = exports.getValidRowHeight = exports.getTreeNodeDescendants = exports.getTopLevelRowCount = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = exports.getRowHeightWarning = exports.createRowsInternalCache = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _gridRowsSelector = require("./gridRowsSelector");
 const GRID_ROOT_GROUP_ID = exports.GRID_ROOT_GROUP_ID = `auto-generated-group-node-root`;
 const GRID_ID_AUTOGENERATED = exports.GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated');
 const buildRootGroup = () => ({
@@ -55,12 +53,10 @@ const createRowsInternalCache = ({
     rows: []
   };
   const dataRowIdToModelLookup = {};
-  const dataRowIdToIdLookup = {};
   for (let i = 0; i < rows.length; i += 1) {
     const model = rows[i];
     const id = getRowIdFromRowModel(model, getRowId);
     dataRowIdToModelLookup[id] = model;
-    dataRowIdToIdLookup[id] = id;
     updates.rows.push(id);
   }
   return {
@@ -68,7 +64,6 @@ const createRowsInternalCache = ({
     loadingPropBeforePartialUpdates: loading,
     rowCountPropBeforePartialUpdates: rowCount,
     updates,
-    dataRowIdToIdLookup,
     dataRowIdToModelLookup
   };
 };
@@ -102,7 +97,6 @@ const getRowsStateFromCache = ({
     previousTree,
     previousTreeDepths,
     updates: cache.updates,
-    dataRowIdToIdLookup: cache.dataRowIdToIdLookup,
     dataRowIdToModelLookup: cache.dataRowIdToModelLookup,
     previousGroupsToFetch
   });
@@ -111,7 +105,6 @@ const getRowsStateFromCache = ({
   const groupingParamsWithHydrateRows = apiRef.current.unstable_applyPipeProcessors('hydrateRows', {
     tree: unProcessedTree,
     treeDepths: unProcessedTreeDepths,
-    dataRowIdToIdLookup: cache.dataRowIdToIdLookup,
     dataRowIds: unProcessedDataRowIds,
     dataRowIdToModelLookup: cache.dataRowIdToModelLookup
   });
@@ -196,7 +189,6 @@ const updateCacheWithNewRows = ({
     groupKeys
   };
   const dataRowIdToModelLookup = (0, _extends2.default)({}, previousCache.dataRowIdToModelLookup);
-  const dataRowIdToIdLookup = (0, _extends2.default)({}, previousCache.dataRowIdToIdLookup);
   const alreadyAppliedActionsToRemove = {
     insert: {},
     modify: {},
@@ -229,7 +221,6 @@ const updateCacheWithNewRows = ({
       // Remove the data row from the lookups and add it to the "delete" update.
       partialUpdates.actions.remove.push(id);
       delete dataRowIdToModelLookup[id];
-      delete dataRowIdToIdLookup[id];
       return;
     }
     const oldRow = dataRowIdToModelLookup[id];
@@ -269,7 +260,6 @@ const updateCacheWithNewRows = ({
 
     // Update the data row lookups.
     dataRowIdToModelLookup[id] = partialRow;
-    dataRowIdToIdLookup[id] = id;
   });
   const actionTypeWithActionsToRemove = Object.keys(alreadyAppliedActionsToRemove);
   for (let i = 0; i < actionTypeWithActionsToRemove.length; i += 1) {
@@ -281,7 +271,6 @@ const updateCacheWithNewRows = ({
   }
   return {
     dataRowIdToModelLookup,
-    dataRowIdToIdLookup,
     updates: partialUpdates,
     rowsBeforePartialUpdates: previousCache.rowsBeforePartialUpdates,
     loadingPropBeforePartialUpdates: previousCache.loadingPropBeforePartialUpdates,
@@ -289,21 +278,6 @@ const updateCacheWithNewRows = ({
   };
 };
 exports.updateCacheWithNewRows = updateCacheWithNewRows;
-function calculatePinnedRowsHeight(apiRef) {
-  const pinnedRows = (0, _gridRowsSelector.gridPinnedRowsSelector)(apiRef);
-  const topPinnedRowsHeight = pinnedRows?.top?.reduce((acc, value) => {
-    acc += apiRef.current.unstable_getRowHeight(value.id);
-    return acc;
-  }, 0) || 0;
-  const bottomPinnedRowsHeight = pinnedRows?.bottom?.reduce((acc, value) => {
-    acc += apiRef.current.unstable_getRowHeight(value.id);
-    return acc;
-  }, 0) || 0;
-  return {
-    top: topPinnedRowsHeight,
-    bottom: bottomPinnedRowsHeight
-  };
-}
 const minimalContentHeight = exports.minimalContentHeight = 'var(--DataGrid-overlayHeight, calc(var(--height) * 2))';
 function computeRowsUpdates(apiRef, updates, getRowId) {
   const nonPinnedRowsUpdates = [];

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

@@ -8,7 +8,6 @@ var _exportNames = {
   gridRowsLoadingSelector: true,
   gridTopLevelRowCountSelector: true,
   gridRowsLookupSelector: true,
-  gridRowsDataRowIdToIdLookupSelector: true,
   gridRowTreeSelector: true,
   gridRowGroupingNameSelector: true,
   gridRowTreeDepthsSelector: true,
@@ -66,12 +65,6 @@ Object.defineProperty(exports, "gridRowTreeSelector", {
     return _gridRowsSelector.gridRowTreeSelector;
   }
 });
-Object.defineProperty(exports, "gridRowsDataRowIdToIdLookupSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector;
-  }
-});
 Object.defineProperty(exports, "gridRowsLoadingSelector", {
   enumerable: true,
   get: function () {

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

@@ -39,37 +39,52 @@ function useGridParamsApi(apiRef, props) {
     };
     return params;
   }, [apiRef]);
-  const getCellParams = React.useCallback((id, field) => {
-    const colDef = props.unstable_listView ? (0, _gridListViewSelectors.gridListColumnSelector)(apiRef.current.state) : apiRef.current.getColumn(field);
-    const row = apiRef.current.getRow(id);
-    const rowNode = apiRef.current.getRowNode(id);
-    if (!row || !rowNode) {
-      throw new MissingRowIdError(`No row with id #${id} found`);
-    }
+  const getCellParamsForRow = React.useCallback((id, field, row, {
+    cellMode,
+    colDef,
+    hasFocus,
+    rowNode,
+    tabIndex
+  }) => {
     const rawValue = row[field];
     const value = colDef?.valueGetter ? colDef.valueGetter(rawValue, row, colDef, apiRef) : rawValue;
-    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),
-      hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,
-      tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1,
+      cellMode,
+      hasFocus,
+      tabIndex,
       value,
       formattedValue: value,
       isEditable: false,
-      api: {}
+      api: null
     };
     if (colDef && colDef.valueFormatter) {
       params.formattedValue = colDef.valueFormatter(value, row, colDef, apiRef);
     }
     params.isEditable = colDef && apiRef.current.isCellEditable(params);
     return params;
-  }, [apiRef, props.unstable_listView]);
+  }, [apiRef]);
+  const getCellParams = React.useCallback((id, field) => {
+    const row = apiRef.current.getRow(id);
+    const rowNode = apiRef.current.getRowNode(id);
+    if (!row || !rowNode) {
+      throw new MissingRowIdError(`No row with id #${id} found`);
+    }
+    const cellFocus = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
+    const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
+    const cellMode = apiRef.current.getCellMode(id, field);
+    return apiRef.current.getCellParamsForRow(id, field, row, {
+      colDef: props.unstable_listView && props.unstable_listColumn?.field === field ? (0, _gridListViewSelectors.gridListColumnSelector)(apiRef.current.state) : apiRef.current.getColumn(field),
+      rowNode,
+      hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,
+      tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1,
+      cellMode
+    });
+  }, [apiRef, props.unstable_listView, props.unstable_listColumn?.field]);
   const getCellValue = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
     const row = apiRef.current.getRow(id);
@@ -128,5 +143,9 @@ function useGridParamsApi(apiRef, props) {
     getColumnHeaderParams,
     getColumnHeaderElement
   };
+  const paramsPrivateApi = {
+    getCellParamsForRow
+  };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, paramsApi, 'public');
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, paramsPrivateApi, 'private');
 }