@mui/x-data-grid 6.2.0 → 6.3.0

package/modern/components/base/GridBody.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { GridMainContainer } from '../containers/GridMainContainer';
-import { GridAutoSizer } from '../GridAutoSizer';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridColumnPositionsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
 import { gridFilterActiveItemsLookupSelector } from '../../hooks/features/filter/gridFilterSelector';
@@ -17,12 +17,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function GridBody(props) {
   const {
-    children,
     VirtualScrollerComponent,
     ColumnHeadersProps
   } = props;
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
+  const rootRef = React.useRef(null);
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
   const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
@@ -39,6 +39,31 @@ function GridBody(props) {
   const columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
   const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
   const [isVirtualizationDisabled, setIsVirtualizationDisabled] = React.useState(rootProps.disableVirtualization);
+  useEnhancedEffect(() => {
+    apiRef.current.computeSizeAndPublishResizeEvent();
+    const elementToObserve = rootRef.current;
+    if (typeof ResizeObserver === 'undefined') {
+      return () => {};
+    }
+    let animationFrame;
+    const observer = new ResizeObserver(() => {
+      // See https://github.com/mui/mui-x/issues/8733
+      animationFrame = window.requestAnimationFrame(() => {
+        apiRef.current.computeSizeAndPublishResizeEvent();
+      });
+    });
+    if (elementToObserve) {
+      observer.observe(elementToObserve);
+    }
+    return () => {
+      if (animationFrame) {
+        window.cancelAnimationFrame(animationFrame);
+      }
+      if (elementToObserve) {
+        observer.unobserve(elementToObserve);
+      }
+    };
+  }, [apiRef]);
   const disableVirtualization = React.useCallback(() => {
     setIsVirtualizationDisabled(true);
   }, []);
@@ -65,10 +90,9 @@ function GridBody(props) {
     columnHeadersElementRef: columnHeadersRef,
     virtualScrollerRef
   });
-  const handleResize = React.useCallback(size => {
-    apiRef.current.publishEvent('resize', size);
-  }, [apiRef]);
+  const hasDimensions = !!apiRef.current.getRootDimensions();
   return /*#__PURE__*/_jsxs(GridMainContainer, {
+    ref: rootRef,
     children: [/*#__PURE__*/_jsx(rootProps.slots.columnHeaders, _extends({
       ref: columnsContainerRef,
       innerRef: columnHeadersRef,
@@ -86,15 +110,16 @@ function GridBody(props) {
       columnVisibility: columnVisibility,
       columnGroupsHeaderStructure: columnGroupsHeaderStructure,
       hasOtherElementInTabSequence: hasOtherElementInTabSequence
-    }, ColumnHeadersProps)), /*#__PURE__*/_jsx(GridAutoSizer, {
-      nonce: rootProps.nonce,
-      disableHeight: rootProps.autoHeight,
-      onResize: handleResize,
-      children: /*#__PURE__*/_jsx(VirtualScrollerComponent, {
-        ref: virtualScrollerRef,
-        disableVirtualization: isVirtualizationDisabled
-      })
-    }), children]
+    }, ColumnHeadersProps)), hasDimensions && /*#__PURE__*/_jsx(VirtualScrollerComponent
+    // The content is only rendered after dimensions are computed because
+    // the lazy-loading hook is listening to `renderedRowsIntervalChange`,
+    // but only does something if the dimensions are also available.
+    // If this event is published while dimensions haven't been computed,
+    // the `onFetchRows` prop won't be called during mount.
+    , {
+      ref: virtualScrollerRef,
+      disableVirtualization: isVirtualizationDisabled
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
@@ -102,7 +127,6 @@ process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  children: PropTypes.node,
   ColumnHeadersProps: PropTypes.object,
   VirtualScrollerComponent: PropTypes.elementType.isRequired
 } : void 0;

package/modern/components/cell/GridActionsCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "focusElementRef"];
+const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuList from '@mui/material/MenuList';
@@ -188,6 +188,7 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  api: PropTypes.object,
   /**
    * The mode of the cell.
    */
@@ -210,6 +211,9 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
       focus: PropTypes.func.isRequired
     })
   })]),
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
   formattedValue: PropTypes.any,
   /**
    * If true, the cell is the active element.
@@ -236,6 +240,10 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
    * the tabIndex value.
    */
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
   value: PropTypes.any
 } : void 0;
 export { GridActionsCell };

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -35,7 +35,7 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
   };
   const classes = useUtilityClasses(ownerState);
   const checkboxElement = React.useRef(null);
