@mui/x-data-grid 7.7.1 → 7.8.0

package/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/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/models/api/gridApiCommon.d.ts

@@ -10,7 +10,7 @@ import type { GridLocaleTextApi } from './gridLocaleTextApi';
 import type { GridParamsApi } from './gridParamsApi';
 import { GridPreferencesPanelApi } from './gridPreferencesPanelApi';
 import { GridPrintExportApi } from './gridPrintExportApi';
-import { GridRowApi } from './gridRowApi';
+import { GridRowApi, GridRowProPrivateApi } from './gridRowApi';
 import { GridRowsMetaApi, GridRowsMetaPrivateApi } from './gridRowsMetaApi';
 import { GridRowSelectionApi } from './gridRowSelectionApi';
 import { GridSortApi } from './gridSortApi';
@@ -31,7 +31,7 @@ import type { DataGridProcessedProps } from '../props/DataGridProps';
 import type { GridColumnResizeApi } from '../../hooks/features/columnResize';
 export interface GridApiCommon<GridState extends GridStateCommunity = any, GridInitialState extends GridInitialStateCommunity = any> extends GridCoreApi, GridPipeProcessingApi, GridDensityApi, GridDimensionsApi, GridRowApi, GridRowsMetaApi, GridEditingApi, GridParamsApi, GridColumnApi, GridRowSelectionApi, GridSortApi, GridPaginationApi, GridCsvExportApi, GridFocusApi, GridFilterApi, GridColumnMenuApi, GridPreferencesPanelApi, GridPrintExportApi, GridVirtualizationApi, GridLocaleTextApi, GridScrollApi, GridColumnSpanningApi, GridStateApi<GridState>, GridStatePersistenceApi<GridInitialState>, GridColumnGroupingApi, GridHeaderFilteringApi, GridColumnResizeApi {
 }
