@mui/x-data-grid 7.0.0-alpha.8 → 7.0.0-beta.0

package/legacy/components/GridRow.js

@@ -2,7 +2,7 @@ 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 _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["selected", "hovered", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+var _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "renderedColumns", "pinnedColumns", "dimensions", "firstColumnToRender", "lastColumnToRender", "isFirstVisible", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -12,7 +12,7 @@ import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRo
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
+import { gridColumnPositionsSelector } from '../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector, objectShallowCompare } from '../hooks/utils/useGridSelector';
 import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 import { findParentElementFromClassName, isEventTargetInPortal } from '../utils/domUtils';
@@ -22,20 +22,24 @@ import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelTogg
 import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
 import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
-import { randomNumberBetween } from '../utils/utils';
-import { GridCellWrapper, GridCellV7 } from './cell/GridCell';
 import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors';
+import { randomNumberBetween } from '../utils/utils';
+import { PinnedPosition } from './cell/GridCell';
+import { GridScrollbarFillerCell as ScrollbarFiller } from './GridScrollbarFillerCell';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var editable = ownerState.editable,
     editing = ownerState.editing,
     selected = ownerState.selected,
+    isFirstVisible = ownerState.isFirstVisible,
     isLastVisible = ownerState.isLastVisible,
     rowHeight = ownerState.rowHeight,
     classes = ownerState.classes;
   var slots = {
-    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight']
+    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight'],
+    pinnedLeft: ['pinnedLeft'],
+    pinnedRight: ['pinnedRight']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
@@ -44,31 +48,30 @@ function EmptyCell(_ref) {
   if (!width) {
     return null;
   }
-  var style = {
-    width: width
-  };
   return /*#__PURE__*/_jsx("div", {
-    className: "".concat(gridClasses.cell, " ").concat(gridClasses.withBorderColor),
-    style: style
-  }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
+    role: "presentation",
+    className: clsx(gridClasses.cell, gridClasses.cellEmpty),
+    style: {
+      '--width': "".concat(width, "px")
+    }
+  });
 }
 var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   var selected = props.selected,
-    hovered = props.hovered,
     rowId = props.rowId,
     row = props.row,
     index = props.index,
     styleProp = props.style,
-    position = props.position,
     rowHeight = props.rowHeight,
     className = props.className,
     visibleColumns = props.visibleColumns,
     renderedColumns = props.renderedColumns,
-    containerWidth = props.containerWidth,
+    pinnedColumns = props.pinnedColumns,
+    dimensions = props.dimensions,
     firstColumnToRender = props.firstColumnToRender,
     lastColumnToRender = props.lastColumnToRender,
-    _props$isLastVisible = props.isLastVisible,
-    isLastVisible = _props$isLastVisible === void 0 ? false : _props$isLastVisible,
+    isFirstVisible = props.isFirstVisible,
+    isLastVisible = props.isLastVisible,
     focusedCellColumnIndexNotInRange = props.focusedCellColumnIndexNotInRange,
     isNotVisible = props.isNotVisible,
     focusedCell = props.focusedCell,
@@ -84,17 +87,19 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   var ref = React.useRef(null);
   var rootProps = useGridRootProps();
   var currentPage = useGridVisibleRows(apiRef, rootProps);
-  var columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   var sortModel = useGridSelector(apiRef, gridSortModelSelector);
   var treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
   var headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
+  var columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   var editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
   var handleRef = useForkRef(ref, refProp);
+  var rowNode = apiRef.current.getRowNode(rowId);
+  var scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
   var ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
   var ownerState = {
     selected: selected,
-    hovered: hovered,
+    isFirstVisible: isFirstVisible,
     isLastVisible: isLastVisible,
     classes: rootProps.classes,
     editing: apiRef.current.getRowMode(rowId) === GridRowModes.Edit,
@@ -105,9 +110,9 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   React.useLayoutEffect(function () {
     if (rowHeight === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
       // Fallback for IE
-      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight, position);
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight);
     }
-  }, [apiRef, rowHeight, rowId, position]);
+  }, [apiRef, rowHeight, rowId]);
   React.useLayoutEffect(function () {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the
@@ -130,13 +135,13 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       var _entries = _slicedToArray(entries, 1),
         entry = _entries[0];
       var height = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
-      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height, position);
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height);
     });
     resizeObserver.observe(rootElement);
     return function () {
       return resizeObserver.disconnect();
     };
