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

package/esm/hooks/features/rowReorder/useGridRowReorder.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
-import { useGridLogger, useGridApiEventHandler, getDataGridUtilityClass, useGridSelector, gridSortModelSelector, gridRowMaximumTreeDepthSelector, useGridApiOptionHandler, gridRowNodeSelector } from '@mui/x-data-grid';
+import { useGridLogger, useGridEvent, getDataGridUtilityClass, useGridSelector, gridSortModelSelector, gridRowMaximumTreeDepthSelector, useGridEventPriority, gridRowNodeSelector } from '@mui/x-data-grid';
 import { gridEditRowsStateSelector, gridSortedRowIndexLookupSelector } from '@mui/x-data-grid/internals';
 import { GRID_REORDER_COL_DEF } from "./gridRowReorderColDef.js";
 var Direction = /*#__PURE__*/function (Direction) {
@@ -133,9 +133,9 @@ export const useGridRowReorder = (apiRef, props) => {
     }
     setDragRowId('');
   }, [apiRef, dragRowId, isRowReorderDisabled, logger, sortedRowIndexLookup]);
-  useGridApiEventHandler(apiRef, 'rowDragStart', handleDragStart);
-  useGridApiEventHandler(apiRef, 'rowDragOver', handleDragOver);
-  useGridApiEventHandler(apiRef, 'rowDragEnd', handleDragEnd);
-  useGridApiEventHandler(apiRef, 'cellDragOver', handleDragOver);
-  useGridApiOptionHandler(apiRef, 'rowOrderChange', props.onRowOrderChange);
+  useGridEvent(apiRef, 'rowDragStart', handleDragStart);
+  useGridEvent(apiRef, 'rowDragOver', handleDragOver);
+  useGridEvent(apiRef, 'rowDragEnd', handleDragEnd);
+  useGridEvent(apiRef, 'cellDragOver', handleDragOver);
+  useGridEventPriority(apiRef, 'rowOrderChange', props.onRowOrderChange);
 };

package/esm/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { throttle } from '@mui/x-internals/throttle';
 import { unstable_debounce as debounce } from '@mui/utils';
-import { useGridApiEventHandler, gridSortModelSelector, gridFilterModelSelector, GRID_ROOT_GROUP_ID, gridPaginationModelSelector, gridDimensionsSelector, gridFilteredSortedRowIdsSelector } from '@mui/x-data-grid';
+import { useGridEvent, gridSortModelSelector, gridFilterModelSelector, GRID_ROOT_GROUP_ID, gridPaginationModelSelector, gridDimensionsSelector, gridFilteredSortedRowIdsSelector, gridRowIdSelector } from '@mui/x-data-grid';
 import { getVisibleRows, gridRenderContextSelector, GridStrategyGroup, useGridRegisterStrategyProcessor, runIf, DataSourceRowsUpdateStrategy } from '@mui/x-data-grid/internals';
 import { findSkeletonRowsSection } from "../lazyLoader/utils.js";
 import { GRID_SKELETON_ROW_ROOT_ID } from "../lazyLoader/useGridLazyLoaderPreProcessors.js";
