@mui/x-data-grid 6.1.0 → 6.2.1

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -8,6 +8,7 @@ import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getValueFromValueOptions, isSingleSelectColDef } from './filterPanelUtils';
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const renderSingleSelectOptions = ({
   column: {
     valueOptions,
@@ -33,7 +34,7 @@ const renderSingleSelectOptions = ({
   });
 };
 function GridFilterInputSingleSelect(props) {
-  var _item$value, _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2, _resolvedColumn, _resolvedColumn2, _rootProps$slotProps3, _rootProps$slotProps4;
+  var _item$value, _rootProps$slotProps$, _rootProps$slotProps, _rootProps$slotProps$2, _resolvedColumn, _resolvedColumn2, _rootProps$slotProps2, _rootProps$slotProps3, _rootProps$slotProps4;
   const {
       item,
       applyValue,
@@ -46,10 +47,9 @@ function GridFilterInputSingleSelect(props) {
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState((_item$value = item.value) != null ? _item$value : '');
   const id = useId();
+  const labelId = useId();
   const rootProps = useGridRootProps();
-  const baseSelectProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseSelect) || {};
-  const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
-  const baseSelectOptionProps = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelectOption) || {};
+  const isSelectNative = (_rootProps$slotProps$ = (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : (_rootProps$slotProps$2 = _rootProps$slotProps.baseSelect) == null ? void 0 : _rootProps$slotProps$2.native) != null ? _rootProps$slotProps$ : true;
   let resolvedColumn = null;
   if (item.field) {
     const column = apiRef.current.getColumn(item.field);
@@ -101,33 +101,37 @@ function GridFilterInputSingleSelect(props) {
   if (!isSingleSelectColDef(resolvedColumn)) {
     return null;
   }
-  return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
-    // TODO: use baseSelect slot
-    id: id,
-    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-    value: filterValueState,
-    onChange: onFilterChange,
-    variant: "standard",
-    type: type || 'text',
-    InputLabelProps: {
-      shrink: true
-    },
-    inputRef: focusElementRef,
-    select: true,
-    SelectProps: _extends({
+  const label = apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseInputLabel, {
+      id: labelId,
+      shrink: true,
+      variant: "standard",
+      children: label
+    })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
+      id: id,
+      label: label,
+      labelId: labelId,
+      value: filterValueState,
+      onChange: onFilterChange,
+      variant: "standard",
+      type: type || 'text',
+      inputProps: {
+        ref: focusElementRef,
+        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder')
+      },
       native: isSelectNative
-    }, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect)
-  }, others, (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseTextField, {
-    children: renderSingleSelectOptions({
-      column: resolvedColumn,
-      OptionComponent: rootProps.slots.baseSelectOption,
-      getOptionLabel,
-      getOptionValue,
-      isSelectNative,
-      baseSelectOptionProps
-    })
-  }));
+    }, others, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect, {
+      children: renderSingleSelectOptions({
+        column: resolvedColumn,
+        OptionComponent: rootProps.slots.baseSelectOption,
+        getOptionLabel,
+        getOptionValue,
+        isSelectNative,
+        baseSelectOptionProps: (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseSelectOption
+      })
+    }))]
+  });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/panel/filterPanel/GridFilterPanel.js

@@ -27,6 +27,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,
@@ -93,8 +94,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/hooks/features/dimensions/gridDimensionsApi.d.ts

@@ -43,4 +43,8 @@ export interface GridDimensionsPrivateApi {
      * Forces a recalculation of all dimensions.
      */
     updateGridDimensionsRef: () => void;
+    /**
+     * Computes the size and publishes a `resize` event with the new value.
+     */
+    computeSizeAndPublishResizeEvent: () => void;
 }