-  }, [apiRef, currentPage.range, index, rowHeight, rowId, position]);
+  }, [apiRef, currentPage.range, index, rowHeight, rowId]);
   var publish = React.useCallback(function (eventName, propHandler) {
     return function (event) {
       // Ignore portal
@@ -192,56 +197,15 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   var slots = rootProps.slots,
     slotProps = rootProps.slotProps,
     disableColumnReorder = rootProps.disableColumnReorder;
-  var CellComponent = slots.cell === GridCellV7 ? GridCellV7 : GridCellWrapper;
   var rowReordering = rootProps.rowReordering;
-  var getCell = function getCell(column, cellProps) {
-    var _editRowsState$rowId$, _editRowsState$rowId;
-    // when the cell is a reorder cell we are not allowing to reorder the col
-    // fixes https://github.com/mui/mui-x/issues/11126
-    var isReorderCell = column.field === '__reorder__';
-    var isEditingRows = Object.keys(editRowsState).length > 0;
-    var canReorderColumn = !(disableColumnReorder || column.disableReorder);
-    var canReorderRow = rowReordering && !sortModel.length && treeDepth <= 1 && !isEditingRows;
-    var disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow);
-    var editCellState = (_editRowsState$rowId$ = (_editRowsState$rowId = editRowsState[rowId]) == null ? void 0 : _editRowsState$rowId[column.field]) != null ? _editRowsState$rowId$ : null;
-    var cellIsNotVisible = false;
-    if (focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
-      cellIsNotVisible = true;
-    }
-    return /*#__PURE__*/_jsx(CellComponent, _extends({
-      column: column,
-      width: cellProps.width,
-      rowId: rowId,
-      height: rowHeight,
-      showRightBorder: cellProps.showRightBorder,
-      align: column.align || 'left',
-      colIndex: cellProps.indexRelativeToAllColumns,
-      colSpan: cellProps.colSpan,
-      disableDragEvents: disableDragEvents,
-      editCellState: editCellState,
-      isNotVisible: cellIsNotVisible
-    }, slotProps == null ? void 0 : slotProps.cell), column.field);
-  };
   var sizes = useGridSelector(apiRef, function () {
     return _extends({}, apiRef.current.unstable_getRowInternalSizes(rowId));
   }, objectShallowCompare);
   var minHeight = rowHeight;
   if (minHeight === 'auto' && sizes) {
-    var numberOfBaseSizes = 0;
-    var maximumSize = Object.entries(sizes).reduce(function (acc, _ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        key = _ref3[0],
-        size = _ref3[1];
-      var isBaseHeight = /^base[A-Z]/.test(key);
-      if (!isBaseHeight) {
-        return acc;
-      }
-      numberOfBaseSizes += 1;
-      if (size > acc) {
-        return size;
-      }
-      return acc;
-    }, 0);
+    var _sizes$baseCenter;
+    var numberOfBaseSizes = 1;
+    var maximumSize = (_sizes$baseCenter = sizes.baseCenter) != null ? _sizes$baseCenter : 0;
     if (maximumSize > 0 && numberOfBaseSizes > 1) {
       minHeight = maximumSize;
     }
@@ -287,11 +251,87 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
   var randomNumber = randomNumberBetween(10000, 20, 80);
-  var rowNode = apiRef.current.getRowNode(rowId);
+  var getCell = function getCell(column, indexInSection, indexRelativeToAllColumns, sectionLength) {
+    var _editRowsState$rowId$, _editRowsState$rowId;
+    var pinnedPosition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : PinnedPosition.NONE;
+    var cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
+    if (!cellColSpanInfo || cellColSpanInfo.spannedByColSpan) {
+      return null;
+    }
+    var pinnedOffset;
+    // FIXME: Why is the switch check exhaustiveness not validated with typescript-eslint?
+    // eslint-disable-next-line default-case
+    switch (pinnedPosition) {
+      case PinnedPosition.LEFT:
+        pinnedOffset = columnPositions[indexRelativeToAllColumns];
+        break;
+      case PinnedPosition.RIGHT:
+        pinnedOffset = dimensions.columnsTotalWidth - columnPositions[indexRelativeToAllColumns] - column.computedWidth + scrollbarWidth;
+        break;
+      case PinnedPosition.NONE:
+        pinnedOffset = 0;
+        break;
+    }
+    if ((rowNode == null ? void 0 : rowNode.type) === 'skeletonRow') {
+      var _width = cellColSpanInfo.cellProps.width;
+      var contentWidth = Math.round(randomNumber());
+      return /*#__PURE__*/_jsx(slots.skeletonCell, {
+        width: _width,
+        contentWidth: contentWidth,
+        field: column.field,
+        align: column.align
+      }, column.field);
+    }
+    var _cellColSpanInfo$cell = cellColSpanInfo.cellProps,
+      colSpan = _cellColSpanInfo$cell.colSpan,
+      width = _cellColSpanInfo$cell.width;
+    var editCellState = (_editRowsState$rowId$ = (_editRowsState$rowId = editRowsState[rowId]) == null ? void 0 : _editRowsState$rowId[column.field]) != null ? _editRowsState$rowId$ : null;
+
+    // when the cell is a reorder cell we are not allowing to reorder the col
+    // fixes https://github.com/mui/mui-x/issues/11126
+    var isReorderCell = column.field === '__reorder__';
+    var isEditingRows = Object.keys(editRowsState).length > 0;
+    var canReorderColumn = !(disableColumnReorder || column.disableReorder);
+    var canReorderRow = rowReordering && !sortModel.length && treeDepth <= 1 && !isEditingRows;
+    var disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow);
+    var cellIsNotVisible = false;
+    if (focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
+      cellIsNotVisible = true;
+    }
+    return /*#__PURE__*/_jsx(slots.cell, _extends({
+      column: column,
+      width: width,
+      rowId: rowId,
+      height: rowHeight,
+      align: column.align || 'left',
+      colIndex: indexRelativeToAllColumns,
+      colSpan: colSpan,
+      disableDragEvents: disableDragEvents,
+      editCellState: editCellState,
+      isNotVisible: cellIsNotVisible
+    }, slotProps == null ? void 0 : slotProps.cell, {
+      pinnedOffset: pinnedOffset,
+      pinnedPosition: pinnedPosition,
+      sectionIndex: indexInSection,
+      sectionLength: sectionLength,
+      gridHasScrollX: dimensions.hasScrollX
+    }), column.field);
+  };
+
+  /* Start of rendering */
+
   if (!rowNode) {
     return null;
   }
-  var rowType = rowNode.type;
+  var leftCells = pinnedColumns.left.map(function (column, i) {
+    var indexRelativeToAllColumns = i;
+    return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.left.length, PinnedPosition.LEFT);
+  });
+  var rightCells = pinnedColumns.right.map(function (column, i) {
+    var indexRelativeToAllColumns = visibleColumns.length - pinnedColumns.right.length + i;
+    return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.right.length, PinnedPosition.RIGHT);
+  });
+  var middleColumnsLength = visibleColumns.length - pinnedColumns.left.length - pinnedColumns.right.length;
   var cells = [];
   for (var i = 0; i < renderedColumns.length; i += 1) {
     var column = renderedColumns[i];
@@ -303,32 +343,9 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
         indexRelativeToAllColumns -= 1;
       }
     }
