@mui/x-data-grid 8.0.0-beta.3 → 8.1.0

package/esm/constants/localeTextConstants.js

@@ -4,6 +4,7 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   noResultsOverlayLabel: 'No results found.',
   noColumnsOverlayLabel: 'No columns',
   noColumnsOverlayManageColumns: 'Manage columns',
+  emptyPivotOverlayLabel: 'Add fields to rows, columns, and values to create a pivot table',
   // Density selector toolbar button text
   toolbarDensity: 'Density',
   toolbarDensityLabel: 'Density',
@@ -23,22 +24,16 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   toolbarQuickFilterPlaceholder: 'Search…',
   toolbarQuickFilterLabel: 'Search',
   toolbarQuickFilterDeleteIconLabel: 'Clear',
-  // Prompt toolbar field
-  toolbarPromptControlPlaceholder: 'Type a prompt…',
-  toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
-  toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
-  toolbarPromptControlLabel: 'Prompt input',
-  toolbarPromptControlRecordButtonDefaultLabel: 'Record',
-  toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
-  toolbarPromptControlSendActionLabel: 'Send',
-  toolbarPromptControlSendActionAriaLabel: 'Send prompt',
-  toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
   // Export selector toolbar button text
   toolbarExport: 'Export',
   toolbarExportLabel: 'Export',
   toolbarExportCSV: 'Download as CSV',
   toolbarExportPrint: 'Print',
   toolbarExportExcel: 'Download as Excel',
+  // Toolbar pivot button
+  toolbarPivot: 'Pivot',
+  // Toolbar AI Assistant button
+  toolbarAssistant: 'AI Assistant',
   // Columns management text
   columnsManagementSearchTitle: 'Search',
   columnsManagementNoColumns: 'No columns',
@@ -115,6 +110,7 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   columnMenuUnsort: 'Unsort',
   columnMenuSortAsc: 'Sort by ASC',
   columnMenuSortDesc: 'Sort by DESC',
