@mui/x-data-grid 8.0.0-beta.2 → 8.0.0

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

@@ -4,55 +4,55 @@ import { GridColumnLookup, GridPinnedColumnFields } from "./gridColumnsInterface
  * Get the columns state
  * @category Columns
  */
-export declare const gridColumnsStateSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./gridColumnsInterfaces").GridColumnsState>;
+export declare const gridColumnsStateSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("@mui/x-data-grid").GridColumnsState>;
 /**
  * Get an array of column fields in the order rendered on screen.
  * @category Columns
  */
-export declare const gridColumnFieldsSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnsState, string[]>;
+export declare const gridColumnFieldsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsState, string[]>;
 /**
  * Get the columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Columns
  */
-export declare const gridColumnLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnsState, GridColumnLookup>;
+export declare const gridColumnLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsState, GridColumnLookup>;
 /**
  * Get an array of column definitions in the order rendered on screen..
  * @category Columns
  */
-export declare const gridColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, GridColumnLookup, import("../../../internals").GridStateColDef[]>;
+export declare const gridColumnDefinitionsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, GridColumnLookup, import("../../../internals").GridStateColDef[]>;
 /**
  * Get the column visibility model, containing the visibility status of each column.
  * If a column is not registered in the model, it is visible.
  * @category Visible Columns
  */
-export declare const gridColumnVisibilityModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnsState, import("./gridColumnsInterfaces").GridColumnVisibilityModel>;
+export declare const gridColumnVisibilityModelSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsState, import("@mui/x-data-grid").GridColumnVisibilityModel>;
 /**
  * Get the "initial" column visibility model, containing the visibility status of each column.
  * It is updated when the `columns` prop is updated or when `updateColumns` API method is called.
  * If a column is not registered in the model, it is visible.
  * @category Visible Columns
  */
-export declare const gridInitialColumnVisibilityModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnsState, import("./gridColumnsInterfaces").GridColumnVisibilityModel>;
+export declare const gridInitialColumnVisibilityModelSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsState, import("@mui/x-data-grid").GridColumnVisibilityModel>;
 /**
  * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Visible Columns
  */
-export declare const gridVisibleColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnVisibilityModel, import("../../../internals").GridStateColDef[]>;
+export declare const gridVisibleColumnDefinitionsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnVisibilityModel, import("../../../internals").GridStateColDef[]>;
 /**
  * Get the field of each visible column.
  * @category Visible Columns
  */
-export declare const gridVisibleColumnFieldsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], string[]>;
+export declare const gridVisibleColumnFieldsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], string[]>;
 /**
  * Get the visible pinned columns model.
  * @category Visible Columns
  */
-export declare const gridPinnedColumnsSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, GridPinnedColumnFields>;
+export declare const gridPinnedColumnsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, GridPinnedColumnFields>;
 /**
  * Get the visible pinned columns.
  * @category Visible Columns
  */
-export declare const gridVisiblePinnedColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, boolean, {
+export declare const gridVisiblePinnedColumnDefinitionsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, boolean, {
   left: import("../../../internals").GridStateColDef[];
   right: import("../../../internals").GridStateColDef[];
 }>;
@@ -60,20 +60,20 @@ export declare const gridVisiblePinnedColumnDefinitionsSelector: import("../../.
  * Get the left position in pixel of each visible columns relative to the left of the first column.
  * @category Visible Columns
  */
-export declare const gridColumnPositionsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], number[]>;
+export declare const gridColumnPositionsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], number[]>;
 /**
  * Get the filterable columns as an array.
  * @category Columns
  */
-export declare const gridFilterableColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], import("../../../internals").GridStateColDef[]>;
+export declare const gridFilterableColumnDefinitionsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], import("../../../internals").GridStateColDef[]>;
 /**
  * Get the filterable columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Columns
  */
-export declare const gridFilterableColumnLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], GridColumnLookup>;
+export declare const gridFilterableColumnLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], GridColumnLookup>;
 /**
  * Checks if some column has a colSpan field.
  * @category Columns
  * @ignore - Do not document
  */
-export declare const gridHasColSpanSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], boolean>;
+export declare const gridHasColSpanSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], boolean>;

package/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,
@@ -71,4 +72,4 @@ export declare function getFirstNonSpannedColumnToRender({
   lastRowToRender: number;
   visibleRows: GridRowEntry[];
 }): number;
-export declare function getTotalHeaderHeight(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'unstable_listView' | 'columnGroupHeaderHeight'>): number;
+export declare function getTotalHeaderHeight(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'listView' | 'columnGroupHeaderHeight'>): number;

