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

package/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/hooks/features/columnGrouping/useGridColumnGrouping.d.ts

@@ -7,4 +7,4 @@ export declare const columnGroupsStateInitializer: GridStateInitializer<Pick<Dat
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridColumnGrouping: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'columnGroupingModel' | 'experimentalFeatures'>) => void;
+export declare const useGridColumnGrouping: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'columnGroupingModel'>) => void;

package/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -41,16 +41,15 @@ const createGroupLookup = columnGroupingModel => {
   return _extends({}, groupLookup);
 };
 export const 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;
   }
   const columnFields = gridColumnFieldsSelector(apiRef);
   const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
   const groupLookup = createGroupLookup((_props$columnGrouping = props.columnGroupingModel) != null ? _props$columnGrouping : []);
   const unwrappedGroupingModel = unwrapGroupingColumnModel((_props$columnGrouping2 = props.columnGroupingModel) != null ? _props$columnGrouping2 : []);
-  const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel, // @ts-expect-error Move this part to `Pro` package
-  (_apiRef$current$state = apiRef.current.state.pinnedColumns) != null ? _apiRef$current$state : {});
+  const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel, (_apiRef$current$state = apiRef.current.state.pinnedColumns) != null ? _apiRef$current$state : {});
   const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => {
     var _unwrappedGroupingMod, _unwrappedGroupingMod2;
     return (_unwrappedGroupingMod = (_unwrappedGroupingMod2 = unwrappedGroupingModel[field]) == null ? void 0 : _unwrappedGroupingMod2.length) != null ? _unwrappedGroupingMod : 0;
@@ -70,7 +69,6 @@ export const columnGroupsStateInitializer = (state, props, apiRef) => {
  * @requires useGridParamsApi (method)
  */
 export const useGridColumnGrouping = (apiRef, props) => {
-  var _props$experimentalFe3;
   /**
    * API METHODS
    */
@@ -84,8 +82,8 @@ 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(() => {
@@ -94,8 +92,6 @@ export const useGridColumnGrouping = (apiRef, props) => {
     apiRef.current.setState(state => {
       var _state$columns$ordere, _state$columns, _state$pinnedColumns;
       const 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
       const pinnedColumns = (_state$pinnedColumns = state.pinnedColumns) != null ? _state$pinnedColumns : {};
       const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(orderedFields, unwrappedGroupingModel, pinnedColumns);
       return _extends({}, state, {
@@ -106,10 +102,7 @@ export const useGridColumnGrouping = (apiRef, props) => {
     });
   }, [apiRef, props.columnGroupingModel]);
   const updateColumnGroupingState = React.useCallback(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
     const 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 : {};
     const columnFields = gridColumnFieldsSelector(apiRef);
@@ -131,7 +124,7 @@ export const useGridColumnGrouping = (apiRef, props) => {
         }
       });
     });
-  }, [apiRef, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.columnGrouping]);
+  }, [apiRef]);
   useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
   useGridApiEventHandler(apiRef, 'columnsChange', () => {
     updateColumnGroupingState(props.columnGroupingModel);

package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -5,20 +5,17 @@ import { GridSortColumnLookup } from '../sorting';
 import { GridFilterActiveItemsLookup } from '../filter';
 import { GridColumnGroupIdentifier, GridColumnIdentifier } from '../focus';
 import { GridColumnMenuState } from '../columnMenu';
-import { GridColumnVisibilityModel } from '../columns';
+import { GridPinnedColumnPosition, GridColumnVisibilityModel } from '../columns';
 import { GridGroupingStructure } from '../columnGrouping/gridColumnGroupsInterfaces';
 export interface UseGridColumnHeadersProps {
     innerRef?: React.Ref<HTMLDivElement>;
-    minColumnIndex?: number;
     visibleColumns: GridStateColDef[];
     sortColumnLookup: GridSortColumnLookup;
     filterColumnLookup: GridFilterActiveItemsLookup;
-    columnPositions: number[];
     columnHeaderTabIndexState: GridColumnIdentifier | null;
     columnGroupHeaderTabIndexState: GridColumnGroupIdentifier | null;
     columnHeaderFocus: GridColumnIdentifier | null;
     columnGroupHeaderFocus: GridColumnGroupIdentifier | null;
-    densityFactor: number;
     headerGroupingMaxDepth: number;
     columnMenuState: GridColumnMenuState;
     columnVisibility: GridColumnVisibilityModel;
@@ -26,32 +23,30 @@ export interface UseGridColumnHeadersProps {
     hasOtherElementInTabSequence: boolean;
 }
 export interface GetHeadersParams {
-    renderContext: GridRenderContext | null;
+    position?: GridPinnedColumnPosition;
+    renderContext?: GridRenderContext;
     minFirstColumn?: number;
     maxLastColumn?: number;
 }
+export declare const GridColumnHeaderRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    ownerState: {
+        params?: GetHeadersParams;
+        leftOverflow?: number;
+    };
+}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
-    renderContext: GridRenderContext | null;
-    getColumnHeaders: (params?: GetHeadersParams, other?: {}) => React.JSX.Element | null;
+    renderContext: GridRenderContext;
+    getFiller: (params: GetHeadersParams | undefined, borderTop?: boolean) => React.JSX.Element;
+    getColumnHeaders: (params?: GetHeadersParams, other?: {}) => React.JSX.Element;
     getColumnsToRender: (params?: GetHeadersParams) => {
         renderedColumns: GridStateColDef[];
         firstColumnToRender: number;
         lastColumnToRender: number;
-        minFirstColumn: number;
-        maxLastColumn: number;
-    } | null;
+    };
     getColumnGroupHeaders: (params?: GetHeadersParams) => React.JSX.Element[] | null;
     isDragging: boolean;
-    getRootProps: (other?: {}) => {
-        style: {
-            minHeight: number;
-            maxHeight: number;
-            lineHeight: string;
-        };
-    };
     getInnerProps: () => {
         ref: ((instance: HTMLDivElement | null) => void) | null;
         role: string;
     };
-    headerHeight: number;
 };

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -1,145 +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) => {
-    var _prevRenderContext$cu, _prevRenderContext$cu2;
-    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.
-    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), []);
@@ -148,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 == null ? void 0 : params.position) === GridPinnedColumnPosition.RIGHT;
+    const 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
+      })]
+    });
+  };
   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];