@@ -87,6 +87,7 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
   }, [privateApiRef, resetGrid]);
   const addSkeletonRows = React.useCallback(() => {
     const tree = privateApiRef.current.state.rows.tree;
+    const dataRowIdToModelLookup = privateApiRef.current.state.rows.dataRowIdToModelLookup;
     const rootGroup = tree[GRID_ROOT_GROUP_ID];
     const rootGroupChildren = [...rootGroup.children];
     const pageRowCount = privateApiRef.current.state.pagination.rowCount;
@@ -94,18 +95,28 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
 
     /**
      * Do nothing if
-     * - rowCount is unknown
      * - children count is 0
-     * - children count is equal to rowCount
      */
-    if (pageRowCount === -1 || pageRowCount === undefined || rootChildrenCount === 0 || rootChildrenCount === pageRowCount) {
+    if (rootChildrenCount === 0) {
       return;
     }
-
-    // fill the grid with skeleton rows
-    for (let i = 0; i < pageRowCount - rootChildrenCount; i += 1) {
-      const skeletonId = getSkeletonRowId(i + rootChildrenCount); // to avoid duplicate keys on rebuild
-      rootGroupChildren.push(skeletonId);
+    const pageToSkip = adjustRowParams({
+      start: renderedRowsIntervalCache.current.firstRowToRender,
+      end: renderedRowsIntervalCache.current.lastRowToRender
+    });
+    let hasChanged = false;
+    const isInitialPage = renderedRowsIntervalCache.current.firstRowToRender === 0 && renderedRowsIntervalCache.current.lastRowToRender === 0;
+    for (let i = 0; i < rootChildrenCount; i += 1) {
+      if (isInitialPage) {
+        break;
+      }
+      // replace the rows not in the viewport with skeleton rows
+      if (pageToSkip.start <= i && i <= pageToSkip.end || tree[rootGroupChildren[i]]?.type === 'skeletonRow') {
+        continue;
+      }
+      const skeletonId = getSkeletonRowId(i); // to avoid duplicate keys on rebuild
+      const removedRow = rootGroupChildren[i];
+      rootGroupChildren[i] = skeletonId;
       const skeletonRowNode = {
         type: 'skeletonRow',
         id: skeletonId,
@@ -113,16 +124,40 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
         depth: 0
       };
       tree[skeletonId] = skeletonRowNode;
+      delete tree[removedRow];
+      delete dataRowIdToModelLookup[removedRow];
+      hasChanged = true;
+    }
+
+    // Should only happen with VIEWPORT loading trigger
+    if (loadingTrigger.current === LoadingTrigger.VIEWPORT) {
+      // fill the grid with skeleton rows
+      for (let i = 0; i < pageRowCount - rootChildrenCount; i += 1) {
+        const skeletonId = getSkeletonRowId(i + rootChildrenCount); // to avoid duplicate keys on rebuild
+        rootGroupChildren.push(skeletonId);
+        const skeletonRowNode = {
+          type: 'skeletonRow',
+          id: skeletonId,
+          parent: GRID_ROOT_GROUP_ID,
+          depth: 0
+        };
+        tree[skeletonId] = skeletonRowNode;
+        hasChanged = true;
+      }
+    }
+    if (!hasChanged) {
+      return;
     }
     tree[GRID_ROOT_GROUP_ID] = _extends({}, rootGroup, {
       children: rootGroupChildren
     });
     privateApiRef.current.setState(state => _extends({}, state, {
       rows: _extends({}, state.rows, {
-        tree
+        tree,
+        dataRowIdToModelLookup
       })
     }), 'addSkeletonRows');
-  }, [privateApiRef]);
+  }, [privateApiRef, adjustRowParams]);
   const updateLoadingTrigger = React.useCallback(rowCount => {
     const newLoadingTrigger = rowCount === -1 ? LoadingTrigger.SCROLL_END : LoadingTrigger.VIEWPORT;
     if (loadingTrigger.current !== null) {
@@ -141,6 +176,8 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
       fetchParams
     } = params;
     const pageRowCount = privateApiRef.current.state.pagination.rowCount;
+    const tree = privateApiRef.current.state.rows.tree;
+    const dataRowIdToModelLookup = privateApiRef.current.state.rows.dataRowIdToModelLookup;
     if (response.rowCount !== undefined || pageRowCount === undefined) {
       privateApiRef.current.setRowCount(response.rowCount === undefined ? -1 : response.rowCount);
     }
@@ -153,8 +190,43 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
       // the rows can safely be replaced. skeleton rows will be added later
       privateApiRef.current.setRows(response.rows);
     } else {
+      const rootGroup = tree[GRID_ROOT_GROUP_ID];
+      const rootGroupChildren = [...rootGroup.children];
       const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(privateApiRef);
       const startingIndex = typeof fetchParams.start === 'string' ? Math.max(filteredSortedRowIds.indexOf(fetchParams.start), 0) : fetchParams.start;
+
+      // Check for duplicate rows
+      let duplicateRowCount = 0;
+      response.rows.forEach(row => {
+        const rowId = gridRowIdSelector(privateApiRef, row);
+        if (tree[rowId] || dataRowIdToModelLookup[rowId]) {
+          const index = rootGroupChildren.indexOf(rowId);
+          if (index !== -1) {
+            const skeletonId = getSkeletonRowId(index);
+            rootGroupChildren[index] = skeletonId;
+            tree[skeletonId] = {
+              type: 'skeletonRow',
+              id: skeletonId,
+              parent: GRID_ROOT_GROUP_ID,
+              depth: 0
+            };
+          }
+          delete tree[rowId];
+          delete dataRowIdToModelLookup[rowId];
+          duplicateRowCount += 1;
+        }
+      });
+      if (duplicateRowCount > 0) {
+        tree[GRID_ROOT_GROUP_ID] = _extends({}, rootGroup, {
+          children: rootGroupChildren
+        });
+        privateApiRef.current.setState(state => _extends({}, state, {
+          rows: _extends({}, state.rows, {
+            tree,
+            dataRowIdToModelLookup
+          })
+        }));
+      }
       privateApiRef.current.unstable_replaceRows(startingIndex, response.rows);
     }
     rowsStale.current = false;
@@ -204,7 +276,7 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
     }
   }, [privateApiRef, props.scrollEndThreshold, adjustRowParams, fetchRows]);
   const handleRenderedRowsIntervalChange = React.useCallback(params => {
-    if (rowsStale.current || loadingTrigger.current !== LoadingTrigger.VIEWPORT) {
+    if (rowsStale.current) {
       return;
     }
     const sortModel = gridSortModelSelector(privateApiRef);
@@ -278,12 +350,12 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
     setLazyLoadingRowsUpdateStrategyActive(privateApiRef.current.getActiveStrategy(GridStrategyGroup.DataSource) === DataSourceRowsUpdateStrategy.LazyLoading);
   }, [privateApiRef]);
   useGridRegisterStrategyProcessor(privateApiRef, DataSourceRowsUpdateStrategy.LazyLoading, 'dataSourceRowsUpdate', handleDataUpdate);
-  useGridApiEventHandler(privateApiRef, 'strategyAvailabilityChange', handleStrategyActivityChange);
-  useGridApiEventHandler(privateApiRef, 'rowCountChange', runIf(lazyLoadingRowsUpdateStrategyActive, handleRowCountChange));
-  useGridApiEventHandler(privateApiRef, 'scrollPositionChange', runIf(lazyLoadingRowsUpdateStrategyActive, handleScrolling));
-  useGridApiEventHandler(privateApiRef, 'renderedRowsIntervalChange', runIf(lazyLoadingRowsUpdateStrategyActive, throttledHandleRenderedRowsIntervalChange));
-  useGridApiEventHandler(privateApiRef, 'sortModelChange', runIf(lazyLoadingRowsUpdateStrategyActive, handleGridSortModelChange));
-  useGridApiEventHandler(privateApiRef, 'filterModelChange', runIf(lazyLoadingRowsUpdateStrategyActive, handleGridFilterModelChange));
+  useGridEvent(privateApiRef, 'strategyAvailabilityChange', handleStrategyActivityChange);
+  useGridEvent(privateApiRef, 'rowCountChange', runIf(lazyLoadingRowsUpdateStrategyActive, handleRowCountChange));
+  useGridEvent(privateApiRef, 'scrollPositionChange', runIf(lazyLoadingRowsUpdateStrategyActive, handleScrolling));
+  useGridEvent(privateApiRef, 'renderedRowsIntervalChange', runIf(lazyLoadingRowsUpdateStrategyActive, throttledHandleRenderedRowsIntervalChange));
+  useGridEvent(privateApiRef, 'sortModelChange', runIf(lazyLoadingRowsUpdateStrategyActive, handleGridSortModelChange));
+  useGridEvent(privateApiRef, 'filterModelChange', runIf(lazyLoadingRowsUpdateStrategyActive, handleGridFilterModelChange));
   React.useEffect(() => {
     setStrategyAvailability();
   }, [setStrategyAvailability]);

package/esm/hooks/features/treeData/useGridTreeData.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useGridApiEventHandler } from '@mui/x-data-grid';
+import { useGridEvent } from '@mui/x-data-grid';
 import { GRID_TREE_DATA_GROUPING_FIELD } from "./gridTreeDataGroupColDef.js";
 export const useGridTreeData = (apiRef, props) => {
   /**
@@ -18,5 +18,5 @@ export const useGridTreeData = (apiRef, props) => {
       apiRef.current.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
     }
   }, [apiRef, props.dataSource]);
-  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
+  useGridEvent(apiRef, 'cellKeyDown', handleCellKeyDown);
 };

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v8.0.0-beta.2
+ * @mui/x-data-grid-pro v8.0.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/esm/internals/index.d.ts

@@ -23,6 +23,7 @@ export { useGridDataSourceLazyLoader } from "../hooks/features/serverSideLazyLoa
 export { dataSourceStateInitializer } from "../hooks/features/dataSource/useGridDataSourcePro.js";
 export { useGridDataSourceBasePro } from "../hooks/features/dataSource/useGridDataSourceBasePro.js";
 export { gridDataSourceErrorSelector, gridDataSourceLoadingIdSelector } from "../hooks/features/dataSource/gridDataSourceSelector.js";
+export { getGroupKeys } from "../hooks/features/dataSource/utils.js";
 export type { GridExperimentalProFeatures, DataGridProPropsWithoutDefaultValue, DataGridProPropsWithDefaultValue } from '../models/dataGridProProps';
 export { createRowTree } from "../utils/tree/createRowTree.js";
 export { updateRowTree } from "../utils/tree/updateRowTree.js";

package/esm/internals/index.js

@@ -30,6 +30,7 @@ export { useGridDataSourceLazyLoader } from "../hooks/features/serverSideLazyLoa
 export { dataSourceStateInitializer } from "../hooks/features/dataSource/useGridDataSourcePro.js";
 export { useGridDataSourceBasePro } from "../hooks/features/dataSource/useGridDataSourceBasePro.js";
 export { gridDataSourceErrorSelector, gridDataSourceLoadingIdSelector } from "../hooks/features/dataSource/gridDataSourceSelector.js";
+export { getGroupKeys } from "../hooks/features/dataSource/utils.js";
 export { createRowTree } from "../utils/tree/createRowTree.js";
 export { updateRowTree } from "../utils/tree/updateRowTree.js";
 export { sortRowTree } from "../utils/tree/sortRowTree.js";

package/esm/material/icons.d.ts

@@ -1,6 +1,3 @@
-export declare const GridPushPinRightIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-  muiName: string;
-};
-export declare const GridPushPinLeftIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-  muiName: string;
-};
+import * as React from 'react';
+export declare const GridPushPinRightIcon: (props: import("@mui/x-data-grid").GridBaseIconProps) => React.ReactNode;
+export declare const GridPushPinLeftIcon: (props: import("@mui/x-data-grid").GridBaseIconProps) => React.ReactNode;

package/esm/material/icons.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createSvgIcon } from '@mui/material/utils';
+import { createSvgIcon } from '@mui/x-data-grid/internals';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GridPushPinRightIcon = createSvgIcon(/*#__PURE__*/_jsx("g", {
   transform: "rotate(-30 15 10)",

package/esm/material/index.d.ts

@@ -1,5 +1,5 @@
 declare const materialSlots: {
-  columnMenuPinLeftIcon: React.JSXElementConstructor<any>;
-  columnMenuPinRightIcon: React.JSXElementConstructor<any>;
+  columnMenuPinLeftIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
+  columnMenuPinRightIcon: React.JSXElementConstructor<import("@mui/x-data-grid/models/gridBaseSlots").IconProps>;
 };
 export default materialSlots;

package/esm/models/dataGridProProps.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
-import { GridEventListener, GridCallbackDetails, GridRowParams, GridRowId, GridValidRowModel, GridGroupNode, GridFeatureMode, GridListColDef, GridGetRowsError, GridUpdateRowError } from '@mui/x-data-grid';
+import { GridEventListener, GridCallbackDetails, GridRowParams, GridRowId, GridValidRowModel, GridGroupNode, GridFeatureMode, GridListViewColDef, GridGetRowsError, GridUpdateRowError } from '@mui/x-data-grid';
 import type { GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing, GridPinnedColumnFields, DataGridProSharedPropsWithDefaultValue, DataGridProSharedPropsWithoutDefaultValue } from '@mui/x-data-grid/internals';
 import type { GridPinnedRowsProp } from '../hooks/features/rowPinning';
 import { GridApiPro } from "./gridApiPro.js";
@@ -90,7 +90,7 @@ export interface DataGridProPropsWithDefaultValue<R extends GridValidRowModel =
    * Set it to 'client' if you would like enable infnite loading.
    * Set it to 'server' if you would like to enable lazy loading.
    * @default "client"
-   * @deprecated Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead.
+   * @deprecated Use the {@link https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead.
    */
   rowsLoadingMode: GridFeatureMode;
   /**
@@ -113,9 +113,9 @@ export interface DataGridProPropsWithDefaultValue<R extends GridValidRowModel =
   lazyLoadingRequestThrottleMs: number;
   /**
    * If `true`, displays the data in a list view.
-   * Use in combination with `unstable_listColumn`.
+   * Use in combination with `listViewColumn`.
    */
-  unstable_listView: boolean;
+  listView: boolean;
 }
 interface DataGridProRegularProps<R extends GridValidRowModel> {
   /**
@@ -149,7 +149,7 @@ export interface DataGridProPropsWithoutDefaultValue<R extends GridValidRowModel
    * @param {GridRowScrollEndParams} params With all properties from [[GridRowScrollEndParams]].
    * @param {MuiEvent<{}>} event The event object.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading Server-side data-Infinite loading} instead.
+   * @deprecated Use the {@link https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading Server-side data-Infinite loading} instead.
    */
   onRowsScrollEnd?: GridEventListener<'rowsScrollEnd'>;
   /**
@@ -194,7 +194,7 @@ export interface DataGridProPropsWithoutDefaultValue<R extends GridValidRowModel
    * @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]].
    * @param {MuiEvent<{}>} event The event object.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead.
+   * @deprecated Use the {@link https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead.
    */
   onFetchRows?: GridEventListener<'fetchRows'>;
   /**
@@ -206,9 +206,9 @@ export interface DataGridProPropsWithoutDefaultValue<R extends GridValidRowModel
    */
   slotProps?: GridProSlotProps;
   /**
-   * Definition of the column rendered when the `unstable_listView` prop is enabled.
+   * Definition of the column rendered when the `listView` prop is enabled.
    */
-  unstable_listColumn?: GridListColDef<R>;
+  listViewColumn?: GridListViewColDef<R>;
   /**
    * The data source of the Data Grid Pro.
    */

package/esm/models/gridProIconSlotsComponent.d.ts

@@ -1,13 +1,16 @@
 import * as React from 'react';
+import { BaseSlots } from '@mui/x-data-grid/internals';
+type IconProps = BaseSlots.IconProps;
 export interface GridProIconSlotsComponent {
   /**
    * Icon displayed in column menu for left pinning
    * @default GridPushPinLeftIcon
    */
-  columnMenuPinLeftIcon: React.JSXElementConstructor<any>;
+  columnMenuPinLeftIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed in column menu for right pinning
    * @default GridPushPinRightIcon
    */
-  columnMenuPinRightIcon: React.JSXElementConstructor<any>;
-}
+  columnMenuPinRightIcon: React.JSXElementConstructor<IconProps>;
+}
+export {};

package/esm/package.json

@@ -1 +1 @@
-{"type":"module","sideEffects":false}
+{"type":"module","sideEffects":["**/*.css"]}

package/hooks/features/columnPinning/useGridColumnPinning.js

@@ -223,7 +223,7 @@ const useGridColumnPinning = (apiRef, props) => {
     }
     apiRef.current.caches.columnPinning.orderedFieldsBeforePinningColumns = newOrderedFieldsBeforePinningColumns;
   };
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'columnOrderChange', handleColumnOrderChange);
+  (0, _xDataGrid.useGridEvent)(apiRef, 'columnOrderChange', handleColumnOrderChange);
   React.useEffect(() => {
     if (props.pinnedColumns) {
       apiRef.current.setPinnedColumns(props.pinnedColumns);

package/hooks/features/columnReorder/useGridColumnReorder.js

@@ -241,12 +241,12 @@ const useGridColumnReorder = (apiRef, props) => {
       })
     }));
   }, [apiRef, props.disableColumnReorder, props.keepColumnPositionIfDraggedOutside, logger, classes.columnHeaderDragging]);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', handleDragStart);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnter', handleDragEnter);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'columnHeaderDragOver', handleDragOver);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnd', handleDragEnd);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'cellDragEnter', handleDragEnter);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'cellDragOver', handleDragOver);
