@mui/x-data-grid 8.0.0-alpha.0 → 8.0.0-alpha.10

package/hooks/features/preferencesPanel/gridPreferencePanelSelector.js

@@ -1 +1,8 @@
-export const gridPreferencePanelStateSelector = state => state.preferencePanel;
+import { createSelector } from "../../../utils/createSelector.js";
+export const gridPreferencePanelStateSelector = state => state.preferencePanel;
+export const gridPreferencePanelSelectorWithLabel = createSelector(gridPreferencePanelStateSelector, (panel, labelId) => {
+  if (panel.open && panel.labelId === labelId) {
+    return true;
+  }
+  return false;
+});

package/hooks/features/preferencesPanel/index.d.ts

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

package/hooks/features/preferencesPanel/index.js

@@ -1,3 +1,3 @@
-export * from "./gridPreferencePanelSelector.js";
+export { gridPreferencePanelStateSelector } from "./gridPreferencePanelSelector.js";
 export * from "./gridPreferencePanelState.js";
 export * from "./gridPreferencePanelsValue.js";

package/hooks/features/preferencesPanel/useGridPreferencesPanel.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
@@ -6,4 +6,4 @@ export declare const preferencePanelStateInitializer: GridStateInitializer<Pick<
 /**
  * TODO: Add a single `setPreferencePanel` method to avoid multiple `setState`
  */
-export declare const useGridPreferencesPanel: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState">) => void;
+export declare const useGridPreferencesPanel: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState">) => void;

