@mui/x-data-grid-pro - npm Package Compare versions

Comparing version 7.0.0-beta.5 to 7.0.0-beta.6

components/GridPinnedRows.d.ts

 import * as React from 'react';
 import { GridPinnedRowsProps } from '@mui/x-data-grid/internals';
-export declare function GridPinnedRows({ position, virtualScroller, ...other }: GridPinnedRowsProps): React.JSX.Element;
+export declare function GridPinnedRows({ position, virtualScroller }: GridPinnedRowsProps): React.JSX.Element | null;

components/GridPinnedRows.js

@@ -8,4 +8,2 @@ "use strict";
 exports.GridPinnedRows = GridPinnedRows;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -17,3 +15,2 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["position", "virtualScroller"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -27,8 +24,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 };
-function GridPinnedRows(_ref) {
-  let {
-      position,
-      virtualScroller
-    } = _ref,
-    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+function GridPinnedRows({
+  position,
+  virtualScroller
+}) {
   const classes = useUtilityClasses();
@@ -39,17 +34,21 @@ const apiRef = (0, _internals.useGridPrivateApiContext)();
   const rows = pinnedRowsData[position];
+  const pinnedRenderContext = React.useMemo(() => ({
+    firstRowIndex: 0,
+    lastRowIndex: rows.length,
+    firstColumnIndex: renderContext.firstColumnIndex,
+    lastColumnIndex: renderContext.lastColumnIndex
+  }), [rows, renderContext.firstColumnIndex, renderContext.lastColumnIndex]);
+  if (rows.length === 0) {
+    return null;
+  }
   const pinnedRows = virtualScroller.getRows({
     position,
     rows,
-    renderContext: React.useMemo(() => ({
-      firstRowIndex: 0,
-      lastRowIndex: rows.length,
-      firstColumnIndex: renderContext.firstColumnIndex,
-      lastColumnIndex: renderContext.lastColumnIndex
-    }), [rows, renderContext.firstColumnIndex, renderContext.lastColumnIndex])
+    renderContext: pinnedRenderContext
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({}, other, {
-    className: (0, _clsx.default)(classes.root, other.className, _xDataGrid.gridClasses[`pinnedRows--${position}`]),
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _clsx.default)(classes.root, _xDataGrid.gridClasses[`pinnedRows--${position}`]),
     role: "presentation",
     children: pinnedRows
-  }));
+  });
 }

esm/components/GridPinnedRows.js

@@ -1,4 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["position", "virtualScroller"];
 import * as React from 'react';
@@ -16,8 +13,6 @@ import clsx from 'clsx';
 };
