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

package/legacy/constants/defaultGridSlotsComponents.js

@@ -1,28 +1,33 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount } from '../components';
-import { GridCellV7 } from '../components/cell/GridCell';
+import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount, GridColumnsManagement } from '../components';
+import { GridCell } from '../components/cell/GridCell';
 import { GridColumnHeaders } from '../components/GridColumnHeaders';
 import { GridColumnMenu } from '../components/menu/columnMenu/GridColumnMenu';
+import { GridDetailPanels } from '../components/GridDetailPanels';
+import { GridPinnedRows } from '../components/GridPinnedRows';
 import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
 import materialSlots from '../material';
 
 // TODO: camelCase these key. It's a private helper now.
 // Remove then need to call `uncapitalizeObjectKeys`.
 export var DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, materialSlots, {
-  cell: GridCellV7,
+  cell: GridCell,
   skeletonCell: GridSkeletonCell,
   columnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
   columnMenu: GridColumnMenu,
   columnHeaders: GridColumnHeaders,
+  detailPanels: GridDetailPanels,
   footer: GridFooter,
   footerRowCount: GridRowCount,
   toolbar: null,
+  pinnedRows: GridPinnedRows,
   loadingOverlay: GridLoadingOverlay,
   noResultsOverlay: GridNoResultsOverlay,
   noRowsOverlay: GridNoRowsOverlay,
   pagination: GridPagination,
   filterPanel: GridFilterPanel,
   columnsPanel: GridColumnsPanel,
+  columnsManagement: GridColumnsManagement,
   panel: GridPanel,
   row: GridRow
 });

package/legacy/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/legacy/constants/localeTextConstants.js