package/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,
@@ -114,10 +115,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();
@@ -139,17 +150,45 @@ 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(() => {
+    var _apiRef$current$rootE2, _previousSize$current, _previousSize$current2;
+    const rootEl = (_apiRef$current$rootE2 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE2.current;
+    const mainEl = rootEl == null ? void 0 : 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 = previousSize.current) == null ? void 0 : _previousSize$current.height);
+    const hasWidthChanged = newWidth !== ((_previousSize$current2 = previousSize.current) == null ? void 0 : _previousSize$current2.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;
@@ -166,18 +205,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/hooks/features/export/useGridPrintExport.js

@@ -124,7 +124,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/hooks/features/rowSelection/useGridRowSelection.js

@@ -11,7 +11,7 @@ import { gridExpandedSortedRowIdsSelector } from '../filter/gridFilterSelector';
 import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from '../../../colDef';
 import { GridCellModes } from '../../../models/gridEditRowModel';
 import { isKeyboardEvent, isNavigationKey } from '../../../utils/keyboardUtils';
-import { getVisibleRows, useGridVisibleRows } from '../../utils/useGridVisibleRows';
+import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 import { gridClasses } from '../../../constants/gridClasses';
 const getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
@@ -61,8 +61,6 @@ export const useGridRowSelection = (apiRef, props) => {
     checkboxSelection,
     disableMultipleRowSelection,
     disableRowSelectionOnClick,
-    pagination,
-    paginationMode,
     isRowSelectable: propIsRowSelectable
   } = props;
   const canHaveMultipleSelection = !disableMultipleRowSelection || checkboxSelection;
@@ -381,32 +379,13 @@ export const useGridRowSelection = (apiRef, props) => {
     }
   }, [apiRef, isRowSelectable, isStateControlled, props.rowSelection]);
   React.useEffect(() => {
-    if (!props.rowSelection) {
+    if (!props.rowSelection || isStateControlled) {
       return;
     }
     const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
     if (!canHaveMultipleSelection && currentSelection.length > 1) {
-      const {
-        rows: currentPageRows
-      } = getVisibleRows(apiRef, {
-        pagination,
-        paginationMode
-      });
-      const currentPageRowsLookup = currentPageRows.reduce((acc, {
-        id
-      }) => {
-        acc[id] = true;
-        return acc;
-      }, {});
-      const firstSelectableRow = currentSelection.find(id => {
-        let isSelectable = true;
-        if (isRowSelectable) {
-          isSelectable = isRowSelectable(id);
-        }
-        return isSelectable && currentPageRowsLookup[id]; // Check if the row is in the current page
-      });
-
-      apiRef.current.setRowSelectionModel(firstSelectableRow !== undefined ? [firstSelectableRow] : []);
+      // See https://github.com/mui/mui-x/issues/8455
+      apiRef.current.setRowSelectionModel([]);
     }
-  }, [apiRef, canHaveMultipleSelection, checkboxSelection, disableMultipleRowSelection, isRowSelectable, pagination, paginationMode, props.rowSelection]);
+  }, [apiRef, canHaveMultipleSelection, checkboxSelection, isStateControlled, props.rowSelection]);
 };

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -31,6 +31,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
         availableSpace?: number | null | undefined;
         rows?: GridRowEntry<import("../../../models").GridValidRowModel>[] | undefined;
         rowIndexOffset?: number | undefined;