+  columnMenuManagePivot: 'Manage pivot',
   // Column header text
   columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} active filters` : `${count} active filter`,
   columnHeaderFiltersLabel: 'Show filters',
@@ -187,5 +183,77 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   aggregationFunctionLabelAvg: 'avg',
   aggregationFunctionLabelMin: 'min',
   aggregationFunctionLabelMax: 'max',
-  aggregationFunctionLabelSize: 'size'
+  aggregationFunctionLabelSize: 'size',
+  // Pivot panel
+  pivotToggleLabel: 'Pivot',
+  pivotRows: 'Rows',
+  pivotColumns: 'Columns',
+  pivotValues: 'Values',
+  pivotCloseButton: 'Close pivot settings',
+  pivotSearchButton: 'Search fields',
+  pivotSearchControlPlaceholder: 'Search fields',
+  pivotSearchControlLabel: 'Search fields',
+  pivotSearchControlClear: 'Clear search',
+  pivotNoFields: 'No fields',
+  pivotMenuMoveUp: 'Move up',
+  pivotMenuMoveDown: 'Move down',
+  pivotMenuMoveToTop: 'Move to top',
+  pivotMenuMoveToBottom: 'Move to bottom',
+  pivotMenuRows: 'Rows',
+  pivotMenuColumns: 'Columns',
+  pivotMenuValues: 'Values',
+  pivotMenuOptions: 'Field options',
+  pivotMenuAddToRows: 'Add to Rows',
+  pivotMenuAddToColumns: 'Add to Columns',
+  pivotMenuAddToValues: 'Add to Values',
+  pivotMenuRemove: 'Remove',
+  pivotDragToRows: 'Drag here to create rows',
+  pivotDragToColumns: 'Drag here to create columns',
+  pivotDragToValues: 'Drag here to create values',
+  pivotYearColumnHeaderName: '(Year)',
+  pivotQuarterColumnHeaderName: '(Quarter)',
+  // AI Assistant panel
+  aiAssistantPanelTitle: 'AI Assistant',
+  aiAssistantPanelClose: 'Close AI Assistant',
+  aiAssistantPanelNewConversation: 'New conversation',
+  aiAssistantPanelConversationHistory: 'Conversation history',
+  aiAssistantPanelEmptyConversation: 'No prompt history',
+  aiAssistantSuggestions: 'Suggestions',
+  // Prompt field
+  promptFieldLabel: 'Prompt',
+  promptFieldPlaceholder: 'Type a prompt…',
+  promptFieldPlaceholderWithRecording: 'Type or record a prompt…',
+  promptFieldPlaceholderListening: 'Listening for prompt…',
+  promptFieldSpeechRecognitionNotSupported: 'Speech recognition is not supported in this browser',
+  promptFieldSend: 'Send',
+  promptFieldRecord: 'Record',
+  promptFieldStopRecording: 'Stop recording',
+  // Prompt
+  promptRerun: 'Run again',
+  promptProcessing: 'Processing…',
+  promptAppliedChanges: 'Applied changes',
+  // Prompt changes
+  promptChangeGroupDescription: column => `Group by ${column}`,
+  promptChangeAggregationLabel: (column, aggregation) => `${column} (${aggregation})`,
+  promptChangeAggregationDescription: (column, aggregation) => `Aggregate ${column} (${aggregation})`,
+  promptChangeFilterLabel: (column, operator, value) => {
+    if (operator === 'is any of') {
+      return `${column} is any of: ${value}`;
+    }
+    return `${column} ${operator} ${value}`;
+  },
+  promptChangeFilterDescription: (column, operator, value) => {
+    if (operator === 'is any of') {
+      return `Filter where ${column} is any of: ${value}`;
+    }
+    return `Filter where ${column} ${operator} ${value}`;
+  },
+  promptChangeSortDescription: (column, direction) => `Sort by ${column} (${direction})`,
+  promptChangePivotEnableLabel: 'Pivot',
+  promptChangePivotEnableDescription: 'Enable pivot',
+  promptChangePivotColumnsLabel: count => `Columns (${count})`,
+  promptChangePivotColumnsDescription: (column, direction) => `${column}${direction ? ` (${direction})` : ''}`,
+  promptChangePivotRowsLabel: count => `Rows (${count})`,
+  promptChangePivotValuesLabel: count => `Values (${count})`,
+  promptChangePivotValuesDescription: (column, aggregation) => `${column} (${aggregation})`
 };

package/esm/context/GridContextProvider.js

@@ -3,7 +3,7 @@ import { GridApiContext } from "../components/GridApiContext.js";
 import { GridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
 import { GridRootPropsContext } from "./GridRootPropsContext.js";
 import { GridConfigurationContext } from "../components/GridConfigurationContext.js";
-import { GridPreferencePanelContextProvider } from "../components/panel/GridPreferencePanelContext.js";
+import { GridPanelContextProvider } from "../components/panel/GridPanelContext.js";
 import { GridCSSVariablesContext } from "../utils/css/context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridContextProvider({
@@ -21,7 +21,7 @@ export function GridContextProvider({
         value: privateApiRef,
         children: /*#__PURE__*/_jsx(GridApiContext.Provider, {
           value: apiRef,
-          children: /*#__PURE__*/_jsx(GridPreferencePanelContextProvider, {
+          children: /*#__PURE__*/_jsx(GridPanelContextProvider, {
             children: /*#__PURE__*/_jsx(GridCSSVariablesContext, {
               children: children
             })

package/esm/hooks/core/useGridInitialization.d.ts

@@ -1,7 +1,7 @@
 import { RefObject } from '@mui/x-internals/types';
-import type { GridApiCommon, GridPrivateApiCommon } from '../../models/api/gridApiCommon';
+import type { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
  */
-export declare const useGridInitialization: <PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(inputApiRef: RefObject<Api | null> | undefined, props: DataGridProcessedProps) => import("react").RefObject<PrivateApi>;
+export declare const useGridInitialization: <PrivateApi extends GridPrivateApiCommon>(privateApiRef: RefObject<PrivateApi>, props: DataGridProcessedProps) => void;

package/esm/hooks/core/useGridInitialization.js

@@ -1,7 +1,6 @@
 import { useGridRefs } from "./useGridRefs.js";
 import { useGridIsRtl } from "./useGridIsRtl.js";
 import { useGridLoggerFactory } from "./useGridLoggerFactory.js";
-import { useGridApiInitialization } from "./useGridApiInitialization.js";
 import { useGridLocaleText } from "./useGridLocaleText.js";
 import { useGridPipeProcessing } from "./pipeProcessing/index.js";
 import { useGridStrategyProcessing } from "./strategyProcessing/index.js";
@@ -11,8 +10,7 @@ import { useGridProps } from "./useGridProps.js";
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
  */
-export const useGridInitialization = (inputApiRef, props) => {
-  const privateApiRef = useGridApiInitialization(inputApiRef, props);
+export const useGridInitialization = (privateApiRef, props) => {
   useGridRefs(privateApiRef);
   useGridProps(privateApiRef, props);
   useGridIsRtl(privateApiRef);
@@ -24,5 +22,4 @@ export const useGridInitialization = (inputApiRef, props) => {
   privateApiRef.current.register('private', {
     rootProps: props
   });
-  return privateApiRef;
 };

package/esm/hooks/features/columnGrouping/useGridColumnGrouping.d.ts

@@ -2,7 +2,7 @@ import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
-export declare const columnGroupsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'columnGroupingModel' | 'experimentalFeatures'>>;
+export declare const columnGroupsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'columnGroupingModel'>>;
 /**
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)

package/esm/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -22,8 +22,7 @@ import { PinnedColumnPosition } from "../../../internals/constants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'ColumnHeaderRow',
-  overridesResolver: (_, styles) => styles.columnHeaderRow
+  slot: 'ColumnHeaderRow'
 })({
   display: 'flex'
 });

package/esm/hooks/features/columns/gridColumnsUtils.d.ts

@@ -43,6 +43,7 @@ export declare const hydrateColumnsWidth: (rawState: GridColumnsRawState, dimens
  * The columns not registered in `orderedFields` will be placed after the imported columns.
  */
 export declare const applyInitialState: (columnsState: GridColumnsRawState, initialState: GridColumnsInitialState | undefined) => GridColumnsRawState;
+export declare function getDefaultColTypeDef(type: GridColDef['type']): import("@mui/x-data-grid").GridColTypeDef;
 export declare const createColumnsState: ({
   apiRef,
   columnsToUpsert,

package/esm/hooks/features/columns/gridColumnsUtils.js

@@ -206,7 +206,7 @@ export const applyInitialState = (columnsState, initialState) => {
   });
   return newColumnsState;
 };
-function getDefaultColTypeDef(type) {
+export function getDefaultColTypeDef(type) {
   let colDef = COLUMN_TYPES[DEFAULT_GRID_COL_TYPE_KEY];
   if (type && COLUMN_TYPES[type]) {
     colDef = COLUMN_TYPES[type];

package/esm/hooks/features/columns/useGridColumns.js

@@ -9,6 +9,7 @@ import { useGridRegisterPipeProcessor, useGridRegisterPipeApplier } from "../../
 import { EMPTY_PINNED_COLUMN_FIELDS } from "./gridColumnsInterfaces.js";
 import { hydrateColumnsWidth, createColumnsState, COLUMNS_DIMENSION_PROPERTIES } from "./gridColumnsUtils.js";
 import { GridPreferencePanelsValue } from "../preferencesPanel/index.js";
+import { gridPivotActiveSelector } from "../pivoting/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const columnsStateInitializer = (state, props, apiRef) => {
   const columnsState = createColumnsState({
@@ -77,6 +78,10 @@ export function useGridColumns(apiRef, props) {
     }
   }, [apiRef]);
   const updateColumns = React.useCallback(columns => {
+    if (gridPivotActiveSelector(apiRef)) {
+      apiRef.current.updateNonPivotColumns(columns);
+      return;
+    }
     const columnsState = createColumnsState({
       apiRef,
       columnsToUpsert: columns,
@@ -226,11 +231,12 @@ export function useGridColumns(apiRef, props) {
     return initialValue;
   }, [props.slots.columnsPanel, props.slotProps?.columnsPanel]);
   const addColumnMenuItems = React.useCallback(columnMenuItems => {
-    if (props.disableColumnSelector) {
+    const isPivotActive = gridPivotActiveSelector(apiRef);
+    if (props.disableColumnSelector || isPivotActive) {
       return columnMenuItems;
     }
     return [...columnMenuItems, 'columnMenuColumnsItem'];
-  }, [props.disableColumnSelector]);
+  }, [props.disableColumnSelector, apiRef]);
   useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuItems);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);

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

@@ -3,7 +3,7 @@ export type GridDataSourceCacheDefaultConfig = {
   /**
    * Time To Live for each cache entry in milliseconds.
    * After this time the cache entry will become stale and the next query will result in cache miss.
-   * @default 300000 (5 minutes)
+   * @default 300_000 (5 minutes)
    */
   ttl?: number;
   /**

package/esm/hooks/features/dataSource/cache.js

@@ -3,7 +3,7 @@ export function getKeyDefault(params) {
 }
 export class GridDataSourceCacheDefault {
   constructor({
-    ttl = 300000,
+    ttl = 300_000,
     getKey = getKeyDefault
   }) {
     this.cache = void 0;

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

@@ -1,5 +1,6 @@
-import { GridDataSourceCache, GridGetRowsParams } from "../../../models/gridDataSource.js";
-import { GridRowId } from "../../../models/gridRows.js";
+import type { GridDataSourceCache, GridGetRowsParams, GridUpdateRowParams } from '../../../models/gridDataSource';
+import type { GridRowId, GridRowModel } from '../../../models/gridRows';
+import type { GridDataSourceCacheDefaultConfig } from './cache';
 export interface GridDataSourceApiBase {
   /**
    * Fetches the rows from the server.
@@ -13,10 +14,22 @@ export interface GridDataSourceApiBase {
    * The data source cache object.
    */
   cache: GridDataSourceCache;
+  /**
+   * Syncs the row with the server and updates in the grid.
+   * @param {GridUpdateRowParams} params The parameters for the edit operation.
+   * @returns {Promise<GridRowModel> | undefined} The updated row or `undefined` if `dataSource.updateRow` is not passed.
+   */
+  editRow: (params: GridUpdateRowParams) => Promise<GridRowModel> | undefined;
 }
 export interface GridDataSourceApi {
   /**
    * The data source API.
    */
   dataSource: GridDataSourceApiBase;
+}
+export interface GridDataSourceBaseOptions {
+  cacheOptions?: GridDataSourceCacheDefaultConfig;
+  fetchRowChildren?: (parents: GridRowId[]) => void;
+  clearDataSourceState?: () => void;
+  handleEditRow?: (params: GridUpdateRowParams, updatedRow: GridRowModel) => void;
 }

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

@@ -1,21 +1,16 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridDataSourceCache } from "../../../models/gridDataSource.js";
 import { CacheChunkManager, DataSourceRowsUpdateStrategy } from "./utils.js";
-import { type GridDataSourceCacheDefaultConfig } from "./cache.js";
-import type { GridDataSourceApi } from './models';
+import type { GridDataSourceApi, GridDataSourceBaseOptions } from './models';
 import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import type { GridStrategyProcessor } from '../../core/strategyProcessing';
 import type { GridEventListener } from '../../../models/events';
-import type { GridRowId } from '../../../models';
-export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity>(apiRef: RefObject<Api>, props: Pick<DataGridProcessedProps, "dataSource" | "dataSourceCache" | "onDataSourceError" | "pageSizeOptions" | "signature">, options?: {
-  cacheOptions?: GridDataSourceCacheDefaultConfig;
-  fetchRowChildren?: (parents: GridRowId[]) => void;
-  clearDataSourceState?: () => void;
-}) => {
+export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity>(apiRef: RefObject<Api>, props: Pick<DataGridProcessedProps, "dataSource" | "dataSourceCache" | "onDataSourceError" | "pageSizeOptions" | "signature">, options?: GridDataSourceBaseOptions) => {
   api: {
     public: GridDataSourceApi;
   };
+  debouncedFetchRows: ((parentId?: import("@mui/x-data-grid").GridRowId, params?: Partial<import("@mui/x-data-grid").GridGetRowsParams>) => void) & import("@mui/utils/debounce").Cancelable;
   strategyProcessor: {
     strategyName: DataSourceRowsUpdateStrategy;
     group: "dataSourceRowsUpdate";

package/esm/hooks/features/dataSource/useGridDataSourceBase.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { unstable_debounce as debounce } from '@mui/utils';
 import { warnOnce } from '@mui/x-internals/warning';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { GRID_ROOT_GROUP_ID } from "../rows/gridRowsUtils.js";
 import { runIf } from "../../../utils/utils.js";
 import { GridStrategyGroup } from "../../core/strategyProcessing/index.js";
@@ -11,7 +12,7 @@ import { gridPaginationModelSelector } from "../pagination/gridPaginationSelecto
 import { gridGetRowsParamsSelector } from "./gridDataSourceSelector.js";
 import { CacheChunkManager, DataSourceRowsUpdateStrategy } from "./utils.js";
 import { GridDataSourceCacheDefault } from "./cache.js";
-import { GridGetRowsError } from "./gridDataSourceError.js";
+import { GridGetRowsError, GridUpdateRowError } from "./gridDataSourceError.js";
 const noopCache = {
   clear: () => {},
   get: () => undefined,
@@ -67,9 +68,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     try {
       const getRowsResponse = await getRows(fetchParams);
       const cacheResponses = cacheChunkManager.splitResponse(fetchParams, getRowsResponse);
-      cacheResponses.forEach((response, key) => {
-        cache.set(key, response);
-      });
+      cacheResponses.forEach((response, key) => cache.set(key, response));
       if (lastRequestId.current === requestId) {
         apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
           response: getRowsResponse,
@@ -89,7 +88,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
             cause: originalError
           }));
         } else if (process.env.NODE_ENV !== 'production') {
-          warnOnce(['MUI X: A call to `dataSource.getRows()` threw an error which was not handled because `unstable_onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid unstable_onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
+          warnOnce(['MUI X: A call to `dataSource.getRows()` threw an error which was not handled because `onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
         }
       }
     } finally {
@@ -118,10 +117,42 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
       response
     }, true);
   }, [apiRef]);
