@mui/x-data-grid-pro 7.7.1 → 7.9.0

package/CHANGELOG.md

@@ -3,6 +3,171 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.9.0
+
+_Jul 5, 2024_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔄 Add loading overlay variants, including a skeleton loader option to the Data Grid component. See [Loading overlay docs](https://mui.com/x/react-data-grid/overlays/#loading-overlay) for more details.
+- 🌳 Add `selectItem` and `getItemDOMElement` methods to the TreeView component public API
+- ⛏️ Make the `usePickersTranslations` hook public in the pickers component
+- 🐞 Bugfixes
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.9.0`
+
+- [DataGrid] Add skeleton loading overlay support (#13293) @KenanYusuf
+- [DataGrid] Fix pagination when `pagination={undefined}` (#13349) @sai6855
+
+#### `@mui/x-data-grid-pro@7.9.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.9.0`.
+
+#### `@mui/x-data-grid-premium@7.9.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.9.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.9.0`
+
+- [pickers] Make the `usePickersTranslations` hook public (#13657) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.9.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.9.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.9.0`
+
+- [charts] Add Heatmap (unreleased) (#13209) @alexfauquette
+- [charts] Add initial `Zoom&Pan` to the Pro charts (unreleased) (#13405) @JCQuintas
+- [charts] Fix Axis Highlight on horizontal bar charts regression (#13717) @JCQuintas
+- [charts] Improve charts interaction for mobile users (#13692) @JCQuintas
+- [charts] Add documentation on how to disable the tooltip on charts (#13724) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.9.0`
+
+- [TreeView] Add `selectItem` and `getItemDOMElement` methods to the public API (#13485) @flaviendelangle
+
+### Docs
+
+- [docs] Fix custom "no results overlay" demo in dark mode (#13715) @KenanYusuf
+
+### Core
+
+- [core] Add `react_next` workflow in CircleCI (#13360) @cherniavskii
+- [core] Create a new package to share utils across X packages (#13528) @flaviendelangle
+- [core] Fix dependency setup (#13684) @LukasTy
+- [core] Remove `jscodeshift-add-imports` package (#13720) @LukasTy
+- [code-infra] Cleanup monorepo and `@mui/docs` usage (#13713) @LukasTy
+
+## 7.8.0
+
+_Jun 28, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛰 Introduce server-side data source for improved server integration in the Data Grid.
+
+  Supports server-side pagination, sorting and filtering on plain and tree data, and automatic caching.
+
+  To enable, provide a `getRows` function to the `unstable_dataSource` prop on the Data Grid component.
+
+  ```tsx
+  const dataSource = {
+    getRows: async (params: GridServerGetRowsParams) => {
+      const data = await fetch(
+        `https://api.example.com/data?${new URLSearchParams({
+          page: params.page,
+          pageSize: params.pageSize,
+          sortModel: JSON.stringify(params.sortModel),
+          filterModel: JSON.stringify(params.filterModel),
+        }).toString()}`,
+      );
+      return {
+        rows: data.rows,
+        totalRows: data.totalRows,
+      };
+    },
+  }
+  <DataGridPro
+    unstable_dataSource={dataSource}
+    {...otherProps}
+  />
+  ```
+
+  See [server-side data documentation](https://mui.com/x/react-data-grid/server-side-data/) for more details.
+
+- 📈 Support Date data on the BarChart component
+- ↕️ Support custom column sort icons on the Data Grid
+- 🖱️ Support modifying the expansion trigger on the Tree View components
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.8.0`
+
+- [DataGrid] Add `columnHeaderSortIcon` slot (#13563) @arminmeh
+- [DataGrid] Fix dimensions lag issue after autosize (#13587) @MBilalShafi
+- [DataGrid] Fix print export failure when `hideFooter` option is set (#13034) @tarunrajput
+
+#### `@mui/x-data-grid-pro@7.8.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.8.0`, plus:
+
+- [DataGridPro] Fix multi-sorting indicator being cut off (#13625) @KenanYusuf
+- [DataGridPro] Server-side tree data support (#12317) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@7.8.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.8.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.8.0`
+
+- [fields] Fix section clearing behavior on Android (#13652) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.8.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.8.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.8.0`
+
+- [charts] Fix line chart props not passing correct event handlers (#13609) @JCQuintas
+- [charts] Support BarChart with `Date` data (#13471) @alexfauquette
+- [charts] Support RTL for y-axis (#13614) @alexfauquette
+- [charts] Use default values instead of non-null assertion to prevent error being thrown (#13637) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.8.0`
+
+- [TreeView] Add `expansionTrigger` prop (#13533) @noraleonte
+- [TreeView] Support experimental features from plugin's dependencies (#13632) @flaviendelangle
+
+### Docs
+
+- [docs] Add callout for `Luxon` `throwOnInvalid` support (#13621) @LukasTy
+- [docs] Add "Overlays" section to the Data Grid documentation (#13624) @KenanYusuf
+
+### Core
+
+- [core] Add eslint rule to restrict import from `../internals` root (#13633) @JCQuintas
+- [docs-infra] Sync `\_app` folder with monorepo (#13582) @Janpot
+- [license] Allow usage of charts and tree view pro package for old premium licenses (#13619) @flaviendelangle
+
 ## 7.7.1
 
 _Jun 21, 2024_
@@ -44,7 +209,7 @@ Same changes as in `@mui/x-data-grid-pro@7.7.1`.
 - [pickers] Always use the same timezone in the field, the view and the layout components (#13481) @flaviendelangle
 - [pickers] Fix `AdapterDateFnsV3` generated method types (#13464) @alexey-kozlenkov
 - [pickers] Fix controlled `view` behavior (#13552) @LukasTy
-- [TimePicker] Improves RTL verification for the time pickers default views  (#13447) @arthurbalduini
+- [TimePicker] Improves RTL verification for the time pickers default views (#13447) @arthurbalduini
 
 #### `@mui/x-date-pickers-pro@7.7.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 

package/DataGridPro/DataGridPro.js

@@ -906,5 +906,17 @@ DataGridProRaw.propTypes = {
    * If `true`, the rows will be gathered in a tree structure according to the `getTreeDataPath` prop.
    * @default false
    */
-  treeData: _propTypes.default.bool
+  treeData: _propTypes.default.bool,
+  unstable_dataSource: _propTypes.default.shape({
+    getChildrenCount: _propTypes.default.func,
+    getGroupKey: _propTypes.default.func,
+    getRows: _propTypes.default.func.isRequired,
+    updateRow: _propTypes.default.func
+  }),
+  unstable_dataSourceCache: _propTypes.default.shape({
+    clear: _propTypes.default.func.isRequired,
+    get: _propTypes.default.func.isRequired,
+    set: _propTypes.default.func.isRequired
+  }),
+  unstable_onDataSourceError: _propTypes.default.func
 };

package/DataGridPro/useDataGridProComponent.js

@@ -9,6 +9,7 @@ var _useGridInfiniteLoader = require("../hooks/features/infiniteLoader/useGridIn
 var _useGridColumnReorder = require("../hooks/features/columnReorder/useGridColumnReorder");
 var _useGridTreeData = require("../hooks/features/treeData/useGridTreeData");
 var _useGridTreeDataPreProcessors = require("../hooks/features/treeData/useGridTreeDataPreProcessors");
+var _useGridDataSourceTreeDataPreProcessors = require("../hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors");
 var _useGridColumnPinning = require("../hooks/features/columnPinning/useGridColumnPinning");
 var _useGridColumnPinningPreProcessors = require("../hooks/features/columnPinning/useGridColumnPinningPreProcessors");
 var _useGridDetailPanel = require("../hooks/features/detailPanel/useGridDetailPanel");
@@ -19,6 +20,7 @@ var _useGridLazyLoader = require("../hooks/features/lazyLoader/useGridLazyLoader
 var _useGridLazyLoaderPreProcessors = require("../hooks/features/lazyLoader/useGridLazyLoaderPreProcessors");
 var _useGridRowPinning = require("../hooks/features/rowPinning/useGridRowPinning");
 var _useGridRowPinningPreProcessors = require("../hooks/features/rowPinning/useGridRowPinningPreProcessors");
+var _useGridDataSource = require("../hooks/features/dataSource/useGridDataSource");
 // Pro-only features
 
 const useDataGridProComponent = (inputApiRef, props) => {
@@ -30,6 +32,7 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridRowSelectionPreProcessors)(apiRef, props);
   (0, _useGridRowReorderPreProcessors.useGridRowReorderPreProcessors)(apiRef, props);
   (0, _useGridTreeDataPreProcessors.useGridTreeDataPreProcessors)(apiRef, props);
+  (0, _useGridDataSourceTreeDataPreProcessors.useGridDataSourceTreeDataPreProcessors)(apiRef, props);
   (0, _useGridLazyLoaderPreProcessors.useGridLazyLoaderPreProcessors)(apiRef, props);
   (0, _useGridRowPinningPreProcessors.useGridRowPinningPreProcessors)(apiRef);
   (0, _useGridDetailPanelPreProcessors.useGridDetailPanelPreProcessors)(apiRef, props);
@@ -62,8 +65,9 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridInitializeState)(_internals.columnMenuStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnGroupsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.virtualizationStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_useGridDataSource.dataSourceStateInitializer, apiRef, props);
   (0, _internals.useGridHeaderFiltering)(apiRef, props);
-  (0, _useGridTreeData.useGridTreeData)(apiRef);
+  (0, _useGridTreeData.useGridTreeData)(apiRef, props);
   (0, _internals.useGridKeyboardNavigation)(apiRef, props);
   (0, _internals.useGridRowSelection)(apiRef, props);
   (0, _useGridColumnPinning.useGridColumnPinning)(apiRef, props);
@@ -96,6 +100,7 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridEvents)(apiRef, props);
   (0, _internals.useGridStatePersistence)(apiRef);
   (0, _internals.useGridVirtualization)(apiRef, props);
+  (0, _useGridDataSource.useGridDataSource)(apiRef, props);
   return apiRef;
 };
 exports.useDataGridProComponent = useDataGridProComponent;

package/DataGridPro/useDataGridProProps.js

@@ -13,6 +13,14 @@ var _internals = require("@mui/x-data-grid/internals");
 var _dataGridProDefaultSlotsComponents = require("../constants/dataGridProDefaultSlotsComponents");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const getDataGridProForcedProps = themedProps => (0, _extends2.default)({
+  signature: 'DataGridPro'
+}, themedProps.unstable_dataSource ? {
+  filterMode: 'server',
+  sortingMode: 'server',
+  paginationMode: 'server'
+} : {});
+
 /**
  * The default values of `DataGridProPropsWithDefaultValue` to inject in the props of DataGridPro.
  */
@@ -46,8 +54,7 @@ const useDataGridProProps = inProps => {
   }), [themedProps.slots]);
   return React.useMemo(() => (0, _extends2.default)({}, DATA_GRID_PRO_PROPS_DEFAULT_VALUES, themedProps, {
     localeText,
-    slots,
-    signature: 'DataGridPro'
-  }), [themedProps, localeText, slots]);
+    slots
+  }, getDataGridProForcedProps(themedProps)), [themedProps, localeText, slots]);
 };
 exports.useDataGridProProps = useDataGridProProps;

package/components/GridDataSourceTreeDataGroupingCell.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { GridRenderCellParams, GridDataSourceGroupNode } from '@mui/x-data-grid';
+interface GridTreeDataGroupingCellProps extends GridRenderCellParams<any, any, any, GridDataSourceGroupNode> {
+    hideDescendantCount?: boolean;
+    /**
+     * The cell offset multiplier used for calculating cell offset (`rowNode.depth * offsetMultiplier` px).
+     * @default 2
+     */
+    offsetMultiplier?: number;
+}
+export declare function GridDataSourceTreeDataGroupingCell(props: GridTreeDataGroupingCellProps): React.JSX.Element;
+export {};

package/components/GridDataSourceTreeDataGroupingCell.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridDataSourceTreeDataGroupingCell = GridDataSourceTreeDataGroupingCell;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/utils");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
+var _xDataGrid = require("@mui/x-data-grid");
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['treeDataGroupingCell'],
+    toggle: ['treeDataGroupingCellToggle'],
+    loadingContainer: ['treeDataGroupingCellLoadingContainer']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _xDataGrid.getDataGridUtilityClass, classes);
+};
+function GridTreeDataGroupingCellIcon(props) {
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  const {
+    rowNode,
+    id,
+    field,
+    descendantCount
+  } = props;
+  const loadingSelector = state => state.dataSource.loading[id] ?? false;
+  const errorSelector = state => state.dataSource.errors[id];
+  const isDataLoading = (0, _xDataGrid.useGridSelector)(apiRef, loadingSelector);
+  const error = (0, _xDataGrid.useGridSelector)(apiRef, errorSelector);
+  const handleClick = event => {
+    if (!rowNode.childrenExpanded) {
+      // always fetch/get from cache the children when the node is expanded
+      apiRef.current.unstable_dataSource.fetchRows(id);
+    } else {
+      apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
+    }
+    apiRef.current.setCellFocus(id, field);
+    event.stopPropagation(); // TODO remove event.stopPropagation
+  };
+  const Icon = rowNode.childrenExpanded ? rootProps.slots.treeDataCollapseIcon : rootProps.slots.treeDataExpandIcon;
+  if (isDataLoading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.loadingContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+        size: "1rem",
+        color: "inherit"
+      })
+    });
+  }
+  return descendantCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+    size: "small",
+    onClick: handleClick,
+    tabIndex: -1,
+    "aria-label": rowNode.childrenExpanded ? apiRef.current.getLocaleText('treeDataCollapse') : apiRef.current.getLocaleText('treeDataExpand')
+  }, rootProps?.slotProps?.baseIconButton, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+      title: error?.message ?? null,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+        variant: "dot",
+        color: "error",
+        invisible: !error,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          fontSize: "inherit"
+        })
+      })
+    })
+  })) : null;
+}
+function GridDataSourceTreeDataGroupingCell(props) {
+  const {
+    id,
+    field,
+    formattedValue,
+    rowNode,
+    hideDescendantCount,
+    offsetMultiplier = 2
+  } = props;
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const rowSelector = state => state.rows.dataRowIdToModelLookup[id];
+  const row = (0, _xDataGrid.useGridSelector)(apiRef, rowSelector);
+  const classes = useUtilityClasses(rootProps);
+  let descendantCount = 0;
+  if (row) {
+    descendantCount = Math.max(rootProps.unstable_dataSource?.getChildrenCount?.(row) ?? 0, 0);
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    className: classes.root,
+    sx: {
+      ml: rowNode.depth * offsetMultiplier
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.toggle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridTreeDataGroupingCellIcon, {
+        id: id,
+        field: field,
+        rowNode: rowNode,
+        row: row,
+        descendantCount: descendantCount
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      children: [formattedValue === undefined ? rowNode.groupingKey : formattedValue, !hideDescendantCount && descendantCount > 0 ? ` (${descendantCount})` : '']
+    })]
+  });
+}

package/components/GridDetailPanel.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridDetailPanel = GridDetailPanel;
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
-var _internals = require("@mui/x-data-grid/internals");
+var _useResizeObserver = require("@mui/x-internals/useResizeObserver");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -41,7 +41,7 @@ function GridDetailPanel(props) {
       apiRef.current.storeDetailPanelHeight(rowId, ref.current.clientHeight);
     }
   }, [apiRef, hasAutoHeight, rowId]);