-    var cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
-    if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
-      if (rowType !== 'skeletonRow') {
-        var _cellColSpanInfo$cell = cellColSpanInfo.cellProps,
-          colSpan = _cellColSpanInfo$cell.colSpan,
-          width = _cellColSpanInfo$cell.width;
-        var cellProps = {
-          width: width,
-          colSpan: colSpan,
-          showRightBorder: rootProps.showCellVerticalBorder,
-          indexRelativeToAllColumns: indexRelativeToAllColumns
-        };
-        cells.push(getCell(column, cellProps));
-      } else {
-        var _width = cellColSpanInfo.cellProps.width;
-        var contentWidth = Math.round(randomNumber());
-        cells.push( /*#__PURE__*/_jsx(slots.skeletonCell, {
-          width: _width,
-          contentWidth: contentWidth,
-          field: column.field,
-          align: column.align
-        }, column.field));
-      }
-    }
+    var indexInSection = indexRelativeToAllColumns - pinnedColumns.left.length;
+    cells.push(getCell(column, indexInSection, indexRelativeToAllColumns, middleColumnsLength));
   }
-  var emptyCellWidth = containerWidth - columnsTotalWidth;
   var eventHandlers = row ? {
     onClick: publishClick,
     onDoubleClick: publish('rowDoubleClick', onDoubleClick),
@@ -337,18 +354,27 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     onMouseOut: publish('rowMouseOut', onMouseOut),
     onMouseOver: publish('rowMouseOver', onMouseOver)
   } : null;