package/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -15,42 +15,29 @@ export const preferencePanelStateInitializer = (state, props) => _extends({}, st
  */
 export const useGridPreferencesPanel = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
-  const hideTimeout = React.useRef();
-  const immediateTimeout = React.useRef();
 
   /**
    * API METHODS
    */
   const hidePreferences = React.useCallback(() => {
-    logger.debug('Hiding Preferences Panel');
-    const preferencePanelState = gridPreferencePanelStateSelector(apiRef.current.state);
-    if (preferencePanelState.openedPanelValue) {
+    apiRef.current.setState(state => {
+      if (!state.preferencePanel.open) {
+        return state;
+      }
+      logger.debug('Hiding Preferences Panel');
+      const preferencePanelState = gridPreferencePanelStateSelector(state);
       apiRef.current.publishEvent('preferencePanelClose', {
         openedPanelValue: preferencePanelState.openedPanelValue
       });
-    }
-    apiRef.current.setState(state => _extends({}, state, {
-      preferencePanel: {
-        open: false
-      }
-    }));
-    apiRef.current.forceUpdate();
+      return _extends({}, 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 => _extends({}, state, {
       preferencePanel: _extends({}, state.preferencePanel, {
         open: true,
@@ -62,11 +49,10 @@ export const useGridPreferencesPanel = (apiRef, props) => {
     apiRef.current.publishEvent('preferencePanelOpen', {
       openedPanelValue: newValue
     });
-    apiRef.current.forceUpdate();
-  }, [logger, doNotHidePanel, apiRef]);
+  }, [logger, apiRef]);
   useGridApiMethod(apiRef, {
     showPreferences,
-    hidePreferences: hidePreferencesDelayed
+    hidePreferences
   }, 'public');
 
   /**
@@ -99,14 +85,4 @@ export const useGridPreferencesPanel = (apiRef, props) => {
   }, [apiRef]);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-
-  /**
-   * EFFECTS
-   */
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(hideTimeout.current);
-      clearTimeout(immediateTimeout.current);
-    };
-  }, []);
 };

package/hooks/features/rowSelection/gridRowSelectionSelector.d.ts

@@ -1,6 +1,6 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 import { GridRowId } from '../../../models/gridRows';
 export declare const gridRowSelectionStateSelector: (state: GridStateCommunity) => import("../../..").GridRowSelectionModel;
-export declare const selectedGridRowsCountSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
-export declare const selectedGridRowsSelector: import("../../..").OutputSelector<GridStateCommunity, Map<GridRowId, import("../../..").GridValidRowModel>>;
-export declare const selectedIdsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, Record<GridRowId, GridRowId>>;
+export declare const selectedGridRowsCountSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowSelectionModel, number>;
+export declare const selectedGridRowsSelector: import("../../..").OutputSelector<GridStateCommunity, import("..").GridRowIdToModelLookup<import("../../..").GridValidRowModel>, Map<GridRowId, import("../../..").GridValidRowModel>>;
+export declare const selectedIdsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowSelectionModel, Record<GridRowId, GridRowId>>;

package/hooks/features/rowSelection/useGridRowSelection.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
@@ -9,4 +9,4 @@ export declare const rowSelectionStateInitializer: GridStateInitializer<Pick<Dat
  * @requires useGridFocus (state) - can be after
  * @requires useGridKeyboardNavigation (`cellKeyDown` event must first be consumed by it)
  */
-export declare const useGridRowSelection: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "checkboxSelection" | "rowSelectionModel" | "onRowSelectionModelChange" | "disableMultipleRowSelection" | "disableRowSelectionOnClick" | "isRowSelectable" | "checkboxSelectionVisibleOnly" | "pagination" | "paginationMode" | "filterMode" | "classes" | "keepNonExistentRowsSelected" | "rowSelection" | "rowSelectionPropagation" | "signature">) => void;
+export declare const useGridRowSelection: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "checkboxSelection" | "rowSelectionModel" | "onRowSelectionModelChange" | "disableMultipleRowSelection" | "disableRowSelectionOnClick" | "isRowSelectable" | "checkboxSelectionVisibleOnly" | "pagination" | "paginationMode" | "filterMode" | "classes" | "keepNonExistentRowsSelected" | "rowSelection" | "rowSelectionPropagation" | "signature">) => void;

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -12,7 +12,7 @@ import { gridExpandedSortedRowIdsSelector, gridFilteredRowsLookupSelector } from
 import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from "../../../colDef/index.js";
 import { GridCellModes } from "../../../models/gridEditRowModel.js";
 import { isKeyboardEvent, isNavigationKey } from "../../../utils/keyboardUtils.js";
-import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
+import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { isEventTargetInPortal } from "../../../utils/domUtils.js";
@@ -64,7 +64,6 @@ export const useGridRowSelection = (apiRef, props) => {
     isRowSelectable: propIsRowSelectable
   } = props;
   const canHaveMultipleSelection = isMultipleRowSelectionEnabled(props);
-  const visibleRows = useGridVisibleRows(apiRef, props);
   const tree = useGridSelector(apiRef, gridRowTreeSelector);
   const isNestedData = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector) > 1;
   const expandMouseRowRangeSelection = React.useCallback(id => {
@@ -248,11 +247,7 @@ export const useGridRowSelection = (apiRef, props) => {
   /*
    * EVENTS
    */
-  const isFirstRender = React.useRef(true);
   const removeOutdatedSelection = React.useCallback((sortModelUpdated = false) => {
-    if (isFirstRender.current) {
-      return;
-    }
     const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
     const rowsLookup = gridRowsLookupSelector(apiRef);
     const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
@@ -317,11 +312,12 @@ export const useGridRowSelection = (apiRef, props) => {
 
     const isMultipleSelectionDisabled = !checkboxSelection && !hasCtrlKey && !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) => {
@@ -416,6 +412,7 @@ export const useGridRowSelection = (apiRef, props) => {
             end = previousRowIndex;
           }
         }
+        const visibleRows = getVisibleRows(apiRef);
         const rowsBetweenStartAndEnd = visibleRows.rows.slice(start, end + 1).map(row => row.id);
         apiRef.current.selectRows(rowsBetweenStartAndEnd, !isNextRowSelected);
         return;
@@ -430,7 +427,7 @@ export const useGridRowSelection = (apiRef, props) => {
       event.preventDefault();
       selectRows(apiRef.current.getAllRowIds(), true);
     }
-  }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
+  }, [apiRef, handleSingleRowSelection, selectRows, canHaveMultipleSelection]);
   useGridApiEventHandler(apiRef, 'sortedRowsSet', runIfRowSelectionIsEnabled(() => removeOutdatedSelection(true)));
   useGridApiEventHandler(apiRef, 'filteredRowsSet', runIfRowSelectionIsEnabled(removeOutdatedSelection));
   useGridApiEventHandler(apiRef, 'rowClick', runIfRowSelectionIsEnabled(handleRowClick));
@@ -480,9 +477,4 @@ export const useGridRowSelection = (apiRef, props) => {
   React.useEffect(() => {
     runIfRowSelectionIsEnabled(removeOutdatedSelection);
   }, [removeOutdatedSelection, runIfRowSelectionIsEnabled]);
-  React.useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-    }
-  }, []);
 };

