@mui/x-data-grid 8.12.1 → 8.13.0

package/components/virtualization/GridVirtualScrollbar.js

@@ -6,7 +6,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridVirtualScrollbar = void 0;
+exports.ScrollbarCorner = exports.GridVirtualScrollbar = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
@@ -44,7 +44,7 @@ const Scrollbar = (0, _system.styled)('div')({
 });
 const ScrollbarVertical = (0, _system.styled)(Scrollbar)({
   width: 'var(--size)',
-  height: 'calc(var(--DataGrid-hasScrollY) * (100% - var(--DataGrid-topContainerHeight) - var(--DataGrid-bottomContainerHeight) - var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize)))',
+  height: 'calc(var(--DataGrid-hasScrollY) * (100% - var(--DataGrid-headersTotalHeight) - var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize)))',
   overflowY: 'auto',
   overflowX: 'hidden',
   // Disable focus-visible style, it's a scrollbar.
@@ -52,11 +52,11 @@ const ScrollbarVertical = (0, _system.styled)(Scrollbar)({
   '& > div': {
     width: 'var(--size)'
   },
-  top: 'var(--DataGrid-topContainerHeight)',
-  right: '0px'
+  top: 'var(--DataGrid-headersTotalHeight)',
+  right: 0
 });
 const ScrollbarHorizontal = (0, _system.styled)(Scrollbar)({
-  width: '100%',
+  width: 'calc(var(--DataGrid-hasScrollX) * (100% - var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize)))',
   height: 'var(--size)',
   overflowY: 'hidden',
   overflowX: 'auto',
@@ -65,7 +65,14 @@ const ScrollbarHorizontal = (0, _system.styled)(Scrollbar)({
   '& > div': {
     height: 'var(--size)'
   },
-  bottom: '0px'
+  bottom: 0
+});
+const ScrollbarCorner = exports.ScrollbarCorner = (0, _system.styled)(Scrollbar)({
+  width: 'var(--size)',
+  height: 'var(--size)',
+  right: 0,
+  bottom: 0,
+  overflow: 'scroll'
 });
 const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forwardRef)(function GridVirtualScrollbar(props, ref) {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
@@ -73,16 +80,12 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
   const isLocked = React.useRef(false);
   const lastPosition = React.useRef(0);
   const scrollbarRef = React.useRef(null);
-  const contentRef = React.useRef(null);
   const classes = useUtilityClasses(rootProps, props.position);
   const dimensions = (0, _hooks.useGridSelector)(apiRef, _hooks.gridDimensionsSelector);
   const propertyDimension = props.position === 'vertical' ? 'height' : 'width';
   const propertyScroll = props.position === 'vertical' ? 'scrollTop' : 'scrollLeft';
   const propertyScrollPosition = props.position === 'vertical' ? 'top' : 'left';
-  const hasScroll = props.position === 'vertical' ? dimensions.hasScrollX : dimensions.hasScrollY;
-  const contentSize = dimensions.minimumSize[propertyDimension] + (hasScroll ? dimensions.scrollbarSize : 0);
-  const scrollbarSize = props.position === 'vertical' ? dimensions.viewportInnerSize.height : dimensions.viewportOuterSize.width;
-  const scrollbarInnerSize = scrollbarSize * (contentSize / dimensions.viewportOuterSize[propertyDimension]);
+  const scrollbarInnerSize = props.position === 'horizontal' ? dimensions.minimumSize.width : dimensions.minimumSize.height - dimensions.headersTotalHeight;
   const onScrollerScroll = (0, _useEventCallback.default)(() => {
     const scrollbar = scrollbarRef.current;
     const scrollPosition = props.scrollPosition.current;
@@ -98,8 +101,7 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
       return;
     }
     isLocked.current = true;
-    const value = scrollPosition[propertyScrollPosition] / contentSize;
-    scrollbar[propertyScroll] = value * scrollbarInnerSize;
+    scrollbar[propertyScroll] = scrollPosition[propertyScrollPosition];
   });
   const onScrollbarScroll = (0, _useEventCallback.default)(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;
@@ -112,8 +114,7 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
       return;
     }
     isLocked.current = true;
-    const value = scrollbar[propertyScroll] / scrollbarInnerSize;
-    scroller[propertyScroll] = value * contentSize;
+    scroller[propertyScroll] = scrollbar[propertyScroll];
   });
   (0, _useOnMount.useOnMount)(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;
@@ -128,18 +129,13 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
       scrollbar.removeEventListener('scroll', onScrollbarScroll, options);
     };
   });
