@mui/x-data-grid 7.24.1 → 7.26.0

package/components/virtualization/GridVirtualScroller.js

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
+import { gridHasBottomFillerSelector, gridHasScrollXSelector, gridHasScrollYSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.js";
 import { GridScrollArea } from "../GridScrollArea.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
 import { useGridVirtualScroller } from "../../hooks/features/virtualization/useGridVirtualScroller.js";
 import { useGridOverlays } from "../../hooks/features/overlays/useGridOverlays.js";
 import { GridOverlays as Overlays } from "../base/GridOverlays.js";
@@ -20,20 +20,28 @@ import { GridVirtualScrollerFiller as SpaceFiller } from "./GridVirtualScrollerF
 import { GridVirtualScrollerRenderZone as RenderZone } from "./GridVirtualScrollerRenderZone.js";
 import { GridVirtualScrollbar as Scrollbar } from "./GridVirtualScrollbar.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = (ownerState, dimensions, loadingOverlayVariant) => {
+const useUtilityClasses = ownerState => {
   const {
-    classes
+    classes,
+    hasScrollX,
+    hasPinnedRight,
+    loadingOverlayVariant
   } = ownerState;
   const slots = {
-    root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
-    scroller: ['virtualScroller', dimensions.hasScrollX && 'virtualScroller--hasScrollX']
+    root: ['main', hasPinnedRight && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
+    scroller: ['virtualScroller', hasScrollX && 'virtualScroller--hasScrollX']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 const Scroller = styled('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScroller',
-  overridesResolver: (props, styles) => styles.virtualScroller
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.virtualScroller, ownerState.hasScrollX && styles['virtualScroller--hasScrollX']];
+  }
 })({
   position: 'relative',
   height: '100%',
@@ -51,12 +59,22 @@ const Scroller = styled('div', {
   // See https://github.com/mui/mui-x/issues/10547
   zIndex: 0
 });
+const hasPinnedRightSelector = state => state.dimensions.rightPinnedWidth > 0;
 function GridVirtualScroller(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const hasScrollY = useGridSelector(apiRef, gridHasScrollYSelector);
+  const hasScrollX = useGridSelector(apiRef, gridHasScrollXSelector);
+  const hasPinnedRight = useGridSelector(apiRef, hasPinnedRightSelector);
+  const hasBottomFiller = useGridSelector(apiRef, gridHasBottomFillerSelector);
   const overlaysProps = useGridOverlays();
-  const classes = useUtilityClasses(rootProps, dimensions, overlaysProps.loadingOverlayVariant);
+  const ownerState = {
+    classes: rootProps.classes,
+    hasScrollX,
+    hasPinnedRight,
+    loadingOverlayVariant: overlaysProps.loadingOverlayVariant
+  };
+  const classes = useUtilityClasses(ownerState);
   const virtualScroller = useGridVirtualScroller();
   const {
     getContainerProps,
@@ -65,20 +83,22 @@ function GridVirtualScroller(props) {
     getRenderZoneProps,
     getScrollbarVerticalProps,
     getScrollbarHorizontalProps,
-    getRows
+    getRows,
+    getScrollAreaProps
   } = virtualScroller;
   const rows = getRows();
   return /*#__PURE__*/_jsxs(Container, _extends({
     className: classes.root
   }, getContainerProps(), {
-    children: [/*#__PURE__*/_jsx(GridScrollArea, {
+    ownerState: ownerState,
+    children: [/*#__PURE__*/_jsx(GridScrollArea, _extends({
       scrollDirection: "left"
-    }), /*#__PURE__*/_jsx(GridScrollArea, {
+    }, getScrollAreaProps())), /*#__PURE__*/_jsx(GridScrollArea, _extends({
       scrollDirection: "right"
-    }), /*#__PURE__*/_jsxs(Scroller, _extends({
+    }, getScrollAreaProps())), /*#__PURE__*/_jsxs(Scroller, _extends({
       className: classes.scroller
     }, getScrollerProps(), {
-      ownerState: rootProps,
+      ownerState: ownerState,
       children: [/*#__PURE__*/_jsxs(TopContainer, {
         children: [!rootProps.unstable_listView && /*#__PURE__*/_jsx(GridHeaders, {}), /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
           position: "top",
@@ -90,7 +110,7 @@ function GridVirtualScroller(props) {
             virtualScroller: virtualScroller
           })]
         }))
-      })), /*#__PURE__*/_jsx(SpaceFiller, {
+      })), hasBottomFiller && /*#__PURE__*/_jsx(SpaceFiller, {
         rowsLength: rows.length
       }), /*#__PURE__*/_jsx(BottomContainer, {
         children: /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
@@ -98,9 +118,9 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })
       })]
-    })), dimensions.hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/_jsx(Scrollbar, _extends({
+    })), hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "horizontal"
-    }, getScrollbarHorizontalProps())), dimensions.hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
+    }, getScrollbarHorizontalProps())), hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "vertical"
     }, getScrollbarVerticalProps())), props.children]
   }));

