@mui/x-data-grid 7.7.1 → 7.8.0

package/modern/hooks/features/rows/useGridRows.js

@@ -2,17 +2,18 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
-import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridDataRowIdsSelector, gridRowsDataRowIdToIdLookupSelector, gridRowMaximumTreeDepthSelector } from './gridRowsSelector';
+import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridDataRowIdsSelector, gridRowsDataRowIdToIdLookupSelector, gridRowMaximumTreeDepthSelector, gridRowGroupsToFetchSelector } from './gridRowsSelector';
 import { useTimeout } from '../../utils/useTimeout';
 import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridSortedRowIdsSelector } from '../sorting/gridSortingSelector';
 import { gridFilteredRowsLookupSelector } from '../filter/gridFilterSelector';
-import { getTreeNodeDescendants, createRowsInternalCache, getRowsStateFromCache, isAutoGeneratedRow, GRID_ROOT_GROUP_ID, GRID_ID_AUTOGENERATED, updateCacheWithNewRows, getTopLevelRowCount, getRowIdFromRowModel } from './gridRowsUtils';
+import { getTreeNodeDescendants, createRowsInternalCache, getRowsStateFromCache, isAutoGeneratedRow, GRID_ROOT_GROUP_ID, GRID_ID_AUTOGENERATED, updateCacheWithNewRows, getTopLevelRowCount, getRowIdFromRowModel, computeRowsUpdates } from './gridRowsUtils';
 import { useGridRegisterPipeApplier } from '../../core/pipeProcessing';
 export const rowsStateInitializer = (state, props, apiRef) => {
+  const isDataSourceAvailable = !!props.unstable_dataSource;
   apiRef.current.caches.rows = createRowsInternalCache({
-    rows: props.rows,
+    rows: isDataSourceAvailable ? [] : props.rows,
     getRowId: props.getRowId,
     loading: props.loading,
     rowCount: props.rowCount
@@ -21,7 +22,7 @@ export const rowsStateInitializer = (state, props, apiRef) => {
     rows: getRowsStateFromCache({
       apiRef,
       rowCountProp: props.rowCount,
-      loadingProp: props.loading,
+      loadingProp: isDataSourceAvailable ? true : props.loading,
       previousTree: null,
       previousTreeDepths: null
     })
@@ -82,7 +83,8 @@ export const useGridRows = (apiRef, props) => {
           rowCountProp: props.rowCount,
           loadingProp: props.loading,
           previousTree: gridRowTreeSelector(apiRef),
-          previousTreeDepths: gridRowTreeDepthsSelector(apiRef)
+          previousTreeDepths: gridRowTreeDepthsSelector(apiRef),
+          previousGroupsToFetch: gridRowGroupsToFetchSelector(apiRef)
         })
       }));
       apiRef.current.publishEvent('rowsSet');