-  React.useEffect(() => {
-    const content = contentRef.current;
-    content.style.setProperty(propertyDimension, `${scrollbarInnerSize}px`);
-  }, [scrollbarInnerSize, propertyDimension]);
   const Container = props.position === 'vertical' ? ScrollbarVertical : ScrollbarHorizontal;
+  const scrollbarInnerStyle = React.useMemo(() => ({
+    [propertyDimension]: `${scrollbarInnerSize}px`
+  }), [propertyDimension, scrollbarInnerSize]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
     ref: (0, _useForkRef.default)(ref, scrollbarRef),
     className: classes.root,
-    style: props.position === 'vertical' && rootProps.listView ? {
-      height: '100%',
-      top: 0
-    } : undefined,
     tabIndex: -1,
     "aria-hidden": "true"
     // tabIndex does not prevent focus with a mouse click, throwing a console error
@@ -149,8 +145,8 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
       event.target.blur();
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      ref: contentRef,
-      className: classes.content
+      className: classes.content,
+      style: scrollbarInnerStyle
     })
   });
 });

package/components/virtualization/GridVirtualScroller.js

@@ -25,6 +25,8 @@ var _GridVirtualScrollerContent = require("./GridVirtualScrollerContent");
 var _GridVirtualScrollerFiller = require("./GridVirtualScrollerFiller");
 var _GridVirtualScrollerRenderZone = require("./GridVirtualScrollerRenderZone");
 var _GridVirtualScrollbar = require("./GridVirtualScrollbar");
+var _GridScrollShadows = require("../GridScrollShadows");
+var _GridOverlays = require("../base/GridOverlays");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -76,14 +78,17 @@ function GridVirtualScroller(props) {
   const hasPinnedRight = (0, _useGridSelector.useGridSelector)(apiRef, hasPinnedRightSelector);
   const hasBottomFiller = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasBottomFillerSelector);
   const {
-    getOverlay,
-    overlaysProps
-  } = (0, _useGridOverlays.useGridOverlays)();
-  const ownerState = (0, _extends2.default)({
+    overlayType,
+    loadingOverlayVariant
+  } = (0, _useGridOverlays.useGridOverlays)(apiRef, rootProps);
+  const Overlay = rootProps.slots?.[overlayType];
+  const ownerState = {
     classes: rootProps.classes,
     hasScrollX,
-    hasPinnedRight
-  }, overlaysProps);
+    hasPinnedRight,
+    overlayType,
+    loadingOverlayVariant
+  };
   const classes = useUtilityClasses(ownerState);
   const virtualScroller = apiRef.current.virtualizer.api.useVirtualization().getters;
   const {
@@ -117,7 +122,11 @@ function GridVirtualScroller(props) {
           position: "top",
           virtualScroller: virtualScroller
         })]
-      }), getOverlay(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getContentProps(), {
+      }), overlayType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlays.GridOverlayWrapper, {
+        overlayType: overlayType,
+        loadingOverlayVariant: loadingOverlayVariant,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, (0, _extends2.default)({}, rootProps.slotProps?.[overlayType]))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getContentProps(), {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, {
           role: "rowgroup",
           children: [rows, /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.detailPanels, {
@@ -132,10 +141,20 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })
       })]
