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

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -30,7 +30,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
   const tooltipProps = slotProps.tooltip || {};
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const densityValue = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityValueSelector);
+  const density = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensitySelector);
   const densityButtonId = (0, _utils.unstable_useId)();
   const densityMenuId = (0, _utils.unstable_useId)();
   const [open, setOpen] = React.useState(false);
@@ -50,7 +50,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
     value: 'comfortable'
   }];
   const startIcon = React.useMemo(() => {
-    switch (densityValue) {
+    switch (density) {
       case 'compact':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.densityCompactIcon, {});
       case 'comfortable':
@@ -58,7 +58,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
       default:
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.densityStandardIcon, {});
     }
-  }, [densityValue, rootProps]);
+  }, [density, rootProps]);
   const handleDensitySelectorOpen = event => {
     setOpen(prevOpen => !prevOpen);
     buttonProps.onClick?.(event);
@@ -85,7 +85,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
   }
   const densityElements = densityOptions.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
     onClick: () => handleDensityUpdate(option.value),
-    selected: option.value === densityValue,
+    selected: option.value === density,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
       children: option.icon
     }), option.label]

package/node/components/virtualization/GridVirtualScrollbar.js

@@ -43,6 +43,8 @@ const ScrollbarVertical = (0, _system.styled)(Scrollbar)({
   height: 'calc(var(--DataGrid-hasScrollY) * (100% - var(--DataGrid-topContainerHeight) - var(--DataGrid-bottomContainerHeight) - var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize)))',
   overflowY: 'auto',
   overflowX: 'hidden',
+  // Disable focus-visible style, it's a scrollbar.
+  outline: 0,
   '& > div': {
     width: 'var(--size)'
   },
@@ -54,6 +56,8 @@ const ScrollbarHorizontal = (0, _system.styled)(Scrollbar)({
   height: 'var(--size)',
   overflowY: 'hidden',
   overflowX: 'auto',
+  // Disable focus-visible style, it's a scrollbar.
+  outline: 0,
   '& > div': {
     height: 'var(--size)'
   },

package/node/components/virtualization/GridVirtualScroller.js

@@ -9,6 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
 var _utils = require("@mui/utils");
+var _GridScrollArea = require("../GridScrollArea");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
@@ -74,7 +75,11 @@ function GridVirtualScroller(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridMainContainer.GridMainContainer, (0, _extends2.default)({
     className: classes.root
   }, getContainerProps(), {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Scroller, (0, _extends2.default)({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
+      scrollDirection: "left"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
+      scrollDirection: "right"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Scroller, (0, _extends2.default)({
       className: classes.scroller
     }, getScrollerProps(), {
       ownerState: rootProps,

package/node/components/virtualization/GridVirtualScrollerFiller.js

@@ -45,6 +45,7 @@ function GridVirtualScrollerFiller() {
     viewportOuterSize,
     minimumSize,
     hasScrollX,
+    hasScrollY,
     scrollbarSize,
     leftPinnedWidth,
     rightPinnedWidth
@@ -69,7 +70,7 @@ function GridVirtualScrollerFiller() {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Main, {}), rightPinnedWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(PinnedRight, {
       className: _constants.gridClasses['filler--pinnedRight'],
       style: {
-        width: rightPinnedWidth
+        width: rightPinnedWidth + (hasScrollY ? scrollbarSize : 0)
       }
     })]
   });

package/node/constants/gridClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', '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', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', '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']);
+const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', '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', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/node/hooks/features/clipboard/useGridClipboard.js

@@ -75,7 +75,8 @@ const useGridClipboard = (apiRef, props) => {
       textToCopy = apiRef.current.getDataAsCsv({
         includeHeaders: false,
         // TODO: make it configurable
-        delimiter: clipboardCopyCellDelimiter
+        delimiter: clipboardCopyCellDelimiter,
+        shouldAppendQuotes: false
       });
     } else {
       const focusedCell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
@@ -83,7 +84,8 @@ const useGridClipboard = (apiRef, props) => {
         const cellParams = apiRef.current.getCellParams(focusedCell.id, focusedCell.field);
         textToCopy = (0, _csvSerializer.serializeCellValue)(cellParams, {
           delimiterCharacter: clipboardCopyCellDelimiter,
-          ignoreValueFormatter
+          ignoreValueFormatter,
+          shouldAppendQuotes: false
         });
       }
     }

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

@@ -7,9 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridColumnHeaders = exports.GridColumnHeaderRow = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
-var _utils2 = require("../../utils");
+var _utils = require("../../utils");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
@@ -20,17 +19,12 @@ var _useGridVirtualScroller = require("../virtualization/useGridVirtualScroller"
 var _GridColumnGroupHeader = require("../../../components/columnHeaders/GridColumnGroupHeader");
 var _columns = require("../columns");
 var _GridScrollbarFillerCell = require("../../../components/GridScrollbarFillerCell");
+var _getPinnedCellOffset = require("../../../internals/utils/getPinnedCellOffset");
+var _GridColumnHeaderSeparator = require("../../../components/columnHeaders/GridColumnHeaderSeparator");
 var _gridClasses = require("../../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const SpaceFiller = (0, _styles.styled)('div')({
-  /* GridRootStyles conflict */
-  '&&&': {
-    padding: 0,
-    width: 'calc(var(--DataGrid-width) - var(--DataGrid-columnsTotalWidth))'
-  }
-});
 const GridColumnHeaderRow = exports.GridColumnHeaderRow = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderRow',
@@ -41,7 +35,6 @@ const GridColumnHeaderRow = exports.GridColumnHeaderRow = (0, _styles.styled)('d
 });
 const useGridColumnHeaders = props => {
   const {
-    innerRef: innerRefProp,
     visibleColumns,
     sortColumnLookup,
     filterColumnLookup,
@@ -60,21 +53,31 @@ const useGridColumnHeaders = props => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const theme = (0, _styles.useTheme)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const hasVirtualization = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
-  const innerRef = React.useRef(null);
-  const handleInnerRef = (0, _utils.unstable_useForkRef)(innerRefProp, innerRef);
-  const dimensions = (0, _utils2.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
-  const columnPositions = (0, _utils2.useGridSelector)(apiRef, _columns.gridColumnPositionsSelector);
-  const renderContext = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
-  const pinnedColumns = (0, _utils2.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
+  const hasVirtualization = (0, _utils.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
+  const dimensions = (0, _utils.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
+  const columnPositions = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnPositionsSelector);
+  const renderContext = (0, _utils.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
+  const pinnedColumns = (0, _utils.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   const offsetLeft = (0, _useGridVirtualScroller.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]);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnResizeStart', handleColumnResizeStart);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnResizeStop', handleColumnResizeStop);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
@@ -107,8 +110,9 @@ const useGridColumnHeaders = props => {
         style: {
           width: leftOffsetWidth
         }
-      }), children, isNotPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)(SpaceFiller, {
-        className: _gridClasses.gridClasses.columnHeader
+      }), children, isNotPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        role: "presentation",
+        className: _gridClasses.gridClasses.filler
       }), hasScrollbarFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
         header: true,
         borderTop: borderTop,
@@ -116,6 +120,27 @@ const useGridColumnHeaders = props => {
       })]
     });
   };
+  const getCellOffsetStyle = ({
+    pinnedPosition,
+    columnIndex,
+    computedWidth
+  }) => {
+    let style;
+    if (pinnedPosition === 'left' || pinnedPosition === 'right') {
+      const pinnedOffset = (0, _getPinnedCellOffset.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,
@@ -129,6 +154,12 @@ 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__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderItem.GridColumnHeaderItem, (0, _extends2.default)({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
@@ -138,118 +169,174 @@ 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__*/(0, _jsxRuntime.jsx)(GridColumnHeaderRow, {
+    return getFillers(params, columns, 0);
+  };
+  const getColumnHeadersRow = () => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeaderRow, {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
       ownerState: rootProps,
-      children: getFillers(params, columns, 0)
+      children: [leftRenderContext && getColumnHeaders({
+        position: _columns.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: _columns.GridPinnedColumnPosition.RIGHT,
+        renderContext: rightRenderContext,
+        minFirstColumn: rightRenderContext.firstColumnIndex,
+        maxLastColumn: rightRenderContext.lastColumnIndex
+      }, {
+        disableReorder: true,
+        separatorSide: _GridColumnHeaderSeparator.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) {
-      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 (0, _extends2.default)({}, 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) => {
-        const column = apiRef.current.getColumn(field);
-        return acc + (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 (0, _extends2.default)({}, 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__*/(0, _jsxRuntime.jsx)(_GridColumnGroupHeader.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_GridColumnGroupHeader.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__*/(0, _jsxRuntime.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: _columns.GridPinnedColumnPosition.LEFT,
+            renderContext: leftRenderContext,
+            minFirstColumn: leftRenderContext.firstColumnIndex,
+            maxLastColumn: leftRenderContext.lastColumnIndex
+          }
+        }), getColumnGroupHeaders({
+          depth,
+          params: {
+            renderContext
+          }
+        }), rightRenderContext && getColumnGroupHeaders({
+          depth,
+          params: {
+            position: _columns.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/node/hooks/features/columnResize/columnResizeSelector.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridResizingColumnFieldSelector = exports.gridColumnResizeSelector = void 0;
+var _createSelector = require("../../../utils/createSelector");
+const gridColumnResizeSelector = state => state.columnResize;
+exports.gridColumnResizeSelector = gridColumnResizeSelector;
+const gridResizingColumnFieldSelector = exports.gridResizingColumnFieldSelector = (0, _createSelector.createSelector)(gridColumnResizeSelector, columnResize => columnResize.resizingColumnField);

package/node/hooks/features/columnResize/columnResizeState.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/hooks/features/columnResize/gridColumnResizeApi.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_GRID_AUTOSIZE_OPTIONS = void 0;
+const DEFAULT_GRID_AUTOSIZE_OPTIONS = exports.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/node/hooks/features/columnResize/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _columnResizeSelector = require("./columnResizeSelector");
+Object.keys(_columnResizeSelector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _columnResizeSelector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _columnResizeSelector[key];
+    }
+  });
+});
+var _columnResizeState = require("./columnResizeState");
+Object.keys(_columnResizeState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _columnResizeState[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _columnResizeState[key];
+    }
+  });
+});
+var _gridColumnResizeApi = require("./gridColumnResizeApi");
+Object.keys(_gridColumnResizeApi).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridColumnResizeApi[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridColumnResizeApi[key];
+    }
+  });
+});