@mui/x-data-grid 7.0.0-beta.5 → 7.0.0-beta.7

package/node/components/GridPagination.js

@@ -12,7 +12,6 @@ var _styles = require("@mui/material/styles");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
-var _filter = require("../hooks/features/filter");
 var _gridPaginationSelector = require("../hooks/features/pagination/gridPaginationSelector");
 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); }
@@ -40,8 +39,7 @@ const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(fu
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const paginationModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationModelSelector);
-  const visibleTopLevelRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _filter.gridFilteredTopLevelRowCountSelector);
-  const rowCount = React.useMemo(() => rootProps.rowCount ?? visibleTopLevelRowCount ?? 0, [rootProps.rowCount, visibleTopLevelRowCount]);
+  const rowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationRowCountSelector);
   const lastPage = React.useMemo(() => {
     const calculatedValue = Math.ceil(rowCount / (paginationModel.pageSize || 1)) - 1;
     return Math.max(0, calculatedValue);

package/node/components/GridRow.js

@@ -29,6 +29,7 @@ var _gridColumnGroupsSelector = require("../hooks/features/columnGrouping/gridCo
 var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
 var _GridCell = require("./cell/GridCell");
 var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
+var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 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); }
@@ -223,7 +224,8 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     const rowStyle = (0, _extends2.default)({}, styleProp, {
       maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
       // max-height doesn't support "auto"
-      minHeight
+      minHeight,
+      '--height': typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight
     });
     if (sizes?.spacingTop) {
       const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
@@ -258,21 +260,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     }
     const width = cellColSpanInfo?.cellProps.width ?? column.computedWidth;
     const colSpan = cellColSpanInfo?.cellProps.colSpan ?? 1;
-    let pinnedOffset;
-    // FIXME: Why is the switch check exhaustiveness not validated with typescript-eslint?
-    // eslint-disable-next-line default-case
-    switch (pinnedPosition) {
-      case _GridCell.PinnedPosition.LEFT:
-        pinnedOffset = columnPositions[indexRelativeToAllColumns];
-        break;
-      case _GridCell.PinnedPosition.RIGHT:
-        pinnedOffset = dimensions.columnsTotalWidth - columnPositions[indexRelativeToAllColumns] - column.computedWidth + scrollbarWidth;
-        break;
-      case _GridCell.PinnedPosition.NONE:
-      case _GridCell.PinnedPosition.VIRTUAL:
-        pinnedOffset = 0;
-        break;
-    }
+    const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(_GridCell.gridPinnedColumnPositionLookup[pinnedPosition], column.computedWidth, indexRelativeToAllColumns, columnPositions, dimensions);
     if (rowNode?.type === 'skeletonRow') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.skeletonCell, {
         width: width,
@@ -295,20 +283,17 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       column: column,
       width: width,
       rowId: rowId,
-      height: rowHeight,
       align: column.align || 'left',
       colIndex: indexRelativeToAllColumns,
       colSpan: colSpan,
       disableDragEvents: disableDragEvents,
       editCellState: editCellState,
-      isNotVisible: cellIsNotVisible
-    }, slotProps?.cell, {
+      isNotVisible: cellIsNotVisible,
       pinnedOffset: pinnedOffset,
       pinnedPosition: pinnedPosition,
       sectionIndex: indexInSection,
-      sectionLength: sectionLength,
-      gridHasScrollX: dimensions.hasScrollX
-    }), column.field);
+      sectionLength: sectionLength
+    }, slotProps?.cell), column.field);
   };
 
   /* Start of rendering */
@@ -367,9 +352,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       width: emptyCellWidth
     }), rightCells.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       role: "presentation",
-      style: {
-        flex: '1'
-      }
+      className: _gridClasses.gridClasses.filler
     }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
       pinnedRight: pinnedColumns.right.length > 0
     })]

package/node/components/GridScrollArea.js