+  var expandedWidth = dimensions.viewportOuterSize.width - dimensions.columnsTotalWidth - scrollbarWidth;
+  var emptyCellWidth = Math.max(0, expandedWidth);
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: handleRef,
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
-    className: clsx.apply(void 0, _toConsumableArray(rowClassNames).concat([classes.root, className, hovered && 'Mui-hovered'])),
+    className: clsx.apply(void 0, _toConsumableArray(rowClassNames).concat([classes.root, className])),
     "aria-rowindex": ariaRowIndex,
     "aria-selected": selected,
     style: style
   }, eventHandlers, other, {
-    children: [cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
+    children: [leftCells, cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
       width: emptyCellWidth
+    }), rightCells.length > 0 && /*#__PURE__*/_jsx("div", {
+      role: "presentation",
+      style: {
+        flex: '1'
+      }
+    }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/_jsx(ScrollbarFiller, {
+      pinnedRight: pinnedColumns.right.length > 0
     })]
   }));
 });
@@ -357,7 +383,41 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  containerWidth: PropTypes.number.isRequired,
+  dimensions: PropTypes.shape({
+    bottomContainerHeight: PropTypes.number.isRequired,
+    columnsTotalWidth: PropTypes.number.isRequired,
+    contentSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired
+    }).isRequired,
+    hasScrollX: PropTypes.bool.isRequired,
+    hasScrollY: PropTypes.bool.isRequired,
+    headerHeight: PropTypes.number.isRequired,
+    headersTotalHeight: PropTypes.number.isRequired,
+    isReady: PropTypes.bool.isRequired,
+    leftPinnedWidth: PropTypes.number.isRequired,
+    minimumSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired
+    }).isRequired,
+    rightPinnedWidth: PropTypes.number.isRequired,
+    root: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired
+    }).isRequired,
+    rowHeight: PropTypes.number.isRequired,
+    rowWidth: PropTypes.number.isRequired,
+    scrollbarSize: PropTypes.number.isRequired,
+    topContainerHeight: PropTypes.number.isRequired,
+    viewportInnerSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired
+    }).isRequired,
+    viewportOuterSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired
+    }).isRequired
+  }).isRequired,
   firstColumnToRender: PropTypes.number.isRequired,
   /**
    * Determines which cell has focus.
@@ -370,14 +430,15 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
    * If some rows above have expanded children, this index also take those children into account.
    */
   index: PropTypes.number.isRequired,
-  isLastVisible: PropTypes.bool,
+  isFirstVisible: PropTypes.bool.isRequired,
+  isLastVisible: PropTypes.bool.isRequired,
   isNotVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
   onMouseLeave: PropTypes.func,
-  position: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
+  pinnedColumns: PropTypes.object.isRequired,
   renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
   row: PropTypes.object,
   rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,

package/legacy/components/GridScrollbarFillerCell.js

@@ -0,0 +1,36 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import { getDataGridUtilityClass as getClassName } from '../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+var classes = {
+  root: getClassName('scrollbarFiller'),
+  header: getClassName('scrollbarFiller--header'),
+  borderTop: getClassName('scrollbarFiller--borderTop'),
+  pinnedRight: getClassName('scrollbarFiller--pinnedRight')
+};
+var Style = styled('div')(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
+  alignSelf: 'stretch'
+}, "&.".concat(classes.borderTop), {
+  borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+}), "&.".concat(classes.pinnedRight), {
+  backgroundColor: 'var(--DataGrid-pinnedBackground)'
+}), "&.".concat(classes.pinnedRight, ":not(.").concat(classes.header, ")"), {
+  position: 'sticky',
+  right: 0
+}), "&:not(.".concat(classes.header, "):not(.").concat(classes.pinnedRight, ")"), {
+  transform: 'translate3d(var(--DataGrid-offsetLeft), 0, 0)'
+}));
+function GridScrollbarFillerCell(_ref) {
+  var header = _ref.header,
+    _ref$borderTop = _ref.borderTop,
+    borderTop = _ref$borderTop === void 0 ? true : _ref$borderTop,
+    pinnedRight = _ref.pinnedRight;
+  return /*#__PURE__*/_jsx(Style, {
+    role: "presentation",
+    className: clsx(classes.root, header && classes.header, borderTop && classes.borderTop, pinnedRight && classes.pinnedRight)
+  });
+}
+export { GridScrollbarFillerCell };