-  const rippleRef = React.useRef();
+  const rippleRef = React.useRef(null);
   const handleRef = useForkRef(checkboxElement, ref);
   const element = apiRef.current.getCellElement(id, field);
   const handleChange = event => {

package/modern/components/containers/GridMainContainer.js

@@ -24,12 +24,13 @@ const GridMainContainerRoot = styled('div', {
   flexDirection: 'column',
   overflow: 'hidden'
 }));
-export function GridMainContainer(props) {
+export const GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridMainContainerRoot, {
+    ref: ref,
     className: classes.root,
     ownerState: rootProps,
     children: props.children
   });
-}
+});

package/modern/components/containers/GridRoot.js

@@ -54,11 +54,6 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   useEnhancedEffect(() => {
     setMountedState(true);
   }, []);
-  useEnhancedEffect(() => {
-    if (mountedState) {
-      apiRef.current.updateGridDimensionsRef();
-    }
-  }, [apiRef, mountedState]);
   if (!mountedState) {
     return null;
   }

package/modern/components/containers/GridRootStyles.js

@@ -204,7 +204,9 @@ export const GridRootStyles = styled('div', {
       minWidth: 0,
       flex: 1,
       whiteSpace: 'nowrap',
-      overflow: 'hidden'
+      overflow: 'hidden',
+      // to anchor the aggregation label
+      position: 'relative'
     },
     [`& .${gridClasses.columnHeaderTitleContainerContent}`]: {
       overflow: 'hidden',

package/modern/components/index.js

@@ -8,7 +8,6 @@ export * from './menu';
 export * from './panel';
 export * from './toolbar';
 export * from './GridApiContext';
-export * from './GridAutoSizer';
 export * from './GridFooter';
 export * from './GridHeader';
 export * from './GridLoadingOverlay';

package/modern/components/panel/GridColumnsPanel.js

@@ -94,8 +94,9 @@ function GridColumnsPanel(props) {
   const toggleAllColumns = React.useCallback(isVisible => {
     const currentModel = gridColumnVisibilityModelSelector(apiRef);
     const newModel = _extends({}, currentModel);
+    const togglableColumns = getTogglableColumns ? getTogglableColumns(columns) : null;
     columns.forEach(col => {
-      if (col.hideable) {
+      if (col.hideable && (togglableColumns == null || togglableColumns.includes(col.field))) {
         if (isVisible) {
           // delete the key from the model instead of setting it to `true`
           delete newModel[col.field];
@@ -105,7 +106,7 @@ function GridColumnsPanel(props) {
       }
     });
     return apiRef.current.setColumnVisibilityModel(newModel);
-  }, [apiRef, columns]);
+  }, [apiRef, columns, getTogglableColumns]);
   const handleSearchValueChange = React.useCallback(event => {
     setSearchValue(event.target.value);
   }, []);

package/modern/components/panel/GridPanel.js

@@ -115,6 +115,7 @@ process.env.NODE_ENV !== "production" ? GridPanel.propTypes = {
   /**
    * If `true`, the component is shown.
    */
-  open: PropTypes.bool.isRequired
+  open: PropTypes.bool.isRequired,
+  ownerState: PropTypes.object
 } : void 0;
 export { GridPanel };

package/modern/components/panel/filterPanel/GridFilterPanel.js

@@ -26,6 +26,7 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
   const filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
   const lastFilterRef = React.useRef(null);
+  const placeholderFilter = React.useRef(null);
   const {
       logicOperators = [GridLogicOperator.And, GridLogicOperator.Or],
       columnsSort,
@@ -89,8 +90,10 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
     if (filterModel.items.length) {
       return filterModel.items;
     }
-    const defaultFilter = getDefaultFilter();
-    return defaultFilter ? [defaultFilter] : [];
+    if (!placeholderFilter.current) {
+      placeholderFilter.current = getDefaultFilter();
+    }
+    return placeholderFilter.current ? [placeholderFilter.current] : [];
   }, [filterModel.items, getDefaultFilter]);
   const hasMultipleFilters = items.length > 1;
   const addNewFilter = () => {

package/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/modern/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -7,10 +7,7 @@ import { gridColumnGroupsLookupSelector, gridColumnGroupsUnwrappedModelSelector
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { getColumnGroupsHeaderStructure, unwrapGroupingColumnModel } from './gridColumnGroupsUtils';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { gridColumnFieldsSelector,
-// GridColumnsState,
-gridVisibleColumnFieldsSelector } from '../columns';
-import { useGridSelector } from '../../utils/useGridSelector';
+import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from '../columns';
 const createGroupLookup = columnGroupingModel => {
   let groupLookup = {};
   columnGroupingModel.forEach(node => {
@@ -94,18 +91,14 @@ export const useGridColumnGrouping = (apiRef, props) => {
       });
     });
   }, [apiRef, props.columnGroupingModel]);
-  useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
-  const columnFields = useGridSelector(apiRef, gridColumnFieldsSelector);
-  const visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
-  /**
-   * EFFECTS
-   */
-  React.useEffect(() => {
+  const updateColumnGroupingState = React.useCallback(columnGroupingModel => {
     if (!props.experimentalFeatures?.columnGrouping) {
       return;
     }
-    const groupLookup = createGroupLookup(props.columnGroupingModel ?? []);
-    const unwrappedGroupingModel = unwrapGroupingColumnModel(props.columnGroupingModel ?? []);
+    const columnFields = gridColumnFieldsSelector(apiRef);
+    const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
+    const groupLookup = createGroupLookup(columnGroupingModel ?? []);
+    const unwrappedGroupingModel = unwrapGroupingColumnModel(columnGroupingModel ?? []);
     const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel);
     const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => unwrappedGroupingModel[field]?.length ?? 0));
     apiRef.current.setState(state => {
@@ -118,5 +111,19 @@ export const useGridColumnGrouping = (apiRef, props) => {
         }
       });
     });
-  }, [apiRef, columnFields, visibleColumnFields, props.columnGroupingModel, props.experimentalFeatures?.columnGrouping]);
+  }, [apiRef, props.experimentalFeatures?.columnGrouping]);
+  useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
+  useGridApiEventHandler(apiRef, 'columnsChange', () => {
+    updateColumnGroupingState(props.columnGroupingModel);
+  });
+  useGridApiEventHandler(apiRef, 'columnVisibilityModelChange', () => {
+    updateColumnGroupingState(props.columnGroupingModel);
+  });
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    updateColumnGroupingState(props.columnGroupingModel);
+  }, [updateColumnGroupingState, props.columnGroupingModel]);
 };

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { unstable_debounce as debounce, unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { unstable_debounce as debounce, unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerWindow as ownerWindow } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -10,6 +10,7 @@ import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
 import { getTotalHeaderHeight } from '../columns/gridColumnsUtils';
+import { gridClasses } from '../../../constants/gridClasses';
 const isTestEnvironment = process.env.NODE_ENV === 'test';
 const hasScroll = ({
   content,
@@ -113,10 +114,20 @@ export function useGridDimensions(apiRef, props) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newFullDimensions.viewportInnerSize);
     }
   }, [apiRef, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, totalHeaderHeight]);