@@ -29,12 +29,10 @@ export var GRID_DEFAULT_LOCALE_TEXT = {
   toolbarExportCSV: 'Download as CSV',
   toolbarExportPrint: 'Print',
   toolbarExportExcel: 'Download as Excel',
-  // Columns panel text
-  columnsPanelTextFieldLabel: 'Find column',
-  columnsPanelTextFieldPlaceholder: 'Column title',
-  columnsPanelDragIconLabel: 'Reorder column',
-  columnsPanelShowAllButton: 'Show all',
-  columnsPanelHideAllButton: 'Hide all',
+  // Columns management text
+  columnsManagementSearchTitle: 'Search',
+  columnsManagementNoColumns: 'No columns',
+  columnsManagementShowHideAllText: 'Show/Hide All',
   // Filter panel text
   filterPanelAddFilter: 'Add filter',
   filterPanelRemoveAll: 'Remove all',

package/legacy/hooks/core/gridCoreSelector.js

@@ -0,0 +1,7 @@
+/**
+ * Get the theme state
+ * @category Core
+ */
+export var gridThemeSelector = function gridThemeSelector(state) {
+  return state.theme;
+};

package/legacy/hooks/core/useGridApiInitialization.js

@@ -71,6 +71,7 @@ function createPublicAPI(privateApiRef) {
   return publicApi;
 }
 export function useGridApiInitialization(inputApiRef, props) {
+  var _inputApiRef$current;
   var publicApiRef = React.useRef();
   var privateApiRef = React.useRef();
   if (!privateApiRef.current) {
@@ -107,6 +108,9 @@ export function useGridApiInitialization(inputApiRef, props) {
     subscribeEvent: subscribeEvent,
     publishEvent: publishEvent
   }, 'public');
+  if (inputApiRef && !((_inputApiRef$current = inputApiRef.current) != null && _inputApiRef$current.state)) {
+    inputApiRef.current = publicApiRef.current;
+  }
   React.useImperativeHandle(inputApiRef, function () {
     return publicApiRef.current;
   }, [publicApiRef]);

package/legacy/hooks/core/useGridInitialization.js

@@ -1,3 +1,5 @@
+import { useGridRefs } from './useGridRefs';
+import { useGridTheme } from './useGridTheme';
 import { useGridLoggerFactory } from './useGridLoggerFactory';
 import { useGridApiInitialization } from './useGridApiInitialization';
 import { useGridLocaleText } from './useGridLocaleText';
@@ -10,6 +12,8 @@ import { useGridStateInitialization } from './useGridStateInitialization';
  */
 export var useGridInitialization = function useGridInitialization(inputApiRef, props) {
   var privateApiRef = useGridApiInitialization(inputApiRef, props);
+  useGridRefs(privateApiRef);
+  useGridTheme(privateApiRef);
   useGridLoggerFactory(privateApiRef, props);
   useGridStateInitialization(privateApiRef, props);
   useGridPipeProcessing(privateApiRef);

package/legacy/hooks/core/useGridRefs.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export var useGridRefs = function useGridRefs(apiRef) {
+  var rootElementRef = React.useRef(null);
+  var mainElementRef = React.useRef(null);
+  var virtualScrollerRef = React.useRef(null);
+  apiRef.current.register('public', {
+    rootElementRef: rootElementRef
+  });
+  apiRef.current.register('private', {
+    mainElementRef: mainElementRef,
+    virtualScrollerRef: virtualScrollerRef
+  });
+};

package/legacy/hooks/core/useGridTheme.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+export var useGridTheme = function useGridTheme(apiRef) {
+  var theme = useTheme();
+  if (!apiRef.current.state.theme) {
+    apiRef.current.state.theme = theme;
+  }
+  var isFirstEffect = React.useRef(true);
+  React.useEffect(function () {
+    if (isFirstEffect.current) {
+      isFirstEffect.current = false;
+    } else {
+      apiRef.current.setState(function (state) {
+        return _extends({}, state, {
+          theme: theme
+        });
+      });
+    }
+  }, [apiRef, theme]);
+};

package/legacy/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -39,16 +39,15 @@ var createGroupLookup = function createGroupLookup(columnGroupingModel) {
   return _extends({}, groupLookup);
 };
 export var columnGroupsStateInitializer = function columnGroupsStateInitializer(state, props, apiRef) {
-  var _props$experimentalFe, _props$columnGrouping, _props$columnGrouping2, _apiRef$current$state;
-  if (!((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.columnGrouping)) {
+  var _props$columnGrouping, _props$columnGrouping2, _apiRef$current$state;
+  if (!props.columnGroupingModel) {
     return state;
   }
   var columnFields = gridColumnFieldsSelector(apiRef);
   var visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
   var groupLookup = createGroupLookup((_props$columnGrouping = props.columnGroupingModel) != null ? _props$columnGrouping : []);
   var unwrappedGroupingModel = unwrapGroupingColumnModel((_props$columnGrouping2 = props.columnGroupingModel) != null ? _props$columnGrouping2 : []);
-  var columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel, // @ts-expect-error Move this part to `Pro` package
-  (_apiRef$current$state = apiRef.current.state.pinnedColumns) != null ? _apiRef$current$state : {});
+  var columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel, (_apiRef$current$state = apiRef.current.state.pinnedColumns) != null ? _apiRef$current$state : {});
   var maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max.apply(Math, _toConsumableArray(visibleColumnFields.map(function (field) {
     var _unwrappedGroupingMod, _unwrappedGroupingMod2;
     return (_unwrappedGroupingMod = (_unwrappedGroupingMod2 = unwrappedGroupingModel[field]) == null ? void 0 : _unwrappedGroupingMod2.length) != null ? _unwrappedGroupingMod : 0;
@@ -68,7 +67,6 @@ export var columnGroupsStateInitializer = function columnGroupsStateInitializer(
  * @requires useGridParamsApi (method)
  */
 export var useGridColumnGrouping = function useGridColumnGrouping(apiRef, props) {
-  var _props$experimentalFe3;
   /**
    * API METHODS
    */
@@ -82,8 +80,8 @@ export var useGridColumnGrouping = function useGridColumnGrouping(apiRef, props)
     return columnGroupLookup;
   }, [apiRef]);
   var columnGroupingApi = {
-    unstable_getColumnGroupPath: getColumnGroupPath,
-    unstable_getAllGroupDetails: getAllGroupDetails
+    getColumnGroupPath: getColumnGroupPath,
+    getAllGroupDetails: getAllGroupDetails
   };
   useGridApiMethod(apiRef, columnGroupingApi, 'public');
   var handleColumnIndexChange = React.useCallback(function () {
@@ -92,8 +90,6 @@ export var useGridColumnGrouping = function useGridColumnGrouping(apiRef, props)
     apiRef.current.setState(function (state) {
       var _state$columns$ordere, _state$columns, _state$pinnedColumns;
       var orderedFields = (_state$columns$ordere = (_state$columns = state.columns) == null ? void 0 : _state$columns.orderedFields) != null ? _state$columns$ordere : [];
-
-      // @ts-expect-error Move this logic to `Pro` package
       var pinnedColumns = (_state$pinnedColumns = state.pinnedColumns) != null ? _state$pinnedColumns : {};
       var columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(orderedFields, unwrappedGroupingModel, pinnedColumns);
       return _extends({}, state, {
@@ -104,10 +100,7 @@ export var useGridColumnGrouping = function useGridColumnGrouping(apiRef, props)
     });
   }, [apiRef, props.columnGroupingModel]);
   var updateColumnGroupingState = React.useCallback(function (columnGroupingModel) {
-    var _props$experimentalFe2, _apiRef$current$getPi, _apiRef$current$getPi2, _apiRef$current;
-    if (!((_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.columnGrouping)) {
-      return;
-    }
+    var _apiRef$current$getPi, _apiRef$current$getPi2, _apiRef$current;
     // @ts-expect-error Move this logic to `Pro` package
     var pinnedColumns = (_apiRef$current$getPi = (_apiRef$current$getPi2 = (_apiRef$current = apiRef.current).getPinnedColumns) == null ? void 0 : _apiRef$current$getPi2.call(_apiRef$current)) != null ? _apiRef$current$getPi : {};
     var columnFields = gridColumnFieldsSelector(apiRef);
@@ -129,7 +122,7 @@ export var useGridColumnGrouping = function useGridColumnGrouping(apiRef, props)
         }
       });
     });
-  }, [apiRef, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.columnGrouping]);
+  }, [apiRef]);
   useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
   useGridApiEventHandler(apiRef, 'columnsChange', function () {
     updateColumnGroupingState(props.columnGroupingModel);

package/legacy/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -1,54 +1,60 @@
 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_useForkRef as useForkRef } from '@mui/utils';
-import { styled, useTheme } from '@mui/material/styles';
-import { defaultMemoize } from 'reselect';
+import { styled } from '@mui/material/styles';
 import { useGridSelector } from '../../utils';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
-import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
-import { getFirstColumnIndexToRender, getTotalHeaderHeight } from '../columns/gridColumnsUtils';
-import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
-import { areRenderContextsEqual, getRenderableIndexes } from '../virtualization/useGridVirtualScroller';
-import { gridVirtualizationColumnEnabledSelector } from '../virtualization';
+import { gridDimensionsSelector } from '../dimensions';
+import { gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from '../virtualization';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
+import { GridPinnedColumnPosition, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
+import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/GridScrollbarFillerCell';
+import { gridClasses } from '../../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-var GridColumnHeaderRow = styled('div', {
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SpaceFiller = styled('div')({
+  /* GridRootStyles conflict */
+  '&&': {
+    padding: 0,
+    width: 'calc(var(--DataGrid-width) - var(--DataGrid-columnsTotalWidth))'
+  }
+});
+export var GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderRow',
   overridesResolver: function overridesResolver(props, styles) {
     return styles.columnHeaderRow;
   }
-})(function () {
+})(function (_ref) {
+  var _ref$ownerState = _ref.ownerState,
+    _ref$ownerState$param = _ref$ownerState.params,
+    _ref$ownerState$param2 = _ref$ownerState$param === void 0 ? {} : _ref$ownerState$param,
+    position = _ref$ownerState$param2.position,
+    _ref$ownerState$leftO = _ref$ownerState.leftOverflow,
+    leftOverflow = _ref$ownerState$leftO === void 0 ? 0 : _ref$ownerState$leftO;
   return {
-    display: 'flex'
+    display: 'flex',
+    height: 'var(--DataGrid-headerHeight)',
+    transform: position === undefined ? "translate3d(".concat(leftOverflow !== 0 ? "calc(var(--DataGrid-offsetLeft) - ".concat(leftOverflow, "px)") : 'var(--DataGrid-offsetLeft)', ", 0, 0)") : undefined
   };
 });
-function isUIEvent(event) {
-  return !!event.target;
-}
 export var useGridColumnHeaders = function useGridColumnHeaders(props) {
   var innerRefProp = props.innerRef,
-    _props$minColumnIndex = props.minColumnIndex,
-    minColumnIndex = _props$minColumnIndex === void 0 ? 0 : _props$minColumnIndex,
     visibleColumns = props.visibleColumns,
     sortColumnLookup = props.sortColumnLookup,
     filterColumnLookup = props.filterColumnLookup,
-    columnPositions = props.columnPositions,
     columnHeaderTabIndexState = props.columnHeaderTabIndexState,
     columnGroupHeaderTabIndexState = props.columnGroupHeaderTabIndexState,
     columnHeaderFocus = props.columnHeaderFocus,
     columnGroupHeaderFocus = props.columnGroupHeaderFocus,
-    densityFactor = props.densityFactor,
     headerGroupingMaxDepth = props.headerGroupingMaxDepth,
     columnMenuState = props.columnMenuState,
     columnVisibility = props.columnVisibility,
     columnGroupsHeaderStructure = props.columnGroupsHeaderStructure,
     hasOtherElementInTabSequence = props.hasOtherElementInTabSequence;
-  var theme = useTheme();
   var _React$useState = React.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     dragCol = _React$useState2[0],
@@ -59,107 +65,14 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
     setResizeCol = _React$useState4[1];
   var apiRef = useGridPrivateApiContext();
   var hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
-  var rootProps = useGridRootProps();
   var innerRef = React.useRef(null);
   var handleInnerRef = useForkRef(innerRefProp, innerRef);
-  var _React$useState5 = React.useState(null),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    renderContext = _React$useState6[0],
-    setRenderContextRaw = _React$useState6[1];
-  var prevRenderContext = React.useRef(renderContext);
-  var prevScrollLeft = React.useRef(0);
-  var currentPage = useGridVisibleRows(apiRef, rootProps);
-  var totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight);
-  var headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
-  var setRenderContext = React.useCallback(function (nextRenderContext) {
-    if (renderContext && nextRenderContext && areRenderContextsEqual(renderContext, nextRenderContext)) {
-      return;
-    }
-    setRenderContextRaw(nextRenderContext);
-  }, [renderContext]);
+  var dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  var renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
+  var visiblePinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   React.useEffect(function () {
     apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
   }, [apiRef]);
-
-  // memoize `getFirstColumnIndexToRender`, since it's called on scroll
-  var getFirstColumnIndexToRenderRef = React.useRef(defaultMemoize(getFirstColumnIndexToRender, {
-    equalityCheck: function equalityCheck(a, b) {
-      return ['firstColumnIndex', 'minColumnIndex', 'columnBuffer'].every(function (key) {
-        return a[key] === b[key];
-      });
-    }
-  }));
-  var updateInnerPosition = React.useCallback(function (nextRenderContext) {
-    var _getRenderableIndexes = getRenderableIndexes({
-        firstIndex: nextRenderContext.firstRowIndex,
-        lastIndex: nextRenderContext.lastRowIndex,
-        minFirstIndex: 0,
-        maxLastIndex: currentPage.rows.length,
-        buffer: rootProps.rowBuffer
-      }),
-      _getRenderableIndexes2 = _slicedToArray(_getRenderableIndexes, 2),
-      firstRowToRender = _getRenderableIndexes2[0],
-      lastRowToRender = _getRenderableIndexes2[1];
-    var firstColumnToRender = getFirstColumnIndexToRenderRef.current({
-      firstColumnIndex: nextRenderContext.firstColumnIndex,
-      minColumnIndex: minColumnIndex,
-      columnBuffer: rootProps.columnBuffer,
-      firstRowToRender: firstRowToRender,
-      lastRowToRender: lastRowToRender,
-      apiRef: apiRef,
-      visibleRows: currentPage.rows
-    });
-    var direction = theme.direction === 'ltr' ? 1 : -1;
-    var offset = firstColumnToRender > 0 ? prevScrollLeft.current - direction * columnPositions[firstColumnToRender] : prevScrollLeft.current;
-    innerRef.current.style.transform = "translate3d(".concat(-offset, "px, 0px, 0px)");
-  }, [columnPositions, minColumnIndex, rootProps.columnBuffer, apiRef, currentPage.rows, rootProps.rowBuffer, theme.direction]);
-  React.useLayoutEffect(function () {
-    if (renderContext) {
-      updateInnerPosition(renderContext);
-    }
-  }, [renderContext, updateInnerPosition]);
-  var handleScroll = React.useCallback(function (_ref, event) {
-    var _prevRenderContext$cu, _prevRenderContext$cu2;
-    var left = _ref.left,
-      _ref$renderContext = _ref.renderContext,
-      nextRenderContext = _ref$renderContext === void 0 ? null : _ref$renderContext;
-    if (!innerRef.current) {
-      return;
-    }
-
-    // Ignore vertical scroll.
-    // Excepts the first event which sets the previous render context.
-    if (prevScrollLeft.current === left && ((_prevRenderContext$cu = prevRenderContext.current) == null ? void 0 : _prevRenderContext$cu.firstColumnIndex) === (nextRenderContext == null ? void 0 : nextRenderContext.firstColumnIndex) && ((_prevRenderContext$cu2 = prevRenderContext.current) == null ? void 0 : _prevRenderContext$cu2.lastColumnIndex) === (nextRenderContext == null ? void 0 : nextRenderContext.lastColumnIndex)) {
-      return;
-    }
-    prevScrollLeft.current = left;
-
-    // We can only update the position when we guarantee that the render context has been
-    // rendered. This is achieved using ReactDOM.flushSync or when the context doesn't change.
-    var canUpdateInnerPosition = false;
-    if (nextRenderContext !== prevRenderContext.current || !prevRenderContext.current) {
-      // ReactDOM.flushSync cannot be called on `scroll` events fired inside effects
-      if (isUIEvent(event)) {
-        // To prevent flickering, the inner position can only be updated after the new context has
-        // been rendered. ReactDOM.flushSync ensures that the state changes will happen before
-        // updating the position.
-        ReactDOM.flushSync(function () {
-          setRenderContext(nextRenderContext);
-        });
-        canUpdateInnerPosition = true;
-      } else {
-        setRenderContext(nextRenderContext);
-      }
-      prevRenderContext.current = nextRenderContext;
-    } else {
-      canUpdateInnerPosition = true;
-    }
-
-    // Pass directly the render context to avoid waiting for the next render
-    if (nextRenderContext && canUpdateInnerPosition) {
-      updateInnerPosition(nextRenderContext);
-    }
-  }, [updateInnerPosition, setRenderContext]);
   var handleColumnResizeStart = React.useCallback(function (params) {
     return setResizeCol(params.field);
   }, []);
@@ -176,57 +89,42 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
   useGridApiEventHandler(apiRef, 'columnResizeStop', handleColumnResizeStop);
   useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
   useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
-  useGridApiEventHandler(apiRef, 'scrollPositionChange', handleScroll);
 
   // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
   var getColumnsToRender = function getColumnsToRender(params) {
     var _ref2 = params || {},
       _ref2$renderContext = _ref2.renderContext,
-      nextRenderContext = _ref2$renderContext === void 0 ? renderContext : _ref2$renderContext,
-      _ref2$minFirstColumn = _ref2.minFirstColumn,
-      minFirstColumn = _ref2$minFirstColumn === void 0 ? minColumnIndex : _ref2$minFirstColumn,
+      currentContext = _ref2$renderContext === void 0 ? renderContext : _ref2$renderContext,
       _ref2$maxLastColumn = _ref2.maxLastColumn,
       maxLastColumn = _ref2$maxLastColumn === void 0 ? visibleColumns.length : _ref2$maxLastColumn;
-    if (!nextRenderContext) {
-      return null;
-    }
-    var _getRenderableIndexes3 = getRenderableIndexes({
-        firstIndex: nextRenderContext.firstRowIndex,
-        lastIndex: nextRenderContext.lastRowIndex,
-        minFirstIndex: 0,
-        maxLastIndex: currentPage.rows.length,
-        buffer: rootProps.rowBuffer
-      }),
-      _getRenderableIndexes4 = _slicedToArray(_getRenderableIndexes3, 2),
-      firstRowToRender = _getRenderableIndexes4[0],
-      lastRowToRender = _getRenderableIndexes4[1];
-    var firstColumnToRender = !hasVirtualization ? 0 : getFirstColumnIndexToRenderRef.current({
-      firstColumnIndex: nextRenderContext.firstColumnIndex,
-      minColumnIndex: minFirstColumn,
-      columnBuffer: rootProps.columnBuffer,
-      apiRef: apiRef,
-      firstRowToRender: firstRowToRender,
-      lastRowToRender: lastRowToRender,
-      visibleRows: currentPage.rows
-    });
-    var lastColumnToRender = !hasVirtualization ? maxLastColumn : Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
+    var firstColumnToRender = !hasVirtualization ? 0 : currentContext.firstColumnIndex;
+    var lastColumnToRender = !hasVirtualization ? maxLastColumn : currentContext.lastColumnIndex;
     var renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns: renderedColumns,
       firstColumnToRender: firstColumnToRender,
-      lastColumnToRender: lastColumnToRender,
-      minFirstColumn: minFirstColumn,
-      maxLastColumn: maxLastColumn
+      lastColumnToRender: lastColumnToRender
     };
   };
+  var getFiller = function getFiller(params) {
+    var borderTop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var isPinnedRight = (params == null ? void 0 : params.position) === GridPinnedColumnPosition.RIGHT;
+    var hasScrollbarFiller = visiblePinnedColumns.right.length > 0 && isPinnedRight || visiblePinnedColumns.right.length === 0 && (params == null ? void 0 : params.position) === undefined;
+    return /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [(params == null ? void 0 : params.position) === undefined && /*#__PURE__*/_jsx(SpaceFiller, {
+        className: gridClasses.columnHeader
+      }), hasScrollbarFiller && /*#__PURE__*/_jsx(ScrollbarFiller, {
+        header: true,
+        borderTop: borderTop,
+        pinnedRight: isPinnedRight
+      })]
+    });
+  };
   var getColumnHeaders = function getColumnHeaders(params) {
     var other = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var columnsToRender = getColumnsToRender(params);
-    if (columnsToRender == null) {
-      return null;
-    }
-    var renderedColumns = columnsToRender.renderedColumns,
-      firstColumnToRender = columnsToRender.firstColumnToRender;
+    var _getColumnsToRender = getColumnsToRender(params),
+      renderedColumns = _getColumnsToRender.renderedColumns,
+      firstColumnToRender = _getColumnsToRender.firstColumnToRender;
     var columns = [];
     for (var i = 0; i < renderedColumns.length; i += 1) {
       var colDef = renderedColumns[i];
@@ -238,7 +136,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
       columns.push( /*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
-        headerHeight: headerHeight,
+        headerHeight: dimensions.headerHeight,
         isDragging: colDef.field === dragCol,
         colDef: colDef,
         colIndex: columnIndex,
@@ -247,11 +145,13 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
         tabIndex: tabIndex
       }, other), colDef.field));
     }
-    return /*#__PURE__*/_jsx(GridColumnHeaderRow, {
+    return /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
-      ownerState: rootProps,
-      children: columns
+      ownerState: {
+        params: params
+      },
+      children: [columns, getFiller(params)]
     });
   };
   var getColumnGroupHeaders = function getColumnGroupHeaders(params) {
@@ -259,7 +159,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
       return null;
     }
     var columnsToRender = getColumnsToRender(params);
-    if (columnsToRender == null || columnsToRender.renderedColumns.length === 0) {
+    if (columnsToRender.renderedColumns.length === 0) {
       return null;
     }
     var firstColumnToRender = columnsToRender.firstColumnToRender,
@@ -267,17 +167,17 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
     var columns = [];
     var headerToRender = [];
     var _loop = function _loop(depth) {
-      var _apiRef$current$unsta, _apiRef$current$unsta2;
+      var _apiRef$current$getCo, _apiRef$current$getCo2;
       var rowStructure = columnGroupsHeaderStructure[depth];
       var firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
-      var firstGroupToRender = (_apiRef$current$unsta = apiRef.current.unstable_getColumnGroupPath(firstColumnFieldToRender)[depth]) != null ? _apiRef$current$unsta : null;
+      var firstGroupToRender = (_apiRef$current$getCo = apiRef.current.getColumnGroupPath(firstColumnFieldToRender)[depth]) != null ? _apiRef$current$getCo : null;
       var firstGroupIndex = rowStructure.findIndex(function (_ref4) {
         var groupId = _ref4.groupId,
           columnFields = _ref4.columnFields;
         return groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender);
       });
       var lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
-      var lastGroupToRender = (_apiRef$current$unsta2 = apiRef.current.unstable_getColumnGroupPath(lastColumnFieldToRender)[depth]) != null ? _apiRef$current$unsta2 : null;
+      var lastGroupToRender = (_apiRef$current$getCo2 = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth]) != null ? _apiRef$current$getCo2 : null;
       var lastGroupIndex = rowStructure.findIndex(function (_ref5) {
         var groupId = _ref5.groupId,
           columnFields = _ref5.columnFields;
@@ -327,15 +227,14 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
       _loop(depth);
     }
     headerToRender.forEach(function (depthInfo, depthIndex) {
-      columns.push( /*#__PURE__*/_jsx(GridColumnHeaderRow, {
-        style: {
-          height: "".concat(headerHeight, "px"),
-          transform: "translateX(-".concat(depthInfo.leftOverflow, "px)")
-        },
+      columns.push( /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
         role: "row",
         "aria-rowindex": depthIndex + 1,
-        ownerState: rootProps,
-        children: depthInfo.elements.map(function (_ref3, groupIndex) {
+        ownerState: {
+          params: params,
+          leftOverflow: depthInfo.leftOverflow
+        },
+        children: [depthInfo.elements.map(function (_ref3, groupIndex) {
           var groupId = _ref3.groupId,
             width = _ref3.width,
             fields = _ref3.fields,
@@ -350,38 +249,27 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
             depth: depthIndex,
             isLastColumn: colIndex === visibleColumns.length - fields.length,
             maxDepth: headerToRender.length,
-            height: headerHeight,
+            height: dimensions.headerHeight,
             hasFocus: hasFocus,
             tabIndex: tabIndex
           }, groupIndex);
-        })
+        }), getFiller(params)]
       }, depthIndex));
     });
     return columns;
   };
-  var rootStyle = {
-    minHeight: totalHeaderHeight,
-    maxHeight: totalHeaderHeight,
-    lineHeight: "".concat(headerHeight, "px")
-  };
   return {
     renderContext: renderContext,
+    getFiller: getFiller,
     getColumnHeaders: getColumnHeaders,
     getColumnsToRender: getColumnsToRender,
     getColumnGroupHeaders: getColumnGroupHeaders,
     isDragging: !!dragCol,
-    getRootProps: function getRootProps() {
-      var other = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      return _extends({
-        style: rootStyle
-      }, other);
-    },
     getInnerProps: function getInnerProps() {
       return {
         ref: handleInnerRef,
         role: 'rowgroup'
       };
-    },
-    headerHeight: headerHeight
+    }
   };
 };