-  (0, _internals.useResizeObserver)(ref, entries => {
+  (0, _useResizeObserver.useResizeObserver)(ref, entries => {
     const [entry] = entries;
     const observedHeight = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
     apiRef.current.storeDetailPanelHeight(rowId, observedHeight);

package/components/GridTreeDataGroupingCell.js

@@ -37,10 +37,7 @@ function GridTreeDataGroupingCell(props) {
   } = props;
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   const filteredDescendantCountLookup = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFilteredDescendantCountLookupSelector);
   const filteredDescendantCount = filteredDescendantCountLookup[rowNode.id] ?? 0;
   const Icon = rowNode.childrenExpanded ? rootProps.slots.treeDataCollapseIcon : rootProps.slots.treeDataExpandIcon;

package/esm/DataGridPro/DataGridPro.js

@@ -898,5 +898,17 @@ DataGridProRaw.propTypes = {
    * If `true`, the rows will be gathered in a tree structure according to the `getTreeDataPath` prop.
    * @default false
    */
-  treeData: PropTypes.bool
+  treeData: PropTypes.bool,
+  unstable_dataSource: PropTypes.shape({
+    getChildrenCount: PropTypes.func,
+    getGroupKey: PropTypes.func,
+    getRows: PropTypes.func.isRequired,
+    updateRow: PropTypes.func
+  }),
+  unstable_dataSourceCache: PropTypes.shape({
+    clear: PropTypes.func.isRequired,
+    get: PropTypes.func.isRequired,
+    set: PropTypes.func.isRequired
+  }),
+  unstable_onDataSourceError: PropTypes.func
 };

package/esm/DataGridPro/useDataGridProComponent.js

@@ -4,6 +4,7 @@ import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridI
 import { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
 import { useGridTreeData } from '../hooks/features/treeData/useGridTreeData';
 import { useGridTreeDataPreProcessors } from '../hooks/features/treeData/useGridTreeDataPreProcessors';
+import { useGridDataSourceTreeDataPreProcessors } from '../hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors';
 import { useGridColumnPinning, columnPinningStateInitializer } from '../hooks/features/columnPinning/useGridColumnPinning';
 import { useGridColumnPinningPreProcessors } from '../hooks/features/columnPinning/useGridColumnPinningPreProcessors';
 import { useGridDetailPanel, detailPanelStateInitializer } from '../hooks/features/detailPanel/useGridDetailPanel';
@@ -14,6 +15,7 @@ import { useGridLazyLoader } from '../hooks/features/lazyLoader/useGridLazyLoade
 import { useGridLazyLoaderPreProcessors } from '../hooks/features/lazyLoader/useGridLazyLoaderPreProcessors';
 import { useGridRowPinning, rowPinningStateInitializer } from '../hooks/features/rowPinning/useGridRowPinning';
 import { useGridRowPinningPreProcessors } from '../hooks/features/rowPinning/useGridRowPinningPreProcessors';
+import { useGridDataSource, dataSourceStateInitializer } from '../hooks/features/dataSource/useGridDataSource';
 export const useDataGridProComponent = (inputApiRef, props) => {
   const apiRef = useGridInitialization(inputApiRef, props);
 
@@ -23,6 +25,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridRowSelectionPreProcessors(apiRef, props);
   useGridRowReorderPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
+  useGridDataSourceTreeDataPreProcessors(apiRef, props);
   useGridLazyLoaderPreProcessors(apiRef, props);
   useGridRowPinningPreProcessors(apiRef);
   useGridDetailPanelPreProcessors(apiRef, props);
@@ -55,8 +58,9 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(virtualizationStateInitializer, apiRef, props);
+  useGridInitializeState(dataSourceStateInitializer, apiRef, props);
   useGridHeaderFiltering(apiRef, props);
-  useGridTreeData(apiRef);
+  useGridTreeData(apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);
   useGridColumnPinning(apiRef, props);
@@ -89,5 +93,6 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridEvents(apiRef, props);
   useGridStatePersistence(apiRef);
   useGridVirtualization(apiRef, props);
+  useGridDataSource(apiRef, props);
   return apiRef;
 };

package/esm/DataGridPro/useDataGridProProps.js

@@ -4,6 +4,13 @@ import { useThemeProps } from '@mui/material/styles';
 import { GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
 import { computeSlots, useProps } from '@mui/x-data-grid/internals';
 import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '../constants/dataGridProDefaultSlotsComponents';
+const getDataGridProForcedProps = themedProps => _extends({
+  signature: 'DataGridPro'
+}, themedProps.unstable_dataSource ? {
+  filterMode: 'server',
+  sortingMode: 'server',
+  paginationMode: 'server'
+} : {});
 
 /**
  * The default values of `DataGridProPropsWithDefaultValue` to inject in the props of DataGridPro.
@@ -38,7 +45,6 @@ export const useDataGridProProps = inProps => {
   }), [themedProps.slots]);
   return React.useMemo(() => _extends({}, DATA_GRID_PRO_PROPS_DEFAULT_VALUES, themedProps, {
     localeText,
-    slots,
-    signature: 'DataGridPro'
-  }), [themedProps, localeText, slots]);
+    slots
+  }, getDataGridProForcedProps(themedProps)), [themedProps, localeText, slots]);
 };

package/esm/components/GridDataSourceTreeDataGroupingCell.js

@@ -0,0 +1,111 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import Box from '@mui/material/Box';
+import Badge from '@mui/material/Badge';
+import { getDataGridUtilityClass, useGridSelector } from '@mui/x-data-grid';
+import CircularProgress from '@mui/material/CircularProgress';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['treeDataGroupingCell'],
+    toggle: ['treeDataGroupingCellToggle'],
+    loadingContainer: ['treeDataGroupingCellLoadingContainer']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridTreeDataGroupingCellIcon(props) {
+  const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  const {
+    rowNode,
+    id,
+    field,
+    descendantCount
+  } = props;
+  const loadingSelector = state => state.dataSource.loading[id] ?? false;
+  const errorSelector = state => state.dataSource.errors[id];
+  const isDataLoading = useGridSelector(apiRef, loadingSelector);
+  const error = useGridSelector(apiRef, errorSelector);
+  const handleClick = event => {
+    if (!rowNode.childrenExpanded) {
+      // always fetch/get from cache the children when the node is expanded
+      apiRef.current.unstable_dataSource.fetchRows(id);
+    } else {
+      apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
+    }
+    apiRef.current.setCellFocus(id, field);
+    event.stopPropagation(); // TODO remove event.stopPropagation
+  };
+  const Icon = rowNode.childrenExpanded ? rootProps.slots.treeDataCollapseIcon : rootProps.slots.treeDataExpandIcon;
+  if (isDataLoading) {
+    return /*#__PURE__*/_jsx("div", {
+      className: classes.loadingContainer,
+      children: /*#__PURE__*/_jsx(CircularProgress, {
+        size: "1rem",
+        color: "inherit"
+      })
+    });
+  }
+  return descendantCount > 0 ? /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+    size: "small",
+    onClick: handleClick,
+    tabIndex: -1,
+    "aria-label": rowNode.childrenExpanded ? apiRef.current.getLocaleText('treeDataCollapse') : apiRef.current.getLocaleText('treeDataExpand')
+  }, rootProps?.slotProps?.baseIconButton, {
+    children: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+      title: error?.message ?? null,
+      children: /*#__PURE__*/_jsx(Badge, {
+        variant: "dot",
+        color: "error",
+        invisible: !error,
+        children: /*#__PURE__*/_jsx(Icon, {
+          fontSize: "inherit"
+        })
+      })
+    })
+  })) : null;
+}
+export function GridDataSourceTreeDataGroupingCell(props) {
+  const {
+    id,
+    field,
+    formattedValue,
+    rowNode,
+    hideDescendantCount,
+    offsetMultiplier = 2
+  } = props;
+  const rootProps = useGridRootProps();
+  const apiRef = useGridPrivateApiContext();
+  const rowSelector = state => state.rows.dataRowIdToModelLookup[id];
+  const row = useGridSelector(apiRef, rowSelector);
+  const classes = useUtilityClasses(rootProps);
+  let descendantCount = 0;
+  if (row) {
+    descendantCount = Math.max(rootProps.unstable_dataSource?.getChildrenCount?.(row) ?? 0, 0);
+  }
+  return /*#__PURE__*/_jsxs(Box, {
+    className: classes.root,
+    sx: {
+      ml: rowNode.depth * offsetMultiplier
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classes.toggle,
+      children: /*#__PURE__*/_jsx(GridTreeDataGroupingCellIcon, {
+        id: id,
+        field: field,
+        rowNode: rowNode,
+        row: row,
+        descendantCount: descendantCount
+      })
+    }), /*#__PURE__*/_jsxs("span", {
+      children: [formattedValue === undefined ? rowNode.groupingKey : formattedValue, !hideDescendantCount && descendantCount > 0 ? ` (${descendantCount})` : '']
+    })]
+  });
+}

package/esm/components/GridDetailPanel.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import { useResizeObserver } from '@mui/x-data-grid/internals';
+import { useResizeObserver } from '@mui/x-internals/useResizeObserver';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/components/GridTreeDataGroupingCell.js

@@ -28,10 +28,7 @@ function GridTreeDataGroupingCell(props) {
   } = props;
   const rootProps = useGridRootProps();
   const apiRef = useGridApiContext();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   const filteredDescendantCountLookup = useGridSelector(apiRef, gridFilteredDescendantCountLookupSelector);
   const filteredDescendantCount = filteredDescendantCountLookup[rowNode.id] ?? 0;
   const Icon = rowNode.childrenExpanded ? rootProps.slots.treeDataCollapseIcon : rootProps.slots.treeDataExpandIcon;