@mui/x-data-grid-premium 8.0.0-alpha.9 → 8.0.0-beta.0

package/DataGridPremium/DataGrid.d.ts

@@ -5,4 +5,4 @@ export declare function DataGrid(): null;
 /**
  * @deprecated Import DataGridPremium instead.
  */
-export declare function DataGridPro(): null;
+export declare function DataGridPro(): null;

package/DataGridPremium/DataGridPremium.d.ts

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { GridValidRowModel } from '@mui/x-data-grid-pro';
-import { DataGridPremiumProps } from '../models/dataGridPremiumProps';
+import { DataGridPremiumProps } from "../models/dataGridPremiumProps.js";
 export type { GridPremiumSlotsComponent as GridSlots } from '../models';
 interface DataGridPremiumComponent {
-    <R extends GridValidRowModel = any>(props: DataGridPremiumProps<R> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
-    propTypes?: any;
+  <R extends GridValidRowModel = any>(props: DataGridPremiumProps<R> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+  propTypes?: any;
 }
 /**
- * Demos:
- * - [DataGridPremium](https://mui.com/x/react-data-grid/demo/)
+ * Features:
+ * - [DataGridPremium](https://mui.com/x/react-data-grid/features/)
  *
  * API:
  * - [DataGridPremium API](https://mui.com/x/api/data-grid/data-grid-premium/)
  */
-export declare const DataGridPremium: DataGridPremiumComponent;
+export declare const DataGridPremium: DataGridPremiumComponent;

package/DataGridPremium/DataGridPremium.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _xLicense = require("@mui/x-license");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _internals = require("@mui/x-data-grid-pro/internals");
+var _material = require("@mui/x-data-grid/material");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useDataGridPremiumComponent = require("./useDataGridPremiumComponent");
 var _useDataGridPremiumProps = require("./useDataGridPremiumProps");
@@ -22,11 +23,16 @@ var _useGridRowAriaAttributes = require("../hooks/features/rows/useGridRowAriaAt
 var _jsxRuntime = require("react/jsx-runtime");
 const configuration = {
   hooks: {
+    useCSSVariables: _material.useMaterialCSSVariables,
     useGridAriaAttributes: _useGridAriaAttributes.useGridAriaAttributes,
     useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributes
   }
 };
 const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
+const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
+  packageName: "x-data-grid-premium",
+  releaseInfo: releaseInfo
+});
 let dataGridPremiumPropValidators;
 if (process.env.NODE_ENV !== 'production') {
   dataGridPremiumPropValidators = [..._internals.propValidatorsDataGrid, ..._internals.propValidatorsDataGridPro];
@@ -48,10 +54,7 @@ const DataGridPremiumRaw = (0, _forwardRef.forwardRef)(function DataGridPremium(
       sx: props.sx
     }, props.slotProps?.root, {
       ref: ref,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
-        packageName: "x-data-grid-premium",
-        releaseInfo: releaseInfo
-      })
+      children: watermark
     }))
   });
 });
@@ -62,7 +65,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * Aggregation functions available on the grid.
-   * @default GRID_AGGREGATION_FUNCTIONS when `unstable_dataSource` is not provided, `{}` when `unstable_dataSource` is provided
+   * @default GRID_AGGREGATION_FUNCTIONS when `dataSource` is not provided, `{}` when `dataSource` is provided
    */
   aggregationFunctions: _propTypes.default.object,
   /**
@@ -80,7 +83,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * The ref object that allows grid manipulation. Can be instantiated with `useGridApiRef()`.
    */
   apiRef: _propTypes.default.shape({
-    current: _propTypes.default.object.isRequired
+    current: _propTypes.default.object
   }),
   /**
    * The label of the Data Grid.
@@ -179,6 +182,24 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * If defined, the Data Grid will ignore the `hide` property in [[GridColDef]].
    */
   columnVisibilityModel: _propTypes.default.object,