-export function GridPinnedRows(_ref) {
-  let {
-      position,
-      virtualScroller
-    } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+export function GridPinnedRows({
+  position,
+  virtualScroller
+}) {
   const classes = useUtilityClasses();
@@ -28,17 +23,21 @@ const apiRef = useGridPrivateApiContext();
   const rows = pinnedRowsData[position];
+  const pinnedRenderContext = React.useMemo(() => ({
+    firstRowIndex: 0,
+    lastRowIndex: rows.length,
+    firstColumnIndex: renderContext.firstColumnIndex,
+    lastColumnIndex: renderContext.lastColumnIndex
+  }), [rows, renderContext.firstColumnIndex, renderContext.lastColumnIndex]);
+  if (rows.length === 0) {
+    return null;
+  }
   const pinnedRows = virtualScroller.getRows({
     position,
     rows,
-    renderContext: React.useMemo(() => ({
-      firstRowIndex: 0,
-      lastRowIndex: rows.length,
-      firstColumnIndex: renderContext.firstColumnIndex,
-      lastColumnIndex: renderContext.lastColumnIndex
-    }), [rows, renderContext.firstColumnIndex, renderContext.lastColumnIndex])
+    renderContext: pinnedRenderContext
   });
-  return /*#__PURE__*/_jsx("div", _extends({}, other, {
-    className: clsx(classes.root, other.className, gridClasses[`pinnedRows--${position}`]),
+  return /*#__PURE__*/_jsx("div", {
+    className: clsx(classes.root, gridClasses[`pinnedRows--${position}`]),
     role: "presentation",
     children: pinnedRows
-  }));
+  });
 }

esm/hooks/features/infiniteLoader/useGridInfiniteLoader.js

 import * as React from 'react';
-import { useGridSelector, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector } from '@mui/x-data-grid';
+import { useGridSelector, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, useGridApiMethod, gridDimensionsSelector } from '@mui/x-data-grid';
 import { useGridVisibleRows } 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
+});
+
 /**
@@ -12,19 +22,12 @@ * @requires useGridColumns (state)
   const currentPage = useGridVisibleRows(apiRef, props);
-  const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
-  const contentHeight = Math.max(rowsMeta.currentPageTotalHeight, 1);
-  const isInScrollBottomArea = React.useRef(false);
-  const handleRowsScrollEnd = React.useCallback(scrollPosition => {
-    const dimensions = apiRef.current.getRootDimensions();
-
-    // Prevent the infite loading working in combination with lazy loading
-    if (!dimensions.isReady || props.rowsLoadingMode !== 'client') {
-      return;
-    }
-    const scrollPositionBottom = scrollPosition.top + dimensions.viewportOuterSize.height;
-    const viewportPageSize = apiRef.current.getViewportPageSize();
-    if (scrollPositionBottom < contentHeight - props.scrollEndThreshold) {
-      isInScrollBottomArea.current = false;
-    }
-    if (scrollPositionBottom >= contentHeight - props.scrollEndThreshold && !isInScrollBottomArea.current) {
-      const rowScrollEndParam = {
+  const observer = React.useRef();
+  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) {
+      var _observer$current;
+      const viewportPageSize = apiRef.current.getViewportPageSize();
+      const rowScrollEndParams = {
         visibleColumns,
@@ -34,17 +37,63 @@ viewportPageSize,
       };
-      apiRef.current.publishEvent('rowsScrollEnd', rowScrollEndParam);
-      isInScrollBottomArea.current = true;
+      apiRef.current.publishEvent('rowsScrollEnd', rowScrollEndParams);
+      (_observer$current = observer.current) == null || _observer$current.disconnect();
+      // do not observe this node anymore
+      triggerElement.current = null;
     }
-  }, [contentHeight, props.scrollEndThreshold, props.rowsLoadingMode, visibleColumns, apiRef, currentPage.rows.length]);
-  const handleGridScroll = React.useCallback(({
-    left,
-    top
+  });
+  const virtualScroller = apiRef.current.virtualScrollerRef.current;
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const marginBottom = props.scrollEndThreshold - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+  React.useEffect(() => {
+    var _observer$current2;
+    if (!isEnabled) {
+      return;
+    }
+    if (!virtualScroller) {
+      return;
+    }
+    (_observer$current2 = observer.current) == null || _observer$current2.disconnect();
+    observer.current = new IntersectionObserver(handleLoadMoreRows, {
+      threshold: 1,
+      root: virtualScroller,
+      rootMargin: `0px 0px ${marginBottom}px 0px`
+    });
+    if (triggerElement.current) {
+      observer.current.observe(triggerElement.current);
+    }
+  }, [virtualScroller, handleLoadMoreRows, isEnabled, marginBottom]);
+  const triggerRef = React.useCallback(node => {
+    // Prevent the infite loading working in combination with lazy loading
+    if (!isEnabled) {
+      return;
+    }
+    if (triggerElement.current !== node) {
+      var _observer$current3;
+      (_observer$current3 = observer.current) == null || _observer$current3.disconnect();
+      triggerElement.current = node;
+      if (triggerElement.current) {
+        var _observer$current4;
+        (_observer$current4 = observer.current) == null || _observer$current4.observe(triggerElement.current);
+      }
+    }
+  }, [isEnabled]);
+  const getInfiniteLoadingTriggerElement = React.useCallback(({
+    lastRowId
   }) => {
-    handleRowsScrollEnd({
-      left,
-      top
-    });
-  }, [handleRowsScrollEnd]);
-  useGridApiEventHandler(apiRef, 'scrollPositionChange', handleGridScroll);
+    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 infiteLoaderPrivateApi = {
+    getInfiniteLoadingTriggerElement
+  };
+  useGridApiMethod(apiRef, infiteLoaderPrivateApi, 'private');
   useGridApiOptionHandler(apiRef, 'rowsScrollEnd', props.onRowsScrollEnd);
 };

esm/utils/releaseInfo.js

 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcwOTM1NTYwMDAwMA==";
+  const releaseInfo = "MTcwOTg1MjQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
@@ -5,0 +5,0 @@ // A simple hack to set the value in the test environment (has no build step).

hooks/features/infiniteLoader/useGridInfiniteLoader.d.ts

@@ -9,2 +9,2 @@ import * as React from 'react';
  */
