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

package/models/gridPremiumIconSlotsComponent.d.ts

@@ -1,28 +1,28 @@
 import * as React from 'react';
 export interface GridPremiumIconSlotsComponent {
-    /**
-     * Icon displayed in column menu for ungrouping
-     * @default GridWorkspacesIcon
-     */
-    columnMenuUngroupIcon: React.JSXElementConstructor<any>;
-    /**
-     * Icon displayed in column menu for grouping
-     * @default GridGroupWorkIcon
-     */
-    columnMenuGroupIcon: React.JSXElementConstructor<any>;
-    /**
-     * Icon displayed in column menu for aggregation
-     * @default GridFunctionsIcon
-     */
-    columnMenuAggregationIcon: React.JSXElementConstructor<any>;
-    /**
-     * Icon used for the button that sends a prompt
-     * @default GridFunctionsIcon
-     */
-    toolbarPromptSendIcon: React.JSXElementConstructor<any>;
-    /**
-     * Icon used for the button that starts/stops recording the prompt
-     * @default GridFunctionsIcon
-     */
-    toolbarPromptRecordIcon: React.JSXElementConstructor<any>;
-}
+  /**
+   * Icon displayed in column menu for ungrouping
+   * @default GridWorkspacesIcon
+   */
+  columnMenuUngroupIcon: React.JSXElementConstructor<any>;
+  /**
+   * Icon displayed in column menu for grouping
+   * @default GridGroupWorkIcon
+   */
+  columnMenuGroupIcon: React.JSXElementConstructor<any>;
+  /**
+   * Icon displayed in column menu for aggregation
+   * @default GridFunctionsIcon
+   */
+  columnMenuAggregationIcon: React.JSXElementConstructor<any>;
+  /**
+   * Icon used for the button that sends a prompt
+   * @default GridFunctionsIcon
+   */
+  toolbarPromptSendIcon: React.JSXElementConstructor<any>;
+  /**
+   * Icon used for the button that starts/stops recording the prompt
+   * @default GridFunctionsIcon
+   */
+  toolbarPromptRecordIcon: React.JSXElementConstructor<any>;
+}

package/models/gridPremiumSlotsComponent.d.ts

@@ -1,8 +1,7 @@
 import { GridProSlotsComponent } from '@mui/x-data-grid-pro';
-import { GridPremiumIconSlotsComponent } from './gridPremiumIconSlotsComponent';
+import { GridPremiumIconSlotsComponent } from "./gridPremiumIconSlotsComponent.js";
 /**
  * Grid components React prop interface containing all the overridable components
  * for Premium package
  */
-export interface GridPremiumSlotsComponent extends GridProSlotsComponent, GridPremiumIconSlotsComponent {
-}
+export interface GridPremiumSlotsComponent extends GridProSlotsComponent, GridPremiumIconSlotsComponent {}

package/models/gridStatePremium.d.ts

@@ -4,15 +4,15 @@ import type { GridRowGroupingState, GridRowGroupingInitialState, GridAggregation
  * The state of Data Grid Premium.
  */
 export interface GridStatePremium extends GridStatePro {
-    rowGrouping: GridRowGroupingState;
-    aggregation: GridAggregationState;
-    cellSelection: GridCellSelectionModel;
+  rowGrouping: GridRowGroupingState;
+  aggregation: GridAggregationState;
+  cellSelection: GridCellSelectionModel;
 }
 /**
  * The initial state of Data Grid Premium.
  */
 export interface GridInitialStatePremium extends GridInitialStatePro {
-    rowGrouping?: GridRowGroupingInitialState;
-    aggregation?: GridAggregationInitialState;
-    cellSelection?: GridCellSelectionModel;
-}
+  rowGrouping?: GridRowGroupingInitialState;
+  aggregation?: GridAggregationInitialState;
+  cellSelection?: GridCellSelectionModel;
+}

package/models/index.d.ts

@@ -1,4 +1,4 @@
-export * from './gridGroupingValueGetter';
-export * from './gridPremiumIconSlotsComponent';
-export * from './gridPremiumSlotsComponent';
-export * from './gridPastedValueParser';
+export * from "./gridGroupingValueGetter.js";
+export * from "./gridPremiumIconSlotsComponent.js";
+export * from "./gridPremiumSlotsComponent.js";
+export * from "./gridPastedValueParser.js";

package/modern/DataGridPremium/DataGrid.d.ts

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

