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

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,6 +20,8 @@ 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", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
@@ -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__',
@@ -162,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,

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 */
@@ -527,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',
@@ -641,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;

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']);