package/hooks/features/rowSelection/useGridRowSelectionPreProcessors.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
-export declare const useGridRowSelectionPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps) => void;
+export declare const useGridRowSelectionPreProcessors: (apiRef: RefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps) => void;

package/hooks/features/rowSelection/utils.d.ts

@@ -1,12 +1,13 @@
+import { RefObject } from '@mui/x-internals/types';
 import type { GridRowId, GridRowTreeConfig } from '../../../models/gridRows';
 import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import type { GridRowSelectionPropagation } from '../../../models/gridRowSelectionModel';
 export declare const ROW_SELECTION_PROPAGATION_DEFAULT: GridRowSelectionPropagation;
-export declare function getCheckboxPropsSelector(groupId: GridRowId, autoSelectParents: boolean): import("../../..").OutputSelector<import("../../../models/gridStateCommunity").GridStateCommunity, {
+export declare function getCheckboxPropsSelector(groupId: GridRowId, autoSelectParents: boolean): import("../../..").OutputSelector<import("../../../models/gridStateCommunity").GridStateCommunity, Record<GridRowId, GridRowId>, {
     isIndeterminate: boolean;
     isChecked: boolean;
 }>;
 export declare function isMultipleRowSelectionEnabled(props: Pick<DataGridProcessedProps, 'signature' | 'disableMultipleRowSelection' | 'checkboxSelection'>): boolean;
-export declare const findRowsToSelect: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, tree: GridRowTreeConfig, selectedRow: GridRowId, autoSelectDescendants: boolean, autoSelectParents: boolean, addRow: (rowId: GridRowId) => void) => void;
-export declare const findRowsToDeselect: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, tree: GridRowTreeConfig, deselectedRow: GridRowId, autoSelectDescendants: boolean, autoSelectParents: boolean, removeRow: (rowId: GridRowId) => void) => void;
+export declare const findRowsToSelect: (apiRef: RefObject<GridPrivateApiCommunity>, tree: GridRowTreeConfig, selectedRow: GridRowId, autoSelectDescendants: boolean, autoSelectParents: boolean, addRow: (rowId: GridRowId) => void) => void;
+export declare const findRowsToDeselect: (apiRef: RefObject<GridPrivateApiCommunity>, tree: GridRowTreeConfig, deselectedRow: GridRowId, autoSelectDescendants: boolean, autoSelectParents: boolean, removeRow: (rowId: GridRowId) => void) => void;

package/hooks/features/rowSelection/utils.js

