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

package/CHANGELOG.md

@@ -5,6 +5,235 @@
 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.4
+
+_Dec 13, 2024_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Romanian locale on the Data Grid and Pickers
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@k-rajat19, @nusr, @rares985, @zivl.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- The selectors signature has been updated due to the support of arguments in the selectors. Pass `undefined` as `arguments` if the selector doesn't use any arguments.
+
+  ```diff
+  -mySelector(state, instanceId)
+  +mySelector(state, arguments, instanceId)
+  ```
+
+- The `useGridSelector` signature has been updated due to the introduction of arguments parameter in the selectors. Pass `undefined` as `arguments` if the selector doesn't use any arguments.
+
+  ```diff
+  -const output = useGridSelector(apiRef, selector, equals)
+  +const output = useGridSelector(apiRef, selector, arguments, equals)
+  ```
+- The default variant for text fields and selects in the filter panel has been changed to `outlined`.
+- The "row spanning" feature is now stable.
+  ```diff
+   <DataGrid
+  -  unstable_rowSpanning
+  +  rowSpanning
+   />
+  ```
+- Selected row is now deselected when clicked again.
+
+#### `@mui/x-data-grid@8.0.0-alpha.4`
+
+- [DataGrid] Deselect selected row on click (#15509) @k-rajat19
+- [DataGrid] Fix "No rows" displaying when all rows are pinned (#15335) @nusr
+- [DataGrid] Make row spanning feature stable (#15742) @MBilalShafi
+- [DataGrid] Round dimensions to avoid subpixel rendering error (#15850) @KenanYusuf
+- [DataGrid] Toggle menu on click in `<GridActionsCell />` (#15867) @k-rajat19
+- [DataGrid] Trigger row spanning computation on rows update (#15858) @MBilalShafi
+- [DataGrid] Update filter panel input variant (#15807) @KenanYusuf
+- [DataGrid] Use `columnsManagement` slot (#15817) @k-rajat19
+- [DataGrid] Use new selector signature (#15200) @MBilalShafi
+- [l10n] Improve Romanian (ro-RO) locale (#15745) @rares985
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.4` [![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.4`, plus:
+
+- [DataGridPro] Make row reordering work with pagination (#15355) @k-rajat19
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.4` [![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.4`, plus:
+
+- [DataGridPremium] Fix group column ignoring `valueOptions` for `singleSelect` column type (#15739) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-alpha.4`
+
+- [l10n] Improve Romanian (ro-RO) locale (#15745) @rares985
+- [pickers] Clean `usePicker` logic (#15763) @flaviendelangle
+- [pickers] Rename layout `ownerState` property from `isRtl` to `layoutDirection` (#15803) @flaviendelangle
+- [pickers] Use the new `ownerState` in `useClearableField` (#15776) @flaviendelangle
+- [pickers] Use the new `ownerState` in the toolbar components (#15777) @flaviendelangle
+- [pickers] Use the new `ownerState` object for the clock components and the desktop / mobile wrappers (#15669) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.4` [![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.4`.
+
+### Charts
+
+#### Breaking changes
+
+- The default styling of the charts tooltip has been updated.
+
+#### `@mui/x-charts@8.0.0-alpha.4`
+
+- [charts] Fix hydration missmatch (#15647) @alexfauquette
+- [charts] Fix internal spelling typo (#15805) @zivl
+- [charts] Fix scatter dataset with missing data (#15802) @alexfauquette
+- [charts] HTML Labels (#15813) @JCQuintas
+- [charts] Only access store values by using hooks (#15764) @alexfauquette
+- [charts] Update Tooltip style (#15630) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-alpha.4` [![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.4`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.4`
+
+No changes, releasing to keep the versions in sync.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Releasing to benefit from license package fix (#15814).
+
+### Docs
+
+- [docs] Clean Joy and Browser custom field demos (#15707) @flaviendelangle
+- [docs] Fix outdated link to handbook (#15855) @oliviertassinari
+- [docs] Improve Pickers accessible DOM migration section description (#15596) @LukasTy
+- [docs] Use `updateRows` method for list view demos (#15732) @KenanYusuf
+- [docs] Use date library version from package dev dependencies for sandboxes (#15762) @LukasTy
+
+### Core
+
+- [code-infra] Add Charts sandbox generation (#15830) @JCQuintas
+- [code-infra] Remove redundant `@type/react-test-renderer` dep (#15766) @LukasTy
+- [license] Use `console.log` for the error message on Codesandbox to avoid rendering error (#15814) @arminmeh
+
+## 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_
@@ -465,6 +694,153 @@ Same changes as in `@mui/x-charts@8.0.0-alpha.0`.
 - [release] v8 preparation (#15054) @michelengelen
 - [test] Fix advanced list view regression test snapshot (#15260) @KenanYusuf
 
+## 7.23.2
+
+_Dec 12, 2024_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Romanian and Turkish locales on the Data Grid
+- 🌍 Improve Romanian locale on the Pickers
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@ihsanberkozcan, @k-rajat19, @lhilgert9, @nusr, @rares985.
+
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.23.2`
+
+- [DataGrid] Fix "No rows" displaying when all rows are pinned (#15851) @nusr
+- [DataGrid] Use `columnsManagement` slot (#15821) @k-rajat19
+- [l10n] Improve Romanian (ro-RO) locale (#15751) @rares985
+- [l10n] Improve Turkish (tr-TR) locale (#15748) @ihsanberkozcan
+
+#### `@mui/x-data-grid-pro@7.23.2` [![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@7.23.2`, plus:
+
+- [DataGridPro] Make Row reordering work with pagination (#15782) @k-rajat19
+
+#### `@mui/x-data-grid-premium@7.23.2` [![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@7.23.2`, plus:
+
+- [DataGridPremium] Fix group column ignoring `valueOptions` for `singleSelect` column type (#15754) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.23.2`
+
+- [l10n] Improve Romanian (ro-RO) locale (#15751) @rares985
+
+#### `@mui/x-date-pickers-pro@7.23.2` [![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@7.23.2`.
+
+### Charts
+
+#### `@mui/x-charts@7.23.2`
+
+- [charts] Fix key generation for the ChartsGrid (#15864) @alexfauquette
+- [charts] Fix scatter dataset with missing data (#15804) @alexfauquette
+
+#### `@mui/x-charts-pro@7.23.2` [![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@7.23.2`.
+
+#### `@mui/x-tree-view@v7.23.2`
+
+No changes, releasing to keep the versions in sync.
+
+#### `@mui/x-tree-view-pro@7.23.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Releasing to benefit from license package fix (#15818).
+
+### Docs
+
+- [docs] Fix typo in charts axis documentation (#15746) @JCQuintas
+- [docs] Improve Pickers accessible DOM structure description (#15752) @LukasTy
+- [docs] Use `updateRows` method for list view demos (#15824) @KenanYusuf
+- [docs] Use date library version from package dev dependencies for sandboxes (#15767) @LukasTy
+
+### Core
+
+- [core] Add `@mui/x-tree-view-pro` to `releaseChangelog` (#15747) @flaviendelangle
+- [license] Use `console.log` for the error message on Codesandbox to avoid rendering error (#15818) @arminmeh
+
+## 7.23.1
+
+_Dec 5, 2024_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve German locale on the Data Grid component
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@lhilgert9.
+
+Following are all team members who have contributed to this release:
+@arthurbalduini, @cherniavskii, @flaviendelangle, @JCQuintas, @LukasTy and @MBilalShafi.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.23.1`
+
+- [DataGrid] Make column autosizing work with flex columns (#15712) @cherniavskii
+- [l10n] Improve German (de-DE) locale (#15641) @lhilgert9
+
+#### `@mui/x-data-grid-pro@7.23.1` [![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@7.23.1`, plus:
+
+- [DataGridPro] Cleanup pinned rows on removal (#15702) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.23.1` [![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@7.23.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.23.1`
+
+- [TimePicker] Prevent mouse events after `touchend` event (#15430) @arthurbalduini
+
+#### `@mui/x-date-pickers-pro@7.23.1` [![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@7.23.1`.
+
+### Charts
+
+#### `@mui/x-charts@7.23.1`
+
+- [charts] Improve SVG `pattern` and `gradient` support (#15724) @JCQuintas
+
+#### `@mui/x-charts-pro@7.23.1` [![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@7.23.1`.
+
+### Docs
+
+- [docs] Fix Pickers theme augmentation example (#15675) @LukasTy
+- [docs] Remove duplicated warning (#15715) @cherniavskii
+- [test] Force hover in headless Chrome (#15711) @cherniavskii
+- [docs-infra] Bump `@mui/internal-markdown` to support nested demo imports (#15738) @alexfauquette
+- [docs] Improve SEO titles for the Data Grid (#15695) @MBilalShafi
+
+### Core
+
+- [core] Add `@mui/x-tree-view-pro` to `releaseChangelog` (#15747) @flaviendelangle
+
 ## 7.23.0
 
 _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']),
   /**
@@ -981,12 +972,18 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default "margin"
    */
   rowSpacingType: _propTypes.default.oneOf(['border', 'margin']),
+  /**
+   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * @default false
+   */
+  rowSpanning: _propTypes.default.bool,
   /**
    * Override the height/width of the Data Grid inner scrollbar.
    */
   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 +1057,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.
    */
@@ -1076,11 +1085,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   unstable_listView: _propTypes.default.bool,
   unstable_onDataSourceError: _propTypes.default.func,
-  /**
-   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
-   * @default false
-   */
-  unstable_rowSpanning: _propTypes.default.bool,
   /**
    * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
    * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.

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/README.md

@@ -1,7 +1,7 @@
 # MUI X Data Grid Premium
 
 This package is the Premium plan edition of the Data Grid components.
-It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
+It's part of [MUI X](https://mui.com/x/), an open-core extension of our Core libraries, with advanced components.
 
 ## Installation
 

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']),
   /**
@@ -974,12 +965,18 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default "margin"
    */
   rowSpacingType: PropTypes.oneOf(['border', 'margin']),
+  /**
+   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * @default false
+   */
+  rowSpanning: PropTypes.bool,
   /**
    * Override the height/width of the Data Grid inner scrollbar.
    */
   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 +1050,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.
    */
@@ -1069,11 +1078,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   unstable_listView: PropTypes.bool,
   unstable_onDataSourceError: PropTypes.func,
-  /**
-   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
-   * @default false
-   */
-  unstable_rowSpanning: PropTypes.bool,
   /**
    * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
    * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.

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/createGroupingColDef.js

@@ -32,7 +32,9 @@ const GROUPING_COL_DEF_FORCED_PROPERTIES_DATA_SOURCE = _extends({}, GROUPING_COL
  * TODO: Make this index comparator depth invariant, the logic should not be inverted when sorting in the "desc" direction (but the current return format of `sortComparator` does not support this behavior).
  */
 const groupingFieldIndexComparator = (v1, v2, cellParams1, cellParams2) => {
-  const model = gridRowGroupingSanitizedModelSelector(cellParams1.api.state, cellParams1.api.instanceId);
+  const model = gridRowGroupingSanitizedModelSelector({
+    current: cellParams1.api
+  });
   const groupingField1 = cellParams1.rowNode.groupingField ?? null;
   const groupingField2 = cellParams2.rowNode.groupingField ?? null;
   if (groupingField1 === groupingField2) {
@@ -63,10 +65,12 @@ const getLeafProperties = leafColDef => ({
     return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2);
   }
 });
+const groupedByColValueFormatter = groupedByColDef => (value, row, _, apiRef) => groupedByColDef.valueFormatter(value, row, groupedByColDef, apiRef);
 const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
   const properties = {
     sortable: groupedByColDef.sortable,
     filterable: groupedByColDef.filterable,
+    valueFormatter: groupedByColDef.valueFormatter ? groupedByColValueFormatter(groupedByColDef) : undefined,
     valueOptions: isSingleSelectColDef(groupedByColDef) ? groupedByColDef.valueOptions : undefined,
     sortComparator: (v1, v2, cellParams1, cellParams2) => {
       // We only want to sort the groups of the current grouping criteria

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 = "MTczNDA0MDgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

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

@@ -5,9 +5,9 @@ export declare const gridAggregationStateSelector: (state: GridStatePremium) =>
  * If a column is not in the model, it is not aggregated.
  * @category Aggregation
  */
-export declare const gridAggregationModelSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, import("./gridAggregationInterfaces").GridAggregationModel>;
+export declare const gridAggregationModelSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, import("./gridAggregationInterfaces").GridAggregationState, import("./gridAggregationInterfaces").GridAggregationModel>;
 /**
  * Get the aggregation results as a lookup.
  * @category Aggregation
  */
-export declare const gridAggregationLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, import("./gridAggregationInterfaces").GridAggregationLookup>;
+export declare const gridAggregationLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, import("./gridAggregationInterfaces").GridAggregationState, import("./gridAggregationInterfaces").GridAggregationLookup>;

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/createGroupingColDef.js

@@ -40,7 +40,9 @@ const GROUPING_COL_DEF_FORCED_PROPERTIES_DATA_SOURCE = (0, _extends2.default)({}
  * TODO: Make this index comparator depth invariant, the logic should not be inverted when sorting in the "desc" direction (but the current return format of `sortComparator` does not support this behavior).
  */
 const groupingFieldIndexComparator = (v1, v2, cellParams1, cellParams2) => {
-  const model = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)(cellParams1.api.state, cellParams1.api.instanceId);
+  const model = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)({
+    current: cellParams1.api
+  });
   const groupingField1 = cellParams1.rowNode.groupingField ?? null;
   const groupingField2 = cellParams2.rowNode.groupingField ?? null;
   if (groupingField1 === groupingField2) {
@@ -71,10 +73,12 @@ const getLeafProperties = leafColDef => ({
     return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2);
   }
 });
+const groupedByColValueFormatter = groupedByColDef => (value, row, _, apiRef) => groupedByColDef.valueFormatter(value, row, groupedByColDef, apiRef);
 const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
   const properties = {
     sortable: groupedByColDef.sortable,
     filterable: groupedByColDef.filterable,
+    valueFormatter: groupedByColDef.valueFormatter ? groupedByColValueFormatter(groupedByColDef) : undefined,
     valueOptions: (0, _internals.isSingleSelectColDef)(groupedByColDef) ? groupedByColDef.valueOptions : undefined,
     sortComparator: (v1, v2, cellParams1, cellParams2) => {
       // We only want to sort the groups of the current grouping criteria

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

@@ -1,3 +1,3 @@
 import { GridStatePremium } from '../../../models/gridStatePremium';
-export declare const gridRowGroupingModelSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, import("./gridRowGroupingInterfaces").GridRowGroupingModel>;
-export declare const gridRowGroupingSanitizedModelSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, string[]>;
+export declare const gridRowGroupingModelSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, import("./gridRowGroupingInterfaces").GridRowGroupingState, import("./gridRowGroupingInterfaces").GridRowGroupingModel>;
+export declare const gridRowGroupingSanitizedModelSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, import("@mui/x-data-grid").GridColumnLookup, string[]>;

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.4
  *
  * @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']),
   /**
@@ -974,12 +965,18 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default "margin"
    */
   rowSpacingType: PropTypes.oneOf(['border', 'margin']),
+  /**
+   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * @default false
+   */
+  rowSpanning: PropTypes.bool,
   /**
    * Override the height/width of the Data Grid inner scrollbar.
    */
   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 +1050,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.
    */
@@ -1069,11 +1078,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   unstable_listView: PropTypes.bool,
   unstable_onDataSourceError: PropTypes.func,
-  /**
-   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
-   * @default false
-   */
-  unstable_rowSpanning: PropTypes.bool,
   /**
    * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
    * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.

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/createGroupingColDef.js

@@ -32,7 +32,9 @@ const GROUPING_COL_DEF_FORCED_PROPERTIES_DATA_SOURCE = _extends({}, GROUPING_COL
  * TODO: Make this index comparator depth invariant, the logic should not be inverted when sorting in the "desc" direction (but the current return format of `sortComparator` does not support this behavior).
  */
 const groupingFieldIndexComparator = (v1, v2, cellParams1, cellParams2) => {
-  const model = gridRowGroupingSanitizedModelSelector(cellParams1.api.state, cellParams1.api.instanceId);
+  const model = gridRowGroupingSanitizedModelSelector({
+    current: cellParams1.api
+  });
   const groupingField1 = cellParams1.rowNode.groupingField ?? null;
   const groupingField2 = cellParams2.rowNode.groupingField ?? null;
   if (groupingField1 === groupingField2) {
@@ -63,10 +65,12 @@ const getLeafProperties = leafColDef => ({
     return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2);
   }
 });
+const groupedByColValueFormatter = groupedByColDef => (value, row, _, apiRef) => groupedByColDef.valueFormatter(value, row, groupedByColDef, apiRef);
 const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
   const properties = {
     sortable: groupedByColDef.sortable,
     filterable: groupedByColDef.filterable,
+    valueFormatter: groupedByColDef.valueFormatter ? groupedByColValueFormatter(groupedByColDef) : undefined,
     valueOptions: isSingleSelectColDef(groupedByColDef) ? groupedByColDef.valueOptions : undefined,
     sortComparator: (v1, v2, cellParams1, cellParams2) => {
       // We only want to sort the groups of the current grouping criteria

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.4
  *
  * @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 = "MTczNDA0MDgwMDAwMA==";
   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.4",
   "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-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-data-grid-pro": "8.0.0-alpha.4",
+    "@mui/x-data-grid": "8.0.0-alpha.4",
+    "@mui/x-license": "8.0.0-alpha.4",
+    "@mui/x-internals": "8.0.0-alpha.2"
   },
   "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 = "MTczNDA0MDgwMDAwMA==";
   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