+        onRowRender?: ((rowId: GridRowId) => void) | undefined;
     }) => JSX.Element[] | null;
     getRootProps: ({ style, ...other }?: {
         style?: {} | undefined;
@@ -125,6 +126,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             breakInside?: import("csstype").Property.BreakInside | undefined;
             captionSide?: import("csstype").Property.CaptionSide | undefined;
             caretColor?: import("csstype").Property.CaretColor | undefined;
+            caretShape?: import("csstype").Property.CaretShape | undefined;
             clear?: import("csstype").Property.Clear | undefined;
             clipPath?: import("csstype").Property.ClipPath | undefined;
             color?: import("csstype").Property.Color | undefined;
@@ -139,6 +141,12 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             columnSpan?: import("csstype").Property.ColumnSpan | undefined;
             columnWidth?: import("csstype").Property.ColumnWidth<string | number> | undefined;
             contain?: import("csstype").Property.Contain | undefined;
+            containIntrinsicBlockSize?: import("csstype").Property.ContainIntrinsicBlockSize<string | number> | undefined;
+            containIntrinsicHeight?: import("csstype").Property.ContainIntrinsicHeight<string | number> | undefined;
+            containIntrinsicInlineSize?: import("csstype").Property.ContainIntrinsicInlineSize<string | number> | undefined;
+            containIntrinsicWidth?: import("csstype").Property.ContainIntrinsicWidth<string | number> | undefined;
+            containerName?: import("csstype").Property.ContainerName | undefined;
+            containerType?: import("csstype").Property.ContainerType | undefined;
             content?: import("csstype").Property.Content | undefined;
             contentVisibility?: import("csstype").Property.ContentVisibility | undefined;
             counterIncrement?: import("csstype").Property.CounterIncrement | undefined;
@@ -160,6 +168,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             fontKerning?: import("csstype").Property.FontKerning | undefined;
             fontLanguageOverride?: import("csstype").Property.FontLanguageOverride | undefined;
             fontOpticalSizing?: import("csstype").Property.FontOpticalSizing | undefined;
+            fontPalette?: import("csstype").Property.FontPalette | undefined;
             fontSize?: import("csstype").Property.FontSize<string | number> | undefined;
             fontSizeAdjust?: import("csstype").Property.FontSizeAdjust | undefined;
             fontSmooth?: import("csstype").Property.FontSmooth<string | number> | undefined;
@@ -170,6 +179,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             fontVariantAlternates?: import("csstype").Property.FontVariantAlternates | undefined;
             fontVariantCaps?: import("csstype").Property.FontVariantCaps | undefined;
             fontVariantEastAsian?: import("csstype").Property.FontVariantEastAsian | undefined;
+            fontVariantEmoji?: import("csstype").Property.FontVariantEmoji | undefined;
             fontVariantLigatures?: import("csstype").Property.FontVariantLigatures | undefined;
             fontVariantNumeric?: import("csstype").Property.FontVariantNumeric | undefined;
             fontVariantPosition?: import("csstype").Property.FontVariantPosition | undefined;
@@ -189,6 +199,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             hangingPunctuation?: import("csstype").Property.HangingPunctuation | undefined;
             height?: import("csstype").Property.Height<string | number> | undefined;
             hyphenateCharacter?: import("csstype").Property.HyphenateCharacter | undefined;
+            hyphenateLimitChars?: import("csstype").Property.HyphenateLimitChars | undefined;
             hyphens?: import("csstype").Property.Hyphens | undefined;
             imageOrientation?: import("csstype").Property.ImageOrientation | undefined;
             imageRendering?: import("csstype").Property.ImageRendering | undefined;
@@ -196,11 +207,8 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             initialLetter?: import("csstype").Property.InitialLetter | undefined;
             inlineSize?: import("csstype").Property.InlineSize<string | number> | undefined;
             inputSecurity?: import("csstype").Property.InputSecurity | undefined;
-            inset?: import("csstype").Property.Inset<string | number> | undefined;
-            insetBlock?: import("csstype").Property.InsetBlock<string | number> | undefined;
             insetBlockEnd?: import("csstype").Property.InsetBlockEnd<string | number> | undefined;
             insetBlockStart?: import("csstype").Property.InsetBlockStart<string | number> | undefined;
-            insetInline?: import("csstype").Property.InsetInline<string | number> | undefined;
             insetInlineEnd?: import("csstype").Property.InsetInlineEnd<string | number> | undefined;
             insetInlineStart?: import("csstype").Property.InsetInlineStart<string | number> | undefined;
             isolation?: import("csstype").Property.Isolation | undefined;
@@ -216,16 +224,15 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             listStyleImage?: import("csstype").Property.ListStyleImage | undefined;
             listStylePosition?: import("csstype").Property.ListStylePosition | undefined;
             listStyleType?: import("csstype").Property.ListStyleType | undefined;
-            marginBlock?: import("csstype").Property.MarginBlock<string | number> | undefined;
             marginBlockEnd?: import("csstype").Property.MarginBlockEnd<string | number> | undefined;
             marginBlockStart?: import("csstype").Property.MarginBlockStart<string | number> | undefined;
             marginBottom?: import("csstype").Property.MarginBottom<string | number> | undefined;
-            marginInline?: import("csstype").Property.MarginInline<string | number> | undefined;
             marginInlineEnd?: import("csstype").Property.MarginInlineEnd<string | number> | undefined;
             marginInlineStart?: import("csstype").Property.MarginInlineStart<string | number> | undefined;
             marginLeft?: import("csstype").Property.MarginLeft<string | number> | undefined;
             marginRight?: import("csstype").Property.MarginRight<string | number> | undefined;
             marginTop?: import("csstype").Property.MarginTop<string | number> | undefined;
+            marginTrim?: import("csstype").Property.MarginTrim | undefined;
             maskBorderMode?: import("csstype").Property.MaskBorderMode | undefined;
             maskBorderOutset?: import("csstype").Property.MaskBorderOutset<string | number> | undefined;
             maskBorderRepeat?: import("csstype").Property.MaskBorderRepeat | undefined;
@@ -262,6 +269,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             offsetAnchor?: import("csstype").Property.OffsetAnchor<string | number> | undefined;
             offsetDistance?: import("csstype").Property.OffsetDistance<string | number> | undefined;
             offsetPath?: import("csstype").Property.OffsetPath | undefined;
+            offsetPosition?: import("csstype").Property.OffsetPosition<string | number> | undefined;
             offsetRotate?: import("csstype").Property.OffsetRotate | undefined;
             offsetRotation?: import("csstype").Property.OffsetRotate | undefined;
             opacity?: import("csstype").Property.Opacity | undefined;
@@ -283,23 +291,21 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             overscrollBehaviorInline?: import("csstype").Property.OverscrollBehaviorInline | undefined;
             overscrollBehaviorX?: import("csstype").Property.OverscrollBehaviorX | undefined;
             overscrollBehaviorY?: import("csstype").Property.OverscrollBehaviorY | undefined;
-            paddingBlock?: import("csstype").Property.PaddingBlock<string | number> | undefined;
             paddingBlockEnd?: import("csstype").Property.PaddingBlockEnd<string | number> | undefined;
             paddingBlockStart?: import("csstype").Property.PaddingBlockStart<string | number> | undefined;
             paddingBottom?: import("csstype").Property.PaddingBottom<string | number> | undefined;
-            paddingInline?: import("csstype").Property.PaddingInline<string | number> | undefined;
             paddingInlineEnd?: import("csstype").Property.PaddingInlineEnd<string | number> | undefined;
             paddingInlineStart?: import("csstype").Property.PaddingInlineStart<string | number> | undefined;
             paddingLeft?: import("csstype").Property.PaddingLeft<string | number> | undefined;
             paddingRight?: import("csstype").Property.PaddingRight<string | number> | undefined;
             paddingTop?: import("csstype").Property.PaddingTop<string | number> | undefined;
+            page?: import("csstype").Property.Page | undefined;
             pageBreakAfter?: import("csstype").Property.PageBreakAfter | undefined;
             pageBreakBefore?: import("csstype").Property.PageBreakBefore | undefined;
             pageBreakInside?: import("csstype").Property.PageBreakInside | undefined;
             paintOrder?: import("csstype").Property.PaintOrder | undefined;
             perspective?: import("csstype").Property.Perspective<string | number> | undefined;
             perspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<string | number> | undefined;
-            placeContent?: import("csstype").Property.PlaceContent | undefined;
             pointerEvents?: import("csstype").Property.PointerEvents | undefined;
             position?: import("csstype").Property.Position | undefined;
             printColorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;
@@ -313,36 +319,31 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             rubyPosition?: import("csstype").Property.RubyPosition | undefined;
             scale?: import("csstype").Property.Scale | undefined;
             scrollBehavior?: import("csstype").Property.ScrollBehavior | undefined;
-            scrollMargin?: import("csstype").Property.ScrollMargin<string | number> | undefined;
-            scrollMarginBlock?: import("csstype").Property.ScrollMarginBlock<string | number> | undefined;
             scrollMarginBlockEnd?: import("csstype").Property.ScrollMarginBlockEnd<string | number> | undefined;
             scrollMarginBlockStart?: import("csstype").Property.ScrollMarginBlockStart<string | number> | undefined;
             scrollMarginBottom?: import("csstype").Property.ScrollMarginBottom<string | number> | undefined;
-            scrollMarginInline?: import("csstype").Property.ScrollMarginInline<string | number> | undefined;
             scrollMarginInlineEnd?: import("csstype").Property.ScrollMarginInlineEnd<string | number> | undefined;
             scrollMarginInlineStart?: import("csstype").Property.ScrollMarginInlineStart<string | number> | undefined;
             scrollMarginLeft?: import("csstype").Property.ScrollMarginLeft<string | number> | undefined;
             scrollMarginRight?: import("csstype").Property.ScrollMarginRight<string | number> | undefined;
             scrollMarginTop?: import("csstype").Property.ScrollMarginTop<string | number> | undefined;
-            scrollPadding?: import("csstype").Property.ScrollPadding<string | number> | undefined;
-            scrollPaddingBlock?: import("csstype").Property.ScrollPaddingBlock<string | number> | undefined;
             scrollPaddingBlockEnd?: import("csstype").Property.ScrollPaddingBlockEnd<string | number> | undefined;
             scrollPaddingBlockStart?: import("csstype").Property.ScrollPaddingBlockStart<string | number> | undefined;
             scrollPaddingBottom?: import("csstype").Property.ScrollPaddingBottom<string | number> | undefined;
-            scrollPaddingInline?: import("csstype").Property.ScrollPaddingInline<string | number> | undefined;
             scrollPaddingInlineEnd?: import("csstype").Property.ScrollPaddingInlineEnd<string | number> | undefined;
             scrollPaddingInlineStart?: import("csstype").Property.ScrollPaddingInlineStart<string | number> | undefined;
             scrollPaddingLeft?: import("csstype").Property.ScrollPaddingLeft<string | number> | undefined;
             scrollPaddingRight?: import("csstype").Property.ScrollPaddingRight<string | number> | undefined;
             scrollPaddingTop?: import("csstype").Property.ScrollPaddingTop<string | number> | undefined;
             scrollSnapAlign?: import("csstype").Property.ScrollSnapAlign | undefined;
-            scrollSnapMargin?: import("csstype").Property.ScrollMargin<string | number> | undefined;
             scrollSnapMarginBottom?: import("csstype").Property.ScrollMarginBottom<string | number> | undefined;
             scrollSnapMarginLeft?: import("csstype").Property.ScrollMarginLeft<string | number> | undefined;
             scrollSnapMarginRight?: import("csstype").Property.ScrollMarginRight<string | number> | undefined;
             scrollSnapMarginTop?: import("csstype").Property.ScrollMarginTop<string | number> | undefined;
             scrollSnapStop?: import("csstype").Property.ScrollSnapStop | undefined;
             scrollSnapType?: import("csstype").Property.ScrollSnapType | undefined;
+            scrollTimelineAxis?: import("csstype").Property.ScrollTimelineAxis | undefined;
+            scrollTimelineName?: import("csstype").Property.ScrollTimelineName | undefined;
             scrollbarColor?: import("csstype").Property.ScrollbarColor | undefined;
             scrollbarGutter?: import("csstype").Property.ScrollbarGutter | undefined;
             scrollbarWidth?: import("csstype").Property.ScrollbarWidth | undefined;
@@ -387,6 +388,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             unicodeBidi?: import("csstype").Property.UnicodeBidi | undefined;
             userSelect?: import("csstype").Property.UserSelect | undefined;
             verticalAlign?: import("csstype").Property.VerticalAlign<string | number> | undefined;
+            viewTransitionName?: import("csstype").Property.ViewTransitionName | undefined;
             visibility?: import("csstype").Property.Visibility | undefined;
             whiteSpace?: import("csstype").Property.WhiteSpace | undefined;
             widows?: import("csstype").Property.Widows | undefined;
@@ -418,8 +420,11 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             borderStyle?: import("csstype").Property.BorderStyle | undefined;
             borderTop?: import("csstype").Property.BorderTop<string | number> | undefined;
             borderWidth?: import("csstype").Property.BorderWidth<string | number> | undefined;
+            caret?: import("csstype").Property.Caret | undefined;
             columnRule?: import("csstype").Property.ColumnRule<string | number> | undefined;
             columns?: import("csstype").Property.Columns<string | number> | undefined;
+            containIntrinsicSize?: import("csstype").Property.ContainIntrinsicSize<string | number> | undefined;
+            container?: import("csstype").Property.Container | undefined;
             flex?: import("csstype").Property.Flex<string | number> | undefined;
             flexFlow?: import("csstype").Property.FlexFlow | undefined;
             font?: import("csstype").Property.Font | undefined;
@@ -429,9 +434,14 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             gridColumn?: import("csstype").Property.GridColumn | undefined;
             gridRow?: import("csstype").Property.GridRow | undefined;
             gridTemplate?: import("csstype").Property.GridTemplate | undefined;
+            inset?: import("csstype").Property.Inset<string | number> | undefined;
+            insetBlock?: import("csstype").Property.InsetBlock<string | number> | undefined;
+            insetInline?: import("csstype").Property.InsetInline<string | number> | undefined;
             lineClamp?: import("csstype").Property.LineClamp | undefined;
             listStyle?: import("csstype").Property.ListStyle | undefined;
             margin?: import("csstype").Property.Margin<string | number> | undefined;
+            marginBlock?: import("csstype").Property.MarginBlock<string | number> | undefined;
+            marginInline?: import("csstype").Property.MarginInline<string | number> | undefined;
             mask?: import("csstype").Property.Mask<string | number> | undefined;
             maskBorder?: import("csstype").Property.MaskBorder | undefined;
             motion?: import("csstype").Property.Offset<string | number> | undefined;
@@ -440,8 +450,19 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             overflow?: import("csstype").Property.Overflow | undefined;
             overscrollBehavior?: import("csstype").Property.OverscrollBehavior | undefined;
             padding?: import("csstype").Property.Padding<string | number> | undefined;
+            paddingBlock?: import("csstype").Property.PaddingBlock<string | number> | undefined;
+            paddingInline?: import("csstype").Property.PaddingInline<string | number> | undefined;
+            placeContent?: import("csstype").Property.PlaceContent | undefined;
             placeItems?: import("csstype").Property.PlaceItems | undefined;
             placeSelf?: import("csstype").Property.PlaceSelf | undefined;
+            scrollMargin?: import("csstype").Property.ScrollMargin<string | number> | undefined;
+            scrollMarginBlock?: import("csstype").Property.ScrollMarginBlock<string | number> | undefined;
+            scrollMarginInline?: import("csstype").Property.ScrollMarginInline<string | number> | undefined;
+            scrollPadding?: import("csstype").Property.ScrollPadding<string | number> | undefined;
+            scrollPaddingBlock?: import("csstype").Property.ScrollPaddingBlock<string | number> | undefined;
+            scrollPaddingInline?: import("csstype").Property.ScrollPaddingInline<string | number> | undefined;
+            scrollSnapMargin?: import("csstype").Property.ScrollMargin<string | number> | undefined;
+            scrollTimeline?: import("csstype").Property.ScrollTimeline | undefined;
             textDecoration?: import("csstype").Property.TextDecoration<string | number> | undefined;
             textEmphasis?: import("csstype").Property.TextEmphasis | undefined;
             transition?: import("csstype").Property.Transition<string & {}> | undefined;
@@ -455,6 +476,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             MozAnimationTimingFunction?: import("csstype").Property.AnimationTimingFunction | undefined;
             MozAppearance?: import("csstype").Property.MozAppearance | undefined;
             MozBackfaceVisibility?: import("csstype").Property.BackfaceVisibility | undefined;
+            MozBinding?: import("csstype").Property.MozBinding | undefined;
             MozBorderBottomColors?: import("csstype").Property.MozBorderBottomColors | undefined;
             MozBorderEndColor?: import("csstype").Property.BorderInlineEndColor | undefined;
             MozBorderEndStyle?: import("csstype").Property.BorderInlineEndStyle | undefined;
@@ -735,7 +757,6 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             MozBackgroundInlinePolicy?: import("csstype").Property.BoxDecorationBreak | undefined;
             MozBackgroundOrigin?: import("csstype").Property.BackgroundOrigin | undefined;
             MozBackgroundSize?: import("csstype").Property.BackgroundSize<string | number> | undefined;
-            MozBinding?: import("csstype").Property.MozBinding | undefined;
             MozBorderRadius?: import("csstype").Property.BorderRadius<string | number> | undefined;
             MozBorderRadiusBottomleft?: import("csstype").Property.BorderBottomLeftRadius<string | number> | undefined;
             MozBorderRadiusBottomright?: import("csstype").Property.BorderBottomRightRadius<string | number> | undefined;

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -176,11 +176,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 => {
@@ -307,6 +309,7 @@ export const useGridVirtualScroller = props => {
   }) => {
     var _rootProps$slotProps;
     const {
+      onRowRender,
       renderContext: nextRenderContext,
       minFirstColumn = renderZoneMinColumnIndex,
       maxLastColumn = renderZoneMaxColumnIndex,
@@ -391,6 +394,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/index.js

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

package/joy/index.d.ts

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

package/joy/index.js

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

package/joy/joySlots.d.ts

@@ -0,0 +1,4 @@
+import type { UncapitalizeObjectKeys } from '../internals/utils';
+import type { GridSlotsComponent } from '../models';
+declare const joySlots: UncapitalizeObjectKeys<Partial<GridSlotsComponent>>;
+export default joySlots;