-  (0, _xDataGrid.useGridApiOptionHandler)(apiRef, 'columnOrderChange', props.onColumnOrderChange);
+  (0, _xDataGrid.useGridEvent)(apiRef, 'columnHeaderDragStart', handleDragStart);
+  (0, _xDataGrid.useGridEvent)(apiRef, 'columnHeaderDragEnter', handleDragEnter);
+  (0, _xDataGrid.useGridEvent)(apiRef, 'columnHeaderDragOver', handleDragOver);
+  (0, _xDataGrid.useGridEvent)(apiRef, 'columnHeaderDragEnd', handleDragEnd);
+  (0, _xDataGrid.useGridEvent)(apiRef, 'cellDragEnter', handleDragEnter);
+  (0, _xDataGrid.useGridEvent)(apiRef, 'cellDragOver', handleDragOver);
+  (0, _xDataGrid.useGridEventPriority)(apiRef, 'columnOrderChange', props.onColumnOrderChange);
 };
 exports.useGridColumnReorder = useGridColumnReorder;

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

@@ -1,6 +1,5 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridRowId, GridDataSourceCacheDefaultConfig } from '@mui/x-data-grid';
-import { CacheChunkManager, DataSourceRowsUpdateStrategy } from '@mui/x-data-grid/internals';
+import { CacheChunkManager, DataSourceRowsUpdateStrategy, GridDataSourceBaseOptions } from '@mui/x-data-grid/internals';
 import { GridPrivateApiPro } from "../../../models/gridApiPro.js";
 import { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";
 import { GridDataSourceApiPro, GridDataSourcePrivateApiPro } from "./models.js";
@@ -8,14 +7,12 @@ export declare const INITIAL_STATE: {
   loading: {};
   errors: {};
 };
-export declare const useGridDataSourceBasePro: <Api extends GridPrivateApiPro>(apiRef: RefObject<Api>, props: DataGridProProcessedProps, options?: {
-  cacheOptions?: GridDataSourceCacheDefaultConfig;
-  fetchRowChildren?: (parentId: GridRowId) => void;
-}) => {
+export declare const useGridDataSourceBasePro: <Api extends GridPrivateApiPro>(apiRef: RefObject<Api>, props: DataGridProProcessedProps, options?: GridDataSourceBaseOptions) => {
   api: {
     public: GridDataSourceApiPro;
     private: GridDataSourcePrivateApiPro;
   };
+  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/useGridDataSourceBasePro.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridDataSourceBasePro = exports.INITIAL_STATE = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
@@ -31,16 +32,26 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
     }
     return null;
   }, [apiRef, nestedDataManager]);