package/components/virtualization/GridVirtualScrollerContent.js

@@ -19,14 +19,23 @@ const useUtilityClasses = (props, overflowedContent) => {
 const VirtualScrollerContentRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScrollerContent',
-  overridesResolver: (props, styles) => styles.virtualScrollerContent
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.virtualScrollerContent, ownerState.overflowedContent && styles['virtualScrollerContent--overflowed']];
+  }
 })({});
 const GridVirtualScrollerContent = forwardRef(function GridVirtualScrollerContent(props, ref) {
   const rootProps = useGridRootProps();
   const overflowedContent = !rootProps.autoHeight && props.style?.minHeight === 'auto';
   const classes = useUtilityClasses(rootProps, overflowedContent);
+  const ownerState = {
+    classes: rootProps.classes,
+    overflowedContent
+  };
   return /*#__PURE__*/_jsx(VirtualScrollerContentRoot, _extends({}, props, {
-    ownerState: rootProps,
+    ownerState: ownerState,
     className: clsx(classes.root, props.className),
     ref: ref
   }));

package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.d.ts

@@ -1,4 +1,4 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
 import { GridPipeProcessorGroup, GridPipeProcessor } from './gridPipeProcessingApi';
-export declare const useGridRegisterPipeProcessor: <PrivateApi extends GridPrivateApiCommon, G extends GridPipeProcessorGroup>(apiRef: RefObject<PrivateApi>, group: G, callback: GridPipeProcessor<G>) => void;
+export declare const useGridRegisterPipeProcessor: <PrivateApi extends GridPrivateApiCommon, G extends GridPipeProcessorGroup>(apiRef: RefObject<PrivateApi>, group: G, callback: GridPipeProcessor<G>, enabled?: boolean) => void;

package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

@@ -1,19 +1,21 @@
 import * as React from 'react';
 import { useFirstRender } from "../../utils/useFirstRender.js";
-export const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
+export const useGridRegisterPipeProcessor = (apiRef, group, callback, enabled = true) => {
   const cleanup = React.useRef(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
     cleanup.current = apiRef.current.registerPipeProcessor(group, id.current, callback);
   }, [apiRef, callback, group]);
   useFirstRender(() => {
-    registerPreProcessor();
+    if (enabled) {
+      registerPreProcessor();
+    }
   });
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
-    } else {
+    } else if (enabled) {
       registerPreProcessor();
     }
     return () => {
@@ -22,5 +24,5 @@ export const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
         cleanup.current = null;
       }
     };
-  }, [registerPreProcessor]);
+  }, [registerPreProcessor, enabled]);
 };

package/hooks/core/useGridStateInitialization.js

@@ -4,7 +4,6 @@ import { useGridApiMethod } from "../utils/index.js";
 import { isFunction } from "../../utils/utils.js";
 export const useGridStateInitialization = apiRef => {
   const controlStateMapRef = React.useRef({});
-  const [, rawForceUpdate] = React.useState();
   const registerControlState = React.useCallback(controlStateItem => {
     controlStateMapRef.current[controlStateItem.stateId] = controlStateItem;
   }, []);
@@ -79,7 +78,9 @@ export const useGridStateInitialization = apiRef => {
       });
     }, reason);
   }, [apiRef]);