+  /**
+   * Data source object.
+   */
+  dataSource: _propTypes.default.shape({
+    getAggregatedValue: _propTypes.default.func,
+    getChildrenCount: _propTypes.default.func,
+    getGroupKey: _propTypes.default.func,
+    getRows: _propTypes.default.func.isRequired,
+    updateRow: _propTypes.default.func
+  }),
+  /**
+   * Data source cache object.
+   */
+  dataSourceCache: _propTypes.default.shape({
+    clear: _propTypes.default.func.isRequired,
+    get: _propTypes.default.func.isRequired,
+    set: _propTypes.default.func.isRequired
+  }),
   /**
    * If above 0, the row children will be expanded up to this depth.
    * If equal to -1, all the row children will be expanded.
@@ -387,6 +408,8 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   getRowHeight: _propTypes.default.func,
   /**
    * Return the id of a given [[GridRowModel]].
+   * Ensure the reference of this prop is stable to avoid performance implications.
+   * It could be done by either defining the prop outside of the component or by memoizing it.
    */
   getRowId: _propTypes.default.func,
   /**
@@ -491,6 +514,18 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default false
    */
   keepNonExistentRowsSelected: _propTypes.default.bool,
+  /**
+   * Used together with `dataSource` to enable lazy loading.
+   * If enabled, the grid stops adding `paginationModel` to the data requests (`getRows`)
+   * and starts sending `start` and `end` values depending on the loading mode and the scroll position.
+   * @default false
+   */
+  lazyLoading: _propTypes.default.bool,
+  /**
+   * If positive, the Data Grid will throttle data source requests on rendered rows interval change.
+   * @default 500
+   */
+  lazyLoadingRequestThrottleMs: _propTypes.default.number,
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -667,6 +702,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnWidthChange: _propTypes.default.func,
+  /**
+   * Callback fired when a data source request fails.
+   * @param {GridGetRowsError | GridUpdateRowError} error The data source error object.
+   */
+  onDataSourceError: _propTypes.default.func,
   /**
    * Callback fired when the density changes.
    * @param {GridDensity} density New density value.
@@ -688,6 +728,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]].
    * @param {MuiEvent<{}>} event The event object.
    * @param {GridCallbackDetails} details Additional details for this callback.
+   * @deprecated Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead.
    */
   onFetchRows: _propTypes.default.func,
   /**
@@ -815,6 +856,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridRowScrollEndParams} params With all properties from [[GridRowScrollEndParams]].
    * @param {MuiEvent<{}>} event The event object.
    * @param {GridCallbackDetails} details Additional details for this callback.
+   * @deprecated Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading Server-side data-Infinite loading} instead.
    */
   onRowsScrollEnd: _propTypes.default.func,
   /**
@@ -938,7 +980,10 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   /**
    * Sets the row selection model of the Data Grid.
    */
-  rowSelectionModel: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired), _propTypes.default.number, _propTypes.default.string]),
+  rowSelectionModel: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
+    ids: _propTypes.default.instanceOf(Set).isRequired,
+    type: _propTypes.default.oneOf(['exclude', 'include']).isRequired
+  }),
   /**
    * When `rowSelectionPropagation.descendants` is set to `true`.
    * - Selecting a parent selects all its filtered descendants automatically.
@@ -960,6 +1005,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Set it to 'client' if you would like enable infnite loading.
    * Set it to 'server' if you would like to enable lazy loading.
    * @default "client"
+   * @deprecated Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead.
    */
   rowsLoadingMode: _propTypes.default.oneOf(['client', 'server']),
   /**
@@ -978,7 +1024,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   scrollbarSize: _propTypes.default.number,
   /**
    * Set the area in `px` at the bottom of the grid viewport where onRowsScrollEnd is called.
-   * If combined with `unstable_lazyLoading`, it defines the area where the next data request is triggered.
+   * If combined with `lazyLoading`, it defines the area where the next data request is triggered.
    * @default 80
    */
   scrollEndThreshold: _propTypes.default.number,
@@ -992,6 +1038,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default false
    */
   showColumnVerticalBorder: _propTypes.default.bool,
+  /**
+   * If `true`, the toolbar is displayed.
+   * @default false
+   */
+  showToolbar: _propTypes.default.bool,
   /**
    * Overridable components props dynamically passed to the component at rendering.
    */
@@ -1041,30 +1092,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default false
    */
   treeData: _propTypes.default.bool,