package/legacy/components/base/GridBody.js

@@ -1,114 +1,2 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { GridMainContainer } from '../containers/GridMainContainer';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { gridColumnPositionsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
-import { gridFilterActiveItemsLookupSelector } from '../../hooks/features/filter/gridFilterSelector';
-import { gridSortColumnLookupSelector } from '../../hooks/features/sorting/gridSortingSelector';
-import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector, unstable_gridTabIndexColumnGroupHeaderSelector, unstable_gridFocusColumnGroupHeaderSelector } from '../../hooks/features/focus/gridFocusStateSelector';
-import { gridDensityFactorSelector } from '../../hooks/features/density/densitySelector';
-import { gridColumnGroupsHeaderMaxDepthSelector, gridColumnGroupsHeaderStructureSelector } from '../../hooks/features/columnGrouping/gridColumnGroupsSelector';
-import { gridColumnMenuSelector } from '../../hooks/features/columnMenu/columnMenuSelector';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-function GridBody(props) {
-  var VirtualScrollerComponent = props.VirtualScrollerComponent,
-    ColumnHeadersProps = props.ColumnHeadersProps,
-    children = props.children;
-  var apiRef = useGridPrivateApiContext();
-  var rootProps = useGridRootProps();
-  var rootRef = React.useRef(null);
-  var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  var filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
-  var sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
-  var columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
-  var columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
-  var cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
-  var columnGroupHeaderTabIndexState = useGridSelector(apiRef, unstable_gridTabIndexColumnGroupHeaderSelector);
-  var columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
-  var columnGroupHeaderFocus = useGridSelector(apiRef, unstable_gridFocusColumnGroupHeaderSelector);
-  var densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  var headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
-  var columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
-  var columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
-  var columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
-  var hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
-  useEnhancedEffect(function () {
-    apiRef.current.computeSizeAndPublishResizeEvent();
-    var elementToObserve = rootRef.current;
-    if (typeof ResizeObserver === 'undefined') {
-      return function () {};
-    }
-    var animationFrame;
-    var observer = new ResizeObserver(function () {
-      // See https://github.com/mui/mui-x/issues/8733
-      animationFrame = requestAnimationFrame(function () {
-        apiRef.current.computeSizeAndPublishResizeEvent();
-      });
-    });
-    if (elementToObserve) {
-      observer.observe(elementToObserve);
-    }
-    return function () {
-      if (animationFrame) {
-        window.cancelAnimationFrame(animationFrame);
-      }
-      if (elementToObserve) {
-        observer.unobserve(elementToObserve);
-      }
-    };
-  }, [apiRef]);
-  var columnHeadersRef = React.useRef(null);
-  var columnsContainerRef = React.useRef(null);
-  var virtualScrollerRef = React.useRef(null);
-  apiRef.current.register('private', {
-    columnHeadersContainerElementRef: columnsContainerRef,
-    columnHeadersElementRef: columnHeadersRef,
-    virtualScrollerRef: virtualScrollerRef,
-    mainElementRef: rootRef
-  });
-  var hasDimensions = !!apiRef.current.getRootDimensions();
-  return /*#__PURE__*/_jsxs(GridMainContainer, {
-    ref: rootRef,
-    children: [/*#__PURE__*/_jsx(rootProps.slots.columnHeaders, _extends({
-      ref: columnsContainerRef,
-      innerRef: columnHeadersRef,
-      visibleColumns: visibleColumns,
-      filterColumnLookup: filterColumnLookup,
-      sortColumnLookup: sortColumnLookup,
-      columnPositions: columnPositions,
-      columnHeaderTabIndexState: columnHeaderTabIndexState,
-      columnGroupHeaderTabIndexState: columnGroupHeaderTabIndexState,
-      columnHeaderFocus: columnHeaderFocus,
-      columnGroupHeaderFocus: columnGroupHeaderFocus,
-      densityFactor: densityFactor,
-      headerGroupingMaxDepth: headerGroupingMaxDepth,
-      columnMenuState: columnMenuState,
-      columnVisibility: columnVisibility,
-      columnGroupsHeaderStructure: columnGroupsHeaderStructure,
-      hasOtherElementInTabSequence: hasOtherElementInTabSequence
-    }, ColumnHeadersProps)), hasDimensions && /*#__PURE__*/_jsx(VirtualScrollerComponent
-    // The content is only rendered after dimensions are computed because
-    // the lazy-loading hook is listening to `renderedRowsIntervalChange`,
-    // but only does something if the dimensions are also available.
-    // If this event is published while dimensions haven't been computed,
-    // the `onFetchRows` prop won't be called during mount.
-    , {
-      ref: virtualScrollerRef
-    }), children]
-  });
-}
-process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  children: PropTypes.node,
-  ColumnHeadersProps: PropTypes.object,
-  VirtualScrollerComponent: PropTypes.elementType.isRequired
-} : void 0;
-export { GridBody };
+import { GridVirtualScroller } from '../virtualization/GridVirtualScroller';
+export { GridVirtualScroller as GridBody };

