@mui/x-data-grid-premium 8.0.0-alpha.1 → 8.0.0-alpha.10

package/hooks/utils/useKeepGroupedColumnsHidden.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridApi } from '@mui/x-data-grid-pro';
 import { GridInitialStatePremium } from '../../models/gridStatePremium';
 import { DataGridPremiumProps } from '../../models/dataGridPremiumProps';
@@ -8,5 +8,5 @@ import { DataGridPremiumProps } from '../../models/dataGridPremiumProps';
  * Does not work when used with the `hide` property of `GridColDef`
  */
 export declare const useKeepGroupedColumnsHidden: (props: {
-    apiRef: React.MutableRefObject<GridApi>;
+    apiRef: RefObject<GridApi | null>;
 } & Pick<DataGridPremiumProps, "initialState" | "rowGroupingModel">) => GridInitialStatePremium;

package/hooks/utils/useKeepGroupedColumnsHidden.js

@@ -33,9 +33,9 @@ const useKeepGroupedColumnsHidden = props => {
   const initialProps = React.useRef(props);
   const rowGroupingModel = React.useRef(props.rowGroupingModel ?? props.initialState?.rowGrouping?.model);
   React.useEffect(() => {
-    props.apiRef.current.subscribeEvent('rowGroupingModelChange', newModel => {
+    props.apiRef.current?.subscribeEvent('rowGroupingModelChange', newModel => {
       const columnVisibilityModel = updateColumnVisibilityModel((0, _xDataGridPro.gridColumnVisibilityModelSelector)(props.apiRef), newModel, rowGroupingModel.current);
-      props.apiRef.current.setColumnVisibilityModel(columnVisibilityModel);
+      props.apiRef.current?.setColumnVisibilityModel(columnVisibilityModel);
       rowGroupingModel.current = newModel;
     });
   }, [props.apiRef]);

package/index.d.ts

@@ -27,3 +27,5 @@ export type { DataGridPremiumProps, GridExperimentalPremiumFeatures, } from './m
 export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';
 export type { GridApi, GridInitialState, GridState } from './typeOverloads/reexports';
 export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS, } from './components/reexports';
+export type { GridDataSourceCache } from '@mui/x-data-grid-pro';
+export type { GridGetRowsParamsPremium as GridGetRowsParams, GridGetRowsResponsePremium as GridGetRowsResponse, GridDataSourcePremium as GridDataSource, GridDataSourceApiPremium as GridDataSourceApi, GridDataSourceApiBasePremium as GridDataSourceApiBase, GridDataSourcePremiumPrivateApi as GridDataSourcePrivateApi, } from './hooks/features/dataSource/models';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v8.0.0-alpha.1
+ * @mui/x-data-grid-premium v8.0.0-alpha.10
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/models/dataGridPremiumProps.d.ts

@@ -1,19 +1,14 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridCallbackDetails, GridValidRowModel, GridGroupNode, GridEventListener } from '@mui/x-data-grid-pro';
 import { GridExperimentalProFeatures, DataGridProPropsWithDefaultValue, DataGridProPropsWithoutDefaultValue, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing, DataGridPremiumSharedPropsWithDefaultValue } from '@mui/x-data-grid-pro/internals';
 import type { GridRowGroupingModel } from '../hooks/features/rowGrouping';
-import type { GridAggregationModel, GridAggregationFunction, GridAggregationPosition } from '../hooks/features/aggregation';
+import type { GridAggregationModel, GridAggregationFunction, GridAggregationFunctionDataSource, GridAggregationPosition } from '../hooks/features/aggregation';
 import { GridPremiumSlotsComponent } from './gridPremiumSlotsComponent';
 import { GridInitialStatePremium } from './gridStatePremium';
 import { GridApiPremium } from './gridApiPremium';
 import { GridCellSelectionModel } from '../hooks/features/cellSelection';
+import { GridDataSourcePremium as GridDataSource } from '../hooks/features/dataSource/models';
 export interface GridExperimentalPremiumFeatures extends GridExperimentalProFeatures {
-    /**
-     * Enables accessibility improvements that will be enabled by default in V8.
-     * If you rely on the v7 ARIA attributes (e.g. for CSS selectors), this might be a breaking change.
-     * @default false
-     */
-    ariaV8: boolean;
 }
 export interface DataGridPremiumPropsWithComplexDefaultValueBeforeProcessing extends Pick<DataGridPropsWithComplexDefaultValueBeforeProcessing, 'localeText'> {
     /**
@@ -59,9 +54,9 @@ export interface DataGridPremiumPropsWithDefaultValue<R extends GridValidRowMode
     rowGroupingColumnMode: 'single' | 'multiple';
     /**
      * Aggregation functions available on the grid.
-     * @default GRID_AGGREGATION_FUNCTIONS
+     * @default GRID_AGGREGATION_FUNCTIONS when `unstable_dataSource` is not provided, `{}` when `unstable_dataSource` is provided
      */
-    aggregationFunctions: Record<string, GridAggregationFunction>;
+    aggregationFunctions: Record<string, GridAggregationFunction> | Record<string, GridAggregationFunctionDataSource>;
     /**
      * Rows used to generate the aggregated value.
      * If `filtered`, the aggregated values are generated using only the rows currently passing the filtering process.
@@ -89,11 +84,11 @@ export interface DataGridPremiumPropsWithDefaultValue<R extends GridValidRowMode
      */
     splitClipboardPastedText: (text: string) => string[][] | null;
 }
-export interface DataGridPremiumPropsWithoutDefaultValue<R extends GridValidRowModel = any> extends Omit<DataGridProPropsWithoutDefaultValue<R>, 'initialState' | 'apiRef'> {
+export interface DataGridPremiumPropsWithoutDefaultValue<R extends GridValidRowModel = any> extends Omit<DataGridProPropsWithoutDefaultValue<R>, 'initialState' | 'apiRef' | 'unstable_dataSource'> {
     /**
      * The ref object that allows grid manipulation. Can be instantiated with `useGridApiRef()`.
      */
-    apiRef?: React.MutableRefObject<GridApiPremium>;
+    apiRef?: RefObject<GridApiPremium | null>;
     /**
      * The initial state of the DataGridPremium.
      * The data in it is set in the state on initialization but isn't controlled.
@@ -158,4 +153,5 @@ export interface DataGridPremiumPropsWithoutDefaultValue<R extends GridValidRowM
      * For each feature, if the flag is not explicitly set to `true`, then the feature is fully disabled, and neither property nor method calls will have any effect.
      */
     experimentalFeatures?: Partial<GridExperimentalPremiumFeatures>;
+    unstable_dataSource?: GridDataSource;
 }

package/models/gridApiPremium.d.ts

@@ -1,14 +1,16 @@
 import { GridPrivateOnlyApiCommon } from '@mui/x-data-grid/internals';
-import { GridApiCommon, GridColumnPinningApi, GridDetailPanelApi, GridDetailPanelPrivateApi, GridRowPinningApi, GridRowMultiSelectionApi, GridColumnReorderApi, GridRowProApi, GridDataSourceApi, GridDataSourcePrivateApi } from '@mui/x-data-grid-pro';
+import { GridApiCommon, GridColumnPinningApi, GridDetailPanelApi, GridDetailPanelPrivateApi, GridRowPinningApi, GridRowMultiSelectionApi, GridColumnReorderApi, GridRowProApi } from '@mui/x-data-grid-pro';
 import { GridInitialStatePremium, GridStatePremium } from './gridStatePremium';
 import type { GridRowGroupingApi, GridExcelExportApi, GridAggregationApi } from '../hooks';
 import { GridCellSelectionApi } from '../hooks/features/cellSelection/gridCellSelectionInterfaces';
 import type { DataGridPremiumProcessedProps } from './dataGridPremiumProps';
+import type { GridDataSourcePremiumPrivateApi, GridDataSourceApiPremium } from '../hooks/features/dataSource/models';
+import type { GridAggregationPrivateApi } from '../hooks/features/aggregation/gridAggregationInterfaces';
 /**
  * The api of Data Grid Premium.
  * TODO: Do not redefine manually the pro features
  */
-export interface GridApiPremium extends GridApiCommon<GridStatePremium, GridInitialStatePremium>, GridRowProApi, GridColumnPinningApi, GridDetailPanelApi, GridRowGroupingApi, GridExcelExportApi, GridAggregationApi, GridRowPinningApi, GridDataSourceApi, GridCellSelectionApi, GridRowMultiSelectionApi, GridColumnReorderApi {
+export interface GridApiPremium extends GridApiCommon<GridStatePremium, GridInitialStatePremium>, GridRowProApi, GridColumnPinningApi, GridDetailPanelApi, GridRowGroupingApi, GridExcelExportApi, GridAggregationApi, GridRowPinningApi, GridDataSourceApiPremium, GridCellSelectionApi, GridRowMultiSelectionApi, GridColumnReorderApi {
 }
-export interface GridPrivateApiPremium extends GridApiPremium, GridPrivateOnlyApiCommon<GridApiPremium, GridPrivateApiPremium, DataGridPremiumProcessedProps>, GridDataSourcePrivateApi, GridDetailPanelPrivateApi {
+export interface GridPrivateApiPremium extends GridApiPremium, GridPrivateOnlyApiCommon<GridApiPremium, GridPrivateApiPremium, DataGridPremiumProcessedProps>, GridDataSourcePremiumPrivateApi, GridAggregationPrivateApi, GridDetailPanelPrivateApi {
 }

package/models/gridGroupingValueGetter.d.ts

@@ -1,3 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
 import { GridValidRowModel, GridColDef, GridKeyValue } from '@mui/x-data-grid-pro';
 import { GridApiPremium } from './gridApiPremium';
-export type GridGroupingValueGetter<R extends GridValidRowModel = GridValidRowModel, TValue = never> = (value: TValue, row: R, column: GridColDef<R>, apiRef: React.MutableRefObject<GridApiPremium>) => GridKeyValue | null | undefined;
+export type GridGroupingValueGetter<R extends GridValidRowModel = GridValidRowModel, TValue = never> = (value: TValue, row: R, column: GridColDef<R>, apiRef: RefObject<GridApiPremium>) => GridKeyValue | null | undefined;

package/models/gridPastedValueParser.d.ts

@@ -1,3 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
 import { GridColDef, GridValidRowModel } from '@mui/x-data-grid';
 import { GridApiPremium } from './gridApiPremium';
-export type GridPastedValueParser<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: string, row: R, column: GridColDef<R, V, F>, apiRef: React.MutableRefObject<GridApiPremium>) => V | undefined;
+export type GridPastedValueParser<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: string, row: R, column: GridColDef<R, V, F>, apiRef: RefObject<GridApiPremium>) => V | undefined;

package/modern/DataGridPremium/DataGridPremium.js

@@ -4,14 +4,15 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license';
-import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot, GridContextProvider } from '@mui/x-data-grid-pro';
+import { GridRoot, GridContextProvider } from '@mui/x-data-grid-pro';
 import { propValidatorsDataGrid, propValidatorsDataGridPro, validateProps } from '@mui/x-data-grid-pro/internals';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useDataGridPremiumComponent } from "./useDataGridPremiumComponent.js";
 import { useDataGridPremiumProps } from "./useDataGridPremiumProps.js";
 import { getReleaseInfo } from "../utils/releaseInfo.js";
 import { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
 import { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const configuration = {
   hooks: {
     useGridAriaAttributes,
@@ -23,7 +24,7 @@ let dataGridPremiumPropValidators;
 if (process.env.NODE_ENV !== 'production') {
   dataGridPremiumPropValidators = [...propValidatorsDataGrid, ...propValidatorsDataGridPro];
 }
-const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremium(inProps, ref) {
+const DataGridPremiumRaw = forwardRef(function DataGridPremium(inProps, ref) {
   const props = useDataGridPremiumProps(inProps);
   const privateApiRef = useDataGridPremiumComponent(props.apiRef, props);
   useLicenseVerifier('x-data-grid-premium', releaseInfo);
@@ -34,18 +35,16 @@ const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremiu
     privateApiRef: privateApiRef,
     configuration: configuration,
     props: props,
-    children: /*#__PURE__*/_jsxs(GridRoot, _extends({
+    children: /*#__PURE__*/_jsx(GridRoot, _extends({
       className: props.className,
       style: props.style,
-      sx: props.sx,
-      ref: ref
-    }, props.forwardedProps, {
-      children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
-        children: /*#__PURE__*/_jsx(Watermark, {
-          packageName: "x-data-grid-premium",
-          releaseInfo: releaseInfo
-        })
-      }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
+      sx: props.sx
+    }, props.slotProps?.root, {
+      ref: ref,
+      children: /*#__PURE__*/_jsx(Watermark, {
+        packageName: "x-data-grid-premium",
+        releaseInfo: releaseInfo
+      })
     }))
   });
 });
@@ -56,7 +55,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * Aggregation functions available on the grid.
-   * @default GRID_AGGREGATION_FUNCTIONS
+   * @default GRID_AGGREGATION_FUNCTIONS when `unstable_dataSource` is not provided, `{}` when `unstable_dataSource` is provided
    */
   aggregationFunctions: PropTypes.object,
   /**
@@ -74,7 +73,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.
@@ -109,6 +108,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   autosizeOptions: PropTypes.shape({
     columns: PropTypes.arrayOf(PropTypes.string),
+    disableColumnVirtualization: PropTypes.bool,
     expand: PropTypes.bool,
     includeHeaders: PropTypes.bool,
     includeOutliers: PropTypes.bool,
@@ -186,7 +186,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   /**
    * The row ids to show the detail panel.
    */
-  detailPanelExpandedRowIds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired),
+  detailPanelExpandedRowIds: PropTypes /* @typescript-to-proptypes-ignore */.instanceOf(Set),
   /**
    * If `true`, aggregation is disabled.
    * @default false
@@ -304,7 +304,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, then the feature is fully disabled, and neither property nor method calls will have any effect.
    */
   experimentalFeatures: PropTypes.shape({
-    ariaV8: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
   /**
@@ -333,11 +332,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
     quickFilterValues: PropTypes.array
   }),
-  /**
-   * Forwarded props for the Data Grid root element.
-   * @ignore - do not document.
-   */
-  forwardedProps: PropTypes.object,
   /**
    * Determines the position of an aggregated value.
    * @param {GridGroupNode} groupNode The current group.
@@ -452,14 +446,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     clipboardExport: PropTypes.bool,
     csvExport: PropTypes.bool
   }), PropTypes.bool]),
-  /**
-   * If `select`, a group header checkbox in indeterminate state (like "Select All" checkbox)
-   * will select all the rows under it.
-   * If `deselect`, it will deselect all the rows under it.
-   * Works only if `checkboxSelection` is enabled.
-   * @default "deselect"
-   */
-  indeterminateCheckboxAction: PropTypes.oneOf(['deselect', 'select']),
   /**
    * The initial state of the DataGridPremium.
    * The data in it is set in the state on initialization but isn't controlled.
@@ -927,14 +913,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Controls the modes of the rows.
    */
   rowModesModel: PropTypes.object,
-  /**
-   * The milliseconds delay to wait after measuring the row height before recalculating row positions.
-   * Setting it to a lower value could be useful when using dynamic row height,
-   * but might reduce performance when displaying a large number of rows.
-   * @default 166
-   * @deprecated
-   */
-  rowPositionsDebounceMs: PropTypes.number,
   /**
    * If `true`, the reordering of rows is enabled.
    * @default false
@@ -964,7 +942,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * - Deselecting a descendant of a selected parent deselects the parent automatically.
    *
    * Works with tree data and row grouping on the client-side only.
-   * @default { parents: false, descendants: false }
+   * @default { parents: true, descendants: true }
    */
   rowSelectionPropagation: PropTypes.shape({
     descendants: PropTypes.bool,
@@ -974,7 +952,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Loading rows can be processed on the server or client-side.
    * 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"
+   * @default "client"
    */
   rowsLoadingMode: PropTypes.oneOf(['client', 'server']),
   /**
@@ -982,12 +960,18 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default "margin"
    */
   rowSpacingType: PropTypes.oneOf(['border', 'margin']),
+  /**
+   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * @default false
+   */
+  rowSpanning: PropTypes.bool,
   /**
    * Override the height/width of the Data Grid inner scrollbar.
    */
   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.
    * @default 80
    */
   scrollEndThreshold: PropTypes.number,
@@ -1051,6 +1035,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   treeData: PropTypes.bool,
   unstable_dataSource: PropTypes.shape({
+    getAggregatedValue: PropTypes.func,
     getChildrenCount: PropTypes.func,
     getGroupKey: PropTypes.func,
     getRows: PropTypes.func.isRequired,
@@ -1061,6 +1046,18 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     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.
    */
@@ -1078,10 +1075,13 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   unstable_listView: PropTypes.bool,
   unstable_onDataSourceError: PropTypes.func,
   /**
-   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * 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.
+   * For datasets with a large number of columns, this can cause performance issues.
+   * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally.
    * @default false
    */
-  unstable_rowSpanning: PropTypes.bool
+  virtualizeColumnsWithAutoRowHeight: PropTypes.bool
 } : void 0;
 /**
  * Demos:

package/modern/DataGridPremium/useDataGridPremiumComponent.js

@@ -1,4 +1,5 @@
-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, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, useGridDataSource, 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 } 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";
 import { useGridAggregationPreProcessors } from "../hooks/features/aggregation/useGridAggregationPreProcessors.js";
@@ -42,6 +43,7 @@ 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(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
@@ -52,7 +54,6 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnReorderStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
-  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
@@ -63,6 +64,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridHeaderFiltering(apiRef, props);
   useGridTreeData(apiRef, props);
   useGridAggregation(apiRef, props);
+  useGridDataSource(apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);
   useGridCellSelection(apiRef, props);
@@ -90,6 +92,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridScroll(apiRef, props);
   useGridInfiniteLoader(apiRef, props);
   useGridLazyLoader(apiRef, props);
+  useGridDataSourceLazyLoader(apiRef, props);
   useGridColumnMenu(apiRef);
   useGridCsvExport(apiRef, props);
   useGridPrintExport(apiRef, props);
@@ -98,7 +101,6 @@ 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.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { DATA_GRID_PRO_PROPS_DEFAULT_VALUES, GRID_DEFAULT_LOCALE_TEXT, GridSignature } from '@mui/x-data-grid-pro';
-import { computeSlots, useProps } from '@mui/x-data-grid-pro/internals';
+import { computeSlots } from '@mui/x-data-grid-pro/internals';
 import { GRID_AGGREGATION_FUNCTIONS } from "../hooks/features/aggregation/index.js";
 import { DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS } from "../constants/dataGridPremiumDefaultSlotsComponents.js";
 const getDataGridPremiumForcedProps = themedProps => _extends({
@@ -34,18 +34,20 @@ export const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PRO
 });
 const defaultSlots = DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridPremiumProps = inProps => {
-  const themedProps = useProps(
+  const themedProps =
   // eslint-disable-next-line material-ui/mui-name-matches-component-name
   useThemeProps({
     props: inProps,
     name: 'MuiDataGrid'
-  }));
+  });
   const localeText = React.useMemo(() => _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
   const slots = React.useMemo(() => computeSlots({
     defaultSlots,
     slots: themedProps.slots
   }), [themedProps.slots]);
-  return React.useMemo(() => _extends({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps, {
+  return React.useMemo(() => _extends({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps.unstable_dataSource ? {
+    aggregationFunctions: {}
+  } : {}, themedProps, {
     localeText,
     slots
   }, getDataGridPremiumForcedProps(themedProps)), [themedProps, localeText, slots]);

package/modern/components/GridAggregationHeader.js

@@ -12,7 +12,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',

package/modern/components/GridColumnMenuAggregationItem.js

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["native"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGridSelector } from '@mui/x-data-grid-pro';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 import { unstable_useId as useId } from '@mui/utils';
@@ -14,18 +13,27 @@ import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { canColumnHaveAggregationFunction, getAggregationFunctionLabel, getAvailableAggregationFunctions } from "../hooks/features/aggregation/gridAggregationUtils.js";
 import { gridAggregationModelSelector } from "../hooks/features/aggregation/gridAggregationSelectors.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 function GridColumnMenuAggregationItem(props) {
   const {
     colDef
   } = props;
   const apiRef = useGridApiContext();
+  const inputRef = React.useRef(null);
   const rootProps = useGridRootProps();
   const id = useId();
   const aggregationModel = useGridSelector(apiRef, gridAggregationModelSelector);
   const availableAggregationFunctions = React.useMemo(() => getAvailableAggregationFunctions({
     aggregationFunctions: rootProps.aggregationFunctions,
-    colDef
-  }), [colDef, rootProps.aggregationFunctions]);
+    colDef,
+    isDataSource: !!rootProps.unstable_dataSource
+  }), [colDef, rootProps.aggregationFunctions, rootProps.unstable_dataSource]);
+  const _ref = rootProps.slotProps?.baseSelect || {},
+    {
+      native: isBaseSelectNative = false
+    } = _ref,
+    baseSelectProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const selectedAggregationRule = React.useMemo(() => {
     if (!colDef || !aggregationModel[colDef.field]) {
       return '';
@@ -34,12 +42,13 @@ function GridColumnMenuAggregationItem(props) {
     if (canColumnHaveAggregationFunction({
       colDef,
       aggregationFunctionName,
-      aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName]
+      aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName],
+      isDataSource: !!rootProps.unstable_dataSource
     })) {
       return aggregationFunctionName;
     }
     return '';
-  }, [rootProps.aggregationFunctions, aggregationModel, colDef]);
+  }, [rootProps.aggregationFunctions, rootProps.unstable_dataSource, aggregationModel, colDef]);
   const handleAggregationItemChange = event => {
     const newAggregationItem = event.target?.value || undefined;
     const currentModel = gridAggregationModelSelector(apiRef);
@@ -52,47 +61,66 @@ function GridColumnMenuAggregationItem(props) {
     apiRef.current.hideColumnMenu();
   };
   const label = apiRef.current.getLocaleText('aggregationMenuItemHeader');
-  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
-    disableRipple: true,
-    children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuAggregationIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      children: /*#__PURE__*/_jsxs(FormControl, {
-        size: "small",
-        fullWidth: true,
-        sx: {
-          minWidth: 150
+  const handleMenuItemKeyDown = React.useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      inputRef.current.focus();
+    }
+  }, []);
+  const handleSelectKeyDown = React.useCallback(event => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === ' ') {
+      event.stopPropagation();
+    }
+  }, []);
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
+    inert: true,
+    iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuAggregationIcon, {
+      fontSize: "small"
+    }),
+    onKeyDown: handleMenuItemKeyDown,
+    children: /*#__PURE__*/_jsxs(FormControl, {
+      size: "small",
+      fullWidth: true,
+      sx: {
+        minWidth: 150
+      },
+      children: [/*#__PURE__*/_jsx(InputLabel, {
+        id: `${id}-label`,
+        htmlFor: `${id}-input`,
+        children: label
+      }), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, _extends({
+        labelId: `${id}-label`,
+        inputRef: inputRef,
+        id: `${id}-input`,
+        value: selectedAggregationRule,
+        label: label,
+        color: "primary",
+        onChange: handleAggregationItemChange,
+        MenuProps: {
+          PaperProps: {
+            onKeyDown: handleSelectKeyDown
+          }
         },
-        children: [/*#__PURE__*/_jsx(InputLabel, {
-          id: `${id}-label`,
-          children: label
-        }), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, {
-          labelId: `${id}-label`,
-          id: `${id}-input`,
-          value: selectedAggregationRule,
-          label: label,
-          color: "primary",
-          onChange: handleAggregationItemChange,
-          onBlur: event => event.stopPropagation(),
-          fullWidth: true,
-          children: [/*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
-            value: "",
-            children: "..."
-          }), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
-            value: aggFunc,
-            children: getAggregationFunctionLabel({
-              apiRef,
-              aggregationRule: {
-                aggregationFunctionName: aggFunc,
-                aggregationFunction: rootProps.aggregationFunctions[aggFunc]
-              }
-            })
-          }, aggFunc))]
-        })]
-      })
-    })]
+        onBlur: event => event.stopPropagation(),
+        native: isBaseSelectNative,
+        fullWidth: true
+      }, baseSelectProps, {
+        children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          value: "",
+          children: "..."
+        })), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+          key: aggFunc,
+          value: aggFunc,
+          native: isBaseSelectNative
+        }), getAggregationFunctionLabel({
+          apiRef,
+          aggregationRule: {
+            aggregationFunctionName: aggFunc,
+            aggregationFunction: rootProps.aggregationFunctions[aggFunc]
+          }
+        })))]
+      }))]
+    })
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuAggregationItem.propTypes = {