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

package/CHANGELOG.md

@@ -5,6 +5,121 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-alpha.8
+
+_Jan 16, 2025_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🍬 Improved design for Data Grid [Header filters](https://next.mui.com/x/react-data-grid/filtering/header-filters/)
+
+  <img width="100%" alt="Data Grid Header filters" src="https://github.com/user-attachments/assets/74a50cd9-7a55-41fc-a2b8-f8a0d5b9120e" />
+
+- 🔄 Data Grid [Scroll restoration](https://next.mui.com/x/react-data-grid/scrolling/#scroll-restoration)
+- 📊 Charts support server-side rendering under [some conditions](https://next.mui.com/x/react-charts/getting-started/#server-side-rendering)
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@lauri865.
+Following are all team members who have contributed to this release:
+@arminmeh, @romgrk, @samuelsycamore, @alexfauquette, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- The clear button in header filter cells has been moved to the header filter menu. Use `slotProps={{ headerFilterCell: { showClearIcon: true } }}` to restore the clear button in the cell.
+
+#### `@mui/x-data-grid@8.0.0-alpha.8`
+
+- [DataGrid] Improve scrollbar deadzone with overlay scrollbars (#15961) @lauri865
+- [DataGrid] Header filter design improvements (#15991) @KenanYusuf
+- [DataGrid] Scroll restoration (#15623) @lauri865
+- [DataGrid] Fix row, cell and header memoizations (#15666) @lauri865
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.8` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.0.0-alpha.8`, plus:
+
+- [DataGridPro] Add test for column pinning with disabled column virtualization (#16176) @cherniavskii
+- [DataGridPro] Fix width of right-pinned column group during resize (#16199) @cherniavskii
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.8` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.8`.
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The field is now editable if rendered inside a mobile Picker — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#field-editing-on-mobile-pickers)
+- The `useMultiInputDateRangeField`, `useMultiInputTimeRangeField`, and `useMultiInputDateTimeRangeField` hooks have been removed in favor of the new `useMultiInputRangeField` hook — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#usemultiinputdaterangefield)
+- The component passed to the `field` slot no longer receives the `value`, `onChange`, `timezone`, `format`, `disabled`, `formatDensity`, `enableAccessibleFieldDOMStructure`, `selectedSections` and `onSelectedSectionsChange` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-field)
+
+#### `@mui/x-date-pickers@8.0.0-alpha.8`
+
+- [pickers] Let the field components handle their opening UI, and allow field editing on mobile pickers (#15671) @flaviendelangle
+- [pickers] Remove code duplication for the multi input range fields (#15505) @flaviendelangle
+- [pickers] Rename `onRangePositionChange` into `setRangePosition` in `usePickerRangePositionContext` (#16189) @flaviendelangle
+- [pickers] Use context to pass props from the picker to the field (#16042) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.8` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.0.0-alpha.8`.
+
+### Charts
+
+#### Breaking changes
+
+- Charts tooltip markers now have different styles for each chart type. The tooltip and legend marks are now the same.
+- Duplicate axis id's across `x` and `y` axis now log a warning in dev mode. Axis ids should be unique to prevent internal issues.
+
+#### `@mui/x-charts@8.0.0-alpha.8`
+
+- [charts] Fix flaky charts tests (#16180) @JCQuintas
+- [charts] Handle case where gradient stop `offset` could be `Infinite` (#16131) @JCQuintas
+- [charts] Make `useChartGradientId` public (#16106) @JCQuintas
+- [charts] Move z-axis to plugin (#16130) @alexfauquette
+- [charts] Plot data at first render if `skipAnimation` is set to `true` (#16166) @alexfauquette
+- [charts] Replace tooltip mark with style (#16117) @JCQuintas
+- [charts] Support `rtl` for gradient legend (#16115) @JCQuintas
+- [charts] Use plugin system for series and axes (#15865) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-alpha.8` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-alpha.8`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.8`
+
+No changes since `@mui/x-tree-view-pro@v8.0.0-alpha.7`.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.8` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-alpha.8`.
+
+### Docs
+
+- [docs] Add example for custom legend (#16169) @alexfauquette
+- [docs] Add full custom field creation example (#15194) @flaviendelangle
+- [docs] Copyedit the Data Grid cell selection page (#16099) @samuelsycamore
+- [docs] Fix demo rendering issue on Codesandbox (#16118) @arminmeh
+- [docs] Remove broken links (#16167) @alexfauquette
+- [docs] Split the Data Grid editing page (#14931) @MBilalShafi
+- [docs] Fix wrong props warnings (#16119) @JCQuintas
+
+### Core
+
+- [core] Type all references as `RefObject` (#16124) @arminmeh
+- [code-infra] Refactor `react` and `react-dom` definitions to simplify dep resolving (#16160) @LukasTy
+- [code-infra] Stop renovate from updating `date-fns-v2` (#16158) @LukasTy
+- [infra] Improve cherry-pick action target list (#16184) @michelengelen
+- [test] Fix flaky column pinning unit test (#16202) @cherniavskii
+- [test] Fix flaky screenshot (#16182) @cherniavskii
+
 ## 8.0.0-alpha.7
 
 _Jan 9, 2025_

package/DataGridPremium/DataGridPremium.js

@@ -42,18 +42,16 @@ const DataGridPremiumRaw = (0, _forwardRef.forwardRef)(function DataGridPremium(
     privateApiRef: privateApiRef,
     configuration: configuration,
     props: props,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_xDataGridPro.GridRoot, (0, _extends2.default)({
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridRoot, (0, _extends2.default)({
       className: props.className,
       style: props.style,
       sx: props.sx
     }, props.slotProps?.root, {
       ref: ref,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridBody, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
-          packageName: "x-data-grid-premium",
-          releaseInfo: releaseInfo
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridFooterPlaceholder, {})]
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
+        packageName: "x-data-grid-premium",
+        releaseInfo: releaseInfo
+      })
     }))
   });
 });

package/DataGridPremium/useDataGridPremiumComponent.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridApiPremium, GridPrivateApiPremium } from '../models/gridApiPremium';
 import { DataGridPremiumProcessedProps } from '../models/dataGridPremiumProps';
-export declare const useDataGridPremiumComponent: (inputApiRef: React.MutableRefObject<GridApiPremium> | undefined, props: DataGridPremiumProcessedProps) => React.RefObject<GridPrivateApiPremium>;
+export declare const useDataGridPremiumComponent: (inputApiRef: React.RefObject<GridApiPremium> | undefined, props: DataGridPremiumProcessedProps) => React.RefObject<GridPrivateApiPremium>;

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -50,6 +50,7 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _internals.useGridInitializeState)(_internals.columnPinningStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowPinningStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.paginationStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.editingStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.focusStateInitializer, apiRef, props);
@@ -60,7 +61,6 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _internals.useGridInitializeState)(_internals.densityStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnReorderStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnResizeStateInitializer, apiRef, props);
-  (0, _internals.useGridInitializeState)(_internals.paginationStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowsMetaStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnMenuStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnGroupsStateInitializer, apiRef, props);

package/esm/DataGridPremium/DataGridPremium.js

@@ -4,7 +4,7 @@ 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";
@@ -12,7 +12,7 @@ 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,
@@ -35,18 +35,16 @@ const DataGridPremiumRaw = forwardRef(function DataGridPremium(inProps, ref) {
     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
     }, props.slotProps?.root, {
       ref: ref,
-      children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
-        children: /*#__PURE__*/_jsx(Watermark, {
-          packageName: "x-data-grid-premium",
-          releaseInfo: releaseInfo
-        })
-      }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
+      children: /*#__PURE__*/_jsx(Watermark, {
+        packageName: "x-data-grid-premium",
+        releaseInfo: releaseInfo
+      })
     }))
   });
 });

package/esm/DataGridPremium/useDataGridPremiumComponent.js

@@ -43,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);
@@ -53,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);

package/esm/hooks/features/clipboard/useGridClipboardImport.js

@@ -121,7 +121,7 @@ class CellValueUpdater {
           if (onProcessRowUpdateError) {
             onProcessRowUpdateError(errorThrown);
           } else if (process.env.NODE_ENV !== 'production') {
-            warnOnce(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
+            warnOnce(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
           }
         };
         try {

package/esm/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczNjM3NzIwMDAwMA==";
+  const releaseInfo = "MTczNjk4MjAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/hooks/features/aggregation/createAggregationLookup.d.ts

@@ -3,7 +3,7 @@ import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import { GridAggregationFunction, GridAggregationFunctionDataSource, GridAggregationLookup } from './gridAggregationInterfaces';
 export declare const createAggregationLookup: ({ apiRef, aggregationFunctions, aggregationRowsScope, getAggregationPosition, isDataSource, }: {
-    apiRef: React.MutableRefObject<GridPrivateApiPremium>;
+    apiRef: React.RefObject<GridPrivateApiPremium>;
     aggregationFunctions: Record<string, GridAggregationFunction> | Record<string, GridAggregationFunctionDataSource>;
     aggregationRowsScope: DataGridPremiumProcessedProps["aggregationRowsScope"];
     getAggregationPosition: DataGridPremiumProcessedProps["getAggregationPosition"];

package/hooks/features/aggregation/gridAggregationUtils.d.ts

@@ -28,7 +28,7 @@ interface AddFooterRowsParams {
      * If `true`, there are some aggregation rules to apply
      */
     hasAggregationRule: boolean;
-    apiRef: React.MutableRefObject<GridPrivateApiPremium>;
+    apiRef: React.RefObject<GridPrivateApiPremium>;
 }
 /**
  * Add a footer for each group that has at least one column with an aggregated value.
@@ -39,7 +39,7 @@ export declare const addFooterRows: ({ groupingParams, apiRef, getAggregationPos
  */
 export declare const areAggregationRulesEqual: (previousValue: GridAggregationRules | undefined, newValue: GridAggregationRules) => boolean;
 export declare const getAggregationFunctionLabel: ({ apiRef, aggregationRule, }: {
-    apiRef: React.MutableRefObject<GridApiPremium>;
+    apiRef: React.RefObject<GridApiPremium>;
     aggregationRule: GridAggregationRule;
 }) => string;
 export {};

package/hooks/features/aggregation/useGridAggregation.d.ts

@@ -3,4 +3,4 @@ import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 export declare const aggregationStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'aggregationModel' | 'initialState'>, GridPrivateApiPremium>;
-export declare const useGridAggregation: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "onAggregationModelChange" | "initialState" | "aggregationModel" | "getAggregationPosition" | "aggregationFunctions" | "aggregationRowsScope" | "disableAggregation" | "rowGroupingColumnMode" | "unstable_dataSource">) => void;
+export declare const useGridAggregation: (apiRef: React.RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "onAggregationModelChange" | "initialState" | "aggregationModel" | "getAggregationPosition" | "aggregationFunctions" | "aggregationRowsScope" | "disableAggregation" | "rowGroupingColumnMode" | "unstable_dataSource">) => void;

package/hooks/features/aggregation/useGridAggregationPreProcessors.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
-export declare const useGridAggregationPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "aggregationFunctions" | "disableAggregation" | "getAggregationPosition" | "slotProps" | "slots" | "unstable_dataSource">) => void;
+export declare const useGridAggregationPreProcessors: (apiRef: React.RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "aggregationFunctions" | "disableAggregation" | "getAggregationPosition" | "slotProps" | "slots" | "unstable_dataSource">) => void;

package/hooks/features/aggregation/wrapColumnWithAggregation.d.ts

@@ -17,7 +17,7 @@ interface GridColDefWithAggregationWrappers extends GridBaseColDef {
  */
 export declare const wrapColumnWithAggregationValue: ({ column, apiRef, aggregationRule, }: {
     column: GridBaseColDef;
-    apiRef: React.MutableRefObject<GridApiPremium>;
+    apiRef: React.RefObject<GridApiPremium>;
     aggregationRule: GridAggregationRule;
 }) => GridBaseColDef;
 /**

package/hooks/features/cellSelection/gridCellSelectionInterfaces.d.ts

@@ -13,13 +13,13 @@ export interface GridCellSelectionApi {
     isCellSelected: (id: GridRowId, field: GridColDef['field']) => boolean;
     /**
      * Returns an object containing the selection state of the cells.
-     * The keys of the object correpond to the row IDs.
-     * The value of each key is another object whose keys are the fields and values are the selection state.
+     * The keys of the object correspond to the row IDs.
+     * The value of each key is also an object, which has a column field for a key and a boolean value for its selection state.
      * @returns {GridCellSelectionModel} Object containing the selection state of the cells
      */
     getCellSelectionModel: () => GridCellSelectionModel;
     /**
-     * Updates the selected cells to be those passed to the `newModel` argument.
+     * Updates the cell selection model according to the value passed to the `newModel` argument.
      * Any cell already selected will be unselected.
      * @param {GridCellSelectionModel} newModel The cells to select.
      */

package/hooks/features/clipboard/useGridClipboardImport.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 import type { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
-export declare const useGridClipboardImport: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "pagination" | "paginationMode" | "processRowUpdate" | "onProcessRowUpdateError" | "getRowId" | "onClipboardPasteStart" | "onClipboardPasteEnd" | "splitClipboardPastedText" | "disableClipboardPaste" | "onBeforeClipboardPasteStart">) => void;
+export declare const useGridClipboardImport: (apiRef: React.RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "pagination" | "paginationMode" | "processRowUpdate" | "onProcessRowUpdateError" | "getRowId" | "onClipboardPasteStart" | "onClipboardPasteEnd" | "splitClipboardPastedText" | "disableClipboardPaste" | "onBeforeClipboardPasteStart">) => void;

package/hooks/features/clipboard/useGridClipboardImport.js

@@ -129,7 +129,7 @@ class CellValueUpdater {
           if (onProcessRowUpdateError) {
             onProcessRowUpdateError(errorThrown);
           } else if (process.env.NODE_ENV !== 'production') {
-            (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
+            (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
           }
         };
         try {

package/hooks/features/dataSource/useGridDataSourcePremium.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
-export declare const useGridDataSourcePremium: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: DataGridPremiumProcessedProps) => void;
+export declare const useGridDataSourcePremium: (apiRef: React.RefObject<GridPrivateApiPremium>, props: DataGridPremiumProcessedProps) => void;

package/hooks/features/export/serializer/excelSerializer.d.ts

@@ -18,7 +18,7 @@ interface SerializedRow {
  * actual rendered columns.
  * The caller of this function MUST call `resetColSpan()` before and after usage.
  */
-export declare const serializeRowUnsafe: (id: GridRowId, columns: GridStateColDef[], apiRef: React.MutableRefObject<GridPrivateApiPremium>, defaultValueOptionsFormulae: {
+export declare const serializeRowUnsafe: (id: GridRowId, columns: GridStateColDef[], apiRef: React.RefObject<GridPrivateApiPremium>, defaultValueOptionsFormulae: {
     [field: string]: {
         address: string;
     };
@@ -53,7 +53,7 @@ interface BuildExcelOptions extends Pick<GridExcelExportOptions, 'exceljsPreProc
     rowIds: GridRowId[];
     columnsStyles?: ColumnsStylesInterface;
 }
-export declare function buildExcel(options: BuildExcelOptions, apiRef: React.MutableRefObject<GridPrivateApiPremium>): Promise<Excel.Workbook>;
+export declare function buildExcel(options: BuildExcelOptions, apiRef: React.RefObject<GridPrivateApiPremium>): Promise<Excel.Workbook>;
 export interface ExcelExportInitEvent {
     serializedColumns: SerializedColumns;
     serializedRows: SerializedRow[];

package/hooks/features/export/useGridExcelExport.d.ts

@@ -8,4 +8,4 @@ import { DataGridPremiumProps } from '../../../models/dataGridPremiumProps';
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridExcelExport: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: DataGridPremiumProps) => void;
+export declare const useGridExcelExport: (apiRef: React.RefObject<GridPrivateApiPremium>, props: DataGridPremiumProps) => void;

package/hooks/features/rowGrouping/createGroupingColDef.d.ts

@@ -25,7 +25,7 @@ interface CreateGroupingColDefMonoCriteriaParams {
  */
 export declare const createGroupingColDefForOneGroupingCriteria: ({ columnsLookup, groupedByColDef, groupingCriteria, colDefOverride, strategy, }: CreateGroupingColDefMonoCriteriaParams) => GridColDef;
 interface CreateGroupingColDefSeveralCriteriaParams {
-    apiRef: React.MutableRefObject<GridApiPremium>;
+    apiRef: React.RefObject<GridApiPremium>;
     columnsLookup: GridColumnRawLookup;
     /**
      * The fields from which we are grouping the rows.

package/hooks/features/rowGrouping/gridRowGroupingUtils.d.ts

@@ -15,7 +15,7 @@ interface FilterRowTreeFromTreeDataParams {
     rowTree: GridRowTreeConfig;
     isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
     filterModel: GridFilterModel;
-    apiRef: React.MutableRefObject<GridPrivateApiPremium>;
+    apiRef: React.RefObject<GridPrivateApiPremium>;
 }
 /**
  * A leaf is visible if it passed the filter
@@ -26,12 +26,12 @@ interface FilterRowTreeFromTreeDataParams {
 export declare const filterRowTreeFromGroupingColumns: (params: FilterRowTreeFromTreeDataParams) => Omit<GridFilterState, "filterModel">;
 export declare const getColDefOverrides: (groupingColDefProp: DataGridPremiumProcessedProps["groupingColDef"], fields: string[], strategy?: RowGroupingStrategy) => import("@mui/x-data-grid-pro").GridGroupingColDefOverride<any> | null | undefined;
 export declare const mergeStateWithRowGroupingModel: (rowGroupingModel: GridRowGroupingModel) => (state: GridStatePremium) => GridStatePremium;
-export declare const setStrategyAvailability: (privateApiRef: React.MutableRefObject<GridPrivateApiPremium>, disableRowGrouping: boolean, dataSource?: GridDataSource) => void;
+export declare const setStrategyAvailability: (privateApiRef: React.RefObject<GridPrivateApiPremium>, disableRowGrouping: boolean, dataSource?: GridDataSource) => void;
 export declare const getCellGroupingCriteria: ({ row, colDef, groupingRule, apiRef, }: {
     row: GridRowModel;
     colDef: GridColDef;
     groupingRule: GridGroupingRule;
-    apiRef: React.MutableRefObject<GridPrivateApiPremium>;
+    apiRef: React.RefObject<GridPrivateApiPremium>;
 }) => {
     key: GridKeyValue | null | undefined;
     field: string;

package/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
-export declare const useGridDataSourceRowGroupingPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "disableRowGrouping" | "groupingColDef" | "rowGroupingColumnMode" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;
+export declare const useGridDataSourceRowGroupingPreProcessors: (apiRef: React.RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "disableRowGrouping" | "groupingColDef" | "rowGroupingColumnMode" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;

package/hooks/features/rowGrouping/useGridRowGrouping.d.ts

@@ -8,4 +8,4 @@ export declare const rowGroupingStateInitializer: GridStateInitializer<Pick<Data
  * @requires useGridRows (state, method) - can be after, async only
  * @requires useGridParamsApi (method) - can be after, async only
  */
-export declare const useGridRowGrouping: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "groupingColDef" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots" | "unstable_dataSource">) => void;
+export declare const useGridRowGrouping: (apiRef: React.RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "groupingColDef" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots" | "unstable_dataSource">) => void;

package/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
-export declare const useGridRowGroupingPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "disableRowGrouping" | "groupingColDef" | "rowGroupingColumnMode" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;
+export declare const useGridRowGroupingPreProcessors: (apiRef: React.RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "disableRowGrouping" | "groupingColDef" | "rowGroupingColumnMode" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;

package/hooks/utils/useGridApiContext.d.ts

@@ -1,2 +1,2 @@
 import { GridApiPremium } from '../../models/gridApiPremium';
-export declare const useGridApiContext: () => import("react").MutableRefObject<GridApiPremium>;
+export declare const useGridApiContext: () => import("react").RefObject<GridApiPremium>;

package/hooks/utils/useGridPrivateApiContext.d.ts

@@ -1,2 +1,2 @@
 import { GridPrivateApiPremium } from '../../models/gridApiPremium';
-export declare const useGridPrivateApiContext: () => import("react").MutableRefObject<GridPrivateApiPremium>;
+export declare const useGridPrivateApiContext: () => import("react").RefObject<GridPrivateApiPremium>;

package/hooks/utils/useKeepGroupedColumnsHidden.d.ts

@@ -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: React.RefObject<GridApi>;
 } & Pick<DataGridPremiumProps, "initialState" | "rowGroupingModel">) => GridInitialStatePremium;

package/index.js

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

package/models/dataGridPremiumProps.d.ts

@@ -88,7 +88,7 @@ export interface DataGridPremiumPropsWithoutDefaultValue<R extends GridValidRowM
     /**
      * The ref object that allows grid manipulation. Can be instantiated with `useGridApiRef()`.
      */
-    apiRef?: React.MutableRefObject<GridApiPremium>;
+    apiRef?: React.RefObject<GridApiPremium>;
     /**
      * The initial state of the DataGridPremium.
      * The data in it is set in the state on initialization but isn't controlled.

package/models/gridGroupingValueGetter.d.ts

@@ -1,3 +1,3 @@
 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: React.RefObject<GridApiPremium>) => GridKeyValue | null | undefined;

package/models/gridPastedValueParser.d.ts

@@ -1,3 +1,3 @@
 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: React.RefObject<GridApiPremium>) => V | undefined;

package/modern/DataGridPremium/DataGridPremium.js

@@ -4,7 +4,7 @@ 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";
@@ -12,7 +12,7 @@ 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,
@@ -35,18 +35,16 @@ const DataGridPremiumRaw = forwardRef(function DataGridPremium(inProps, ref) {
     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
     }, props.slotProps?.root, {
       ref: ref,
-      children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
-        children: /*#__PURE__*/_jsx(Watermark, {
-          packageName: "x-data-grid-premium",
-          releaseInfo: releaseInfo
-        })
-      }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
+      children: /*#__PURE__*/_jsx(Watermark, {
+        packageName: "x-data-grid-premium",
+        releaseInfo: releaseInfo
+      })
     }))
   });
 });

package/modern/DataGridPremium/useDataGridPremiumComponent.js

@@ -43,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);
@@ -53,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);

package/modern/hooks/features/clipboard/useGridClipboardImport.js

@@ -121,7 +121,7 @@ class CellValueUpdater {
           if (onProcessRowUpdateError) {
             onProcessRowUpdateError(errorThrown);
           } else if (process.env.NODE_ENV !== 'production') {
-            warnOnce(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
+            warnOnce(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
           }
         };
         try {

package/modern/index.js

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

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczNjM3NzIwMDAwMA==";
+  const releaseInfo = "MTczNjk4MjAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-premium",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "The Premium plan edition of the Data Grid Components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -40,10 +40,10 @@
     "exceljs": "^4.4.0",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
-    "@mui/x-data-grid": "8.0.0-alpha.7",
-    "@mui/x-data-grid-pro": "8.0.0-alpha.7",
-    "@mui/x-internals": "8.0.0-alpha.7",
-    "@mui/x-license": "8.0.0-alpha.7"
+    "@mui/x-data-grid": "8.0.0-alpha.8",
+    "@mui/x-license": "8.0.0-alpha.8",
+    "@mui/x-data-grid-pro": "8.0.0-alpha.8",
+    "@mui/x-internals": "8.0.0-alpha.8"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTczNjM3NzIwMDAwMA==";
+  const releaseInfo = "MTczNjk4MjAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat