@mui/x-data-grid 8.0.0-alpha.2 → 8.0.0-alpha.4

package/hooks/core/strategyProcessing/gridStrategyProcessingApi.d.ts

@@ -1,26 +1,42 @@
 import { GridRowTreeCreationParams, GridRowTreeCreationValue, GridRowsState } from '../../features/rows/gridRowsInterfaces';
 import { GridFilteringMethodParams, GridFilteringMethodValue, GridFilterState, GridVisibleRowsLookupState } from '../../features/filter/gridFilterState';
 import { GridSortingMethodParams, GridSortingMethodValue } from '../../features/sorting/gridSortingState';
+import { GridGetRowsParams, GridGetRowsResponse } from '../../../models/gridDataSource';
 export type GridStrategyProcessorName = keyof GridStrategyProcessingLookup;
-export type GridStrategyGroup = GridStrategyProcessingLookup[keyof GridStrategyProcessingLookup]['group'];
+export declare enum GridStrategyGroup {
+    DataSource = "dataSource",
+    RowTree = "rowTree"
+}
+export type GridStrategyGroupValue = `${GridStrategyGroup}`;
 export interface GridStrategyProcessingLookup {
+    dataSourceRowsUpdate: {
+        group: GridStrategyGroup.DataSource;
+        params: {
+            response: GridGetRowsResponse;
+            fetchParams: GridGetRowsParams;
+        } | {
+            error: Error;
+            fetchParams: GridGetRowsParams;
+        };
+        value: void;
+    };
     rowTreeCreation: {
-        group: 'rowTree';
+        group: GridStrategyGroup.RowTree;
         params: GridRowTreeCreationParams;
         value: GridRowTreeCreationValue;
     };
     filtering: {
-        group: 'rowTree';
+        group: GridStrategyGroup.RowTree;
         params: GridFilteringMethodParams;
         value: GridFilteringMethodValue;
     };
     sorting: {
-        group: 'rowTree';
+        group: GridStrategyGroup.RowTree;
         params: GridSortingMethodParams;
         value: GridSortingMethodValue;
     };
     visibleRowsLookupCreation: {
-        group: 'rowTree';
+        group: GridStrategyGroup.RowTree;
         params: {
             tree: GridRowsState['tree'];
             filteredRowsLookup: GridFilterState['filteredRowsLookup'];
@@ -42,17 +58,17 @@ export interface GridStrategyProcessingApi {
     registerStrategyProcessor: <P extends GridStrategyProcessorName>(strategyName: string, processorName: P, processor: GridStrategyProcessor<P>) => () => void;
     /**
      * Set a callback to know if a strategy is available.
-     * @param {GridStrategyGroup} strategyGroup The group for which we set strategy availability.
+     * @param {GridStrategyGroupValue} strategyGroup The group for which we set strategy availability.
      * @param {string} strategyName The name of the strategy.
      * @param {boolean} callback A callback to know if this strategy is available.
      */
-    setStrategyAvailability: (strategyGroup: GridStrategyGroup, strategyName: string, callback: () => boolean) => void;
+    setStrategyAvailability: (strategyGroup: GridStrategyGroupValue, strategyName: string, callback: () => boolean) => void;
     /**
      * Returns the name of the active strategy of a given strategy group
-     * @param {GridStrategyGroup} strategyGroup The group from which we want the active strategy.
+     * @param {GridStrategyGroupValue} strategyGroup The group from which we want the active strategy.
      * @returns {string} The name of the active strategy.
      */
-    getActiveStrategy: (strategyGroup: GridStrategyGroup) => string;
+    getActiveStrategy: (strategyGroup: GridStrategyGroupValue) => string;
     /**
      * Run the processor registered for the active strategy.
      * @param {GridStrategyProcessorName} processorName The name of the processor to run.

package/hooks/core/strategyProcessing/gridStrategyProcessingApi.js

@@ -1 +1,5 @@
-export {};
+export let GridStrategyGroup = /*#__PURE__*/function (GridStrategyGroup) {
+  GridStrategyGroup["DataSource"] = "dataSource";
+  GridStrategyGroup["RowTree"] = "rowTree";
+  return GridStrategyGroup;
+}({});

package/hooks/core/strategyProcessing/useGridStrategyProcessing.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
-import { GridStrategyProcessorName, GridStrategyProcessingLookup } from './gridStrategyProcessingApi';
+import { GridStrategyProcessorName, GridStrategyGroupValue } from './gridStrategyProcessingApi';
 export declare const GRID_DEFAULT_STRATEGY = "none";
 export declare const GRID_STRATEGIES_PROCESSORS: {
-    [P in GridStrategyProcessorName]: GridStrategyProcessingLookup[P]['group'];
+    [P in GridStrategyProcessorName]: GridStrategyGroupValue;
 };
 /**
  * Implements a variant of the Strategy Pattern (see https://en.wikipedia.org/wiki/Strategy_pattern)
@@ -40,9 +40,6 @@ export declare const GRID_STRATEGIES_PROCESSORS: {
  * =====================================================================================================================
  *
  * Each processor name is part of a strategy group which can only have one active strategy at the time.
- * For now, there is only one strategy group named `rowTree` which customize
- * - row tree creation algorithm.
- * - sorting algorithm.
- * - filtering algorithm.
+ * There are two active groups named `rowTree` and `dataSource`.
  */
 export declare const useGridStrategyProcessing: (apiRef: React.MutableRefObject<GridPrivateApiCommon>) => void;

package/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -1,13 +1,15 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import * as React from 'react';
+import { GridStrategyGroup } from "./gridStrategyProcessingApi.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 export const GRID_DEFAULT_STRATEGY = 'none';
 export const GRID_STRATEGIES_PROCESSORS = {
-  rowTreeCreation: 'rowTree',
-  filtering: 'rowTree',
-  sorting: 'rowTree',
-  visibleRowsLookupCreation: 'rowTree'
+  dataSourceRowsUpdate: GridStrategyGroup.DataSource,
+  rowTreeCreation: GridStrategyGroup.RowTree,
+  filtering: GridStrategyGroup.RowTree,
+  sorting: GridStrategyGroup.RowTree,
+  visibleRowsLookupCreation: GridStrategyGroup.RowTree
 };
 /**
  * Implements a variant of the Strategy Pattern (see https://en.wikipedia.org/wiki/Strategy_pattern)
@@ -44,10 +46,7 @@ export const GRID_STRATEGIES_PROCESSORS = {
  * =====================================================================================================================
  *
  * Each processor name is part of a strategy group which can only have one active strategy at the time.
- * For now, there is only one strategy group named `rowTree` which customize
- * - row tree creation algorithm.
- * - sorting algorithm.
- * - filtering algorithm.
+ * There are two active groups named `rowTree` and `dataSource`.
  */
 export const useGridStrategyProcessing = apiRef => {
   const availableStrategies = React.useRef(new Map());

package/hooks/core/useGridStateInitialization.js

@@ -24,8 +24,8 @@ export const useGridStateInitialization = apiRef => {
     const updatedControlStateIds = [];
     Object.keys(controlStateMapRef.current).forEach(stateId => {
       const controlState = controlStateMapRef.current[stateId];
-      const oldSubState = controlState.stateSelector(apiRef.current.state, apiRef.current.instanceId);
-      const newSubState = controlState.stateSelector(newState, apiRef.current.instanceId);
+      const oldSubState = controlState.stateSelector(apiRef.current.state, undefined, apiRef.current.instanceId);
+      const newSubState = controlState.stateSelector(newState, undefined, apiRef.current.instanceId);
       if (newSubState === oldSubState) {
         return;
       }
@@ -57,7 +57,7 @@ export const useGridStateInitialization = apiRef => {
         hasPropChanged
       } = updatedControlStateIds[0];
       const controlState = controlStateMapRef.current[stateId];
-      const model = controlState.stateSelector(newState, apiRef.current.instanceId);
+      const model = controlState.stateSelector(newState, undefined, apiRef.current.instanceId);
       if (controlState.propOnChange && hasPropChanged) {
         controlState.propOnChange(model, {
           reason,

package/hooks/features/columnGrouping/gridColumnGroupsSelector.d.ts

@@ -4,9 +4,9 @@ import { GridStateCommunity } from '../../../models/gridStateCommunity';
  * @ignore - do not document.
  */
 export declare const gridColumnGroupingSelector: (state: GridStateCommunity) => import("./gridColumnGroupsInterfaces").GridColumnsGroupingState;
-export declare const gridColumnGroupsUnwrappedModelSelector: import("../../..").OutputSelector<GridStateCommunity, {
+export declare const gridColumnGroupsUnwrappedModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnsGroupingState, {
     [columnField: string]: string[];
 }>;
-export declare const gridColumnGroupsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnGroupLookup>;
-export declare const gridColumnGroupsHeaderStructureSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridGroupingStructure[][]>;
-export declare const gridColumnGroupsHeaderMaxDepthSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridColumnGroupsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnsGroupingState, import("./gridColumnGroupsInterfaces").GridColumnGroupLookup>;
+export declare const gridColumnGroupsHeaderStructureSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnsGroupingState, import("./gridColumnGroupsInterfaces").GridGroupingStructure[][]>;
+export declare const gridColumnGroupsHeaderMaxDepthSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnsGroupingState, number>;

package/hooks/features/columnResize/columnResizeSelector.d.ts

@@ -1,3 +1,3 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 export declare const gridColumnResizeSelector: (state: GridStateCommunity) => import("./columnResizeState").GridColumnResizeState;
-export declare const gridResizingColumnFieldSelector: import("../../..").OutputSelector<GridStateCommunity, string>;
+export declare const gridResizingColumnFieldSelector: import("../../..").OutputSelector<GridStateCommunity, import("./columnResizeState").GridColumnResizeState, string>;

package/hooks/features/columnResize/useGridColumnResize.js

@@ -491,7 +491,8 @@ export const useGridColumnResize = (apiRef, props) => {
       const widthByField = extractColumnWidths(apiRef, options, columns);
       const newColumns = columns.map(column => _extends({}, column, {
         width: widthByField[column.field],
-        computedWidth: widthByField[column.field]
+        computedWidth: widthByField[column.field],
+        flex: 0
       }));
       if (options.expand) {
         const visibleColumns = state.orderedFields.map(field => state.lookup[field]).filter(c => state.columnVisibilityModel[c.field] !== false);

package/hooks/features/columns/gridColumnsSelector.d.ts

@@ -9,33 +9,33 @@ export declare const gridColumnsStateSelector: (state: GridStateCommunity) => im
  * Get an array of column fields in the order rendered on screen.
  * @category Columns
  */
-export declare const gridColumnFieldsSelector: import("../../..").OutputSelector<GridStateCommunity, string[]>;
+export declare const gridColumnFieldsSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnsState, string[]>;
 /**
  * Get the columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Columns
  */
-export declare const gridColumnLookupSelector: import("../../..").OutputSelector<GridStateCommunity, GridColumnLookup>;
+export declare const gridColumnLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnsState, GridColumnLookup>;
 /**
  * Get an array of column definitions in the order rendered on screen..
  * @category Columns
  */
-export declare const gridColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[]>;
+export declare const gridColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, GridColumnLookup, import("../../../internals").GridStateColDef[]>;
 /**
  * Get the column visibility model, containing the visibility status of each column.
  * If a column is not registered in the model, it is visible.
  * @category Visible Columns
  */
-export declare const gridColumnVisibilityModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnVisibilityModel>;
+export declare const gridColumnVisibilityModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnsState, import("./gridColumnsInterfaces").GridColumnVisibilityModel>;
 /**
  * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Visible Columns
  */
-export declare const gridVisibleColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[]>;
+export declare const gridVisibleColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnVisibilityModel, import("../../../internals").GridStateColDef[]>;
 /**
  * Get the field of each visible column.
  * @category Visible Columns
  */
-export declare const gridVisibleColumnFieldsSelector: import("../../..").OutputSelector<GridStateCommunity, string[]>;
+export declare const gridVisibleColumnFieldsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], string[]>;
 /**
  * Get the visible pinned columns model.
  * @category Visible Columns
@@ -45,7 +45,7 @@ export declare const gridPinnedColumnsSelector: (state: GridStateCommunity) => G
  * Get the visible pinned columns.
  * @category Visible Columns
  */
-export declare const gridVisiblePinnedColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, {
+export declare const gridVisiblePinnedColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, boolean, {
     left: import("../../../internals").GridStateColDef[];
     right: import("../../../internals").GridStateColDef[];
 }>;
@@ -53,25 +53,25 @@ export declare const gridVisiblePinnedColumnDefinitionsSelector: import("../../.
  * Get the left position in pixel of each visible columns relative to the left of the first column.
  * @category Visible Columns
  */
-export declare const gridColumnPositionsSelector: import("../../..").OutputSelector<GridStateCommunity, number[]>;
+export declare const gridColumnPositionsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], number[]>;
 /**
  * Get the summed width of all the visible columns.
  * @category Visible Columns
  */
-export declare const gridColumnsTotalWidthSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridColumnsTotalWidthSelector: import("../../..").OutputSelector<GridStateCommunity, number[], number>;
 /**
  * Get the filterable columns as an array.
  * @category Columns
  */
-export declare const gridFilterableColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[]>;
+export declare const gridFilterableColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], import("../../../internals").GridStateColDef[]>;
 /**
  * Get the filterable columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Columns
  */
-export declare const gridFilterableColumnLookupSelector: import("../../..").OutputSelector<GridStateCommunity, GridColumnLookup>;
+export declare const gridFilterableColumnLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], GridColumnLookup>;
 /**
  * Checks if some column has a colSpan field.
  * @category Columns
  * @ignore - Do not document
  */
-export declare const gridHasColSpanSelector: import("../../..").OutputSelector<GridStateCommunity, boolean>;
+export declare const gridHasColSpanSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], boolean>;

package/hooks/features/density/densitySelector.d.ts

@@ -3,4 +3,4 @@ import { GridDensity } from '../../../models/gridDensity';
 export declare const COMPACT_DENSITY_FACTOR = 0.7;
 export declare const COMFORTABLE_DENSITY_FACTOR = 1.3;
 export declare const gridDensitySelector: (state: GridStateCommunity) => GridDensity;
-export declare const gridDensityFactorSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridDensityFactorSelector: import("../../..").OutputSelector<GridStateCommunity, GridDensity, number>;

package/hooks/features/editing/useGridCellEditing.js

@@ -11,7 +11,7 @@ import { GridEditModes, GridCellModes } from "../../../models/gridEditRowModel.j
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { gridEditRowsStateSelector } from "./gridEditingSelectors.js";
 import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.js";
-import { gridRowsDataRowIdToIdLookupSelector } from "../rows/gridRowsSelector.js";
+import { gridRowsLookupSelector } from "../rows/gridRowsSelector.js";
 import { deepClone } from "../../../utils/utils.js";
 import { GridCellEditStartReasons, GridCellEditStopReasons } from "../../../models/params/gridEditCellParams.js";
 import { getDefaultCellValue } from "./utils.js";
@@ -442,7 +442,7 @@ export const useGridCellEditing = (apiRef, props) => {
 
   // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
   useEnhancedEffect(() => {
-    const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
+    const rowsLookup = gridRowsLookupSelector(apiRef);
 
     // Update the ref here because updateStateToStopCellEditMode may change it later
     const copyOfPrevCellModes = prevCellModesModel.current;
@@ -451,7 +451,7 @@ export const useGridCellEditing = (apiRef, props) => {
     Object.entries(cellModesModel).forEach(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {
         const prevMode = copyOfPrevCellModes[id]?.[field]?.mode || GridCellModes.View;
-        const originalId = idToIdLookup[id] ?? id;
+        const originalId = apiRef.current.getRowId(rowsLookup[id]) ?? id;
         if (params.mode === GridCellModes.Edit && prevMode === GridCellModes.View) {
           updateStateToStartCellEditMode(_extends({
             id: originalId,

package/hooks/features/editing/useGridRowEditing.js

@@ -12,7 +12,7 @@ import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { gridEditRowsStateSelector } from "./gridEditingSelectors.js";
 import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.js";
 import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
-import { gridRowsDataRowIdToIdLookupSelector } from "../rows/gridRowsSelector.js";
+import { gridRowsLookupSelector } from "../rows/gridRowsSelector.js";
 import { deepClone } from "../../../utils/utils.js";
 import { GridRowEditStopReasons, GridRowEditStartReasons } from "../../../models/params/gridRowParams.js";
 import { GRID_ACTIONS_COLUMN_TYPE } from "../../../colDef/index.js";
@@ -571,7 +571,7 @@ export const useGridRowEditing = (apiRef, props) => {
 
   // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
   useEnhancedEffect(() => {
-    const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
+    const rowsLookup = gridRowsLookupSelector(apiRef);
 
     // Update the ref here because updateStateToStopRowEditMode may change it later
     const copyOfPrevRowModesModel = prevRowModesModel.current;
@@ -583,7 +583,7 @@ export const useGridRowEditing = (apiRef, props) => {
         mode: GridRowModes.View
       };
       const prevMode = copyOfPrevRowModesModel[id]?.mode || GridRowModes.View;
-      const originalId = idToIdLookup[id] ?? id;
+      const originalId = apiRef.current.getRowId(rowsLookup[id]) ?? id;
       if (params.mode === GridRowModes.Edit && prevMode === GridRowModes.View) {
         updateStateToStartRowEditMode(_extends({
           id: originalId

package/hooks/features/filter/gridFilterSelector.d.ts

@@ -5,12 +5,12 @@ import { GridStateCommunity } from '../../../models/gridStateCommunity';
  * Get the current filter model.
  * @category Filtering
  */
-export declare const gridFilterModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridFilterModel>;
+export declare const gridFilterModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridFilterState").GridFilterState, import("../../..").GridFilterModel>;
 /**
  * Get the current quick filter values.
  * @category Filtering
  */
-export declare const gridQuickFilterValuesSelector: import("../../..").OutputSelector<GridStateCommunity, any[] | undefined>;
+export declare const gridQuickFilterValuesSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridFilterModel, any[] | undefined>;
 /**
  * @category Visible rows
  * @ignore - do not document.
@@ -20,79 +20,79 @@ export declare const gridVisibleRowsLookupSelector: (state: GridStateCommunity)
  * @category Filtering
  * @ignore - do not document.
  */
-export declare const gridFilteredRowsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, Record<GridRowId, boolean>>;
+export declare const gridFilteredRowsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridFilterState").GridFilterState, Record<GridRowId, boolean>>;
 /**
  * @category Filtering
  * @ignore - do not document.
  */
-export declare const gridFilteredChildrenCountLookupSelector: import("../../..").OutputSelector<GridStateCommunity, Record<GridRowId, number>>;
+export declare const gridFilteredChildrenCountLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridFilterState").GridFilterState, Record<GridRowId, number>>;
 /**
  * @category Filtering
  * @ignore - do not document.
  */
-export declare const gridFilteredDescendantCountLookupSelector: import("../../..").OutputSelector<GridStateCommunity, Record<GridRowId, number>>;
+export declare const gridFilteredDescendantCountLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridFilterState").GridFilterState, Record<GridRowId, number>>;
 /**
  * Get the id and the model of the rows accessible after the filtering process.
  * Does not contain the collapsed children.
  * @category Filtering
  */
-export declare const gridExpandedSortedRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
+export declare const gridExpandedSortedRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
 /**
  * Get the id of the rows accessible after the filtering process.
  * Does not contain the collapsed children.
  * @category Filtering
  */
-export declare const gridExpandedSortedRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, GridRowId[]>;
+export declare const gridExpandedSortedRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], GridRowId[]>;
 /**
  * Get the id and the model of the rows accessible after the filtering process.
  * Contains the collapsed children.
  * @category Filtering
  */
-export declare const gridFilteredSortedRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
+export declare const gridFilteredSortedRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
 /**
  * Get the id of the rows accessible after the filtering process.
  * Contains the collapsed children.
  * @category Filtering
  */
-export declare const gridFilteredSortedRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, GridRowId[]>;
+export declare const gridFilteredSortedRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], GridRowId[]>;
 /**
  * Get the ids to position in the current tree level lookup of the rows accessible after the filtering process.
  * Does not contain the collapsed children.
  * @category Filtering
  * @ignore - do not document.
  */
-export declare const gridExpandedSortedRowTreeLevelPositionLookupSelector: import("../../..").OutputSelector<GridStateCommunity, Record<GridRowId, number>>;
+export declare const gridExpandedSortedRowTreeLevelPositionLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowTreeConfig, Record<GridRowId, number>>;
 /**
  * Get the id and the model of the top level rows accessible after the filtering process.
  * @category Filtering
  */
-export declare const gridFilteredSortedTopLevelRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
+export declare const gridFilteredSortedTopLevelRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, number, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
 /**
  * Get the amount of rows accessible after the filtering process.
  * @category Filtering
  */
-export declare const gridExpandedRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridExpandedRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], number>;
 /**
  * Get the amount of top level rows accessible after the filtering process.
  * @category Filtering
  */
-export declare const gridFilteredTopLevelRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridFilteredTopLevelRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], number>;
 /**
  * Get the amount of rows accessible after the filtering process.
  * Includes top level and descendant rows.
  * @category Filtering
  */
-export declare const gridFilteredRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridFilteredRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], number>;
 /**
  * Get the amount of descendant rows accessible after the filtering process.
  * @category Filtering
  */
-export declare const gridFilteredDescendantRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridFilteredDescendantRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, number, number>;
 /**
  * @category Filtering
  * @ignore - do not document.
  */
-export declare const gridFilterActiveItemsSelector: import("../../..").OutputSelector<GridStateCommunity, GridFilterItem[]>;
+export declare const gridFilterActiveItemsSelector: import("../../..").OutputSelector<GridStateCommunity, import("..").GridColumnLookup, GridFilterItem[]>;
 export type GridFilterActiveItemsLookup = {
     [field: string]: GridFilterItem[];
 };
@@ -100,4 +100,4 @@ export type GridFilterActiveItemsLookup = {
  * @category Filtering
  * @ignore - do not document.
  */
-export declare const gridFilterActiveItemsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, GridFilterActiveItemsLookup>;
+export declare const gridFilterActiveItemsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, GridFilterItem[], GridFilterActiveItemsLookup>;

package/hooks/features/filter/useGridFilter.js

@@ -59,7 +59,7 @@ export const useGridFilter = (apiRef, props) => {
   });
   const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
-      const filterModel = gridFilterModelSelector(state, apiRef.current.instanceId);
+      const filterModel = gridFilterModelSelector(state, undefined, apiRef.current.instanceId);
       const filterState = apiRef.current.getFilterState(filterModel);
       const newState = _extends({}, state, {
         filter: _extends({}, state.filter, filterState)

package/hooks/features/focus/gridFocusStateSelector.d.ts

@@ -1,12 +1,12 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 import { GridFocusState, GridTabIndexState } from './gridFocusState';
 export declare const gridFocusStateSelector: (state: GridStateCommunity) => GridFocusState;
-export declare const gridFocusCellSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridCellCoordinates | null>;
-export declare const gridFocusColumnHeaderSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
-export declare const gridFocusColumnHeaderFilterSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
-export declare const gridFocusColumnGroupHeaderSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnGroupIdentifier | null>;
+export declare const gridFocusCellSelector: import("../../..").OutputSelector<GridStateCommunity, GridFocusState, import("../../..").GridCellCoordinates | null>;
+export declare const gridFocusColumnHeaderSelector: import("../../..").OutputSelector<GridStateCommunity, GridFocusState, import("./gridFocusState").GridColumnIdentifier | null>;
+export declare const gridFocusColumnHeaderFilterSelector: import("../../..").OutputSelector<GridStateCommunity, GridFocusState, import("./gridFocusState").GridColumnIdentifier | null>;
+export declare const gridFocusColumnGroupHeaderSelector: import("../../..").OutputSelector<GridStateCommunity, GridFocusState, import("./gridFocusState").GridColumnGroupIdentifier | null>;
 export declare const gridTabIndexStateSelector: (state: GridStateCommunity) => GridTabIndexState;
-export declare const gridTabIndexCellSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridCellCoordinates | null>;
-export declare const gridTabIndexColumnHeaderSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
-export declare const gridTabIndexColumnHeaderFilterSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
-export declare const gridTabIndexColumnGroupHeaderSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnGroupIdentifier | null>;
+export declare const gridTabIndexCellSelector: import("../../..").OutputSelector<GridStateCommunity, GridTabIndexState, import("../../..").GridCellCoordinates | null>;
+export declare const gridTabIndexColumnHeaderSelector: import("../../..").OutputSelector<GridStateCommunity, GridTabIndexState, import("./gridFocusState").GridColumnIdentifier | null>;
+export declare const gridTabIndexColumnHeaderFilterSelector: import("../../..").OutputSelector<GridStateCommunity, GridTabIndexState, import("./gridFocusState").GridColumnIdentifier | null>;
+export declare const gridTabIndexColumnGroupHeaderSelector: import("../../..").OutputSelector<GridStateCommunity, GridTabIndexState, import("./gridFocusState").GridColumnGroupIdentifier | null>;

package/hooks/features/headerFiltering/gridHeaderFilteringSelectors.d.ts

@@ -1,5 +1,5 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 export declare const gridHeaderFilteringStateSelector: (state: GridStateCommunity) => import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState;
-export declare const gridHeaderFilteringEnabledSelector: import("../../..").OutputSelector<GridStateCommunity, boolean>;
-export declare const gridHeaderFilteringEditFieldSelector: import("../../..").OutputSelector<GridStateCommunity, string | null>;
-export declare const gridHeaderFilteringMenuSelector: import("../../..").OutputSelector<GridStateCommunity, string | null>;
+export declare const gridHeaderFilteringEnabledSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState, boolean>;
+export declare const gridHeaderFilteringEditFieldSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState, string | null>;
+export declare const gridHeaderFilteringMenuSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState, string | null>;

package/hooks/features/overlays/useGridOverlays.js

@@ -5,6 +5,7 @@ import { useGridApiContext } from "../../utils/useGridApiContext.js";
 import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { gridExpandedRowCountSelector } from "../filter/index.js";
 import { gridRowCountSelector, gridRowsLoadingSelector } from "../rows/index.js";
+import { gridPinnedRowsCountSelector } from "../rows/gridRowsSelector.js";
 import { GridOverlayWrapper } from "../../../components/base/GridOverlays.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -16,7 +17,8 @@ export const useGridOverlays = () => {
   const rootProps = useGridRootProps();
   const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   const visibleRowCount = useGridSelector(apiRef, gridExpandedRowCountSelector);
-  const noRows = totalRowCount === 0;
+  const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
+  const noRows = totalRowCount === 0 && pinnedRowsCount === 0;
   const loading = useGridSelector(apiRef, gridRowsLoadingSelector);
   const showNoRowsOverlay = !loading && noRows;
   const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;

package/hooks/features/pagination/gridPaginationSelector.d.ts

@@ -8,37 +8,37 @@ export declare const gridPaginationSelector: (state: GridStateCommunity) => impo
  * Get the pagination model
  * @category Pagination
  */
-export declare const gridPaginationModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridPaginationModel>;
+export declare const gridPaginationModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridPaginationInterfaces").GridPaginationState, import("../../..").GridPaginationModel>;
 /**
  * Get the row count
  * @category Pagination
  */
-export declare const gridPaginationRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridPaginationRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridPaginationInterfaces").GridPaginationState, number>;
 /**
  * Get the pagination meta
  * @category Pagination
  */
-export declare const gridPaginationMetaSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridPaginationMeta>;
+export declare const gridPaginationMetaSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridPaginationInterfaces").GridPaginationState, import("../../..").GridPaginationMeta>;
 /**
  * Get the index of the page to render if the pagination is enabled
  * @category Pagination
  */
-export declare const gridPageSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridPageSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridPaginationModel, number>;
 /**
  * Get the maximum amount of rows to display on a single page if the pagination is enabled
  * @category Pagination
  */
-export declare const gridPageSizeSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridPageSizeSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridPaginationModel, number>;
 /**
  * Get the amount of pages needed to display all the rows if the pagination is enabled
  * @category Pagination
  */
-export declare const gridPageCountSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridPageCountSelector: import("../../..").OutputSelector<GridStateCommunity, number, number>;
 /**
  * Get the index of the first and the last row to include in the current page if the pagination is enabled.
  * @category Pagination
  */
-export declare const gridPaginationRowRangeSelector: import("../../..").OutputSelector<GridStateCommunity, {
+export declare const gridPaginationRowRangeSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], {
     firstRowIndex: number;
     lastRowIndex: number;
 } | null>;
@@ -46,9 +46,15 @@ export declare const gridPaginationRowRangeSelector: import("../../..").OutputSe
  * Get the id and the model of each row to include in the current page if the pagination is enabled.
  * @category Pagination
  */
-export declare const gridPaginatedVisibleSortedGridRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
+export declare const gridPaginatedVisibleSortedGridRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, {
+    firstRowIndex: number;
+    lastRowIndex: number;
+} | null, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
 /**
  * Get the id of each row to include in the current page if the pagination is enabled.
  * @category Pagination
  */
-export declare const gridPaginatedVisibleSortedGridRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowId[]>;
+export declare const gridPaginatedVisibleSortedGridRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, {
+    firstRowIndex: number;
+    lastRowIndex: number;
+} | null, import("../../..").GridRowId[]>;

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.js

@@ -313,11 +313,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) => {