@mui/x-data-grid 8.12.0 → 8.13.0

package/esm/components/containers/GridRootStyles.js

@@ -105,8 +105,6 @@ export const GridRootStyles = styled('div', {
     [`& .${c['columnHeader--filtered']}`]: styles['columnHeader--filtered']
   }, {
     [`& .${c['columnHeader--last']}`]: styles['columnHeader--last']
-  }, {
-    [`& .${c['columnHeader--lastUnpinned']}`]: styles['columnHeader--lastUnpinned']
   }, {
     [`& .${c['columnHeader--moving']}`]: styles['columnHeader--moving']
   }, {
@@ -223,12 +221,6 @@ export const GridRootStyles = styled('div', {
     [`& .${c['scrollbar--vertical']}`]: styles['scrollbar--vertical']
   }, {
     [`& .${c.scrollbarFiller}`]: styles.scrollbarFiller
-  }, {
-    [`& .${c['scrollbarFiller--borderBottom']}`]: styles['scrollbarFiller--borderBottom']
-  }, {
-    [`& .${c['scrollbarFiller--borderTop']}`]: styles['scrollbarFiller--borderTop']
-  }, {
-    [`& .${c['scrollbarFiller--header']}`]: styles['scrollbarFiller--header']
   }, {
     [`& .${c['scrollbarFiller--pinnedRight']}`]: styles['scrollbarFiller--pinnedRight']
   }, {
@@ -390,9 +382,7 @@ export const GridRootStyles = styled('div', {
     [`& .${c.columnHeader}:focus,
       & .${c['columnHeader--withLeftBorder']},
       & .${c['columnHeader--withRightBorder']},
-      & .${c['columnHeader--siblingFocused']},
-      & .${c['virtualScroller--hasScrollX']} .${c['columnHeader--lastUnpinned']},
-      & .${c['virtualScroller--hasScrollX']} .${c['columnHeader--last']}
+      & .${c['columnHeader--siblingFocused']}
       `]: {
       [`& .${c.columnSeparator}`]: {
         opacity: 0
@@ -597,7 +587,7 @@ export const GridRootStyles = styled('div', {
       width: 'auto'
     },
     [`& .${c.headerFilterRow}`]: {
-      [`& .${c.columnHeader}`]: {
+      [`& .${c.columnHeader}, & .${c.scrollbarFiller}`]: {
         boxSizing: 'border-box',
         borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
       }
@@ -846,14 +836,8 @@ export const GridRootStyles = styled('div', {
     [`.${c.scrollbarFiller}`]: {
       minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
       alignSelf: 'stretch',
-      [`&.${c['scrollbarFiller--borderTop']}`]: {
-        borderTop: '1px solid var(--DataGrid-rowBorderColor)'
-      },
-      [`&.${c['scrollbarFiller--borderBottom']}`]: {
-        borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
-      },
+      backgroundColor: headerBackground,
       [`&.${c['scrollbarFiller--pinnedRight']}`]: {
-        backgroundColor: vars.cell.background.pinned,
         position: 'sticky',
         zIndex: 40,
         // Should be above the column separator
@@ -869,7 +853,7 @@ export const GridRootStyles = styled('div', {
     [`& .${c.columnHeaders} .${c.filler}`]: {
       backgroundColor: headerBackground
     },
-    /* Hide grid rows, row filler, and vertical scrollbar. Used when skeleton/no columns overlay is visible */
+    /* Used when skeleton/no columns overlay is visible */
     [`& .${c['main--hiddenContent']}`]: {
       [`& .${c.virtualScrollerContent}`]: {
         // We use visibility hidden so that the virtual scroller content retains its height.
@@ -878,7 +862,8 @@ export const GridRootStyles = styled('div', {
         position: 'fixed',
         visibility: 'hidden'
       },
-      [`& .${c['scrollbar--vertical']}, & .${c.pinnedRows}, & .${c.virtualScroller} > .${c.filler}`]: {
+      // Hide grid content
+      [`& .${c.pinnedRows}`]: {
         display: 'none'
       }
     },

package/esm/components/toolbarV8/GridToolbar.js

@@ -3,7 +3,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className"],
-  _excluded2 = ["className"];
+  _excluded2 = ["className"],
+  _excluded3 = ["showQuickFilter", "quickFilterProps", "csvOptions", "printOptions", "additionalItems", "additionalExportMenuItems"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
@@ -79,13 +80,14 @@ function GridToolbarLabel(props) {
 }
 function GridToolbar(props) {
   const {
-    showQuickFilter = true,
-    quickFilterProps,
-    csvOptions,
-    printOptions,
-    additionalItems,
-    additionalExportMenuItems
-  } = props;
+      showQuickFilter = true,
+      quickFilterProps,
+      csvOptions,
+      printOptions,
+      additionalItems,
+      additionalExportMenuItems
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded3);
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const [exportMenuOpen, setExportMenuOpen] = React.useState(false);
@@ -94,7 +96,7 @@ function GridToolbar(props) {
   const exportMenuTriggerId = useId();
   const showExportMenu = !csvOptions?.disableToolbarButton || !printOptions?.disableToolbarButton || additionalExportMenuItems;
   const closeExportMenu = () => setExportMenuOpen(false);
-  return /*#__PURE__*/_jsxs(Toolbar, {
+  return /*#__PURE__*/_jsxs(Toolbar, _extends({}, other, {
     children: [rootProps.label && /*#__PURE__*/_jsx(GridToolbarLabel, {
       children: rootProps.label
     }), !rootProps.disableColumnSelector && /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
@@ -161,7 +163,7 @@ function GridToolbar(props) {
     }), showQuickFilter && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(GridToolbarDivider, {}), /*#__PURE__*/_jsx(GridToolbarQuickFilter, _extends({}, quickFilterProps))]
     })]
-  });
+  }));
 }
 process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
   // ----------------------------- Warning --------------------------------

package/esm/components/virtualization/GridMainContainer.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
-import { GridLoadingOverlayVariant } from "../GridLoadingOverlay.js";
-import { GridOverlayType } from "../base/GridOverlays.js";
+import type { GridOverlayType, GridLoadingOverlayVariant } from "../../hooks/features/overlays/gridOverlaysInterfaces.js";
 type OwnerState = Pick<DataGridProcessedProps, 'classes'> & {
   hasScrollX: boolean;
   hasPinnedRight: boolean;

package/esm/components/virtualization/GridVirtualScrollbar.d.ts

@@ -7,5 +7,6 @@ type GridVirtualScrollbarProps = {
     top: number;
   }>;
 };
+export declare const ScrollbarCorner: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, {}, {}>;
 declare const GridVirtualScrollbar: React.ForwardRefExoticComponent<GridVirtualScrollbarProps> | React.ForwardRefExoticComponent<GridVirtualScrollbarProps & React.RefAttributes<HTMLDivElement>>;
 export { GridVirtualScrollbar };

package/esm/components/virtualization/GridVirtualScrollbar.js

@@ -37,7 +37,7 @@ const Scrollbar = styled('div')({
 });
 const ScrollbarVertical = 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.
@@ -45,11 +45,11 @@ const ScrollbarVertical = styled(Scrollbar)({
   '& > div': {
     width: 'var(--size)'
   },
-  top: 'var(--DataGrid-topContainerHeight)',
-  right: '0px'
+  top: 'var(--DataGrid-headersTotalHeight)',
+  right: 0
 });
 const ScrollbarHorizontal = styled(Scrollbar)({
-  width: '100%',
+  width: 'calc(var(--DataGrid-hasScrollX) * (100% - var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize)))',
   height: 'var(--size)',
   overflowY: 'hidden',
   overflowX: 'auto',
@@ -58,7 +58,14 @@ const ScrollbarHorizontal = styled(Scrollbar)({
   '& > div': {
     height: 'var(--size)'
   },
-  bottom: '0px'
+  bottom: 0
+});
+export const ScrollbarCorner = styled(Scrollbar)({
+  width: 'var(--size)',
+  height: 'var(--size)',
+  right: 0,
+  bottom: 0,
+  overflow: 'scroll'
 });
 const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref) {
   const apiRef = useGridPrivateApiContext();
@@ -66,16 +73,12 @@ const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref
   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 = useGridSelector(apiRef, 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 = useEventCallback(() => {
     const scrollbar = scrollbarRef.current;
     const scrollPosition = props.scrollPosition.current;
@@ -91,8 +94,7 @@ const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref
       return;
     }
     isLocked.current = true;
-    const value = scrollPosition[propertyScrollPosition] / contentSize;
-    scrollbar[propertyScroll] = value * scrollbarInnerSize;
+    scrollbar[propertyScroll] = scrollPosition[propertyScrollPosition];
   });
   const onScrollbarScroll = useEventCallback(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;
@@ -105,8 +107,7 @@ const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref
       return;
     }
     isLocked.current = true;
-    const value = scrollbar[propertyScroll] / scrollbarInnerSize;
-    scroller[propertyScroll] = value * contentSize;
+    scroller[propertyScroll] = scrollbar[propertyScroll];
   });
   useOnMount(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;
@@ -121,18 +122,13 @@ const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref
       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__*/_jsx(Container, {
     ref: useForkRef(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
@@ -142,8 +138,8 @@ const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref
       event.target.blur();
     },
     children: /*#__PURE__*/_jsx("div", {
-      ref: contentRef,
-      className: classes.content
+      className: classes.content,
+      style: scrollbarInnerStyle
     })
   });
 });

package/esm/components/virtualization/GridVirtualScroller.js

@@ -16,7 +16,9 @@ import { GridTopContainer as TopContainer } from "./GridTopContainer.js";
 import { GridVirtualScrollerContent as Content } from "./GridVirtualScrollerContent.js";
 import { GridVirtualScrollerFiller as SpaceFiller } from "./GridVirtualScrollerFiller.js";
 import { GridVirtualScrollerRenderZone as RenderZone } from "./GridVirtualScrollerRenderZone.js";
-import { GridVirtualScrollbar as Scrollbar } from "./GridVirtualScrollbar.js";
+import { GridVirtualScrollbar as Scrollbar, ScrollbarCorner } from "./GridVirtualScrollbar.js";
+import { GridScrollShadows as ScrollShadows } from "../GridScrollShadows.js";
+import { GridOverlayWrapper } from "../base/GridOverlays.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -68,14 +70,17 @@ function GridVirtualScroller(props) {
   const hasPinnedRight = useGridSelector(apiRef, hasPinnedRightSelector);
   const hasBottomFiller = useGridSelector(apiRef, gridHasBottomFillerSelector);
   const {
-    getOverlay,
-    overlaysProps
-  } = useGridOverlays();
-  const ownerState = _extends({
+    overlayType,
+    loadingOverlayVariant
+  } = 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 {
@@ -109,7 +114,11 @@ function GridVirtualScroller(props) {
           position: "top",
           virtualScroller: virtualScroller
         })]
-      }), getOverlay(), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
+      }), overlayType && /*#__PURE__*/_jsx(GridOverlayWrapper, {
+        overlayType: overlayType,
+        loadingOverlayVariant: loadingOverlayVariant,
+        children: /*#__PURE__*/_jsx(Overlay, _extends({}, rootProps.slotProps?.[overlayType]))
+      }), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
         children: /*#__PURE__*/_jsxs(RenderZone, {
           role: "rowgroup",
           children: [rows, /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {
@@ -124,11 +133,21 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })
       })]
-    })), hasScrollX && !rootProps.listView && /*#__PURE__*/_jsx(Scrollbar, _extends({
-      position: "horizontal"
-    }, getScrollbarHorizontalProps())), hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
-      position: "vertical"
-    }, getScrollbarVerticalProps())), props.children]
+    })), hasScrollX && /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [rootProps.pinnedColumnsSectionSeparator?.endsWith('shadow') && /*#__PURE__*/_jsx(ScrollShadows, {
+        position: "horizontal"
+      }), /*#__PURE__*/_jsx(Scrollbar, _extends({
+        position: "horizontal"
+      }, getScrollbarHorizontalProps()))]
+    }), hasScrollY && /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [rootProps.pinnedRowsSectionSeparator?.endsWith('shadow') && /*#__PURE__*/_jsx(ScrollShadows, {
+        position: "vertical"
+      }), /*#__PURE__*/_jsx(Scrollbar, _extends({
+        position: "vertical"
+      }, getScrollbarVerticalProps()))]
+    }), hasScrollX && hasScrollY && /*#__PURE__*/_jsx(ScrollbarCorner, {
+      "aria-hidden": "true"
+    }), props.children]
   }));
 }
 export { GridVirtualScroller };