+  const handleEditRow = React.useCallback((params, updatedRow) => {
+    const groupKeys = (0, _utils.getGroupKeys)((0, _xDataGrid.gridRowTreeSelector)(apiRef), params.rowId);
+    apiRef.current.updateNestedRows([updatedRow], groupKeys);
+    if (updatedRow && !(0, _isDeepEqual.isDeepEqual)(updatedRow, params.previousRow)) {
+      // Reset the outdated cache, only if the row is _actually_ updated
+      apiRef.current.dataSource.cache.clear();
+    }
+  }, [apiRef]);
   const {
     api,
+    debouncedFetchRows,
     strategyProcessor,
     events,
     cacheChunkManager,
     cache
-  } = (0, _internals.useGridDataSourceBase)(apiRef, props, (0, _extends2.default)({}, options, {
+  } = (0, _internals.useGridDataSourceBase)(apiRef, props, (0, _extends2.default)({
     fetchRowChildren: nestedDataManager.queue,
-    clearDataSourceState
-  }));
+    clearDataSourceState,
+    handleEditRow
+  }, options));
   const setStrategyAvailability = React.useCallback(() => {
     apiRef.current.setStrategyAvailability(_internals.GridStrategyGroup.DataSource, _internals.DataSourceRowsUpdateStrategy.Default, props.dataSource && !props.lazyLoading ? () => true : () => false);
   }, [apiRef, props.dataSource, props.lazyLoading]);