-    })), hasScrollX && !rootProps.listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
-      position: "horizontal"
-    }, getScrollbarHorizontalProps())), hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
-      position: "vertical"
-    }, getScrollbarVerticalProps())), props.children]
+    })), hasScrollX && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [rootProps.pinnedColumnsSectionSeparator?.endsWith('shadow') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollShadows.GridScrollShadows, {
+        position: "horizontal"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
+        position: "horizontal"
+      }, getScrollbarHorizontalProps()))]
+    }), hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [rootProps.pinnedRowsSectionSeparator?.endsWith('shadow') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollShadows.GridScrollShadows, {
+        position: "vertical"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
+        position: "vertical"
+      }, getScrollbarVerticalProps()))]
+    }), hasScrollX && hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.ScrollbarCorner, {
+      "aria-hidden": "true"
+    }), props.children]
   }));
 }

package/components/virtualization/GridVirtualScrollerFiller.js

@@ -28,12 +28,10 @@ const Pinned = (0, _system.styled)('div')({
   backgroundColor: _cssVariables.vars.cell.background.pinned
 });
 const PinnedLeft = (0, _system.styled)(Pinned)({
-  left: 0,
-  borderRight: '1px solid var(--rowBorderColor)'
+  left: 0
 });
 const PinnedRight = (0, _system.styled)(Pinned)({
-  right: 0,
-  borderLeft: '1px solid var(--rowBorderColor)'
+  right: 0
 });
 const Main = (0, _system.styled)('div')({
   flexGrow: 1,

package/constants/gridClasses.d.ts

@@ -235,11 +235,6 @@ export interface GridClasses {
    * Styles applied to the last column header element.
    */
   'columnHeader--last': string;
-  /**
-   * Styles applied to the last unpinned column header item.
-   * @ignore - do not document.
-   */
-  'columnHeader--lastUnpinned': string;
   /**
    * Styles applied to a column header item when its sibling with a bordering separator is focused.
    * @ignore - do not document.
@@ -676,21 +671,6 @@ export interface GridClasses {
    * Styles applied to the scrollbar filler cell.
    */
   scrollbarFiller: string;
-  /**
-   * @ignore - do not document.
-   * Styles applied to the scrollbar filler cell, in header position.
-   */
-  'scrollbarFiller--header': string;
-  /**
-   * @ignore - do not document.
-   * Styles applied to the scrollbar filler cell, with a border top.
-   */
-  'scrollbarFiller--borderTop': string;
-  /**
-   * @ignore - do not document.
-   * Styles applied to the scrollbar filler cell, with a border bottom.
-   */
-  'scrollbarFiller--borderBottom': string;
   /**
    * @ignore - do not document.
    * Styles applied to the scrollbar filler cell.

package/constants/gridClasses.js

@@ -11,6 +11,6 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getDataGridUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _generateUtilityClasses.default)('MuiDataGrid', ['aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'mainContent', 'withSidePanel', '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', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible',
+const gridClasses = exports.gridClasses = (0, _generateUtilityClasses.default)('MuiDataGrid', ['aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'mainContent', 'withSidePanel', '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', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible',
 // TODO v9: Rename to `cell--dragging`
-'row--dragging', 'row--dropAbove', 'row--dropBelow', 'row--beingDragged', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);
+'row--dragging', 'row--dropAbove', 'row--dropBelow', 'row--beingDragged', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);

package/esm/DataGrid/DataGrid.js

@@ -8,6 +8,7 @@ import { GridRoot } from "../components/index.js";
 import { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
 import { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
 import { useGridRowsOverridableMethods } from "../hooks/features/rows/useGridRowsOverridableMethods.js";
+import { useGridParamsOverridableMethods } from "../hooks/features/rows/useGridParamsOverridableMethods.js";
 import { GridContextProvider } from "../context/GridContextProvider.js";
 import { useDataGridComponent } from "./useDataGridComponent.js";
 import { useDataGridProps } from "./useDataGridProps.js";
@@ -21,8 +22,8 @@ const configuration = {
     useGridAriaAttributes,
     useGridRowAriaAttributes,
     useGridRowsOverridableMethods,
+    useGridParamsOverridableMethods,
     useCellAggregationResult: () => null,
-    useSortValueGetter: apiRef => apiRef.current.getCellValue,
     useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }
 };

package/esm/DataGrid/useDataGridComponent.js

@@ -72,14 +72,14 @@ export const useDataGridComponent = (apiRef, props, configuration) => {
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props, configuration);
   useGridRowSpanning(apiRef, props);
-  useGridParamsApi(apiRef, props);
+  useGridParamsApi(apiRef, props, configuration);
   useGridColumnSpanning(apiRef);
   useGridColumnGrouping(apiRef, props);
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
   useGridPreferencesPanel(apiRef, props);
   useGridFilter(apiRef, props, configuration);
-  useGridSorting(apiRef, props, configuration);
+  useGridSorting(apiRef, props);
   useGridDensity(apiRef, props);
   useGridColumnResize(apiRef, props);
   useGridPagination(apiRef, props);

package/esm/components/GridLoadingOverlay.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GridOverlayProps } from "./containers/GridOverlay.js";
-export type GridLoadingOverlayVariant = 'circular-progress' | 'linear-progress' | 'skeleton';
+import type { GridLoadingOverlayVariant } from "../hooks/features/overlays/gridOverlaysInterfaces.js";
 export interface GridLoadingOverlayProps extends GridOverlayProps {
   /**
    * The variant of the overlay.

package/esm/components/GridRow.js

@@ -26,7 +26,6 @@ import { gridSortModelSelector } from "../hooks/features/sorting/gridSortingSele
 import { gridRowNodeSelector } from "../hooks/features/rows/gridRowsSelector.js";
 import { gridEditRowsStateSelector, gridRowIsEditingSelector } from "../hooks/features/editing/gridEditingSelectors.js";
 import { gridIsRowDragActiveSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.js";
-import { GridScrollbarFillerCell as ScrollbarFiller } from "./GridScrollbarFillerCell.js";
 import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
 import { useGridConfiguration } from "../hooks/utils/useGridConfiguration.js";
 import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
@@ -240,8 +239,8 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     const canReorderRow = isRowReorderingEnabled && !sortModel.length;
     const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow || isRowDragActive);
     const cellIsNotVisible = pinnedPosition === PinnedColumnPosition.VIRTUAL;
-    const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
-    const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
+    const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection, rootProps.showCellVerticalBorder, rootProps.pinnedColumnsSectionSeparator);
+    const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller, rootProps.pinnedColumnsSectionSeparator);
     return /*#__PURE__*/_jsx(slots.cell, _extends({
       column: column,
       width: width,
@@ -309,10 +308,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     }), cells, /*#__PURE__*/_jsx("div", {
       role: "presentation",
       className: clsx(gridClasses.cell, gridClasses.cellEmpty)
-    }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/_jsx(ScrollbarFiller, {
-      pinnedRight: pinnedColumns.right.length > 0,
-      borderTop: !isFirstVisible
-    })]
+    }), rightCells]
   }));
 });
 if (process.env.NODE_ENV !== "production") GridRow.displayName = "GridRow";

