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

package/CHANGELOG.md

@@ -5,6 +5,132 @@
 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.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 +230,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

@@ -64,7 +64,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 +1044,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.MutableRefObject<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");
@@ -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

@@ -57,7 +57,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 +1037,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";
@@ -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]);

package/esm/components/GridColumnMenuAggregationItem.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["native"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGridSelector } from '@mui/x-data-grid-pro';
@@ -12,18 +13,27 @@ import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { canColumnHaveAggregationFunction, getAggregationFunctionLabel, getAvailableAggregationFunctions } from "../hooks/features/aggregation/gridAggregationUtils.js";
 import { gridAggregationModelSelector } from "../hooks/features/aggregation/gridAggregationSelectors.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 function GridColumnMenuAggregationItem(props) {
   const {
     colDef
   } = props;
   const apiRef = useGridApiContext();
+  const inputRef = React.useRef(null);
   const rootProps = useGridRootProps();
   const id = useId();
   const aggregationModel = useGridSelector(apiRef, gridAggregationModelSelector);
   const availableAggregationFunctions = React.useMemo(() => getAvailableAggregationFunctions({
     aggregationFunctions: rootProps.aggregationFunctions,
-    colDef
-  }), [colDef, rootProps.aggregationFunctions]);
+    colDef,
+    isDataSource: !!rootProps.unstable_dataSource
+  }), [colDef, rootProps.aggregationFunctions, rootProps.unstable_dataSource]);
+  const _ref = rootProps.slotProps?.baseSelect || {},
+    {
+      native: isBaseSelectNative = false
+    } = _ref,
+    baseSelectProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const selectedAggregationRule = React.useMemo(() => {
     if (!colDef || !aggregationModel[colDef.field]) {
       return '';
@@ -32,12 +42,13 @@ function GridColumnMenuAggregationItem(props) {
     if (canColumnHaveAggregationFunction({
       colDef,
       aggregationFunctionName,
-      aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName]
+      aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName],
+      isDataSource: !!rootProps.unstable_dataSource
     })) {
       return aggregationFunctionName;
     }
     return '';
-  }, [rootProps.aggregationFunctions, aggregationModel, colDef]);
+  }, [rootProps.aggregationFunctions, rootProps.unstable_dataSource, aggregationModel, colDef]);
   const handleAggregationItemChange = event => {
     const newAggregationItem = event.target?.value || undefined;
     const currentModel = gridAggregationModelSelector(apiRef);
@@ -50,11 +61,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__*/_jsx(rootProps.slots.baseMenuItem, {
     inert: true,
     iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuAggregationIcon, {
       fontSize: "small"
     }),
+    onKeyDown: handleMenuItemKeyDown,
     children: /*#__PURE__*/_jsxs(FormControl, {
       size: "small",
       fullWidth: true,
@@ -63,30 +85,41 @@ function GridColumnMenuAggregationItem(props) {
       },
       children: [/*#__PURE__*/_jsx(InputLabel, {
         id: `${id}-label`,
+        htmlFor: `${id}-input`,
         children: label
-      }), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, {
+      }), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, _extends({
         labelId: `${id}-label`,
+        inputRef: inputRef,
         id: `${id}-input`,
         value: selectedAggregationRule,
         label: label,
         color: "primary",
         onChange: handleAggregationItemChange,
+        MenuProps: {
+          PaperProps: {
+            onKeyDown: handleSelectKeyDown
+          }
+        },
         onBlur: event => event.stopPropagation(),
-        fullWidth: true,
-        children: [/*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
+        native: isBaseSelectNative,
+        fullWidth: true
+      }, baseSelectProps, {
+        children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
           value: "",
           children: "..."
-        }), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
+        })), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+          key: aggFunc,
           value: aggFunc,
-          children: getAggregationFunctionLabel({
-            apiRef,
-            aggregationRule: {
-              aggregationFunctionName: aggFunc,
-              aggregationFunction: rootProps.aggregationFunctions[aggFunc]
-            }
-          })
-        }, aggFunc))]
-      })]
+          native: isBaseSelectNative
+        }), getAggregationFunctionLabel({
+          apiRef,
+          aggregationRule: {
+            aggregationFunctionName: aggFunc,
+            aggregationFunction: rootProps.aggregationFunctions[aggFunc]
+          }
+        })))]
+      }))]
     })
   });
 }