package/legacy/components/base/GridOverlays.js

@@ -1,15 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/system';
-import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import clsx from 'clsx';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridExpandedRowCountSelector } from '../../hooks/features/filter/gridFilterSelector';
 import { gridRowCountSelector, gridRowsLoadingSelector } from '../../hooks/features/rows/gridRowsSelector';
+import { gridDimensionsSelector } from '../../hooks/features/dimensions';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridVisibleRows } from '../../hooks/utils/useGridVisibleRows';
 import { getMinimalContentHeight } from '../../hooks/features/rows/gridRowsUtils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -27,7 +28,7 @@ var GridOverlayWrapperRoot = styled('div', {
   return {
     position: 'sticky',
     // To stay in place while scrolling
-    top: 0,
+    top: 'var(--DataGrid-headersTotalHeight)',
     left: 0,
     width: 0,
     // To stay above the content instead of shifting it down
@@ -56,33 +57,17 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridOverlayWrapper(props) {
-  var _viewportInnerSize$he, _viewportInnerSize$wi;
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
-  var _React$useState = React.useState(function () {
-      var _apiRef$current$getRo, _apiRef$current$getRo2;
-      return (_apiRef$current$getRo = (_apiRef$current$getRo2 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo2.viewportInnerSize) != null ? _apiRef$current$getRo : null;
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    viewportInnerSize = _React$useState2[0],
-    setViewportInnerSize = _React$useState2[1];
-  var handleViewportSizeChange = React.useCallback(function () {
-    var _apiRef$current$getRo3, _apiRef$current$getRo4;
-    setViewportInnerSize((_apiRef$current$getRo3 = (_apiRef$current$getRo4 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo4.viewportInnerSize) != null ? _apiRef$current$getRo3 : null);
-  }, [apiRef]);
-  useEnhancedEffect(function () {
-    return apiRef.current.subscribeEvent('viewportInnerSizeChange', handleViewportSizeChange);
-  }, [apiRef, handleViewportSizeChange]);
-  var height = (_viewportInnerSize$he = viewportInnerSize == null ? void 0 : viewportInnerSize.height) != null ? _viewportInnerSize$he : 0;
-  if (rootProps.autoHeight && height === 0) {
-    height = getMinimalContentHeight(apiRef, rootProps.rowHeight); // Give room to show the overlay when there no rows.
+  var currentPage = useGridVisibleRows(apiRef, rootProps);
+  var dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  var height = dimensions.viewportOuterSize.height - dimensions.headersTotalHeight - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+  if (rootProps.autoHeight && currentPage.rows.length === 0 || height === 0) {
+    height = getMinimalContentHeight(apiRef);
   }
   var classes = useUtilityClasses(_extends({}, props, {
     classes: rootProps.classes
   }));
-  if (!viewportInnerSize) {
-    return null;
-  }
   return /*#__PURE__*/_jsx(GridOverlayWrapperRoot, {
     className: clsx(classes.root),
     overlayType: props.overlayType,
@@ -90,7 +75,7 @@ function GridOverlayWrapper(props) {
       className: clsx(classes.inner),
       style: {
         height: height,
-        width: (_viewportInnerSize$wi = viewportInnerSize == null ? void 0 : viewportInnerSize.width) != null ? _viewportInnerSize$wi : 0
+        width: dimensions.viewportOuterSize.width
       }
     }, props))
   });