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

package/modern/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 const 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/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const 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 const 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/modern/constants/localeTextConstants.js

@@ -27,12 +27,10 @@ export const 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/modern/hooks/core/gridCoreSelector.js

@@ -0,0 +1,5 @@
+/**
+ * Get the theme state
+ * @category Core
+ */
+export const gridThemeSelector = state => state.theme;

package/modern/hooks/core/useGridApiInitialization.js

@@ -98,6 +98,9 @@ export function useGridApiInitialization(inputApiRef, props) {
     subscribeEvent,
     publishEvent
   }, 'public');
+  if (inputApiRef && !inputApiRef.current?.state) {
+    inputApiRef.current = publicApiRef.current;
+  }
   React.useImperativeHandle(inputApiRef, () => publicApiRef.current, [publicApiRef]);
   React.useEffect(() => {
     const api = privateApiRef.current;

package/modern/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 const useGridInitialization = (inputApiRef, props) => {
   const privateApiRef = useGridApiInitialization(inputApiRef, props);
+  useGridRefs(privateApiRef);
+  useGridTheme(privateApiRef);
   useGridLoggerFactory(privateApiRef, props);
   useGridStateInitialization(privateApiRef, props);
   useGridPipeProcessing(privateApiRef);

package/modern/hooks/core/useGridRefs.js

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

package/modern/hooks/core/useGridTheme.js

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

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

@@ -41,16 +41,14 @@ const createGroupLookup = columnGroupingModel => {
   return _extends({}, groupLookup);
 };
 export const columnGroupsStateInitializer = (state, props, apiRef) => {
-  if (!props.experimentalFeatures?.columnGrouping) {
+  if (!props.columnGroupingModel) {
     return state;
   }
   const columnFields = gridColumnFieldsSelector(apiRef);
   const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
   const groupLookup = createGroupLookup(props.columnGroupingModel ?? []);
   const unwrappedGroupingModel = unwrapGroupingColumnModel(props.columnGroupingModel ?? []);
-  const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel,
-  // @ts-expect-error Move this part to `Pro` package
-  apiRef.current.state.pinnedColumns ?? {});
+  const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel, apiRef.current.state.pinnedColumns ?? {});
   const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => unwrappedGroupingModel[field]?.length ?? 0));
   return _extends({}, state, {
     columnGrouping: {
@@ -79,16 +77,14 @@ export const useGridColumnGrouping = (apiRef, props) => {
     return columnGroupLookup;
   }, [apiRef]);
   const columnGroupingApi = {
-    unstable_getColumnGroupPath: getColumnGroupPath,
-    unstable_getAllGroupDetails: getAllGroupDetails
+    getColumnGroupPath,
+    getAllGroupDetails
   };
   useGridApiMethod(apiRef, columnGroupingApi, 'public');
   const handleColumnIndexChange = React.useCallback(() => {
     const unwrappedGroupingModel = unwrapGroupingColumnModel(props.columnGroupingModel ?? []);
     apiRef.current.setState(state => {
       const orderedFields = state.columns?.orderedFields ?? [];
-
-      // @ts-expect-error Move this logic to `Pro` package
       const pinnedColumns = state.pinnedColumns ?? {};
       const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(orderedFields, unwrappedGroupingModel, pinnedColumns);
       return _extends({}, state, {
@@ -99,9 +95,6 @@ export const useGridColumnGrouping = (apiRef, props) => {
     });
   }, [apiRef, props.columnGroupingModel]);
   const updateColumnGroupingState = React.useCallback(columnGroupingModel => {
-    if (!props.experimentalFeatures?.columnGrouping) {
-      return;
-    }
     // @ts-expect-error Move this logic to `Pro` package
     const pinnedColumns = apiRef.current.getPinnedColumns?.() ?? {};
     const columnFields = gridColumnFieldsSelector(apiRef);
@@ -120,7 +113,7 @@ export const useGridColumnGrouping = (apiRef, props) => {
         }
       });
     });
-  }, [apiRef, props.experimentalFeatures?.columnGrouping]);
+  }, [apiRef]);
   useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
   useGridApiEventHandler(apiRef, 'columnsChange', () => {
     updateColumnGroupingState(props.columnGroupingModel);

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

@@ -1,144 +1,70 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 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";
-const GridColumnHeaderRow = styled('div', {
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SpaceFiller = styled('div')({
+  /* GridRootStyles conflict */
+  '&&': {
+    padding: 0,
+    width: 'calc(var(--DataGrid-width) - var(--DataGrid-columnsTotalWidth))'
+  }
+});
+export const GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderRow',
   overridesResolver: (props, styles) => styles.columnHeaderRow
-})(() => ({
-  display: 'flex'
+})(({
+  ownerState: {
+    params: {
+      position
+    } = {},
+    leftOverflow = 0
+  }
+}) => ({
+  display: 'flex',
+  height: 'var(--DataGrid-headerHeight)',
+  transform: position === undefined ? `translate3d(${leftOverflow !== 0 ? `calc(var(--DataGrid-offsetLeft) - ${leftOverflow}px)` : 'var(--DataGrid-offsetLeft)'}, 0, 0)` : undefined
 }));
-function isUIEvent(event) {
-  return !!event.target;
-}
 export const useGridColumnHeaders = props => {
   const {
     innerRef: innerRefProp,
-    minColumnIndex = 0,
     visibleColumns,
     sortColumnLookup,
     filterColumnLookup,
-    columnPositions,
     columnHeaderTabIndexState,
     columnGroupHeaderTabIndexState,
     columnHeaderFocus,
     columnGroupHeaderFocus,
-    densityFactor,
     headerGroupingMaxDepth,
     columnMenuState,
     columnVisibility,
     columnGroupsHeaderStructure,
     hasOtherElementInTabSequence
   } = props;
-  const theme = useTheme();
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
   const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
-  const rootProps = useGridRootProps();
   const innerRef = React.useRef(null);
   const handleInnerRef = useForkRef(innerRefProp, innerRef);
-  const [renderContext, setRenderContextRaw] = React.useState(null);
-  const prevRenderContext = React.useRef(renderContext);
-  const prevScrollLeft = React.useRef(0);
-  const currentPage = useGridVisibleRows(apiRef, rootProps);
-  const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight);
-  const headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
-  const setRenderContext = React.useCallback(nextRenderContext => {
-    if (renderContext && nextRenderContext && areRenderContextsEqual(renderContext, nextRenderContext)) {
-      return;
-    }
-    setRenderContextRaw(nextRenderContext);
-  }, [renderContext]);
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
+  const visiblePinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
   }, [apiRef]);
-
-  // memoize `getFirstColumnIndexToRender`, since it's called on scroll
-  const getFirstColumnIndexToRenderRef = React.useRef(defaultMemoize(getFirstColumnIndexToRender, {
-    equalityCheck: (a, b) => ['firstColumnIndex', 'minColumnIndex', 'columnBuffer'].every(key => a[key] === b[key])
-  }));
-  const updateInnerPosition = React.useCallback(nextRenderContext => {
-    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
-      firstIndex: nextRenderContext.firstRowIndex,
-      lastIndex: nextRenderContext.lastRowIndex,
-      minFirstIndex: 0,
-      maxLastIndex: currentPage.rows.length,
-      buffer: rootProps.rowBuffer
-    });
-    const firstColumnToRender = getFirstColumnIndexToRenderRef.current({
-      firstColumnIndex: nextRenderContext.firstColumnIndex,
-      minColumnIndex,
-      columnBuffer: rootProps.columnBuffer,
-      firstRowToRender,
-      lastRowToRender,
-      apiRef,
-      visibleRows: currentPage.rows
-    });
-    const direction = theme.direction === 'ltr' ? 1 : -1;
-    const offset = firstColumnToRender > 0 ? prevScrollLeft.current - direction * columnPositions[firstColumnToRender] : prevScrollLeft.current;
-    innerRef.current.style.transform = `translate3d(${-offset}px, 0px, 0px)`;
-  }, [columnPositions, minColumnIndex, rootProps.columnBuffer, apiRef, currentPage.rows, rootProps.rowBuffer, theme.direction]);
-  React.useLayoutEffect(() => {
-    if (renderContext) {
-      updateInnerPosition(renderContext);
-    }
-  }, [renderContext, updateInnerPosition]);
-  const handleScroll = React.useCallback(({
-    left,
-    renderContext: nextRenderContext = null
-  }, event) => {
-    if (!innerRef.current) {
-      return;
-    }
-
-    // Ignore vertical scroll.
-    // Excepts the first event which sets the previous render context.
-    if (prevScrollLeft.current === left && prevRenderContext.current?.firstColumnIndex === nextRenderContext?.firstColumnIndex && prevRenderContext.current?.lastColumnIndex === 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.
-    let 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(() => {
-          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]);
   const handleColumnResizeStart = React.useCallback(params => setResizeCol(params.field), []);
   const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);
   const handleColumnReorderStart = React.useCallback(params => setDragCol(params.field), []);
@@ -147,53 +73,41 @@ export const 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
   const getColumnsToRender = params => {
     const {
-      renderContext: nextRenderContext = renderContext,
-      minFirstColumn = minColumnIndex,
+      renderContext: currentContext = renderContext,
+      // TODO: `minFirstColumn` is not used anymore, could be refactored out.
       maxLastColumn = visibleColumns.length
     } = params || {};
-    if (!nextRenderContext) {
-      return null;
-    }
-    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
-      firstIndex: nextRenderContext.firstRowIndex,
-      lastIndex: nextRenderContext.lastRowIndex,
-      minFirstIndex: 0,
-      maxLastIndex: currentPage.rows.length,
-      buffer: rootProps.rowBuffer
-    });
-    const firstColumnToRender = !hasVirtualization ? 0 : getFirstColumnIndexToRenderRef.current({
-      firstColumnIndex: nextRenderContext.firstColumnIndex,
-      minColumnIndex: minFirstColumn,
-      columnBuffer: rootProps.columnBuffer,
-      apiRef,
-      firstRowToRender,
-      lastRowToRender,
-      visibleRows: currentPage.rows
-    });
-    const lastColumnToRender = !hasVirtualization ? maxLastColumn : Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
+    const firstColumnToRender = !hasVirtualization ? 0 : currentContext.firstColumnIndex;
+    const lastColumnToRender = !hasVirtualization ? maxLastColumn : currentContext.lastColumnIndex;
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns,
       firstColumnToRender,
-      lastColumnToRender,
-      minFirstColumn,
-      maxLastColumn
+      lastColumnToRender
     };
   };
