@mui/x-data-grid 7.0.0-beta.2 → 7.0.0-beta.4

package/legacy/hooks/features/virtualization/useGridVirtualScroller.js

@@ -1,643 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback } from '@mui/utils';
-import { useTheme } from '@mui/material/styles';
-import { defaultMemoize } from 'reselect';
-import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
-import { useGridRootProps } from '../../utils/useGridRootProps';
-import { useGridSelector } from '../../utils/useGridSelector';
-import { useLazyRef } from '../../utils/useLazyRef';
-import { useResizeObserver } from '../../utils/useResizeObserver';
-import { useRunOnce } from '../../utils/useRunOnce';
-import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
-import { gridDimensionsSelector } from '../dimensions/gridDimensionsSelectors';
-import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
-import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
-import { useGridVisibleRows, getVisibleRows } from '../../utils/useGridVisibleRows';
-import { clamp } from '../../../utils/utils';
-import { selectedIdsLookupSelector } from '../rowSelection/gridRowSelectionSelector';
-import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
-import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils';
-import { getMinimalContentHeight } from '../rows/gridRowsUtils';
-import { gridRenderContextSelector, gridVirtualizationEnabledSelector, gridVirtualizationColumnEnabledSelector } from './gridVirtualizationSelectors';
-import { EMPTY_RENDER_CONTEXT } from './useGridVirtualization';
-import { jsx as _jsx } from "react/jsx-runtime";
-export var EMPTY_DETAIL_PANELS = Object.freeze(new Map());
-export var useGridVirtualScroller = function useGridVirtualScroller() {
-  var apiRef = useGridPrivateApiContext();
-  var rootProps = useGridRootProps();
-  var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  var enabled = useGridSelector(apiRef, gridVirtualizationEnabledSelector);
-  var enabledForColumns = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
-  var dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  var outerSize = dimensions.viewportOuterSize;
-  var pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
-  var pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
-  var hasBottomPinnedRows = pinnedRows.bottom.length > 0;
-  var _React$useState = React.useState(EMPTY_DETAIL_PANELS),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    panels = _React$useState2[0],
-    setPanels = _React$useState2[1];
-  var theme = useTheme();
-  var columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
-  var cellFocus = useGridSelector(apiRef, gridFocusCellSelector);
-  var cellTabIndex = useGridSelector(apiRef, gridTabIndexCellSelector);
-  var rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
-  var selectedRowsLookup = useGridSelector(apiRef, selectedIdsLookupSelector);
-  var currentPage = useGridVisibleRows(apiRef, rootProps);
-  var gridRootRef = apiRef.current.rootElementRef;
-  var mainRef = apiRef.current.mainElementRef;
-  var scrollerRef = apiRef.current.virtualScrollerRef;
-  var scrollbarVerticalRef = React.useRef(null);
-  var scrollbarHorizontalRef = React.useRef(null);
-  var contentHeight = dimensions.contentSize.height;
-  var columnsTotalWidth = dimensions.columnsTotalWidth;
-  useResizeObserver(mainRef, function () {
-    return apiRef.current.resize();
-  });
-  var previousContext = React.useRef(EMPTY_RENDER_CONTEXT);
-  var previousRowContext = React.useRef(EMPTY_RENDER_CONTEXT);
-  var renderContext = useGridSelector(apiRef, gridRenderContextSelector);
-  var scrollPosition = React.useRef({
-    top: 0,
-    left: 0
-  }).current;
-  var prevTotalWidth = React.useRef(columnsTotalWidth);
-  var getRenderedColumns = useLazyRef(createGetRenderedColumns).current;
-  var indexOfRowWithFocusedCell = React.useMemo(function () {
-    if (cellFocus !== null) {
-      return currentPage.rows.findIndex(function (row) {
-        return row.id === cellFocus.id;
-      });
-    }
-    return -1;
-  }, [cellFocus, currentPage.rows]);
-  var indexOfColumnWithFocusedCell = React.useMemo(function () {
-    if (cellFocus !== null) {
-      return visibleColumns.findIndex(function (column) {
-        return column.field === cellFocus.field;
-      });
-    }
-    return -1;
-  }, [cellFocus, visibleColumns]);
-  React.useEffect(function () {
-    var _gridRootRef$current, _gridRootRef$current2;
-    var direction = theme.direction === 'ltr' ? 1 : -1;
-    var top = gridRowsMetaSelector(apiRef.current.state).positions[renderContext.firstRowIndex];
-    var left = direction * columnPositions[renderContext.firstColumnIndex] - columnPositions[pinnedColumns.left.length];
-    (_gridRootRef$current = gridRootRef.current) == null || _gridRootRef$current.style.setProperty('--DataGrid-offsetTop', "".concat(top, "px"));
-    (_gridRootRef$current2 = gridRootRef.current) == null || _gridRootRef$current2.style.setProperty('--DataGrid-offsetLeft', "".concat(left, "px"));
-  }, [apiRef, gridRootRef, theme.direction, columnPositions, pinnedColumns.left.length, renderContext]);
-  var updateRenderContext = React.useCallback(function (nextRenderContext, rawRenderContext) {
-    if (areRenderContextsEqual(nextRenderContext, apiRef.current.state.virtualization.renderContext)) {
-      return;
-    }
-    var didRowsIntervalChange = nextRenderContext.firstRowIndex !== previousRowContext.current.firstRowIndex || nextRenderContext.lastRowIndex !== previousRowContext.current.lastRowIndex;
-    apiRef.current.setState(function (state) {
-      return _extends({}, state, {
-        virtualization: _extends({}, state.virtualization, {
-          renderContext: nextRenderContext
-        })
-      });
-    });
-
-    // The lazy-loading hook is listening to `renderedRowsIntervalChange`,
-    // but only does something if the dimensions are also available.
-    // So we wait until we have valid dimensions before publishing the first event.
-    if (dimensions.isReady && didRowsIntervalChange) {
-      previousRowContext.current = nextRenderContext;
-      apiRef.current.publishEvent('renderedRowsIntervalChange', nextRenderContext);
-    }
-    previousContext.current = rawRenderContext;
-    prevTotalWidth.current = dimensions.columnsTotalWidth;
-  }, [apiRef, dimensions.isReady, dimensions.columnsTotalWidth]);
-  var triggerUpdateRenderContext = function triggerUpdateRenderContext() {
-    var inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
-    var _computeRenderContext = computeRenderContext(inputs, scrollPosition),
-      _computeRenderContext2 = _slicedToArray(_computeRenderContext, 2),
-      nextRenderContext = _computeRenderContext2[0],
-      rawRenderContext = _computeRenderContext2[1];
-
-    // Since previous render, we have scrolled...
-    var topRowsScrolled = Math.abs(rawRenderContext.firstRowIndex - previousContext.current.firstRowIndex);
-    var bottomRowsScrolled = Math.abs(rawRenderContext.lastRowIndex - previousContext.current.lastRowIndex);
-    var topColumnsScrolled = Math.abs(rawRenderContext.firstColumnIndex - previousContext.current.firstColumnIndex);
-    var bottomColumnsScrolled = Math.abs(rawRenderContext.lastColumnIndex - previousContext.current.lastColumnIndex);
-    var shouldUpdate = topRowsScrolled >= rootProps.rowThreshold || bottomRowsScrolled >= rootProps.rowThreshold || topColumnsScrolled >= rootProps.columnThreshold || bottomColumnsScrolled >= rootProps.columnThreshold || prevTotalWidth.current !== dimensions.columnsTotalWidth;
-    if (!shouldUpdate) {
-      return previousContext.current;
-    }
-
-    // Prevents batching render context changes
-    ReactDOM.flushSync(function () {
-      updateRenderContext(nextRenderContext, rawRenderContext);
-    });
-    return nextRenderContext;
-  };
-  var forceUpdateRenderContext = function forceUpdateRenderContext() {
-    var inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
-    var _computeRenderContext3 = computeRenderContext(inputs, scrollPosition),
-      _computeRenderContext4 = _slicedToArray(_computeRenderContext3, 2),
-      nextRenderContext = _computeRenderContext4[0],
-      rawRenderContext = _computeRenderContext4[1];
-    updateRenderContext(nextRenderContext, rawRenderContext);
-  };
-  var handleScroll = useEventCallback(function (event) {
-    var _event$currentTarget = event.currentTarget,
-      scrollTop = _event$currentTarget.scrollTop,
-      scrollLeft = _event$currentTarget.scrollLeft;
-    scrollPosition.top = scrollTop;
-    scrollPosition.left = scrollLeft;
-
-    // On iOS and macOS, negative offsets are possible when swiping past the start
-    if (scrollTop < 0) {
-      return;
-    }
-    if (theme.direction === 'ltr') {
-      if (scrollLeft < 0) {
-        return;
-      }
-    }
-    if (theme.direction === 'rtl') {
-      if (scrollLeft > 0) {
-        return;
-      }
-    }
-    var nextRenderContext = triggerUpdateRenderContext();
-    apiRef.current.publishEvent('scrollPositionChange', {
-      top: scrollTop,
-      left: scrollLeft,
-      renderContext: nextRenderContext
-    });
-  });
-  var handleWheel = useEventCallback(function (event) {
-    apiRef.current.publishEvent('virtualScrollerWheel', {}, event);
-  });
-  var handleTouchMove = useEventCallback(function (event) {
-    apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
-  });
-  var minFirstColumn = pinnedColumns.left.length;
-  var maxLastColumn = visibleColumns.length - pinnedColumns.right.length;
-  var getRows = function getRows() {
-    var _params$rows, _rootProps$slotProps;
-    var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var isLastSection = !hasBottomPinnedRows && params.position === undefined || hasBottomPinnedRows && params.position === 'bottom';
-    var isPinnedSection = params.position !== undefined;
-    var rowIndexOffset;
-    // FIXME: Why is the switch check exhaustiveness not validated with typescript-eslint?
-    // eslint-disable-next-line default-case
-    switch (params.position) {
-      case 'top':
-        rowIndexOffset = 0;
-        break;
-      case 'bottom':
-        rowIndexOffset = pinnedRows.top.length + currentPage.rows.length;
-        break;
-      case undefined:
-        rowIndexOffset = pinnedRows.top.length;
-        break;
-    }
-    var firstRowToRender = renderContext.firstRowIndex;
-    var lastRowToRender = renderContext.lastRowIndex;
-    var firstColumnToRender = renderContext.firstColumnIndex;
-    var lastColumnToRender = renderContext.lastColumnIndex;
-    if (!params.rows && !currentPage.range) {
-      return [];
-    }
-    var renderedRows = (_params$rows = params.rows) != null ? _params$rows : currentPage.rows.slice(firstRowToRender, lastRowToRender);
-
-    // If the selected row is not within the current range of rows being displayed,
-    // we need to render it at either the top or bottom of the rows,
-    // depending on whether it is above or below the range.
-    var isRowWithFocusedCellNotInRange = false;
-    if (!isPinnedSection && indexOfRowWithFocusedCell > -1 && (firstRowToRender > indexOfRowWithFocusedCell || lastRowToRender < indexOfRowWithFocusedCell)) {
-      isRowWithFocusedCellNotInRange = true;
-      var rowWithFocusedCell = currentPage.rows[indexOfRowWithFocusedCell];
-      if (indexOfRowWithFocusedCell > firstRowToRender) {
-        renderedRows.push(rowWithFocusedCell);
-      } else {
-        renderedRows.unshift(rowWithFocusedCell);
-      }
-    }
-    var isColumnWihFocusedCellNotInRange = false;
-    if (!isPinnedSection && (firstColumnToRender > indexOfColumnWithFocusedCell || lastColumnToRender < indexOfColumnWithFocusedCell)) {
-      isColumnWihFocusedCellNotInRange = true;
-    }
-    var _getRenderedColumns = getRenderedColumns(visibleColumns, firstColumnToRender, lastColumnToRender, minFirstColumn, maxLastColumn, isColumnWihFocusedCellNotInRange ? indexOfColumnWithFocusedCell : -1),
-      focusedCellColumnIndexNotInRange = _getRenderedColumns.focusedCellColumnIndexNotInRange,
-      renderedColumns = _getRenderedColumns.renderedColumns;
-    renderedRows.forEach(function (row) {
-      apiRef.current.calculateColSpan({
-        rowId: row.id,
-        minFirstColumn: minFirstColumn,
-        maxLastColumn: maxLastColumn,
-        columns: visibleColumns
-      });
-      if (pinnedColumns.left.length > 0) {
-        apiRef.current.calculateColSpan({
-          rowId: row.id,
-          minFirstColumn: 0,
-          maxLastColumn: pinnedColumns.left.length,
-          columns: visibleColumns
-        });
-      }
-      if (pinnedColumns.right.length > 0) {
-        apiRef.current.calculateColSpan({
-          rowId: row.id,
-          minFirstColumn: visibleColumns.length - pinnedColumns.right.length,
-          maxLastColumn: visibleColumns.length,
-          columns: visibleColumns
-        });
-      }
-    });
-    var rows = [];
-    var rowProps = (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.row;
-    var isRowWithFocusedCellRendered = false;
-    for (var i = 0; i < renderedRows.length; i += 1) {
-      var _currentPage$range;
-      var _renderedRows$i = renderedRows[i],
-        id = _renderedRows$i.id,
-        model = _renderedRows$i.model;
-      var rowIndexInPage = ((currentPage == null || (_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0) + firstRowToRender + i;
-      var index = rowIndexOffset + rowIndexInPage;
-      if (isRowWithFocusedCellNotInRange && (cellFocus == null ? void 0 : cellFocus.id) === id) {
-        index = indexOfRowWithFocusedCell;
-        isRowWithFocusedCellRendered = true;
-      } else if (isRowWithFocusedCellRendered) {
-        index -= 1;
-      }
-      var isRowNotVisible = isRowWithFocusedCellNotInRange && cellFocus.id === id;
-      var baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
-      var isSelected = void 0;
-      if (selectedRowsLookup[id] == null) {
-        isSelected = false;
-      } else {
-        isSelected = apiRef.current.isRowSelectable(id);
-      }
-      var isFirstVisible = false;
-      if (params.position === undefined) {
-        isFirstVisible = rowIndexInPage === 0;
-      }
-      var isLastVisible = false;
-      if (isLastSection) {
-        if (!isPinnedSection) {
-          var lastIndex = currentPage.rows.length - 1;
-          var isLastVisibleRowIndex = isRowWithFocusedCellNotInRange ? firstRowToRender + i === lastIndex + 1 : firstRowToRender + i === lastIndex;
-          if (isLastVisibleRowIndex) {
-            isLastVisible = true;
-          }
-        } else {
-          isLastVisible = i === renderedRows.length - 1;
-        }
-      }
-      var focusedCell = cellFocus !== null && cellFocus.id === id ? cellFocus.field : null;
-      var columnWithFocusedCellNotInRange = focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange];
-      var renderedColumnsWithFocusedCell = columnWithFocusedCellNotInRange && focusedCell ? [columnWithFocusedCellNotInRange].concat(_toConsumableArray(renderedColumns)) : renderedColumns;
-      var tabbableCell = null;
-      if (cellTabIndex !== null && cellTabIndex.id === id) {
-        var cellParams = apiRef.current.getCellParams(id, cellTabIndex.field);
-        tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null;
-      }
-      rows.push( /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
-        row: model,
-        rowId: id,
-        index: index,
-        rowHeight: baseRowHeight,
-        focusedCell: focusedCell,
-        tabbableCell: tabbableCell,
-        focusedCellColumnIndexNotInRange: focusedCellColumnIndexNotInRange,
-        renderedColumns: renderedColumnsWithFocusedCell,
-        visibleColumns: visibleColumns,
-        pinnedColumns: pinnedColumns,
-        firstColumnToRender: firstColumnToRender,
-        lastColumnToRender: lastColumnToRender,
-        selected: isSelected,
-        dimensions: dimensions,
-        isFirstVisible: isFirstVisible,
-        isLastVisible: isLastVisible,
-        isNotVisible: isRowNotVisible
-      }, rowProps), id));
-      var panel = panels.get(id);
-      if (panel) {
-        rows.push(panel);
-      }
-    }
-    return rows;
-  };
-  var needsHorizontalScrollbar = outerSize.width && columnsTotalWidth >= outerSize.width;
-  var scrollerStyle = React.useMemo(function () {
-    return {
-      overflowX: !needsHorizontalScrollbar ? 'hidden' : undefined,
-      overflowY: rootProps.autoHeight ? 'hidden' : undefined
-    };
-  }, [needsHorizontalScrollbar, rootProps.autoHeight]);
-  var contentSize = React.useMemo(function () {
-    // In cases where the columns exceed the available width,
-    // the horizontal scrollbar should be shown even when there're no rows.
-    // Keeping 1px as minimum height ensures that the scrollbar will visible if necessary.
-    var height = Math.max(contentHeight, 1);
-    var size = {
-      width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto',
-      height: height
-    };
-    if (rootProps.autoHeight) {
-      if (currentPage.rows.length === 0) {
-        size.height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
-      } else {
-        size.height = contentHeight;
-      }
-    }
-    return size;
-  }, [apiRef, columnsTotalWidth, contentHeight, needsHorizontalScrollbar, rootProps.autoHeight, currentPage.rows.length]);
-  React.useEffect(function () {
-    apiRef.current.publishEvent('virtualScrollerContentSizeChange');
-  }, [apiRef, contentSize]);
-  useEnhancedEffect(function () {
-    // FIXME: Is this really necessary?
-    apiRef.current.resize();
-  }, [apiRef, rowsMeta.currentPageTotalHeight]);
-  useEnhancedEffect(function () {
-    if (enabled) {
-      // TODO a scroll reset should not be necessary
-      scrollerRef.current.scrollLeft = 0;
-      scrollerRef.current.scrollTop = 0;
-    } else {
-      var _gridRootRef$current3, _gridRootRef$current4;
-      (_gridRootRef$current3 = gridRootRef.current) == null || _gridRootRef$current3.style.setProperty('--DataGrid-offsetTop', '0px');
-      (_gridRootRef$current4 = gridRootRef.current) == null || _gridRootRef$current4.style.setProperty('--DataGrid-offsetLeft', '0px');
-    }
-  }, [enabled, gridRootRef, scrollerRef]);
-  useRunOnce(outerSize.width !== 0, function () {
-    var inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
-    var _computeRenderContext5 = computeRenderContext(inputs, scrollPosition),
-      _computeRenderContext6 = _slicedToArray(_computeRenderContext5, 2),
-      initialRenderContext = _computeRenderContext6[0],
-      rawRenderContext = _computeRenderContext6[1];
-    updateRenderContext(initialRenderContext, rawRenderContext);
-    apiRef.current.publishEvent('scrollPositionChange', {
-      top: scrollPosition.top,
-      left: scrollPosition.left,
-      renderContext: initialRenderContext
-    });
-  });
-  apiRef.current.register('private', {
-    updateRenderContext: forceUpdateRenderContext
-  });
-  return {
-    renderContext: renderContext,
-    setPanels: setPanels,
-    getRows: getRows,
-    getContainerProps: function getContainerProps() {
-      return {
-        ref: mainRef
-      };
-    },
-    getScrollerProps: function getScrollerProps() {
-      return {
-        ref: scrollerRef,
-        tabIndex: -1,
-        onScroll: handleScroll,
-        onWheel: handleWheel,
-        onTouchMove: handleTouchMove,
-        style: scrollerStyle,
-        role: 'presentation'
-      };
-    },
-    getContentProps: function getContentProps() {
-      return {
-        style: contentSize,
-        role: 'presentation'
-      };
-    },
-    getRenderZoneProps: function getRenderZoneProps() {
-      return {
-        role: 'rowgroup'
-      };
-    },
-    getScrollbarVerticalProps: function getScrollbarVerticalProps() {
-      return {
-        ref: scrollbarVerticalRef,
-        role: 'presentation'
-      };
-    },
-    getScrollbarHorizontalProps: function getScrollbarHorizontalProps() {
-      return {
-        ref: scrollbarHorizontalRef,
-        role: 'presentation'
-      };
-    }
-  };
-};
-function createGetRenderedColumns() {
-  return defaultMemoize(function (columns, firstColumnToRender, lastColumnToRender, minFirstColumn, maxLastColumn, indexOfColumnWithFocusedCell) {
-    // If the selected column is not within the current range of columns being displayed,
-    // we need to render it at either the left or right of the columns,
-    // depending on whether it is above or below the range.
-    var focusedCellColumnIndexNotInRange;
-    var renderedColumns = columns.slice(firstColumnToRender, lastColumnToRender);
-    if (indexOfColumnWithFocusedCell > -1) {
-      // check if it is not on the left pinned column.
-      if (firstColumnToRender > indexOfColumnWithFocusedCell && indexOfColumnWithFocusedCell >= minFirstColumn) {
-        focusedCellColumnIndexNotInRange = indexOfColumnWithFocusedCell;
-      }
-      // check if it is not on the right pinned column.
-      else if (lastColumnToRender < indexOfColumnWithFocusedCell && indexOfColumnWithFocusedCell < maxLastColumn) {
-        focusedCellColumnIndexNotInRange = indexOfColumnWithFocusedCell;
-      }
-    }
-    return {
-      focusedCellColumnIndexNotInRange: focusedCellColumnIndexNotInRange,
-      renderedColumns: renderedColumns
-    };
-  });
-}
-function inputsSelector(apiRef, rootProps, enabled, enabledForColumns) {
-  var dimensions = gridDimensionsSelector(apiRef.current.state);
-  var currentPage = getVisibleRows(apiRef, rootProps);
-  return {
-    enabled: enabled,
-    enabledForColumns: enabledForColumns,
-    apiRef: apiRef,
-    autoHeight: rootProps.autoHeight,
-    rowBuffer: rootProps.rowBuffer,
-    columnBuffer: rootProps.columnBuffer,
-    leftPinnedWidth: dimensions.leftPinnedWidth,
-    columnsTotalWidth: dimensions.columnsTotalWidth,
-    viewportInnerWidth: dimensions.viewportInnerSize.width,
-    viewportInnerHeight: dimensions.viewportInnerSize.height,
-    rowsMeta: gridRowsMetaSelector(apiRef.current.state),
-    columnPositions: gridColumnPositionsSelector(apiRef),
-    rows: currentPage.rows,
-    range: currentPage.range,
-    pinnedColumns: gridVisiblePinnedColumnDefinitionsSelector(apiRef),
-    visibleColumns: gridVisibleColumnDefinitionsSelector(apiRef)
-  };
-}
-function computeRenderContext(inputs, scrollPosition) {
-  var renderContext;
-  if (!inputs.enabled) {
-    renderContext = {
-      firstRowIndex: 0,
-      lastRowIndex: inputs.rows.length,
-      firstColumnIndex: 0,
-      lastColumnIndex: inputs.visibleColumns.length
-    };
-  } else {
-    var top = scrollPosition.top,
-      left = scrollPosition.left;
-    var realLeft = Math.abs(left) + inputs.leftPinnedWidth;
-
-    // Clamp the value because the search may return an index out of bounds.
-    // In the last index, this is not needed because Array.slice doesn't include it.
-    var firstRowIndex = Math.min(getNearestIndexToRender(inputs, top), inputs.rowsMeta.positions.length - 1);
-    var lastRowIndex = inputs.autoHeight ? firstRowIndex + inputs.rows.length : getNearestIndexToRender(inputs, top + inputs.viewportInnerHeight);
-    var firstColumnIndex = 0;
-    var lastColumnIndex = inputs.columnPositions.length;
-    if (inputs.enabledForColumns) {
-      var hasRowWithAutoHeight = false;
-      var _getIndexesToRender = getIndexesToRender({
-          firstIndex: firstRowIndex,
-          lastIndex: lastRowIndex,
-          minFirstIndex: 0,
-          maxLastIndex: inputs.rows.length,
-          buffer: inputs.rowBuffer
-        }),
-        _getIndexesToRender2 = _slicedToArray(_getIndexesToRender, 2),
-        firstRowToRender = _getIndexesToRender2[0],
-        lastRowToRender = _getIndexesToRender2[1];
-      for (var i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) {
-        var row = inputs.rows[i];
-        hasRowWithAutoHeight = inputs.apiRef.current.rowHasAutoHeight(row.id);
-      }
-      if (!hasRowWithAutoHeight) {
-        firstColumnIndex = binarySearch(realLeft, inputs.columnPositions, {
-          atStart: true,
-          lastPosition: inputs.columnsTotalWidth
-        });
-        lastColumnIndex = binarySearch(realLeft + inputs.viewportInnerWidth, inputs.columnPositions);
-      }
-    }
-    renderContext = {
-      firstRowIndex: firstRowIndex,
-      lastRowIndex: lastRowIndex,
-      firstColumnIndex: firstColumnIndex,
-      lastColumnIndex: lastColumnIndex
-    };
-  }
-  var actualRenderContext = deriveRenderContext(inputs.apiRef, inputs.rowBuffer, inputs.columnBuffer, inputs.rows, inputs.pinnedColumns, inputs.visibleColumns, renderContext);
-  return [actualRenderContext, renderContext];
-}
-function getNearestIndexToRender(inputs, offset) {
-  var _inputs$range, _inputs$range2;
-  var lastMeasuredIndexRelativeToAllRows = inputs.apiRef.current.getLastMeasuredRowIndex();
-  var allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity;
-  if ((_inputs$range = inputs.range) != null && _inputs$range.lastRowIndex && !allRowsMeasured) {
-    // Check if all rows in this page are already measured
-    allRowsMeasured = lastMeasuredIndexRelativeToAllRows >= inputs.range.lastRowIndex;
-  }
-  var lastMeasuredIndexRelativeToCurrentPage = clamp(lastMeasuredIndexRelativeToAllRows - (((_inputs$range2 = inputs.range) == null ? void 0 : _inputs$range2.firstRowIndex) || 0), 0, inputs.rowsMeta.positions.length);
-  if (allRowsMeasured || inputs.rowsMeta.positions[lastMeasuredIndexRelativeToCurrentPage] >= offset) {
-    // If all rows were measured (when no row has "auto" as height) or all rows before the offset
-    // were measured, then use a binary search because it's faster.
-    return binarySearch(offset, inputs.rowsMeta.positions);
-  }
-
-  // Otherwise, use an exponential search.
-  // If rows have "auto" as height, their positions will be based on estimated heights.
-  // In this case, we can skip several steps until we find a position higher than the offset.
-  // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
-  return exponentialSearch(offset, inputs.rowsMeta.positions, lastMeasuredIndexRelativeToCurrentPage);
-}
-
-/**
- * Accepts as input a raw render context (the area visible in the viewport) and adds
- * computes the actual render context based on pinned elements, buffer dimensions and
- * spanning.
- */
-function deriveRenderContext(apiRef, rowBuffer, columnBuffer, rows, pinnedColumns, visibleColumns, nextRenderContext) {
-  var _getIndexesToRender3 = getIndexesToRender({
-      firstIndex: nextRenderContext.firstRowIndex,
-      lastIndex: nextRenderContext.lastRowIndex,
-      minFirstIndex: 0,
-      maxLastIndex: rows.length,
-      buffer: rowBuffer
-    }),
-    _getIndexesToRender4 = _slicedToArray(_getIndexesToRender3, 2),
-    firstRowToRender = _getIndexesToRender4[0],
-    lastRowToRender = _getIndexesToRender4[1];
-  var _getIndexesToRender5 = getIndexesToRender({
-      firstIndex: nextRenderContext.firstColumnIndex,
-      lastIndex: nextRenderContext.lastColumnIndex,
-      minFirstIndex: pinnedColumns.left.length,
-      maxLastIndex: visibleColumns.length - pinnedColumns.right.length,
-      buffer: columnBuffer
-    }),
-    _getIndexesToRender6 = _slicedToArray(_getIndexesToRender5, 2),
-    initialFirstColumnToRender = _getIndexesToRender6[0],
-    lastColumnToRender = _getIndexesToRender6[1];
-  var firstColumnToRender = getFirstNonSpannedColumnToRender({
-    firstColumnToRender: initialFirstColumnToRender,
-    apiRef: apiRef,
-    firstRowToRender: firstRowToRender,
-    lastRowToRender: lastRowToRender,
-    visibleRows: rows
-  });
-  return {
-    firstRowIndex: firstRowToRender,
-    lastRowIndex: lastRowToRender,
-    firstColumnIndex: firstColumnToRender,
-    lastColumnIndex: lastColumnToRender
-  };
-}
-/**
- * Use binary search to avoid looping through all possible positions.
- * The `options.atStart` provides the possibility to match for the first element that
- * intersects the screen, even if said element's start position is before `offset`. In
- * other words, we search for `offset + width`.
- */
-function binarySearch(offset, positions) {
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
-  var sliceStart = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-  var sliceEnd = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : positions.length;
-  if (positions.length <= 0) {
-    return -1;
-  }
-  if (sliceStart >= sliceEnd) {
-    return sliceStart;
-  }
-  var pivot = sliceStart + Math.floor((sliceEnd - sliceStart) / 2);
-  var position = positions[pivot];
-  var isBefore;
-  if (options != null && options.atStart) {
-    var width = (pivot === positions.length - 1 ? options.lastPosition : positions[pivot + 1]) - position;
-    isBefore = offset - width < position;
-  } else {
-    isBefore = offset <= position;
-  }
-  return isBefore ? binarySearch(offset, positions, options, sliceStart, pivot) : binarySearch(offset, positions, options, pivot + 1, sliceEnd);
-}
-function exponentialSearch(offset, positions, index) {
-  var interval = 1;
-  while (index < positions.length && Math.abs(positions[index]) < offset) {
-    index += interval;
-    interval *= 2;
-  }
-  return binarySearch(offset, positions, undefined, Math.floor(index / 2), Math.min(index, positions.length));
-}
-function getIndexesToRender(_ref) {
-  var firstIndex = _ref.firstIndex,
-    lastIndex = _ref.lastIndex,
-    buffer = _ref.buffer,
-    minFirstIndex = _ref.minFirstIndex,
-    maxLastIndex = _ref.maxLastIndex;
-  return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
-}
-export function areRenderContextsEqual(context1, context2) {
-  if (context1 === context2) {
-    return true;
-  }
-  return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
-}