package/esm/components/GridScrollShadows.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface GridScrollShadowsProps {
+  position: 'vertical' | 'horizontal';
+}
+declare function GridScrollShadows(props: GridScrollShadowsProps): React.JSX.Element;
+export { GridScrollShadows };

package/esm/components/GridScrollShadows.js

@@ -0,0 +1,103 @@
+'use client';
+
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { useRtl } from '@mui/system/RtlProvider';
+import { gridDimensionsSelector, gridPinnedColumnsSelector, useGridEvent, useGridSelector } from "../hooks/index.js";
+import { gridPinnedRowsSelector } from "../hooks/features/rows/gridRowsSelector.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { vars } from "../constants/cssVariables.js";
+import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
+import { gridHasScrollXSelector, gridHasScrollYSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ScrollShadow = styled('div')(({
+  theme
+}) => ({
+  position: 'absolute',
+  inset: 0,
+  pointerEvents: 'none',
+  transition: vars.transition(['box-shadow'], {
+    duration: vars.transitions.duration.short
+  }),
+  '--length': theme.palette.mode === 'dark' ? '8px' : '6px',
+  '--length-inverse': 'calc(var(--length) * -1)',
+  '--opacity': theme.palette.mode === 'dark' ? '0.7' : '0.18',
+  '--blur': 'var(--length)',
+  '--spread': 'calc(var(--length) * -1)',
+  '--color-start': 'rgba(0, 0, 0, calc(var(--hasScrollStart) * var(--opacity)))',
+  '--color-end': 'rgba(0, 0, 0, calc(var(--hasScrollEnd) * var(--opacity)))',
+  variants: [{
+    props: {
+      position: 'vertical'
+    },
+    style: {
+      top: 'var(--DataGrid-topContainerHeight)',
+      bottom: 'calc(var(--DataGrid-bottomContainerHeight) + var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))',
+      boxShadow: 'inset 0 var(--length) var(--blur) var(--spread) var(--color-start), inset 0 var(--length-inverse) var(--blur) var(--spread) var(--color-end)'
+    }
+  }, {
+    props: {
+      position: 'horizontal'
+    },
+    style: {
+      left: 'var(--DataGrid-leftPinnedWidth)',
+      right: 'calc(var(--DataGrid-rightPinnedWidth) + var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
+      boxShadow: 'inset var(--length) 0 var(--blur) var(--spread) var(--color-start), inset var(--length-inverse) 0 var(--blur) var(--spread) var(--color-end)'
+    }
+  }]
+}));
+function GridScrollShadows(props) {
+  const {
+    position
+  } = props;
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes,
+    position
+  };
+  const ref = React.useRef(null);
+  const apiRef = useGridPrivateApiContext();
+  const hasScrollX = useGridSelector(apiRef, gridHasScrollXSelector);
+  const hasScrollY = useGridSelector(apiRef, gridHasScrollYSelector);
+  const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
+  const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
+  const initialScrollable = position === 'vertical' ? hasScrollY && pinnedRows?.bottom?.length > 0 : hasScrollX && pinnedColumns?.right?.length !== undefined && pinnedColumns?.right?.length > 0;
+  const isRtl = useRtl();
+  const updateScrollShadowVisibility = React.useCallback(scrollPosition => {
+    if (!ref.current) {
+      return;
+    }
+    // Math.abs to convert negative scroll position (RTL) to positive
+    const scroll = Math.abs(Math.round(scrollPosition));
+    const dimensions = gridDimensionsSelector(apiRef);
+    const maxScroll = Math.round(dimensions.contentSize[position === 'vertical' ? 'height' : 'width'] - dimensions.viewportInnerSize[position === 'vertical' ? 'height' : 'width']);
+    const hasPinnedStart = position === 'vertical' ? pinnedRows?.top?.length > 0 : pinnedColumns?.left?.length !== undefined && pinnedColumns?.left?.length > 0;
+    const hasPinnedEnd = position === 'vertical' ? pinnedRows?.bottom?.length > 0 : pinnedColumns?.right?.length !== undefined && pinnedColumns?.right?.length > 0;
+    const scrollIsNotAtStart = isRtl ? scroll < maxScroll : scroll > 0;
+    const scrollIsNotAtEnd = isRtl ? scroll > 0 : scroll < maxScroll;
+    ref.current.style.setProperty('--hasScrollStart', hasPinnedStart && scrollIsNotAtStart ? '1' : '0');
+    ref.current.style.setProperty('--hasScrollEnd', hasPinnedEnd && scrollIsNotAtEnd ? '1' : '0');
+  }, [pinnedRows, pinnedColumns, isRtl, position, apiRef]);
+  const handleScrolling = scrollParams => {
+    updateScrollShadowVisibility(scrollParams[position === 'vertical' ? 'top' : 'left']);
+  };
+  const handleColumnResizeStop = () => {
+    if (position === 'horizontal') {
+      updateScrollShadowVisibility(apiRef.current.virtualScrollerRef?.current?.scrollLeft || 0);
+    }
+  };
+  useGridEvent(apiRef, 'scrollPositionChange', handleScrolling);
+  useGridEvent(apiRef, 'columnResizeStop', handleColumnResizeStop);
+  React.useEffect(() => {
+    updateScrollShadowVisibility((position === 'horizontal' ? apiRef.current.virtualScrollerRef?.current?.scrollLeft : apiRef.current.virtualScrollerRef?.current?.scrollTop) ?? 0);
+  }, [updateScrollShadowVisibility, apiRef, position]);
+  return /*#__PURE__*/_jsx(ScrollShadow, {
+    ownerState: ownerState,
+    ref: ref,
+    style: {
+      '--hasScrollStart': 0,
+      '--hasScrollEnd': initialScrollable ? '1' : '0'
+    }
+  });
+}
+export { GridScrollShadows };