-  unstable_dataSource: _propTypes.default.shape({
-    getAggregatedValue: _propTypes.default.func,
-    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
-  }),
-  /**
-   * Used together with `unstable_dataSource` to enable lazy loading.
-   * If enabled, the grid stops adding `paginationModel` to the data requests (`getRows`)
-   * and starts sending `start` and `end` values depending on the loading mode and the scroll position.
-   * @default false
-   */
-  unstable_lazyLoading: _propTypes.default.bool,
-  /**
-   * If positive, the Data Grid will throttle data source requests on rendered rows interval change.
-   * @default 500
-   */
-  unstable_lazyLoadingRequestThrottleMs: _propTypes.default.number,
   /**
    * Definition of the column rendered when the `unstable_listView` prop is enabled.
    */
@@ -1080,7 +1107,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Use in combination with `unstable_listColumn`.
    */
   unstable_listView: _propTypes.default.bool,
-  unstable_onDataSourceError: _propTypes.default.func,
   /**
    * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
    * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.
@@ -1091,8 +1117,8 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   virtualizeColumnsWithAutoRowHeight: _propTypes.default.bool
 } : void 0;
 /**
- * Demos:
- * - [DataGridPremium](https://mui.com/x/react-data-grid/demo/)
+ * Features:
+ * - [DataGridPremium](https://mui.com/x/react-data-grid/features/)
  *
  * API:
  * - [DataGridPremium API](https://mui.com/x/api/data-grid/data-grid-premium/)

package/DataGridPremium/index.d.ts

@@ -1,3 +1,3 @@
-export * from './DataGrid';
-export * from './DataGridPremium';
-export { DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES } from './useDataGridPremiumProps';
+export * from "./DataGrid.js";
+export * from "./DataGridPremium.js";
+export { DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES } from "./useDataGridPremiumProps.js";

package/DataGridPremium/useDataGridPremiumComponent.d.ts

@@ -1,4 +1,4 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridApiPremium, GridPrivateApiPremium } from '../models/gridApiPremium';
-import { DataGridPremiumProcessedProps } from '../models/dataGridPremiumProps';
-export declare const useDataGridPremiumComponent: (inputApiRef: RefObject<GridApiPremium> | undefined, props: DataGridPremiumProcessedProps) => import("react").RefObject<GridPrivateApiPremium>;
+import { GridApiPremium, GridPrivateApiPremium } from "../models/gridApiPremium.js";
+import { DataGridPremiumProcessedProps } from "../models/dataGridPremiumProps.js";
+export declare const useDataGridPremiumComponent: (inputApiRef: RefObject<GridApiPremium | null> | undefined, props: DataGridPremiumProcessedProps) => import("react").RefObject<GridPrivateApiPremium>;

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -40,7 +40,7 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
-  (0, _internals.useGridInitializeState)(_internals.dimensionsStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.propsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.headerFilteringStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridRowGrouping.rowGroupingStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridAggregation.aggregationStateInitializer, apiRef, props);
@@ -50,8 +50,8 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _internals.useGridInitializeState)(_internals.columnPinningStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowPinningStateInitializer, apiRef, props);
-  (0, _internals.useGridInitializeState)(_internals.paginationStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowsStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.paginationStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.editingStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.focusStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.sortingStateInitializer, apiRef, props);
@@ -61,16 +61,16 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _internals.useGridInitializeState)(_internals.densityStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnReorderStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnResizeStateInitializer, apiRef, props);
-  (0, _internals.useGridInitializeState)(_internals.rowsMetaStateInitializer, apiRef, 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)(_internals.dataSourceStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.dimensionsStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.rowsMetaStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.listViewStateInitializer, apiRef, props);
   (0, _useGridRowGrouping.useGridRowGrouping)(apiRef, props);
   (0, _internals.useGridHeaderFiltering)(apiRef, props);
   (0, _internals.useGridTreeData)(apiRef, props);
-  (0, _useGridDataSourcePremium.useGridDataSourcePremium)(apiRef, props);
   (0, _useGridAggregation.useGridAggregation)(apiRef, props);
   (0, _internals.useGridKeyboardNavigation)(apiRef, props);
   (0, _internals.useGridRowSelection)(apiRef, props);
@@ -108,6 +108,7 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _internals.useGridDimensions)(apiRef, props);
   (0, _internals.useGridEvents)(apiRef, props);
   (0, _internals.useGridStatePersistence)(apiRef);
+  (0, _useGridDataSourcePremium.useGridDataSourcePremium)(apiRef, props);
   (0, _internals.useGridVirtualization)(apiRef, props);
   (0, _internals.useGridListView)(apiRef, props);
   return apiRef;

package/DataGridPremium/useDataGridPremiumProps.d.ts

@@ -1,6 +1,6 @@
-import { DataGridPremiumProps, DataGridPremiumProcessedProps, DataGridPremiumPropsWithDefaultValue } from '../models/dataGridPremiumProps';
+import { DataGridPremiumProps, DataGridPremiumProcessedProps, DataGridPremiumPropsWithDefaultValue } from "../models/dataGridPremiumProps.js";
 /**
  * The default values of `DataGridPremiumPropsWithDefaultValue` to inject in the props of DataGridPremium.
  */
 export declare const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES: DataGridPremiumPropsWithDefaultValue;
