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

package/hooks/features/aggregation/useGridAggregation.js

@@ -9,6 +9,7 @@ exports.useGridAggregation = exports.aggregationStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _internals = require("@mui/x-data-grid-pro/internals");
 var _gridAggregationSelectors = require("./gridAggregationSelectors");
 var _gridAggregationUtils = require("./gridAggregationUtils");
 var _createAggregationLookup = require("./createAggregationLookup");
@@ -48,18 +49,29 @@ const useGridAggregation = (apiRef, props) => {
       apiRef,
       getAggregationPosition: props.getAggregationPosition,
       aggregationFunctions: props.aggregationFunctions,
-      aggregationRowsScope: props.aggregationRowsScope
+      aggregationRowsScope: props.aggregationRowsScope,
+      isDataSource: !!props.unstable_dataSource
     });
     apiRef.current.setState(state => (0, _extends2.default)({}, state, {
       aggregation: (0, _extends2.default)({}, state.aggregation, {
         lookup: aggregationLookup
       })
     }));
-  }, [apiRef, props.getAggregationPosition, props.aggregationFunctions, props.aggregationRowsScope]);
+  }, [apiRef, props.getAggregationPosition, props.aggregationFunctions, props.aggregationRowsScope, props.unstable_dataSource]);
   const aggregationApi = {
     setAggregationModel
   };
+  const aggregationPrivateApi = {
+    applyAggregation
+  };
   (0, _xDataGridPro.useGridApiMethod)(apiRef, aggregationApi, 'public');