package/modern/DataGridPremium/DataGridPremium.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { GridValidRowModel } from '@mui/x-data-grid-pro';
+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;
+}
+/**
+ * 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;

package/modern/DataGridPremium/DataGridPremium.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license';
 import { GridRoot, GridContextProvider } from '@mui/x-data-grid-pro';
 import { propValidatorsDataGrid, propValidatorsDataGridPro, validateProps } from '@mui/x-data-grid-pro/internals';
+import { useMaterialCSSVariables } from '@mui/x-data-grid/material';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useDataGridPremiumComponent } from "./useDataGridPremiumComponent.js";
 import { useDataGridPremiumProps } from "./useDataGridPremiumProps.js";
@@ -15,11 +16,16 @@ import { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaA
 import { jsx as _jsx } from "react/jsx-runtime";
 const configuration = {
   hooks: {
+    useCSSVariables: useMaterialCSSVariables,
     useGridAriaAttributes,
     useGridRowAriaAttributes
   }
 };
 const releaseInfo = getReleaseInfo();
+const watermark = /*#__PURE__*/_jsx(Watermark, {
+  packageName: "x-data-grid-premium",
+  releaseInfo: releaseInfo
+});
 let dataGridPremiumPropValidators;
 if (process.env.NODE_ENV !== 'production') {
   dataGridPremiumPropValidators = [...propValidatorsDataGrid, ...propValidatorsDataGridPro];
@@ -41,10 +47,7 @@ const DataGridPremiumRaw = forwardRef(function DataGridPremium(inProps, ref) {
       sx: props.sx
     }, props.slotProps?.root, {
       ref: ref,
-      children: /*#__PURE__*/_jsx(Watermark, {
-        packageName: "x-data-grid-premium",
-        releaseInfo: releaseInfo
-      })
+      children: watermark
     }))
   });
 });
@@ -55,7 +58,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.object,
   /**
@@ -73,7 +76,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * The ref object that allows grid manipulation. Can be instantiated with `useGridApiRef()`.
    */
   apiRef: PropTypes.shape({
-    current: PropTypes.object.isRequired
+    current: PropTypes.object
   }),
   /**
    * The label of the Data Grid.
@@ -172,6 +175,24 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * If defined, the Data Grid will ignore the `hide` property in [[GridColDef]].
    */
   columnVisibilityModel: PropTypes.object,
+  /**
+   * Data source object.
+   */
+  dataSource: PropTypes.shape({
+    getAggregatedValue: PropTypes.func,
+    getChildrenCount: PropTypes.func,
+    getGroupKey: PropTypes.func,
+    getRows: PropTypes.func.isRequired,
+    updateRow: PropTypes.func
+  }),
+  /**
+   * Data source cache object.
+   */
+  dataSourceCache: PropTypes.shape({
+    clear: PropTypes.func.isRequired,
+    get: PropTypes.func.isRequired,
+    set: PropTypes.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.
@@ -380,6 +401,8 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   getRowHeight: PropTypes.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.func,
   /**
@@ -484,6 +507,18 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default false
    */
   keepNonExistentRowsSelected: PropTypes.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.bool,
+  /**
+   * If positive, the Data Grid will throttle data source requests on rendered rows interval change.
+   * @default 500
+   */
+  lazyLoadingRequestThrottleMs: PropTypes.number,
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -660,6 +695,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnWidthChange: PropTypes.func,
+  /**
+   * Callback fired when a data source request fails.
+   * @param {GridGetRowsError | GridUpdateRowError} error The data source error object.
+   */
+  onDataSourceError: PropTypes.func,
   /**
    * Callback fired when the density changes.
    * @param {GridDensity} density New density value.
@@ -681,6 +721,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.func,
   /**
@@ -808,6 +849,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.func,
   /**
@@ -931,7 +973,10 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   /**
    * Sets the row selection model of the Data Grid.
    */
-  rowSelectionModel: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), PropTypes.number, PropTypes.string]),
+  rowSelectionModel: PropTypes /* @typescript-to-proptypes-ignore */.shape({
+    ids: PropTypes.instanceOf(Set).isRequired,
+    type: PropTypes.oneOf(['exclude', 'include']).isRequired
+  }),
   /**
    * When `rowSelectionPropagation.descendants` is set to `true`.
    * - Selecting a parent selects all its filtered descendants automatically.
@@ -953,6 +998,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.oneOf(['client', 'server']),
   /**
@@ -971,7 +1017,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   scrollbarSize: PropTypes.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.number,
@@ -985,6 +1031,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default false
    */
   showColumnVerticalBorder: PropTypes.bool,