@@ -0,0 +1,158 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridScrollArea = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _utils = require("@mui/utils");
+var _system = require("@mui/system");
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+var _constants = require("../constants");
+var _useGridApiContext = require("../hooks/utils/useGridApiContext");
+var _useGridApiEventHandler = require("../hooks/utils/useGridApiEventHandler");
+var _useGridSelector = require("../hooks/utils/useGridSelector");
+var _gridDimensionsSelectors = require("../hooks/features/dimensions/gridDimensionsSelectors");
+var _densitySelector = require("../hooks/features/density/densitySelector");
+var _gridColumnsSelector = require("../hooks/features/columns/gridColumnsSelector");
+var _useTimeout = require("../hooks/utils/useTimeout");
+var _gridColumnsUtils = require("../hooks/features/columns/gridColumnsUtils");
+var _fastMemo = require("../utils/fastMemo");
+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 CLIFF = 1;
+const SLOP = 1.5;
+const useUtilityClasses = ownerState => {
+  const {
+    scrollDirection,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['scrollArea', `scrollArea--${scrollDirection}`]
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _constants.getDataGridUtilityClass, classes);
+};
+const GridScrollAreaRawRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ScrollArea',
+  overridesResolver: (props, styles) => [{
+    [`&.${_constants.gridClasses['scrollArea--left']}`]: styles['scrollArea--left']
+  }, {
+    [`&.${_constants.gridClasses['scrollArea--right']}`]: styles['scrollArea--right']
+  }, styles.scrollArea]
+})(() => ({
+  position: 'absolute',
+  top: 0,
+  zIndex: 101,
+  width: 20,
+  bottom: 0,
+  [`&.${_constants.gridClasses['scrollArea--left']}`]: {
+    left: 0
+  },
+  [`&.${_constants.gridClasses['scrollArea--right']}`]: {
+    right: 0
+  }
+}));
+function GridScrollAreaRaw(props) {
+  const {
+    scrollDirection
+  } = props;
+  const rootRef = React.useRef(null);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const timeout = (0, _useTimeout.useTimeout)();
+  const densityFactor = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityFactorSelector);
+  const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnsTotalWidthSelector);
+  const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
+  const scrollPosition = React.useRef({
+    left: 0,
+    top: 0
+  });
+  const getCanScrollMore = () => {
+    if (scrollDirection === 'left') {
+      // Only render if the user has not reached yet the start of the list
+      return scrollPosition.current.left > 0;
+    }
+    if (scrollDirection === 'right') {
+      // Only render if the user has not reached yet the end of the list
+      const maxScrollLeft = columnsTotalWidth - dimensions.viewportInnerSize.width;
+      return scrollPosition.current.left < maxScrollLeft;
+    }
+    return false;
+  };
+  const [dragging, setDragging] = React.useState(false);
+  const [canScrollMore, setCanScrollMore] = React.useState(getCanScrollMore);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const ownerState = (0, _extends2.default)({}, rootProps, {
+    scrollDirection
+  });
+  const classes = useUtilityClasses(ownerState);
+  const totalHeaderHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, rootProps.columnHeaderHeight);
+  const headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
+  const style = {
+    height: headerHeight,
+    top: totalHeaderHeight - headerHeight
+  };
+  if (scrollDirection === 'left') {
+    style.left = dimensions.leftPinnedWidth;
+  } else if (scrollDirection === 'right') {
+    style.right = dimensions.rightPinnedWidth + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+  }
+  const handleScrolling = newScrollPosition => {
+    scrollPosition.current = newScrollPosition;
+    setCanScrollMore(getCanScrollMore);
+  };
+  const handleDragOver = (0, _utils.unstable_useEventCallback)(event => {
+    let offset;
+
+    // Prevents showing the forbidden cursor
+    event.preventDefault();
+    if (scrollDirection === 'left') {
+      offset = event.clientX - rootRef.current.getBoundingClientRect().right;
+    } else if (scrollDirection === 'right') {
+      offset = Math.max(1, event.clientX - rootRef.current.getBoundingClientRect().left);
+    } else {
+      throw new Error('MUI X: Wrong drag direction');
+    }
+    offset = (offset - CLIFF) * SLOP + CLIFF;
+
+    // Avoid freeze and inertia.
+    timeout.start(0, () => {
+      apiRef.current.scroll({
+        left: scrollPosition.current.left + offset,
+        top: scrollPosition.current.top
+      });
+    });
+  });
+  const handleColumnHeaderDragStart = (0, _utils.unstable_useEventCallback)(() => {
+    setDragging(true);
+  });
+  const handleColumnHeaderDragEnd = (0, _utils.unstable_useEventCallback)(() => {
+    setDragging(false);
+  });
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'scrollPositionChange', handleScrolling);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', handleColumnHeaderDragStart);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnd', handleColumnHeaderDragEnd);
+  if (!dragging || !canScrollMore) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridScrollAreaRawRoot, {
+    ref: rootRef,
+    className: (0, _clsx.default)(classes.root),
+    ownerState: ownerState,
+    onDragOver: handleDragOver,
+    style: style
+  });
+}
+process.env.NODE_ENV !== "production" ? GridScrollAreaRaw.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  scrollDirection: _propTypes.default.oneOf(['left', 'right']).isRequired
+} : void 0;
+const GridScrollArea = exports.GridScrollArea = (0, _fastMemo.fastMemo)(GridScrollAreaRaw);

