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

package/components/promptControl/GridToolbarPromptControl.d.ts

@@ -1,26 +1,26 @@
 import * as React from 'react';
-import { PromptResponse } from '../../hooks/features/promptControl/types';
+import { PromptResponse } from "../../hooks/features/promptControl/types.js";
 type GridToolbarPromptControlProps = {
-    /**
-     * Called when the new prompt is ready to be processed.
-     * Provides the prompt and the data context and expects the grid state updates to be returned.
-     * @param {string} context The context of the prompt
-     * @param {string} query The query to process
-     * @returns {Promise<PromptResponse>} The grid state updates
-     */
-    onPrompt: (context: string, query: string) => Promise<PromptResponse>;
-    /**
-     * Allow taking couple of random cell values from each column to improve the prompt context.
-     * If allowed, samples are taken from different rows.
-     * If not allowed, the column examples are used.
-     * @default false
-     */
-    allowDataSampling?: boolean;
-    /**
-     * The BCP 47 language tag to use for the speech recognition.
-     * @default HTML lang attribute value or the user agent's language setting
-     */
-    lang?: string;
+  /**
+   * Called when the new prompt is ready to be processed.
+   * Provides the prompt and the data context and expects the grid state updates to be returned.
+   * @param {string} context The context of the prompt
+   * @param {string} query The query to process
+   * @returns {Promise<PromptResponse>} The grid state updates
+   */
+  onPrompt: (context: string, query: string) => Promise<PromptResponse>;
+  /**
+   * Allow taking couple of random cell values from each column to improve the prompt context.
+   * If allowed, samples are taken from different rows.
+   * If not allowed, the column examples are used.
+   * @default false
+   */
+  allowDataSampling?: boolean;
+  /**
+   * The BCP 47 language tag to use for the speech recognition.
+   * @default HTML lang attribute value or the user agent's language setting
+   */
+  lang?: string;
 };
 declare function GridToolbarPromptControl(props: GridToolbarPromptControlProps): React.JSX.Element;
-export { GridToolbarPromptControl };
+export { GridToolbarPromptControl };

package/components/promptControl/GridToolbarPromptControl.js

@@ -18,9 +18,10 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _RecordButton = require("./RecordButton");
 var _jsxRuntime = require("react/jsx-runtime");
 const supportsSpeechRecognition = !!_RecordButton.BrowserSpeechRecognition;
-const useUtilityClasses = (ownerState, recording) => {
+const useUtilityClasses = ownerState => {
   const {
-    classes
+    classes,
+    recording
   } = ownerState;
   const slots = {
     root: ['toolbarPromptControl', recording && 'toolbarPromptControl--recording'],
@@ -33,7 +34,12 @@ const useUtilityClasses = (ownerState, recording) => {
 const GridToolbarPromptControlRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ToolbarPromptControl',
-  overridesResolver: (_, styles) => styles.toolbarPromptControl
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.toolbarPromptControl, ownerState.recording && styles['toolbarPromptControl--recording']];
+  }
 })({
   flex: 1,
   display: 'flex',
@@ -79,7 +85,11 @@ function GridToolbarPromptControl(props) {
   const [error, setError] = React.useState(null);
   const [isRecording, setRecording] = React.useState(false);
   const [query, setQuery] = React.useState('');
-  const classes = useUtilityClasses(rootProps, isRecording);
+  const ownerState = {
+    classes: rootProps.classes,
+    recording: isRecording
+  };
+  const classes = useUtilityClasses(ownerState);
   const examplesFromData = React.useMemo(() => allowDataSampling ? sampleData(apiRef) : undefined, [apiRef, allowDataSampling]);
   const processPrompt = React.useCallback(() => {
     const context = generateContext(apiRef, examplesFromData);
@@ -117,10 +127,18 @@ function GridToolbarPromptControl(props) {
         sort: s.direction
       })));
       const rows = (0, _internals.getVisibleRows)(apiRef, rootProps);
-      const selectedRowIds = result.select === -1 ? [] : rows.rows.slice(0, result.select).map(r => {
-        return apiRef.current.getRowId(r);
-      });
-      apiRef.current.setRowSelectionModel(selectedRowIds);
+      const rowSelectionModel = {
+        type: 'include',
+        ids: new Set()
+      };
+      if (result.select !== -1) {
+        for (let i = 0; i < result.select; i += 1) {
+          const row = rows.rows[i];
+          const id = apiRef.current.getRowId(row);
+          rowSelectionModel.ids.add(id);
+        }
+      }
+      apiRef.current.setRowSelectionModel(rowSelectionModel);
       const columns = apiRef.current.getAllColumns();
       const targetIndex = Number(columns.find(c => c.field === _xDataGrid.GRID_CHECKBOX_SELECTION_FIELD) !== undefined) + Number(result.grouping.length);
       interestColumns.push(...Object.keys(result.aggregation));
@@ -153,10 +171,9 @@ function GridToolbarPromptControl(props) {
   });
   const placeholder = supportsSpeechRecognition ? apiRef.current.getLocaleText('toolbarPromptControlWithRecordingPlaceholder') : apiRef.current.getLocaleText('toolbarPromptControlPlaceholder');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarPromptControlRoot, {
-    ownerState: rootProps,
+    ownerState: ownerState,
     className: classes.root,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, {
-      variant: "outlined",
       placeholder: isRecording ? apiRef.current.getLocaleText('toolbarPromptControlRecordingPlaceholder') : placeholder,
       "aria-label": apiRef.current.getLocaleText('toolbarPromptControlLabel'),
       disabled: isLoading,
@@ -169,10 +186,9 @@ function GridToolbarPromptControl(props) {
       onKeyDown: handleKeyDown,
       error: !!error,
       helperText: error,
-      InputProps: {
-        startAdornment: supportsSpeechRecognition && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
-          position: "start",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RecordButton.RecordButton, {
+      slotProps: {
+        input: {
+          startAdornment: supportsSpeechRecognition && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RecordButton.RecordButton, {
             className: classes.recordButton,
             lang: lang,
             recording: isRecording,
@@ -181,11 +197,8 @@ function GridToolbarPromptControl(props) {
             onUpdate: setQuery,
             onDone: handleDone,
             onError: setError
-          })
-        }),
-        endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
-          position: "end",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+          }),
+          endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
             title: apiRef.current.getLocaleText('toolbarPromptControlSendActionLabel'),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, {
@@ -202,7 +215,7 @@ function GridToolbarPromptControl(props) {
               })
             })
           })
