@mui/x-data-grid-premium 8.0.0-alpha.8 → 8.0.0-beta.0

package/esm/hooks/features/aggregation/gridAggregationUtils.d.ts

@@ -0,0 +1,62 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridColDef, GridRowId } from '@mui/x-data-grid-pro';
+import { GridColumnRawLookup, GridHydrateRowsValue } from '@mui/x-data-grid-pro/internals';
+import { GridAggregationFunction, GridAggregationFunctionDataSource, GridAggregationModel, GridAggregationRule, GridAggregationRules } from "./gridAggregationInterfaces.js";
+import { GridStatePremium } from "../../../models/gridStatePremium.js";
+import { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
+import { GridApiPremium, GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
+export declare const GRID_AGGREGATION_ROOT_FOOTER_ROW_ID = "auto-generated-group-footer-root";
+export declare const getAggregationFooterRowIdFromGroupId: (groupId: GridRowId | null) => string;
+type AggregationFunction = GridAggregationFunction | GridAggregationFunctionDataSource | undefined;
+export declare const canColumnHaveAggregationFunction: ({
+  colDef,
+  aggregationFunctionName,
+  aggregationFunction,
+  isDataSource
+}: {
+  colDef: GridColDef | undefined;
+  aggregationFunctionName: string;
+  aggregationFunction: AggregationFunction;
+  isDataSource: boolean;
+}) => boolean;
+export declare const getAvailableAggregationFunctions: ({
+  aggregationFunctions,
+  colDef,
+  isDataSource
+}: {
+  aggregationFunctions: Record<string, GridAggregationFunction> | Record<string, GridAggregationFunctionDataSource>;
+  colDef: GridColDef;
+  isDataSource: boolean;
+}) => string[];
+export declare const mergeStateWithAggregationModel: (aggregationModel: GridAggregationModel) => (state: GridStatePremium) => GridStatePremium;
+export declare const getAggregationRules: (columnsLookup: GridColumnRawLookup, aggregationModel: GridAggregationModel, aggregationFunctions: Record<string, GridAggregationFunction> | Record<string, GridAggregationFunctionDataSource>, isDataSource: boolean) => GridAggregationRules;
+interface AddFooterRowsParams {
+  groupingParams: GridHydrateRowsValue;
+  getAggregationPosition: DataGridPremiumProcessedProps['getAggregationPosition'];
+  /**
+   * If `true`, there are some aggregation rules to apply
+   */
+  hasAggregationRule: boolean;
+  apiRef: RefObject<GridPrivateApiPremium>;
+}
+/**
+ * Add a footer for each group that has at least one column with an aggregated value.
+ */
+export declare const addFooterRows: ({
+  groupingParams,
+  apiRef,
+  getAggregationPosition,
+  hasAggregationRule
+}: AddFooterRowsParams) => GridHydrateRowsValue;
+/**
+ * Compares two sets of aggregation rules to determine if they are equal or not.
+ */
+export declare const areAggregationRulesEqual: (previousValue: GridAggregationRules | undefined, newValue: GridAggregationRules) => boolean;
+export declare const getAggregationFunctionLabel: ({
+  apiRef,
+  aggregationRule
+}: {
+  apiRef: RefObject<GridApiPremium>;
+  aggregationRule: GridAggregationRule;
+}) => string;
+export {};

package/esm/hooks/features/aggregation/gridAggregationUtils.js

@@ -111,7 +111,7 @@ export const addFooterRows = ({
     }
   };
   const updateRootGroupFooter = groupNode => {
-    const shouldHaveFooter = hasAggregationRule && getAggregationPosition(groupNode) === 'footer';
+    const shouldHaveFooter = hasAggregationRule && getAggregationPosition(groupNode) === 'footer' && groupNode.children.length > 0;
     if (shouldHaveFooter) {
       const rowId = getAggregationFooterRowIdFromGroupId(null);
       newGroupingParams = addPinnedRow({

package/esm/hooks/features/aggregation/index.d.ts

@@ -0,0 +1,4 @@
+export type { GridAggregationState, GridAggregationInitialState, GridAggregationInternalCache, GridAggregationApi, GridAggregationGetCellValueParams, GridAggregationFunction, GridAggregationFunctionDataSource, GridAggregationParams, GridAggregationModel, GridAggregationLookup, GridAggregationPosition, GridAggregationCellMeta, GridAggregationHeaderMeta, GridAggregationRule, GridAggregationRules } from './gridAggregationInterfaces';
+export * from "./gridAggregationSelectors.js";
+export * from "./gridAggregationFunctions.js";
+export { GRID_AGGREGATION_ROOT_FOOTER_ROW_ID, getAggregationFooterRowIdFromGroupId } from "./gridAggregationUtils.js";

package/esm/hooks/features/aggregation/useGridAggregation.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
+import { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
+import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
+export declare const aggregationStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'aggregationModel' | 'initialState'>, GridPrivateApiPremium>;
+export declare const useGridAggregation: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "onAggregationModelChange" | "initialState" | "aggregationModel" | "getAggregationPosition" | "aggregationFunctions" | "aggregationRowsScope" | "disableAggregation" | "rowGroupingColumnMode" | "dataSource">) => void;

package/esm/hooks/features/aggregation/useGridAggregation.js

@@ -32,7 +32,6 @@ export const useGridAggregation = (apiRef, props) => {
     const currentModel = gridAggregationModelSelector(apiRef);
     if (currentModel !== model) {
       apiRef.current.setState(mergeStateWithAggregationModel(model));
-      apiRef.current.forceUpdate();
     }
   }, [apiRef]);
   const applyAggregation = React.useCallback(() => {
@@ -41,14 +40,14 @@ export const useGridAggregation = (apiRef, props) => {
       getAggregationPosition: props.getAggregationPosition,
       aggregationFunctions: props.aggregationFunctions,
       aggregationRowsScope: props.aggregationRowsScope,
-      isDataSource: !!props.unstable_dataSource
+      isDataSource: !!props.dataSource
     });
     apiRef.current.setState(state => _extends({}, state, {
       aggregation: _extends({}, state.aggregation, {
         lookup: aggregationLookup
       })
     }));
-  }, [apiRef, props.getAggregationPosition, props.aggregationFunctions, props.aggregationRowsScope, props.unstable_dataSource]);
+  }, [apiRef, props.getAggregationPosition, props.aggregationFunctions, props.aggregationRowsScope, props.dataSource]);
   const aggregationApi = {
     setAggregationModel
   };
@@ -72,12 +71,12 @@ export const useGridAggregation = (apiRef, props) => {
       rulesOnLastRowHydration,
       rulesOnLastColumnHydration
     } = apiRef.current.caches.aggregation;
-    const aggregationRules = props.disableAggregation ? {} : getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.unstable_dataSource);
+    const aggregationRules = props.disableAggregation ? {} : getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.dataSource);
 
     // Re-apply the row hydration to add / remove the aggregation footers
     if (!areAggregationRulesEqual(rulesOnLastRowHydration, aggregationRules)) {
-      if (props.unstable_dataSource) {
-        apiRef.current.unstable_dataSource.fetchRows();
+      if (props.dataSource) {
+        apiRef.current.dataSource.fetchRows();
       } else {
         apiRef.current.requestPipeProcessorsApplication('hydrateRows');
         applyAggregation();
@@ -86,10 +85,9 @@ export const useGridAggregation = (apiRef, props) => {
 
     // Re-apply the column hydration to wrap / unwrap the aggregated columns
     if (!areAggregationRulesEqual(rulesOnLastColumnHydration, aggregationRules)) {
-      apiRef.current.caches.aggregation.rulesOnLastColumnHydration = aggregationRules;
       apiRef.current.requestPipeProcessorsApplication('hydrateColumns');
     }
-  }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource]);
+  }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation, props.dataSource]);
   useGridApiEventHandler(apiRef, 'aggregationModelChange', checkAggregationRulesDiff);
   useGridApiEventHandler(apiRef, 'columnsChange', checkAggregationRulesDiff);
   useGridApiEventHandler(apiRef, 'filteredRowsSet', applyAggregation);