+  const [savedSize, setSavedSize] = React.useState();
+  const debouncedSetSavedSize = React.useMemo(() => debounce(setSavedSize, 60), []);
+  const previousSize = React.useRef();
+  useEnhancedEffect(() => {
+    if (savedSize) {
+      updateGridDimensionsRef();
+      apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
+    }
+  }, [apiRef, savedSize, updateGridDimensionsRef]);
+
+  // This is the function called by apiRef.current.resize()
   const resize = React.useCallback(() => {
-    updateGridDimensionsRef();
-    apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
-  }, [apiRef, updateGridDimensionsRef]);
+    apiRef.current.computeSizeAndPublishResizeEvent();
+  }, [apiRef]);
   const getRootDimensions = React.useCallback(() => fullDimensionsRef.current, []);
   const getViewportPageSize = React.useCallback(() => {
     const dimensions = apiRef.current.getRootDimensions();
@@ -138,17 +149,44 @@ export function useGridDimensions(apiRef, props) {
     const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
   }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
+  const computeSizeAndPublishResizeEvent = React.useCallback(() => {
+    const rootEl = apiRef.current.rootElementRef?.current;
+    const mainEl = rootEl?.querySelector(`.${gridClasses.main}`);
+    if (!mainEl) {
+      return;
+    }
+    const height = mainEl.offsetHeight || 0;
+    const width = mainEl.offsetWidth || 0;
+    const win = ownerWindow(mainEl);
+    const computedStyle = win.getComputedStyle(mainEl);
+    const paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;
+    const paddingRight = parseInt(computedStyle.paddingRight, 10) || 0;
+    const paddingTop = parseInt(computedStyle.paddingTop, 10) || 0;
+    const paddingBottom = parseInt(computedStyle.paddingBottom, 10) || 0;
+    const newHeight = height - paddingTop - paddingBottom;
+    const newWidth = width - paddingLeft - paddingRight;
+    const hasHeightChanged = newHeight !== previousSize.current?.height;
+    const hasWidthChanged = newWidth !== previousSize.current?.width;
+    if (!previousSize.current || hasHeightChanged || hasWidthChanged) {
+      const size = {
+        width: newWidth,
+        height: newHeight
+      };
+      apiRef.current.publishEvent('resize', size);
+      previousSize.current = size;
+    }
+  }, [apiRef]);
   const dimensionsApi = {
     resize,
     getRootDimensions
   };
   const dimensionsPrivateApi = {
     getViewportPageSize,
-    updateGridDimensionsRef
+    updateGridDimensionsRef,
+    computeSizeAndPublishResizeEvent
   };
   useGridApiMethod(apiRef, dimensionsApi, 'public');
   useGridApiMethod(apiRef, dimensionsPrivateApi, 'private');
-  const debounceResize = React.useMemo(() => debounce(resize, 60), [resize]);
   const isFirstSizing = React.useRef(true);
   const handleResize = React.useCallback(size => {
     rootDimensionsRef.current = size;
@@ -165,18 +203,18 @@ export function useGridDimensions(apiRef, props) {
     }
     if (isTestEnvironment) {
       // We don't need to debounce the resize for tests.
-      resize();
+      setSavedSize(size);
       isFirstSizing.current = false;
       return;
     }
     if (isFirstSizing.current) {
       // We want to initialize the grid dimensions as soon as possible to avoid flickering
-      resize();
+      setSavedSize(size);
       isFirstSizing.current = false;
       return;
     }
-    debounceResize();
-  }, [props.autoHeight, debounceResize, logger, resize]);
+    debouncedSetSavedSize(size);
+  }, [props.autoHeight, debouncedSetSavedSize, logger]);
   useEnhancedEffect(() => updateGridDimensionsRef(), [updateGridDimensionsRef]);
   useGridApiOptionHandler(apiRef, 'sortedRowsSet', updateGridDimensionsRef);
   useGridApiOptionHandler(apiRef, 'paginationModelChange', updateGridDimensionsRef);