@@ -70,7 +81,7 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
     if (cachedData !== undefined) {
       const rows = cachedData.rows;
       nestedDataManager.setRequestSettled(id);
-      apiRef.current.updateServerRows(rows, rowNode.path);
+      apiRef.current.updateNestedRows(rows, rowNode.path);
       apiRef.current.setRowCount(cachedData.rowCount === undefined ? -1 : cachedData.rowCount);
       apiRef.current.setRowChildrenExpansion(id, true);
       apiRef.current.dataSource.setChildrenLoading(id, false);
@@ -97,7 +108,23 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
         cache.set(key, response);
       });
       apiRef.current.setRowCount(getRowsResponse.rowCount === undefined ? -1 : getRowsResponse.rowCount);
-      apiRef.current.updateServerRows(getRowsResponse.rows, rowNode.path);
+      // Remove existing outdated rows before setting the new ones
+      const rowsToDelete = [];
+      getRowsResponse.rows.forEach(row => {
+        const rowId = (0, _xDataGrid.gridRowIdSelector)(apiRef, row);
+        const treeNode = (0, _xDataGrid.gridRowNodeSelector)(apiRef, rowId);
+        if (treeNode) {
+          rowsToDelete.push({
+            id: rowId,
+            _action: 'delete'
+          });
+        }
+      });
+      if (rowsToDelete.length > 0) {
+        // TODO: Make this happen in a single pass by modifying the pre-processing of the rows
+        apiRef.current.updateNestedRows(rowsToDelete, rowNode.path);
+      }
+      apiRef.current.updateNestedRows(getRowsResponse.rows, rowNode.path);
       apiRef.current.setRowChildrenExpansion(id, true);
     } catch (error) {
       const childrenFetchError = error;
@@ -109,7 +136,7 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
           cause: childrenFetchError
         }));
       } 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 {
       apiRef.current.dataSource.setChildrenLoading(id, false);
@@ -178,6 +205,7 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
       public: dataSourceApi,
       private: dataSourcePrivateApi
     },