+  const dataSourceUpdateRow = props.dataSource?.updateRow;
+  const handleEditRowOption = options.handleEditRow;
+  const editRow = React.useCallback(async params => {
+    if (!dataSourceUpdateRow) {
+      return undefined;
+    }
+    try {
+      const finalRowUpdate = await dataSourceUpdateRow(params);
+      if (typeof handleEditRowOption === 'function') {
+        handleEditRowOption(params, finalRowUpdate);
+        return finalRowUpdate;
+      }
+      apiRef.current.updateNestedRows([finalRowUpdate], []);
+      if (finalRowUpdate && !isDeepEqual(finalRowUpdate, params.previousRow)) {
+        // Reset the outdated cache, only if the row is _actually_ updated
+        apiRef.current.dataSource.cache.clear();
+      }
+      return finalRowUpdate;
+    } catch (errorThrown) {
+      if (typeof onDataSourceErrorProp === 'function') {
+        onDataSourceErrorProp(new GridUpdateRowError({
+          message: errorThrown?.message,
+          params,
+          cause: errorThrown
+        }));
+      } else if (process.env.NODE_ENV !== 'production') {
+        warnOnce(['MUI X: A call to `dataSource.updateRow()` threw an error which was not handled because `onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
+      }
+      throw errorThrown; // Let the caller handle the error further
+    }
+  }, [apiRef, dataSourceUpdateRow, onDataSourceErrorProp, handleEditRowOption]);
   const dataSourceApi = {
     dataSource: {
       fetchRows,
-      cache
+      cache,
+      editRow
     }
   };
   const debouncedFetchRows = React.useMemo(() => debounce(fetchRows, 0), [fetchRows]);
@@ -147,6 +178,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     api: {
       public: dataSourceApi
     },
+    debouncedFetchRows,
     strategyProcessor: {
       strategyName: DataSourceRowsUpdateStrategy.Default,
       group: 'dataSourceRowsUpdate',

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

@@ -1,4 +1,4 @@
-import { GridGetRowsParams, GridGetRowsResponse } from "../../../models/gridDataSource.js";
+import type { GridGetRowsParams, GridGetRowsResponse } from '../../../models/gridDataSource';
 export declare enum DataSourceRowsUpdateStrategy {
   Default = "set-new-rows",
   LazyLoading = "replace-row-range",

package/esm/hooks/features/editing/useGridCellEditing.d.ts

@@ -1,4 +1,4 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
-export declare const useGridCellEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onCellEditStart" | "onCellEditStop" | "cellModesModel" | "onCellModesModelChange" | "onProcessRowUpdateError" | "signature">) => void;
+export declare const useGridCellEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onCellEditStart" | "onCellEditStop" | "cellModesModel" | "onCellModesModelChange" | "onProcessRowUpdateError" | "signature" | "dataSource">) => void;

package/esm/hooks/features/editing/useGridCellEditing.js

@@ -4,9 +4,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["id", "field"],
   _excluded2 = ["id", "field"];
 import * as React from 'react';
+import { warnOnce } from '@mui/x-internals/warning';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { warnOnce } from '@mui/x-internals/warning';
 import { useGridEvent, useGridEventPriority } from "../../utils/useGridEvent.js";
 import { GridEditModes, GridCellModes } from "../../../models/gridEditRowModel.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
@@ -317,6 +317,7 @@ export const useGridCellEditing = (apiRef, props) => {
       error,
       isProcessingProps
     } = editingState[id][field];
+    const row = apiRef.current.getRow(id);
     if (error || isProcessingProps) {
       // Attempt to change cell mode to "view" was not successful
       // Update previous mode to allow another attempt
@@ -328,7 +329,30 @@ export const useGridCellEditing = (apiRef, props) => {
       return;
     }
     const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromCellEditing(id, field);
-    if (processRowUpdate) {
+    if (props.dataSource?.updateRow) {
+      if (row[field] === rowUpdate[field]) {
+        finishCellEditMode();
+        return;
+      }
+      const handleError = () => {
+        prevCellModesModel.current[id][field].mode = GridCellModes.Edit;
+        // Revert the mode in the cellModesModel prop back to "edit"
+        updateFieldInCellModesModel(id, field, {
+          mode: GridCellModes.Edit
+        });
+      };
+      const updateRowParams = {
+        rowId: id,
+        updatedRow: rowUpdate,
+        previousRow: row
+      };
+      try {
+        await apiRef.current.dataSource.editRow(updateRowParams);
+        finishCellEditMode();
+      } catch {
+        handleError();
+      }
+    } else if (processRowUpdate) {
       const handleError = errorThrown => {
         prevCellModesModel.current[id][field].mode = GridCellModes.Edit;
         // Revert the mode in the cellModesModel prop back to "edit"
@@ -342,7 +366,6 @@ export const useGridCellEditing = (apiRef, props) => {
         }
       };
       try {
-        const row = apiRef.current.getRow(id);
         Promise.resolve(processRowUpdate(rowUpdate, row, {
           rowId: id
         })).then(finalRowUpdate => {

package/esm/hooks/features/editing/useGridEditing.d.ts

@@ -3,4 +3,4 @@ import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js
 import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
 export declare const editingStateInitializer: GridStateInitializer;
-export declare const useGridEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "isCellEditable" | "editMode" | "processRowUpdate">) => void;
+export declare const useGridEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "isCellEditable" | "editMode" | "processRowUpdate" | "dataSource" | "onDataSourceError">) => void;

package/esm/hooks/features/editing/useGridRowEditing.d.ts

@@ -1,4 +1,4 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
-export declare const useGridRowEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onRowEditStart" | "onRowEditStop" | "onProcessRowUpdateError" | "rowModesModel" | "onRowModesModelChange" | "signature">) => void;
+export declare const useGridRowEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onRowEditStart" | "onRowEditStop" | "onProcessRowUpdateError" | "rowModesModel" | "onRowModesModelChange" | "signature" | "dataSource">) => void;

package/esm/hooks/features/editing/useGridRowEditing.js

@@ -7,6 +7,7 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { warnOnce } from '@mui/x-internals/warning';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { useGridEvent, useGridEventPriority } from "../../utils/useGridEvent.js";
 import { GridEditModes, GridRowModes } from "../../../models/gridEditRowModel.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
@@ -370,7 +371,7 @@ export const useGridRowEditing = (apiRef, props) => {
       mode: GridRowModes.View
     }, other));
   }, [throwIfNotInMode, updateRowInRowModesModel]);
-  const updateStateToStopRowEditMode = useEventCallback(params => {
+  const updateStateToStopRowEditMode = useEventCallback(async params => {
     const {
       id,
       ignoreModifications,
@@ -406,7 +407,30 @@ export const useGridRowEditing = (apiRef, props) => {
       return;
     }
     const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
-    if (processRowUpdate) {
+    if (props.dataSource?.updateRow) {
+      if (isDeepEqual(row, rowUpdate)) {
+        finishRowEditMode();
+        return;
+      }
+      const handleError = () => {
+        prevRowModesModel.current[id].mode = GridRowModes.Edit;
+        // Revert the mode in the rowModesModel prop back to "edit"
+        updateRowInRowModesModel(id, {
+          mode: GridRowModes.Edit
+        });
+      };
+      const updateRowParams = {
+        rowId: id,
+        updatedRow: rowUpdate,
+        previousRow: row
+      };
+      try {
+        await apiRef.current.dataSource.editRow(updateRowParams);
+        finishRowEditMode();
+      } catch {
+        handleError();
+      }
+    } else if (processRowUpdate) {
       const handleError = errorThrown => {
         // The row might have been deleted
         if (prevRowModesModel.current[id]) {

package/esm/hooks/features/keyboardNavigation/useGridKeyboardNavigation.d.ts

@@ -10,4 +10,4 @@ import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
  * @requires useGridScroll (method) - can be after
  * @requires useGridColumnSpanning (method) - can be after
  */
-export declare const useGridKeyboardNavigation: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "experimentalFeatures" | "signature" | "headerFilters" | "listView">) => void;
+export declare const useGridKeyboardNavigation: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "signature" | "headerFilters" | "listView">) => void;

package/esm/hooks/features/overlays/useGridOverlays.d.ts

@@ -8,7 +8,7 @@ import type { GridOverlayType } from '../../../components/base/GridOverlays';
 export declare const useGridOverlays: () => {
   getOverlay: () => React.JSX.Element | null;
   overlaysProps: {
-    overlayType: GridOverlayType;
+    overlayType: NonNullable<GridOverlayType>;
     loadingOverlayVariant: GridLoadingOverlayVariant | null;
   };
 };

package/esm/hooks/features/overlays/useGridOverlays.js

@@ -8,6 +8,7 @@ import { gridRowCountSelector, gridRowsLoadingSelector } from "../rows/index.js"
 import { gridPinnedRowsCountSelector } from "../rows/gridRowsSelector.js";
 import { GridOverlayWrapper } from "../../../components/base/GridOverlays.js";
 import { gridVisibleColumnDefinitionsSelector } from "../columns/index.js";
+import { gridPivotActiveSelector } from "../pivoting/index.js";
 
 /**
  * Uses the grid state to determine which overlay to display.
@@ -23,16 +24,21 @@ export const useGridOverlays = () => {
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const noRows = totalRowCount === 0 && pinnedRowsCount === 0;
   const loading = useGridSelector(apiRef, gridRowsLoadingSelector);
+  const pivotActive = useGridSelector(apiRef, gridPivotActiveSelector);
   const showNoRowsOverlay = !loading && noRows;
   const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
   const showNoColumnsOverlay = !loading && visibleColumns.length === 0;
+  const showEmptyPivotOverlay = showNoRowsOverlay && pivotActive;
   let overlayType = null;
   let loadingOverlayVariant = null;
+  if (showNoRowsOverlay) {
+    overlayType = 'noRowsOverlay';
+  }
   if (showNoColumnsOverlay) {
     overlayType = 'noColumnsOverlay';
   }
-  if (showNoRowsOverlay) {
-    overlayType = 'noRowsOverlay';
+  if (showEmptyPivotOverlay) {
+    overlayType = 'emptyPivotOverlay';
   }
   if (showNoResultsOverlay) {
     overlayType = 'noResultsOverlay';
@@ -42,7 +48,7 @@ export const useGridOverlays = () => {
     loadingOverlayVariant = rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] ?? (noRows ? 'skeleton' : 'linear-progress');
   }
   const overlaysProps = {
-    overlayType,
+    overlayType: overlayType,
     loadingOverlayVariant
   };
   const getOverlay = () => {

package/esm/hooks/features/pivoting/gridPivotingInterfaces.d.ts

@@ -0,0 +1,11 @@
+import type { GridRowModelUpdate } from '@mui/x-data-grid';
+import type { GridColDef } from '../../../models/colDef';
+export interface GridPivotingStatePartial {
+  active: boolean;
+  panelOpen: boolean;
+  initialColumns: Map<string, GridColDef> | undefined;
+}
+export interface GridPivotingPrivateApiCommunity {
+  updateNonPivotRows: (rows: readonly GridRowModelUpdate[], keepPreviousRows?: boolean) => void;
+  updateNonPivotColumns: (columns: readonly GridColDef[], keepPreviousColumns?: boolean) => void;
+}

package/esm/hooks/features/pivoting/gridPivotingSelectors.d.ts

@@ -0,0 +1,6 @@
+import type { GridColDef } from '../../../models/colDef';
+import type { GridStateCommunity } from '../../../models/gridStateCommunity';
+import type { GridPivotingStatePartial } from './gridPivotingInterfaces';
+export declare const gridPivotActiveSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, GridPivotingStatePartial, boolean>;
+export declare const gridPivotInitialColumnsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, GridPivotingStatePartial, Map<string, GridColDef>>;
+export declare const gridPivotPanelOpenSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, GridPivotingStatePartial, boolean>;