package/hooks/features/columns/gridColumnsUtils.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.applyInitialState = exports.COLUMNS_DIMENSION_PROPERTIES = void 0;
 exports.computeFlexColumnsWidth = computeFlexColumnsWidth;
 exports.createColumnsState = void 0;
+exports.getDefaultColTypeDef = getDefaultColTypeDef;
 exports.getFirstNonSpannedColumnToRender = getFirstNonSpannedColumnToRender;
 exports.getTotalHeaderHeight = getTotalHeaderHeight;
 exports.hydrateColumnsWidth = void 0;
@@ -330,7 +331,7 @@ function getFirstNonSpannedColumnToRender({
   return firstNonSpannedColumnToRender;
 }
 function getTotalHeaderHeight(apiRef, props) {
-  if (props.unstable_listView) {
+  if (props.listView) {
     return 0;
   }
   const densityFactor = (0, _densitySelector.gridDensityFactorSelector)(apiRef);

package/hooks/features/columns/useGridColumnSpanning.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridColumnSpanning = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _useGridEvent = require("../../utils/useGridEvent");
 /**
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)
@@ -52,7 +52,7 @@ const useGridColumnSpanning = apiRef => {
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnSpanningPublicApi, 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnSpanningPrivateApi, 'private');
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnOrderChange', resetColSpan);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnOrderChange', resetColSpan);
 };
 exports.useGridColumnSpanning = useGridColumnSpanning;
 function calculateCellColSpan(params) {

package/hooks/features/columns/useGridColumns.js

@@ -13,11 +13,12 @@ var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _gridColumnsSelector = require("./gridColumnsSelector");
 var _signature = require("../../../constants/signature");
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _useGridEvent = require("../../utils/useGridEvent");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _gridColumnsInterfaces = require("./gridColumnsInterfaces");
 var _gridColumnsUtils = require("./gridColumnsUtils");
 var _preferencesPanel = require("../preferencesPanel");
+var _pivoting = require("../pivoting");
 var _jsxRuntime = require("react/jsx-runtime");
 const columnsStateInitializer = (state, props, apiRef) => {
   const columnsState = (0, _gridColumnsUtils.createColumnsState)({
@@ -87,6 +88,10 @@ function useGridColumns(apiRef, props) {
     }
   }, [apiRef]);
   const updateColumns = React.useCallback(columns => {
+    if ((0, _pivoting.gridPivotActiveSelector)(apiRef)) {
+      apiRef.current.updateNonPivotColumns(columns);
+      return;
+    }
     const columnsState = (0, _gridColumnsUtils.createColumnsState)({
       apiRef,
       columnsToUpsert: columns,
@@ -236,11 +241,12 @@ function useGridColumns(apiRef, props) {
     return initialValue;
   }, [props.slots.columnsPanel, props.slotProps?.columnsPanel]);
   const addColumnMenuItems = React.useCallback(columnMenuItems => {
-    if (props.disableColumnSelector) {
+    const isPivotActive = (0, _pivoting.gridPivotActiveSelector)(apiRef);
+    if (props.disableColumnSelector || isPivotActive) {
       return columnMenuItems;
     }
     return [...columnMenuItems, 'columnMenuColumnsItem'];
-  }, [props.disableColumnSelector]);
+  }, [props.disableColumnSelector, apiRef]);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'columnMenu', addColumnMenuItems);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
@@ -261,7 +267,7 @@ function useGridColumns(apiRef, props) {
       setGridColumnsState((0, _gridColumnsUtils.hydrateColumnsWidth)((0, _gridColumnsSelector.gridColumnsStateSelector)(apiRef), apiRef.current.getRootDimensions()));
     }
   };
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
 
   /**
    * APPLIERS

package/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/hooks/features/dataSource/cache.js

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

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

@@ -1,8 +1,8 @@
-export declare const gridGetRowsParamsSelector: import("../../..").OutputSelector<import("../../../models/gridStateCommunity").GridStateCommunity, import("../../..").GridPaginationModel, {
+export declare const gridGetRowsParamsSelector: import("@mui/x-data-grid").OutputSelector<import("../../../models/gridStateCommunity").GridStateCommunity, import("@mui/x-data-grid").GridPaginationModel, {
   groupKeys: never[];
-  paginationModel: import("../../..").GridPaginationModel;
-  sortModel: import("../../..").GridSortModel;
-  filterModel: import("../../..").GridFilterModel;
+  paginationModel: import("@mui/x-data-grid").GridPaginationModel;
+  sortModel: import("@mui/x-data-grid").GridSortModel;
+  filterModel: import("@mui/x-data-grid").GridFilterModel;
   start: number;
   end: number;
 }>;

package/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/hooks/features/dataSource/useGridDataSource.js

@@ -8,7 +8,7 @@ exports.useGridDataSource = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridRegisterStrategyProcessor = require("../../core/strategyProcessing/useGridRegisterStrategyProcessor");
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _useGridEvent = require("../../utils/useGridEvent");
 var _useGridDataSourceBase = require("./useGridDataSourceBase");
 /**
  * Community version of the data source hook. Contains implementation of the `useGridDataSourceBase` hook.
@@ -23,7 +23,7 @@ const useGridDataSource = (apiRef, props) => {
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, api.public, 'public');
   (0, _useGridRegisterStrategyProcessor.useGridRegisterStrategyProcessor)(apiRef, strategyProcessor.strategyName, strategyProcessor.group, strategyProcessor.processor);
   Object.entries(events).forEach(([event, handler]) => {
-    (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, event, handler);
+    (0, _useGridEvent.useGridEvent)(apiRef, event, handler);
   });
   React.useEffect(() => {
     setStrategyAvailability();

package/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/hooks/features/dataSource/useGridDataSourceBase.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
 var _utils = require("@mui/utils");
 var _warning = require("@mui/x-internals/warning");
+var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _utils2 = require("../../../utils/utils");
 var _strategyProcessing = require("../../core/strategyProcessing");
@@ -75,9 +76,7 @@ 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,
@@ -97,7 +96,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
             cause: originalError
           }));
         } else if (process.env.NODE_ENV !== 'production') {
-          (0, _warning.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');
+          (0, _warning.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 {
@@ -126,10 +125,42 @@ 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 && !(0, _isDeepEqual.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 _gridDataSourceError.GridUpdateRowError({
+          message: errorThrown?.message,
+          params,
+          cause: errorThrown
+        }));
+      } else if (process.env.NODE_ENV !== 'production') {
+        (0, _warning.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(() => (0, _utils.unstable_debounce)(fetchRows, 0), [fetchRows]);
@@ -155,6 +186,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     api: {
       public: dataSourceApi
     },
+    debouncedFetchRows,
     strategyProcessor: {
       strategyName: _utils3.DataSourceRowsUpdateStrategy.Default,
       group: 'dataSourceRowsUpdate',

package/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/hooks/features/density/densitySelector.d.ts

@@ -2,5 +2,5 @@ import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
 import { GridDensity } from "../../../models/gridDensity.js";
 export declare const COMPACT_DENSITY_FACTOR = 0.7;
 export declare const COMFORTABLE_DENSITY_FACTOR = 1.3;
-export declare const gridDensitySelector: import("../../..").OutputSelector<GridStateCommunity, unknown, GridDensity>;
-export declare const gridDensityFactorSelector: import("../../..").OutputSelector<GridStateCommunity, GridDensity, number>;
+export declare const gridDensitySelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, GridDensity>;
+export declare const gridDensityFactorSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, GridDensity, number>;

package/hooks/features/dimensions/gridDimensionsSelectors.d.ts

@@ -1,18 +1,18 @@
 import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
-export declare const gridDimensionsSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./gridDimensionsApi").GridDimensions>;
+export declare const gridDimensionsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("@mui/x-data-grid").GridDimensions>;
 /**
  * Get the summed width of all the visible columns.
  * @category Visible Columns
  */
-export declare const gridColumnsTotalWidthSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, number>;
-export declare const gridRowHeightSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, number>;
-export declare const gridContentHeightSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, number>;
-export declare const gridHasScrollXSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, boolean>;
-export declare const gridHasScrollYSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, boolean>;
-export declare const gridHasFillerSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, boolean>;
-export declare const gridHeaderHeightSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, number>;
-export declare const gridGroupHeaderHeightSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, number>;
-export declare const gridHeaderFilterHeightSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, number>;
-export declare const gridHorizontalScrollbarHeightSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, number>;
-export declare const gridVerticalScrollbarWidthSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, number>;
-export declare const gridHasBottomFillerSelector: import("../../..").OutputSelector<GridStateCommunity, number, boolean>;
+export declare const gridColumnsTotalWidthSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, number>;
+export declare const gridRowHeightSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, number>;
+export declare const gridContentHeightSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, number>;
+export declare const gridHasScrollXSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, boolean>;
+export declare const gridHasScrollYSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, boolean>;
+export declare const gridHasFillerSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, boolean>;
+export declare const gridHeaderHeightSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, number>;
+export declare const gridGroupHeaderHeightSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, number>;
+export declare const gridHeaderFilterHeightSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, number>;
+export declare const gridHorizontalScrollbarHeightSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, number>;
+export declare const gridVerticalScrollbarWidthSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, number>;
+export declare const gridHasBottomFillerSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, number, boolean>;

package/hooks/features/dimensions/useGridDimensions.js

@@ -14,7 +14,7 @@ var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedE
 var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 var _throttle = require("@mui/x-internals/throttle");
 var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _useGridEvent = require("../../utils/useGridEvent");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _createSelector = require("../../../utils/createSelector");
 var _useGridLogger = require("../../utils/useGridLogger");
@@ -247,9 +247,9 @@ function useGridDimensions(apiRef, props) {
     }
     debouncedUpdateDimensions();
   }, [updateDimensions, props.autoHeight, debouncedUpdateDimensions, logger]);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rootMount', handleRootMount);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'resize', handleResize);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'debouncedResize', props.onResize);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'rootMount', handleRootMount);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'resize', handleResize);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'debouncedResize', props.onResize);
 }
 function setCSSVariables(root, dimensions) {
   const set = (k, v) => root.style.setProperty(k, v);

package/hooks/features/editing/gridEditingSelectors.d.ts

@@ -4,12 +4,12 @@ import { GridEditMode } from "../../../models/gridEditRowModel.js";
 /**
  * Select the row editing state.
  */
-export declare const gridEditRowsStateSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("../../..").GridEditingState>;
-export declare const gridRowIsEditingSelector: import("../../..").OutputSelector<GridStateCommunity, {
+export declare const gridEditRowsStateSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("@mui/x-data-grid").GridEditingState>;
+export declare const gridRowIsEditingSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, {
   rowId: GridRowId;
   editMode: GridEditMode;
 }, boolean>;
-export declare const gridEditCellStateSelector: import("../../..").OutputSelector<GridStateCommunity, {
+export declare const gridEditCellStateSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, {
   rowId: GridRowId;
   field: string;
-}, import("../../..").GridEditCellProps<any>>;
+}, import("@mui/x-data-grid").GridEditCellProps<any>>;

package/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/hooks/features/editing/useGridCellEditing.js

@@ -10,10 +10,10 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _warning = require("@mui/x-internals/warning");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _warning = require("@mui/x-internals/warning");
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _useGridEvent = require("../../utils/useGridEvent");
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridEditingSelectors = require("./gridEditingSelectors");
@@ -175,13 +175,13 @@ const useGridCellEditing = (apiRef, props) => {
       }
     }
   };
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellDoubleClick', runIfEditModeIsCell(handleCellDoubleClick));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellFocusOut', runIfEditModeIsCell(handleCellFocusOut));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', runIfEditModeIsCell(handleCellKeyDown));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellEditStart', runIfEditModeIsCell(handleCellEditStart));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellEditStop', runIfEditModeIsCell(handleCellEditStop));
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellEditStart', props.onCellEditStart);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellEditStop', runIfNoFieldErrors(props.onCellEditStop));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'cellDoubleClick', runIfEditModeIsCell(handleCellDoubleClick));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'cellFocusOut', runIfEditModeIsCell(handleCellFocusOut));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'cellKeyDown', runIfEditModeIsCell(handleCellKeyDown));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'cellEditStart', runIfEditModeIsCell(handleCellEditStart));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'cellEditStop', runIfEditModeIsCell(handleCellEditStop));
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'cellEditStart', props.onCellEditStart);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'cellEditStop', runIfNoFieldErrors(props.onCellEditStop));
   const getCellMode = React.useCallback((id, field) => {
     const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef);
     const isEditing = editingState[id] && editingState[id][field];
@@ -325,6 +325,7 @@ 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
@@ -336,7 +337,30 @@ 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 = _gridEditRowModel.GridCellModes.Edit;
+        // Revert the mode in the cellModesModel prop back to "edit"
+        updateFieldInCellModesModel(id, field, {
+          mode: _gridEditRowModel.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 = _gridEditRowModel.GridCellModes.Edit;
         // Revert the mode in the cellModesModel prop back to "edit"
@@ -350,7 +374,6 @@ const useGridCellEditing = (apiRef, props) => {
         }
       };
       try {
-        const row = apiRef.current.getRow(id);
         Promise.resolve(processRowUpdate(rowUpdate, row, {
           rowId: id
         })).then(finalRowUpdate => {

package/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/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;