package/node/components/cell/GridCell.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PinnedPosition = exports.GridCell = void 0;
+exports.gridPinnedColumnPositionLookup = exports.PinnedPosition = exports.GridCell = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -20,8 +20,10 @@ var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusStateSelector");
 var _useGridParamsApi = require("../../hooks/features/rows/useGridParamsApi");
+var _cellBorderUtils = require("../../utils/cellBorderUtils");
+var _gridColumnsInterfaces = require("../../hooks/features/columns/gridColumnsInterfaces");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
 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; }
@@ -32,6 +34,12 @@ let PinnedPosition = exports.PinnedPosition = /*#__PURE__*/function (PinnedPosit
   PinnedPosition[PinnedPosition["VIRTUAL"] = 3] = "VIRTUAL";
   return PinnedPosition;
 }({});
+const gridPinnedColumnPositionLookup = exports.gridPinnedColumnPositionLookup = {
+  [PinnedPosition.LEFT]: _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT,
+  [PinnedPosition.RIGHT]: _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT,
+  [PinnedPosition.NONE]: undefined,
+  [PinnedPosition.VIRTUAL]: undefined
+};
 const EMPTY_CELL_PARAMS = {
   id: -1,
   field: '__unset__',
@@ -83,7 +91,6 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       editCellState,
       align,
       colIndex,
-      height,
       width,
       className,
       style: styleProp,
@@ -163,9 +170,9 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const focusElementRef = React.useRef(null);
   // @ts-expect-error To access `cellSelection` flag as it's a `premium` feature
   const isSelectionMode = rootProps.cellSelection ?? false;
-  const isSectionLastCell = sectionIndex === sectionLength - 1;
-  const showLeftBorder = pinnedPosition === PinnedPosition.RIGHT && sectionIndex === 0;
-  const showRightBorder = rootProps.showCellVerticalBorder && (pinnedPosition !== PinnedPosition.LEFT ? !isSectionLastCell : true) || pinnedPosition === PinnedPosition.LEFT && isSectionLastCell;
+  const position = gridPinnedColumnPositionLookup[pinnedPosition];
+  const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(position, sectionIndex);
+  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(position, sectionIndex, sectionLength, rootProps.showCellVerticalBorder);
   const ownerState = {
     align,
     showLeftBorder,
@@ -212,8 +219,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       };
     }
     const cellStyle = (0, _extends2.default)({
-      '--width': `${width}px`,
-      '--height': typeof height === 'number' ? `${height}px` : height
+      '--width': `${width}px`
     }, styleProp);
     if (pinnedPosition === PinnedPosition.LEFT) {
       cellStyle.left = pinnedOffset;
@@ -222,7 +228,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       cellStyle.right = pinnedOffset;
     }
     return cellStyle;