+    debouncedFetchRows,
     strategyProcessor,
     events,
     setStrategyAvailability,

package/hooks/features/dataSource/useGridDataSourcePro.js

@@ -36,7 +36,7 @@ const useGridDataSourcePro = (apiRef, props) => {
   (0, _xDataGrid.useGridApiMethod)(apiRef, api.private, 'private');
   (0, _internals.useGridRegisterStrategyProcessor)(apiRef, strategyProcessor.strategyName, strategyProcessor.group, strategyProcessor.processor);
   Object.entries(events).forEach(([event, handler]) => {
-    (0, _xDataGrid.useGridApiEventHandler)(apiRef, event, handler);
+    (0, _xDataGrid.useGridEvent)(apiRef, event, handler);
   });
   React.useEffect(() => {
     setStrategyAvailability();

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

@@ -1,5 +1,5 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridRowId } from '@mui/x-data-grid';
+import { GridKeyValue, GridRowId, GridRowTreeConfig } from '@mui/x-data-grid';
 import { GridPrivateApiPro } from "../../../models/index.js";
 export declare enum RequestStatus {
   QUEUED = 0,
@@ -26,4 +26,5 @@ export declare class NestedDataManager {
   clearPendingRequest: (id: GridRowId) => void;
   getRequestStatus: (id: GridRowId) => RequestStatus;
   getActiveRequestsCount: () => number;
-}
+}
+export declare const getGroupKeys: (tree: GridRowTreeConfig, rowId: GridRowId) => GridKeyValue[];

package/hooks/features/dataSource/utils.js

@@ -4,8 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RequestStatus = exports.NestedDataManager = void 0;
+exports.getGroupKeys = exports.RequestStatus = exports.NestedDataManager = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _xDataGrid = require("@mui/x-data-grid");
 const MAX_CONCURRENT_REQUESTS = Infinity;
 let RequestStatus = exports.RequestStatus = /*#__PURE__*/function (RequestStatus) {
   RequestStatus[RequestStatus["QUEUED"] = 0] = "QUEUED";
@@ -86,4 +87,16 @@ class NestedDataManager {
     this.maxConcurrentRequests = maxConcurrentRequests;
   }
 }
-exports.NestedDataManager = NestedDataManager;
+exports.NestedDataManager = NestedDataManager;
+const getGroupKeys = (tree, rowId) => {
+  const rowNode = tree[rowId];
+  let currentNodeId = rowNode.parent;
+  const groupKeys = [];
+  while (currentNodeId && currentNodeId !== _xDataGrid.GRID_ROOT_GROUP_ID) {
+    const currentNode = tree[currentNodeId];
+    groupKeys.push(currentNode.groupingKey ?? '');
+    currentNodeId = currentNode.parent;
+  }
+  return groupKeys.reverse();
+};
+exports.getGroupKeys = getGroupKeys;

package/hooks/features/detailPanel/useGridDetailPanel.js

@@ -78,8 +78,8 @@ const useGridDetailPanel = (apiRef, props) => {
       apiRef.current.toggleDetailPanel(params.id);
     }
   }, [apiRef, props.getDetailPanelContent]);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'cellClick', handleCellClick);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'cellKeyDown', handleCellKeyDown);