package/esm/components/GridScrollbarFillerCell.d.ts

@@ -1,13 +1,7 @@
 import * as React from 'react';
 declare function GridScrollbarFillerCell({
-  header,
-  borderTop,
-  borderBottom,
   pinnedRight
 }: {
-  header?: boolean;
-  borderTop?: boolean;
-  borderBottom?: boolean;
   pinnedRight?: boolean;
 }): React.JSX.Element;
 export { GridScrollbarFillerCell };

package/esm/components/GridScrollbarFillerCell.js

@@ -4,20 +4,14 @@ import { gridClasses } from "../constants/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const classes = {
   root: gridClasses.scrollbarFiller,
-  header: gridClasses['scrollbarFiller--header'],
-  borderTop: gridClasses['scrollbarFiller--borderTop'],
-  borderBottom: gridClasses['scrollbarFiller--borderBottom'],
   pinnedRight: gridClasses['scrollbarFiller--pinnedRight']
 };
 function GridScrollbarFillerCell({
-  header,
-  borderTop = true,
-  borderBottom,
   pinnedRight
 }) {
   return /*#__PURE__*/_jsx("div", {
     role: "presentation",
-    className: clsx(classes.root, header && classes.header, borderTop && classes.borderTop, borderBottom && classes.borderBottom, pinnedRight && classes.pinnedRight)
+    className: clsx(classes.root, pinnedRight && classes.pinnedRight)
   });
 }
 export { GridScrollbarFillerCell };