-  }, [width, height, isNotVisible, styleProp, pinnedOffset, pinnedPosition]);
+  }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition]);
   React.useEffect(() => {
     if (!hasFocus || cellMode === _models.GridCellModes.Edit) {
       return;
@@ -332,8 +338,6 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
     isValidating: _propTypes.default.bool,
     value: _propTypes.default.any
   }),
-  gridHasScrollX: _propTypes.default.bool.isRequired,
-  height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
   isNotVisible: _propTypes.default.bool.isRequired,
   onClick: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,

package/node/components/columnHeaders/GridBaseColumnHeaders.js

@@ -32,6 +32,7 @@ const GridColumnHeadersRoot = (0, _system.styled)('div', {
   overridesResolver: (props, styles) => styles.columnHeaders
 })({
   display: 'flex',
+  flexDirection: 'column',
   borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
   borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
 });

package/node/components/columnHeaders/GridColumnGroupHeader.js

@@ -15,6 +15,7 @@ var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _GridGenericColumnHeaderItem = require("./GridGenericColumnHeaderItem");
 var _domUtils = require("../../utils/domUtils");
+var _cellBorderUtils = require("../../utils/cellBorderUtils");
 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; }
@@ -23,11 +24,13 @@ const useUtilityClasses = ownerState => {
     classes,
     headerAlign,
     isDragging,
-    showColumnBorder,
-    groupId
+    showLeftBorder,
+    showRightBorder,
+    groupId,
+    pinnedPosition
   } = ownerState;
   const slots = {
-    root: ['columnHeader', headerAlign === 'left' && 'columnHeader--alignLeft', headerAlign === 'center' && 'columnHeader--alignCenter', headerAlign === 'right' && 'columnHeader--alignRight', isDragging && 'columnHeader--moving', showColumnBorder && 'columnHeader--showColumnBorder', showColumnBorder && 'columnHeader--withRightBorder', 'withBorderColor', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup'],
+    root: ['columnHeader', headerAlign === 'left' && 'columnHeader--alignLeft', headerAlign === 'center' && 'columnHeader--alignCenter', headerAlign === 'right' && 'columnHeader--alignRight', isDragging && 'columnHeader--moving', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', 'withBorderColor', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup', pinnedPosition === 'left' && 'columnHeader--pinnedLeft', pinnedPosition === 'right' && 'columnHeader--pinnedRight'],
     draggableContainer: ['columnHeaderDraggableContainer'],
     titleContainer: ['columnHeaderTitleContainer', 'withBorderColor'],
     titleContainerContent: ['columnHeaderTitleContainerContent']
@@ -45,7 +48,11 @@ function GridColumnGroupHeader(props) {
     colIndex,
     hasFocus,
     tabIndex,
-    isLastColumn
+    isLastColumn,
+    pinnedPosition,
+    style,
+    indexInSection,
+    sectionLength
   } = props;
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const headerCellRef = React.useRef(null);
@@ -72,10 +79,12 @@ function GridColumnGroupHeader(props) {
   if (groupId && render) {
     headerComponent = render(renderParams);
   }
-  const showColumnBorder = rootProps.showColumnVerticalBorder;
+  const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
+  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder);
   const ownerState = (0, _extends2.default)({}, props, {
     classes: rootProps.classes,
-    showColumnBorder,
+    showLeftBorder,
+    showRightBorder,
     headerAlign,
     depth,
     isDragging: false
@@ -126,11 +135,12 @@ function GridColumnGroupHeader(props) {
     width: width,
     columnMenuIconButton: null,
     columnTitleIconButtons: null,
-    resizable: false,
+    resizable: true,
     label: label,
     "aria-colspan": fields.length
     // The fields are wrapped between |-...-| to avoid confusion between fields "id" and "id2" when using selector data-fields~=
     ,
-    "data-fields": `|-${fields.join('-|-')}-|`
+    "data-fields": `|-${fields.join('-|-')}-|`,
+    style: style
   }, mouseEventsHandlers));
 }

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -18,6 +18,7 @@ var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _GridGenericColumnHeaderItem = require("./GridGenericColumnHeaderItem");
 var _domUtils = require("../../utils/domUtils");
+var _cellBorderUtils = require("../../utils/cellBorderUtils");
 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; }
