@mui/x-data-grid-premium 8.0.0-alpha.2 → 8.0.0-alpha.3

package/CHANGELOG.md

@@ -5,6 +5,108 @@
 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.3
+
+_Dec 5, 2024_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Support [Server-side lazy loading](https://mui.com/x/react-data-grid/server-side-data/lazy-loading/) on the Data Grid. Use [data source](https://mui.com/x/react-data-grid/server-side-data/#data-source) to fetch a range of rows on demand and update the rows in the same way as described in [Infinite loading](https://mui.com/x/react-data-grid/row-updates/#infinite-loading) and [Lazy loading](https://mui.com/x/react-data-grid/row-updates/#lazy-loading) without the need to use any additional event listeners and callbacks.
+- 🎯 Improved [data caching](https://mui.com/x/react-data-grid/server-side-data/#data-caching). Check out our [recommendations](https://mui.com/x/react-data-grid/server-side-data/#improving-the-cache-hit-rate) for improving the cache hit rate.
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@ihsanberkozcan, @k-rajat19, @perezShaked.
+Following are all team members who have contributed to this release:
+@arminmeh, @cherniavskii, @flaviendelangle, @JCQuintas, @MBilalShafi, @noraleonte.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- The "Select all" checkbox is now checked when all the selectable rows are selected, ignoring rows that are not selectable because of the `isRowSelectable` prop.
+- The `rowPositionsDebounceMs` prop was removed.
+- The `gridRowsDataRowIdToIdLookupSelector` selector was removed. Use the `gridRowsLookupSelector` selector in combination with the `getRowId()` API method instead.
+  ```diff
+  -const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
+  -const rowId = idToIdLookup[id]
+  +const rowsLookup = gridRowsLookupSelector(apiRef);
+  +const rowId = apiRef.current.getRowId(rowsLookup[id])
+  ```
+- The Grid is now more aligned with the WAI-ARIA authoring practices and sets the `role` attribute to `treegrid` if the Data Grid is used with row grouping feature.
+
+#### `@mui/x-data-grid@8.0.0-alpha.3`
+
+- [DataGrid] Fix deselection not working with `isRowSelectable` (#15692) @MBilalShafi
+- [DataGrid] Make column autosizing work with flex columns (#15465) @cherniavskii
+- [DataGrid] Remove `gridRowsDataRowIdToIdLookupSelector` selector (#15698) @arminmeh
+- [DataGrid] Remove `rowPositionsDebounceMs` prop (#15482) @k-rajat19
+- [l10n] Improve Hebrew (he-IL) locale (#15699) @perezShaked
+- [l10n] Improve Turkish (tr-TR) locale (#15734) @ihsanberkozcan
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.3` [![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.3`, plus:
+
+- [DataGridPro] Cleanup pinned rows on removal (#15697) @cherniavskii
+- [DataGridPro] Server-side lazy loading (#13878) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.3` [![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.3`, plus:
+
+- [DataGridPremium] Remove the `ariaV8` experimental flag (#15694) @arminmeh
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The `onOpen()` and `onClose()` methods of the `usePickerContext()` hook have been replaced with a single `setOpen` method — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#usepickercontext).
+
+#### `@mui/x-date-pickers@8.0.0-alpha.3`
+
+- [pickers] Replace the `onOpen()` and `onClose()` methods of `usePickerContext()` with a single `setOpen()` method. (#15701) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.3` [![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.3`.
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-alpha.3`
+
+- [charts] Improve SVG `pattern` and `gradient` support (#15720) @JCQuintas
+
+#### `@mui/x-charts-pro@8.0.0-alpha.3` [![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.3`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.3`
+
+No changes since `@mui/x-tree-view-pro@v8.0.0-alpha.2`.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.3` [![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.3`.
+
+### Docs
+
+- [docs] Add a customization demo for the Date and Time Pickers overview page (#15118) @noraleonte
+- [docs] Fix typo in charts axis documentation (#15743) @JCQuintas
+- [docs] Improve SEO titles for the Data Grid (#15695) @MBilalShafi
+
+### Core
+
+- [core] Add `@mui/x-tree-view-pro` to `releaseChangelog` (#15316) @flaviendelangle
+- [code-infra] Lock file maintenance (#11894)
+- [code-infra] Check if `preset-safe` folder exists in codemod test (#15703) @JCQuintas
+- [code-infra] Import Pickers `preset-safe` into global codemod config (#15659) @JCQuintas
+- [code-infra] Playwright 1.49 (#15493) @JCQuintas
+- [test] Force hover in headless Chrome (#15710) @cherniavskii
+
 ## v8.0.0-alpha.2
 
 _Nov 29, 2024_

package/DataGridPremium/DataGridPremium.js

@@ -311,7 +311,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, then the feature is fully disabled, and neither property nor method calls will have any effect.
    */
   experimentalFeatures: _propTypes.default.shape({
-    ariaV8: _propTypes.default.bool,
     warnIfFocusStateIsNotSynced: _propTypes.default.bool
   }),
   /**
@@ -926,14 +925,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Controls the modes of the rows.
    */
   rowModesModel: _propTypes.default.object,
-  /**
-   * The milliseconds delay to wait after measuring the row height before recalculating row positions.
-   * Setting it to a lower value could be useful when using dynamic row height,
-   * but might reduce performance when displaying a large number of rows.
-   * @default 166
-   * @deprecated
-   */
-  rowPositionsDebounceMs: _propTypes.default.number,
   /**
    * If `true`, the reordering of rows is enabled.
    * @default false
@@ -973,7 +964,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Loading rows can be processed on the server or client-side.
    * Set it to 'client' if you would like enable infnite loading.
    * Set it to 'server' if you would like to enable lazy loading.
-   * * @default "client"
+   * @default "client"
    */
   rowsLoadingMode: _propTypes.default.oneOf(['client', 'server']),
   /**
@@ -987,6 +978,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   scrollbarSize: _propTypes.default.number,
   /**
    * Set the area in `px` at the bottom of the grid viewport where onRowsScrollEnd is called.
+   * If combined with `unstable_lazyLoading`, it defines the area where the next data request is triggered.
    * @default 80
    */
   scrollEndThreshold: _propTypes.default.number,
@@ -1060,6 +1052,18 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     get: _propTypes.default.func.isRequired,
     set: _propTypes.default.func.isRequired
   }),
+  /**
+   * Used together with `unstable_dataSource` to enable lazy loading.
+   * If enabled, the grid stops adding `paginationModel` to the data requests (`getRows`)
+   * and starts sending `start` and `end` values depending on the loading mode and the scroll position.
+   * @default false
+   */
+  unstable_lazyLoading: _propTypes.default.bool,
+  /**
+   * If positive, the Data Grid will throttle data source requests on rendered rows interval change.
+   * @default 500
+   */
+  unstable_lazyLoadingRequestThrottleMs: _propTypes.default.number,
   /**
    * Definition of the column rendered when the `unstable_listView` prop is enabled.
    */

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -97,6 +97,7 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _internals.useGridScroll)(apiRef, props);
   (0, _internals.useGridInfiniteLoader)(apiRef, props);
   (0, _internals.useGridLazyLoader)(apiRef, props);
+  (0, _internals.useGridDataSourceLazyLoader)(apiRef, props);
   (0, _internals.useGridColumnMenu)(apiRef);
   (0, _internals.useGridCsvExport)(apiRef, props);
   (0, _internals.useGridPrintExport)(apiRef, props);

package/esm/DataGridPremium/DataGridPremium.js

@@ -304,7 +304,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, then the feature is fully disabled, and neither property nor method calls will have any effect.
    */
   experimentalFeatures: PropTypes.shape({
-    ariaV8: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
   /**
@@ -919,14 +918,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Controls the modes of the rows.
    */
   rowModesModel: PropTypes.object,
-  /**
-   * The milliseconds delay to wait after measuring the row height before recalculating row positions.
-   * Setting it to a lower value could be useful when using dynamic row height,
-   * but might reduce performance when displaying a large number of rows.
-   * @default 166
-   * @deprecated
-   */
-  rowPositionsDebounceMs: PropTypes.number,
   /**
    * If `true`, the reordering of rows is enabled.
    * @default false
@@ -966,7 +957,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Loading rows can be processed on the server or client-side.
    * Set it to 'client' if you would like enable infnite loading.
    * Set it to 'server' if you would like to enable lazy loading.
-   * * @default "client"
+   * @default "client"
    */
   rowsLoadingMode: PropTypes.oneOf(['client', 'server']),
   /**
@@ -980,6 +971,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   scrollbarSize: PropTypes.number,
   /**
    * Set the area in `px` at the bottom of the grid viewport where onRowsScrollEnd is called.
+   * If combined with `unstable_lazyLoading`, it defines the area where the next data request is triggered.
    * @default 80
    */
   scrollEndThreshold: PropTypes.number,
@@ -1053,6 +1045,18 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     get: PropTypes.func.isRequired,
     set: PropTypes.func.isRequired
   }),
+  /**
+   * Used together with `unstable_dataSource` to enable lazy loading.
+   * If enabled, the grid stops adding `paginationModel` to the data requests (`getRows`)
+   * and starts sending `start` and `end` values depending on the loading mode and the scroll position.
+   * @default false
+   */
+  unstable_lazyLoading: PropTypes.bool,
+  /**
+   * If positive, the Data Grid will throttle data source requests on rendered rows interval change.
+   * @default 500
+   */
+  unstable_lazyLoadingRequestThrottleMs: PropTypes.number,
   /**
    * Definition of the column rendered when the `unstable_listView` prop is enabled.
    */

package/esm/DataGridPremium/useDataGridPremiumComponent.js

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

package/esm/hooks/features/cellSelection/useGridCellSelection.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import ownerDocument from '@mui/utils/ownerDocument';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { getTotalHeaderHeight, getVisibleRows, isNavigationKey, serializeCellValue, useGridRegisterPipeProcessor, useGridVisibleRows } from '@mui/x-data-grid-pro/internals';
-import { useGridApiEventHandler, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridRowsDataRowIdToIdLookupSelector, gridClasses, gridFocusCellSelector, GRID_REORDER_COL_DEF, useGridSelector, gridSortedRowIdsSelector, gridDimensionsSelector } from '@mui/x-data-grid-pro';
+import { useGridApiEventHandler, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridClasses, gridFocusCellSelector, GRID_REORDER_COL_DEF, useGridSelector, gridSortedRowIdsSelector, gridDimensionsSelector } from '@mui/x-data-grid-pro';
 import { gridCellSelectionStateSelector } from "./gridCellSelectionSelector.js";
 export const cellSelectionStateInitializer = (state, props) => _extends({}, state, {
   cellSelection: _extends({}, props.cellSelectionModel ?? props.initialState?.cellSelection)
@@ -91,7 +91,6 @@ export const useGridCellSelection = (apiRef, props) => {
   }, [apiRef, visibleRows.rows]);
   const getSelectedCellsAsArray = React.useCallback(() => {
     const selectionModel = apiRef.current.getCellSelectionModel();
-    const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
     const currentVisibleRows = getVisibleRows(apiRef, props);
     const sortedEntries = currentVisibleRows.rows.reduce((result, row) => {
       if (row.id in selectionModel) {
@@ -103,7 +102,7 @@ export const useGridCellSelection = (apiRef, props) => {
       selectedCells.push(...Object.entries(fields).reduce((selectedFields, [field, isSelected]) => {
         if (isSelected) {
           selectedFields.push({
-            id: idToIdLookup[id],
+            id,
             field
           });
         }

package/esm/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { passFilterLogic, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn } from '@mui/x-data-grid-pro/internals';
+import { passFilterLogic, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn, GridStrategyGroup } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
 export { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn };
 export let RowGroupingStrategy = /*#__PURE__*/function (RowGroupingStrategy) {
@@ -124,7 +124,7 @@ export const setStrategyAvailability = (privateApiRef, disableRowGrouping, dataS
     };
   }
   const strategy = dataSource ? RowGroupingStrategy.DataSource : RowGroupingStrategy.Default;
-  privateApiRef.current.setStrategyAvailability('rowTree', strategy, isAvailable);
+  privateApiRef.current.setStrategyAvailability(GridStrategyGroup.RowTree, strategy, isAvailable);
 };
 export const getCellGroupingCriteria = ({
   row,

package/esm/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiEventHandler, useGridApiMethod, gridColumnLookupSelector } from '@mui/x-data-grid-pro';
-import { useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
+import { useGridRegisterPipeProcessor, GridStrategyGroup } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
 import { getRowGroupingFieldFromGroupingCriteria, RowGroupingStrategy, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability, getGroupingRules, areGroupingRulesEqual } from "./gridRowGroupingUtils.js";
 export const rowGroupingStateInitializer = (state, props, apiRef) => {
@@ -162,7 +162,7 @@ export const useGridRowGrouping = (apiRef, props) => {
 
       // Refresh the row tree creation strategy processing
       // TODO: Add a clean way to re-run a strategy processing without publishing a private event
-      if (apiRef.current.getActiveStrategy('rowTree') === RowGroupingStrategy.Default) {
+      if (apiRef.current.getActiveStrategy(GridStrategyGroup.RowTree) === RowGroupingStrategy.Default) {
         apiRef.current.publishEvent('activeStrategyProcessorChange', 'rowTreeCreation');
       }
     }

package/esm/hooks/utils/useGridAriaAttributes.js

@@ -2,13 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { useGridAriaAttributes as useGridAriaAttributesPro, useGridSelector } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingSanitizedModelSelector } from "../features/rowGrouping/gridRowGroupingSelector.js";
 import { useGridPrivateApiContext } from "./useGridPrivateApiContext.js";
-import { useGridRootProps } from "./useGridRootProps.js";
 export const useGridAriaAttributes = () => {
-  const rootProps = useGridRootProps();
   const ariaAttributesPro = useGridAriaAttributesPro();
   const apiRef = useGridPrivateApiContext();
   const gridRowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector);
-  const ariaAttributesPremium = rootProps.experimentalFeatures?.ariaV8 && gridRowGroupingModel.length > 0 ? {
+  const ariaAttributesPremium = gridRowGroupingModel.length > 0 ? {
     role: 'treegrid'
   } : {};
   return _extends({}, ariaAttributesPro, ariaAttributesPremium);

package/esm/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczMjgzNDgwMDAwMA==";
+  const releaseInfo = "MTczMzM1MzIwMDAwMA==";
   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/cellSelection/useGridCellSelection.js

@@ -100,7 +100,6 @@ const useGridCellSelection = (apiRef, props) => {
   }, [apiRef, visibleRows.rows]);
   const getSelectedCellsAsArray = React.useCallback(() => {
     const selectionModel = apiRef.current.getCellSelectionModel();
-    const idToIdLookup = (0, _xDataGridPro.gridRowsDataRowIdToIdLookupSelector)(apiRef);
     const currentVisibleRows = (0, _internals.getVisibleRows)(apiRef, props);
     const sortedEntries = currentVisibleRows.rows.reduce((result, row) => {
       if (row.id in selectionModel) {
@@ -112,7 +111,7 @@ const useGridCellSelection = (apiRef, props) => {
       selectedCells.push(...Object.entries(fields).reduce((selectedFields, [field, isSelected]) => {
         if (isSelected) {
           selectedFields.push({
-            id: idToIdLookup[id],
+            id,
             field
           });
         }

package/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -154,7 +154,7 @@ const setStrategyAvailability = (privateApiRef, disableRowGrouping, dataSource)
     };
   }
   const strategy = dataSource ? RowGroupingStrategy.DataSource : RowGroupingStrategy.Default;
-  privateApiRef.current.setStrategyAvailability('rowTree', strategy, isAvailable);
+  privateApiRef.current.setStrategyAvailability(_internals.GridStrategyGroup.RowTree, strategy, isAvailable);
 };
 exports.setStrategyAvailability = setStrategyAvailability;
 const getCellGroupingCriteria = ({

package/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -171,7 +171,7 @@ const useGridRowGrouping = (apiRef, props) => {
 
       // Refresh the row tree creation strategy processing
       // TODO: Add a clean way to re-run a strategy processing without publishing a private event
-      if (apiRef.current.getActiveStrategy('rowTree') === _gridRowGroupingUtils.RowGroupingStrategy.Default) {
+      if (apiRef.current.getActiveStrategy(_internals.GridStrategyGroup.RowTree) === _gridRowGroupingUtils.RowGroupingStrategy.Default) {
         apiRef.current.publishEvent('activeStrategyProcessorChange', 'rowTreeCreation');
       }
     }

package/hooks/utils/useGridAriaAttributes.js

@@ -9,13 +9,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _gridRowGroupingSelector = require("../features/rowGrouping/gridRowGroupingSelector");
 var _useGridPrivateApiContext = require("./useGridPrivateApiContext");
-var _useGridRootProps = require("./useGridRootProps");
 const useGridAriaAttributes = () => {
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const ariaAttributesPro = (0, _internals.useGridAriaAttributes)();
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const gridRowGroupingModel = (0, _internals.useGridSelector)(apiRef, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector);
-  const ariaAttributesPremium = rootProps.experimentalFeatures?.ariaV8 && gridRowGroupingModel.length > 0 ? {
+  const ariaAttributesPremium = gridRowGroupingModel.length > 0 ? {
     role: 'treegrid'
   } : {};
   return (0, _extends2.default)({}, ariaAttributesPro, ariaAttributesPremium);

package/index.js

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

package/models/dataGridPremiumProps.d.ts

@@ -8,12 +8,6 @@ import { GridInitialStatePremium } from './gridStatePremium';
 import { GridApiPremium } from './gridApiPremium';
 import { GridCellSelectionModel } from '../hooks/features/cellSelection';
 export interface GridExperimentalPremiumFeatures extends GridExperimentalProFeatures {
-    /**
-     * Enables accessibility improvements that will be enabled by default in V8.
-     * If you rely on the v7 ARIA attributes (e.g. for CSS selectors), this might be a breaking change.
-     * @default false
-     */
-    ariaV8: boolean;
 }
 export interface DataGridPremiumPropsWithComplexDefaultValueBeforeProcessing extends Pick<DataGridPropsWithComplexDefaultValueBeforeProcessing, 'localeText'> {
     /**

package/modern/DataGridPremium/DataGridPremium.js

@@ -304,7 +304,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, then the feature is fully disabled, and neither property nor method calls will have any effect.
    */
   experimentalFeatures: PropTypes.shape({
-    ariaV8: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
   /**
@@ -919,14 +918,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Controls the modes of the rows.
    */
   rowModesModel: PropTypes.object,
-  /**
-   * The milliseconds delay to wait after measuring the row height before recalculating row positions.
-   * Setting it to a lower value could be useful when using dynamic row height,
-   * but might reduce performance when displaying a large number of rows.
-   * @default 166
-   * @deprecated
-   */
-  rowPositionsDebounceMs: PropTypes.number,
   /**
    * If `true`, the reordering of rows is enabled.
    * @default false
@@ -966,7 +957,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Loading rows can be processed on the server or client-side.
    * Set it to 'client' if you would like enable infnite loading.
    * Set it to 'server' if you would like to enable lazy loading.
-   * * @default "client"
+   * @default "client"
    */
   rowsLoadingMode: PropTypes.oneOf(['client', 'server']),
   /**
@@ -980,6 +971,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   scrollbarSize: PropTypes.number,
   /**
    * Set the area in `px` at the bottom of the grid viewport where onRowsScrollEnd is called.
+   * If combined with `unstable_lazyLoading`, it defines the area where the next data request is triggered.
    * @default 80
    */
   scrollEndThreshold: PropTypes.number,
@@ -1053,6 +1045,18 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     get: PropTypes.func.isRequired,
     set: PropTypes.func.isRequired
   }),
+  /**
+   * Used together with `unstable_dataSource` to enable lazy loading.
+   * If enabled, the grid stops adding `paginationModel` to the data requests (`getRows`)
+   * and starts sending `start` and `end` values depending on the loading mode and the scroll position.
+   * @default false
+   */
+  unstable_lazyLoading: PropTypes.bool,
+  /**
+   * If positive, the Data Grid will throttle data source requests on rendered rows interval change.
+   * @default 500
+   */
+  unstable_lazyLoadingRequestThrottleMs: PropTypes.number,
   /**
    * Definition of the column rendered when the `unstable_listView` prop is enabled.
    */

package/modern/DataGridPremium/useDataGridPremiumComponent.js

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

package/modern/hooks/features/cellSelection/useGridCellSelection.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import ownerDocument from '@mui/utils/ownerDocument';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { getTotalHeaderHeight, getVisibleRows, isNavigationKey, serializeCellValue, useGridRegisterPipeProcessor, useGridVisibleRows } from '@mui/x-data-grid-pro/internals';
-import { useGridApiEventHandler, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridRowsDataRowIdToIdLookupSelector, gridClasses, gridFocusCellSelector, GRID_REORDER_COL_DEF, useGridSelector, gridSortedRowIdsSelector, gridDimensionsSelector } from '@mui/x-data-grid-pro';
+import { useGridApiEventHandler, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridClasses, gridFocusCellSelector, GRID_REORDER_COL_DEF, useGridSelector, gridSortedRowIdsSelector, gridDimensionsSelector } from '@mui/x-data-grid-pro';
 import { gridCellSelectionStateSelector } from "./gridCellSelectionSelector.js";
 export const cellSelectionStateInitializer = (state, props) => _extends({}, state, {
   cellSelection: _extends({}, props.cellSelectionModel ?? props.initialState?.cellSelection)
@@ -91,7 +91,6 @@ export const useGridCellSelection = (apiRef, props) => {
   }, [apiRef, visibleRows.rows]);
   const getSelectedCellsAsArray = React.useCallback(() => {
     const selectionModel = apiRef.current.getCellSelectionModel();
-    const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
     const currentVisibleRows = getVisibleRows(apiRef, props);
     const sortedEntries = currentVisibleRows.rows.reduce((result, row) => {
       if (row.id in selectionModel) {
@@ -103,7 +102,7 @@ export const useGridCellSelection = (apiRef, props) => {
       selectedCells.push(...Object.entries(fields).reduce((selectedFields, [field, isSelected]) => {
         if (isSelected) {
           selectedFields.push({
-            id: idToIdLookup[id],
+            id,
             field
           });
         }

package/modern/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { passFilterLogic, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn } from '@mui/x-data-grid-pro/internals';
+import { passFilterLogic, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn, GridStrategyGroup } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
 export { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn };
 export let RowGroupingStrategy = /*#__PURE__*/function (RowGroupingStrategy) {
@@ -124,7 +124,7 @@ export const setStrategyAvailability = (privateApiRef, disableRowGrouping, dataS
     };
   }
   const strategy = dataSource ? RowGroupingStrategy.DataSource : RowGroupingStrategy.Default;
-  privateApiRef.current.setStrategyAvailability('rowTree', strategy, isAvailable);
+  privateApiRef.current.setStrategyAvailability(GridStrategyGroup.RowTree, strategy, isAvailable);
 };
 export const getCellGroupingCriteria = ({
   row,

package/modern/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiEventHandler, useGridApiMethod, gridColumnLookupSelector } from '@mui/x-data-grid-pro';
-import { useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
+import { useGridRegisterPipeProcessor, GridStrategyGroup } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
 import { getRowGroupingFieldFromGroupingCriteria, RowGroupingStrategy, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability, getGroupingRules, areGroupingRulesEqual } from "./gridRowGroupingUtils.js";
 export const rowGroupingStateInitializer = (state, props, apiRef) => {
@@ -162,7 +162,7 @@ export const useGridRowGrouping = (apiRef, props) => {
 
       // Refresh the row tree creation strategy processing
       // TODO: Add a clean way to re-run a strategy processing without publishing a private event
-      if (apiRef.current.getActiveStrategy('rowTree') === RowGroupingStrategy.Default) {
+      if (apiRef.current.getActiveStrategy(GridStrategyGroup.RowTree) === RowGroupingStrategy.Default) {
         apiRef.current.publishEvent('activeStrategyProcessorChange', 'rowTreeCreation');
       }
     }

package/modern/hooks/utils/useGridAriaAttributes.js

@@ -2,13 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { useGridAriaAttributes as useGridAriaAttributesPro, useGridSelector } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingSanitizedModelSelector } from "../features/rowGrouping/gridRowGroupingSelector.js";
 import { useGridPrivateApiContext } from "./useGridPrivateApiContext.js";
-import { useGridRootProps } from "./useGridRootProps.js";
 export const useGridAriaAttributes = () => {
-  const rootProps = useGridRootProps();
   const ariaAttributesPro = useGridAriaAttributesPro();
   const apiRef = useGridPrivateApiContext();
   const gridRowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector);
-  const ariaAttributesPremium = rootProps.experimentalFeatures?.ariaV8 && gridRowGroupingModel.length > 0 ? {
+  const ariaAttributesPremium = gridRowGroupingModel.length > 0 ? {
     role: 'treegrid'
   } : {};
   return _extends({}, ariaAttributesPro, ariaAttributesPremium);

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v8.0.0-alpha.2
+ * @mui/x-data-grid-premium v8.0.0-alpha.3
  *
  * @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 = "MTczMjgzNDgwMDAwMA==";
+  const releaseInfo = "MTczMzM1MzIwMDAwMA==";
   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.2",
+  "version": "8.0.0-alpha.3",
   "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.2",
+    "@mui/x-data-grid": "8.0.0-alpha.3",
     "@mui/x-internals": "8.0.0-alpha.2",
-    "@mui/x-data-grid-pro": "8.0.0-alpha.2",
-    "@mui/x-license": "8.0.0-alpha.2"
+    "@mui/x-license": "8.0.0-alpha.2",
+    "@mui/x-data-grid-pro": "8.0.0-alpha.3"
   },
   "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 = "MTczMjgzNDgwMDAwMA==";
+  const releaseInfo = "MTczMzM1MzIwMDAwMA==";
   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