+  /**
+   * If `true`, the toolbar is displayed.
+   * @default false
+   */
+  showToolbar: PropTypes.bool,
   /**
    * Overridable components props dynamically passed to the component at rendering.
    */
@@ -1034,30 +1085,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default false
    */
   treeData: PropTypes.bool,
-  unstable_dataSource: PropTypes.shape({
-    getAggregatedValue: PropTypes.func,
-    getChildrenCount: PropTypes.func,
-    getGroupKey: PropTypes.func,
-    getRows: PropTypes.func.isRequired,
-    updateRow: PropTypes.func
-  }),
-  unstable_dataSourceCache: PropTypes.shape({
-    clear: PropTypes.func.isRequired,
-    get: PropTypes.func.isRequired,
-    set: PropTypes.func.isRequired
-  }),
-  /**
-   * 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.bool,
-  /**
-   * If positive, the Data Grid will throttle data source requests on rendered rows interval change.
-   * @default 500
-   */
-  unstable_lazyLoadingRequestThrottleMs: PropTypes.number,
   /**
    * Definition of the column rendered when the `unstable_listView` prop is enabled.
    */
@@ -1073,7 +1100,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Use in combination with `unstable_listColumn`.
    */
   unstable_listView: PropTypes.bool,
-  unstable_onDataSourceError: PropTypes.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.
@@ -1084,8 +1110,8 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   virtualizeColumnsWithAutoRowHeight: PropTypes.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/modern/DataGridPremium/index.d.ts

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

package/modern/DataGridPremium/useDataGridPremiumComponent.d.ts

@@ -0,0 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
+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/modern/DataGridPremium/useDataGridPremiumComponent.js

@@ -1,4 +1,4 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridLazyLoader, useGridLazyLoaderPreProcessors, useGridDataSourceLazyLoader, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, dataSourceStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer } from '@mui/x-data-grid-pro/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridLazyLoader, useGridLazyLoaderPreProcessors, useGridDataSourceLazyLoader, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, dataSourceStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer } from '@mui/x-data-grid-pro/internals';
 import { useGridDataSourcePremium as useGridDataSource } from "../hooks/features/dataSource/useGridDataSourcePremium.js";
 // Premium-only features
 import { useGridAggregation, aggregationStateInitializer } from "../hooks/features/aggregation/useGridAggregation.js";
@@ -33,7 +33,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
-  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
+  useGridInitializeState(propsStateInitializer, apiRef, props);
   useGridInitializeState(headerFilteringStateInitializer, apiRef, props);
   useGridInitializeState(rowGroupingStateInitializer, apiRef, props);
   useGridInitializeState(aggregationStateInitializer, apiRef, props);
@@ -43,8 +43,8 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(rowPinningStateInitializer, apiRef, props);
-  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, apiRef, props);
@@ -54,16 +54,16 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnReorderStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
-  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(virtualizationStateInitializer, apiRef, props);
   useGridInitializeState(dataSourceStateInitializer, apiRef, props);
+  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
+  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
   useGridRowGrouping(apiRef, props);
   useGridHeaderFiltering(apiRef, props);
   useGridTreeData(apiRef, props);
-  useGridDataSource(apiRef, props);
   useGridAggregation(apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);
@@ -101,6 +101,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridDimensions(apiRef, props);
   useGridEvents(apiRef, props);
   useGridStatePersistence(apiRef);
+  useGridDataSource(apiRef, props);
   useGridVirtualization(apiRef, props);
   useGridListView(apiRef, props);
   return apiRef;

package/modern/DataGridPremium/useDataGridPremiumProps.d.ts

@@ -0,0 +1,6 @@
+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;

package/modern/DataGridPremium/useDataGridPremiumProps.js

@@ -7,7 +7,7 @@ import { GRID_AGGREGATION_FUNCTIONS } from "../hooks/features/aggregation/index.
 import { DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS } from "../constants/dataGridPremiumDefaultSlotsComponents.js";
 const getDataGridPremiumForcedProps = themedProps => _extends({
   signature: GridSignature.DataGridPremium
-}, themedProps.unstable_dataSource ? {
+}, themedProps.dataSource ? {
   filterMode: 'server',
   sortingMode: 'server',
   paginationMode: 'server'
@@ -45,7 +45,7 @@ export const useDataGridPremiumProps = inProps => {
     defaultSlots,
     slots: themedProps.slots
   }), [themedProps.slots]);