-        })
+        }
       }
     })
   });

package/components/promptControl/RecordButton.d.ts

@@ -1,16 +1,16 @@
 import * as React from 'react';
 export declare const BrowserSpeechRecognition: any;
 type SpeechRecognitionOptions = {
-    onUpdate: (value: string) => void;
-    onDone: (value: string) => void;
-    onError: (error: string) => void;
+  onUpdate: (value: string) => void;
+  onDone: (value: string) => void;
+  onError: (error: string) => void;
 };
 interface RecordButtonProps extends SpeechRecognitionOptions {
-    disabled: boolean;
-    lang?: string;
-    recording: boolean;
-    setRecording: (value: boolean) => void;
-    className: string;
+  disabled: boolean;
+  lang?: string;
+  recording: boolean;
+  setRecording: (value: boolean) => void;
+  className: string;
 }
 declare function RecordButton(props: RecordButtonProps): React.JSX.Element;
-export { RecordButton };
+export { RecordButton };

package/components/promptControl/index.d.ts

@@ -1 +1 @@
-export { GridToolbarPromptControl as Unstable_GridToolbarPromptControl } from './GridToolbarPromptControl';
+export { GridToolbarPromptControl as Unstable_GridToolbarPromptControl } from "./GridToolbarPromptControl.js";

package/components/reexports.d.ts

@@ -1 +1 @@
-export { GridPremiumColumnMenu as GridColumnMenu, GRID_COLUMN_MENU_SLOTS_PREMIUM as GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM as GRID_COLUMN_MENU_SLOT_PROPS, } from './GridPremiumColumnMenu';
+export { GridPremiumColumnMenu as GridColumnMenu, GRID_COLUMN_MENU_SLOTS_PREMIUM as GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM as GRID_COLUMN_MENU_SLOT_PROPS } from "./GridPremiumColumnMenu.js";

package/constants/dataGridPremiumDefaultSlotsComponents.d.ts

@@ -1,2 +1,2 @@
 import type { GridPremiumSlotsComponent } from '../models';
-export declare const DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS: GridPremiumSlotsComponent;
+export declare const DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS: GridPremiumSlotsComponent;

package/constants/dataGridPremiumDefaultSlotsComponents.js

@@ -9,6 +9,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _GridPremiumColumnMenu = require("../components/GridPremiumColumnMenu");
 var _material = _interopRequireDefault(require("../material"));
+var _GridBottomContainer = require("../components/GridBottomContainer");
+var _GridPremiumToolbar = require("../components/GridPremiumToolbar");
 const DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS = exports.DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS = (0, _extends2.default)({}, _internals.DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS, _material.default, {
-  columnMenu: _GridPremiumColumnMenu.GridPremiumColumnMenu
+  columnMenu: _GridPremiumColumnMenu.GridPremiumColumnMenu,
+  bottomContainer: _GridBottomContainer.GridBottomContainer,
+  toolbar: _GridPremiumToolbar.GridPremiumToolbar
 });

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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 };