@@ -124,21 +126,7 @@ export const useGridRows = (apiRef, props) => {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
       throw new Error(['MUI X: You cannot update several rows at once in `apiRef.current.updateRows` on the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
-    const nonPinnedRowsUpdates = [];
-    updates.forEach(update => {
-      const id = getRowIdFromRowModel(update, props.getRowId, 'A row was provided without id when calling updateRows():');
-      const rowNode = apiRef.current.getRowNode(id);
-      if (rowNode?.type === 'pinnedRow') {
-        // @ts-ignore because otherwise `release:build` doesn't work
-        const pinnedRowsCache = apiRef.current.caches.pinnedRows;
-        const prevModel = pinnedRowsCache.idLookup[id];
-        if (prevModel) {
-          pinnedRowsCache.idLookup[id] = _extends({}, prevModel, update);
-        }
-      } else {
-        nonPinnedRowsUpdates.push(update);
-      }
-    });
+    const nonPinnedRowsUpdates = computeRowsUpdates(apiRef, updates, props.getRowId);
     const cache = updateCacheWithNewRows({
       updates: nonPinnedRowsUpdates,
       getRowId: props.getRowId,
@@ -149,6 +137,31 @@ export const useGridRows = (apiRef, props) => {
       throttle: true
     });
   }, [props.signature, props.getRowId, throttledRowsChange, apiRef]);
+  const updateServerRows = React.useCallback((updates, groupKeys) => {
+    const nonPinnedRowsUpdates = computeRowsUpdates(apiRef, updates, props.getRowId);
+    const cache = updateCacheWithNewRows({
+      updates: nonPinnedRowsUpdates,
+      getRowId: props.getRowId,
+      previousCache: apiRef.current.caches.rows,
+      groupKeys: groupKeys ?? []
+    });
+    throttledRowsChange({
+      cache,
+      throttle: false
+    });
+  }, [props.getRowId, throttledRowsChange, apiRef]);
+  const setLoading = React.useCallback(loading => {
+    if (loading === props.loading) {
+      return;
+    }
+    logger.debug(`Setting loading to ${loading}`);
+    apiRef.current.setState(state => _extends({}, state, {
+      rows: _extends({}, state.rows, {
+        loading
+      })
+    }));
+    apiRef.current.caches.rows.loadingPropBeforePartialUpdates = loading;
+  }, [props.loading, apiRef, logger]);
   const getRowModels = React.useCallback(() => {
     const dataRows = gridDataRowIdsSelector(apiRef);
     const idRowsLookup = gridRowsLookupSelector(apiRef);
@@ -303,6 +316,7 @@ export const useGridRows = (apiRef, props) => {
   }, [apiRef, props.signature, props.getRowId]);
   const rowApi = {
     getRow,
+    setLoading,
     getRowId,
     getRowModels,
     getRowsCount,
@@ -318,6 +332,9 @@ export const useGridRows = (apiRef, props) => {
     setRowChildrenExpansion,
     getRowGroupChildren
   };
+  const rowProPrivateApi = {
+    updateServerRows
+  };
 
   /**
    * EVENTS
@@ -392,6 +409,7 @@ export const useGridRows = (apiRef, props) => {
   useGridRegisterPipeApplier(apiRef, 'hydrateRows', applyHydrateRowsProcessor);
   useGridApiMethod(apiRef, rowApi, 'public');
   useGridApiMethod(apiRef, rowProApi, props.signature === GridSignature.DataGrid ? 'private' : 'public');
+  useGridApiMethod(apiRef, rowProPrivateApi, 'private');
 
   // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridRows`
   // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
@@ -436,7 +454,7 @@ export const useGridRows = (apiRef, props) => {
         return;
       }
     }
-    logger.debug(`Updating all rows, new length ${props.rows.length}`);
+    logger.debug(`Updating all rows, new length ${props.rows?.length}`);
     throttledRowsChange({
       cache: createRowsInternalCache({
         rows: props.rows,

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.7.1
+ * @mui/x-data-grid v7.8.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/index.js

@@ -55,6 +55,7 @@ export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
 export { createSelector, createSelectorMemoized } from '../utils/createSelector';
+export { gridRowGroupsToFetchSelector } from '../hooks/features/rows/gridRowsSelector';
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from '../utils/domUtils';
 export { isNavigationKey, isPasteShortcut } from '../utils/keyboardUtils';
 export * from '../utils/utils';

package/modern/internals/utils/propValidation.js

@@ -1,6 +1,6 @@
 import { isNumber } from '../../utils/utils';
 import { GridSignature } from '../../hooks/utils/useGridApiEventHandler';
-export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.paginationMode === 'client' && props.paginationMeta != null && ['MUI X: Usage of the `paginationMeta` prop with client-side pagination (`paginationMode="client"`) has no effect.', '`paginationMeta` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.signature === GridSignature.DataGrid && props.paginationMode === 'client' && isNumber(props.rowCount) && ['MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect.', '`rowCount` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.paginationMode === 'server' && props.rowCount == null && ["MUI X: The `rowCount` prop must be passed using `paginationMode='server'`", 'For more detail, see http://mui.com/components/data-grid/pagination/#index-based-pagination'].join('\n') || undefined];
+export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.paginationMode === 'client' && props.paginationMeta != null && ['MUI X: Usage of the `paginationMeta` prop with client-side pagination (`paginationMode="client"`) has no effect.', '`paginationMeta` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.signature === GridSignature.DataGrid && props.paginationMode === 'client' && isNumber(props.rowCount) && ['MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect.', '`rowCount` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.paginationMode === 'server' && props.rowCount == null && !props.unstable_dataSource && ["MUI X: The `rowCount` prop must be passed using `paginationMode='server'`", 'For more detail, see http://mui.com/components/data-grid/pagination/#index-based-pagination'].join('\n') || undefined];
 const warnedOnceCache = new Set();
 function warnOnce(message) {
   if (!warnedOnceCache.has(message)) {

package/modern/models/gridDataSource.js

@@ -0,0 +1 @@
+export {};

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -12,7 +12,6 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _fastMemo = require("../../utils/fastMemo");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
-var _GridColumnHeaderSortIcon = require("./GridColumnHeaderSortIcon");
 var _ColumnHeaderMenuIcon = require("./ColumnHeaderMenuIcon");
 var _GridColumnHeaderMenu = require("../menu/columnMenu/GridColumnHeaderMenu");
 var _gridClasses = require("../../constants/gridClasses");
@@ -151,12 +150,13 @@ function GridColumnHeaderItem(props) {
     children: [!rootProps.disableColumnFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnHeaderFilterIconButton, (0, _extends2.default)({
       field: colDef.field,
       counter: filterItemsCounter
-    }, rootProps.slotProps?.columnHeaderFilterIconButton)), showSortIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderSortIcon.GridColumnHeaderSortIcon, {
+    }, rootProps.slotProps?.columnHeaderFilterIconButton)), showSortIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnHeaderSortIcon, (0, _extends2.default)({
+      field: colDef.field,
       direction: sortDirection,
       index: sortIndex,
       sortingOrder: sortingOrder,
       disabled: !colDef.sortable
-    })]
+    }, rootProps.slotProps?.columnHeaderSortIcon))]
   });
   React.useLayoutEffect(() => {
     const columnMenuState = apiRef.current.state.columnMenu;

package/node/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridColumnHeaderSortIcon = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -15,6 +16,7 @@ var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _GridIconButtonContainer = require("./GridIconButtonContainer");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["direction", "index", "sortingOrder", "disabled"];
 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 => {
@@ -44,11 +46,12 @@ function getIcon(icons, direction, className, sortingOrder) {
 }
 function GridColumnHeaderSortIconRaw(props) {
   const {
-    direction,
-    index,
-    sortingOrder,
-    disabled
-  } = props;
+      direction,
+      index,
+      sortingOrder,
+      disabled
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const ownerState = (0, _extends2.default)({}, props, {
@@ -65,13 +68,14 @@ function GridColumnHeaderSortIconRaw(props) {
     title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
     size: "small",
     disabled: disabled
-  }, rootProps.slotProps?.baseIconButton, {
+  }, rootProps.slotProps?.baseIconButton, other, {
     children: iconElement
   }));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridIconButtonContainer.GridIconButtonContainer, {
     children: [index != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
       badgeContent: index,
       color: "default",
+      overlap: "circular",
       children: iconButton
     }), index == null && iconButton]
   });
@@ -84,6 +88,7 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderSortIconRaw.propTypes =
   // ----------------------------------------------------------------------
   direction: _propTypes.default.oneOf(['asc', 'desc']),
   disabled: _propTypes.default.bool,
+  field: _propTypes.default.string.isRequired,
   index: _propTypes.default.number,
   sortingOrder: _propTypes.default.arrayOf(_propTypes.default.oneOf(['asc', 'desc'])).isRequired
 } : void 0;

package/node/components/containers/GridRootStyles.js

@@ -148,6 +148,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.treeDataGroupingCell}`]: styles.treeDataGroupingCell
   }, {
     [`& .${_gridClasses.gridClasses.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
+  }, {
+    [`& .${_gridClasses.gridClasses.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer
   }, {
     [`& .${_gridClasses.gridClasses.detailPanelToggleCell}`]: styles.detailPanelToggleCell
   }, {
@@ -615,6 +617,12 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       alignSelf: 'stretch',
       marginRight: t.spacing(2)
     },
+    [`& .${_gridClasses.gridClasses.treeDataGroupingCellLoadingContainer}`]: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100%'
+    },
     [`& .${_gridClasses.gridClasses.groupingCriteriaCell}`]: {
       display: 'flex',
       alignItems: 'center',

package/node/constants/defaultGridSlotsComponents.js

@@ -20,6 +20,7 @@ const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = exports.DATA_GRID_DEFAULT_SLOTS_COMPO
   cell: _GridCell.GridCell,
   skeletonCell: _components.GridSkeletonCell,
   columnHeaderFilterIconButton: _components.GridColumnHeaderFilterIconButton,
+  columnHeaderSortIcon: _components.GridColumnHeaderSortIcon,
   columnMenu: _GridColumnMenu.GridColumnMenu,
   columnHeaders: _GridColumnHeaders.GridColumnHeaders,
   detailPanels: _GridDetailPanels.GridDetailPanels,

package/node/constants/gridClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderTop', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderTop', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/node/hooks/features/dimensions/useGridDimensions.js

@@ -60,6 +60,7 @@ function useGridDimensions(apiRef, props) {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useResizeContainer');
   const errorShown = React.useRef(false);
   const rootDimensionsRef = React.useRef(EMPTY_SIZE);
+  const dimensionsState = (0, _utils2.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
   const rowsMeta = (0, _utils2.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
   const pinnedColumns = (0, _utils2.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   const densityFactor = (0, _utils2.useGridSelector)(apiRef, _density.gridDensityFactorSelector);
@@ -219,26 +220,25 @@ function useGridDimensions(apiRef, props) {
     }
   }, [apiRef, savedSize, updateDimensions]);
   const root = apiRef.current.rootElementRef.current;
-  const dimensions = apiRef.current.state.dimensions;
   (0, _utils.unstable_useEnhancedEffect)(() => {
     if (!root) {
       return;
     }
     const set = (k, v) => root.style.setProperty(k, v);
-    set('--DataGrid-width', `${dimensions.viewportOuterSize.width}px`);
-    set('--DataGrid-hasScrollX', `${Number(dimensions.hasScrollX)}`);
-    set('--DataGrid-hasScrollY', `${Number(dimensions.hasScrollY)}`);
-    set('--DataGrid-scrollbarSize', `${dimensions.scrollbarSize}px`);
-    set('--DataGrid-rowWidth', `${dimensions.rowWidth}px`);
-    set('--DataGrid-columnsTotalWidth', `${dimensions.columnsTotalWidth}px`);
-    set('--DataGrid-leftPinnedWidth', `${dimensions.leftPinnedWidth}px`);
-    set('--DataGrid-rightPinnedWidth', `${dimensions.rightPinnedWidth}px`);
-    set('--DataGrid-headerHeight', `${dimensions.headerHeight}px`);
-    set('--DataGrid-headersTotalHeight', `${dimensions.headersTotalHeight}px`);
-    set('--DataGrid-topContainerHeight', `${dimensions.topContainerHeight}px`);
-    set('--DataGrid-bottomContainerHeight', `${dimensions.bottomContainerHeight}px`);
-    set('--height', `${dimensions.rowHeight}px`);
-  }, [root, dimensions]);
+    set('--DataGrid-width', `${dimensionsState.viewportOuterSize.width}px`);
+    set('--DataGrid-hasScrollX', `${Number(dimensionsState.hasScrollX)}`);
+    set('--DataGrid-hasScrollY', `${Number(dimensionsState.hasScrollY)}`);
+    set('--DataGrid-scrollbarSize', `${dimensionsState.scrollbarSize}px`);
+    set('--DataGrid-rowWidth', `${dimensionsState.rowWidth}px`);
+    set('--DataGrid-columnsTotalWidth', `${dimensionsState.columnsTotalWidth}px`);
+    set('--DataGrid-leftPinnedWidth', `${dimensionsState.leftPinnedWidth}px`);
+    set('--DataGrid-rightPinnedWidth', `${dimensionsState.rightPinnedWidth}px`);
+    set('--DataGrid-headerHeight', `${dimensionsState.headerHeight}px`);
+    set('--DataGrid-headersTotalHeight', `${dimensionsState.headersTotalHeight}px`);
+    set('--DataGrid-topContainerHeight', `${dimensionsState.topContainerHeight}px`);
+    set('--DataGrid-bottomContainerHeight', `${dimensionsState.bottomContainerHeight}px`);
+    set('--height', `${dimensionsState.rowHeight}px`);
+  }, [root, dimensionsState]);
   const isFirstSizing = React.useRef(true);
   const handleResize = React.useCallback(size => {
     rootDimensionsRef.current = size;

package/node/hooks/features/export/useGridPrintExport.js

@@ -128,14 +128,15 @@ const useGridPrintExport = (apiRef, props) => {
     gridClone.style.height = `${computedTotalHeight}px`;
     // The height above does not include grid border width, so we need to exclude it
     gridClone.style.boxSizing = 'content-box';
-
-    // the footer is always being placed at the bottom of the page as if all rows are exported
-    // so if getRowsToExport is being used to only export a subset of rows then we need to
-    // adjust the footer position to be correctly placed at the bottom of the grid
-    const gridFooterElement = gridClone.querySelector(`.${_gridClasses.gridClasses.footerContainer}`);
-    gridFooterElement.style.position = 'absolute';
-    gridFooterElement.style.width = '100%';
-    gridFooterElement.style.top = `${computedTotalHeight - gridFooterElementHeight}px`;
+    if (!normalizeOptions.hideFooter) {
+      // the footer is always being placed at the bottom of the page as if all rows are exported
+      // so if getRowsToExport is being used to only export a subset of rows then we need to
+      // adjust the footer position to be correctly placed at the bottom of the grid
+      const gridFooterElement = gridClone.querySelector(`.${_gridClasses.gridClasses.footerContainer}`);
+      gridFooterElement.style.position = 'absolute';
+      gridFooterElement.style.width = '100%';
+      gridFooterElement.style.top = `${computedTotalHeight - gridFooterElementHeight}px`;
+    }
 
     // printDoc.body.appendChild(gridClone); should be enough but a clone isolation bug in Safari
     // prevents us to do it

package/node/hooks/features/rows/gridRowsSelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridTopLevelRowCountSelector = exports.gridRowsLookupSelector = exports.gridRowsLoadingSelector = exports.gridRowsDataRowIdToIdLookupSelector = exports.gridRowTreeSelector = exports.gridRowTreeDepthsSelector = exports.gridRowMaximumTreeDepthSelector = exports.gridRowGroupingNameSelector = exports.gridRowCountSelector = exports.gridPinnedRowsSelector = exports.gridPinnedRowsCountSelector = exports.gridDataRowIdsSelector = exports.gridAdditionalRowGroupsSelector = void 0;
+exports.gridTopLevelRowCountSelector = exports.gridRowsLookupSelector = exports.gridRowsLoadingSelector = exports.gridRowsDataRowIdToIdLookupSelector = exports.gridRowTreeSelector = exports.gridRowTreeDepthsSelector = exports.gridRowMaximumTreeDepthSelector = exports.gridRowGroupsToFetchSelector = exports.gridRowGroupingNameSelector = exports.gridRowCountSelector = exports.gridPinnedRowsSelector = exports.gridPinnedRowsCountSelector = exports.gridDataRowIdsSelector = exports.gridAdditionalRowGroupsSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 const gridRowsStateSelector = state => state.rows;
 const gridRowCountSelector = exports.gridRowCountSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.totalRowCount);
@@ -14,6 +14,7 @@ const gridTopLevelRowCountSelector = exports.gridTopLevelRowCountSelector = (0,
 const gridRowsLookupSelector = exports.gridRowsLookupSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.dataRowIdToModelLookup);
 const gridRowsDataRowIdToIdLookupSelector = exports.gridRowsDataRowIdToIdLookupSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.dataRowIdToIdLookup);
 const gridRowTreeSelector = exports.gridRowTreeSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.tree);
+const gridRowGroupsToFetchSelector = exports.gridRowGroupsToFetchSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.groupsToFetch);
 const gridRowGroupingNameSelector = exports.gridRowGroupingNameSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.groupingName);
 const gridRowTreeDepthsSelector = exports.gridRowTreeDepthsSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.treeDepths);
 const gridRowMaximumTreeDepthSelector = exports.gridRowMaximumTreeDepthSelector = (0, _createSelector.createSelectorMemoized)(gridRowsStateSelector, rows => {

package/node/hooks/features/rows/gridRowsUtils.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.buildRootGroup = exports.GRID_ROOT_GROUP_ID = exports.GRID_ID_AUTOGENERATED = void 0;
 exports.calculatePinnedRowsHeight = calculatePinnedRowsHeight;
 exports.checkGridRowIdIsValid = checkGridRowIdIsValid;
+exports.computeRowsUpdates = computeRowsUpdates;
 exports.createRowsInternalCache = void 0;
 exports.getMinimalContentHeight = getMinimalContentHeight;
 exports.updateCacheWithNewRows = exports.isAutoGeneratedRow = exports.getTreeNodeDescendants = exports.getTopLevelRowCount = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = void 0;
@@ -88,7 +89,8 @@ const getRowsStateFromCache = ({
   rowCountProp = 0,
   loadingProp,
   previousTree,
-  previousTreeDepths
+  previousTreeDepths,
+  previousGroupsToFetch
 }) => {
   const cache = apiRef.current.caches.rows;
 
@@ -97,13 +99,15 @@ const getRowsStateFromCache = ({
     tree: unProcessedTree,
     treeDepths: unProcessedTreeDepths,
     dataRowIds: unProcessedDataRowIds,
-    groupingName
+    groupingName,
+    groupsToFetch = []
   } = apiRef.current.applyStrategyProcessor('rowTreeCreation', {
     previousTree,
     previousTreeDepths,
     updates: cache.updates,
     dataRowIdToIdLookup: cache.dataRowIdToIdLookup,
-    dataRowIdToModelLookup: cache.dataRowIdToModelLookup
+    dataRowIdToModelLookup: cache.dataRowIdToModelLookup,
+    previousGroupsToFetch
   });
 
   // 2. Apply the "hydrateRows" pipe-processing.
@@ -132,7 +136,8 @@ const getRowsStateFromCache = ({
       rowCountProp
     }),
     groupingName,
-    loading: loadingProp
+    loading: loadingProp,
+    groupsToFetch
   });
 };
 exports.getRowsStateFromCache = getRowsStateFromCache;
@@ -163,7 +168,8 @@ exports.getTreeNodeDescendants = getTreeNodeDescendants;
 const updateCacheWithNewRows = ({
   previousCache,
   getRowId,
-  updates
+  updates,
+  groupKeys
 }) => {
   if (previousCache.updates.type === 'full') {
     throw new Error('MUI X: Unable to prepare a partial update if a full update is not applied yet.');
@@ -187,7 +193,8 @@ const updateCacheWithNewRows = ({
       modify: [...(previousCache.updates.actions.modify ?? [])],
       remove: [...(previousCache.updates.actions.remove ?? [])]
     },
-    idToActionLookup: (0, _extends2.default)({}, previousCache.updates.idToActionLookup)
+    idToActionLookup: (0, _extends2.default)({}, previousCache.updates.idToActionLookup),
+    groupKeys
   };
   const dataRowIdToModelLookup = (0, _extends2.default)({}, previousCache.dataRowIdToModelLookup);
   const dataRowIdToIdLookup = (0, _extends2.default)({}, previousCache.dataRowIdToIdLookup);
@@ -301,4 +308,22 @@ function calculatePinnedRowsHeight(apiRef) {
 function getMinimalContentHeight(apiRef) {
   const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state);
   return `var(--DataGrid-overlayHeight, ${2 * dimensions.rowHeight}px)`;
+}
+function computeRowsUpdates(apiRef, updates, getRowId) {
+  const nonPinnedRowsUpdates = [];
+  updates.forEach(update => {
+    const id = getRowIdFromRowModel(update, getRowId, 'A row was provided without id when calling updateRows():');
+    const rowNode = apiRef.current.getRowNode(id);
+    if (rowNode?.type === 'pinnedRow') {
+      // @ts-ignore because otherwise `release:build` doesn't work
+      const pinnedRowsCache = apiRef.current.caches.pinnedRows;
+      const prevModel = pinnedRowsCache.idLookup[id];
+      if (prevModel) {
+        pinnedRowsCache.idLookup[id] = (0, _extends2.default)({}, prevModel, update);
+      }
+    } else {
+      nonPinnedRowsUpdates.push(update);
+    }
+  });
+  return nonPinnedRowsUpdates;
 }

package/node/hooks/features/rows/useGridRows.js

@@ -20,8 +20,9 @@ var _pipeProcessing = require("../../core/pipeProcessing");
 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 rowsStateInitializer = (state, props, apiRef) => {
+  const isDataSourceAvailable = !!props.unstable_dataSource;
   apiRef.current.caches.rows = (0, _gridRowsUtils.createRowsInternalCache)({
-    rows: props.rows,
+    rows: isDataSourceAvailable ? [] : props.rows,
     getRowId: props.getRowId,
     loading: props.loading,
     rowCount: props.rowCount
@@ -30,7 +31,7 @@ const rowsStateInitializer = (state, props, apiRef) => {
     rows: (0, _gridRowsUtils.getRowsStateFromCache)({
       apiRef,
       rowCountProp: props.rowCount,
-      loadingProp: props.loading,
+      loadingProp: isDataSourceAvailable ? true : props.loading,
       previousTree: null,
       previousTreeDepths: null
     })
@@ -92,7 +93,8 @@ const useGridRows = (apiRef, props) => {
           rowCountProp: props.rowCount,
           loadingProp: props.loading,
           previousTree: (0, _gridRowsSelector.gridRowTreeSelector)(apiRef),
-          previousTreeDepths: (0, _gridRowsSelector.gridRowTreeDepthsSelector)(apiRef)
+          previousTreeDepths: (0, _gridRowsSelector.gridRowTreeDepthsSelector)(apiRef),
+          previousGroupsToFetch: (0, _gridRowsSelector.gridRowGroupsToFetchSelector)(apiRef)
         })
       }));
       apiRef.current.publishEvent('rowsSet');
@@ -134,21 +136,7 @@ const useGridRows = (apiRef, props) => {
     if (props.signature === _useGridApiEventHandler.GridSignature.DataGrid && updates.length > 1) {
       throw new Error(['MUI X: You cannot update several rows at once in `apiRef.current.updateRows` on the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
-    const nonPinnedRowsUpdates = [];
-    updates.forEach(update => {
-      const id = (0, _gridRowsUtils.getRowIdFromRowModel)(update, props.getRowId, 'A row was provided without id when calling updateRows():');
-      const rowNode = apiRef.current.getRowNode(id);
-      if (rowNode?.type === 'pinnedRow') {
-        // @ts-ignore because otherwise `release:build` doesn't work
-        const pinnedRowsCache = apiRef.current.caches.pinnedRows;
-        const prevModel = pinnedRowsCache.idLookup[id];
-        if (prevModel) {
-          pinnedRowsCache.idLookup[id] = (0, _extends2.default)({}, prevModel, update);
-        }
-      } else {
-        nonPinnedRowsUpdates.push(update);
-      }
-    });
+    const nonPinnedRowsUpdates = (0, _gridRowsUtils.computeRowsUpdates)(apiRef, updates, props.getRowId);
     const cache = (0, _gridRowsUtils.updateCacheWithNewRows)({
       updates: nonPinnedRowsUpdates,
       getRowId: props.getRowId,
@@ -159,6 +147,31 @@ const useGridRows = (apiRef, props) => {
       throttle: true
     });
   }, [props.signature, props.getRowId, throttledRowsChange, apiRef]);
+  const updateServerRows = React.useCallback((updates, groupKeys) => {
+    const nonPinnedRowsUpdates = (0, _gridRowsUtils.computeRowsUpdates)(apiRef, updates, props.getRowId);
+    const cache = (0, _gridRowsUtils.updateCacheWithNewRows)({
+      updates: nonPinnedRowsUpdates,
+      getRowId: props.getRowId,
+      previousCache: apiRef.current.caches.rows,
+      groupKeys: groupKeys ?? []
+    });
+    throttledRowsChange({
+      cache,
+      throttle: false
+    });
+  }, [props.getRowId, throttledRowsChange, apiRef]);
+  const setLoading = React.useCallback(loading => {
+    if (loading === props.loading) {
+      return;
+    }
+    logger.debug(`Setting loading to ${loading}`);
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      rows: (0, _extends2.default)({}, state.rows, {
+        loading
+      })
+    }));
+    apiRef.current.caches.rows.loadingPropBeforePartialUpdates = loading;
+  }, [props.loading, apiRef, logger]);
   const getRowModels = React.useCallback(() => {
     const dataRows = (0, _gridRowsSelector.gridDataRowIdsSelector)(apiRef);
     const idRowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
@@ -313,6 +326,7 @@ const useGridRows = (apiRef, props) => {
   }, [apiRef, props.signature, props.getRowId]);
   const rowApi = {
     getRow,
+    setLoading,
     getRowId,
     getRowModels,
     getRowsCount,
@@ -328,6 +342,9 @@ const useGridRows = (apiRef, props) => {
     setRowChildrenExpansion,
     getRowGroupChildren
   };
+  const rowProPrivateApi = {
+    updateServerRows
+  };
 
   /**
    * EVENTS
@@ -402,6 +419,7 @@ const useGridRows = (apiRef, props) => {
   (0, _pipeProcessing.useGridRegisterPipeApplier)(apiRef, 'hydrateRows', applyHydrateRowsProcessor);
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowApi, 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowProApi, props.signature === _useGridApiEventHandler.GridSignature.DataGrid ? 'private' : 'public');
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowProPrivateApi, 'private');
 
   // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridRows`
   // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
@@ -446,7 +464,7 @@ const useGridRows = (apiRef, props) => {
         return;
       }
     }
-    logger.debug(`Updating all rows, new length ${props.rows.length}`);
+    logger.debug(`Updating all rows, new length ${props.rows?.length}`);
     throttledRowsChange({
       cache: (0, _gridRowsUtils.createRowsInternalCache)({
         rows: props.rows,

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.7.1
+ * @mui/x-data-grid v7.8.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/index.js

@@ -57,6 +57,7 @@ var _exportNames = {
   useGridParamsApi: true,
   gridAdditionalRowGroupsSelector: true,
   gridPinnedRowsSelector: true,
+  gridRowGroupsToFetchSelector: true,
   headerFilteringStateInitializer: true,
   useGridHeaderFiltering: true,
   useGridRowSelection: true,
@@ -313,6 +314,12 @@ Object.defineProperty(exports, "gridPinnedRowsSelector", {
     return _gridRowsSelector.gridPinnedRowsSelector;
   }
 });
+Object.defineProperty(exports, "gridRowGroupsToFetchSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsSelector.gridRowGroupsToFetchSelector;
+  }
+});
 Object.defineProperty(exports, "headerFilteringStateInitializer", {
   enumerable: true,
   get: function () {