-export declare const useDataGridPremiumProps: (inProps: DataGridPremiumProps) => DataGridPremiumProcessedProps;
+export declare const useDataGridPremiumProps: (inProps: DataGridPremiumProps) => DataGridPremiumProcessedProps;

package/DataGridPremium/useDataGridPremiumProps.js

@@ -15,7 +15,7 @@ var _aggregation = require("../hooks/features/aggregation");
 var _dataGridPremiumDefaultSlotsComponents = require("../constants/dataGridPremiumDefaultSlotsComponents");
 const getDataGridPremiumForcedProps = themedProps => (0, _extends2.default)({
   signature: _xDataGridPro.GridSignature.DataGridPremium
-}, themedProps.unstable_dataSource ? {
+}, themedProps.dataSource ? {
   filterMode: 'server',
   sortingMode: 'server',
   paginationMode: 'server'
@@ -53,7 +53,7 @@ const useDataGridPremiumProps = inProps => {
     defaultSlots,
     slots: themedProps.slots
   }), [themedProps.slots]);
-  return React.useMemo(() => (0, _extends2.default)({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps.unstable_dataSource ? {
+  return React.useMemo(() => (0, _extends2.default)({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps.dataSource ? {
     aggregationFunctions: {}
   } : {}, themedProps, {
     localeText,

package/README.md

@@ -15,7 +15,7 @@ This component has the following peer dependencies that you need to install as w
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.15.14 || ^6.0.0",
+  "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
   "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
   "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },

package/components/GridAggregationHeader.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GridColumnHeaderParams } from '@mui/x-data-grid';
-import type { GridBaseColDef } from '@mui/x-data-grid/internals';
+import { type GridBaseColDef } from '@mui/x-data-grid/internals';
 declare function GridAggregationHeader(props: GridColumnHeaderParams & {
-    renderHeader: GridBaseColDef['renderHeader'];
+  renderHeader: GridBaseColDef['renderHeader'];
 }): React.JSX.Element | null;
-export { GridAggregationHeader };
+export { GridAggregationHeader };

package/components/GridAggregationHeader.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
 var _xDataGrid = require("@mui/x-data-grid");
+var _internals = require("@mui/x-data-grid/internals");
 var _gridAggregationUtils = require("../hooks/features/aggregation/gridAggregationUtils");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
@@ -20,7 +21,12 @@ const _excluded = ["renderHeader"];
 const GridAggregationHeaderRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'AggregationColumnHeader',
-  overridesResolver: (_, styles) => styles.aggregationColumnHeader
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.aggregationColumnHeader, ownerState.colDef.headerAlign === 'left' && styles['aggregationColumnHeader--alignLeft'], ownerState.colDef.headerAlign === 'center' && styles['aggregationColumnHeader--alignCenter'], ownerState.colDef.headerAlign === 'right' && styles['aggregationColumnHeader--alignRight']];
+  }
 })({
   display: 'flex',
   flexDirection: 'column',
@@ -33,17 +39,12 @@ const GridAggregationHeaderRoot = (0, _styles.styled)('div', {
 });
 const GridAggregationFunctionLabel = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'AggregationColumnHeaderLabel',
-  overridesResolver: (_, styles) => styles.aggregationColumnHeaderLabel
-})(({
-  theme
-}) => {
-  return {
-    fontSize: theme.typography.caption.fontSize,
-    lineHeight: 'normal',
-    color: theme.palette.text.secondary,
-    marginTop: -1
-  };
+  slot: 'AggregationColumnHeaderLabel'
+})({
+  font: _internals.vars.typography.font.small,
+  lineHeight: 'normal',
+  color: _internals.vars.colors.foreground.muted,
+  marginTop: -1
 });
 const useUtilityClasses = ownerState => {
   const {

package/components/GridAggregationRowOverlay.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const GridAggregationRowOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement>> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { GridAggregationRowOverlay };

package/components/GridAggregationRowOverlay.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridAggregationRowOverlay = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _useGridApiContext = require("../hooks/utils/useGridApiContext");
+var _gridAggregationSelectors = require("../hooks/features/aggregation/gridAggregationSelectors");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['aggregationRowOverlayWrapper']
+  };
+  return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const GridAggregationRowOverlay = exports.GridAggregationRowOverlay = (0, _forwardRef.forwardRef)(function GridAggregationRowOverlay(props, forwardedRef) {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _xDataGridPro.useGridRootProps)();
+  const classes = useUtilityClasses({
+    classes: rootProps.classes
+  });
+  const aggregationModel = (0, _internals.useGridSelector)(apiRef, _gridAggregationSelectors.gridAggregationModelSelector);
+  const visibleColumns = new Set(Object.keys(aggregationModel));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: classes.root,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridSkeletonLoadingOverlayInner, (0, _extends2.default)({}, props, {
+      skeletonRowsCount: 1,
+      visibleColumns: visibleColumns,
+      showFirstRowBorder: true,
+      ref: forwardedRef
+    }))
+  });
+});