@@ -28,14 +29,16 @@ const useUtilityClasses = ownerState => {
     isDragging,
     sortDirection,
     showRightBorder,
-    filterItemsCounter
+    showLeftBorder,
+    filterItemsCounter,
+    pinnedPosition
   } = ownerState;
   const isColumnSorted = sortDirection != null;
   const isColumnFiltered = filterItemsCounter != null && filterItemsCounter > 0;
   // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
   const isColumnNumeric = colDef.type === 'number';
   const slots = {
-    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', colDef.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder'],
+    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', colDef.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === 'left' && 'columnHeader--pinnedLeft', pinnedPosition === 'right' && 'columnHeader--pinnedRight'],
     draggableContainer: ['columnHeaderDraggableContainer'],
     titleContainer: ['columnHeaderTitleContainer'],
     titleContainerContent: ['columnHeaderTitleContainerContent']
@@ -55,7 +58,11 @@ function GridColumnHeaderItem(props) {
     hasFocus,
     tabIndex,
     disableReorder,
-    separatorSide
+    separatorSide,
+    style,
+    pinnedPosition,
+    indexInSection,
+    sectionLength
   } = props;
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -69,9 +76,12 @@ function GridColumnHeaderItem(props) {
   if (colDef.renderHeader) {
     headerComponent = colDef.renderHeader(apiRef.current.getColumnHeaderParams(colDef.field));
   }
+  const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
+  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder);
   const ownerState = (0, _extends2.default)({}, props, {
     classes: rootProps.classes,
-    showRightBorder: rootProps.showColumnVerticalBorder
+    showRightBorder,
+    showLeftBorder
   });
   const classes = useUtilityClasses(ownerState);
   const publish = React.useCallback(eventName => event => {
@@ -151,7 +161,7 @@ function GridColumnHeaderItem(props) {
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
       elementToFocus?.focus();
-      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
     }
   }, [apiRef, hasFocus]);
   const headerClassName = typeof colDef.headerClassName === 'function' ? colDef.headerClassName({
@@ -183,7 +193,8 @@ function GridColumnHeaderItem(props) {
     "data-field": colDef.field,
     columnMenu: columnMenu,
     draggableContainerProps: draggableEventHandlers,
-    columnHeaderSeparatorProps: columnHeaderSeparatorProps
+    columnHeaderSeparatorProps: columnHeaderSeparatorProps,
+    style: style
   }, mouseEventsHandlers));
 }
 process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
@@ -198,11 +209,15 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
   filterItemsCounter: _propTypes.default.number,
   hasFocus: _propTypes.default.bool,
   headerHeight: _propTypes.default.number.isRequired,
+  indexInSection: _propTypes.default.number.isRequired,
   isDragging: _propTypes.default.bool.isRequired,
   isResizing: _propTypes.default.bool.isRequired,
+  pinnedPosition: _propTypes.default.oneOf(['left', 'right']),
+  sectionLength: _propTypes.default.number.isRequired,
   separatorSide: _propTypes.default.oneOf(['left', 'right']),
   sortDirection: _propTypes.default.oneOf(['asc', 'desc']),
   sortIndex: _propTypes.default.number,
+  style: _propTypes.default.object,
   tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired
 } : void 0;
 const Memoized = exports.GridColumnHeaderItem = (0, _fastMemo.fastMemo)(GridColumnHeaderItem);

package/node/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -15,7 +15,7 @@ var _GridColumnHeaderTitle = require("./GridColumnHeaderTitle");
 var _GridColumnHeaderSeparator = require("./GridColumnHeaderSeparator");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps"];