+  const getFiller = (params, borderTop = false) => {
+    const isPinnedRight = params?.position === GridPinnedColumnPosition.RIGHT;
+    const hasScrollbarFiller = visiblePinnedColumns.right.length > 0 && isPinnedRight || visiblePinnedColumns.right.length === 0 && params?.position === undefined;
+    return /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [params?.position === undefined && /*#__PURE__*/_jsx(SpaceFiller, {
+        className: gridClasses.columnHeader
+      }), hasScrollbarFiller && /*#__PURE__*/_jsx(ScrollbarFiller, {
+        header: true,
+        borderTop: borderTop,
+        pinnedRight: isPinnedRight
+      })]
+    });
+  };
   const getColumnHeaders = (params, other = {}) => {
-    const columnsToRender = getColumnsToRender(params);
-    if (columnsToRender == null) {
-      return null;
-    }
     const {
       renderedColumns,
       firstColumnToRender
-    } = columnsToRender;
+    } = getColumnsToRender(params);
     const columns = [];
     for (let i = 0; i < renderedColumns.length; i += 1) {
       const colDef = renderedColumns[i];
@@ -205,7 +119,7 @@ export const 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,
@@ -214,11 +128,13 @@ export const 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
+      },
+      children: [columns, getFiller(params)]
     });
   };
   const getColumnGroupHeaders = params => {
@@ -226,7 +142,7 @@ export const useGridColumnHeaders = props => {
       return null;
     }
     const columnsToRender = getColumnsToRender(params);
-    if (columnsToRender == null || columnsToRender.renderedColumns.length === 0) {
+    if (columnsToRender.renderedColumns.length === 0) {
       return null;
     }
     const {
@@ -238,13 +154,13 @@ export const useGridColumnHeaders = props => {
     for (let depth = 0; depth < headerGroupingMaxDepth; depth += 1) {
       const rowStructure = columnGroupsHeaderStructure[depth];
       const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
-      const firstGroupToRender = apiRef.current.unstable_getColumnGroupPath(firstColumnFieldToRender)[depth] ?? null;
+      const firstGroupToRender = apiRef.current.getColumnGroupPath(firstColumnFieldToRender)[depth] ?? null;
       const firstGroupIndex = rowStructure.findIndex(({
         groupId,
         columnFields
       }) => groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender));
       const lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
-      const lastGroupToRender = apiRef.current.unstable_getColumnGroupPath(lastColumnFieldToRender)[depth] ?? null;
+      const lastGroupToRender = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth] ?? null;
       const lastGroupIndex = rowStructure.findIndex(({
         groupId,
         columnFields
@@ -284,15 +200,14 @@ export const useGridColumnHeaders = props => {
       });
     }
     headerToRender.forEach((depthInfo, depthIndex) => {
-      columns.push( /*#__PURE__*/_jsx(GridColumnHeaderRow, {
-        style: {
-          height: `${headerHeight}px`,
-          transform: `translateX(-${depthInfo.leftOverflow}px)`
-        },
+      columns.push( /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
         role: "row",
         "aria-rowindex": depthIndex + 1,
-        ownerState: rootProps,
-        children: depthInfo.elements.map(({
+        ownerState: {
+          params,
+          leftOverflow: depthInfo.leftOverflow
+        },
+        children: [depthInfo.elements.map(({
           groupId,
           width,
           fields,
@@ -308,33 +223,25 @@ export const 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;
   };
-  const rootStyle = {
-    minHeight: totalHeaderHeight,
-    maxHeight: totalHeaderHeight,
-    lineHeight: `${headerHeight}px`
-  };
   return {
     renderContext,
+    getFiller,
     getColumnHeaders,
     getColumnsToRender,
     getColumnGroupHeaders,
     isDragging: !!dragCol,
-    getRootProps: (other = {}) => _extends({
-      style: rootStyle
-    }, other),
     getInnerProps: () => ({
       ref: handleInnerRef,
       role: 'rowgroup'
-    }),
-    headerHeight
+    })
   };
 };

package/modern/hooks/features/columnMenu/useGridColumnMenu.js

@@ -20,19 +20,25 @@ export const useGridColumnMenu = apiRef => {
    * API METHODS
    */
   const showColumnMenu = React.useCallback(field => {
-    const shouldUpdate = apiRef.current.setState(state => {
-      if (state.columnMenu.open && state.columnMenu.field === field) {
-        return state;
-      }
-      logger.debug('Opening Column Menu');
-      return _extends({}, state, {
-        columnMenu: {
-          open: true,
-          field
+    const columnMenuState = gridColumnMenuSelector(apiRef.current.state);
+    const newState = {
+      open: true,
+      field
+    };
+    const shouldUpdate = newState.open !== columnMenuState.open || newState.field !== columnMenuState.field;
+    if (shouldUpdate) {
+      apiRef.current.setState(state => {
+        if (state.columnMenu.open && state.columnMenu.field === field) {
+          return state;
         }
+        logger.debug('Opening Column Menu');
+        return _extends({}, state, {
+          columnMenu: {
+            open: true,
+            field
+          }
+        });
       });
-    });
-    if (shouldUpdate) {
       apiRef.current.hidePreferences();
       apiRef.current.forceUpdate();
     }
@@ -64,19 +70,18 @@ export const useGridColumnMenu = apiRef => {
       }
       apiRef.current.setColumnHeaderFocus(fieldToFocus);
     }
-    const shouldUpdate = apiRef.current.setState(state => {
-      if (!state.columnMenu.open && state.columnMenu.field === undefined) {
-        return state;
-      }
-      logger.debug('Hiding Column Menu');
-      return _extends({}, state, {
-        columnMenu: _extends({}, state.columnMenu, {
-          open: false,
-          field: undefined
-        })
-      });
-    });
+    const newState = {
+      open: false,
+      field: undefined
+    };
+    const shouldUpdate = newState.open !== columnMenuState.open || newState.field !== columnMenuState.field;
     if (shouldUpdate) {
+      apiRef.current.setState(state => {
+        logger.debug('Hiding Column Menu');
+        return _extends({}, state, {
+          columnMenu: newState
+        });
+      });
       apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);

package/modern/hooks/features/columns/gridColumnsInterfaces.js

@@ -1 +1,9 @@
-export {};
+export let GridPinnedColumnPosition = /*#__PURE__*/function (GridPinnedColumnPosition) {
+  GridPinnedColumnPosition["LEFT"] = "left";
+  GridPinnedColumnPosition["RIGHT"] = "right";
+  return GridPinnedColumnPosition;
+}({});
+export const EMPTY_PINNED_COLUMN_FIELDS = {
+  left: [],
+  right: []
+};