package/esm/components/GridSkeletonLoadingOverlay.js

@@ -17,7 +17,6 @@ import { getDataGridUtilityClass, gridClasses } from "../constants/gridClasses.j
 import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
 import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../utils/cellBorderUtils.js";
 import { escapeOperandAttributeSelector } from "../utils/domUtils.js";
-import { GridScrollbarFillerCell } from "./GridScrollbarFillerCell.js";
 import { rtlFlipSide } from "../utils/rtlFlipSide.js";
 import { attachPinnedStyle } from "../internals/utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -92,8 +91,8 @@ export const GridSkeletonLoadingOverlayInner = forwardRef(function GridSkeletonL
         const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
         const pinnedStyle = attachPinnedStyle({}, isRtl, pinnedPosition, getPinnedCellOffset(pinnedPosition, column.computedWidth, colIndex, positions, dimensions.columnsTotalWidth, scrollbarWidth));
         const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
-        const showRightBorder = shouldCellShowRightBorder(pinnedPosition, sectionIndex, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
-        const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, sectionIndex);
+        const showRightBorder = shouldCellShowRightBorder(pinnedPosition, sectionIndex, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller, rootProps.pinnedColumnsSectionSeparator);
+        const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, sectionIndex, rootProps.showCellVerticalBorder, rootProps.pinnedColumnsSectionSeparator);
         const isLastColumn = colIndex === columns.length - 1;
         const isFirstPinnedRight = isPinnedRight && sectionIndex === 0;
         const hasFillerBefore = isFirstPinnedRight && gridHasFiller;
@@ -104,7 +103,6 @@ export const GridSkeletonLoadingOverlayInner = forwardRef(function GridSkeletonL
           width: emptyCellWidth,
           empty: true
         }, `skeleton-filler-column-${i}`);
-        const hasScrollbarFiller = isLastColumn && scrollbarWidth !== 0;
         if (hasFillerBefore) {
           rowCells.push(emptyCell);
         }