+  (0, _xDataGrid.useGridEvent)(apiRef, 'cellClick', handleCellClick);
+  (0, _xDataGrid.useGridEvent)(apiRef, 'cellKeyDown', handleCellKeyDown);
   apiRef.current.registerControlState({
     stateId: 'detailPanels',
     propModel: props.detailPanelExpandedRowIds,
@@ -160,7 +160,7 @@ const useGridDetailPanel = (apiRef, props) => {
       });
     });
   }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'sortedRowsSet', updateCaches);
+  (0, _xDataGrid.useGridEvent)(apiRef, 'sortedRowsSet', updateCaches);
   const previousGetDetailPanelContentProp = React.useRef(undefined);
   const previousGetDetailPanelHeightProp = React.useRef(undefined);
   const updateCachesIfNeeded = React.useCallback(() => {

package/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -108,6 +108,6 @@ const useGridInfiniteLoader = (apiRef, props) => {
     getInfiniteLoadingTriggerElement
   };
   (0, _xDataGrid.useGridApiMethod)(apiRef, infiniteLoaderPrivateApi, 'private');
-  (0, _xDataGrid.useGridApiOptionHandler)(apiRef, 'rowsScrollEnd', props.onRowsScrollEnd);
+  (0, _xDataGrid.useGridEventPriority)(apiRef, 'rowsScrollEnd', props.onRowsScrollEnd);
 };
 exports.useGridInfiniteLoader = useGridInfiniteLoader;

package/hooks/features/lazyLoader/useGridLazyLoader.d.ts

@@ -7,4 +7,4 @@ import { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";
  * @requires useGridDimensions (method) - can be after
  * @requires useGridScroll (method
  */
-export declare const useGridLazyLoader: (privateApiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "onFetchRows" | "rowsLoadingMode" | "pagination" | "paginationMode" | "experimentalFeatures">) => void;
+export declare const useGridLazyLoader: (privateApiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "onFetchRows" | "rowsLoadingMode" | "pagination" | "paginationMode">) => void;

package/hooks/features/lazyLoader/useGridLazyLoader.js

@@ -89,9 +89,9 @@ const useGridLazyLoader = (privateApiRef, props) => {
     };
     privateApiRef.current.publishEvent('fetchRows', fetchRowsParams);
   }, [privateApiRef, isDisabled, sortModel]);
-  (0, _xDataGrid.useGridApiEventHandler)(privateApiRef, 'renderedRowsIntervalChange', handleRenderedRowsIntervalChange);
-  (0, _xDataGrid.useGridApiEventHandler)(privateApiRef, 'sortModelChange', handleGridSortModelChange);
-  (0, _xDataGrid.useGridApiEventHandler)(privateApiRef, 'filterModelChange', handleGridFilterModelChange);
-  (0, _xDataGrid.useGridApiOptionHandler)(privateApiRef, 'fetchRows', props.onFetchRows);
+  (0, _xDataGrid.useGridEvent)(privateApiRef, 'renderedRowsIntervalChange', handleRenderedRowsIntervalChange);
+  (0, _xDataGrid.useGridEvent)(privateApiRef, 'sortModelChange', handleGridSortModelChange);
+  (0, _xDataGrid.useGridEvent)(privateApiRef, 'filterModelChange', handleGridFilterModelChange);
+  (0, _xDataGrid.useGridEventPriority)(privateApiRef, 'fetchRows', props.onFetchRows);
 };
 exports.useGridLazyLoader = useGridLazyLoader;

package/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.d.ts

@@ -2,4 +2,4 @@ import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiPro } from "../../../models/gridApiPro.js";
 import { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";
 export declare const GRID_SKELETON_ROW_ROOT_ID = "auto-generated-skeleton-row-root";
-export declare const useGridLazyLoaderPreProcessors: (privateApiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "rowCount" | "rowsLoadingMode" | "experimentalFeatures">) => void;
+export declare const useGridLazyLoaderPreProcessors: (privateApiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "rowCount" | "rowsLoadingMode">) => void;

package/hooks/features/rowPinning/useGridRowPinning.d.ts

@@ -2,5 +2,5 @@ import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '@mui/x-data-grid/internals';
 import { GridPrivateApiPro } from "../../../models/gridApiPro.js";
 import { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";
-export declare const rowPinningStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'pinnedRows' | 'getRowId' | 'experimentalFeatures'>>;
+export declare const rowPinningStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'pinnedRows' | 'getRowId'>>;
 export declare const useGridRowPinning: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "pinnedRows" | "getRowId">) => void;