package/components/GridBottomContainer.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export type GridBottomContainerProps = React.PropsWithChildren;
+export declare function GridBottomContainer(props: GridBottomContainerProps): React.JSX.Element;

package/components/GridBottomContainer.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridBottomContainer = GridBottomContainer;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _system = require("@mui/system");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _GridAggregationRowOverlay = require("./GridAggregationRowOverlay");
+var _reexports = require("../typeOverloads/reexports");
+var _hooks = require("../hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children"];
+const useUtilityClasses = () => {
+  const slots = {
+    root: ['bottomContainer']
+  };
+  return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, {});
+};
+const Element = (0, _system.styled)('div')({
+  position: 'sticky',
+  zIndex: 40,
+  bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'
+});
+function GridBottomContainer(props) {
+  const classes = useUtilityClasses();
+  const rootProps = (0, _reexports.useGridRootProps)();
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const isLoading = (0, _xDataGridPro.useGridSelector)(apiRef, _xDataGridPro.gridRowsLoadingSelector);
+  const tree = (0, _xDataGridPro.useGridSelector)(apiRef, _xDataGridPro.gridRowTreeSelector);
+  const aggregationModel = (0, _xDataGridPro.useGridSelector)(apiRef, _hooks.gridAggregationModelSelector);
+  const aggregationPosition = rootProps.getAggregationPosition(tree[_xDataGridPro.GRID_ROOT_GROUP_ID]);
+  const hasAggregation = React.useMemo(() => Object.keys(aggregationModel).length > 0, [aggregationModel]);
+  const {
+      children
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({}, other, {
+    className: (0, _clsx.default)(classes.root, _xDataGridPro.gridClasses['container--bottom']),
+    role: "presentation",
+    children: hasAggregation && isLoading && aggregationPosition === 'footer' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridAggregationRowOverlay.GridAggregationRowOverlay, {}) : children
+  }));
+}

package/components/GridColumnMenuAggregationItem.d.ts

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
 declare function GridColumnMenuAggregationItem(props: GridColumnMenuItemProps): React.JSX.Element;
 declare namespace GridColumnMenuAggregationItem {
-    var propTypes: any;
+  var propTypes: any;
 }
-export { GridColumnMenuAggregationItem };
+export { GridColumnMenuAggregationItem };

package/components/GridColumnMenuAggregationItem.js

@@ -13,8 +13,6 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
-var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
-var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
 var _utils = require("@mui/utils");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
@@ -34,8 +32,8 @@ function GridColumnMenuAggregationItem(props) {
   const availableAggregationFunctions = React.useMemo(() => (0, _gridAggregationUtils.getAvailableAggregationFunctions)({
     aggregationFunctions: rootProps.aggregationFunctions,
     colDef,
-    isDataSource: !!rootProps.unstable_dataSource
-  }), [colDef, rootProps.aggregationFunctions, rootProps.unstable_dataSource]);
+    isDataSource: !!rootProps.dataSource
+  }), [colDef, rootProps.aggregationFunctions, rootProps.dataSource]);
   const _ref = rootProps.slotProps?.baseSelect || {},
     {
       native: isBaseSelectNative = false
@@ -51,12 +49,12 @@ function GridColumnMenuAggregationItem(props) {
       colDef,
       aggregationFunctionName,
       aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName],
-      isDataSource: !!rootProps.unstable_dataSource
+      isDataSource: !!rootProps.dataSource
     })) {
       return aggregationFunctionName;
     }
     return '';
-  }, [rootProps.aggregationFunctions, rootProps.unstable_dataSource, aggregationModel, colDef]);
+  }, [rootProps.aggregationFunctions, rootProps.dataSource, aggregationModel, colDef]);
   const handleAggregationItemChange = event => {
     const newAggregationItem = event.target?.value || undefined;
     const currentModel = (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef);
@@ -85,50 +83,42 @@ function GridColumnMenuAggregationItem(props) {
       fontSize: "small"
     }),
     onKeyDown: handleMenuItemKeyDown,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
-      size: "small",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseSelect, (0, _extends2.default)({
+      labelId: `${id}-label`,
+      id: `${id}-input`,
+      value: selectedAggregationRule,
+      label: label,
+      onChange: handleAggregationItemChange,
+      onKeyDown: handleSelectKeyDown,
+      onBlur: event => event.stopPropagation(),
+      native: isBaseSelectNative,
       fullWidth: true,
-      sx: {
+      size: "small",
+      style: {
         minWidth: 150
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
-        id: `${id}-label`,
-        htmlFor: `${id}-input`,
-        children: label
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseSelect, (0, _extends2.default)({
-        labelId: `${id}-label`,
-        inputRef: inputRef,
-        id: `${id}-input`,
-        value: selectedAggregationRule,
-        label: label,
-        color: "primary",
-        onChange: handleAggregationItemChange,
-        MenuProps: {
-          PaperProps: {
-            onKeyDown: handleSelectKeyDown
-          }
-        },
-        onBlur: event => event.stopPropagation(),
+      slotProps: {
+        htmlInput: {
+          ref: inputRef
+        }
+      }
+    }, baseSelectProps, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
         native: isBaseSelectNative,
-        fullWidth: true
-      }, baseSelectProps, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
-          native: isBaseSelectNative,
-          value: "",
-          children: "..."
-        })), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/(0, _react.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
-          key: aggFunc,
-          value: aggFunc,
-          native: isBaseSelectNative
-        }), (0, _gridAggregationUtils.getAggregationFunctionLabel)({
-          apiRef,
-          aggregationRule: {
-            aggregationFunctionName: aggFunc,
-            aggregationFunction: rootProps.aggregationFunctions[aggFunc]
-          }
-        })))]
-      }))]
-    })
+        value: "",
+        children: "..."
+      })), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/(0, _react.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+        key: aggFunc,
+        value: aggFunc,
+        native: isBaseSelectNative
+      }), (0, _gridAggregationUtils.getAggregationFunctionLabel)({
+        apiRef,
+        aggregationRule: {
+          aggregationFunctionName: aggFunc,
+          aggregationFunction: rootProps.aggregationFunctions[aggFunc]
+        }
+      })))]
+    }))
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuAggregationItem.propTypes = {