package/esm/components/virtualization/GridVirtualScrollerFiller.js

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

package/esm/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/esm/constants/gridClasses.js

@@ -3,6 +3,6 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('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',
+export const gridClasses = generateUtilityClasses('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/hooks/core/useGridVirtualizer.js

@@ -21,6 +21,7 @@ import { gridRowSelectionManagerSelector } from "../features/rowSelection/index.
 import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../constants/dataGridPropsDefaultValues.js";
 import { getValidRowHeight, minimalContentHeight, rowHeightWarning } from "../features/rows/gridRowsUtils.js";
 import { getTotalHeaderHeight } from "../features/columns/gridColumnsUtils.js";
+import { useGridOverlays } from "../features/overlays/useGridOverlays.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function identity(x) {
   return x;
@@ -78,6 +79,7 @@ export function useGridVirtualizer(apiRef, rootProps) {
   const headersTotalHeight = getTotalHeaderHeight(apiRef, rootProps);
   const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
+  const overlayState = useGridOverlays(apiRef, rootProps);
   const dimensionsParams = {
     rowHeight,
     headerHeight,
@@ -140,6 +142,8 @@ export function useGridVirtualizer(apiRef, rootProps) {
     pinnedRows,
     pinnedColumns,
     autoHeight,
+    disableHorizontalScroll: listView,
+    disableVerticalScroll: overlayState.overlayType === 'noColumnsOverlay' || overlayState.loadingOverlayVariant === 'skeleton',
     minimalContentHeight,
     getRowHeight: React.useMemo(() => {
       if (!getRowHeight) {

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

@@ -109,10 +109,7 @@ export const useGridColumnHeaders = props => {
         role: "presentation",
         className: clsx(gridClasses.filler, borderBottom && gridClasses['filler--borderBottom'])
       }), hasScrollbarFiller && /*#__PURE__*/_jsx(ScrollbarFiller, {
-        header: true,
-        pinnedRight: isPinnedRight,
-        borderBottom: borderBottom,
-        borderTop: false
+        pinnedRight: isPinnedRight
       })]
     });
   };
@@ -134,11 +131,10 @@ export const useGridColumnHeaders = props => {
       const pinnedOffset = getPinnedCellOffset(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
       const siblingWithBorderingSeparator = pinnedPosition === PinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
       const isSiblingFocused = siblingWithBorderingSeparator ? columnHeaderFocus !== null && columnHeaderFocus.field === siblingWithBorderingSeparator.field : false;
-      const isLastUnpinned = columnIndex + 1 === columnPositions.length - pinnedColumns.right.length;
       const indexInSection = i;
       const sectionLength = renderedColumns.length;
-      const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
-      const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showColumnVerticalBorder, gridHasFiller);
+      const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection, rootProps.showColumnVerticalBorder, rootProps.pinnedColumnsSectionSeparator);
+      const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showColumnVerticalBorder, gridHasFiller, rootProps.pinnedColumnsSectionSeparator);
       columns.push(/*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
@@ -152,7 +148,6 @@ export const useGridColumnHeaders = props => {
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
         pinnedOffset: pinnedOffset,
-        isLastUnpinned: isLastUnpinned,
         isSiblingFocused: isSiblingFocused,
         showLeftBorder: showLeftBorder,
         showRightBorder: showRightBorder
@@ -258,8 +253,8 @@ export const useGridColumnHeaders = props => {
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
         pinnedOffset: pinnedOffset,
-        showLeftBorder: shouldCellShowLeftBorder(pinnedPosition, indexInSection),
-        showRightBorder: shouldCellShowRightBorder(pinnedPosition, indexInSection, visibleColumnGroupHeader.length, rootProps.showColumnVerticalBorder, gridHasFiller)
+        showLeftBorder: shouldCellShowLeftBorder(pinnedPosition, indexInSection, rootProps.showColumnVerticalBorder, rootProps.pinnedColumnsSectionSeparator),
+        showRightBorder: shouldCellShowRightBorder(pinnedPosition, indexInSection, visibleColumnGroupHeader.length, rootProps.showColumnVerticalBorder, gridHasFiller, rootProps.pinnedColumnsSectionSeparator)
       }, index);
     });
     return getFillers(params, children, leftOverflow);

package/esm/hooks/features/columnResize/useGridColumnResize.js

@@ -16,6 +16,7 @@ import { clamp } from "../../../utils/utils.js";
 import { useTimeout } from "../../utils/useTimeout.js";
 import { GridPinnedColumnPosition } from "../columns/gridColumnsInterfaces.js";
 import { gridColumnsStateSelector } from "../columns/index.js";
+import { gridDimensionsSelector } from "../dimensions/index.js";
 function trackFinger(event, currentTouchId) {
   if (currentTouchId !== undefined && event.changedTouches) {
     for (let i = 0; i < event.changedTouches.length; i += 1) {
@@ -63,6 +64,18 @@ function getResizeDirection(separator, isRtl) {
   }
   return side;
 }
+function getPinnedWidthProperty(isRtl, pinnedPosition) {
+  if (pinnedPosition === GridPinnedColumnPosition.LEFT) {
+    return isRtl ? '--DataGrid-rightPinnedWidth' : '--DataGrid-leftPinnedWidth';
+  }
+  return isRtl ? '--DataGrid-leftPinnedWidth' : '--DataGrid-rightPinnedWidth';
+}
+function getPinnedWidth(dimensions, isRtl, pinnedPosition) {
+  if (pinnedPosition === GridPinnedColumnPosition.LEFT) {
+    return isRtl ? dimensions.rightPinnedWidth : dimensions.leftPinnedWidth;
+  }
+  return isRtl ? dimensions.leftPinnedWidth : dimensions.rightPinnedWidth;
+}
 function preventClick(event) {
   event.preventDefault();
   event.stopImmediatePropagation();
@@ -232,6 +245,7 @@ export const useGridColumnResize = (apiRef, props) => {
       }
       div.style.setProperty('--width', finalWidth);
     });
+    const dimensions = gridDimensionsSelector(apiRef);
     const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, refs.colDef.field);
     if (pinnedPosition === GridPinnedColumnPosition.LEFT) {
       updateProperty(refs.fillerLeft, 'width', widthDiff);
@@ -241,6 +255,7 @@ export const useGridColumnResize = (apiRef, props) => {
       refs.leftPinnedHeadersAfter.forEach(header => {
         updateProperty(header, 'left', widthDiff);
       });
+      apiRef.current.rootElementRef?.current?.style.setProperty(getPinnedWidthProperty(isRtl, pinnedPosition), `${getPinnedWidth(dimensions, isRtl, pinnedPosition) + columnWidthDiff}px`);
     }
     if (pinnedPosition === GridPinnedColumnPosition.RIGHT) {
       updateProperty(refs.fillerRight, 'width', widthDiff);
@@ -250,6 +265,7 @@ export const useGridColumnResize = (apiRef, props) => {
       refs.rightPinnedHeadersBefore.forEach(header => {
         updateProperty(header, 'right', widthDiff);
       });
+      apiRef.current.rootElementRef?.current?.style.setProperty(getPinnedWidthProperty(isRtl, pinnedPosition), `${getPinnedWidth(dimensions, isRtl, pinnedPosition) + columnWidthDiff}px`);
     }
   };
   const finishResize = nativeEvent => {

package/esm/hooks/features/dataSource/useGridDataSourceBase.js

@@ -181,6 +181,12 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     setCache(prevCache => prevCache !== newCache ? newCache : prevCache);
   }, [props.dataSourceCache, options.cacheOptions]);
   React.useEffect(() => {
+    // Return early if the proper strategy isn't set yet
+    // Context: https://github.com/mui/mui-x/issues/19650
+    const strategy = apiRef.current.getActiveStrategy(GridStrategyGroup.DataSource);
+    if (strategy !== DataSourceRowsUpdateStrategy.Default && strategy !== DataSourceRowsUpdateStrategy.LazyLoading) {
+      return undefined;
+    }
     if (props.dataSource) {
       apiRef.current.dataSource.cache.clear();
       apiRef.current.dataSource.fetchRows();

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

@@ -16,4 +16,5 @@ export * from "./dimensions/index.js";
 export * from "./statePersistence/index.js";
 export * from "./headerFiltering/index.js";
 export * from "./virtualization/index.js";
-export * from "./dataSource/index.js";
+export * from "./dataSource/index.js";
+export * from "./overlays/index.js";

package/esm/hooks/features/index.js

@@ -17,4 +17,5 @@ export * from "./dimensions/index.js";
 export * from "./statePersistence/index.js";
 export * from "./headerFiltering/index.js";
 export * from "./virtualization/index.js";
-export * from "./dataSource/index.js";
+export * from "./dataSource/index.js";
+export * from "./overlays/index.js";

package/esm/hooks/features/overlays/gridOverlaysInterfaces.d.ts

@@ -0,0 +1,3 @@
+import { GridSlotsComponent } from "../../../models/index.js";
+export type GridOverlayType = keyof Pick<GridSlotsComponent, 'noColumnsOverlay' | 'noRowsOverlay' | 'noResultsOverlay' | 'loadingOverlay'> | null;
+export type GridLoadingOverlayVariant = 'circular-progress' | 'linear-progress' | 'skeleton';

package/esm/hooks/features/overlays/gridOverlaysInterfaces.js

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

package/esm/hooks/features/overlays/index.d.ts

@@ -0,0 +1 @@
+export type { GridLoadingOverlayVariant } from "./gridOverlaysInterfaces.js";

package/esm/hooks/features/overlays/index.js

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

package/esm/hooks/features/overlays/useGridOverlays.d.ts

@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { GridLoadingOverlayVariant } from "../../../components/GridLoadingOverlay.js";
-import type { GridOverlayType } from "../../../components/base/GridOverlays.js";
+import { GridApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+import type { GridOverlayType, GridLoadingOverlayVariant } from "./gridOverlaysInterfaces.js";
 /**
  * Uses the grid state to determine which overlay to display.
  * Returns the active overlay type and the active loading overlay variant.
  */
-export declare const useGridOverlays: () => {
-  getOverlay: () => React.JSX.Element | null;
-  overlaysProps: {
-    overlayType: NonNullable<GridOverlayType>;
-    loadingOverlayVariant: GridLoadingOverlayVariant | null;
-  };
+export declare const useGridOverlays: (apiRef: React.RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, "slotProps">) => {
+  overlayType: NonNullable<GridOverlayType>;
+  loadingOverlayVariant: GridLoadingOverlayVariant | null;
 };