@mui/x-data-grid-pro 5.5.0 → 5.6.1

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -0,0 +1,295 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { ownerDocument, useEventCallback } from '@mui/material/utils';
+import { GridEvents, gridClasses, GridColumnHeaderSeparatorSides, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
+import { clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
+import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField } from '../../../utils/domUtils';
+// TODO: remove support for Safari < 13.
+// https://caniuse.com/#search=touch-action
+//
+// Safari, on iOS, supports touch action since v13.
+// Over 80% of the iOS phones are compatible
+// in August 2020.
+// Utilizing the CSS.supports method to check if touch-action is supported.
+// Since CSS.supports is supported on all but Edge@12 and IE and touch-action
+// is supported on both Edge@12 and IE if CSS.supports is not available that means that
+// touch-action will be supported
+let cachedSupportsTouchActionNone = false;
+
+function doesSupportTouchActionNone() {
+  if (cachedSupportsTouchActionNone === undefined) {
+    if (typeof CSS !== 'undefined' && typeof CSS.supports === 'function') {
+      cachedSupportsTouchActionNone = CSS.supports('touch-action', 'none');
+    } else {
+      cachedSupportsTouchActionNone = true;
+    }
+  }
+
+  return cachedSupportsTouchActionNone;
+}
+
+function trackFinger(event, currentTouchId) {
+  if (currentTouchId !== undefined && event.changedTouches) {
+    for (let i = 0; i < event.changedTouches.length; i += 1) {
+      const touch = event.changedTouches[i];
+
+      if (touch.identifier === currentTouchId) {
+        return {
+          x: touch.clientX,
+          y: touch.clientY
+        };
+      }
+    }
+
+    return false;
+  }
+
+  return {
+    x: event.clientX,
+    y: event.clientY
+  };
+}
+
+function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, separatorSide) {
+  let newWidth = initialOffsetToSeparator;
+
+  if (separatorSide === GridColumnHeaderSeparatorSides.Right) {
+    newWidth += clickX - columnBounds.left;
+  } else {
+    newWidth += columnBounds.right - clickX;
+  }
+
+  return newWidth;
+}
+
+function computeOffsetToSeparator(clickX, columnBounds, separatorSide) {
+  if (separatorSide === GridColumnHeaderSeparatorSides.Left) {
+    return clickX - columnBounds.left;
+  }
+
+  return columnBounds.right - clickX;
+}
+
+function getSeparatorSide(element) {
+  return element.classList.contains(gridClasses['columnSeparator--sideRight']) ? GridColumnHeaderSeparatorSides.Right : GridColumnHeaderSeparatorSides.Left;
+}
+
+export const columnResizeStateInitializer = state => _extends({}, state, {
+  columnResize: {
+    resizingColumnField: ''
+  }
+});
+/**
+ * Only available in DataGridPro
+ * @requires useGridColumns (method, event)
+ * TODO: improve experience for last column
+ */
+
+export const useGridColumnResize = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridColumnResize');
+  const colDefRef = React.useRef();
+  const colElementRef = React.useRef();
+  const colCellElementsRef = React.useRef(); // To improve accessibility, the separator has padding on both sides.
+  // Clicking inside the padding area should be treated as a click in the separator.
+  // This ref stores the offset between the click and the separator.
+
+  const initialOffsetToSeparator = React.useRef();
+  const separatorSide = React.useRef();
+  const stopResizeEventTimeout = React.useRef();
+  const touchId = React.useRef();
+
+  const updateWidth = newWidth => {
+    logger.debug(`Updating width to ${newWidth} for col ${colDefRef.current.field}`);
+    colDefRef.current.computedWidth = newWidth;
+    colDefRef.current.width = newWidth;
+    colDefRef.current.flex = undefined;
+    colElementRef.current.style.width = `${newWidth}px`;
+    colElementRef.current.style.minWidth = `${newWidth}px`;
+    colElementRef.current.style.maxWidth = `${newWidth}px`;
+    colCellElementsRef.current.forEach(element => {
+      const div = element;
+      div.style.width = `${newWidth}px`;
+      div.style.minWidth = `${newWidth}px`;
+      div.style.maxWidth = `${newWidth}px`;
+    });
+  };
+
+  const handleResizeMouseUp = useEventCallback(nativeEvent => {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    stopListening();
+    apiRef.current.updateColumn(colDefRef.current);
+    clearTimeout(stopResizeEventTimeout.current);
+    stopResizeEventTimeout.current = setTimeout(() => {
+      apiRef.current.publishEvent(GridEvents.columnResizeStop, null, nativeEvent);
+
+      if (colDefRef.current) {
+        apiRef.current.publishEvent(GridEvents.columnWidthChange, {
+          element: colElementRef.current,
+          colDef: colDefRef.current,
+          width: colDefRef.current?.computedWidth
+        }, nativeEvent);
+      }
+    });
+    logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
+  });
+  const handleResizeMouseMove = useEventCallback(nativeEvent => {
+    // Cancel move in case some other element consumed a mouseup event and it was not fired.
+    if (nativeEvent.buttons === 0) {
+      handleResizeMouseUp(nativeEvent);
+      return;
+    }
+
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    newWidth = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
+    updateWidth(newWidth);
+    const params = {
+      element: colElementRef.current,
+      colDef: colDefRef.current,
+      width: newWidth
+    };
+    apiRef.current.publishEvent(GridEvents.columnResize, params, nativeEvent);
+  });
+  const handleColumnResizeMouseDown = useEventCallback(({
+    colDef
+  }, event) => {
+    // Only handle left clicks
+    if (event.button !== 0) {
+      return;
+    } // Skip if the column isn't resizable
+
+
+    if (!event.currentTarget.classList.contains(gridClasses['columnSeparator--resizable'])) {
+      return;
+    } // Avoid text selection
+
+
+    event.preventDefault();
+    logger.debug(`Start Resize on col ${colDef.field}`);
+    apiRef.current.publishEvent(GridEvents.columnResizeStart, {
+      field: colDef.field
+    }, event);
+    colDefRef.current = colDef;
+    colElementRef.current = apiRef.current.columnHeadersContainerElementRef?.current.querySelector(`[data-field="${colDef.field}"]`);
+    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current);
+    const doc = ownerDocument(apiRef.current.rootElementRef.current);
+    doc.body.style.cursor = 'col-resize';
+    separatorSide.current = getSeparatorSide(event.currentTarget);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    doc.addEventListener('mousemove', handleResizeMouseMove);
+    doc.addEventListener('mouseup', handleResizeMouseUp);
+  });
+  const handleTouchEnd = useEventCallback(nativeEvent => {
+    const finger = trackFinger(nativeEvent, touchId.current);
+
+    if (!finger) {
+      return;
+    } // eslint-disable-next-line @typescript-eslint/no-use-before-define
+
+
+    stopListening();
+    apiRef.current.updateColumn(colDefRef.current);
+    clearTimeout(stopResizeEventTimeout.current);
+    stopResizeEventTimeout.current = setTimeout(() => {
+      apiRef.current.publishEvent(GridEvents.columnResizeStop, null, nativeEvent);
+    });
+    logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
+  });
+  const handleTouchMove = useEventCallback(nativeEvent => {
+    const finger = trackFinger(nativeEvent, touchId.current);
+
+    if (!finger) {
+      return;
+    } // Cancel move in case some other element consumed a touchmove event and it was not fired.
+
+
+    if (nativeEvent.type === 'mousemove' && nativeEvent.buttons === 0) {
+      handleTouchEnd(nativeEvent);
+      return;
+    }
+
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    newWidth = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
+    updateWidth(newWidth);
+    const params = {
+      element: colElementRef.current,
+      colDef: colDefRef.current,
+      width: newWidth
+    };
+    apiRef.current.publishEvent(GridEvents.columnResize, params, nativeEvent);
+  });
+  const handleTouchStart = useEventCallback(event => {
+    const cellSeparator = findParentElementFromClassName(event.target, gridClasses['columnSeparator--resizable']); // Let the event bubble if the target is not a col separator
+
+    if (!cellSeparator) {
+      return;
+    } // If touch-action: none; is not supported we need to prevent the scroll manually.
+
+
+    if (!doesSupportTouchActionNone()) {
+      event.preventDefault();
+    }
+
+    const touch = event.changedTouches[0];
+
+    if (touch != null) {
+      // A number that uniquely identifies the current finger in the touch session.
+      touchId.current = touch.identifier;
+    }
+
+    colElementRef.current = findParentElementFromClassName(event.target, gridClasses.columnHeader);
+    const field = getFieldFromHeaderElem(colElementRef.current);
+    const colDef = apiRef.current.getColumn(field);
+    logger.debug(`Start Resize on col ${colDef.field}`);
+    apiRef.current.publishEvent(GridEvents.columnResizeStart, {
+      field
+    }, event);
+    colDefRef.current = colDef;
+    colElementRef.current = findHeaderElementFromField(apiRef.current.columnHeadersElementRef?.current, colDef.field);
+    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current);
+    separatorSide.current = getSeparatorSide(event.target);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    const doc = ownerDocument(event.currentTarget);
+    doc.addEventListener('touchmove', handleTouchMove);
+    doc.addEventListener('touchend', handleTouchEnd);
+  });
+  const stopListening = React.useCallback(() => {
+    const doc = ownerDocument(apiRef.current.rootElementRef.current);
+    doc.body.style.removeProperty('cursor');
+    doc.removeEventListener('mousemove', handleResizeMouseMove);
+    doc.removeEventListener('mouseup', handleResizeMouseUp);
+    doc.removeEventListener('touchmove', handleTouchMove);
+    doc.removeEventListener('touchend', handleTouchEnd);
+  }, [apiRef, handleResizeMouseMove, handleResizeMouseUp, handleTouchMove, handleTouchEnd]);
+  const handleResizeStart = React.useCallback(({
+    field
+  }) => {
+    apiRef.current.setState(state => _extends({}, state, {
+      columnResize: _extends({}, state.columnResize, {
+        resizingColumnField: field
+      })
+    }));
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  const handleResizeStop = React.useCallback(() => {
+    apiRef.current.setState(state => _extends({}, state, {
+      columnResize: _extends({}, state.columnResize, {
+        resizingColumnField: ''
+      })
+    }));
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(stopResizeEventTimeout.current);
+      stopListening();
+    };
+  }, [apiRef, handleTouchStart, stopListening]);
+  useGridNativeEventListener(apiRef, () => apiRef.current.columnHeadersElementRef?.current, 'touchstart', handleTouchStart, {
+    passive: doesSupportTouchActionNone()
+  });
+  useGridApiEventHandler(apiRef, GridEvents.columnSeparatorMouseDown, handleColumnResizeMouseDown);
+  useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, handleResizeStart);
+  useGridApiEventHandler(apiRef, GridEvents.columnResizeStop, handleResizeStop);
+  useGridApiOptionHandler(apiRef, GridEvents.columnResize, props.onColumnResize);
+  useGridApiOptionHandler(apiRef, GridEvents.columnWidthChange, props.onColumnWidthChange);
+};