@@ -6,8 +6,8 @@ import { selectedIdsLookupSelector } from "./gridRowSelectionSelector.js";
 import { gridRowTreeSelector } from "../rows/gridRowsSelector.js";
 import { createSelector } from "../../../utils/createSelector.js";
 export const ROW_SELECTION_PROPAGATION_DEFAULT = {
-  parents: false,
-  descendants: false
+  parents: true,
+  descendants: true
 };
 function getGridRowGroupSelectableDescendants(apiRef, groupId) {
   const rowTree = gridRowTreeSelector(apiRef);

package/hooks/features/rows/gridRowSpanningSelectors.d.ts

@@ -1,4 +1,4 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
-export declare const gridRowSpanningHiddenCellsSelector: import("../../..").OutputSelector<GridStateCommunity, Record<import("../../..").GridRowId, Record<string, boolean>>>;
-export declare const gridRowSpanningSpannedCellsSelector: import("../../..").OutputSelector<GridStateCommunity, Record<import("../../..").GridRowId, Record<string, number>>>;
-export declare const gridRowSpanningHiddenCellsOriginMapSelector: import("../../..").OutputSelector<GridStateCommunity, Record<number, Record<string, number>>>;
+export declare const gridRowSpanningHiddenCellsSelector: import("../../..").OutputSelector<GridStateCommunity, import("./useGridRowSpanning").GridRowSpanningState, Record<import("../../..").GridRowId, Record<string, boolean>>>;
+export declare const gridRowSpanningSpannedCellsSelector: import("../../..").OutputSelector<GridStateCommunity, import("./useGridRowSpanning").GridRowSpanningState, Record<import("../../..").GridRowId, Record<string, number>>>;
+export declare const gridRowSpanningHiddenCellsOriginMapSelector: import("../../..").OutputSelector<GridStateCommunity, import("./useGridRowSpanning").GridRowSpanningState, Record<number, Record<string, number>>>;

package/hooks/features/rows/gridRowSpanningUtils.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import type { GridRenderContext } from '../../../models';
 import type { GridValidRowModel } from '../../../models/gridRows';
 import type { GridColDef } from '../../../models/colDef';
@@ -7,4 +7,4 @@ import type { RowRange } from './useGridRowSpanning';
 export declare function getUnprocessedRange(testRange: RowRange, processedRange: RowRange): RowRange | null;
 export declare function isRowContextInitialized(renderContext: GridRenderContext): boolean;
 export declare function isRowRangeUpdated(range1: RowRange, range2: RowRange): boolean;
-export declare const getCellValue: (row: GridValidRowModel, colDef: GridColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => any;
+export declare const getCellValue: (row: GridValidRowModel, colDef: GridColDef, apiRef: RefObject<GridApiCommunity>) => any;

package/hooks/features/rows/gridRowsInterfaces.d.ts

@@ -18,10 +18,6 @@ export interface GridRowsInternalCache {
      * Lookup containing the latest model at all time (even those not stored in the state yet).
      */
     dataRowIdToModelLookup: GridRowIdToModelLookup;
-    /**
-     * Lookup containing the latest ids at all time (even those not stored in the state yet).
-     */
-    dataRowIdToIdLookup: GridRowIdToIdLookup;
     /**
      * List of updates (partial or full) applied since the last time the state was synced with the cache.
      * It is used to build the tree.
@@ -59,7 +55,6 @@ export interface GridRowsState {
      */
     totalTopLevelRowCount: number;
     dataRowIdToModelLookup: GridRowIdToModelLookup;
-    dataRowIdToIdLookup: GridRowIdToIdLookup;
     additionalRowGroups?: {
         pinnedRows?: GridPinnedRowsState;
     };
@@ -74,7 +69,6 @@ export interface GridRowTreeCreationParams {
     previousTree: GridRowTreeConfig | null;
     previousTreeDepths: GridTreeDepths | null;
     updates: GridRowsPartialUpdates | GridRowsFullUpdate;
-    dataRowIdToIdLookup: GridRowIdToIdLookup;
     dataRowIdToModelLookup: GridRowIdToModelLookup;
     previousGroupsToFetch?: GridRowId[];
 }
@@ -91,10 +85,9 @@ export type GridRowTreeUpdatedGroupsManager = {
 export type GridRowTreeCreationValue = Pick<GridRowsState, 'groupingName' | 'tree' | 'treeDepths' | 'dataRowIds' | 'groupsToFetch'> & {
     updatedGroupsManager?: GridRowTreeUpdatedGroupsManager;
 };
-export type GridHydrateRowsValue = Pick<GridRowsState, 'tree' | 'treeDepths' | 'dataRowIds' | 'dataRowIdToIdLookup' | 'dataRowIdToModelLookup' | 'additionalRowGroups'>;
+export type GridHydrateRowsValue = Pick<GridRowsState, 'tree' | 'treeDepths' | 'dataRowIds' | 'dataRowIdToModelLookup' | 'additionalRowGroups'>;
 export type GridRowsPartialUpdateAction = 'insert' | 'modify' | 'remove';
 export type GridRowIdToModelLookup<R extends GridValidRowModel = GridValidRowModel> = Record<string, R>;
-export type GridRowIdToIdLookup = Record<string, GridRowId>;
 export type GridTreeDepths = {
     [depth: number]: number;
 };

package/hooks/features/rows/gridRowsSelector.d.ts

@@ -1,25 +1,26 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
-export declare const gridRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
-export declare const gridRowsLoadingSelector: import("../../..").OutputSelector<GridStateCommunity, boolean | undefined>;
-export declare const gridTopLevelRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
-export declare const gridRowsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowIdToModelLookup<import("../../..").GridValidRowModel>>;
-export declare const gridRowsDataRowIdToIdLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowIdToIdLookup>;
-export declare const gridRowTreeSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowTreeConfig>;
-export declare const gridRowGroupsToFetchSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowId[] | undefined>;
-export declare const gridRowGroupingNameSelector: import("../../..").OutputSelector<GridStateCommunity, string>;
-export declare const gridRowTreeDepthsSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridTreeDepths>;
-export declare const gridRowMaximumTreeDepthSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
-export declare const gridDataRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowId[]>;
+export declare const gridRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowsState, number>;
+export declare const gridRowsLoadingSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowsState, boolean | undefined>;
+export declare const gridTopLevelRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowsState, number>;
+export declare const gridRowsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowsState, import("./gridRowsInterfaces").GridRowIdToModelLookup<import("../../..").GridValidRowModel>>;
+export declare const gridRowTreeSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowsState, import("../../..").GridRowTreeConfig>;
+export declare const gridRowGroupsToFetchSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowsState, import("../../..").GridRowId[] | undefined>;
+export declare const gridRowGroupingNameSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowsState, string>;
+export declare const gridRowTreeDepthsSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowsState, import("./gridRowsInterfaces").GridTreeDepths>;
+export declare const gridRowMaximumTreeDepthSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowsState, number>;
+export declare const gridDataRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowsState, import("../../..").GridRowId[]>;
 /**
  * @ignore - do not document.
  */
-export declare const gridAdditionalRowGroupsSelector: import("../../..").OutputSelector<GridStateCommunity, {
+export declare const gridAdditionalRowGroupsSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowsState, {
     pinnedRows?: import("./gridRowsInterfaces").GridPinnedRowsState;
 } | undefined>;
 /**
  * @ignore - do not document.
  */
 export declare const gridPinnedRowsSelector: import("../../..").OutputSelector<GridStateCommunity, {
+    pinnedRows?: import("./gridRowsInterfaces").GridPinnedRowsState;
+} | undefined, {
     bottom: {
         id: import("../../..").GridRowId;
         model: import("../../..").GridValidRowModel;
@@ -32,4 +33,13 @@ export declare const gridPinnedRowsSelector: import("../../..").OutputSelector<G
 /**
  * @ignore - do not document.
  */
-export declare const gridPinnedRowsCountSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridPinnedRowsCountSelector: import("../../..").OutputSelector<GridStateCommunity, {
+    bottom: {
+        id: import("../../..").GridRowId;
+        model: import("../../..").GridValidRowModel;
+    }[];
+    top: {
+        id: import("../../..").GridRowId;
+        model: import("../../..").GridValidRowModel;
+    }[];
+}, number>;

package/hooks/features/rows/gridRowsSelector.js

@@ -6,7 +6,6 @@ export const gridTopLevelRowCountSelector = createSelector(gridRowsStateSelector
 
 // TODO rows v6: Rename
 export const gridRowsLookupSelector = createSelector(gridRowsStateSelector, rows => rows.dataRowIdToModelLookup);
-export const gridRowsDataRowIdToIdLookupSelector = createSelector(gridRowsStateSelector, rows => rows.dataRowIdToIdLookup);
 export const gridRowTreeSelector = createSelector(gridRowsStateSelector, rows => rows.tree);
 export const gridRowGroupsToFetchSelector = createSelector(gridRowsStateSelector, rows => rows.groupsToFetch);
 export const gridRowGroupingNameSelector = createSelector(gridRowsStateSelector, rows => rows.groupingName);
@@ -16,7 +15,7 @@ export const gridRowMaximumTreeDepthSelector = createSelectorMemoized(gridRowsSt
   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;
 });
 export const gridDataRowIdsSelector = createSelector(gridRowsStateSelector, rows => rows.dataRowIds);
 

package/hooks/features/rows/gridRowsUtils.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridAutoGeneratedGroupNode, GridAutoGeneratedPinnedRowNode, GridFooterNode, GridGroupNode, GridRowId, GridRowIdGetter, GridRowModel, GridRowModelUpdate, GridRowTreeConfig, GridSkeletonRowNode, GridTreeNode } from '../../../models';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridApiCommunity, GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
@@ -20,7 +20,7 @@ export declare const getTopLevelRowCount: ({ tree, rowCountProp, }: {
     rowCountProp: DataGridProcessedProps["rowCount"];
 }) => number;
 export declare const getRowsStateFromCache: ({ apiRef, rowCountProp, loadingProp, previousTree, previousTreeDepths, previousGroupsToFetch, }: Pick<GridRowTreeCreationParams, "previousTree" | "previousTreeDepths" | "previousGroupsToFetch"> & {
-    apiRef: React.MutableRefObject<GridPrivateApiCommunity>;
+    apiRef: RefObject<GridPrivateApiCommunity>;
     rowCountProp: number | undefined;
     loadingProp: boolean | undefined;
 }) => GridRowsState;
@@ -33,12 +33,12 @@ export declare const updateCacheWithNewRows: ({ previousCache, getRowId, updates
     updates: GridRowModelUpdate[];
     groupKeys?: string[];
 }) => GridRowsInternalCache;
-export declare function calculatePinnedRowsHeight(apiRef: React.MutableRefObject<GridApiCommunity>): {
+export declare function calculatePinnedRowsHeight(apiRef: RefObject<GridApiCommunity>): {
     top: number;
     bottom: number;
 };
 export declare const minimalContentHeight = "var(--DataGrid-overlayHeight, calc(var(--height) * 2))";
-export declare function computeRowsUpdates(apiRef: React.MutableRefObject<GridApiCommunity>, updates: GridRowModelUpdate[], getRowId: DataGridProcessedProps['getRowId']): GridRowModelUpdate[];
+export declare function computeRowsUpdates(apiRef: RefObject<GridApiCommunity>, updates: GridRowModelUpdate[], getRowId: DataGridProcessedProps['getRowId']): GridRowModelUpdate[];
 export declare const getValidRowHeight: (rowHeightProp: any, defaultRowHeight: number, warningMessage: string) => number;
 export declare const rowHeightWarning: string;
 export declare const getRowHeightWarning: string;

package/hooks/features/rows/gridRowsUtils.js

@@ -42,12 +42,10 @@ export 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 {
@@ -55,7 +53,6 @@ export const createRowsInternalCache = ({
     loadingPropBeforePartialUpdates: loading,
     rowCountPropBeforePartialUpdates: rowCount,
     updates,
-    dataRowIdToIdLookup,
     dataRowIdToModelLookup
   };
 };
@@ -87,7 +84,6 @@ export const getRowsStateFromCache = ({
     previousTree,
     previousTreeDepths,
     updates: cache.updates,
-    dataRowIdToIdLookup: cache.dataRowIdToIdLookup,
     dataRowIdToModelLookup: cache.dataRowIdToModelLookup,
     previousGroupsToFetch
   });
@@ -96,7 +92,6 @@ export const getRowsStateFromCache = ({
   const groupingParamsWithHydrateRows = apiRef.current.unstable_applyPipeProcessors('hydrateRows', {
     tree: unProcessedTree,
     treeDepths: unProcessedTreeDepths,
-    dataRowIdToIdLookup: cache.dataRowIdToIdLookup,
     dataRowIds: unProcessedDataRowIds,
     dataRowIdToModelLookup: cache.dataRowIdToModelLookup
   });
@@ -177,7 +172,6 @@ export const updateCacheWithNewRows = ({
     groupKeys
   };
   const dataRowIdToModelLookup = _extends({}, previousCache.dataRowIdToModelLookup);
-  const dataRowIdToIdLookup = _extends({}, previousCache.dataRowIdToIdLookup);
   const alreadyAppliedActionsToRemove = {
     insert: {},
     modify: {},
@@ -210,7 +204,6 @@ export 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];
@@ -250,7 +243,6 @@ export 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) {
@@ -262,7 +254,6 @@ export const updateCacheWithNewRows = ({
   }
   return {
     dataRowIdToModelLookup,
-    dataRowIdToIdLookup,
     updates: partialUpdates,
     rowsBeforePartialUpdates: previousCache.rowsBeforePartialUpdates,
     loadingPropBeforePartialUpdates: previousCache.loadingPropBeforePartialUpdates,

package/hooks/features/rows/index.d.ts

@@ -1,5 +1,5 @@
 export * from './gridRowsMetaSelector';
 export * from './gridRowsMetaState';
-export { gridRowCountSelector, gridRowsLoadingSelector, gridTopLevelRowCountSelector, gridRowsLookupSelector, gridRowsDataRowIdToIdLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridRowMaximumTreeDepthSelector, gridDataRowIdsSelector, } from './gridRowsSelector';
+export { gridRowCountSelector, gridRowsLoadingSelector, gridTopLevelRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridRowMaximumTreeDepthSelector, gridDataRowIdsSelector, } from './gridRowsSelector';
 export type { GridRowsState, GridRowIdToModelLookup } from './gridRowsInterfaces';
 export { GRID_ROOT_GROUP_ID, checkGridRowIdIsValid, isAutogeneratedRow } from './gridRowsUtils';

package/hooks/features/rows/index.js

@@ -1,4 +1,4 @@
 export * from "./gridRowsMetaSelector.js";
 export * from "./gridRowsMetaState.js";
-export { gridRowCountSelector, gridRowsLoadingSelector, gridTopLevelRowCountSelector, gridRowsLookupSelector, gridRowsDataRowIdToIdLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridRowMaximumTreeDepthSelector, gridDataRowIdsSelector } from "./gridRowsSelector.js";
+export { gridRowCountSelector, gridRowsLoadingSelector, gridTopLevelRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridRowMaximumTreeDepthSelector, gridDataRowIdsSelector } from "./gridRowsSelector.js";
 export { GRID_ROOT_GROUP_ID, checkGridRowIdIsValid, isAutogeneratedRow } from "./gridRowsUtils.js";

package/hooks/features/rows/useGridParamsApi.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 export declare class MissingRowIdError extends Error {
@@ -11,4 +11,4 @@ export declare class MissingRowIdError extends Error {
  * TODO: Impossible priority - useGridEditing also needs to be after useGridParamsApi
  * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
  */
-export declare function useGridParamsApi(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_listView'>): void;
+export declare function useGridParamsApi(apiRef: RefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps): void;

package/hooks/features/rows/useGridParamsApi.js

@@ -30,37 +30,52 @@ export function useGridParamsApi(apiRef, props) {
     };
     return params;
   }, [apiRef]);
-  const getCellParams = React.useCallback((id, field) => {
-    const colDef = props.unstable_listView ? 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 = gridFocusCellSelector(apiRef);
-    const cellTabIndex = 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 = gridFocusCellSelector(apiRef);
+    const cellTabIndex = 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 ? 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);
@@ -119,5 +134,9 @@ export function useGridParamsApi(apiRef, props) {
     getColumnHeaderParams,
     getColumnHeaderElement
   };
+  const paramsPrivateApi = {
+    getCellParamsForRow
+  };
   useGridApiMethod(apiRef, paramsApi, 'public');
+  useGridApiMethod(apiRef, paramsPrivateApi, 'private');
 }

package/hooks/features/rows/useGridRowSpanning.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import type { GridColDef } from '../../../models/colDef';
 import type { GridRowId } from '../../../models/gridRows';
 import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
@@ -24,4 +24,4 @@ export type RowRange = {
  * @requires filterStateInitializer (method) - should be initialized before
  */
 export declare const rowSpanningStateInitializer: GridStateInitializer;
-export declare const useGridRowSpanning: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "unstable_rowSpanning" | "pagination" | "paginationMode">) => void;
+export declare const useGridRowSpanning: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rowSpanning" | "pagination" | "paginationMode">) => void;