+const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps", "style"];
 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 GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridGenericColumnHeaderItem(props, ref) {
@@ -40,7 +40,8 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = /*#__P
       label,
       resizable,
       draggableContainerProps,
-      columnHeaderSeparatorProps
+      columnHeaderSeparatorProps,
+      style
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
@@ -63,18 +64,18 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = /*#__P
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
       elementToFocus?.focus();
-      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
     }
   }, [apiRef, hasFocus]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
     ref: handleRef,
     className: (0, _clsx.default)(classes.root, headerClassName),
-    style: {
+    style: (0, _extends2.default)({}, style, {
       height,
       width,
       minWidth: width,
       maxWidth: width
-    },
+    }),
     role: "columnheader",
     tabIndex: tabIndex,
     "aria-colindex": colIndex + 1,

package/node/components/containers/GridRootStyles.js

@@ -314,14 +314,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       borderBottomStyle: 'solid',
       boxSizing: 'border-box'
     },
-    [`& .${_gridClasses.gridClasses['columnHeader--filledGroup']}.${_gridClasses.gridClasses['columnHeader--showColumnBorder']} .${_gridClasses.gridClasses.columnHeaderTitleContainer}`]: {
-      borderBottom: `none`
-    },
-    [`& .${_gridClasses.gridClasses['columnHeader--filledGroup']}.${_gridClasses.gridClasses['columnHeader--showColumnBorder']}`]: {
-      borderBottomWidth: '1px',
-      borderBottomStyle: 'solid',
-      boxSizing: 'border-box'
-    },
     [`& .${_gridClasses.gridClasses.sortIcon}, & .${_gridClasses.gridClasses.filterIcon}`]: {
       fontSize: 'inherit'
     },
@@ -345,6 +337,12 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['columnHeader--moving']}`]: {
       backgroundColor: (t.vars || t).palette.action.hover
     },
+    [`& .${_gridClasses.gridClasses['columnHeader--pinnedLeft']}, & .${_gridClasses.gridClasses['columnHeader--pinnedRight']}`]: {
+      position: 'sticky',
+      zIndex: 4,
+      // Should be above the column separator
+      background: 'var(--DataGrid-pinnedBackground)'
+    },
     [`& .${_gridClasses.gridClasses.columnSeparator}`]: {
       visibility: 'hidden',
       position: 'absolute',
@@ -435,9 +433,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['container--top']}, & .${_gridClasses.gridClasses['container--bottom']}`]: {
       '[role=row]': {
         background: 'var(--DataGrid-containerBackground)'
-      },
-      [`.${_gridClasses.gridClasses.pinnedColumnHeaders} [role=row]`]: {
-        background: 'var(--DataGrid-pinnedBackground)'
       }
     },
     /* Cell styles */
@@ -448,8 +443,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       lineHeight: 'calc(var(--height) - 1px)',
       // -1px for the border
 
-      '--width': '0px',
-      '--height': '0px',
       boxSizing: 'border-box',
       borderTop: `1px solid var(--rowBorderColor)`,
       overflow: 'hidden',
@@ -529,20 +522,16 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`.${_gridClasses.gridClasses.withBorderColor}`]: {
       borderColor
     },
-    [`& .${_gridClasses.gridClasses['cell--withLeftBorder']}`]: {
+    [`& .${_gridClasses.gridClasses['cell--withLeftBorder']}, & .${_gridClasses.gridClasses['columnHeader--withLeftBorder']}`]: {
       borderLeftColor: 'var(--DataGrid-rowBorderColor)',
       borderLeftWidth: '1px',
       borderLeftStyle: 'solid'
     },
-    [`& .${_gridClasses.gridClasses['cell--withRightBorder']}`]: {
+    [`& .${_gridClasses.gridClasses['cell--withRightBorder']}, & .${_gridClasses.gridClasses['columnHeader--withRightBorder']}`]: {
       borderRightColor: 'var(--DataGrid-rowBorderColor)',
       borderRightWidth: '1px',
       borderRightStyle: 'solid'
     },
-    [`& .${_gridClasses.gridClasses['columnHeader--withRightBorder']}`]: {
-      borderRightWidth: '1px',
-      borderRightStyle: 'solid'
-    },
     [`& .${_gridClasses.gridClasses['cell--flex']}`]: {
       display: 'flex',
       alignItems: 'center',
@@ -643,12 +632,13 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         borderTop: '1px solid var(--DataGrid-rowBorderColor)'
       },
       [`&.${_gridClasses.gridClasses['scrollbarFiller--pinnedRight']}`]: {
-        backgroundColor: 'var(--DataGrid-pinnedBackground)'
-      },
-      [`&.${_gridClasses.gridClasses['scrollbarFiller--pinnedRight']}:not(.${_gridClasses.gridClasses['scrollbarFiller--header']})`]: {
+        backgroundColor: 'var(--DataGrid-pinnedBackground)',
         position: 'sticky',
         right: 0
       }
+    },
+    [`& .${_gridClasses.gridClasses.filler}`]: {
+      flex: 1
     }
   });
   return gridStyle;