-  const forceUpdate = React.useCallback(() => rawForceUpdate(() => apiRef.current.state), [apiRef]);
+  const forceUpdate = React.useCallback(() => {
+    // @deprecated - do nothing
+  }, []);
   const publicStateApi = {
     setState,
     forceUpdate

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -7,7 +7,7 @@ import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 import { GridColumnHeaderItem } from "../../../components/columnHeaders/GridColumnHeaderItem.js";
-import { gridDimensionsSelector } from "../dimensions/index.js";
+import { gridColumnsTotalWidthSelector, gridGroupHeaderHeightSelector, gridHasFillerSelector, gridHeaderHeightSelector, gridVerticalScrollbarWidthSelector } from "../dimensions/gridDimensionsSelectors.js";
 import { gridRenderContextColumnsSelector } from "../virtualization/index.js";
 import { computeOffsetLeft } from "../virtualization/useGridVirtualScroller.js";
 import { GridColumnGroupHeader } from "../../../components/columnHeaders/GridColumnGroupHeader.js";
@@ -46,19 +46,17 @@ export const useGridColumnHeaders = props => {
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const columnGroupsModel = useGridSelector(apiRef, gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
   const offsetLeft = computeOffsetLeft(columnPositions, renderContext, pinnedColumns.left.length);
-  const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
-  React.useEffect(() => {
-    if (apiRef.current.columnHeadersContainerRef.current) {
-      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
-    }
-  }, [apiRef]);
+  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  const gridHasFiller = useGridSelector(apiRef, gridHasFillerSelector);
+  const headerHeight = useGridSelector(apiRef, gridHeaderHeightSelector);
+  const groupHeaderHeight = useGridSelector(apiRef, gridGroupHeaderHeightSelector);
+  const scrollbarWidth = useGridSelector(apiRef, gridVerticalScrollbarWidthSelector);
   const handleColumnResizeStart = React.useCallback(params => setResizeCol(params.field), []);
   const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);
   const handleColumnReorderStart = React.useCallback(params => setDragCol(params.field), []);
@@ -130,8 +128,7 @@ export const useGridColumnHeaders = props => {
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field;
       const open = columnMenuState.open && columnMenuState.field === colDef.field;
       const pinnedPosition = params?.position;
-      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
-      const pinnedOffset = getPinnedCellOffset(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      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;
@@ -142,7 +139,7 @@ export const useGridColumnHeaders = props => {
       columns.push(/*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
-        headerHeight: dimensions.headerHeight,
+        headerHeight: headerHeight,
         isDragging: colDef.field === dragCol,
         colDef: colDef,
         colIndex: columnIndex,
@@ -234,8 +231,7 @@ export const useGridColumnHeaders = props => {
         tabIndex
       };
       const pinnedPosition = params.position;
-      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
-      const pinnedOffset = getPinnedCellOffset(pinnedPosition, headerInfo.width, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, headerInfo.width, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
       columnIndex += columnFields.length;
       let indexInSection = index;
       if (pinnedPosition === PinnedColumnPosition.LEFT) {
@@ -250,7 +246,7 @@ export const useGridColumnHeaders = props => {
         depth: depth,
         isLastColumn: index === visibleColumnGroupHeader.length - 1,
         maxDepth: headerGroupingMaxDepth,
-        height: dimensions.groupHeaderHeight,
+        height: groupHeaderHeight,
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,

package/hooks/features/columnResize/useGridColumnResize.js

@@ -500,7 +500,8 @@ export const useGridColumnResize = (apiRef, props) => {
       if (options.expand) {
         const visibleColumns = state.orderedFields.map(field => state.lookup[field]).filter(c => state.columnVisibilityModel[c.field] !== false);
         const totalWidth = visibleColumns.reduce((total, column) => total + (widthByField[column.field] ?? column.computedWidth ?? column.width), 0);
-        const availableWidth = apiRef.current.getRootDimensions().viewportInnerSize.width;
+        const dimensions = apiRef.current.getRootDimensions();
+        const availableWidth = dimensions.viewportInnerSize.width;
         const remainingWidth = availableWidth - totalWidth;
         if (remainingWidth > 0) {
           const widthPerColumn = remainingWidth / (newColumns.length || 1);

package/hooks/features/columns/gridColumnsSelector.d.ts

@@ -54,11 +54,6 @@ export declare const gridVisiblePinnedColumnDefinitionsSelector: import("../../.
  * @category Visible Columns
  */
 export declare const gridColumnPositionsSelector: import("../../..").OutputSelector<GridStateCommunity, number[]>;
-/**
- * Get the summed width of all the visible columns.
- * @category Visible Columns
- */
-export declare const gridColumnsTotalWidthSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
 /**
  * Get the filterable columns as an array.
  * @category Columns

package/hooks/features/columns/gridColumnsSelector.js

@@ -107,18 +107,6 @@ export const gridColumnPositionsSelector = createSelectorMemoized(gridVisibleCol
   return positions;
 });
 
-/**
- * Get the summed width of all the visible columns.
- * @category Visible Columns
- */
-export const gridColumnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector, (visibleColumns, positions) => {
-  const colCount = visibleColumns.length;
-  if (colCount === 0) {
-    return 0;
-  }
-  return positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth;
-});
-
 /**
  * Get the filterable columns as an array.
  * @category Columns

package/hooks/features/columns/useGridColumns.js

@@ -242,9 +242,13 @@ export function useGridColumns(apiRef, props) {
    */
 
   const prevInnerWidth = React.useRef(null);
-  const handleGridSizeChange = viewportInnerSize => {
-    if (prevInnerWidth.current !== viewportInnerSize.width) {
-      prevInnerWidth.current = viewportInnerSize.width;
+  const handleGridSizeChange = size => {
+    if (prevInnerWidth.current !== size.width) {
+      prevInnerWidth.current = size.width;
+      const hasFlexColumns = gridVisibleColumnDefinitionsSelector(apiRef).some(col => col.flex && col.flex > 0);
+      if (!hasFlexColumns) {
+        return;
+      }
       setGridColumnsState(hydrateColumnsWidth(gridColumnsStateSelector(apiRef.current.state), apiRef.current.getRootDimensions()));
     }
   };

package/hooks/features/dimensions/gridDimensionsSelectors.d.ts

@@ -1,2 +1,18 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 export declare const gridDimensionsSelector: (state: GridStateCommunity) => import("./gridDimensionsApi").GridDimensions;
+/**
+ * Get the summed width of all the visible columns.
+ * @category Visible Columns
+ */
+export declare const gridColumnsTotalWidthSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridRowHeightSelector: (state: GridStateCommunity) => number;
+export declare const gridContentHeightSelector: (state: GridStateCommunity) => number;
+export declare const gridHasScrollXSelector: (state: GridStateCommunity) => boolean;
+export declare const gridHasScrollYSelector: (state: GridStateCommunity) => boolean;
+export declare const gridHasFillerSelector: (state: GridStateCommunity) => boolean;
+export declare const gridHeaderHeightSelector: (state: GridStateCommunity) => number;
+export declare const gridGroupHeaderHeightSelector: (state: GridStateCommunity) => number;
+export declare const gridHeaderFilterHeightSelector: (state: GridStateCommunity) => number;
+export declare const gridVerticalScrollbarWidthSelector: (state: GridStateCommunity) => number;
+export declare const gridHorizontalScrollbarHeightSelector: (state: GridStateCommunity) => number;
+export declare const gridHasBottomFillerSelector: (state: GridStateCommunity) => boolean;

package/hooks/features/dimensions/gridDimensionsSelectors.js

@@ -1 +1,26 @@
-export const gridDimensionsSelector = state => state.dimensions;
+import { createSelector } from "../../../utils/createSelector.js";
+export const gridDimensionsSelector = state => state.dimensions;
+
+/**
+ * Get the summed width of all the visible columns.
+ * @category Visible Columns
+ */
+export const gridColumnsTotalWidthSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.columnsTotalWidth);
+export const gridRowHeightSelector = state => state.dimensions.rowHeight;
+export const gridContentHeightSelector = state => state.dimensions.contentSize.height;
+export const gridHasScrollXSelector = state => state.dimensions.hasScrollX;
+export const gridHasScrollYSelector = state => state.dimensions.hasScrollY;
+export const gridHasFillerSelector = state => state.dimensions.columnsTotalWidth < state.dimensions.viewportOuterSize.width;
+export const gridHeaderHeightSelector = state => state.dimensions.headerHeight;
+export const gridGroupHeaderHeightSelector = state => state.dimensions.groupHeaderHeight;
+export const gridHeaderFilterHeightSelector = state => state.dimensions.headerFilterHeight;
+export const gridVerticalScrollbarWidthSelector = state => state.dimensions.hasScrollY ? state.dimensions.scrollbarSize : 0;
+export const gridHorizontalScrollbarHeightSelector = state => state.dimensions.hasScrollX ? state.dimensions.scrollbarSize : 0;
+export const gridHasBottomFillerSelector = state => {
+  const height = state.dimensions.hasScrollX ? state.dimensions.scrollbarSize : 0;
+  const needsLastRowBorder = state.dimensions.viewportOuterSize.height - state.dimensions.minimumSize.height > 0;
+  if (height === 0 && !needsLastRowBorder) {
+    return false;
+  }
+  return true;
+};

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

@@ -1,3 +1,3 @@
 export type { GridDimensionsState } from './useGridDimensions';
-export * from './gridDimensionsSelectors';
+export { gridDimensionsSelector, gridColumnsTotalWidthSelector } from './gridDimensionsSelectors';
 export type { GridDimensions, GridDimensionsApi } from './gridDimensionsApi';

package/hooks/features/dimensions/index.js

@@ -1,2 +1 @@
-export * from "./gridDimensionsSelectors.js";
-export {};
+export { gridDimensionsSelector, gridColumnsTotalWidthSelector } from "./gridDimensionsSelectors.js";