package/esm/hooks/features/aggregation/useGridAggregationPreProcessors.d.ts

@@ -0,0 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
+import { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
+export declare const useGridAggregationPreProcessors: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "aggregationFunctions" | "disableAggregation" | "getAggregationPosition" | "slotProps" | "slots" | "dataSource">) => void;

package/esm/hooks/features/aggregation/useGridAggregationPreProcessors.js

@@ -10,7 +10,7 @@ export const useGridAggregationPreProcessors = (apiRef, props) => {
   // that the pre-processor is called it will already have been updated with the current rules.
   const rulesOnLastColumnHydration = React.useRef({});
   const updateAggregatedColumns = React.useCallback(columnsState => {
-    const aggregationRules = props.disableAggregation ? {} : getAggregationRules(columnsState.lookup, gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.unstable_dataSource);
+    const aggregationRules = props.disableAggregation ? {} : getAggregationRules(columnsState.lookup, gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.dataSource);
     columnsState.orderedFields.forEach(field => {
       const shouldHaveAggregationValue = !!aggregationRules[field];
       const haveAggregationColumnValue = !!rulesOnLastColumnHydration.current[field];
@@ -30,10 +30,11 @@ export const useGridAggregationPreProcessors = (apiRef, props) => {
       columnsState.lookup[field] = column;
     });
     rulesOnLastColumnHydration.current = aggregationRules;
+    apiRef.current.caches.aggregation.rulesOnLastColumnHydration = aggregationRules;
     return columnsState;
-  }, [apiRef, props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource]);
+  }, [apiRef, props.aggregationFunctions, props.disableAggregation, props.dataSource]);
   const addGroupFooterRows = React.useCallback(value => {
-    const aggregationRules = props.disableAggregation ? {} : getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.unstable_dataSource);
+    const aggregationRules = props.disableAggregation ? {} : getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.dataSource);
     const hasAggregationRule = Object.keys(aggregationRules).length > 0;
 
     // If we did not have any aggregation footer before, and we still don't have any,