@@ -206,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,
@@ -215,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 => {
@@ -227,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 {
@@ -237,16 +152,16 @@ export const useGridColumnHeaders = props => {
     const columns = [];
     const headerToRender = [];
     for (let depth = 0; depth < headerGroupingMaxDepth; depth += 1) {
-      var _apiRef$current$unsta, _apiRef$current$unsta2;
+      var _apiRef$current$getCo, _apiRef$current$getCo2;
       const rowStructure = columnGroupsHeaderStructure[depth];
       const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
-      const firstGroupToRender = (_apiRef$current$unsta = apiRef.current.unstable_getColumnGroupPath(firstColumnFieldToRender)[depth]) != null ? _apiRef$current$unsta : null;
+      const firstGroupToRender = (_apiRef$current$getCo = apiRef.current.getColumnGroupPath(firstColumnFieldToRender)[depth]) != null ? _apiRef$current$getCo : null;
       const firstGroupIndex = rowStructure.findIndex(({
         groupId,
         columnFields
       }) => groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender));
       const lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
-      const lastGroupToRender = (_apiRef$current$unsta2 = apiRef.current.unstable_getColumnGroupPath(lastColumnFieldToRender)[depth]) != null ? _apiRef$current$unsta2 : null;
+      const lastGroupToRender = (_apiRef$current$getCo2 = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth]) != null ? _apiRef$current$getCo2 : null;
       const lastGroupIndex = rowStructure.findIndex(({
         groupId,
         columnFields
@@ -287,15 +202,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,
@@ -311,33 +225,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/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/hooks/features/columns/gridColumnsInterfaces.d.ts

@@ -1,5 +1,9 @@
 import { GridColDef, GridStateColDef } from '../../../models/colDef/gridColDef';
 import type { GridColumnDimensionProperties } from './gridColumnsUtils';
+export declare enum GridPinnedColumnPosition {
+    LEFT = "left",
+    RIGHT = "right"
+}
 export type GridColumnLookup = {
     [field: string]: GridStateColDef;
 };
@@ -11,6 +15,19 @@ export interface GridColumnsState {
     lookup: GridColumnLookup;
     columnVisibilityModel: GridColumnVisibilityModel;
 }
+export interface GridPinnedColumnFields {
+    left?: string[];
+    right?: string[];
+}
+export declare const EMPTY_PINNED_COLUMN_FIELDS: {
+    left: string[];
+    right: string[];
+};
+export interface GridPinnedColumns {
+    left: GridStateColDef[];
+    right: GridStateColDef[];
+}
+export type GridColumnPinningState = GridPinnedColumnFields;
 export type GridColumnDimensions = {
     [key in GridColumnDimensionProperties]?: number;
 };

package/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: []
+};

package/hooks/features/columns/gridColumnsSelector.d.ts

@@ -1,5 +1,5 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
-import { GridColumnLookup } from './gridColumnsInterfaces';
+import { GridColumnLookup, GridPinnedColumnFields } from './gridColumnsInterfaces';
 /**
  * Get the columns state
  * @category Columns
@@ -36,6 +36,19 @@ export declare const gridVisibleColumnDefinitionsSelector: import("../../../util
  * @category Visible Columns
  */
 export declare const gridVisibleColumnFieldsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string[]>;
+/**
+ * Get the visible pinned columns model.
+ * @category Visible Columns
+ */
+export declare const gridPinnedColumnsSelector: (state: GridStateCommunity) => GridPinnedColumnFields;
+/**
+ * Get the visible pinned columns.
+ * @category Visible Columns
+ */
+export declare const gridVisiblePinnedColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
+    left: import("../../../internals").GridStateColDef[];
+    right: import("../../../internals").GridStateColDef[];
+}>;
 /**
  * Get the left position in pixel of each visible columns relative to the left of the first column.
  * @category Visible Columns