@mui/x-data-grid-premium 8.0.0-alpha.11 → 8.0.0-alpha.13

package/components/GridFooterCell.d.ts

@@ -3,7 +3,7 @@ import { GridRenderCellParams } from '@mui/x-data-grid';
 import { Theme } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
 interface GridFooterCellProps extends GridRenderCellParams {
-    sx?: SxProps<Theme>;
+  sx?: SxProps<Theme>;
 }
 declare function GridFooterCell(props: GridFooterCellProps): React.JSX.Element;
-export { GridFooterCell };
+export { GridFooterCell };

package/components/GridFooterCell.js

@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _xDataGrid = require("@mui/x-data-grid");
+var _internals = require("@mui/x-data-grid/internals");
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
@@ -19,12 +20,10 @@ const GridFooterCellRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FooterCell',
   overridesResolver: (_, styles) => styles.footerCell
-})(({
-  theme
-}) => ({
-  fontWeight: theme.typography.fontWeightMedium,
-  color: (theme.vars || theme).palette.primary.dark
-}));
+})({
+  fontWeight: _internals.vars.typography.fontWeight.medium,
+  color: _internals.vars.colors.foreground.accent
+});
 const useUtilityClasses = ownerState => {
   const {
     classes

package/components/GridGroupingColumnFooterCell.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridRenderCellParams } from '@mui/x-data-grid-pro';
 declare function GridGroupingColumnFooterCell(props: GridRenderCellParams): React.JSX.Element;
-export { GridGroupingColumnFooterCell };
+export { GridGroupingColumnFooterCell };

package/components/GridGroupingColumnFooterCell.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridGroupingColumnFooterCell = GridGroupingColumnFooterCell;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-data-grid/internals");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _GridFooterCell = require("./GridFooterCell");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -21,7 +22,7 @@ function GridGroupingColumnFooterCell(props) {
   } else if (rootProps.rowGroupingColumnMode === 'multiple') {
     sx.ml = 2;
   } else {
-    sx.ml = theme => `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(props.rowNode.depth)})`;
+    sx.ml = `calc(var(--DataGrid-cellOffsetMultiplier) * ${_internals.vars.spacing(props.rowNode.depth)})`;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFooterCell.GridFooterCell, (0, _extends2.default)({
     sx: sx

package/components/GridGroupingColumnLeafCell.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridRenderCellParams } from '@mui/x-data-grid-pro';
 declare function GridGroupingColumnLeafCell(props: GridRenderCellParams): React.JSX.Element;
-export { GridGroupingColumnLeafCell };
+export { GridGroupingColumnLeafCell };

package/components/GridGroupingColumnLeafCell.js

@@ -1,13 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridGroupingColumnLeafCell = GridGroupingColumnLeafCell;
 var React = _interopRequireWildcard(require("react"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _internals = require("@mui/x-data-grid/internals");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function GridGroupingColumnLeafCell(props) {
@@ -15,14 +14,9 @@ function GridGroupingColumnLeafCell(props) {
     rowNode
   } = props;
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-    sx: [rootProps.rowGroupingColumnMode === 'multiple' ? {
-      ml: 1
-    } : theme => ({
-      ml: `calc(var(--DataGrid-cellOffsetMultiplier) * var(--depth) * ${theme.spacing(1)})`
-    })],
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: {
-      '--depth': rowNode.depth
+      marginLeft: rootProps.rowGroupingColumnMode === 'multiple' ? _internals.vars.spacing(1) : `calc(var(--DataGrid-cellOffsetMultiplier) * ${_internals.vars.spacing(rowNode.depth)})`
     },
     children: props.formattedValue ?? props.value
   });

package/components/GridGroupingCriteriaCell.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GridRenderCellParams, GridGroupNode } from '@mui/x-data-grid-pro';
 interface GridGroupingCriteriaCellProps extends GridRenderCellParams<any, any, any, GridGroupNode> {
-    hideDescendantCount?: boolean;
+  hideDescendantCount?: boolean;
 }
 export declare function GridGroupingCriteriaCell(props: GridGroupingCriteriaCellProps): React.JSX.Element;
-export {};
+export {};

package/components/GridGroupingCriteriaCell.js

@@ -9,7 +9,7 @@ exports.GridGroupingCriteriaCell = GridGroupingCriteriaCell;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _internals = require("@mui/x-data-grid/internals");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
@@ -67,15 +67,10 @@ function GridGroupingCriteriaCell(props) {
       children: rowNode.groupingKey
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: classes.root,
-    sx: [rootProps.rowGroupingColumnMode === 'multiple' ? {
-      ml: 0
-    } : theme => ({
-      ml: `calc(var(--DataGrid-cellOffsetMultiplier) * var(--depth) * ${theme.spacing(1)})`
-    })],
     style: {
-      '--depth': rowNode.depth
+      marginLeft: rootProps.rowGroupingColumnMode === 'multiple' ? 0 : `calc(var(--DataGrid-cellOffsetMultiplier) * ${rowNode.depth} * ${_internals.vars.spacing(1)})`
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes.toggle,

package/components/GridPremiumColumnMenu.d.ts

@@ -1,33 +1,33 @@
 import * as React from 'react';
 import { GridColumnMenuProps, GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
-import { GridColumnMenuAggregationItem } from './GridColumnMenuAggregationItem';
+import { GridColumnMenuAggregationItem } from "./GridColumnMenuAggregationItem.js";
 export declare function GridColumnMenuGroupingItem(props: GridColumnMenuItemProps): React.JSX.Element;
 export declare const GRID_COLUMN_MENU_SLOTS_PREMIUM: {
-    columnMenuAggregationItem: typeof GridColumnMenuAggregationItem;
-    columnMenuGroupingItem: typeof GridColumnMenuGroupingItem;
-    columnMenuPinningItem: typeof import("@mui/x-data-grid-pro").GridColumnMenuPinningItem;
-    columnMenuSortItem: typeof import("@mui/x-data-grid").GridColumnMenuSortItem;
-    columnMenuFilterItem: typeof import("@mui/x-data-grid").GridColumnMenuFilterItem;
-    columnMenuColumnsItem: typeof import("@mui/x-data-grid").GridColumnMenuColumnsItem;
+  columnMenuAggregationItem: typeof GridColumnMenuAggregationItem;
+  columnMenuGroupingItem: typeof GridColumnMenuGroupingItem;
+  columnMenuPinningItem: typeof import("@mui/x-data-grid-pro").GridColumnMenuPinningItem;
+  columnMenuSortItem: typeof import("@mui/x-data-grid").GridColumnMenuSortItem;
+  columnMenuFilterItem: typeof import("@mui/x-data-grid").GridColumnMenuFilterItem;
+  columnMenuColumnsItem: typeof import("@mui/x-data-grid").GridColumnMenuColumnsItem;
 };
 export declare const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM: {
-    columnMenuAggregationItem: {
-        displayOrder: number;
-    };
-    columnMenuGroupingItem: {
-        displayOrder: number;
-    };
-    columnMenuPinningItem: {
-        displayOrder: number;
-    };
-    columnMenuSortItem: {
-        displayOrder: number;
-    };
-    columnMenuFilterItem: {
-        displayOrder: number;
-    };
-    columnMenuColumnsItem: {
-        displayOrder: number;
-    };
+  columnMenuAggregationItem: {
+    displayOrder: number;
+  };
+  columnMenuGroupingItem: {
+    displayOrder: number;
+  };
+  columnMenuPinningItem: {
+    displayOrder: number;
+  };
+  columnMenuSortItem: {
+    displayOrder: number;
+  };
+  columnMenuFilterItem: {
+    displayOrder: number;
+  };
+  columnMenuColumnsItem: {
+    displayOrder: number;
+  };
 };
-export declare const GridPremiumColumnMenu: React.ForwardRefExoticComponent<GridColumnMenuProps> | React.ForwardRefExoticComponent<GridColumnMenuProps & React.RefAttributes<HTMLUListElement>>;
+export declare const GridPremiumColumnMenu: React.ForwardRefExoticComponent<GridColumnMenuProps> | React.ForwardRefExoticComponent<GridColumnMenuProps & React.RefAttributes<HTMLUListElement>>;

package/components/index.d.ts

@@ -1,5 +1,5 @@
-export * from './GridExcelExportMenuItem';
-export * from '../material/icons';
-export * from './GridColumnMenuAggregationItem';
-export * from './promptControl';
-export { GridColumnMenuGroupingItem } from './GridPremiumColumnMenu';
+export * from "./GridExcelExportMenuItem.js";
+export * from "../material/icons.js";
+export * from "./GridColumnMenuAggregationItem.js";
+export * from "./promptControl/index.js";
+export { GridColumnMenuGroupingItem } from "./GridPremiumColumnMenu.js";

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

@@ -127,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));
@@ -180,35 +188,29 @@ function GridToolbarPromptControl(props) {
       helperText: error,
       slotProps: {
         input: {
-          startAdornment: supportsSpeechRecognition && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
-            position: "start",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RecordButton.RecordButton, {
-              className: classes.recordButton,
-              lang: lang,
-              recording: isRecording,
-              setRecording: setRecording,
-              disabled: isLoading,
-              onUpdate: setQuery,
-              onDone: handleDone,
-              onError: setError
-            })
+          startAdornment: supportsSpeechRecognition && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RecordButton.RecordButton, {
+            className: classes.recordButton,
+            lang: lang,
+            recording: isRecording,
+            setRecording: setRecording,
+            disabled: isLoading,
+            onUpdate: setQuery,
+            onDone: handleDone,
+            onError: setError
           }),
-          endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
-            position: "end",
-            children: /*#__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, {
-                  className: classes.sendButton,
-                  disabled: isLoading || isRecording || query === '',
-                  color: "primary",
-                  onClick: processPrompt,
-                  size: "small",
-                  "aria-label": apiRef.current.getLocaleText('toolbarPromptControlSendActionAriaLabel'),
-                  edge: "end",
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.toolbarPromptSendIcon, {
-                    fontSize: "small"
-                  })
+          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, {
+                className: classes.sendButton,
+                disabled: isLoading || isRecording || query === '',
+                color: "primary",
+                onClick: processPrompt,
+                size: "small",
+                "aria-label": apiRef.current.getLocaleText('toolbarPromptControlSendActionAriaLabel'),
+                edge: "end",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.toolbarPromptSendIcon, {
+                  fontSize: "small"
                 })
               })
             })

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,8 @@ 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");
 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
 });

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,6 +16,7 @@ import { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaA
 import { jsx as _jsx } from "react/jsx-runtime";
 const configuration = {
   hooks: {
+    useCSSVariables: useMaterialCSSVariables,
     useGridAriaAttributes,
     useGridRowAriaAttributes
   }
@@ -56,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,
   /**
@@ -173,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.
@@ -381,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,
   /**
@@ -485,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
@@ -661,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.
@@ -682,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,
   /**
@@ -809,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,
   /**
@@ -932,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.
@@ -954,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']),
   /**
@@ -972,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,
@@ -986,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.
    */
@@ -1035,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.
    */
@@ -1074,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.
@@ -1085,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>;