-export declare const useGridInfiniteLoader: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, 'onRowsScrollEnd' | 'scrollEndThreshold' | 'pagination' | 'paginationMode' | 'rowsLoadingMode'>) => void;
+export declare const useGridInfiniteLoader: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, 'onRowsScrollEnd' | 'pagination' | 'paginationMode' | 'rowsLoadingMode' | 'scrollEndThreshold'>) => void;

hooks/features/infiniteLoader/useGridInfiniteLoader.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
@@ -10,4 +11,14 @@ value: true
 var _internals = require("@mui/x-data-grid/internals");
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _system = require("@mui/system");
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const InfiniteLoadingTriggerElement = (0, _system.styled)('div')({
+  position: 'sticky',
+  left: 0,
+  width: 0,
+  height: 0
+});
+
 /**
@@ -21,19 +32,11 @@ * @requires useGridColumns (state)
   const currentPage = (0, _internals.useGridVisibleRows)(apiRef, props);
-  const rowsMeta = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridRowsMetaSelector);
-  const contentHeight = Math.max(rowsMeta.currentPageTotalHeight, 1);
-  const isInScrollBottomArea = React.useRef(false);
-  const handleRowsScrollEnd = React.useCallback(scrollPosition => {
-    const dimensions = apiRef.current.getRootDimensions();
-
-    // Prevent the infite loading working in combination with lazy loading
-    if (!dimensions.isReady || props.rowsLoadingMode !== 'client') {
-      return;
-    }
-    const scrollPositionBottom = scrollPosition.top + dimensions.viewportOuterSize.height;
-    const viewportPageSize = apiRef.current.getViewportPageSize();
-    if (scrollPositionBottom < contentHeight - props.scrollEndThreshold) {
-      isInScrollBottomArea.current = false;
-    }
-    if (scrollPositionBottom >= contentHeight - props.scrollEndThreshold && !isInScrollBottomArea.current) {
-      const rowScrollEndParam = {
+  const observer = React.useRef();
+  const triggerElement = React.useRef(null);
+  const isEnabled = props.rowsLoadingMode === 'client' && !!props.onRowsScrollEnd;
+  const handleLoadMoreRows = (0, _useEventCallback.default)(([entry]) => {
+    const currentRatio = entry.intersectionRatio;
+    const isIntersecting = entry.isIntersecting;
+    if (isIntersecting && currentRatio === 1) {
+      const viewportPageSize = apiRef.current.getViewportPageSize();
+      const rowScrollEndParams = {
         visibleColumns,
@@ -43,18 +46,61 @@ viewportPageSize,
       };
-      apiRef.current.publishEvent('rowsScrollEnd', rowScrollEndParam);
-      isInScrollBottomArea.current = true;
+      apiRef.current.publishEvent('rowsScrollEnd', rowScrollEndParams);
+      observer.current?.disconnect();
+      // do not observe this node anymore
+      triggerElement.current = null;
     }
-  }, [contentHeight, props.scrollEndThreshold, props.rowsLoadingMode, visibleColumns, apiRef, currentPage.rows.length]);
-  const handleGridScroll = React.useCallback(({
-    left,
-    top
+  });
+  const virtualScroller = apiRef.current.virtualScrollerRef.current;
+  const dimensions = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridDimensionsSelector);
+  const marginBottom = props.scrollEndThreshold - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+  React.useEffect(() => {
+    if (!isEnabled) {
+      return;
+    }
+    if (!virtualScroller) {
+      return;
+    }
+    observer.current?.disconnect();
+    observer.current = new IntersectionObserver(handleLoadMoreRows, {
+      threshold: 1,
+      root: virtualScroller,
+      rootMargin: `0px 0px ${marginBottom}px 0px`
+    });
+    if (triggerElement.current) {
+      observer.current.observe(triggerElement.current);
+    }
+  }, [virtualScroller, handleLoadMoreRows, isEnabled, marginBottom]);
+  const triggerRef = React.useCallback(node => {
+    // Prevent the infite loading working in combination with lazy loading
+    if (!isEnabled) {
+      return;
+    }
+    if (triggerElement.current !== node) {
+      observer.current?.disconnect();
+      triggerElement.current = node;
+      if (triggerElement.current) {
+        observer.current?.observe(triggerElement.current);
+      }
+    }
+  }, [isEnabled]);
+  const getInfiniteLoadingTriggerElement = React.useCallback(({
+    lastRowId
   }) => {
-    handleRowsScrollEnd({
-      left,
-      top
-    });
-  }, [handleRowsScrollEnd]);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'scrollPositionChange', handleGridScroll);
+    if (!isEnabled) {
+      return null;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(InfiniteLoadingTriggerElement, {
+      ref: triggerRef
+      // Force rerender on last row change to start observing the new trigger
+      ,
+
+      role: "presentation"
+    }, `trigger-${lastRowId}`);
+  }, [isEnabled, triggerRef]);
+  const infiteLoaderPrivateApi = {
+    getInfiniteLoadingTriggerElement
+  };
+  (0, _xDataGrid.useGridApiMethod)(apiRef, infiteLoaderPrivateApi, 'private');
   (0, _xDataGrid.useGridApiOptionHandler)(apiRef, 'rowsScrollEnd', props.onRowsScrollEnd);
 };
 exports.useGridInfiniteLoader = useGridInfiniteLoader;

index.js

 /**
- * @mui/x-data-grid-pro v7.0.0-beta.5
+ * @mui/x-data-grid-pro v7.0.0-beta.6
  *
@@ -4,0 +4,0 @@ * @license MUI X Commercial

modern/components/GridPinnedRows.js

@@ -1,4 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["position", "virtualScroller"];
 import * as React from 'react';
@@ -16,8 +13,6 @@ import clsx from 'clsx';
 };
-export function GridPinnedRows(_ref) {
-  let {
-      position,
-      virtualScroller
-    } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+export function GridPinnedRows({
+  position,
+  virtualScroller
+}) {
   const classes = useUtilityClasses();
@@ -28,17 +23,21 @@ const apiRef = useGridPrivateApiContext();
   const rows = pinnedRowsData[position];
+  const pinnedRenderContext = React.useMemo(() => ({
+    firstRowIndex: 0,
+    lastRowIndex: rows.length,
+    firstColumnIndex: renderContext.firstColumnIndex,
+    lastColumnIndex: renderContext.lastColumnIndex
+  }), [rows, renderContext.firstColumnIndex, renderContext.lastColumnIndex]);
+  if (rows.length === 0) {
+    return null;
+  }
   const pinnedRows = virtualScroller.getRows({
     position,
     rows,
-    renderContext: React.useMemo(() => ({
-      firstRowIndex: 0,
-      lastRowIndex: rows.length,
-      firstColumnIndex: renderContext.firstColumnIndex,
-      lastColumnIndex: renderContext.lastColumnIndex
-    }), [rows, renderContext.firstColumnIndex, renderContext.lastColumnIndex])
+    renderContext: pinnedRenderContext
   });
-  return /*#__PURE__*/_jsx("div", _extends({}, other, {
-    className: clsx(classes.root, other.className, gridClasses[`pinnedRows--${position}`]),
+  return /*#__PURE__*/_jsx("div", {
+    className: clsx(classes.root, gridClasses[`pinnedRows--${position}`]),
     role: "presentation",
     children: pinnedRows
-  }));
+  });
 }