package/modern/hooks/features/detailPanel/gridDetailPanelInterface.js

@@ -0,0 +1 @@
+export {};

package/modern/hooks/features/detailPanel/gridDetailPanelSelector.js

@@ -0,0 +1,3 @@
+export const gridDetailPanelExpandedRowIdsSelector = state => state.detailPanel.expandedRowIds;
+export const gridDetailPanelExpandedRowsContentCacheSelector = state => state.detailPanel.contentCache;
+export const gridDetailPanelExpandedRowsHeightCacheSelector = state => state.detailPanel.heightCache;

package/modern/hooks/features/detailPanel/gridDetailPanelToggleColDef.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GRID_STRING_COL_DEF } from '@mui/x-data-grid';
+import { GridDetailPanelToggleCell } from '../../../components/GridDetailPanelToggleCell';
+import { gridDetailPanelExpandedRowIdsSelector } from './gridDetailPanelSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
+export const GRID_DETAIL_PANEL_TOGGLE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  field: GRID_DETAIL_PANEL_TOGGLE_FIELD,
+  headerName: '',
+  type: 'detailPanelToggle',
+  editable: false,
+  sortable: false,
+  filterable: false,
+  resizable: false,
+  disableColumnMenu: true,
+  disableReorder: true,
+  disableExport: true,
+  align: 'left',
+  width: 40,
+  valueGetter: params => {
+    const expandedRowIds = gridDetailPanelExpandedRowIdsSelector(params.api.state);
+    return expandedRowIds.includes(params.id);
+  },
+  renderCell: params => /*#__PURE__*/_jsx(GridDetailPanelToggleCell, _extends({}, params))
+});