-export interface GridPrivateOnlyApiCommon<Api extends GridApiCommon, PrivateApi extends GridPrivateApiCommon, Props extends DataGridProcessedProps> extends GridCorePrivateApi<Api, PrivateApi, Props>, GridStatePrivateApi<PrivateApi['state']>, GridPipeProcessingPrivateApi, GridStrategyProcessingApi, GridColumnSpanningPrivateApi, GridRowsMetaPrivateApi, GridDimensionsPrivateApi, GridEditingPrivateApi, GridLoggerApi, GridFocusPrivateApi, GridHeaderFilteringPrivateApi, GridVirtualizationPrivateApi {
+export interface GridPrivateOnlyApiCommon<Api extends GridApiCommon, PrivateApi extends GridPrivateApiCommon, Props extends DataGridProcessedProps> extends GridCorePrivateApi<Api, PrivateApi, Props>, GridStatePrivateApi<PrivateApi['state']>, GridPipeProcessingPrivateApi, GridStrategyProcessingApi, GridColumnSpanningPrivateApi, GridRowsMetaPrivateApi, GridDimensionsPrivateApi, GridEditingPrivateApi, GridLoggerApi, GridFocusPrivateApi, GridHeaderFilteringPrivateApi, GridVirtualizationPrivateApi, GridRowProPrivateApi {
 }
 export interface GridPrivateApiCommon extends GridApiCommon, GridPrivateOnlyApiCommon<GridApiCommon, GridPrivateApiCommon, DataGridProcessedProps> {
 }

package/models/api/gridInfiniteLoaderApi.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface GridInfiniteLoaderPrivateApi {
     getInfiniteLoadingTriggerElement?: ({ lastRowId, }: {
         lastRowId: string | number;

package/models/api/gridRowApi.d.ts

@@ -40,6 +40,11 @@ export interface GridRowApi {
      * @returns {GridRowId[]} A list of ids.
      */
     getAllRowIds: () => GridRowId[];
+    /**
+     * Sets the internal loading state.
+     * @param {boolean} loading If `true` the loading indicator will be shown over the Data Grid.
+     */
+    setLoading: (loading: boolean) => void;
     /**
      * Sets a new set of rows.
      * @param {GridRowModel[]} rows The new rows.
@@ -103,3 +108,12 @@ export interface GridRowProApi {
      */
     setRowChildrenExpansion: (id: GridRowId, isExpanded: boolean) => void;
 }
+export interface GridRowProPrivateApi {
+    /**
+     * Allows to update, insert and delete rows at a specific nested level.
+     * @param {GridRowModelUpdate[]} updates An array of rows with an `action` specifying what to do.
+     * @param {string[]} groupKeys The group keys of the rows to update.
+     * @param {boolean} throttle Whether to throttle the updates or not. (default: `true`)
+     */
+    updateServerRows: (updates: GridRowModelUpdate[], groupKeys?: string[]) => void;
+}

package/models/gridColumnGrouping.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GridColDef } from './colDef';
 import type { GridColumnGroupHeaderParams } from './params/gridColumnGroupHeaderParams';
 export interface GridLeafColumn {

package/models/gridDataSource.d.ts

@@ -0,0 +1,87 @@
+import type { GridSortModel, GridFilterModel, GridColDef, GridRowModel, GridPaginationModel } from '.';
+export interface GridGetRowsParams {
+    sortModel: GridSortModel;
+    filterModel: GridFilterModel;
+    /**
+     * Alternate to `start` and `end`, maps to `GridPaginationModel` interface.
+     */
+    paginationModel: GridPaginationModel;
+    /**
+     * First row index to fetch (number) or cursor information (number | string).
+     */
+    start: number | string;
+    /**
+     * Last row index to fetch.
+     */
+    end: number;
+    /**
+     * List of grouped columns (only applicable with `rowGrouping`).
+     */
+    groupFields?: GridColDef['field'][];
+    /**
+     * Array of keys returned by `getGroupKey` of all the parent rows until the row for which the data is requested
+     * `getGroupKey` prop must be implemented to use this.
+     * Useful for `treeData` and `rowGrouping` only.
+     */
+    groupKeys?: string[];
+}
+export interface GridGetRowsResponse {
+    rows: GridRowModel[];
+    /**
+     * To reflect updates in total `rowCount` (optional).
+     * Useful when the `rowCount` is inaccurate (for example when filtering) or not available upfront.
+     */
+    rowCount?: number;
+    /**
+     * Additional `pageInfo` for advanced use-cases.
+     * `hasNextPage`: When row count is unknown/estimated, `hasNextPage` will be used to check if more records are available on server
+     */
+    pageInfo?: {
+        hasNextPage?: boolean;
+        nextCursor?: string;
+    };
+}
+export interface GridDataSource {
+    /**
+     * This method will be called when the grid needs to fetch some rows
+     * @param {GridGetRowsParams} params The parameters required to fetch the rows
+     * @returns {Promise<GridGetRowsResponse>} A promise that resolves to the data of type [GridGetRowsResponse]
+     */
+    getRows(params: GridGetRowsParams): Promise<GridGetRowsResponse>;
+    /**
+     * This method will be called when the user updates a row [Not yet implemented]
+     * @param {GridRowModel} updatedRow The updated row
+     * @returns {Promise<any>} If resolved (synced on the backend), the grid will update the row and mutate the cache
+     */
+    updateRow?(updatedRow: GridRowModel): Promise<any>;
+    /**
+     * Used to group rows by their parent group. Replaces `getTreeDataPath` used in client side tree-data .
+     * @param {GridRowModel} row The row to get the group key of
+     * @returns {string} The group key for the row
+     */
+    getGroupKey?: (row: GridRowModel) => string;
+    /**
+     * Used to determine the number of children a row has on server.
+     * @param {GridRowModel} row The row to check the number of children
+     * @returns {number} The number of children the row has
+     */
+    getChildrenCount?: (row: GridRowModel) => number;
+}
+export interface GridDataSourceCache {
+    /**
+     * Set the cache entry for the given key
+     * @param {GridGetRowsParams} key The key of type `GridGetRowsParams`
+     * @param {GridGetRowsResponse} value The value to be stored in the cache
+     */
+    set: (key: GridGetRowsParams, value: GridGetRowsResponse) => void;
+    /**
+     * Get the cache entry for the given key
+     * @param {GridGetRowsParams} key The key of type `GridGetRowsParams`
+     * @returns {GridGetRowsResponse} The value stored in the cache
+     */
+    get: (key: GridGetRowsParams) => GridGetRowsResponse | undefined;
+    /**
+     * Clear the cache
+     */
+    clear: () => void;
+}

package/models/gridDataSource.js

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

package/models/gridRows.d.ts

@@ -102,6 +102,16 @@ export interface GridDataGroupNode extends GridBasicGroupNode {
      */
     isAutoGenerated: false;
 }
+export interface GridDataSourceGroupNode extends GridDataGroupNode {
+    /**
+     * If true, this node has children on server.
+     */
+    hasServerChildren: boolean;
+    /**
+     * The cached path to be passed on as `groupKey` to the server.
+     */
+    path: string[];
+}
 export type GridGroupNode = GridDataGroupNode | GridAutoGeneratedGroupNode;
 export type GridChildrenFromPathLookup = {
     [groupingField: string]: {

package/models/gridSlotsComponent.d.ts

@@ -88,6 +88,11 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
      * @default GridColumnHeaderFilterIconButton
      */
     columnHeaderFilterIconButton: React.JSXElementConstructor<GridSlotProps['columnHeaderFilterIconButton']>;
+    /**
+     * Sort icon component rendered in each column header.
+     * @default GridColumnHeaderSortIcon
+     */
+    columnHeaderSortIcon: React.JSXElementConstructor<GridSlotProps['columnHeaderSortIcon']>;
     /**
      * Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.
      * @default GridColumnMenu

package/models/gridSlotsComponentsProps.d.ts

@@ -27,7 +27,8 @@ import type { GridColumnHeadersProps } from '../components/GridColumnHeaders';
 import type { GridDetailPanelsProps } from '../components/GridDetailPanels';
 import type { GridPinnedRowsProps } from '../components/GridPinnedRows';
 import type { GridColumnsManagementProps } from '../components/columnsManagement/GridColumnsManagement';
-import type { GridRowCountProps } from '../components';
+import type { GridRowCountProps } from '../components/GridRowCount';
+import type { GridColumnHeaderSortIconProps } from '../components/columnHeaders/GridColumnHeaderSortIcon';
 export interface BaseCheckboxPropsOverrides {
 }
 export interface BaseTextFieldPropsOverrides {
@@ -60,6 +61,8 @@ export interface ToolbarPropsOverrides {
 }
 export interface ColumnHeaderFilterIconButtonPropsOverrides {
 }
+export interface ColumnHeaderSortIconPropsOverrides {
+}
 export interface ColumnMenuPropsOverrides {
 }
 export interface ColumnsPanelPropsOverrides {
@@ -111,6 +114,7 @@ export interface GridSlotProps {
     cell: GridCellProps & CellPropsOverrides;
     columnHeaders: GridColumnHeadersProps;
     columnHeaderFilterIconButton: ColumnHeaderFilterIconButtonProps & ColumnHeaderFilterIconButtonPropsOverrides;
+    columnHeaderSortIcon: GridColumnHeaderSortIconProps & ColumnHeaderSortIconPropsOverrides;
     columnMenu: GridColumnMenuProps & ColumnMenuPropsOverrides;
     columnsPanel: GridColumnsPanelProps & ColumnsPanelPropsOverrides;
     columnsManagement: GridColumnsManagementProps & ColumnsManagementPropsOverrides;

package/models/props/DataGridProps.d.ts

@@ -25,6 +25,7 @@ import { GridCellModesModel, GridRowModesModel } from '../api/gridEditingApi';
 import { GridColumnGroupingModel } from '../gridColumnGrouping';
 import { GridPaginationMeta, GridPaginationModel } from '../gridPaginationProps';
 import type { GridAutosizeOptions } from '../../hooks/features/columnResize';
+import type { GridDataSource } from '../gridDataSource';
 export interface GridExperimentalFeatures {
     /**
      * Emits a warning if the cell receives focus without also syncing the focus state.
@@ -774,6 +775,7 @@ export interface DataGridProSharedPropsWithoutDefaultValue {
      * Override the height of the header filters.
      */
     headerFilterHeight?: number;
+    unstable_dataSource?: GridDataSource;
 }
 export interface DataGridPremiumSharedPropsWithDefaultValue {
     /**

package/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -5,7 +5,6 @@ import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
 import { fastMemo } from '../../utils/fastMemo';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
-import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
 import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
 import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
 import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
@@ -142,12 +141,13 @@ function GridColumnHeaderItem(props) {
     children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.slots.columnHeaderFilterIconButton, _extends({
       field: colDef.field,
       counter: filterItemsCounter
-    }, rootProps.slotProps?.columnHeaderFilterIconButton)), showSortIcon && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
+    }, rootProps.slotProps?.columnHeaderFilterIconButton)), showSortIcon && /*#__PURE__*/_jsx(rootProps.slots.columnHeaderSortIcon, _extends({
+      field: colDef.field,
       direction: sortDirection,
       index: sortIndex,
       sortingOrder: sortingOrder,
       disabled: !colDef.sortable
-    })]
+    }, rootProps.slotProps?.columnHeaderSortIcon))]
   });
   React.useLayoutEffect(() => {
     const columnMenuState = apiRef.current.state.columnMenu;

package/modern/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -1,4 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["direction", "index", "sortingOrder", "disabled"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -35,11 +37,12 @@ function getIcon(icons, direction, className, sortingOrder) {
 }
 function GridColumnHeaderSortIconRaw(props) {
   const {
-    direction,
-    index,
-    sortingOrder,
-    disabled
-  } = props;
+      direction,
+      index,
+      sortingOrder,
+      disabled
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const ownerState = _extends({}, props, {
@@ -56,13 +59,14 @@ function GridColumnHeaderSortIconRaw(props) {
     title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
     size: "small",
     disabled: disabled
-  }, rootProps.slotProps?.baseIconButton, {
+  }, rootProps.slotProps?.baseIconButton, other, {
     children: iconElement
   }));
   return /*#__PURE__*/_jsxs(GridIconButtonContainer, {
     children: [index != null && /*#__PURE__*/_jsx(Badge, {
       badgeContent: index,
       color: "default",
+      overlap: "circular",
       children: iconButton
     }), index == null && iconButton]
   });
@@ -75,6 +79,7 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderSortIconRaw.propTypes =
   // ----------------------------------------------------------------------
   direction: PropTypes.oneOf(['asc', 'desc']),
   disabled: PropTypes.bool,
+  field: PropTypes.string.isRequired,
   index: PropTypes.number,
   sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])).isRequired
 } : void 0;

