@mui/x-data-grid 7.0.0-beta.6 → 7.0.0

package/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -41,19 +41,15 @@ const createGroupLookup = columnGroupingModel => {
   return _extends({}, groupLookup);
 };
 export const columnGroupsStateInitializer = (state, props, apiRef) => {
-  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, (_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;
-  }));
+  const groupLookup = createGroupLookup(props.columnGroupingModel ?? []);
+  const unwrappedGroupingModel = unwrapGroupingColumnModel(props.columnGroupingModel ?? []);
+  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: {
       lookup: groupLookup,
@@ -73,9 +69,8 @@ export const useGridColumnGrouping = (apiRef, props) => {
    * API METHODS
    */
   const getColumnGroupPath = React.useCallback(field => {
-    var _unwrappedGroupingMod3;
     const unwrappedGroupingModel = gridColumnGroupsUnwrappedModelSelector(apiRef);
-    return (_unwrappedGroupingMod3 = unwrappedGroupingModel[field]) != null ? _unwrappedGroupingMod3 : [];
+    return unwrappedGroupingModel[field] ?? [];
   }, [apiRef]);
   const getAllGroupDetails = React.useCallback(() => {
     const columnGroupLookup = gridColumnGroupsLookupSelector(apiRef);
@@ -87,12 +82,10 @@ export const useGridColumnGrouping = (apiRef, props) => {
   };
   useGridApiMethod(apiRef, columnGroupingApi, 'public');
   const handleColumnIndexChange = React.useCallback(() => {
-    var _props$columnGrouping3;
-    const unwrappedGroupingModel = unwrapGroupingColumnModel((_props$columnGrouping3 = props.columnGroupingModel) != null ? _props$columnGrouping3 : []);
+    const unwrappedGroupingModel = unwrapGroupingColumnModel(props.columnGroupingModel ?? []);
     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 : [];
-      const pinnedColumns = (_state$pinnedColumns = state.pinnedColumns) != null ? _state$pinnedColumns : {};
+      const orderedFields = state.columns?.orderedFields ?? [];
+      const pinnedColumns = state.pinnedColumns ?? {};
       const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(orderedFields, unwrappedGroupingModel, pinnedColumns);
       return _extends({}, state, {
         columnGrouping: _extends({}, state.columnGrouping, {
@@ -102,18 +95,14 @@ export const useGridColumnGrouping = (apiRef, props) => {
     });
   }, [apiRef, props.columnGroupingModel]);
   const updateColumnGroupingState = React.useCallback(columnGroupingModel => {
-    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 pinnedColumns = apiRef.current.getPinnedColumns?.() ?? {};
     const columnFields = gridColumnFieldsSelector(apiRef);
     const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
-    const groupLookup = createGroupLookup(columnGroupingModel != null ? columnGroupingModel : []);
-    const unwrappedGroupingModel = unwrapGroupingColumnModel(columnGroupingModel != null ? columnGroupingModel : []);
+    const groupLookup = createGroupLookup(columnGroupingModel ?? []);
+    const unwrappedGroupingModel = unwrapGroupingColumnModel(columnGroupingModel ?? []);
     const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel, pinnedColumns);
-    const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => {
-      var _unwrappedGroupingMod4, _unwrappedGroupingMod5;
-      return (_unwrappedGroupingMod4 = (_unwrappedGroupingMod5 = unwrappedGroupingModel[field]) == null ? void 0 : _unwrappedGroupingMod5.length) != null ? _unwrappedGroupingMod4 : 0;
-    }));
+    const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => unwrappedGroupingModel[field]?.length ?? 0));
     apiRef.current.setState(state => {
       return _extends({}, state, {
         columnGrouping: {

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-import { GridRenderContext } from '../../../models/params/gridScrollParams';
+import type { GridColumnsRenderContext } from '../../../models/params/gridScrollParams';
 import { GridStateColDef } from '../../../models/colDef/gridColDef';
 import { GridSortColumnLookup } from '../sorting';
 import { GridFilterActiveItemsLookup } from '../filter';
@@ -9,7 +9,6 @@ import { GridColumnMenuState } from '../columnMenu';
 import { GridPinnedColumnPosition, GridColumnVisibilityModel } from '../columns';
 import { GridGroupingStructure } from '../columnGrouping/gridColumnGroupsInterfaces';
 export interface UseGridColumnHeadersProps {
-    innerRef?: React.Ref<HTMLDivElement>;
     visibleColumns: GridStateColDef[];
     sortColumnLookup: GridSortColumnLookup;
     filterColumnLookup: GridFilterActiveItemsLookup;
@@ -25,7 +24,7 @@ export interface UseGridColumnHeadersProps {
 }
 export interface GetHeadersParams {
     position?: GridPinnedColumnPosition;
-    renderContext?: GridRenderContext;
+    renderContext?: GridColumnsRenderContext;
     minFirstColumn?: number;
     maxLastColumn?: number;
 }
@@ -34,18 +33,35 @@ export declare const GridColumnHeaderRow: import("@emotion/styled").StyledCompon
     ownerState: OwnerState;
 }, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
-    renderContext: GridRenderContext;
+    renderContext: GridColumnsRenderContext;
+    leftRenderContext: {
+        firstColumnIndex: number;
+        lastColumnIndex: number;
+    } | null;
+    rightRenderContext: {
+        firstColumnIndex: number;
+        lastColumnIndex: number;
+    } | null;
+    pinnedColumns: {
+        left: GridStateColDef[];
+        right: GridStateColDef[];
+    };
+    visibleColumns: GridStateColDef[];
+    getCellOffsetStyle: ({ pinnedPosition, columnIndex, computedWidth, }: {
+        pinnedPosition?: GridPinnedColumnPosition | undefined;
+        columnIndex: number;
+        computedWidth: number;
+    }) => React.CSSProperties | undefined;
     getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderTop?: boolean) => React.JSX.Element;
-    getColumnHeaders: (params?: GetHeadersParams, other?: {}) => React.JSX.Element;
+    getColumnHeadersRow: () => React.JSX.Element;
     getColumnsToRender: (params?: GetHeadersParams) => {
         renderedColumns: GridStateColDef[];
         firstColumnToRender: number;
         lastColumnToRender: number;
     };
-    getColumnGroupHeaders: (params?: GetHeadersParams) => React.JSX.Element[] | null;
+    getColumnGroupHeadersRows: () => React.JSX.Element[] | null;
     isDragging: boolean;
     getInnerProps: () => {
-        ref: ((instance: HTMLDivElement | null) => void) | null;
         role: string;
     };
 };

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { styled, useTheme } from '@mui/material/styles';
 import { useGridSelector } from '../../utils';
 import { useGridRootProps } from '../../utils/useGridRootProps';
@@ -13,16 +12,11 @@ import { computeOffsetLeft } from '../virtualization/useGridVirtualScroller';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
 import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
 import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/GridScrollbarFillerCell';
+import { getPinnedCellOffset } from '../../../internals/utils/getPinnedCellOffset';
+import { GridColumnHeaderSeparatorSides } from '../../../components/columnHeaders/GridColumnHeaderSeparator';
 import { gridClasses } from '../../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 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',
@@ -33,7 +27,6 @@ export const GridColumnHeaderRow = styled('div', {
 });
 export const useGridColumnHeaders = props => {
   const {
-    innerRef: innerRefProp,
     visibleColumns,
     sortColumnLookup,
     filterColumnLookup,
@@ -53,20 +46,30 @@ export const useGridColumnHeaders = props => {
   const theme = useTheme();
   const rootProps = useGridRootProps();
   const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
-  const innerRef = React.useRef(null);
-  const handleInnerRef = useForkRef(innerRefProp, innerRef);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const offsetLeft = computeOffsetLeft(columnPositions, renderContext, theme.direction, pinnedColumns.left.length);
   React.useEffect(() => {
-    apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+    apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
   }, [apiRef]);
   const handleColumnResizeStart = React.useCallback(params => setResizeCol(params.field), []);
   const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);
   const handleColumnReorderStart = React.useCallback(params => setDragCol(params.field), []);
   const handleColumnReorderStop = React.useCallback(() => setDragCol(''), []);
+  const leftRenderContext = React.useMemo(() => {
+    return pinnedColumns.left.length ? {
+      firstColumnIndex: 0,
+      lastColumnIndex: pinnedColumns.left.length
+    } : null;
+  }, [pinnedColumns.left.length]);
+  const rightRenderContext = React.useMemo(() => {
+    return pinnedColumns.right.length ? {
+      firstColumnIndex: visibleColumns.length - pinnedColumns.right.length,
+      lastColumnIndex: visibleColumns.length
+    } : null;
+  }, [pinnedColumns.right.length, visibleColumns.length]);
   useGridApiEventHandler(apiRef, 'columnResizeStart', handleColumnResizeStart);
   useGridApiEventHandler(apiRef, 'columnResizeStop', handleColumnResizeStop);
   useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
@@ -89,8 +92,8 @@ export const useGridColumnHeaders = props => {
     };
   };
   const getFillers = (params, children, leftOverflow, borderTop = false) => {
-    const isPinnedRight = (params == null ? void 0 : params.position) === GridPinnedColumnPosition.RIGHT;
-    const isNotPinned = (params == null ? void 0 : params.position) === undefined;
+    const isPinnedRight = params?.position === GridPinnedColumnPosition.RIGHT;
+    const isNotPinned = params?.position === undefined;
     const hasScrollbarFiller = pinnedColumns.right.length > 0 && isPinnedRight || pinnedColumns.right.length === 0 && isNotPinned;
     const leftOffsetWidth = offsetLeft - leftOverflow;
     return /*#__PURE__*/_jsxs(React.Fragment, {
@@ -99,8 +102,9 @@ export const useGridColumnHeaders = props => {
         style: {
           width: leftOffsetWidth
         }
-      }), children, isNotPinned && /*#__PURE__*/_jsx(SpaceFiller, {
-        className: gridClasses.columnHeader
+      }), children, isNotPinned && /*#__PURE__*/_jsx("div", {
+        role: "presentation",
+        className: gridClasses.filler
       }), hasScrollbarFiller && /*#__PURE__*/_jsx(ScrollbarFiller, {
         header: true,
         borderTop: borderTop,
@@ -108,6 +112,27 @@ export const useGridColumnHeaders = props => {
       })]
     });
   };
+  const getCellOffsetStyle = ({
+    pinnedPosition,
+    columnIndex,
+    computedWidth
+  }) => {
+    let style;
+    if (pinnedPosition === 'left' || pinnedPosition === 'right') {
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, computedWidth, columnIndex, columnPositions, dimensions);
+      if (pinnedPosition === 'left') {
+        style = {
+          left: pinnedOffset
+        };
+      }
+      if (pinnedPosition === 'right') {
+        style = {
+          right: pinnedOffset
+        };
+      }
+    }
+    return style;
+  };
   const getColumnHeaders = (params, other = {}) => {
     const {
       renderedColumns,
@@ -121,6 +146,12 @@ export const useGridColumnHeaders = props => {
       const tabIndex = columnHeaderTabIndexState !== null && columnHeaderTabIndexState.field === colDef.field || isFirstColumn && !hasOtherElementInTabSequence ? 0 : -1;
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field;
       const open = columnMenuState.open && columnMenuState.field === colDef.field;
+      const pinnedPosition = params?.position;
+      const style = getCellOffsetStyle({
+        pinnedPosition,
+        columnIndex,
+        computedWidth: colDef.computedWidth
+      });
       columns.push( /*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
@@ -130,120 +161,174 @@ export const useGridColumnHeaders = props => {
         colIndex: columnIndex,
         isResizing: resizeCol === colDef.field,
         hasFocus: hasFocus,
-        tabIndex: tabIndex
+        tabIndex: tabIndex,
+        pinnedPosition: pinnedPosition,
+        style: style,
+        indexInSection: i,
+        sectionLength: renderedColumns.length
       }, other), colDef.field));
     }
-    return /*#__PURE__*/_jsx(GridColumnHeaderRow, {
+    return getFillers(params, columns, 0);
+  };
+  const getColumnHeadersRow = () => {
+    return /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
       ownerState: rootProps,
-      children: getFillers(params, columns, 0)
+      children: [leftRenderContext && getColumnHeaders({
+        position: GridPinnedColumnPosition.LEFT,
+        renderContext: leftRenderContext,
+        minFirstColumn: leftRenderContext.firstColumnIndex,
+        maxLastColumn: leftRenderContext.lastColumnIndex
+      }, {
+        disableReorder: true
+      }), getColumnHeaders({
+        renderContext,
+        minFirstColumn: pinnedColumns.left.length,
+        maxLastColumn: visibleColumns.length - pinnedColumns.right.length
+      }), rightRenderContext && getColumnHeaders({
+        position: GridPinnedColumnPosition.RIGHT,
+        renderContext: rightRenderContext,
+        minFirstColumn: rightRenderContext.firstColumnIndex,
+        maxLastColumn: rightRenderContext.lastColumnIndex
+      }, {
+        disableReorder: true,
+        separatorSide: GridColumnHeaderSeparatorSides.Left
+      })]
     });
   };
-  const getColumnGroupHeaders = params => {
-    if (headerGroupingMaxDepth === 0) {
-      return null;
-    }
+  const getColumnGroupHeaders = ({
+    depth,
+    params
+  }) => {
     const columnsToRender = getColumnsToRender(params);
     if (columnsToRender.renderedColumns.length === 0) {
       return null;
     }
     const {
+      renderedColumns,
       firstColumnToRender,
       lastColumnToRender
     } = columnsToRender;
-    const columns = [];
-    const headerToRender = [];
-    for (let depth = 0; depth < headerGroupingMaxDepth; depth += 1) {
-      var _apiRef$current$getCo, _apiRef$current$getCo2;
-      const rowStructure = columnGroupsHeaderStructure[depth];
-      const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
-      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$getCo2 = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth]) != null ? _apiRef$current$getCo2 : null;
-      const lastGroupIndex = rowStructure.findIndex(({
-        groupId,
-        columnFields
-      }) => groupId === lastGroupToRender && columnFields.includes(lastColumnFieldToRender));
-      const visibleColumnGroupHeader = rowStructure.slice(firstGroupIndex, lastGroupIndex + 1).map(groupStructure => {
-        return _extends({}, groupStructure, {
-          columnFields: groupStructure.columnFields.filter(field => columnVisibility[field] !== false)
-        });
-      }).filter(groupStructure => groupStructure.columnFields.length > 0);
-      const firstVisibleColumnIndex = visibleColumnGroupHeader[0].columnFields.indexOf(firstColumnFieldToRender);
-      const hiddenGroupColumns = visibleColumnGroupHeader[0].columnFields.slice(0, firstVisibleColumnIndex);
-      const leftOverflow = hiddenGroupColumns.reduce((acc, field) => {
-        var _column$computedWidth;
-        const column = apiRef.current.getColumn(field);
-        return acc + ((_column$computedWidth = column.computedWidth) != null ? _column$computedWidth : 0);
-      }, 0);
-      let columnIndex = firstColumnToRender;
-      const elements = visibleColumnGroupHeader.map(({
-        groupId,
-        columnFields
-      }) => {
-        const hasFocus = columnGroupHeaderFocus !== null && columnGroupHeaderFocus.depth === depth && columnFields.includes(columnGroupHeaderFocus.field);
-        const tabIndex = columnGroupHeaderTabIndexState !== null && columnGroupHeaderTabIndexState.depth === depth && columnFields.includes(columnGroupHeaderTabIndexState.field) ? 0 : -1;
-        const headerInfo = {
-          groupId,
-          width: columnFields.reduce((acc, field) => acc + apiRef.current.getColumn(field).computedWidth, 0),
-          fields: columnFields,
-          colIndex: columnIndex,
-          hasFocus,
-          tabIndex
-        };
-        columnIndex += columnFields.length;
-        return headerInfo;
-      });
-      headerToRender.push({
-        leftOverflow,
-        elements
+    const rowStructure = columnGroupsHeaderStructure[depth];
+    const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
+    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.getColumnGroupPath(lastColumnFieldToRender)[depth] ?? null;
+    const lastGroupIndex = rowStructure.findIndex(({
+      groupId,
+      columnFields
+    }) => groupId === lastGroupToRender && columnFields.includes(lastColumnFieldToRender));
+    const visibleColumnGroupHeader = rowStructure.slice(firstGroupIndex, lastGroupIndex + 1).map(groupStructure => {
+      return _extends({}, groupStructure, {
+        columnFields: groupStructure.columnFields.filter(field => columnVisibility[field] !== false)
       });
-    }
-    headerToRender.forEach((depthInfo, depthIndex) => {
-      const children = depthInfo.elements.map(({
+    }).filter(groupStructure => groupStructure.columnFields.length > 0);
+    const firstVisibleColumnIndex = visibleColumnGroupHeader[0].columnFields.indexOf(firstColumnFieldToRender);
+    const hiddenGroupColumns = visibleColumnGroupHeader[0].columnFields.slice(0, firstVisibleColumnIndex);
+    const leftOverflow = hiddenGroupColumns.reduce((acc, field) => {
+      const column = apiRef.current.getColumn(field);
+      return acc + (column.computedWidth ?? 0);
+    }, 0);
+    let columnIndex = firstColumnToRender;
+    const children = visibleColumnGroupHeader.map(({
+      groupId,
+      columnFields
+    }, index) => {
+      const hasFocus = columnGroupHeaderFocus !== null && columnGroupHeaderFocus.depth === depth && columnFields.includes(columnGroupHeaderFocus.field);
+      const tabIndex = columnGroupHeaderTabIndexState !== null && columnGroupHeaderTabIndexState.depth === depth && columnFields.includes(columnGroupHeaderTabIndexState.field) ? 0 : -1;
+      const headerInfo = {
         groupId,
-        width,
-        fields,
-        colIndex,
+        width: columnFields.reduce((acc, field) => acc + apiRef.current.getColumn(field).computedWidth, 0),
+        fields: columnFields,
+        colIndex: columnIndex,
         hasFocus,
         tabIndex
-      }, groupIndex) => {
-        return /*#__PURE__*/_jsx(GridColumnGroupHeader, {
-          groupId: groupId,
-          width: width,
-          fields: fields,
-          colIndex: colIndex,
-          depth: depthIndex,
-          isLastColumn: colIndex === visibleColumns.length - fields.length,
-          maxDepth: headerToRender.length,
-          height: dimensions.headerHeight,
-          hasFocus: hasFocus,
-          tabIndex: tabIndex
-        }, groupIndex);
+      };
+      const pinnedPosition = params.position;
+      const style = getCellOffsetStyle({
+        pinnedPosition,
+        columnIndex,
+        computedWidth: headerInfo.width
       });
-      columns.push( /*#__PURE__*/_jsx(GridColumnHeaderRow, {
+      columnIndex += columnFields.length;
+      let indexInSection = index;
+      if (pinnedPosition === 'left') {
+        // Group headers can expand to multiple columns, we need to adjust the index
+        indexInSection = columnIndex - 1;
+      }
+      return /*#__PURE__*/_jsx(GridColumnGroupHeader, {
+        groupId: groupId,
+        width: headerInfo.width,
+        fields: headerInfo.fields,
+        colIndex: headerInfo.colIndex,
+        depth: depth,
+        isLastColumn: headerInfo.colIndex === visibleColumns.length - headerInfo.fields.length,
+        maxDepth: headerGroupingMaxDepth,
+        height: dimensions.headerHeight,
+        hasFocus: hasFocus,
+        tabIndex: tabIndex,
+        pinnedPosition: pinnedPosition,
+        style: style,
+        indexInSection: indexInSection,
+        sectionLength: renderedColumns.length
+      }, index);
+    });
+    return getFillers(params, children, leftOverflow);
+  };
+  const getColumnGroupHeadersRows = () => {
+    if (headerGroupingMaxDepth === 0) {
+      return null;
+    }
+    const headerRows = [];
+    for (let depth = 0; depth < headerGroupingMaxDepth; depth += 1) {
+      headerRows.push( /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
         role: "row",
-        "aria-rowindex": depthIndex + 1,
+        "aria-rowindex": depth + 1,
         ownerState: rootProps,
-        children: getFillers(params, children, depthInfo.leftOverflow)
-      }, depthIndex));
-    });
-    return columns;
+        children: [leftRenderContext && getColumnGroupHeaders({
+          depth,
+          params: {
+            position: GridPinnedColumnPosition.LEFT,
+            renderContext: leftRenderContext,
+            minFirstColumn: leftRenderContext.firstColumnIndex,
+            maxLastColumn: leftRenderContext.lastColumnIndex
+          }
+        }), getColumnGroupHeaders({
+          depth,
+          params: {
+            renderContext
+          }
+        }), rightRenderContext && getColumnGroupHeaders({
+          depth,
+          params: {
+            position: GridPinnedColumnPosition.RIGHT,
+            renderContext: rightRenderContext,
+            minFirstColumn: rightRenderContext.firstColumnIndex,
+            maxLastColumn: rightRenderContext.lastColumnIndex
+          }
+        })]
+      }, depth));
+    }
+    return headerRows;
   };
   return {
     renderContext,
+    leftRenderContext,
+    rightRenderContext,
+    pinnedColumns,
+    visibleColumns,
+    getCellOffsetStyle,
     getFillers,
-    getColumnHeaders,
+    getColumnHeadersRow,
     getColumnsToRender,
-    getColumnGroupHeaders,
+    getColumnGroupHeadersRows,
     isDragging: !!dragCol,
     getInnerProps: () => ({
-      ref: handleInnerRef,
       role: 'rowgroup'
     })
   };

package/hooks/features/columnMenu/useGridColumnMenuSlots.js

@@ -37,8 +37,8 @@ const useGridColumnMenuSlots = props => {
     const sorted = cleansedItems.sort((a, b) => {
       const leftItemProps = processedSlotProps[a];
       const rightItemProps = processedSlotProps[b];
-      const leftDisplayOrder = Number.isFinite(leftItemProps == null ? void 0 : leftItemProps.displayOrder) ? leftItemProps.displayOrder : 100;
-      const rightDisplayOrder = Number.isFinite(rightItemProps == null ? void 0 : rightItemProps.displayOrder) ? rightItemProps.displayOrder : 100;
+      const leftDisplayOrder = Number.isFinite(leftItemProps?.displayOrder) ? leftItemProps.displayOrder : 100;
+      const rightDisplayOrder = Number.isFinite(rightItemProps?.displayOrder) ? rightItemProps.displayOrder : 100;
       return leftDisplayOrder - rightDisplayOrder;
     });
     return sorted.reduce((acc, key, index) => {

package/hooks/features/columnResize/columnResizeSelector.d.ts

@@ -0,0 +1,3 @@
+import { GridStateCommunity } from '../../../models/gridStateCommunity';
+export declare const gridColumnResizeSelector: (state: GridStateCommunity) => import("./columnResizeState").GridColumnResizeState;
+export declare const gridResizingColumnFieldSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string>;

package/hooks/features/columnResize/columnResizeSelector.js

@@ -0,0 +1,3 @@
+import { createSelector } from '../../../utils/createSelector';
+export const gridColumnResizeSelector = state => state.columnResize;
+export const gridResizingColumnFieldSelector = createSelector(gridColumnResizeSelector, columnResize => columnResize.resizingColumnField);

package/hooks/features/columnResize/columnResizeState.d.ts

@@ -0,0 +1,3 @@
+export interface GridColumnResizeState {
+    resizingColumnField: string;
+}

package/hooks/features/columnResize/columnResizeState.js

@@ -0,0 +1 @@
+export {};

package/hooks/features/columnResize/gridColumnResizeApi.d.ts

@@ -0,0 +1,44 @@
+import type { GridColDef } from '../../../models/colDef/gridColDef';
+export declare const DEFAULT_GRID_AUTOSIZE_OPTIONS: {
+    includeHeaders: boolean;
+    includeOutliers: boolean;
+    outliersFactor: number;
+    expand: boolean;
+};
+export type GridAutosizeOptions = {
+    /**
+     * The columns to autosize. By default, applies to all columns.
+     */
+    columns?: GridColDef['field'][];
+    /**
+     * If true, include the header widths in the calculation.
+     * @default false
+     */
+    includeHeaders?: boolean;
+    /**
+     * If true, width outliers will be ignored.
+     * @default false
+     */
+    includeOutliers?: boolean;
+    /**
+     * The IQR factor range to detect outliers.
+     * @default 1.5
+     */
+    outliersFactor?: number;
+    /**
+     * If the total width is less than the available width, expand columns to fill it.
+     * @default false
+     */
+    expand?: boolean;
+};
+/**
+ * The Resize API interface that is available in the grid `apiRef`.
+ */
+export interface GridColumnResizeApi {
+    /**
+     * Auto-size the columns of the grid based on the cells' content and the space available.
+     * @param {GridAutosizeOptions} options The autosizing options
+     * @returns {Promise} A promise that resolves when autosizing is completed
+     */
+    autosizeColumns: (options?: GridAutosizeOptions) => Promise<void>;
+}

package/hooks/features/columnResize/gridColumnResizeApi.js

@@ -0,0 +1,10 @@
+export const DEFAULT_GRID_AUTOSIZE_OPTIONS = {
+  includeHeaders: true,
+  includeOutliers: false,
+  outliersFactor: 1.5,
+  expand: false
+};
+
+/**
+ * The Resize API interface that is available in the grid `apiRef`.
+ */

package/hooks/features/columnResize/index.d.ts

@@ -0,0 +1,3 @@
+export * from './columnResizeSelector';
+export * from './columnResizeState';
+export * from './gridColumnResizeApi';

package/hooks/features/columnResize/index.js

@@ -0,0 +1,3 @@
+export * from './columnResizeSelector';
+export * from './columnResizeState';
+export * from './gridColumnResizeApi';

package/hooks/features/columnResize/useGridColumnResize.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { GridStateInitializer } from '../../utils/useGridInitializeState';
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+export declare const columnResizeStateInitializer: GridStateInitializer;
+/**
+ * @requires useGridColumns (method, event)
+ * TODO: improve experience for last column
+ */
+export declare const useGridColumnResize: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'autosizeOptions' | 'autosizeOnMount' | 'disableAutosize' | 'onColumnResize' | 'onColumnWidthChange'>) => void;