package/modern/hooks/features/detailPanel/index.js

@@ -0,0 +1,3 @@
+export * from './gridDetailPanelToggleColDef';
+export * from './gridDetailPanelSelector';
+export * from './gridDetailPanelInterface';

package/modern/hooks/features/detailPanel/useGridDetailPanel.js

@@ -0,0 +1,105 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridEvents, useGridSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid';
+import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from './gridDetailPanelToggleColDef';
+import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector } from './gridDetailPanelSelector';
+export const detailPanelStateInitializer = (state, props) => {
+  return _extends({}, state, {
+    detailPanel: {
+      expandedRowIds: props.detailPanelExpandedRowIds ?? props.initialState?.detailPanel?.expandedRowIds ?? []
+    }
+  });
+};
+export const useGridDetailPanel = (apiRef, props) => {
+  const expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
+  const contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
+  const handleCellClick = React.useCallback((params, event) => {
+    if (params.field !== GRID_DETAIL_PANEL_TOGGLE_FIELD || props.getDetailPanelContent == null) {
+      return;
+    }
+
+    const content = contentCache[params.id];
+
+    if (! /*#__PURE__*/React.isValidElement(content)) {
+      return;
+    } // Ignore if the user didn't click specifically in the "i" button
+
+
+    if (event.target === event.currentTarget) {
+      return;
+    }
+
+    apiRef.current.toggleDetailPanel(params.id);
+  }, [apiRef, contentCache, props.getDetailPanelContent]);
+  const handleCellKeyDown = React.useCallback((params, event) => {
+    if (!event.ctrlKey || event.key !== 'Enter' || props.getDetailPanelContent == null) {
+      return;
+    }
+
+    apiRef.current.toggleDetailPanel(params.id);
+  }, [apiRef, props.getDetailPanelContent]);
+  useGridApiEventHandler(apiRef, GridEvents.cellClick, handleCellClick);
+  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+  const addDetailHeight = React.useCallback((initialValue, row) => {
+    if (expandedRowIds.length === 0 || !expandedRowIds.includes(row.id)) {
+      return _extends({}, initialValue, {
+        detail: 0
+      });
+    }
+
+    const heightCache = gridDetailPanelExpandedRowsHeightCacheSelector(apiRef.current.state);
+    return _extends({}, initialValue, {
+      detail: heightCache[row.id] ?? 0 // Fallback to zero because the cache might not be ready yet (e.g. page was changed)
+
+    });
+  }, [apiRef, expandedRowIds]);
+  useGridRegisterPreProcessor(apiRef, 'rowHeight', addDetailHeight);
+  apiRef.current.unstable_updateControlState({
+    stateId: 'detailPanels',
+    propModel: props.detailPanelExpandedRowIds,
+    propOnChange: props.onDetailPanelExpandedRowIdsChange,
+    stateSelector: gridDetailPanelExpandedRowIdsSelector,
+    changeEvent: GridEvents.detailPanelsExpandedRowIdsChange
+  });
+  const toggleDetailPanel = React.useCallback(id => {
+    if (props.getDetailPanelContent == null) {
+      return;
+    }
+
+    const content = contentCache[id];
+
+    if (! /*#__PURE__*/React.isValidElement(content)) {
+      return;
+    }
+
+    const ids = apiRef.current.getExpandedDetailPanels();
+    apiRef.current.setExpandedDetailPanels(ids.includes(id) ? ids.filter(rowId => rowId !== id) : [...ids, id]);
+  }, [apiRef, contentCache, props.getDetailPanelContent]);
+  const getExpandedDetailPanels = React.useCallback(() => gridDetailPanelExpandedRowIdsSelector(apiRef.current.state), [apiRef]);
+  const setExpandedDetailPanels = React.useCallback(ids => {
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        detailPanel: _extends({}, state.detailPanel, {
+          expandedRowIds: ids
+        })
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  const detailPanelApi = {
+    toggleDetailPanel,
+    getExpandedDetailPanels,
+    setExpandedDetailPanels
+  };
+  useGridApiMethod(apiRef, detailPanelApi, 'detailPanelApi');
+  React.useEffect(() => {
+    if (props.detailPanelExpandedRowIds) {
+      const currentModel = gridDetailPanelExpandedRowIdsSelector(apiRef.current.state);
+
+      if (currentModel !== props.detailPanelExpandedRowIds) {
+        apiRef.current.setExpandedDetailPanels(props.detailPanelExpandedRowIds);
+      }
+    }
+  }, [apiRef, props.detailPanelExpandedRowIds]);
+};

package/modern/hooks/features/detailPanel/useGridDetailPanelCache.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiEventHandler, gridRowIdsSelector, GridEvents } from '@mui/x-data-grid';
+
+function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeight) {
+  if (typeof getDetailPanelContent !== 'function') {
+    return {};
+  } // TODO change to lazy approach using a Proxy
+  // only call getDetailPanelContent when asked for an id
+
+
+  const rowIds = gridRowIdsSelector(apiRef);
+  const contentCache = rowIds.reduce((acc, id) => {
+    const params = apiRef.current.getRowParams(id);
+    acc[id] = getDetailPanelContent(params);
+    return acc;
+  }, {});
+  const heightCache = rowIds.reduce((acc, id) => {
+    if (contentCache[id] == null) {
+      return acc;
+    }
+
+    const params = apiRef.current.getRowParams(id);
+    acc[id] = getDetailPanelHeight(params);
+    return acc;
+  }, {});
+  return {
+    contentCache,
+    heightCache
+  };
+}
+
+export const useGridDetailPanelCache = (apiRef, props) => {
+  const updateCaches = React.useCallback(() => {
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        detailPanel: _extends({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight))
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
+  useGridApiEventHandler(apiRef, GridEvents.visibleRowsSet, updateCaches);
+  const isFirstRender = React.useRef(true);
+
+  if (isFirstRender.current) {
+    isFirstRender.current = false;
+    updateCaches();
+  }
+
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      return;
+    }
+
+    updateCaches();
+  }, [updateCaches]);
+};