package/modern/components/containers/GridRootStyles.js

@@ -141,6 +141,8 @@ export const GridRootStyles = styled('div', {
     [`& .${c.treeDataGroupingCell}`]: styles.treeDataGroupingCell
   }, {
     [`& .${c.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
+  }, {
+    [`& .${c.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer
   }, {
     [`& .${c.detailPanelToggleCell}`]: styles.detailPanelToggleCell
   }, {
@@ -608,6 +610,12 @@ export const GridRootStyles = styled('div', {
       alignSelf: 'stretch',
       marginRight: t.spacing(2)
     },
+    [`& .${c.treeDataGroupingCellLoadingContainer}`]: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100%'
+    },
     [`& .${c.groupingCriteriaCell}`]: {
       display: 'flex',
       alignItems: 'center',

package/modern/constants/defaultGridSlotsComponents.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount, GridColumnsManagement } from '../components';
+import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount, GridColumnsManagement, GridColumnHeaderSortIcon } from '../components';
 import { GridCell } from '../components/cell/GridCell';
 import { GridColumnHeaders } from '../components/GridColumnHeaders';
 import { GridColumnMenu } from '../components/menu/columnMenu/GridColumnMenu';
@@ -14,6 +14,7 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, materialSlots, {
   cell: GridCell,
   skeletonCell: GridSkeletonCell,
   columnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
+  columnHeaderSortIcon: GridColumnHeaderSortIcon,
   columnMenu: GridColumnMenu,
   columnHeaders: GridColumnHeaders,
   detailPanels: GridDetailPanels,

package/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = 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']);
+export const gridClasses = 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/modern/hooks/features/dimensions/useGridDimensions.js

@@ -49,6 +49,7 @@ export function useGridDimensions(apiRef, props) {
   const logger = useGridLogger(apiRef, 'useResizeContainer');
   const errorShown = React.useRef(false);
   const rootDimensionsRef = React.useRef(EMPTY_SIZE);
+  const dimensionsState = useGridSelector(apiRef, gridDimensionsSelector);
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
@@ -208,26 +209,25 @@ export function useGridDimensions(apiRef, props) {
     }
   }, [apiRef, savedSize, updateDimensions]);
   const root = apiRef.current.rootElementRef.current;
-  const dimensions = apiRef.current.state.dimensions;
   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/modern/hooks/features/export/useGridPrintExport.js

@@ -119,14 +119,15 @@ export 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.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.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/modern/hooks/features/rows/gridRowsSelector.js

@@ -8,6 +8,7 @@ export const gridTopLevelRowCountSelector = createSelector(gridRowsStateSelector
 export const gridRowsLookupSelector = createSelector(gridRowsStateSelector, rows => rows.dataRowIdToModelLookup);
 export const gridRowsDataRowIdToIdLookupSelector = createSelector(gridRowsStateSelector, rows => rows.dataRowIdToIdLookup);
 export const gridRowTreeSelector = createSelector(gridRowsStateSelector, rows => rows.tree);
+export const gridRowGroupsToFetchSelector = createSelector(gridRowsStateSelector, rows => rows.groupsToFetch);
 export const gridRowGroupingNameSelector = createSelector(gridRowsStateSelector, rows => rows.groupingName);
 export const gridRowTreeDepthsSelector = createSelector(gridRowsStateSelector, rows => rows.treeDepths);
 export const gridRowMaximumTreeDepthSelector = createSelectorMemoized(gridRowsStateSelector, rows => {

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

@@ -72,7 +72,8 @@ export const getRowsStateFromCache = ({
   rowCountProp = 0,
   loadingProp,
   previousTree,
-  previousTreeDepths
+  previousTreeDepths,
+  previousGroupsToFetch
 }) => {
   const cache = apiRef.current.caches.rows;
 
@@ -81,13 +82,15 @@ export 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.
@@ -116,7 +119,8 @@ export const getRowsStateFromCache = ({
       rowCountProp
     }),
     groupingName,
-    loading: loadingProp
+    loading: loadingProp,
+    groupsToFetch
   });
 };
 export const isAutoGeneratedRow = rowNode => rowNode.type === 'skeletonRow' || rowNode.type === 'footer' || rowNode.type === 'group' && rowNode.isAutoGenerated || rowNode.type === 'pinnedRow' && rowNode.isAutoGenerated;
@@ -144,7 +148,8 @@ export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) =>
 export 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.');
@@ -168,7 +173,8 @@ export const updateCacheWithNewRows = ({
       modify: [...(previousCache.updates.actions.modify ?? [])],
       remove: [...(previousCache.updates.actions.remove ?? [])]
     },
-    idToActionLookup: _extends({}, previousCache.updates.idToActionLookup)
+    idToActionLookup: _extends({}, previousCache.updates.idToActionLookup),
+    groupKeys
   };
   const dataRowIdToModelLookup = _extends({}, previousCache.dataRowIdToModelLookup);
   const dataRowIdToIdLookup = _extends({}, previousCache.dataRowIdToIdLookup);
@@ -281,4 +287,22 @@ export function calculatePinnedRowsHeight(apiRef) {
 export function getMinimalContentHeight(apiRef) {
   const dimensions = gridDimensionsSelector(apiRef.current.state);
   return `var(--DataGrid-overlayHeight, ${2 * dimensions.rowHeight}px)`;
+}
+export 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] = _extends({}, prevModel, update);
+      }
+    } else {
+      nonPinnedRowsUpdates.push(update);
+    }
+  });
+  return nonPinnedRowsUpdates;
 }