modern/hooks/features/infiniteLoader/useGridInfiniteLoader.js

 import * as React from 'react';
-import { useGridSelector, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector } from '@mui/x-data-grid';
+import { useGridSelector, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, useGridApiMethod, gridDimensionsSelector } from '@mui/x-data-grid';
 import { useGridVisibleRows } 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
+});
+
 /**
@@ -12,19 +22,11 @@ * @requires useGridColumns (state)
   const currentPage = useGridVisibleRows(apiRef, props);
-  const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
-  const contentHeight = Math.max(rowsMeta.currentPageTotalHeight, 1);
-  const isInScrollBottomArea = React.useRef(false);
-  const handleRowsScrollEnd = React.useCallback(scrollPosition => {
-    const dimensions = apiRef.current.getRootDimensions();
-
-    // Prevent the infite loading working in combination with lazy loading
-    if (!dimensions.isReady || props.rowsLoadingMode !== 'client') {
-      return;
-    }
-    const scrollPositionBottom = scrollPosition.top + dimensions.viewportOuterSize.height;
-    const viewportPageSize = apiRef.current.getViewportPageSize();
-    if (scrollPositionBottom < contentHeight - props.scrollEndThreshold) {
-      isInScrollBottomArea.current = false;
-    }
-    if (scrollPositionBottom >= contentHeight - props.scrollEndThreshold && !isInScrollBottomArea.current) {
-      const rowScrollEndParam = {
+  const observer = React.useRef();
+  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,
@@ -34,17 +36,60 @@ viewportPageSize,
       };
-      apiRef.current.publishEvent('rowsScrollEnd', rowScrollEndParam);
-      isInScrollBottomArea.current = true;
+      apiRef.current.publishEvent('rowsScrollEnd', rowScrollEndParams);
+      observer.current?.disconnect();
+      // do not observe this node anymore
+      triggerElement.current = null;
     }
-  }, [contentHeight, props.scrollEndThreshold, props.rowsLoadingMode, visibleColumns, apiRef, currentPage.rows.length]);
-  const handleGridScroll = React.useCallback(({
-    left,
-    top
+  });
+  const virtualScroller = apiRef.current.virtualScrollerRef.current;
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const marginBottom = props.scrollEndThreshold - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+  React.useEffect(() => {
+    if (!isEnabled) {
+      return;
+    }
+    if (!virtualScroller) {
+      return;
+    }
+    observer.current?.disconnect();
+    observer.current = new IntersectionObserver(handleLoadMoreRows, {
+      threshold: 1,
+      root: virtualScroller,
+      rootMargin: `0px 0px ${marginBottom}px 0px`
+    });
+    if (triggerElement.current) {
+      observer.current.observe(triggerElement.current);
+    }
+  }, [virtualScroller, handleLoadMoreRows, isEnabled, marginBottom]);
+  const triggerRef = React.useCallback(node => {
+    // Prevent the infite loading working in combination with lazy loading
+    if (!isEnabled) {
+      return;
+    }
+    if (triggerElement.current !== node) {
+      observer.current?.disconnect();
+      triggerElement.current = node;
+      if (triggerElement.current) {
+        observer.current?.observe(triggerElement.current);
+      }
+    }
+  }, [isEnabled]);
+  const getInfiniteLoadingTriggerElement = React.useCallback(({
+    lastRowId
   }) => {
-    handleRowsScrollEnd({
-      left,
-      top
-    });
-  }, [handleRowsScrollEnd]);
-  useGridApiEventHandler(apiRef, 'scrollPositionChange', handleGridScroll);
+    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 infiteLoaderPrivateApi = {
+    getInfiniteLoadingTriggerElement
+  };
+  useGridApiMethod(apiRef, infiteLoaderPrivateApi, 'private');
   useGridApiOptionHandler(apiRef, 'rowsScrollEnd', props.onRowsScrollEnd);
 };

modern/index.js

 /**
- * @mui/x-data-grid-pro v7.0.0-beta.5
+ * @mui/x-data-grid-pro v7.0.0-beta.6
  *
@@ -4,0 +4,0 @@ * @license MUI X Commercial

modern/utils/releaseInfo.js

 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcwOTM1NTYwMDAwMA==";
+  const releaseInfo = "MTcwOTg1MjQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
@@ -5,0 +5,0 @@ // A simple hack to set the value in the test environment (has no build step).

package.json

 {
   "name": "@mui/x-data-grid-pro",
-  "version": "7.0.0-beta.5",
+  "version": "7.0.0-beta.6",
   "description": "The Pro plan edition of the data grid component (MUI X).",
@@ -35,7 +35,7 @@ "author": "MUI Team",
   "dependencies": {
-    "@babel/runtime": "^7.23.9",
+    "@babel/runtime": "^7.24.0",
     "@mui/system": "^5.15.9",
     "@mui/utils": "^5.15.9",
-    "@mui/x-data-grid": "7.0.0-beta.5",
-    "@mui/x-license": "7.0.0-beta.2",
+    "@mui/x-data-grid": "7.0.0-beta.6",
+    "@mui/x-license": "7.0.0-beta.6",
     "@types/format-util": "^1.0.4",
@@ -42,0 +42,0 @@ "clsx": "^2.1.0",

utils/releaseInfo.js

@@ -9,3 +9,3 @@ "use strict";
 const getReleaseInfo = () => {
-  const releaseInfo = "MTcwOTM1NTYwMDAwMA==";
+  const releaseInfo = "MTcwOTg1MjQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
@@ -12,0 +12,0 @@ // A simple hack to set the value in the test environment (has no build step).

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1199878

increased by0.57%

Lines of code

20137

increased by0.67%

Number of low supply chain risk alerts

30

decreased by-3.23%

Dependency changes

• + Added@mui/x-data-grid@7.0.0-beta.6(transitive)

• + Added@mui/x-license@7.0.0-beta.6(transitive)

• - Removed@mui/x-data-grid@7.0.0-beta.5(transitive)

• - Removed@mui/x-license@7.0.0-beta.2(transitive)

• Updated@babel/runtime@^7.24.0

• Updated@mui/x-data-grid@7.0.0-beta.6

• Updated@mui/x-license@7.0.0-beta.6