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

package/CHANGELOG.md

@@ -5,6 +5,247 @@
 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_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Charts legend is now an HTML element which can be styled more easily
+- 💫 Support [aggregation with server-side data](/x/react-data-grid/server-side-data/aggregation/)
+- 🏎️ Improve Data Grid aggregation performance
+- 🌍 Add Chinese (Taiwan) (zh-TW) locale on the Date and Time Pickers
+- 🌍 Improve Norwegian (nb-NO) locale on the Date and Time Pickers
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@derek-0000, @josteinjhauge, @k-rajat19, @nusr, @tomashauser.
+Following are all team members who have contributed to this release:
+@cherniavskii, @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @arminmeh, @romgrk, @oliviertassinari.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-alpha.7`
+
+- [DataGrid] Improve React 19 support (#15769) @LukasTy
+- [DataGrid] Add `name` attribute to the checkbox selection column (#15178) @derek-0000
+- [DataGrid] Fix number filter field formatting values while typing (#16062) @arminmeh
+- [DataGrid] Fix select all checkbox state reset with server side data (#16034) @MBilalShafi
+- [DataGrid] Refactor: create base button props (#15930) @romgrk
+- [DataGrid] Refactor: create tooltip props (#16086) @romgrk
+- [DataGrid] Fix TS error (#16046) @cherniavskii
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.7` [![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.7`.
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.7` [![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.7`, plus:
+
+- [DataGridPremium] Improve aggregation performance for multiple columns (#16097) @cherniavskii
+- [DataGridPremium] Make Aggregation keyboard accessible in the column menu (#15934) @k-rajat19
+- [DataGridPremium] Server-side aggregation with data source (#15741) @MBilalShafi
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The `date-fns` and `date-fns-jalali` date library adapters have been renamed to better align with the current stable major versions — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#✅-rename-date-fns-adapter-imports)
+- Update default `closeOnSelect` and Action Bar `actions` values - [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#update-default-closeonselect-and-action-bar-actions-values)
+- The component passed to the `layout` slot no longer receives the `value`, `onChange` and `onSelectShortcut` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-layout).
+- The component passed to the `toolbar` slot no longer receives the `value`, `onChange` and `isLandscape` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-toolbar).
+- The component passed to the `shortcuts` slot no longer receives the `onChange`, `isValid` and `isLandscape` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-shortcuts).
+- The `PickerShortcutChangeImportance` type has been renamed `PickerChangeImportance` — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#renamed-variables-and-types).
+- The component passed to the `layout` slot no longer receives the `rangePosition` and `onRangePositionChange` on range pickers — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-layout).
+- The component passed to the `toolbar` slot no longer receives the `rangePosition` and `onRangePositionChange` on range pickers — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-toolbar).
+- The component passed to the `tabs` slot no longer receives the `rangePosition` and `onRangePositionChange` on range pickers — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-tabs).
+
+#### `@mui/x-date-pickers@8.0.0-alpha.7`
+
+- [fields] Handle focusing container with `inputRef.current.focus` on `accessibleFieldDOMStructure` (#15985) @LukasTy
+- [pickers] Always use `setValue` internally to update the picker value (#16056) @flaviendelangle
+- [pickers] Create a new context to pass the range position props to the layout components and to the views (#15846) @flaviendelangle
+- [pickers] Introduce a new concept of `manager` (#15339) @flaviendelangle
+- [pickers] Improve React 19 support (#15769) @LukasTy
+- [pickers] Memoize `<PickersActionBar />` (#16071) @LukasTy
+- [pickers] Remove `NonEmptyDateRange` type (#16035) @flaviendelangle
+- [pickers] Rename `AdapterDateFns` into `AdapterDateFnsV2` and `AdapterDateFnsV3` into `AdapterDateFns` (#16082) @LukasTy
+- [pickers] Rename `ctx.onViewChange` to `ctx.setView` and add it to the actions context (#16044) @flaviendelangle
+- [pickers] Support `date-fns-jalali` v4 (#16011) @LukasTy
+- [pickers] Update `closeOnSelect` and `actionBar.actions` default values (#15944) @LukasTy
+- [pickers] Use `usePickerContext()` and `usePickerActionsContext()` instead of passing props to the `shortcuts` and `toolbar` slots (#15948) @flaviendelangle
+- [l10n] Add Chinese (Taiwan) (zh-TW) locale (#16033) @nusr
+- [l10n] Improve Norwegian (nb-NO) locale (#16089) @josteinjhauge
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.7` [![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.7`.
+
+### Charts
+
+#### Breaking changes
+
+- Removed `DefaultChartsLegend` component, since it is now easier to create custom legends — [Learn more](https://next.mui.com/x/react-charts/components/#html-components).
+- The default legend is now an HTML element and can be styled more easily.
+- The `width` and `height` properties of the charts now only apply to the `svg` element, and not their wrappers, this might cause some layout shifts.
+- `slotProps.legend.direction` now accepts `'horizontal' | 'vertical'` instead of `'row' | 'column'` — [Learn more](https://next.mui.com/x/migration/migration-charts-v7/#legend-direction-value-change-✅).
+- The `getSeriesToDisplay` function was removed in favor of the `useLegend` hook. — [Learn more](https://next.mui.com/x/migration/migration-charts-v7/#the-getseriestodisplay-function-was-removed).
+
+#### `@mui/x-charts@8.0.0-alpha.7`
+
+- [charts] New HTML legend & styles (#15733) @JCQuintas
+- [charts] Improve React 19 support (#15769) @LukasTy
+- [charts] Fix 301 redirection in the API documentation @oliviertassinari
+
+#### `@mui/x-charts-pro@8.0.0-alpha.7` [![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.7`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.7`
+
+- [TreeView] Improve React 19 support (#15769) @LukasTy
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.7` [![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.7`.
+
+### Docs
+
+- [docs] Fix `EditingWithDatePickers` demo (#15967) @k-rajat19
+- [docs] Fix inconsistent multi input range field separators (#16043) @flaviendelangle
+- [docs] Fix non-existing "adapter" property of `LocalizationProvider` (#16084) @tomashauser
+- [docs] Refactor Data Grid with Date Pickers example (#15992) @LukasTy
+- [docs] Unify the wording of the pickers slots breaking changes (#16036) @flaviendelangle
+
+### Core
+
+- [core] Clarify the release strategy (#16014) @MBilalShafi
+- [core] Small fixes on docs @oliviertassinari
+- [core] Sync with other repos @oliviertassinari
+- [core] Update the `release:version` docs (#16038) @cherniavskii
+- [code-infra] Add `testSkipIf` and `describeSkipIf` (#16049) @JCQuintas
+- [test] Stabilize flaky Data Grid tests (#16053) @LukasTy
+
 ## 8.0.0-alpha.6
 
 _Dec 26, 2024_
@@ -104,7 +345,7 @@ Following are all team members who have contributed to this release:
 
 #### Breaking changes
 
-- Passing additional props (like `data-*`, `aria-*`) directly on the Data Grid component is no longer supported. To pass the props, use `slotProps`.
+- Passing additional props (like `data-*`, `aria-*`) directly on the Data Grid component is no longer supported. To pass the props, use `slotProps`:
 
   - For `.root` element, use `slotProps.root`.
   - For `.main` element (the one with `role="grid"`), use `slotProps.main`.

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
+      })
     }))
   });
 });
@@ -64,7 +62,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * Aggregation functions available on the grid.
-   * @default GRID_AGGREGATION_FUNCTIONS
+   * @default GRID_AGGREGATION_FUNCTIONS when `unstable_dataSource` is not provided, `{}` when `unstable_dataSource` is provided
    */
   aggregationFunctions: _propTypes.default.object,
   /**
@@ -1044,6 +1042,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   treeData: _propTypes.default.bool,
   unstable_dataSource: _propTypes.default.shape({
+    getAggregatedValue: _propTypes.default.func,
     getChildrenCount: _propTypes.default.func,
     getGroupKey: _propTypes.default.func,
     getRows: _propTypes.default.func.isRequired,

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.MutableRefObject<GridPrivateApiPremium>;
+export declare const useDataGridPremiumComponent: (inputApiRef: React.RefObject<GridApiPremium> | undefined, props: DataGridPremiumProcessedProps) => React.RefObject<GridPrivateApiPremium>;

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDataGridPremiumComponent = void 0;
 var _internals = require("@mui/x-data-grid-pro/internals");
+var _useGridDataSourcePremium = require("../hooks/features/dataSource/useGridDataSourcePremium");
 var _useGridAggregation = require("../hooks/features/aggregation/useGridAggregation");
 var _useGridAggregationPreProcessors = require("../hooks/features/aggregation/useGridAggregationPreProcessors");
 var _useGridRowGrouping = require("../hooks/features/rowGrouping/useGridRowGrouping");
@@ -49,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);
@@ -59,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);
@@ -69,6 +70,7 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _useGridRowGrouping.useGridRowGrouping)(apiRef, props);
   (0, _internals.useGridHeaderFiltering)(apiRef, props);
   (0, _internals.useGridTreeData)(apiRef, props);
+  (0, _useGridDataSourcePremium.useGridDataSourcePremium)(apiRef, props);
   (0, _useGridAggregation.useGridAggregation)(apiRef, props);
   (0, _internals.useGridKeyboardNavigation)(apiRef, props);
   (0, _internals.useGridRowSelection)(apiRef, props);
@@ -106,7 +108,6 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _internals.useGridDimensions)(apiRef, props);
   (0, _internals.useGridEvents)(apiRef, props);
   (0, _internals.useGridStatePersistence)(apiRef);
-  (0, _internals.useGridDataSource)(apiRef, props);
   (0, _internals.useGridVirtualization)(apiRef, props);
   (0, _internals.useGridListView)(apiRef, props);
   return apiRef;

package/DataGridPremium/useDataGridPremiumProps.js

@@ -53,7 +53,9 @@ const useDataGridPremiumProps = inProps => {
     defaultSlots,
     slots: themedProps.slots
   }), [themedProps.slots]);
-  return React.useMemo(() => (0, _extends2.default)({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps, {
+  return React.useMemo(() => (0, _extends2.default)({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps.unstable_dataSource ? {
+    aggregationFunctions: {}
+  } : {}, themedProps, {
     localeText,
     slots
   }, getDataGridPremiumForcedProps(themedProps)), [themedProps, localeText, slots]);

package/components/GridColumnMenuAggregationItem.js

@@ -1,15 +1,16 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridColumnMenuAggregationItem = GridColumnMenuAggregationItem;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
-var React = _interopRequireWildcard(require("react"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
@@ -20,18 +21,27 @@ var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _gridAggregationUtils = require("../hooks/features/aggregation/gridAggregationUtils");
 var _gridAggregationSelectors = require("../hooks/features/aggregation/gridAggregationSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["native"];
 function GridColumnMenuAggregationItem(props) {
   const {
     colDef
   } = props;
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const inputRef = React.useRef(null);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const id = (0, _utils.unstable_useId)();
   const aggregationModel = (0, _xDataGridPro.useGridSelector)(apiRef, _gridAggregationSelectors.gridAggregationModelSelector);
   const availableAggregationFunctions = React.useMemo(() => (0, _gridAggregationUtils.getAvailableAggregationFunctions)({
     aggregationFunctions: rootProps.aggregationFunctions,
-    colDef
-  }), [colDef, rootProps.aggregationFunctions]);
+    colDef,
+    isDataSource: !!rootProps.unstable_dataSource
+  }), [colDef, rootProps.aggregationFunctions, rootProps.unstable_dataSource]);
+  const _ref = rootProps.slotProps?.baseSelect || {},
+    {
+      native: isBaseSelectNative = false
+    } = _ref,
+    baseSelectProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const selectedAggregationRule = React.useMemo(() => {
     if (!colDef || !aggregationModel[colDef.field]) {
       return '';
@@ -40,12 +50,13 @@ function GridColumnMenuAggregationItem(props) {
     if ((0, _gridAggregationUtils.canColumnHaveAggregationFunction)({
       colDef,
       aggregationFunctionName,
-      aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName]
+      aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName],
+      isDataSource: !!rootProps.unstable_dataSource
     })) {
       return aggregationFunctionName;
     }
     return '';
-  }, [rootProps.aggregationFunctions, aggregationModel, colDef]);
+  }, [rootProps.aggregationFunctions, rootProps.unstable_dataSource, aggregationModel, colDef]);
   const handleAggregationItemChange = event => {
     const newAggregationItem = event.target?.value || undefined;
     const currentModel = (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef);
@@ -58,11 +69,22 @@ function GridColumnMenuAggregationItem(props) {
     apiRef.current.hideColumnMenu();
   };
   const label = apiRef.current.getLocaleText('aggregationMenuItemHeader');
+  const handleMenuItemKeyDown = React.useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      inputRef.current.focus();
+    }
+  }, []);
+  const handleSelectKeyDown = React.useCallback(event => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === ' ') {
+      event.stopPropagation();
+    }
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
     inert: true,
     iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuAggregationIcon, {
       fontSize: "small"
     }),
+    onKeyDown: handleMenuItemKeyDown,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
       size: "small",
       fullWidth: true,
@@ -71,30 +93,41 @@ function GridColumnMenuAggregationItem(props) {
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
         id: `${id}-label`,
+        htmlFor: `${id}-input`,
         children: label
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseSelect, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseSelect, (0, _extends2.default)({
         labelId: `${id}-label`,
+        inputRef: inputRef,
         id: `${id}-input`,
         value: selectedAggregationRule,
         label: label,
         color: "primary",
         onChange: handleAggregationItemChange,
+        MenuProps: {
+          PaperProps: {
+            onKeyDown: handleSelectKeyDown
+          }
+        },
         onBlur: event => event.stopPropagation(),
-        fullWidth: true,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
+        native: isBaseSelectNative,
+        fullWidth: true
+      }, baseSelectProps, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
           value: "",
           children: "..."
-        }), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
+        })), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/(0, _react.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+          key: aggFunc,
           value: aggFunc,
-          children: (0, _gridAggregationUtils.getAggregationFunctionLabel)({
-            apiRef,
-            aggregationRule: {
-              aggregationFunctionName: aggFunc,
-              aggregationFunction: rootProps.aggregationFunctions[aggFunc]
-            }
-          })
-        }, aggFunc))]
-      })]
+          native: isBaseSelectNative
+        }), (0, _gridAggregationUtils.getAggregationFunctionLabel)({
+          apiRef,
+          aggregationRule: {
+            aggregationFunctionName: aggFunc,
+            aggregationFunction: rootProps.aggregationFunctions[aggFunc]
+          }
+        })))]
+      }))]
     })
   });
 }

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
+      })
     }))
   });
 });
@@ -57,7 +55,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * Aggregation functions available on the grid.
-   * @default GRID_AGGREGATION_FUNCTIONS
+   * @default GRID_AGGREGATION_FUNCTIONS when `unstable_dataSource` is not provided, `{}` when `unstable_dataSource` is provided
    */
   aggregationFunctions: PropTypes.object,
   /**
@@ -1037,6 +1035,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   treeData: PropTypes.bool,
   unstable_dataSource: PropTypes.shape({
+    getAggregatedValue: PropTypes.func,
     getChildrenCount: PropTypes.func,
     getGroupKey: PropTypes.func,
     getRows: PropTypes.func.isRequired,

package/esm/DataGridPremium/useDataGridPremiumComponent.js

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

package/esm/DataGridPremium/useDataGridPremiumProps.js

@@ -45,7 +45,9 @@ export const useDataGridPremiumProps = inProps => {
     defaultSlots,
     slots: themedProps.slots
   }), [themedProps.slots]);
-  return React.useMemo(() => _extends({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps, {
+  return React.useMemo(() => _extends({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps.unstable_dataSource ? {
+    aggregationFunctions: {}
+  } : {}, themedProps, {
     localeText,
     slots
   }, getDataGridPremiumForcedProps(themedProps)), [themedProps, localeText, slots]);