-  return React.useMemo(() => _extends({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps.unstable_dataSource ? {
+  return React.useMemo(() => _extends({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps.dataSource ? {
     aggregationFunctions: {}
   } : {}, themedProps, {
     localeText,

package/modern/components/GridAggregationHeader.d.ts

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

package/modern/components/GridAggregationHeader.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/material/styles';
 import { getDataGridUtilityClass, gridClasses, GridColumnHeaderTitle } from '@mui/x-data-grid';
+import { vars } from '@mui/x-data-grid/internals';
 import { getAggregationFunctionLabel } from "../hooks/features/aggregation/gridAggregationUtils.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
@@ -12,7 +13,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridAggregationHeaderRoot = 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',
@@ -25,17 +31,12 @@ const GridAggregationHeaderRoot = styled('div', {
 });
 const GridAggregationFunctionLabel = 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: vars.typography.font.small,
+  lineHeight: 'normal',
+  color: vars.colors.foreground.muted,
+  marginTop: -1
 });
 const useUtilityClasses = ownerState => {
   const {

package/modern/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/modern/components/GridAggregationRowOverlay.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import composeClasses from '@mui/utils/composeClasses';
+import { getDataGridUtilityClass, useGridRootProps } from '@mui/x-data-grid-pro';
+import { GridSkeletonLoadingOverlayInner, useGridSelector } from '@mui/x-data-grid-pro/internals';
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { gridAggregationModelSelector } from "../hooks/features/aggregation/gridAggregationSelectors.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['aggregationRowOverlayWrapper']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridAggregationRowOverlay = forwardRef(function GridAggregationRowOverlay(props, forwardedRef) {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses({
+    classes: rootProps.classes
+  });
+  const aggregationModel = useGridSelector(apiRef, gridAggregationModelSelector);
+  const visibleColumns = new Set(Object.keys(aggregationModel));
+  return /*#__PURE__*/_jsx("div", {
+    className: classes.root,
+    children: /*#__PURE__*/_jsx(GridSkeletonLoadingOverlayInner, _extends({}, props, {
+      skeletonRowsCount: 1,
+      visibleColumns: visibleColumns,
+      showFirstRowBorder: true,
+      ref: forwardedRef
+    }))
+  });
+});
+export { GridAggregationRowOverlay };

package/modern/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/modern/components/GridBottomContainer.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["children"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/system';
+import composeClasses from '@mui/utils/composeClasses';
+import { gridClasses, getDataGridUtilityClass, useGridSelector, gridRowsLoadingSelector, gridRowTreeSelector, GRID_ROOT_GROUP_ID } from '@mui/x-data-grid-pro';
+import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
+import { GridAggregationRowOverlay } from "./GridAggregationRowOverlay.js";
+import { useGridRootProps } from "../typeOverloads/reexports.js";
+import { gridAggregationModelSelector } from "../hooks/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = () => {
+  const slots = {
+    root: ['bottomContainer']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, {});
+};
+const Element = styled('div')({
+  position: 'sticky',
+  zIndex: 40,
+  bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'
+});
+export function GridBottomContainer(props) {
+  const classes = useUtilityClasses();
+  const rootProps = useGridRootProps();
+  const apiRef = useGridPrivateApiContext();
+  const isLoading = useGridSelector(apiRef, gridRowsLoadingSelector);
+  const tree = useGridSelector(apiRef, gridRowTreeSelector);
+  const aggregationModel = useGridSelector(apiRef, gridAggregationModelSelector);
+  const aggregationPosition = rootProps.getAggregationPosition(tree[GRID_ROOT_GROUP_ID]);
+  const hasAggregation = React.useMemo(() => Object.keys(aggregationModel).length > 0, [aggregationModel]);
+  const {
+      children
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/_jsx(Element, _extends({}, other, {
+    className: clsx(classes.root, gridClasses['container--bottom']),
+    role: "presentation",
+    children: hasAggregation && isLoading && aggregationPosition === 'footer' ? /*#__PURE__*/_jsx(GridAggregationRowOverlay, {}) : children
+  }));
+}

package/modern/components/GridColumnMenuAggregationItem.d.ts

@@ -0,0 +1,7 @@
+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;
+}
+export { GridColumnMenuAggregationItem };