@mui/x-data-grid-pro 8.1.0 → 8.2.0

package/CHANGELOG.md

@@ -5,13 +5,128 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.2.0
+
+_May 1, 2025_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 `<FunnelChart/>` now uses the `strawberrySky` sequential color palette by default.
+  <img width="481" alt="Screenshot 2025-04-29 at 13 55 21" src="https://github.com/user-attachments/assets/182085d1-a7ce-4e4d-9d8d-a4fe87f27167" />
+- 📊 Add API to export a chart as an image: `apiRef.exportAsImage` — [Learn more](https://mui.com/x/react-charts/export/#export-as-image).
+
+Special thanks go out to the community members for their valuable contributions:
+@federico-ntr, @nusr.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @hasdfa, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @oliviertassinari, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.2.0`
+
+- [DataGrid] Fix panel alignment (#17625) @KenanYusuf
+- [DataGrid] Fix theme `defaultProps` causing unwanted re-renders (#17490) @KenanYusuf
+- [DataGrid] Fix circular reference error (#17591) @romgrk
+- [DataGrid] Fix `<GridEditInputCell />` break input (#16773) @nusr
+
+#### `@mui/x-data-grid-pro@8.2.0` [![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.2.0`, plus:
+
+- [DataGridPro] Use intersection observer to trigger server-side infinite loading (#17369) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.2.0` [![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.2.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.2.0`
+
+- [l10n] Improve Italian (it-IT) locale (#17600) @federico-ntr
+- [pickers] Refactor owner state typing (#17517) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.2.0` [![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.2.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.2.0`
+
+- [charts] Add library name to errors (#17547) @bernardobelchior
+- [charts] Add monochrome palettes (#17610) @JCQuintas
+- [charts] Add screenshot of the tooltip (#17395) @alexfauquette
+- [charts] Default bar chart x-axis scale type to band (#17519) @bernardobelchior
+- [charts] Document axis ID uniqueness constraints (#17630) @bernardobelchior
+- [charts] Refactor axis types (#17632) @bernardobelchior
+- [charts] Use `<circle />` for circular legend mark (#17590) @alexfauquette
+
+#### `@mui/x-charts-pro@8.2.0` [![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.2.0`, plus:
+
+- [charts-pro] Add `gap` option to `<FunnelChart />` (#17642) @JCQuintas
+- [charts-pro] Export charts as image (#17353) @bernardobelchior
+- [charts-pro] Simplify zoom testing (#17525) @JCQuintas
+- [charts-pro] Use new sequential color palette in `<FunnelChart />` (#17606) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.2.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.2.0` [![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.2.0`.
+
+### Docs
+
+- [docs][charts] Add composition sections (#17377) @alexfauquette
+- [docs][charts] Add docs on tooltip style (#17601) @bernardobelchior
+- [docs][charts] Fix highlighting heading structure (#17581) @oliviertassinari
+- [docs][charts] Improve export docs (#17538) @oliviertassinari
+- [docs][charts] Similar introduction on most charts pages (#17374) @alexfauquette
+- [docs][DataGrid] Clear component docs (#17540) @oliviertassinari
+- [docs] Explicitly state that `groupingColDef` reference needs to be stable (#17544) @arminmeh
+- [docs] Fix <kbd> a11y (#17536) @oliviertassinari
+- [docs] Fix CodeSandbox spelling @oliviertassinari
+- [docs] Fix coding style function @oliviertassinari
+- [docs] Fix migration guide format (#17450) @oliviertassinari
+- [docs] Improve data grid export docs (#17551) @MBilalShafi
+- [docs] Remove leftover `@next` usages (#17542) @LukasTy
+
+### Core
+
+- [core] Add security label to dependabot PRs @oliviertassinari
+- [core] Allow post-install vale @oliviertassinari
+- [core] Component consistency @oliviertassinari
+- [core] Fix all Vale errors @oliviertassinari
+- [core] Move `loadStyleSheets` to internals and use it in data grid and charts (#17548) @bernardobelchior
+- [core] Remove empty version (#17582) @oliviertassinari
+- [core] Remove eslint from codemod spec files (#17443) @alexfauquette
+- [core] Remove unnecessary versions (#17597) @oliviertassinari
+- [code-infra] Allow postinstall scripts for packages requesting it (#17635) @LukasTy
+- [code-infra] Data Grid `vitest` changes (#17619) @JCQuintas
+- [code-infra] Fix date-time sensitive tests (#17644) @JCQuintas
+- [code-infra] Fix extension handling for type imports (#17636) @Janpot
+- [code-infra] Further remove `clock=fake` and add `async act` for datagrid (#17563) @JCQuintas
+- [code-infra] Latest vitest picker changes (#17577) @JCQuintas
+- [docs-infra] Fix Vale no longer working (#17602) @alexfauquette
+- [docs-infra] Uniformize Vale between repositories @oliviertassinari
+- [infra] Updates to `branch switch comments` (#17589) @michelengelen
+- [x-telemetry] Fix issue with get machineid hash (#17614) @hasdfa
+
 ## 8.1.0
 
 _Apr 24, 2025_
 
 We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
 
-- 📊 Add API to print a chart or export it as PDF: `apiRef.exportAsPrint`.
+- 📊 Add API to print a chart or export it as PDF: `apiRef.exportAsPrint()`.
 - 📚 Documentation improvements
 - 🐞 Bugfixes
 
@@ -56,7 +171,7 @@ Same changes as in `@mui/x-date-pickers@8.1.0`.
 
 ### Charts
 
-- Add API to print a chart or export it as PDF: `apiRef.exportAsPrint`.
+- Add API to print a chart or export it as PDF: `apiRef.exportAsPrint()`.
 
 #### `@mui/x-charts@8.1.0`
 
@@ -1821,7 +1936,7 @@ Same changes as in `@mui/x-tree-view@8.0.0-alpha.8`.
 - [docs] Add example for custom legend (#16169) @alexfauquette
 - [docs] Add full custom field creation example (#15194) @flaviendelangle
 - [docs] Copyedit the Data Grid cell selection page (#16099) @samuelsycamore
-- [docs] Fix demo rendering issue on Codesandbox (#16118) @arminmeh
+- [docs] Fix demo rendering issue on CodeSandbox (#16118) @arminmeh
 - [docs] Remove broken links (#16167) @alexfauquette
 - [docs] Split the Data Grid editing page (#14931) @MBilalShafi
 - [docs] Fix wrong props warnings (#16119) @JCQuintas
@@ -2268,7 +2383,7 @@ Releasing to benefit from license package fix (#15814).
 
 - [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
+- [license] Use `console.log` for the error message on CodeSandbox to avoid rendering error (#15814) @arminmeh
 
 ## 8.0.0-alpha.3
 
@@ -2484,6 +2599,8 @@ Same changes as in `@mui/x-tree-view@v8.0.0-alpha.2`.
 
 ### Docs
 
+<!-- vale MUI.CorrectRererenceCased = NO -->
+
 - [docs] Fix 404 links (#15575) @oliviertassinari
 - [docs] Fix bash comments (#15571) @oliviertassinari
 - [docs] Fix Pickers theme augmentation example (#15672) @LukasTy
@@ -2493,6 +2610,8 @@ Same changes as in `@mui/x-tree-view@v8.0.0-alpha.2`.
 - [docs] Fix `anchorEl` API page for charts (#15625) @oliviertassinari
 - [docs] Add documentation for the list view feature (#15344) @KenanYusuf
 
+<!-- vale MUI.CorrectRererenceCased = YES -->
+
 ### Core
 
 - [core] Follow `()` function convention for docs @oliviertassinari
@@ -3401,7 +3520,7 @@ Same changes as in `@mui/x-tree-view@7.24.0`.
 ### Docs
 
 - [docs] Copyedit the Data Grid cell selection page (#16213) @samuelsycamore
-- [docs] Fix demo rendering issue on Codesandbox (#16129) @arminmeh
+- [docs] Fix demo rendering issue on CodeSandbox (#16129) @arminmeh
 
 ### Core
 
@@ -3679,7 +3798,7 @@ Releasing to benefit from license package fix (#15818).
 ### 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
+- [license] Use `console.log` for the error message on CodeSandbox to avoid rendering error (#15818) @arminmeh
 
 ## 7.23.1
 
@@ -7020,7 +7139,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`.
    />
   ```
 
-- The headless field hooks (e.g.: `useDateField`) now returns a new prop called `enableAccessibleFieldDOMStructure`.
+- The headless field hooks (for example `useDateField()`) now returns a new prop called `enableAccessibleFieldDOMStructure`.
   This property is utilized to determine whether the anticipated UI is constructed using an accessible DOM structure.
   Learn more about this new accessible DOM structure in the [v8 migration guide](https://v7.mui.com/x/migration/migration-pickers-v7/#new-dom-structure-for-the-field).
 

package/DataGridPro/DataGridPro.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GridValidRowModel } from '@mui/x-data-grid';
 import { DataGridProProps } from "../models/dataGridProProps.js";
-export type { GridProSlotsComponent as GridSlots } from '../models';
+export type { GridProSlotsComponent as GridSlots } from "../models/index.js";
 interface DataGridProComponent {
   <R extends GridValidRowModel = any>(props: DataGridProProps<R> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
   propTypes?: any;

package/DataGridPro/DataGridPro.js

@@ -29,7 +29,7 @@ const configuration = {
     useCellAggregationResult: () => null
   }
 };
-const releaseInfo = "MTc0NTQ0NTYwMDAwMA==";
+const releaseInfo = "MTc0NjA0NjgwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo

package/DataGridPro/useDataGridProComponent.js

@@ -22,6 +22,7 @@ var _useGridRowPinning = require("../hooks/features/rowPinning/useGridRowPinning
 var _useGridRowPinningPreProcessors = require("../hooks/features/rowPinning/useGridRowPinningPreProcessors");
 var _useGridDataSourcePro = require("../hooks/features/dataSource/useGridDataSourcePro");
 var _useGridDataSourceLazyLoader = require("../hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader");
+var _useGridInfiniteLoadingIntersection = require("../hooks/features/serverSideLazyLoader/useGridInfiniteLoadingIntersection");
 // Pro-only features
 
 const useDataGridProComponent = (apiRef, props) => {
@@ -98,6 +99,7 @@ const useDataGridProComponent = (apiRef, props) => {
   (0, _useGridInfiniteLoader.useGridInfiniteLoader)(apiRef, props);
   (0, _useGridLazyLoader.useGridLazyLoader)(apiRef, props);
   (0, _useGridDataSourceLazyLoader.useGridDataSourceLazyLoader)(apiRef, props);
+  (0, _useGridInfiniteLoadingIntersection.useGridInfiniteLoadingIntersection)(apiRef, props);
   (0, _internals.useGridColumnMenu)(apiRef);
   (0, _internals.useGridCsvExport)(apiRef, props);
   (0, _internals.useGridPrintExport)(apiRef, props);

package/DataGridPro/useDataGridProProps.js

@@ -9,6 +9,7 @@ exports.useDataGridProProps = exports.DATA_GRID_PRO_PROPS_DEFAULT_VALUES = void
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
 var _dataGridProDefaultSlotsComponents = require("../constants/dataGridProDefaultSlotsComponents");
@@ -44,12 +45,12 @@ const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PRO_PROPS_DEFAULT_V
 });
 const defaultSlots = _dataGridProDefaultSlotsComponents.DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS;
 const useDataGridProProps = inProps => {
-  const themedProps =
-  // eslint-disable-next-line material-ui/mui-name-matches-component-name
-  (0, _styles.useThemeProps)({
+  const theme = (0, _styles.useTheme)();
+  const themedProps = React.useMemo(() => (0, _system.getThemeProps)({
     props: inProps,
+    theme,
     name: 'MuiDataGrid'
-  });
+  }), [theme, inProps]);
   const localeText = React.useMemo(() => (0, _extends2.default)({}, _xDataGrid.GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
   const slots = React.useMemo(() => (0, _internals.computeSlots)({
     defaultSlots,

package/constants/dataGridProDefaultSlotsComponents.d.ts

@@ -1,2 +1,2 @@
-import type { GridProSlotsComponent } from '../models';
+import type { GridProSlotsComponent } from "../models/index.js";
 export declare const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS: GridProSlotsComponent;

package/esm/DataGridPro/DataGridPro.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GridValidRowModel } from '@mui/x-data-grid';
 import { DataGridProProps } from "../models/dataGridProProps.js";
-export type { GridProSlotsComponent as GridSlots } from '../models';
+export type { GridProSlotsComponent as GridSlots } from "../models/index.js";
 interface DataGridProComponent {
   <R extends GridValidRowModel = any>(props: DataGridProProps<R> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
   propTypes?: any;

package/esm/DataGridPro/DataGridPro.js

@@ -22,7 +22,7 @@ const configuration = {
     useCellAggregationResult: () => null
   }
 };
-const releaseInfo = "MTc0NTQ0NTYwMDAwMA==";
+const releaseInfo = "MTc0NjA0NjgwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo

package/esm/DataGridPro/useDataGridProComponent.js

@@ -17,6 +17,7 @@ import { useGridRowPinning, rowPinningStateInitializer } from "../hooks/features
 import { useGridRowPinningPreProcessors } from "../hooks/features/rowPinning/useGridRowPinningPreProcessors.js";
 import { useGridDataSourcePro as useGridDataSource, dataSourceStateInitializer } from "../hooks/features/dataSource/useGridDataSourcePro.js";
 import { useGridDataSourceLazyLoader } from "../hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.js";
+import { useGridInfiniteLoadingIntersection } from "../hooks/features/serverSideLazyLoader/useGridInfiniteLoadingIntersection.js";
 export const useDataGridProComponent = (apiRef, props) => {
   useGridInitialization(apiRef, props);
 
@@ -91,6 +92,7 @@ export const useDataGridProComponent = (apiRef, props) => {
   useGridInfiniteLoader(apiRef, props);
   useGridLazyLoader(apiRef, props);
   useGridDataSourceLazyLoader(apiRef, props);
+  useGridInfiniteLoadingIntersection(apiRef, props);
   useGridColumnMenu(apiRef);
   useGridCsvExport(apiRef, props);
   useGridPrintExport(apiRef, props);

package/esm/DataGridPro/useDataGridProProps.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useThemeProps } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
+import { getThemeProps } from '@mui/system';
 import { GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
 import { computeSlots, ROW_SELECTION_PROPAGATION_DEFAULT } from '@mui/x-data-grid/internals';
 import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from "../constants/dataGridProDefaultSlotsComponents.js";
@@ -36,12 +37,12 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
 });
 const defaultSlots = DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridProProps = inProps => {
-  const themedProps =
-  // eslint-disable-next-line material-ui/mui-name-matches-component-name
-  useThemeProps({
+  const theme = useTheme();
+  const themedProps = React.useMemo(() => getThemeProps({
     props: inProps,
+    theme,
     name: 'MuiDataGrid'
-  });
+  }), [theme, inProps]);
   const localeText = React.useMemo(() => _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
   const slots = React.useMemo(() => computeSlots({
     defaultSlots,

package/esm/constants/dataGridProDefaultSlotsComponents.d.ts

@@ -1,2 +1,2 @@
-import type { GridProSlotsComponent } from '../models';
+import type { GridProSlotsComponent } from "../models/index.js";
 export declare const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS: GridProSlotsComponent;

package/esm/hooks/features/columnReorder/columnReorderSelector.d.ts

@@ -1,3 +1,3 @@
 import { GridStatePro } from "../../../models/gridStatePro.js";
-export declare const gridColumnReorderSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, unknown, import("./columnReorderInterfaces").GridColumnReorderState>;
-export declare const gridColumnReorderDragColSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./columnReorderInterfaces").GridColumnReorderState, string>;
+export declare const gridColumnReorderSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, unknown, import("./columnReorderInterfaces.js").GridColumnReorderState>;
+export declare const gridColumnReorderDragColSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./columnReorderInterfaces.js").GridColumnReorderState, string>;

package/esm/hooks/features/columnReorder/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./columnReorderSelector.js";
-export type { GridColumnReorderState } from './columnReorderInterfaces';
+export type { GridColumnReorderState } from "./columnReorderInterfaces.js";

package/esm/hooks/features/dataSource/gridDataSourceSelector.d.ts

@@ -1,7 +1,7 @@
 import type { GridRowId } from '@mui/x-data-grid';
 import { GridStatePro } from "../../../models/gridStatePro.js";
-export declare const gridDataSourceStateSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, unknown, import("./models").GridDataSourceState>;
-export declare const gridDataSourceLoadingSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./models").GridDataSourceState, Record<GridRowId, boolean>>;
+export declare const gridDataSourceStateSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, unknown, import("./models.js").GridDataSourceState>;
+export declare const gridDataSourceLoadingSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./models.js").GridDataSourceState, Record<GridRowId, boolean>>;
 export declare const gridDataSourceLoadingIdSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, GridRowId, boolean>;
-export declare const gridDataSourceErrorsSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./models").GridDataSourceState, Record<GridRowId, any>>;
+export declare const gridDataSourceErrorsSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./models.js").GridDataSourceState, Record<GridRowId, any>>;
 export declare const gridDataSourceErrorSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, GridRowId, any>;

package/esm/hooks/features/detailPanel/gridDetailPanelSelector.d.ts

@@ -1,8 +1,8 @@
 import { GridStatePro } from "../../../models/gridStatePro.js";
-export declare const gridDetailPanelStateSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, unknown, import("./gridDetailPanelInterface").GridDetailPanelState>;
-export declare const gridDetailPanelExpandedRowIdsSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./gridDetailPanelInterface").GridDetailPanelState, Set<import("@mui/x-data-grid").GridRowId>>;
-export declare const gridDetailPanelExpandedRowsContentCacheSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./gridDetailPanelInterface").GridDetailPanelState, Record<import("@mui/x-data-grid").GridRowId, import("react").ReactNode>>;
-export declare const gridDetailPanelRawHeightCacheSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./gridDetailPanelInterface").GridDetailPanelState, {
+export declare const gridDetailPanelStateSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, unknown, import("./gridDetailPanelInterface.js").GridDetailPanelState>;
+export declare const gridDetailPanelExpandedRowIdsSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./gridDetailPanelInterface.js").GridDetailPanelState, Set<import("@mui/x-data-grid").GridRowId>>;
+export declare const gridDetailPanelExpandedRowsContentCacheSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./gridDetailPanelInterface.js").GridDetailPanelState, Record<import("@mui/x-data-grid").GridRowId, import("react").ReactNode>>;
+export declare const gridDetailPanelRawHeightCacheSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./gridDetailPanelInterface.js").GridDetailPanelState, {
   [x: string]: {
     autoHeight: boolean;
     height: number;

package/esm/hooks/features/index.d.ts

@@ -4,4 +4,4 @@ export * from "./rowReorder/index.js";
 export * from "./treeData/index.js";
 export * from "./detailPanel/index.js";
 export * from "./rowPinning/index.js";
-export type { GridDataSourceState } from './dataSource/models';
+export type { GridDataSourceState } from "./dataSource/models.js";

package/esm/hooks/features/infiniteLoader/useGridInfiniteLoader.d.ts

@@ -6,4 +6,4 @@ import { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";
  * @requires useGridDimensions (method) - can be after
  * @requires useGridScroll (method
  */
-export declare const useGridInfiniteLoader: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "onRowsScrollEnd" | "pagination" | "paginationMode" | "rowsLoadingMode" | "scrollEndThreshold">) => void;
+export declare const useGridInfiniteLoader: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "onRowsScrollEnd" | "pagination" | "paginationMode" | "rowsLoadingMode">) => void;

package/esm/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -1,104 +1,24 @@
-import * as React from 'react';
-import { useGridSelector, useGridEventPriority, gridVisibleColumnDefinitionsSelector, useGridApiMethod, gridDimensionsSelector } from '@mui/x-data-grid';
-import { useGridVisibleRows, useTimeout, gridHorizontalScrollbarHeightSelector } from '@mui/x-data-grid/internals';
+import { useGridSelector, useGridEventPriority, gridVisibleColumnDefinitionsSelector, useGridEvent } from '@mui/x-data-grid';
+import { useGridVisibleRows, runIf } from '@mui/x-data-grid/internals';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { styled } from '@mui/system';
-import { jsx as _jsx } from "react/jsx-runtime";
-const InfiniteLoadingTriggerElement = styled('div')({
-  position: 'sticky',
-  left: 0,
-  width: 0,
-  height: 0
-});
-
 /**
  * @requires useGridColumns (state)
  * @requires useGridDimensions (method) - can be after
  * @requires useGridScroll (method
  */
 export const useGridInfiniteLoader = (apiRef, props) => {
-  const isReady = useGridSelector(apiRef, gridDimensionsSelector).isReady;
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const currentPage = useGridVisibleRows(apiRef, props);
-  const observer = React.useRef(null);
-  const updateTargetTimeout = useTimeout();
-  const triggerElement = React.useRef(null);
   const isEnabled = props.rowsLoadingMode === 'client' && !!props.onRowsScrollEnd;
-  const handleLoadMoreRows = useEventCallback(([entry]) => {
-    const currentRatio = entry.intersectionRatio;
-    const isIntersecting = entry.isIntersecting;
-    if (isIntersecting && currentRatio === 1) {
-      const viewportPageSize = apiRef.current.getViewportPageSize();
-      const rowScrollEndParams = {
-        visibleColumns,
-        viewportPageSize,
-        visibleRowsCount: currentPage.rows.length
-      };
-      apiRef.current.publishEvent('rowsScrollEnd', rowScrollEndParams);
-      observer.current?.disconnect();
-      // do not observe this node anymore
-      triggerElement.current = null;
-    }
+  const handleLoadMoreRows = useEventCallback(() => {
+    const viewportPageSize = apiRef.current.getViewportPageSize();
+    const rowScrollEndParams = {
+      visibleColumns,
+      viewportPageSize,
+      visibleRowsCount: currentPage.rows.length
+    };
+    apiRef.current.publishEvent('rowsScrollEnd', rowScrollEndParams);
   });
-  React.useEffect(() => {
-    const virtualScroller = apiRef.current.virtualScrollerRef.current;
-    if (!isEnabled || !isReady || !virtualScroller) {
-      return;
-    }
-    observer.current?.disconnect();
-    const horizontalScrollbarHeight = gridHorizontalScrollbarHeightSelector(apiRef);
-    const marginBottom = props.scrollEndThreshold - horizontalScrollbarHeight;
-    observer.current = new IntersectionObserver(handleLoadMoreRows, {
-      threshold: 1,
-      root: virtualScroller,
-      rootMargin: `0px 0px ${marginBottom}px 0px`
-    });
-    if (triggerElement.current) {
-      observer.current.observe(triggerElement.current);
-    }
-  }, [apiRef, isReady, handleLoadMoreRows, isEnabled, props.scrollEndThreshold]);
-  const updateTarget = node => {
-    if (triggerElement.current !== node) {
-      observer.current?.disconnect();
-      triggerElement.current = node;
-      if (triggerElement.current) {
-        observer.current?.observe(triggerElement.current);
-      }
-    }
-  };
-  const triggerRef = React.useCallback(node => {
-    // Prevent the infite loading working in combination with lazy loading
-    if (!isEnabled) {
-      return;
-    }
-
-    // If the user scrolls through the grid too fast it might happen that the observer is connected to the trigger element
-    // that will be intersecting the root inside the same render cycle (but not intersecting at the time of the connection).
-    // This will cause the observer to not call the callback with `isIntersecting` set to `true`.
-    // https://www.w3.org/TR/intersection-observer/#event-loop
-    // Delaying the connection to the next cycle helps since the observer will always call the callback the first time it is connected.
-    // https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/observe
-    // Related to
-    // https://github.com/mui/mui-x/issues/14116
-    updateTargetTimeout.start(0, () => updateTarget(node));
-  }, [isEnabled, updateTargetTimeout]);
-  const getInfiniteLoadingTriggerElement = React.useCallback(({
-    lastRowId
-  }) => {
-    if (!isEnabled) {
-      return null;
-    }
-    return /*#__PURE__*/_jsx(InfiniteLoadingTriggerElement, {
-      ref: triggerRef
-      // Force rerender on last row change to start observing the new trigger
-      ,
-
-      role: "presentation"
-    }, `trigger-${lastRowId}`);
-  }, [isEnabled, triggerRef]);
-  const infiniteLoaderPrivateApi = {
-    getInfiniteLoadingTriggerElement
-  };
-  useGridApiMethod(apiRef, infiniteLoaderPrivateApi, 'private');
   useGridEventPriority(apiRef, 'rowsScrollEnd', props.onRowsScrollEnd);
+  useGridEvent(apiRef, 'rowsScrollEndIntersection', runIf(isEnabled, handleLoadMoreRows));
 };

package/esm/hooks/features/rowPinning/useGridRowPinningPreProcessors.d.ts

@@ -2,7 +2,7 @@ import { RefObject } from '@mui/x-internals/types';
 import { GridHydrateRowsValue } from '@mui/x-data-grid/internals';
 import { GridRowId, GridRowModel } from '@mui/x-data-grid';
 import { GridPrivateApiPro } from "../../../models/gridApiPro.js";
-import type { GridPinnedRowsProp } from './gridRowPinningInterface';
+import type { GridPinnedRowsProp } from "./gridRowPinningInterface.js";
 type GridPinnedRowPosition = keyof GridPinnedRowsProp;
 export declare function addPinnedRow({
   groupingParams,

package/esm/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.d.ts

@@ -4,7 +4,6 @@ import { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";
 /**
  * @requires useGridRows (state)
  * @requires useGridPagination (state)
- * @requires useGridDimensions (method) - can be after
  * @requires useGridScroll (method
  */
-export declare const useGridDataSourceLazyLoader: (privateApiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "pagination" | "paginationMode" | "dataSource" | "lazyLoading" | "lazyLoadingRequestThrottleMs" | "scrollEndThreshold">) => void;
+export declare const useGridDataSourceLazyLoader: (privateApiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "dataSource" | "lazyLoading" | "lazyLoadingRequestThrottleMs">) => void;

package/esm/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { throttle } from '@mui/x-internals/throttle';
-import { unstable_debounce as debounce } from '@mui/utils';
-import { useGridEvent, gridSortModelSelector, gridFilterModelSelector, GRID_ROOT_GROUP_ID, gridPaginationModelSelector, gridDimensionsSelector, gridFilteredSortedRowIdsSelector, gridRowIdSelector } from '@mui/x-data-grid';
+import useEventCallback from '@mui/utils/useEventCallback';
+import debounce from '@mui/utils/debounce';
+import { useGridEvent, gridSortModelSelector, gridFilterModelSelector, GRID_ROOT_GROUP_ID, gridPaginationModelSelector, gridFilteredSortedRowIdsSelector, gridRowIdSelector } from '@mui/x-data-grid';
 import { getVisibleRows, gridRenderContextSelector, GridStrategyGroup, useGridRegisterStrategyProcessor, runIf, DataSourceRowsUpdateStrategy } from '@mui/x-data-grid/internals';
 import { findSkeletonRowsSection } from "../lazyLoader/utils.js";
 import { GRID_SKELETON_ROW_ROOT_ID } from "../lazyLoader/useGridLazyLoaderPreProcessors.js";
@@ -20,7 +21,6 @@ const getSkeletonRowId = index => `${GRID_SKELETON_ROW_ROOT_ID}-${index}`;
 /**
  * @requires useGridRows (state)
  * @requires useGridPagination (state)
- * @requires useGridDimensions (method) - can be after
  * @requires useGridScroll (method
  */
 export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
@@ -249,7 +249,7 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
     addSkeletonRows();
     privateApiRef.current.requestPipeProcessorsApplication('hydrateRows');
   }, [privateApiRef, updateLoadingTrigger, addSkeletonRows]);
-  const handleScrolling = React.useCallback(newScrollPosition => {
+  const handleIntersection = useEventCallback(() => {
     if (rowsStale.current || loadingTrigger.current !== LoadingTrigger.SCROLL_END) {
       return;
     }
@@ -257,24 +257,19 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
     if (previousLastRowIndex.current >= renderContext.lastRowIndex) {
       return;
     }
-    const dimensions = gridDimensionsSelector(privateApiRef);
-    const position = newScrollPosition.top + dimensions.viewportInnerSize.height;
-    const target = dimensions.contentSize.height - props.scrollEndThreshold;
-    if (position >= target) {
-      previousLastRowIndex.current = renderContext.lastRowIndex;
-      const paginationModel = gridPaginationModelSelector(privateApiRef);
-      const sortModel = gridSortModelSelector(privateApiRef);
-      const filterModel = gridFilterModelSelector(privateApiRef);
-      const getRowsParams = {
-        start: renderContext.lastRowIndex,
-        end: renderContext.lastRowIndex + paginationModel.pageSize - 1,
-        sortModel,
-        filterModel
-      };
-      privateApiRef.current.setLoading(true);
-      fetchRows(adjustRowParams(getRowsParams));
-    }
-  }, [privateApiRef, props.scrollEndThreshold, adjustRowParams, fetchRows]);
+    previousLastRowIndex.current = renderContext.lastRowIndex;
+    const paginationModel = gridPaginationModelSelector(privateApiRef);
+    const sortModel = gridSortModelSelector(privateApiRef);
+    const filterModel = gridFilterModelSelector(privateApiRef);
+    const getRowsParams = {
+      start: renderContext.lastRowIndex,
+      end: renderContext.lastRowIndex + paginationModel.pageSize - 1,
+      sortModel,
+      filterModel
+    };
+    privateApiRef.current.setLoading(true);
+    fetchRows(adjustRowParams(getRowsParams));
+  });
   const handleRenderedRowsIntervalChange = React.useCallback(params => {
     if (rowsStale.current) {
       return;
@@ -352,7 +347,7 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
   useGridRegisterStrategyProcessor(privateApiRef, DataSourceRowsUpdateStrategy.LazyLoading, 'dataSourceRowsUpdate', handleDataUpdate);
   useGridEvent(privateApiRef, 'strategyAvailabilityChange', handleStrategyActivityChange);
   useGridEvent(privateApiRef, 'rowCountChange', runIf(lazyLoadingRowsUpdateStrategyActive, handleRowCountChange));
-  useGridEvent(privateApiRef, 'scrollPositionChange', runIf(lazyLoadingRowsUpdateStrategyActive, handleScrolling));
+  useGridEvent(privateApiRef, 'rowsScrollEndIntersection', runIf(lazyLoadingRowsUpdateStrategyActive, handleIntersection));
   useGridEvent(privateApiRef, 'renderedRowsIntervalChange', runIf(lazyLoadingRowsUpdateStrategyActive, throttledHandleRenderedRowsIntervalChange));
   useGridEvent(privateApiRef, 'sortModelChange', runIf(lazyLoadingRowsUpdateStrategyActive, handleGridSortModelChange));
   useGridEvent(privateApiRef, 'filterModelChange', runIf(lazyLoadingRowsUpdateStrategyActive, handleGridFilterModelChange));

package/esm/hooks/features/serverSideLazyLoader/useGridInfiniteLoadingIntersection.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiPro } from "../../../models/gridApiPro.js";
+import { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";
+/**
+ * @requires useGridDimensions (method) - can be after
+ */
+export declare const useGridInfiniteLoadingIntersection: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "onRowsScrollEnd" | "dataSource" | "lazyLoading" | "rowsLoadingMode" | "scrollEndThreshold">) => void;