package/modern/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_DETAIL_PANEL_TOGGLE_COL_DEF } from './gridDetailPanelToggleColDef';
+export const useGridDetailPanelPreProcessors = (apiRef, props) => {
+  const addToggleColumn = React.useCallback(columnsState => {
+    if (props.getDetailPanelContent == null) {
+      // Remove the toggle column, when it exists
+      if (columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
+        delete columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD];
+        columnsState.all = columnsState.all.filter(field => field !== GRID_DETAIL_PANEL_TOGGLE_FIELD);
+      }
+
+      return columnsState;
+    } // Don't add the toggle column if there's already one
+    // The user might have manually added it to have it in a custom position
+
+
+    if (columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
+      return columnsState;
+    } // Othewise, add the toggle column at the beginning
+
+
+    columnsState.all = [GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.all];
+    columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = GRID_DETAIL_PANEL_TOGGLE_COL_DEF;
+    return columnsState;
+  }, [props.getDetailPanelContent]);
+  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', addToggleColumn);
+};

package/modern/hooks/features/index.js

@@ -0,0 +1,7 @@
+// Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro`
+export * from './columnPinning';
+export * from './columnReorder';
+export * from './columnResize';
+export * from './rowGrouping';
+export * from './treeData';
+export * from './detailPanel';

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

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { useGridSelector, GridEvents, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector } from '@mui/x-data-grid';
+import { useGridVisibleRows } from '@mui/x-data-grid/internals';
+
+/**
+ * Only available in DataGridPro
+ * @requires useGridColumns (state)
+ * @requires useGridDimensions (method) - can be after
+ * @requires useGridScroll (method
+ */
+export const useGridInfiniteLoader = (apiRef, props) => {
+  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  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();
+
+    if (!dimensions) {
+      return;
+    }
+
+    const scrollPositionBottom = scrollPosition.top + dimensions.viewportOuterSize.height;
+    const viewportPageSize = apiRef.current.unstable_getViewportPageSize();
+
+    if (scrollPositionBottom < contentHeight - props.scrollEndThreshold) {
+      isInScrollBottomArea.current = false;
+    }
+
+    if (scrollPositionBottom >= contentHeight - props.scrollEndThreshold && !isInScrollBottomArea.current) {
+      const rowScrollEndParam = {
+        visibleColumns,
+        viewportPageSize,
+        virtualRowsCount: currentPage.rows.length
+      };
+      apiRef.current.publishEvent(GridEvents.rowsScrollEnd, rowScrollEndParam);
+      isInScrollBottomArea.current = true;
+    }
+  }, [contentHeight, props.scrollEndThreshold, visibleColumns, apiRef, currentPage.rows.length]);
+  const handleGridScroll = React.useCallback(({
+    left,
+    top
+  }) => {
+    handleRowsScrollEnd({
+      left,
+      top
+    });
+  }, [handleRowsScrollEnd]);
+  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, handleGridScroll);
+  useGridApiOptionHandler(apiRef, GridEvents.rowsScrollEnd, props.onRowsScrollEnd);
+};