package/modern/hooks/features/export/useGridPrintExport.js

@@ -121,7 +121,9 @@ export const useGridPrintExport = (apiRef, props) => {
       printDoc.body.classList.add(...normalizeOptions.bodyClassName.split(' '));
     }
     if (normalizeOptions.copyStyles) {
-      const headStyleElements = doc.current.querySelectorAll("style, link[rel='stylesheet']");
+      const rootCandidate = gridRootElement.getRootNode();
+      const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc.current;
+      const headStyleElements = root.querySelectorAll("style, link[rel='stylesheet']");
       for (let i = 0; i < headStyleElements.length; i += 1) {
         const node = headStyleElements[i];
         if (node.tagName === 'STYLE') {

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -174,11 +174,13 @@ export const useGridVirtualScroller = props => {
       height: rootRef.current.clientHeight
     });
   }, [rowsMeta.currentPageTotalHeight]);
-  const handleResize = React.useCallback(params => {
-    setContainerDimensions({
-      width: params.width,
-      height: params.height
-    });
+  const handleResize = React.useCallback(() => {
+    if (rootRef.current) {
+      setContainerDimensions({
+        width: rootRef.current.clientWidth,
+        height: rootRef.current.clientHeight
+      });
+    }
   }, []);
   useGridApiEventHandler(apiRef, 'debouncedResize', handleResize);
   const updateRenderZonePosition = React.useCallback(nextRenderContext => {
@@ -304,6 +306,7 @@ export const useGridVirtualScroller = props => {
     renderContext
   }) => {
     const {
+      onRowRender,
       renderContext: nextRenderContext,
       minFirstColumn = renderZoneMinColumnIndex,
       maxLastColumn = renderZoneMaxColumnIndex,
@@ -387,6 +390,9 @@ export const useGridVirtualScroller = props => {
       } else {
         isSelected = apiRef.current.isRowSelectable(id);
       }
+      if (onRowRender) {
+        onRowRender(id);
+      }
       const focusedCell = cellFocus !== null && cellFocus.id === id ? cellFocus.field : null;
       let tabbableCell = null;
       if (cellTabIndex !== null && cellTabIndex.id === id) {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.2.0
+ * @mui/x-data-grid v6.3.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/joy/index.js

@@ -0,0 +1,2 @@
+import joySlots from './joySlots';
+export { joySlots as unstable_joySlots };