+  (0, _xDataGridPro.useGridApiMethod)(apiRef, aggregationPrivateApi, 'private');
+  const addGetRowsParams = React.useCallback(params => {
+    return (0, _extends2.default)({}, params, {
+      aggregationModel: (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef)
+    });
+  }, [apiRef]);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'getRowsParams', addGetRowsParams);
 
   /**
    * EVENTS
@@ -69,16 +81,16 @@ const useGridAggregation = (apiRef, props) => {
       rulesOnLastRowHydration,
       rulesOnLastColumnHydration
     } = apiRef.current.caches.aggregation;
-    const aggregationRules = props.disableAggregation ? {} : (0, _gridAggregationUtils.getAggregationRules)({
-      columnsLookup: (0, _xDataGridPro.gridColumnLookupSelector)(apiRef),
-      aggregationModel: (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef),
-      aggregationFunctions: props.aggregationFunctions
-    });
+    const aggregationRules = props.disableAggregation ? {} : (0, _gridAggregationUtils.getAggregationRules)((0, _xDataGridPro.gridColumnLookupSelector)(apiRef), (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef), props.aggregationFunctions, !!props.unstable_dataSource);
 
     // Re-apply the row hydration to add / remove the aggregation footers
     if (!(0, _gridAggregationUtils.areAggregationRulesEqual)(rulesOnLastRowHydration, aggregationRules)) {
-      apiRef.current.requestPipeProcessorsApplication('hydrateRows');
-      applyAggregation();
+      if (props.unstable_dataSource) {
+        apiRef.current.unstable_dataSource.fetchRows();
+      } else {
+        apiRef.current.requestPipeProcessorsApplication('hydrateRows');
+        applyAggregation();
+      }
     }
 
     // Re-apply the column hydration to wrap / unwrap the aggregated columns
@@ -86,7 +98,7 @@ const useGridAggregation = (apiRef, props) => {
       apiRef.current.caches.aggregation.rulesOnLastColumnHydration = aggregationRules;
       apiRef.current.requestPipeProcessorsApplication('hydrateColumns');
     }
-  }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation]);
+  }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource]);
   (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'aggregationModelChange', checkAggregationRulesDiff);
   (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'columnsChange', checkAggregationRulesDiff);
   (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'filteredRowsSet', applyAggregation);

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

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

package/hooks/features/aggregation/useGridAggregationPreProcessors.js

@@ -18,11 +18,7 @@ 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 ? {} : (0, _gridAggregationUtils.getAggregationRules)({
-      columnsLookup: columnsState.lookup,
-      aggregationModel: (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef),
-      aggregationFunctions: props.aggregationFunctions
-    });
+    const aggregationRules = props.disableAggregation ? {} : (0, _gridAggregationUtils.getAggregationRules)(columnsState.lookup, (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef), props.aggregationFunctions, !!props.unstable_dataSource);
     columnsState.orderedFields.forEach(field => {
       const shouldHaveAggregationValue = !!aggregationRules[field];
       const haveAggregationColumnValue = !!rulesOnLastColumnHydration.current[field];
@@ -42,14 +38,11 @@ const useGridAggregationPreProcessors = (apiRef, props) => {
       columnsState.lookup[field] = column;
     });
     rulesOnLastColumnHydration.current = aggregationRules;
+    apiRef.current.caches.aggregation.rulesOnLastColumnHydration = aggregationRules;
     return columnsState;
-  }, [apiRef, props.aggregationFunctions, props.disableAggregation]);
+  }, [apiRef, props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource]);
   const addGroupFooterRows = React.useCallback(value => {
-    const aggregationRules = props.disableAggregation ? {} : (0, _gridAggregationUtils.getAggregationRules)({
-      columnsLookup: (0, _xDataGridPro.gridColumnLookupSelector)(apiRef),
-      aggregationModel: (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef),
-      aggregationFunctions: props.aggregationFunctions
-    });
+    const aggregationRules = props.disableAggregation ? {} : (0, _gridAggregationUtils.getAggregationRules)((0, _xDataGridPro.gridColumnLookupSelector)(apiRef), (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef), props.aggregationFunctions, !!props.unstable_dataSource);
     const hasAggregationRule = Object.keys(aggregationRules).length > 0;
 
     // If we did not have any aggregation footer before, and we still don't have any,
@@ -64,20 +57,21 @@ const useGridAggregationPreProcessors = (apiRef, props) => {
       getAggregationPosition: props.getAggregationPosition,
       hasAggregationRule
     });
-  }, [apiRef, props.disableAggregation, props.getAggregationPosition, props.aggregationFunctions]);
+  }, [apiRef, props.disableAggregation, props.getAggregationPosition, props.aggregationFunctions, props.unstable_dataSource]);
   const addColumnMenuButtons = React.useCallback((columnMenuItems, colDef) => {
     if (props.disableAggregation || !colDef.aggregable) {
       return columnMenuItems;
     }
     const availableAggregationFunctions = (0, _gridAggregationUtils.getAvailableAggregationFunctions)({
       aggregationFunctions: props.aggregationFunctions,
-      colDef
+      colDef,
+      isDataSource: !!props.unstable_dataSource
     });
     if (availableAggregationFunctions.length === 0) {
       return columnMenuItems;
     }
     return [...columnMenuItems, 'columnMenuAggregationItem'];
-  }, [props.aggregationFunctions, props.disableAggregation]);
+  }, [props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource]);
   const stateExportPreProcessing = React.useCallback(prevState => {
     if (props.disableAggregation) {
       return prevState;

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridColDef, GridFilterOperator } from '@mui/x-data-grid-pro';
 import { GridBaseColDef } from '@mui/x-data-grid-pro/internals';
 import { GridApiPremium } from '../../../models/gridApiPremium';
@@ -17,7 +18,7 @@ interface GridColDefWithAggregationWrappers extends GridBaseColDef {
  */
 export declare const wrapColumnWithAggregationValue: ({ column, apiRef, aggregationRule, }: {
     column: GridBaseColDef;
-    apiRef: React.MutableRefObject<GridApiPremium>;
+    apiRef: RefObject<GridApiPremium>;
     aggregationRule: GridAggregationRule;
 }) => GridBaseColDef;
 /**
@@ -60,7 +61,7 @@ export declare const unwrapColumnFromAggregation: ({ column, }: {
     hideSortIcons?: boolean;
     disableColumnMenu?: boolean;
     filterable?: boolean;
-    filterOperators?: readonly GridFilterOperator<import("@mui/x-data-grid").GridValidRowModel, any, any>[] | undefined;
+    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;

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

@@ -13,13 +13,13 @@ export interface GridCellSelectionApi {
     isCellSelected: (id: GridRowId, field: GridColDef['field']) => boolean;
     /**
      * Returns an object containing the selection state of the cells.
-     * The keys of the object correpond to the row IDs.
-     * The value of each key is another object whose keys are the fields and values are the selection state.
+     * 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 selected cells to be those passed to the `newModel` argument.
+     * 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.
      */

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

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

