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

package/DataGridPro/DataGridPro.js

@@ -17,7 +17,6 @@ var _material = require("@mui/x-data-grid/material");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useDataGridProComponent = require("./useDataGridProComponent");
 var _useDataGridProProps = require("./useDataGridProProps");
-var _releaseInfo = require("../utils/releaseInfo");
 var _propValidation = require("../internals/propValidation");
 var _useGridAriaAttributes = require("../hooks/utils/useGridAriaAttributes");
 var _useGridRowAriaAttributes = require("../hooks/features/rows/useGridRowAriaAttributes");
@@ -26,17 +25,19 @@ const configuration = {
   hooks: {
     useCSSVariables: _material.useMaterialCSSVariables,
     useGridAriaAttributes: _useGridAriaAttributes.useGridAriaAttributes,
-    useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributes
+    useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributes,
+    useCellAggregationResult: () => null
   }
 };
-const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
+const releaseInfo = "MTc0NDg0MDgwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo
 });
 const DataGridProRaw = (0, _forwardRef.forwardRef)(function DataGridPro(inProps, ref) {
   const props = (0, _useDataGridProProps.useDataGridProProps)(inProps);
-  const privateApiRef = (0, _useDataGridProComponent.useDataGridProComponent)(props.apiRef, props);
+  const privateApiRef = (0, _internals.useGridApiInitialization)(props.apiRef, props);
+  (0, _useDataGridProComponent.useDataGridProComponent)(privateApiRef, props);
   (0, _xLicense.useLicenseVerifier)('x-data-grid-pro', releaseInfo);
   if (process.env.NODE_ENV !== 'production') {
     (0, _internals.validateProps)(props, _propValidation.propValidatorsDataGridPro);
@@ -674,7 +675,7 @@ DataGridProRaw.propTypes = {
    * @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: _propTypes.default.func,
   /**
@@ -796,7 +797,7 @@ DataGridProRaw.propTypes = {
    * @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: _propTypes.default.func,
   /**
@@ -935,7 +936,7 @@ DataGridProRaw.propTypes = {
    * 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: _propTypes.default.oneOf(['client', 'server']),
   /**

package/DataGridPro/useDataGridProComponent.d.ts

@@ -1,4 +1,4 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridApiPro, GridPrivateApiPro } from "../models/gridApiPro.js";
+import { GridPrivateApiPro } from "../models/gridApiPro.js";
 import { DataGridProProcessedProps } from "../models/dataGridProProps.js";
-export declare const useDataGridProComponent: (inputApiRef: RefObject<GridApiPro | null> | undefined, props: DataGridProProcessedProps) => import("react").RefObject<GridPrivateApiPro>;
+export declare const useDataGridProComponent: (apiRef: RefObject<GridPrivateApiPro>, props: DataGridProProcessedProps) => void;

package/DataGridPro/useDataGridProComponent.js

@@ -24,8 +24,8 @@ var _useGridDataSourcePro = require("../hooks/features/dataSource/useGridDataSou
 var _useGridDataSourceLazyLoader = require("../hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader");
 // Pro-only features
 
-const useDataGridProComponent = (inputApiRef, props) => {
-  const apiRef = (0, _internals.useGridInitialization)(inputApiRef, props);
+const useDataGridProComponent = (apiRef, props) => {
+  (0, _internals.useGridInitialization)(apiRef, props);
 
   /**
    * Register all pre-processors called during state initialization here.
@@ -108,6 +108,5 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridVirtualization)(apiRef, props);
   (0, _useGridDataSourcePro.useGridDataSourcePro)(apiRef, props);
   (0, _internals.useGridListView)(apiRef, props);
-  return apiRef;
 };
 exports.useDataGridProComponent = useDataGridProComponent;

package/esm/DataGridPro/DataGridPro.js

@@ -5,12 +5,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license';
 import { GridRoot, GridContextProvider } from '@mui/x-data-grid';
-import { validateProps } from '@mui/x-data-grid/internals';
+import { validateProps, useGridApiInitialization } from '@mui/x-data-grid/internals';
 import { useMaterialCSSVariables } from '@mui/x-data-grid/material';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useDataGridProComponent } from "./useDataGridProComponent.js";
 import { useDataGridProProps } from "./useDataGridProProps.js";
-import { getReleaseInfo } from "../utils/releaseInfo.js";
 import { propValidatorsDataGridPro } from "../internals/propValidation.js";
 import { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
 import { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
@@ -19,17 +18,19 @@ const configuration = {
   hooks: {
     useCSSVariables: useMaterialCSSVariables,
     useGridAriaAttributes,
-    useGridRowAriaAttributes
+    useGridRowAriaAttributes,
+    useCellAggregationResult: () => null
   }
 };
-const releaseInfo = getReleaseInfo();
+const releaseInfo = "MTc0NDg0MDgwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo
 });
 const DataGridProRaw = forwardRef(function DataGridPro(inProps, ref) {
   const props = useDataGridProProps(inProps);
-  const privateApiRef = useDataGridProComponent(props.apiRef, props);
+  const privateApiRef = useGridApiInitialization(props.apiRef, props);
+  useDataGridProComponent(privateApiRef, props);
   useLicenseVerifier('x-data-grid-pro', releaseInfo);
   if (process.env.NODE_ENV !== 'production') {
     validateProps(props, propValidatorsDataGridPro);
@@ -667,7 +668,7 @@ DataGridProRaw.propTypes = {
    * @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: PropTypes.func,
   /**
@@ -789,7 +790,7 @@ DataGridProRaw.propTypes = {
    * @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: PropTypes.func,
   /**
@@ -928,7 +929,7 @@ DataGridProRaw.propTypes = {
    * 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: PropTypes.oneOf(['client', 'server']),
   /**

package/esm/DataGridPro/useDataGridProComponent.d.ts

@@ -1,4 +1,4 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridApiPro, GridPrivateApiPro } from "../models/gridApiPro.js";
+import { GridPrivateApiPro } from "../models/gridApiPro.js";
 import { DataGridProProcessedProps } from "../models/dataGridProProps.js";
-export declare const useDataGridProComponent: (inputApiRef: RefObject<GridApiPro | null> | undefined, props: DataGridProProcessedProps) => import("react").RefObject<GridPrivateApiPro>;
+export declare const useDataGridProComponent: (apiRef: RefObject<GridPrivateApiPro>, props: DataGridProProcessedProps) => void;

package/esm/DataGridPro/useDataGridProComponent.js

@@ -17,8 +17,8 @@ import { useGridRowPinning, rowPinningStateInitializer } from "../hooks/features
 import { useGridRowPinningPreProcessors } from "../hooks/features/rowPinning/useGridRowPinningPreProcessors.js";
 import { useGridDataSourcePro as useGridDataSource, dataSourceStateInitializer } from "../hooks/features/dataSource/useGridDataSourcePro.js";
 import { useGridDataSourceLazyLoader } from "../hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.js";
-export const useDataGridProComponent = (inputApiRef, props) => {
-  const apiRef = useGridInitialization(inputApiRef, props);
+export const useDataGridProComponent = (apiRef, props) => {
+  useGridInitialization(apiRef, props);
 
   /**
    * Register all pre-processors called during state initialization here.
@@ -101,5 +101,4 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridVirtualization(apiRef, props);
   useGridDataSource(apiRef, props);
   useGridListView(apiRef, props);
-  return apiRef;
 };

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

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import useLazyRef from '@mui/utils/useLazyRef';
-import { useGridSelector, GridGetRowsError } from '@mui/x-data-grid';
+import { useGridSelector, GridGetRowsError, gridRowIdSelector, gridRowNodeSelector, gridRowTreeSelector } from '@mui/x-data-grid';
 import { gridRowGroupsToFetchSelector, useGridDataSourceBase, CacheChunkManager, gridGetRowsParamsSelector, DataSourceRowsUpdateStrategy, GridStrategyGroup } from '@mui/x-data-grid/internals';
 import { warnOnce } from '@mui/x-internals/warning';
-import { NestedDataManager, RequestStatus } from "./utils.js";
+import { NestedDataManager, RequestStatus, getGroupKeys } from "./utils.js";
 import { gridDataSourceErrorsSelector } from "./gridDataSourceSelector.js";
 export const INITIAL_STATE = {
   loading: {},
@@ -23,16 +24,26 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
     }
     return null;
   }, [apiRef, nestedDataManager]);
+  const handleEditRow = React.useCallback((params, updatedRow) => {
+    const groupKeys = getGroupKeys(gridRowTreeSelector(apiRef), params.rowId);
+    apiRef.current.updateNestedRows([updatedRow], groupKeys);
+    if (updatedRow && !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
-  } = useGridDataSourceBase(apiRef, props, _extends({}, options, {
+  } = useGridDataSourceBase(apiRef, props, _extends({
     fetchRowChildren: nestedDataManager.queue,
-    clearDataSourceState
-  }));
+    clearDataSourceState,
+    handleEditRow
+  }, options));
   const setStrategyAvailability = React.useCallback(() => {
     apiRef.current.setStrategyAvailability(GridStrategyGroup.DataSource, DataSourceRowsUpdateStrategy.Default, props.dataSource && !props.lazyLoading ? () => true : () => false);
   }, [apiRef, props.dataSource, props.lazyLoading]);
@@ -62,7 +73,7 @@ export 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);
@@ -89,7 +100,23 @@ export 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 = gridRowIdSelector(apiRef, row);
+        const treeNode = 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;
@@ -101,7 +128,7 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
           cause: childrenFetchError
         }));
       } 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 {
       apiRef.current.dataSource.setChildrenLoading(id, false);
@@ -170,6 +197,7 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
       public: dataSourceApi,
       private: dataSourcePrivateApi
     },
+    debouncedFetchRows,
     strategyProcessor,
     events,
     setStrategyAvailability,

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

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
 const MAX_CONCURRENT_REQUESTS = Infinity;
 export let RequestStatus = /*#__PURE__*/function (RequestStatus) {
   RequestStatus[RequestStatus["QUEUED"] = 0] = "QUEUED";
@@ -79,4 +80,15 @@ export class NestedDataManager {
     this.api = privateApiRef.current;
     this.maxConcurrentRequests = maxConcurrentRequests;
   }
-}
+}
+export const getGroupKeys = (tree, rowId) => {
+  const rowNode = tree[rowId];
+  let currentNodeId = rowNode.parent;
+  const groupKeys = [];
+  while (currentNodeId && currentNodeId !== GRID_ROOT_GROUP_ID) {
+    const currentNode = tree[currentNodeId];
+    groupKeys.push(currentNode.groupingKey ?? '');
+    currentNodeId = currentNode.parent;
+  }
+  return groupKeys.reverse();
+};

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

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 { useGridEvent, 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";
@@ -176,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);
     }
@@ -188,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;

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v8.0.0-beta.3
+ * @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

@@ -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;
   /**
@@ -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'>;
   /**

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