@@ -124,11 +122,6 @@ export const GridSkeletonLoadingOverlayInner = forwardRef(function GridSkeletonL
         if (hasFillerAfter) {
           rowCells.push(emptyCell);
         }
-        if (hasScrollbarFiller) {
-          rowCells.push(/*#__PURE__*/_jsx(GridScrollbarFillerCell, {
-            pinnedRight: pinnedColumns.right.length > 0
-          }, `skeleton-scrollbar-filler-${i}`));
-        }
       }
       array.push(/*#__PURE__*/_jsx("div", {
         className: clsx(gridClasses.row, gridClasses.rowSkeleton, i === 0 && !showFirstRowBorder && gridClasses['row--firstVisible']),
@@ -136,7 +129,7 @@ export const GridSkeletonLoadingOverlayInner = forwardRef(function GridSkeletonL
       }, `skeleton-row-${i}`));
     }
     return array;
-  }, [skeletonRowsCount, columns, getPinnedPosition, isRtl, pinnedColumns, dimensions.hasScrollY, dimensions.scrollbarSize, dimensions.columnsTotalWidth, dimensions.viewportOuterSize.width, dimensions.rowHeight, positions, rootProps.showCellVerticalBorder, slots, visibleColumns, showFirstRowBorder]);
+  }, [skeletonRowsCount, columns, getPinnedPosition, isRtl, pinnedColumns, dimensions.hasScrollY, dimensions.scrollbarSize, dimensions.columnsTotalWidth, dimensions.viewportOuterSize.width, dimensions.rowHeight, positions, rootProps.showCellVerticalBorder, rootProps.pinnedColumnsSectionSeparator, slots, visibleColumns, showFirstRowBorder]);
 
   // Sync the column resize of the overlay columns with the grid
   const handleColumnResize = params => {

package/esm/components/base/GridOverlays.d.ts

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { GridLoadingOverlayVariant } from "../GridLoadingOverlay.js";
-import { GridSlotsComponent } from "../../models/index.js";
-export type GridOverlayType = keyof Pick<GridSlotsComponent, 'noColumnsOverlay' | 'noRowsOverlay' | 'noResultsOverlay' | 'loadingOverlay'> | null;
+import type { GridOverlayType, GridLoadingOverlayVariant } from "../../hooks/features/overlays/gridOverlaysInterfaces.js";
 interface GridOverlaysProps {
   overlayType: GridOverlayType;
   loadingOverlayVariant: GridLoadingOverlayVariant | null;

package/esm/components/columnHeaders/GridColumnHeaderItem.d.ts

@@ -21,7 +21,6 @@ interface GridColumnHeaderItemProps {
   pinnedPosition?: PinnedColumnPosition;
   pinnedOffset?: number;
   style?: React.CSSProperties;
-  isLastUnpinned: boolean;
   isSiblingFocused: boolean;
   showLeftBorder: boolean;
   showRightBorder: boolean;

package/esm/components/columnHeaders/GridColumnHeaderItem.js

@@ -32,7 +32,6 @@ const useUtilityClasses = ownerState => {
     showLeftBorder,
     filterItemsCounter,
     pinnedPosition,
-    isLastUnpinned,
     isSiblingFocused
   } = ownerState;
   const isColumnSortable = colDef.sortable && !disableColumnSorting;
@@ -44,7 +43,7 @@ const useUtilityClasses = ownerState => {
     root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', isColumnSortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight',
     // TODO: Remove classes below and restore `:has` selectors when they are supported in jsdom
     // See https://github.com/mui/mui-x/pull/14559
-    isLastUnpinned && 'columnHeader--lastUnpinned', isSiblingFocused && 'columnHeader--siblingFocused'],
+    isSiblingFocused && 'columnHeader--siblingFocused'],
     draggableContainer: ['columnHeaderDraggableContainer'],
     titleContainer: ['columnHeaderTitleContainer'],
     titleContainerContent: ['columnHeaderTitleContainerContent']
@@ -230,7 +229,6 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
   headerHeight: PropTypes.number.isRequired,
   isDragging: PropTypes.bool.isRequired,
   isLast: PropTypes.bool.isRequired,
-  isLastUnpinned: PropTypes.bool.isRequired,
   isResizing: PropTypes.bool.isRequired,
   isSiblingFocused: PropTypes.bool.isRequired,
   pinnedOffset: PropTypes.number,