package/hooks/features/cellSelection/useGridCellSelection.js

@@ -26,10 +26,10 @@ const AUTO_SCROLL_SPEED = 20; // The speed to scroll once the mouse enters the s
 const useGridCellSelection = (apiRef, props) => {
   const hasRootReference = apiRef.current.rootElementRef.current !== null;
   const visibleRows = (0, _internals.useGridVisibleRows)(apiRef, props);
-  const cellWithVirtualFocus = React.useRef();
-  const lastMouseDownCell = React.useRef();
+  const cellWithVirtualFocus = React.useRef(null);
+  const lastMouseDownCell = React.useRef(null);
   const mousePosition = React.useRef(null);
-  const autoScrollRAF = React.useRef();
+  const autoScrollRAF = React.useRef(null);
   const sortedRowIds = (0, _xDataGridPro.useGridSelector)(apiRef, _xDataGridPro.gridSortedRowIdsSelector);
   const dimensions = (0, _xDataGridPro.useGridSelector)(apiRef, _xDataGridPro.gridDimensionsSelector);
   const totalHeaderHeight = (0, _internals.getTotalHeaderHeight)(apiRef, props);
@@ -100,7 +100,6 @@ const useGridCellSelection = (apiRef, props) => {
   }, [apiRef, visibleRows.rows]);
   const getSelectedCellsAsArray = React.useCallback(() => {
     const selectionModel = apiRef.current.getCellSelectionModel();
-    const idToIdLookup = (0, _xDataGridPro.gridRowsDataRowIdToIdLookupSelector)(apiRef);
     const currentVisibleRows = (0, _internals.getVisibleRows)(apiRef, props);
     const sortedEntries = currentVisibleRows.rows.reduce((result, row) => {
       if (row.id in selectionModel) {
@@ -112,7 +111,7 @@ const useGridCellSelection = (apiRef, props) => {
       selectedCells.push(...Object.entries(fields).reduce((selectedFields, [field, isSelected]) => {
         if (isSelected) {
           selectedFields.push({
-            id: idToIdLookup[id],
+            id,
             field
           });
         }

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

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

package/hooks/features/clipboard/useGridClipboardImport.js

@@ -129,7 +129,7 @@ class CellValueUpdater {
           if (onProcessRowUpdateError) {
             onProcessRowUpdateError(errorThrown);
           } else if (process.env.NODE_ENV !== 'production') {
-            (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
+            (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
           }
         };
         try {

package/hooks/features/dataSource/cache.d.ts

@@ -0,0 +1,2 @@
+import { GridGetRowsParamsPremium } from './models';
+export declare function getKeyPremium(params: GridGetRowsParamsPremium): string;

package/hooks/features/dataSource/cache.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getKeyPremium = getKeyPremium;
+function getKeyPremium(params) {
+  return JSON.stringify([params.filterModel, params.sortModel, params.groupKeys, params.groupFields, params.start, params.end, params.aggregationModel]);
+}

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

@@ -0,0 +1,47 @@
+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 {
+    aggregationModel?: GridAggregationModel;
+}
+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.
+     */
+    unstable_dataSource: GridDataSourceApiBasePremium;
+}
+export interface GridDataSourcePremiumPrivateApi extends GridDataSourcePrivateApi {
+    resolveGroupAggregation: (groupId: GridRowId, field: string) => any;
+}

package/hooks/features/dataSource/models.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

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

package/hooks/features/dataSource/useGridDataSourcePremium.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridDataSourcePremium = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _cache = require("./cache");
+const options = {
+  cacheOptions: {
+    getKey: _cache.getKeyPremium
+  }
+};
+const useGridDataSourcePremium = (apiRef, props) => {
+  const {
+    api,
+    strategyProcessor,
+    events
+  } = (0, _internals.useGridDataSourceBase)(apiRef, props, options);
+  const aggregateRowRef = React.useRef({});
+  const processDataSourceRows = React.useCallback(({
+    params,
+    response
+  }, applyRowHydration) => {
+    if (response.aggregateRow) {
+      aggregateRowRef.current = response.aggregateRow;
+    }
+    if (Object.keys(params.aggregationModel || {}).length > 0) {
+      if (applyRowHydration) {
+        apiRef.current.requestPipeProcessorsApplication('hydrateRows');
+      }
+      apiRef.current.applyAggregation();
+    }
+    return {
+      params,
+      response
+    };
+  }, [apiRef]);
+  const resolveGroupAggregation = React.useCallback((groupId, field) => {
+    if (groupId === _xDataGridPro.GRID_ROOT_GROUP_ID) {
+      return props.unstable_dataSource?.getAggregatedValue?.(aggregateRowRef.current, field);
+    }
+    const row = apiRef.current.getRow(groupId);
+    return props.unstable_dataSource?.getAggregatedValue?.(row, field);
+  }, [apiRef, props.unstable_dataSource]);
+  const privateApi = (0, _extends2.default)({}, api.private, {
+    resolveGroupAggregation
+  });
+  (0, _xDataGridPro.useGridApiMethod)(apiRef, api.public, 'public');
+  (0, _xDataGridPro.useGridApiMethod)(apiRef, privateApi, 'private');
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, strategyProcessor.strategyName, strategyProcessor.group, strategyProcessor.processor);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'processDataSourceRows', processDataSourceRows);
+  Object.entries(events).forEach(([event, handler]) => {
+    (0, _xDataGridPro.useGridApiEventHandler)(apiRef, event, handler);
+  });
+};
+exports.useGridDataSourcePremium = useGridDataSourcePremium;

package/hooks/features/export/serializer/excelSerializer.d.ts

@@ -1,4 +1,5 @@
 import type * as Excel from 'exceljs';
+import { RefObject } from '@mui/x-internals/types';
 import { GridRowId, GridColDef } from '@mui/x-data-grid-pro';
 import { GridStateColDef, GridColumnGroupLookup } from '@mui/x-data-grid/internals';
 import { ColumnsStylesInterface, GridExcelExportOptions } from '../gridExcelExportInterface';
@@ -18,7 +19,7 @@ interface SerializedRow {
  * actual rendered columns.
  * The caller of this function MUST call `resetColSpan()` before and after usage.
  */
-export declare const serializeRowUnsafe: (id: GridRowId, columns: GridStateColDef[], apiRef: React.MutableRefObject<GridPrivateApiPremium>, defaultValueOptionsFormulae: {
+export declare const serializeRowUnsafe: (id: GridRowId, columns: GridStateColDef[], apiRef: RefObject<GridPrivateApiPremium>, defaultValueOptionsFormulae: {
     [field: string]: {
         address: string;
     };
@@ -53,7 +54,7 @@ interface BuildExcelOptions extends Pick<GridExcelExportOptions, 'exceljsPreProc
     rowIds: GridRowId[];
     columnsStyles?: ColumnsStylesInterface;
 }
-export declare function buildExcel(options: BuildExcelOptions, apiRef: React.MutableRefObject<GridPrivateApiPremium>): Promise<Excel.Workbook>;
+export declare function buildExcel(options: BuildExcelOptions, apiRef: RefObject<GridPrivateApiPremium>): Promise<Excel.Workbook>;
 export interface ExcelExportInitEvent {
     serializedColumns: SerializedColumns;
     serializedRows: SerializedRow[];

package/hooks/features/export/useGridExcelExport.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 import { DataGridPremiumProps } from '../../../models/dataGridPremiumProps';
 /**
@@ -8,4 +8,4 @@ import { DataGridPremiumProps } from '../../../models/dataGridPremiumProps';
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridExcelExport: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: DataGridPremiumProps) => void;
+export declare const useGridExcelExport: (apiRef: RefObject<GridPrivateApiPremium>, props: DataGridPremiumProps) => void;

package/hooks/features/rowGrouping/createGroupingColDef.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridColDef, GridGroupingColDefOverride } from '@mui/x-data-grid-pro';
 import { GridColumnRawLookup } from '@mui/x-data-grid-pro/internals';
 import { GridApiPremium } from '../../../models/gridApiPremium';
@@ -25,7 +25,7 @@ interface CreateGroupingColDefMonoCriteriaParams {
  */
 export declare const createGroupingColDefForOneGroupingCriteria: ({ columnsLookup, groupedByColDef, groupingCriteria, colDefOverride, strategy, }: CreateGroupingColDefMonoCriteriaParams) => GridColDef;
 interface CreateGroupingColDefSeveralCriteriaParams {
-    apiRef: React.MutableRefObject<GridApiPremium>;
+    apiRef: RefObject<GridApiPremium>;
     columnsLookup: GridColumnRawLookup;
     /**
      * The fields from which we are grouping the rows.

package/hooks/features/rowGrouping/createGroupingColDef.js

@@ -40,7 +40,9 @@ const GROUPING_COL_DEF_FORCED_PROPERTIES_DATA_SOURCE = (0, _extends2.default)({}
  * TODO: Make this index comparator depth invariant, the logic should not be inverted when sorting in the "desc" direction (but the current return format of `sortComparator` does not support this behavior).
  */
 const groupingFieldIndexComparator = (v1, v2, cellParams1, cellParams2) => {
-  const model = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)(cellParams1.api.state, cellParams1.api.instanceId);
+  const model = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)({
+    current: cellParams1.api
+  });
   const groupingField1 = cellParams1.rowNode.groupingField ?? null;
   const groupingField2 = cellParams2.rowNode.groupingField ?? null;
   if (groupingField1 === groupingField2) {
@@ -71,10 +73,12 @@ const getLeafProperties = leafColDef => ({
     return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2);
   }
 });
+const groupedByColValueFormatter = groupedByColDef => (value, row, _, apiRef) => groupedByColDef.valueFormatter(value, row, groupedByColDef, apiRef);
 const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
   const properties = {
     sortable: groupedByColDef.sortable,
     filterable: groupedByColDef.filterable,
+    valueFormatter: groupedByColDef.valueFormatter ? groupedByColValueFormatter(groupedByColDef) : undefined,
     valueOptions: (0, _internals.isSingleSelectColDef)(groupedByColDef) ? groupedByColDef.valueOptions : undefined,
     sortComparator: (v1, v2, cellParams1, cellParams2) => {
       // We only want to sort the groups of the current grouping criteria

package/hooks/features/rowGrouping/gridRowGroupingSelector.d.ts

@@ -1,3 +1,3 @@
 import { GridStatePremium } from '../../../models/gridStatePremium';
-export declare const gridRowGroupingModelSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, import("./gridRowGroupingInterfaces").GridRowGroupingModel>;
-export declare const gridRowGroupingSanitizedModelSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, string[]>;
+export declare const gridRowGroupingModelSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, import("./gridRowGroupingInterfaces").GridRowGroupingState, import("./gridRowGroupingInterfaces").GridRowGroupingModel>;
+export declare const gridRowGroupingSanitizedModelSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, import("@mui/x-data-grid").GridColumnLookup, string[]>;

package/hooks/features/rowGrouping/gridRowGroupingUtils.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridRowTreeConfig, GridFilterState, GridFilterModel, GridRowModel, GridColDef, GridKeyValue, GridDataSource } from '@mui/x-data-grid-pro';
 import { GridAggregatedFilterItemApplier, GridColumnRawLookup, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn } from '@mui/x-data-grid-pro/internals';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
@@ -15,7 +15,7 @@ interface FilterRowTreeFromTreeDataParams {
     rowTree: GridRowTreeConfig;
     isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
     filterModel: GridFilterModel;
-    apiRef: React.MutableRefObject<GridPrivateApiPremium>;
+    apiRef: RefObject<GridPrivateApiPremium>;
 }
 /**
  * A leaf is visible if it passed the filter
@@ -26,12 +26,12 @@ interface FilterRowTreeFromTreeDataParams {
 export declare const filterRowTreeFromGroupingColumns: (params: FilterRowTreeFromTreeDataParams) => Omit<GridFilterState, "filterModel">;
 export declare const getColDefOverrides: (groupingColDefProp: DataGridPremiumProcessedProps["groupingColDef"], fields: string[], strategy?: RowGroupingStrategy) => import("@mui/x-data-grid-pro").GridGroupingColDefOverride<any> | null | undefined;
 export declare const mergeStateWithRowGroupingModel: (rowGroupingModel: GridRowGroupingModel) => (state: GridStatePremium) => GridStatePremium;
-export declare const setStrategyAvailability: (privateApiRef: React.MutableRefObject<GridPrivateApiPremium>, disableRowGrouping: boolean, dataSource?: GridDataSource) => void;
+export declare const setStrategyAvailability: (privateApiRef: RefObject<GridPrivateApiPremium>, disableRowGrouping: boolean, dataSource?: GridDataSource) => void;
 export declare const getCellGroupingCriteria: ({ row, colDef, groupingRule, apiRef, }: {
     row: GridRowModel;
     colDef: GridColDef;
     groupingRule: GridGroupingRule;
-    apiRef: React.MutableRefObject<GridPrivateApiPremium>;
+    apiRef: RefObject<GridPrivateApiPremium>;
 }) => {
     key: GridKeyValue | null | undefined;
     field: string;

package/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -154,7 +154,7 @@ const setStrategyAvailability = (privateApiRef, disableRowGrouping, dataSource)
     };
   }
   const strategy = dataSource ? RowGroupingStrategy.DataSource : RowGroupingStrategy.Default;
-  privateApiRef.current.setStrategyAvailability('rowTree', strategy, isAvailable);
+  privateApiRef.current.setStrategyAvailability(_internals.GridStrategyGroup.RowTree, strategy, isAvailable);
 };
 exports.setStrategyAvailability = setStrategyAvailability;
 const getCellGroupingCriteria = ({

package/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
-export declare const useGridDataSourceRowGroupingPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "disableRowGrouping" | "groupingColDef" | "rowGroupingColumnMode" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;
+export declare const useGridDataSourceRowGroupingPreProcessors: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "disableRowGrouping" | "groupingColDef" | "rowGroupingColumnMode" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;

package/hooks/features/rowGrouping/useGridRowGrouping.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
@@ -8,4 +8,4 @@ export declare const rowGroupingStateInitializer: GridStateInitializer<Pick<Data
  * @requires useGridRows (state, method) - can be after, async only
  * @requires useGridParamsApi (method) - can be after, async only
  */
-export declare const useGridRowGrouping: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "groupingColDef" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots" | "unstable_dataSource">) => void;
+export declare const useGridRowGrouping: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "groupingColDef" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots" | "unstable_dataSource">) => void;

package/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -171,7 +171,7 @@ const useGridRowGrouping = (apiRef, props) => {
 
       // Refresh the row tree creation strategy processing
       // TODO: Add a clean way to re-run a strategy processing without publishing a private event
-      if (apiRef.current.getActiveStrategy('rowTree') === _gridRowGroupingUtils.RowGroupingStrategy.Default) {
+      if (apiRef.current.getActiveStrategy(_internals.GridStrategyGroup.RowTree) === _gridRowGroupingUtils.RowGroupingStrategy.Default) {
         apiRef.current.publishEvent('activeStrategyProcessorChange', 'rowTreeCreation');
       }
     }

package/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
-export declare const useGridRowGroupingPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "disableRowGrouping" | "groupingColDef" | "rowGroupingColumnMode" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;
+export declare const useGridRowGroupingPreProcessors: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "disableRowGrouping" | "groupingColDef" | "rowGroupingColumnMode" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;

package/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -55,10 +55,13 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
     const groupingColDefs = getGroupingColDefs(columnsState);
     let newColumnFields = [];
     const newColumnsLookup = {};
+    const prevGroupingfields = [];
 
     // We only keep the non-grouping columns
     columnsState.orderedFields.forEach(field => {
-      if (!(0, _gridRowGroupingUtils.isGroupingColumn)(field)) {
+      if ((0, _gridRowGroupingUtils.isGroupingColumn)(field)) {
+        prevGroupingfields.push(field);
+      } else {
         newColumnFields.push(field);
         newColumnsLookup[field] = columnsState.lookup[field];
       }
@@ -73,9 +76,11 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
       }
       newColumnsLookup[groupingColDef.field] = groupingColDef;
     });
-    const startIndex = newColumnFields[0] === _xDataGridPro.GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
-    newColumnFields = [...newColumnFields.slice(0, startIndex), ...groupingColDefs.map(colDef => colDef.field), ...newColumnFields.slice(startIndex)];
-    columnsState.orderedFields = newColumnFields;
+    if (prevGroupingfields.length !== groupingColDefs.length) {
+      const startIndex = newColumnFields[0] === _xDataGridPro.GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
+      newColumnFields = [...newColumnFields.slice(0, startIndex), ...groupingColDefs.map(colDef => colDef.field), ...newColumnFields.slice(startIndex)];
+      columnsState.orderedFields = newColumnFields;
+    }
     columnsState.lookup = newColumnsLookup;
     return columnsState;
   }, [getGroupingColDefs]);

package/hooks/utils/useGridApiContext.d.ts

@@ -1,2 +1,2 @@
 import { GridApiPremium } from '../../models/gridApiPremium';
-export declare const useGridApiContext: () => import("react").MutableRefObject<GridApiPremium>;
+export declare const useGridApiContext: () => import("react").RefObject<GridApiPremium>;

package/hooks/utils/useGridApiRef.d.ts

@@ -1,2 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridApiCommon } from '@mui/x-data-grid';
 import { GridApiPremium } from '../../models/gridApiPremium';
-export declare const useGridApiRef: () => import("react").MutableRefObject<GridApiPremium>;
+export declare const useGridApiRef: <Api extends GridApiCommon = GridApiPremium>() => RefObject<Api | null>;

package/hooks/utils/useGridAriaAttributes.js

@@ -9,13 +9,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _gridRowGroupingSelector = require("../features/rowGrouping/gridRowGroupingSelector");
 var _useGridPrivateApiContext = require("./useGridPrivateApiContext");
-var _useGridRootProps = require("./useGridRootProps");
 const useGridAriaAttributes = () => {
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const ariaAttributesPro = (0, _internals.useGridAriaAttributes)();
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const gridRowGroupingModel = (0, _internals.useGridSelector)(apiRef, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector);
-  const ariaAttributesPremium = rootProps.experimentalFeatures?.ariaV8 && gridRowGroupingModel.length > 0 ? {
+  const ariaAttributesPremium = gridRowGroupingModel.length > 0 ? {
     role: 'treegrid'
   } : {};
   return (0, _extends2.default)({}, ariaAttributesPro, ariaAttributesPremium);

package/hooks/utils/useGridPrivateApiContext.d.ts

@@ -1,2 +1,2 @@
 import { GridPrivateApiPremium } from '../../models/gridApiPremium';
-export declare const useGridPrivateApiContext: () => import("react").MutableRefObject<GridPrivateApiPremium>;
+export declare const useGridPrivateApiContext: () => import("react").RefObject<GridPrivateApiPremium>;