@@ -48,7 +49,7 @@ export const useGridAggregationPreProcessors = (apiRef, props) => {
       getAggregationPosition: props.getAggregationPosition,
       hasAggregationRule
     });
-  }, [apiRef, props.disableAggregation, props.getAggregationPosition, props.aggregationFunctions, props.unstable_dataSource]);
+  }, [apiRef, props.disableAggregation, props.getAggregationPosition, props.aggregationFunctions, props.dataSource]);
   const addColumnMenuButtons = React.useCallback((columnMenuItems, colDef) => {
     if (props.disableAggregation || !colDef.aggregable) {
       return columnMenuItems;
@@ -56,13 +57,13 @@ export const useGridAggregationPreProcessors = (apiRef, props) => {
     const availableAggregationFunctions = getAvailableAggregationFunctions({
       aggregationFunctions: props.aggregationFunctions,
       colDef,
-      isDataSource: !!props.unstable_dataSource
+      isDataSource: !!props.dataSource
     });
     if (availableAggregationFunctions.length === 0) {
       return columnMenuItems;
     }
     return [...columnMenuItems, 'columnMenuAggregationItem'];
-  }, [props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource]);
+  }, [props.aggregationFunctions, props.disableAggregation, props.dataSource]);
   const stateExportPreProcessing = React.useCallback(prevState => {
     if (props.disableAggregation) {
       return prevState;

package/esm/hooks/features/aggregation/wrapColumnWithAggregation.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
+import { GridColDef, GridFilterOperator } from '@mui/x-data-grid-pro';
+import { type GridBaseColDef } from '@mui/x-data-grid-pro/internals';
+import { GridApiPremium } from "../../../models/gridApiPremium.js";
+import type { GridAggregationRule } from './gridAggregationInterfaces';
+type WrappableColumnProperty = 'valueGetter' | 'valueFormatter' | 'renderCell' | 'renderHeader' | 'filterOperators';
+interface GridColDefWithAggregationWrappers extends GridBaseColDef {
+  aggregationWrappedProperties: {
+    name: WrappableColumnProperty;
+    originalValue: GridBaseColDef[WrappableColumnProperty];
+    wrappedValue: GridBaseColDef[WrappableColumnProperty];
+  }[];
+}
+/**
+ * Add a wrapper around each wrappable property of the column to customize the behavior of the aggregation cells.
+ */
+export declare const wrapColumnWithAggregationValue: ({
+  column,
+  apiRef,
+  aggregationRule
+}: {
+  column: GridBaseColDef;
+  apiRef: RefObject<GridApiPremium>;
+  aggregationRule: GridAggregationRule;
+}) => GridBaseColDef;
+/**
+ * Remove the aggregation wrappers around the wrappable properties of the column.
+ */
+export declare const unwrapColumnFromAggregation: ({
+  column
+}: {
+  column: GridColDef | GridColDefWithAggregationWrappers;
+}) => GridBaseColDef<any, any, any> | {
+  field: string;
+  headerName?: string;
+  description?: string;
+  width?: number;
+  flex?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  hideable?: boolean;
+  sortable?: boolean;
+  sortingOrder?: readonly import("@mui/x-data-grid").GridSortDirection[];
+  resizable?: boolean;
+  editable?: boolean;
+  groupable?: boolean;
+  pinnable?: boolean;
+  sortComparator?: import("@mui/x-data-grid").GridComparatorFn<any> | undefined;
+  getSortComparator?: ((sortDirection: import("@mui/x-data-grid").GridSortDirection) => import("@mui/x-data-grid").GridComparatorFn<any> | undefined) | undefined;
+  type?: import("@mui/x-data-grid").GridColType;
+  align?: import("@mui/x-data-grid").GridAlignment;
+  valueGetter?: import("@mui/x-data-grid").GridValueGetter<import("@mui/x-data-grid").GridValidRowModel, any, any, never> | undefined;
+  rowSpanValueGetter?: import("@mui/x-data-grid").GridValueGetter<import("@mui/x-data-grid").GridValidRowModel, any, any, never> | undefined;
+  valueSetter?: import("@mui/x-data-grid").GridValueSetter<import("@mui/x-data-grid").GridValidRowModel, any, any> | undefined;
+  valueFormatter?: import("@mui/x-data-grid").GridValueFormatter<import("@mui/x-data-grid").GridValidRowModel, any, any, never> | undefined;
+  valueParser?: import("@mui/x-data-grid").GridValueParser<import("@mui/x-data-grid").GridValidRowModel, any, any> | undefined;
+  cellClassName?: import("@mui/x-data-grid").GridCellClassNamePropType<import("@mui/x-data-grid").GridValidRowModel, any> | undefined;
+  display?: "text" | "flex";
+  renderCell?: ((params: import("@mui/x-data-grid").GridRenderCellParams<import("@mui/x-data-grid").GridValidRowModel, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
+  renderEditCell?: ((params: import("@mui/x-data-grid").GridRenderEditCellParams<import("@mui/x-data-grid").GridValidRowModel, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
+  preProcessEditCellProps?: ((params: import("@mui/x-data-grid").GridPreProcessEditCellProps) => import("@mui/x-data-grid").GridEditCellProps | Promise<import("@mui/x-data-grid").GridEditCellProps>) | undefined;
+  headerClassName?: import("@mui/x-data-grid").GridColumnHeaderClassNamePropType;
+  renderHeader?: ((params: import("@mui/x-data-grid").GridColumnHeaderParams<import("@mui/x-data-grid").GridValidRowModel, any, any>) => React.ReactNode) | undefined;
+  headerAlign?: import("@mui/x-data-grid").GridAlignment;
+  hideSortIcons?: boolean;
+  disableColumnMenu?: boolean;
+  filterable?: boolean;
+  filterOperators?: readonly GridFilterOperator<import("@mui/x-data-grid").GridValidRowModel, any, any, any>[] | undefined;
+  getApplyQuickFilterFn?: import("@mui/x-data-grid").GetApplyQuickFilterFn<import("@mui/x-data-grid").GridValidRowModel, any> | undefined;
+  disableReorder?: boolean;
+  disableExport?: boolean;
+  colSpan?: number | import("@mui/x-data-grid").GridColSpanFn<import("@mui/x-data-grid").GridValidRowModel, any, any> | undefined;
+  unstable_examples?: any[] | undefined;
+  renderHeaderFilter?: (params: import("@mui/x-data-grid-pro").GridRenderHeaderFilterProps) => React.ReactNode;
+  aggregable?: boolean;
+  availableAggregationFunctions?: string[];
+  groupingValueGetter?: import("../../..").GridGroupingValueGetter<import("@mui/x-data-grid").GridValidRowModel> | undefined;
+  pastedValueParser?: import("../../..").GridPastedValueParser<import("@mui/x-data-grid").GridValidRowModel, any, any> | undefined;
+};
+export {};

package/esm/hooks/features/aggregation/wrapColumnWithAggregation.js

@@ -2,17 +2,17 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["aggregationWrappedProperties"];
 import * as React from 'react';
+import { gridRowIdSelector, gridRowNodeSelector } from '@mui/x-data-grid-pro';
 import { gridAggregationLookupSelector } from "./gridAggregationSelectors.js";
 import { GridFooterCell } from "../../../components/GridFooterCell.js";
 import { GridAggregationHeader } from "../../../components/GridAggregationHeader.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const AGGREGATION_WRAPPABLE_PROPERTIES = ['valueGetter', 'valueFormatter', 'renderCell', 'renderHeader', 'filterOperators'];
 const getAggregationValueWrappedValueGetter = ({
   value: valueGetter,
   getCellAggregationResult
 }) => {
   const wrappedValueGetter = (value, row, column, apiRef) => {
-    const rowId = apiRef.current.getRowId?.(row);
+    const rowId = gridRowIdSelector(apiRef, row);
     const cellAggregationResult = rowId ? getCellAggregationResult(rowId, column.field) : null;
     if (cellAggregationResult != null) {
       return cellAggregationResult?.value ?? null;
@@ -35,7 +35,7 @@ const getAggregationValueWrappedValueFormatter = ({
     return valueFormatter;
   }
   const wrappedValueFormatter = (value, row, column, apiRef) => {
-    const rowId = apiRef.current.getRowId(row);
+    const rowId = gridRowIdSelector(apiRef, row);
     if (rowId != null) {
       const cellAggregationResult = getCellAggregationResult(rowId, column.field);
       if (cellAggregationResult != null) {
@@ -94,7 +94,8 @@ const getWrappedFilterOperators = ({
       return null;
     }
     return (value, row, column, api) => {
-      if (getCellAggregationResult(apiRef.current.getRowId(row), column.field) != null) {
+      const rowId = gridRowIdSelector(apiRef, row);
+      if (getCellAggregationResult(rowId, column.field) != null) {
         return true;
       }
       return filterFn(value, row, column, api);
@@ -133,7 +134,7 @@ export const wrapColumnWithAggregationValue = ({
 }) => {
   const getCellAggregationResult = (id, field) => {
     let cellAggregationPosition = null;
-    const rowNode = apiRef.current.getRowNode(id);
+    const rowNode = gridRowNodeSelector(apiRef, id);
     if (rowNode.type === 'group') {
       cellAggregationPosition = 'inline';
     } else if (id.toString().startsWith('auto-generated-group-footer-')) {

package/esm/hooks/features/cellSelection/gridCellSelectionInterfaces.d.ts

@@ -0,0 +1,40 @@
+import { GridCellCoordinates, GridColDef, GridRowId } from '@mui/x-data-grid-pro';
+export type GridCellSelectionModel = Record<GridRowId, Record<GridColDef['field'], boolean>>;
+/**
+ * The cell selection API interface that is available in the grid [[apiRef]].
+ */
+export interface GridCellSelectionApi {
+  /**
+   * Determines if a cell is selected or not.
+   * @param {GridRowId} id The id of the row.
+   * @param {GridColDef['field']} field The field.
+   * @returns {boolean} A boolean indicating if the cell is selected.
+   */
+  isCellSelected: (id: GridRowId, field: GridColDef['field']) => boolean;
+  /**
+   * Returns an object containing the selection state of the cells.
+   * The keys of the object correspond to the row IDs.
+   * The value of each key is also an object, which has a column field for a key and a boolean value for its selection state.
+   * @returns {GridCellSelectionModel} Object containing the selection state of the cells
+   */
+  getCellSelectionModel: () => GridCellSelectionModel;
+  /**
+   * Updates the cell selection model according to the value passed to the `newModel` argument.
+   * Any cell already selected will be unselected.
+   * @param {GridCellSelectionModel} newModel The cells to select.
+   */
+  setCellSelectionModel: (newModel: GridCellSelectionModel) => void;
+  /**
+   * Selects all cells that are inside the range given by `start` and `end` coordinates.
+   * @param {GridCellCoordinates} start Object containing the row ID and field of the first cell to select.
+   * @param {GridCellCoordinates} end Object containing the row ID and field of the last cell to select.
+   * @param {boolean} keepOtherSelected Whether to keep current selected cells or discard. Default is false.
+   */
+  selectCellRange: (start: GridCellCoordinates, end: GridCellCoordinates, keepOtherSelected?: boolean) => void;
+  /**
+   * Returns an array containing only the selected cells.
+   * Each item is an object with the ID and field of the cell.
+   * @returns {GridCellCoordinates[]} Array with the selected cells.
+   */
+  getSelectedCellsAsArray: () => GridCellCoordinates[];
+}

package/esm/hooks/features/cellSelection/gridCellSelectionSelector.d.ts

@@ -0,0 +1,2 @@
+import { GridStatePremium } from "../../../models/gridStatePremium.js";
+export declare const gridCellSelectionStateSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, unknown, import("./gridCellSelectionInterfaces").GridCellSelectionModel>;

package/esm/hooks/features/cellSelection/gridCellSelectionSelector.js

@@ -1 +1,2 @@
-export const gridCellSelectionStateSelector = state => state.cellSelection;
+import { createRootSelector } from '@mui/x-data-grid-pro/internals';
+export const gridCellSelectionStateSelector = createRootSelector(state => state.cellSelection);

package/esm/hooks/features/cellSelection/index.d.ts

@@ -0,0 +1 @@
+export * from "./gridCellSelectionInterfaces.js";

package/esm/hooks/features/cellSelection/useGridCellSelection.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
+import { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
+import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
+export declare const cellSelectionStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'cellSelectionModel' | 'initialState'>>;
+export declare const useGridCellSelection: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "cellSelection" | "cellSelectionModel" | "onCellSelectionModelChange" | "pagination" | "paginationMode" | "ignoreValueFormatterDuringExport" | "clipboardCopyCellDelimiter" | "columnHeaderHeight">) => void;

package/esm/hooks/features/cellSelection/useGridCellSelection.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import ownerDocument from '@mui/utils/ownerDocument';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { getTotalHeaderHeight, getVisibleRows, isNavigationKey, serializeCellValue, useGridRegisterPipeProcessor, useGridVisibleRows } from '@mui/x-data-grid-pro/internals';
-import { useGridApiEventHandler, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridClasses, gridFocusCellSelector, GRID_REORDER_COL_DEF, useGridSelector, gridSortedRowIdsSelector, gridDimensionsSelector } from '@mui/x-data-grid-pro';
+import { getTotalHeaderHeight, getVisibleRows, isNavigationKey, serializeCellValue, useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
+import { useGridApiEventHandler, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridClasses, gridFocusCellSelector, GRID_REORDER_COL_DEF, gridSortedRowIdsSelector, gridDimensionsSelector } from '@mui/x-data-grid-pro';
 import { gridCellSelectionStateSelector } from "./gridCellSelectionSelector.js";
 export const cellSelectionStateInitializer = (state, props) => _extends({}, state, {
   cellSelection: _extends({}, props.cellSelectionModel ?? props.initialState?.cellSelection)
@@ -16,13 +16,10 @@ const AUTO_SCROLL_SPEED = 20; // The speed to scroll once the mouse enters the s
 
 export const useGridCellSelection = (apiRef, props) => {
   const hasRootReference = apiRef.current.rootElementRef.current !== null;
-  const visibleRows = useGridVisibleRows(apiRef, props);
   const cellWithVirtualFocus = React.useRef(null);
   const lastMouseDownCell = React.useRef(null);
   const mousePosition = React.useRef(null);
   const autoScrollRAF = React.useRef(null);
-  const sortedRowIds = useGridSelector(apiRef, gridSortedRowIdsSelector);
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const totalHeaderHeight = getTotalHeaderHeight(apiRef, props);
   const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
@@ -43,11 +40,11 @@ export const useGridCellSelection = (apiRef, props) => {
     if (!props.cellSelection) {
       return false;
     }
-    const cellSelectionModel = gridCellSelectionStateSelector(apiRef.current.state);
+    const cellSelectionModel = gridCellSelectionStateSelector(apiRef);
     return cellSelectionModel[id] ? !!cellSelectionModel[id][field] : false;
   }, [apiRef, props.cellSelection]);
   const getCellSelectionModel = React.useCallback(() => {
-    return gridCellSelectionStateSelector(apiRef.current.state);
+    return gridCellSelectionStateSelector(apiRef);
   }, [apiRef]);
   const setCellSelectionModel = React.useCallback(newModel => {
     if (!props.cellSelection) {
@@ -56,7 +53,6 @@ export const useGridCellSelection = (apiRef, props) => {
     apiRef.current.setState(prevState => _extends({}, prevState, {
       cellSelection: newModel
     }));
-    apiRef.current.forceUpdate();
   }, [apiRef, props.cellSelection]);
   const selectCellRange = React.useCallback((start, end, keepOtherSelected = false) => {
     const startRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(start.id);
@@ -76,6 +72,7 @@ export const useGridCellSelection = (apiRef, props) => {
       finalEndColumnIndex = startColumnIndex;
     }
     const visibleColumns = apiRef.current.getVisibleColumns();
+    const visibleRows = getVisibleRows(apiRef);
     const rowsInRange = visibleRows.rows.slice(finalStartRowIndex, finalEndRowIndex + 1);
     const columnsInRange = visibleColumns.slice(finalStartColumnIndex, finalEndColumnIndex + 1);
     const newModel = keepOtherSelected ? _extends({}, apiRef.current.getCellSelectionModel()) : {};
@@ -88,7 +85,7 @@ export const useGridCellSelection = (apiRef, props) => {
       }, {});
     });
     apiRef.current.setCellSelectionModel(newModel);
-  }, [apiRef, visibleRows.rows]);
+  }, [apiRef]);
   const getSelectedCellsAsArray = React.useCallback(() => {
     const selectionModel = apiRef.current.getCellSelectionModel();
     const currentVisibleRows = getVisibleRows(apiRef, props);
@@ -186,6 +183,7 @@ export const useGridCellSelection = (apiRef, props) => {
       if (!mousePosition.current || !apiRef.current.virtualScrollerRef?.current) {
         return;
       }
+      const dimensions = gridDimensionsSelector(apiRef);
       const {
         x: mouseX,
         y: mouseY
@@ -228,7 +226,7 @@ export const useGridCellSelection = (apiRef, props) => {
       autoScrollRAF.current = requestAnimationFrame(autoScroll);
     }
     autoScroll();
-  }, [apiRef, dimensions, totalHeaderHeight]);
+  }, [apiRef, totalHeaderHeight]);
   const handleCellMouseOver = React.useCallback((params, event) => {
     if (!lastMouseDownCell.current) {
       return;
@@ -245,6 +243,7 @@ export const useGridCellSelection = (apiRef, props) => {
     if (!virtualScrollerRect) {
       return;
     }
+    const dimensions = gridDimensionsSelector(apiRef);
     const {
       x,
       y
@@ -270,7 +269,7 @@ export const useGridCellSelection = (apiRef, props) => {
       // Mouse has left the sensitivity area while auto scroll is on
       stopAutoScroll();
     }
-  }, [apiRef, startAutoScroll, stopAutoScroll, totalHeaderHeight, dimensions]);
+  }, [apiRef, startAutoScroll, stopAutoScroll, totalHeaderHeight]);
   const handleCellClick = useEventCallback((params, event) => {
     const {
       id,
@@ -330,6 +329,7 @@ export const useGridCellSelection = (apiRef, props) => {
     } else if (event.key === 'ArrowLeft') {
       endColumnIndex -= 1;
     }
+    const visibleRows = getVisibleRows(apiRef);
     if (endRowIndex < 0 || endRowIndex >= visibleRows.rows.length) {
       return;
     }
@@ -382,6 +382,7 @@ export const useGridCellSelection = (apiRef, props) => {
     id,
     field
   }) => {
+    const visibleRows = getVisibleRows(apiRef);
     if (!visibleRows.range || !apiRef.current.isCellSelected(id, field)) {
       return classes;
     }
@@ -430,7 +431,7 @@ export const useGridCellSelection = (apiRef, props) => {
       newClasses.push(gridClasses['cell--rangeRight']);
     }
     return newClasses;
-  }, [apiRef, visibleRows.range, visibleRows.rows]);
+  }, [apiRef]);
   const canUpdateFocus = React.useCallback((initialValue, {
     event,
     cell
@@ -451,6 +452,7 @@ export const useGridCellSelection = (apiRef, props) => {
     if (apiRef.current.getSelectedCellsAsArray().length <= 1) {
       return value;
     }
+    const sortedRowIds = gridSortedRowIdsSelector(apiRef);
     const cellSelectionModel = apiRef.current.getCellSelectionModel();
     const unsortedSelectedRowIds = Object.keys(cellSelectionModel);
     const sortedSelectedRowIds = sortedRowIds.filter(id => unsortedSelectedRowIds.includes(`${id}`));
@@ -476,7 +478,7 @@ export const useGridCellSelection = (apiRef, props) => {
       return acc === '' ? rowString : [acc, rowString].join('\r\n');
     }, '');
     return copyData;
-  }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter, sortedRowIds]);
+  }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
   useGridRegisterPipeProcessor(apiRef, 'isCellSelected', checkIfCellIsSelected);
   useGridRegisterPipeProcessor(apiRef, 'cellClassName', addClassesToCells);
   useGridRegisterPipeProcessor(apiRef, 'canUpdateFocus', canUpdateFocus);

package/esm/hooks/features/clipboard/useGridClipboardImport.d.ts

@@ -0,0 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
+import type { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
+export declare const useGridClipboardImport: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "pagination" | "paginationMode" | "processRowUpdate" | "onProcessRowUpdateError" | "getRowId" | "onClipboardPasteStart" | "onClipboardPasteEnd" | "splitClipboardPastedText" | "disableClipboardPaste" | "onBeforeClipboardPasteStart">) => void;

package/esm/hooks/features/clipboard/useGridClipboardImport.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GRID_CHECKBOX_SELECTION_FIELD, gridFocusCellSelector, gridVisibleColumnFieldsSelector, useGridApiOptionHandler, useGridApiEventHandler, gridPaginatedVisibleSortedGridRowIdsSelector, gridExpandedSortedRowIdsSelector } from '@mui/x-data-grid';
+import { GRID_CHECKBOX_SELECTION_FIELD, gridFocusCellSelector, gridVisibleColumnFieldsSelector, useGridApiOptionHandler, useGridApiEventHandler, gridPaginatedVisibleSortedGridRowIdsSelector, gridExpandedSortedRowIdsSelector, gridRowSelectionIdsSelector, gridRowSelectionCountSelector } from '@mui/x-data-grid';
 import { getRowIdFromRowModel, getActiveElement, useGridRegisterPipeProcessor, getPublicApiRef, isPasteShortcut, useGridLogger } from '@mui/x-data-grid/internals';
 import { warnOnce } from '@mui/x-internals/warning';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_REORDER_COL_DEF } from '@mui/x-data-grid-pro';
@@ -193,10 +193,10 @@ function defaultPasteResolver({
     }
     return true;
   });
-  const selectedRows = apiRef.current.getSelectedRows();
-  if (selectedRows.size > 0 && !isSingleValuePasted) {
+  if (gridRowSelectionCountSelector(apiRef) > 0 && !isSingleValuePasted) {
     // Multiple values are pasted starting from the first and top-most cell
     const pastedRowsDataCount = pastedData.length;
+    const selectedRows = gridRowSelectionIdsSelector(apiRef);
 
     // There's no guarantee that the selected rows are in the same order as the pasted rows
     selectedRows.forEach((row, rowId) => {
@@ -255,7 +255,6 @@ export const useGridClipboardImport = (apiRef, props) => {
   const onProcessRowUpdateError = props.onProcessRowUpdateError;
   const getRowId = props.getRowId;
   const enableClipboardPaste = !props.disableClipboardPaste;
-  const rootEl = apiRef.current.rootElementRef?.current;
   const logger = useGridLogger(apiRef, 'useGridClipboardImport');
   const splitClipboardPastedText = props.splitClipboardPastedText;
   const {
@@ -278,6 +277,7 @@ export const useGridClipboardImport = (apiRef, props) => {
         return;
       }
     }
+    const rootEl = apiRef.current.rootElementRef?.current;
     if (!rootEl) {
       return;
     }
@@ -318,7 +318,7 @@ export const useGridClipboardImport = (apiRef, props) => {
       paginationMode
     });
     cellUpdater.applyUpdates();
-  }, [apiRef, processRowUpdate, onProcessRowUpdateError, getRowId, enableClipboardPaste, rootEl, splitClipboardPastedText, pagination, paginationMode, onBeforeClipboardPasteStart, logger]);
+  }, [apiRef, processRowUpdate, onProcessRowUpdateError, getRowId, enableClipboardPaste, splitClipboardPastedText, pagination, paginationMode, onBeforeClipboardPasteStart, logger]);
   const checkIfCanStartEditing = React.useCallback((initialValue, {
     event
   }) => {

package/esm/hooks/features/dataSource/models.d.ts

@@ -0,0 +1,54 @@
+import type { GridColDef, GridRowId, GridValidRowModel, GridDataSource, GridGetRowsResponse, GridGetRowsParams, GridDataSourceApiBase, GridDataSourcePrivateApi } from '@mui/x-data-grid-pro';
+import type { GridAggregationModel } from '../aggregation/gridAggregationInterfaces';
+export interface GridGetRowsResponsePremium extends GridGetRowsResponse {
+  /**
+   * Row to be used for aggregation footer row.
+   * It must provide the values for the aggregated columns passed in
+   * `GridGetRowsParams.aggregationModel`.
+   */
+  aggregateRow?: GridValidRowModel;
+}
+export interface GridGetRowsParamsPremium extends GridGetRowsParams {
+  /**
+   * List of aggregated columns.
+   */
+  aggregationModel?: GridAggregationModel;
+  /**
+   * List of grouped columns (only applicable with `rowGrouping`).
+   */
+  groupFields?: GridColDef['field'][];
+}
+export interface GridDataSourcePremium extends Omit<GridDataSource, 'getRows'> {
+  /**
+   * This method will be called when the grid needs to fetch some rows.
+   * @param {GridGetRowsParamsPremium} params The parameters required to fetch the rows.
+   * @returns {Promise<GridGetRowsResponsePremium>} A promise that resolves to the data of type [GridGetRowsResponsePremium].
+   */
+  getRows(params: GridGetRowsParamsPremium): Promise<GridGetRowsResponsePremium>;
+  /**
+   * Used to get the aggregated value for a parent row.
+   * @param {GridValidRowModel} row The row to extract the aggregated value from.
+   * @param {GridColDef['field']} field The field to extract the aggregated value for.
+   * @returns {string} The aggregated value for a specific aggregated column.
+   */
+  getAggregatedValue?: (row: GridValidRowModel, field: GridColDef['field']) => string;
+}
+export interface GridDataSourceApiBasePremium extends Omit<GridDataSourceApiBase, 'fetchRows'> {
+  /**
+   * Fetches the rows from the server.
+   * If no `parentId` option is provided, it fetches the root rows.
+   * Any missing parameter from `params` will be filled from the state (sorting, filtering, etc.).
+   * @param {GridRowId} parentId The id of the parent node (default: `GRID_ROOT_GROUP_ID`).
+   * @param {Partial<GridGetRowsParamsPremium>} params Request parameters override.
+   */
+  fetchRows: (parentId?: GridRowId, params?: Partial<GridGetRowsParamsPremium>) => void;
+}
+export interface GridDataSourceApiPremium {
+  /**
+   * The data source API.
+   */
+  dataSource: GridDataSourceApiBasePremium;
+}
+export interface GridDataSourcePremiumPrivateApi extends GridDataSourcePrivateApi {
+  resolveGroupAggregation: (groupId: GridRowId, field: string) => any;
+}

package/esm/hooks/features/dataSource/useGridDataSourcePremium.d.ts

@@ -0,0 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
+import { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
+export declare const useGridDataSourcePremium: (apiRef: RefObject<GridPrivateApiPremium>, props: DataGridPremiumProcessedProps) => void;