@mui/x-data-grid 6.1.0 → 6.2.1

package/joy/joySlots.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"];
+import * as React from 'react';
+import JoyCheckbox from '@mui/joy/Checkbox';
+import JoyInput from '@mui/joy/Input';
+import JoyFormControl from '@mui/joy/FormControl';
+import JoyFormLabel from '@mui/joy/FormLabel';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      inputProps,
+      onChange,
+      checked,
+      inputRef
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(JoyCheckbox, _extends({}, props, {
+    slotProps: {
+      input: _extends({}, inputProps, {
+        ref: inputRef
+      })
+    },
+    ref: ref,
+    checked: checked,
+    onChange: onChange
+  }));
+});
+const TextField = /*#__PURE__*/React.forwardRef(({
+  onChange,
+  label,
+  placeholder,
+  value,
+  inputRef,
+  type
+}, ref) => {
+  return /*#__PURE__*/_jsxs(JoyFormControl, {
+    ref: ref,
+    children: [/*#__PURE__*/_jsx(JoyFormLabel, {
+      sx: {
+        fontSize: 12
+      },
+      children: label
+    }), /*#__PURE__*/_jsx(JoyInput, {
+      type: type,
+      value: value,
+      onChange: onChange,
+      placeholder: placeholder,
+      size: "sm",
+      slotProps: {
+        input: {
+          ref: inputRef
+        }
+      }
+    })]
+  });
+});
+const joySlots = {
+  baseCheckbox: Checkbox,
+  baseTextField: TextField
+  // BaseFormControl: MUIFormControl,
+  // BaseSelect: MUISelect,
+  // BaseSwitch: MUISwitch,
+  // BaseButton: MUIButton,
+  // BaseIconButton: MUIIconButton,
+  // BaseTooltip: MUITooltip,
+  // BasePopper: MUIPopper,
+};
+
+export default joySlots;

package/joy/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/joy/index.js",
+  "types": "./index.d.ts"
+}

package/legacy/components/GridHeader.js

@@ -3,12 +3,10 @@ import * as React from 'react';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var GridHeader = /*#__PURE__*/React.forwardRef(function GridHeader(props, ref) {
+export function GridHeader() {
   var _rootProps$slotProps, _rootProps$slotProps2;
   var rootProps = useGridRootProps();
-  return /*#__PURE__*/_jsxs("div", _extends({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(rootProps.slots.preferencesPanel, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.preferencesPanel)), rootProps.slots.toolbar && /*#__PURE__*/_jsx(rootProps.slots.toolbar, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.toolbar))]
-  }));
-});
+  });
+}

package/legacy/components/base/GridBody.js

@@ -2,10 +2,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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,11 +17,11 @@ import { gridColumnMenuSelector } from '../../hooks/features/columnMenu/columnMe
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function GridBody(props) {
-  var children = props.children,
-    VirtualScrollerComponent = props.VirtualScrollerComponent,
+  var VirtualScrollerComponent = props.VirtualScrollerComponent,
     ColumnHeadersProps = props.ColumnHeadersProps;
   var apiRef = useGridPrivateApiContext();
   var rootProps = useGridRootProps();
+  var rootRef = React.useRef(null);
   var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   var filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
   var sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
@@ -41,6 +41,24 @@ function GridBody(props) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isVirtualizationDisabled = _React$useState2[0],
     setIsVirtualizationDisabled = _React$useState2[1];
+  useEnhancedEffect(function () {
+    apiRef.current.computeSizeAndPublishResizeEvent();
+    var elementToObserve = rootRef.current;
+    if (typeof ResizeObserver === 'undefined') {
+      return function () {};
+    }
+    var observer = new ResizeObserver(function () {
+      apiRef.current.computeSizeAndPublishResizeEvent();
+    });
+    if (elementToObserve) {
+      observer.observe(elementToObserve);
+    }
+    return function () {
+      if (elementToObserve) {
+        observer.unobserve(elementToObserve);
+      }
+    };
+  }, [apiRef]);
   var disableVirtualization = React.useCallback(function () {
     setIsVirtualizationDisabled(true);
   }, []);
@@ -67,10 +85,9 @@ function GridBody(props) {
     columnHeadersElementRef: columnHeadersRef,
     virtualScrollerRef: virtualScrollerRef
   });
-  var handleResize = React.useCallback(function (size) {
-    apiRef.current.publishEvent('resize', size);
-  }, [apiRef]);
+  var hasDimensions = !!apiRef.current.getRootDimensions();
   return /*#__PURE__*/_jsxs(GridMainContainer, {
+    ref: rootRef,
     children: [/*#__PURE__*/_jsx(rootProps.slots.columnHeaders, _extends({
       ref: columnsContainerRef,
       innerRef: columnHeadersRef,
@@ -88,15 +105,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 = {
@@ -104,7 +122,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/legacy/components/columnSelection/GridCellCheckboxRenderer.js

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

package/legacy/components/containers/GridMainContainer.js

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

package/legacy/components/containers/GridRoot.js

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

package/legacy/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/legacy/components/panel/GridColumnsPanel.js

@@ -108,8 +108,9 @@ function GridColumnsPanel(props) {
   var toggleAllColumns = React.useCallback(function (isVisible) {
     var currentModel = gridColumnVisibilityModelSelector(apiRef);
     var newModel = _extends({}, currentModel);
+    var togglableColumns = getTogglableColumns ? getTogglableColumns(columns) : null;
     columns.forEach(function (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];
@@ -119,7 +120,7 @@ function GridColumnsPanel(props) {
       }
     });
     return apiRef.current.setColumnVisibilityModel(newModel);
-  }, [apiRef, columns]);
+  }, [apiRef, columns, getTogglableColumns]);
   var handleSearchValueChange = React.useCallback(function (event) {
     setSearchValue(event.target.value);
   }, []);

package/legacy/components/panel/GridPanel.js

@@ -132,6 +132,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/legacy/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -3,11 +3,12 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["item", "applyValue", "apiRef", "focusElementRef"];
 import * as React from 'react';
+import { unstable_useId as useId } from '@mui/utils';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function GridFilterInputBoolean(props) {
-  var _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2, _rootProps$slotProps3, _rootProps$slotProps4;
+  var _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2, _rootProps$slotProps3;
   var item = props.item,
     applyValue = props.applyValue,
     apiRef = props.apiRef,
@@ -18,6 +19,8 @@ export function GridFilterInputBoolean(props) {
     filterValueState = _React$useState2[0],
     setFilterValueState = _React$useState2[1];
   var rootProps = useGridRootProps();
+  var labelId = useId();
+  var selectId = useId();
   var baseSelectProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseSelect) || {};
   var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   var baseSelectOptionProps = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelectOption) || {};
@@ -31,34 +34,39 @@ export function GridFilterInputBoolean(props) {
   React.useEffect(function () {
     setFilterValueState(item.value || '');
   }, [item.value]);
-  return /*#__PURE__*/_jsxs(rootProps.slots.baseTextField, _extends({
-    // TODO: use baseSelect slot
-    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-    value: filterValueState,
-    onChange: onFilterChange,
-    select: true,
-    variant: "standard",
-    SelectProps: _extends({
+  var label = apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseInputLabel, {
+      id: labelId,
+      shrink: true,
+      variant: "standard",
+      children: label
+    })), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, _extends({
+      labelId: labelId,
+      id: selectId,
+      label: label,
+      value: filterValueState,
+      onChange: onFilterChange,
+      variant: "standard",
       native: isSelectNative,
-      displayEmpty: true
-    }, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect),
-    InputLabelProps: {
-      shrink: true
-    },
-    inputRef: focusElementRef
-  }, others, (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseTextField, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-      native: isSelectNative,
-      value: "",
-      children: apiRef.current.getLocaleText('filterValueAny')
-    })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-      native: isSelectNative,
-      value: "true",
-      children: apiRef.current.getLocaleText('filterValueTrue')
-    })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-      native: isSelectNative,
-      value: "false",
-      children: apiRef.current.getLocaleText('filterValueFalse')
+      displayEmpty: true,
+      inputProps: {
+        ref: focusElementRef
+      }
+    }, others, baseSelectProps, {
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+        native: isSelectNative,
+        value: "",
+        children: apiRef.current.getLocaleText('filterValueAny')
+      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+        native: isSelectNative,
+        value: "true",
+        children: apiRef.current.getLocaleText('filterValueTrue')
+      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+        native: isSelectNative,
+        value: "false",
+        children: apiRef.current.getLocaleText('filterValueFalse')
+      }))]
     }))]
-  }));
+  });
 }

package/legacy/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -10,6 +10,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";
 var renderSingleSelectOptions = function renderSingleSelectOptions(_ref) {
   var _ref$column = _ref.column,
     valueOptions = _ref$column.valueOptions,
@@ -33,7 +34,7 @@ var renderSingleSelectOptions = function renderSingleSelectOptions(_ref) {
   });
 };
 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;
   var item = props.item,
     applyValue = props.applyValue,
     type = props.type,
@@ -47,10 +48,9 @@ function GridFilterInputSingleSelect(props) {
     filterValueState = _React$useState2[0],
     setFilterValueState = _React$useState2[1];
   var id = useId();
+  var labelId = useId();
   var rootProps = useGridRootProps();
-  var baseSelectProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseSelect) || {};
-  var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
-  var baseSelectOptionProps = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelectOption) || {};
+  var 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;
   var resolvedColumn = null;
   if (item.field) {
     var column = apiRef.current.getColumn(item.field);
@@ -102,33 +102,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({
+  var 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: getOptionLabel,
-      getOptionValue: getOptionValue,
-      isSelectNative: isSelectNative,
-      baseSelectOptionProps: baseSelectOptionProps
-    })
-  }));
+    }, others, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect, {
+      children: renderSingleSelectOptions({
+        column: resolvedColumn,
+        OptionComponent: rootProps.slots.baseSelectOption,
+        getOptionLabel: getOptionLabel,
+        getOptionValue: getOptionValue,
+        isSelectNative: isSelectNative,
+        baseSelectOptionProps: (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseSelectOption
+      })
+    }))]
+  });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {
   // ----------------------------- Warning --------------------------------

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

@@ -30,6 +30,7 @@ var GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(pro
   var filterModel = useGridSelector(apiRef, gridFilterModelSelector);
   var filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
   var lastFilterRef = React.useRef(null);
+  var placeholderFilter = React.useRef(null);
   var _props$logicOperators = props.logicOperators,
     logicOperators = _props$logicOperators === void 0 ? [GridLogicOperator.And, GridLogicOperator.Or] : _props$logicOperators,
     columnsSort = props.columnsSort,
@@ -100,8 +101,10 @@ var GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(pro
     if (filterModel.items.length) {
       return filterModel.items;
     }
-    var defaultFilter = getDefaultFilter();
-    return defaultFilter ? [defaultFilter] : [];
+    if (!placeholderFilter.current) {
+      placeholderFilter.current = getDefaultFilter();
+    }
+    return placeholderFilter.current ? [placeholderFilter.current] : [];
   }, [filterModel.items, getDefaultFilter]);
   var hasMultipleFilters = items.length > 1;
   var addNewFilter = function addNewFilter() {

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

@@ -1,5 +1,6 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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 +11,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';
 var isTestEnvironment = process.env.NODE_ENV === 'test';
 var hasScroll = function hasScroll(_ref) {
   var content = _ref.content,
@@ -113,10 +115,25 @@ export function useGridDimensions(apiRef, props) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newFullDimensions.viewportInnerSize);
     }
   }, [apiRef, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, totalHeaderHeight]);
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    savedSize = _React$useState2[0],
+    setSavedSize = _React$useState2[1];
+  var debouncedSetSavedSize = React.useMemo(function () {
+    return debounce(setSavedSize, 60);
+  }, []);
+  var previousSize = React.useRef();
+  useEnhancedEffect(function () {
+    if (savedSize) {
+      updateGridDimensionsRef();
+      apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
+    }
+  }, [apiRef, savedSize, updateGridDimensionsRef]);
+
+  // This is the function called by apiRef.current.resize()
   var resize = React.useCallback(function () {
-    updateGridDimensionsRef();
-    apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
-  }, [apiRef, updateGridDimensionsRef]);
+    apiRef.current.computeSizeAndPublishResizeEvent();
+  }, [apiRef]);
   var getRootDimensions = React.useCallback(function () {
     return fullDimensionsRef.current;
   }, []);
@@ -140,19 +157,45 @@ export function useGridDimensions(apiRef, props) {
     var maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
   }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
+  var computeSizeAndPublishResizeEvent = React.useCallback(function () {
+    var _apiRef$current$rootE2, _previousSize$current, _previousSize$current2;
+    var rootEl = (_apiRef$current$rootE2 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE2.current;
+    var mainEl = rootEl == null ? void 0 : rootEl.querySelector(".".concat(gridClasses.main));
+    if (!mainEl) {
+      return;
+    }
+    var height = mainEl.offsetHeight || 0;
+    var width = mainEl.offsetWidth || 0;
+    var win = ownerWindow(mainEl);
+    var computedStyle = win.getComputedStyle(mainEl);
+    var paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;
+    var paddingRight = parseInt(computedStyle.paddingRight, 10) || 0;
+    var paddingTop = parseInt(computedStyle.paddingTop, 10) || 0;
+    var paddingBottom = parseInt(computedStyle.paddingBottom, 10) || 0;
+    var newHeight = height - paddingTop - paddingBottom;
+    var newWidth = width - paddingLeft - paddingRight;
+    var hasHeightChanged = newHeight !== ((_previousSize$current = previousSize.current) == null ? void 0 : _previousSize$current.height);
+    var hasWidthChanged = newWidth !== ((_previousSize$current2 = previousSize.current) == null ? void 0 : _previousSize$current2.width);
+    if (!previousSize.current || hasHeightChanged || hasWidthChanged) {
+      var size = {
+        width: newWidth,
+        height: newHeight
+      };
+      apiRef.current.publishEvent('resize', size);
+      previousSize.current = size;
+    }
+  }, [apiRef]);
   var dimensionsApi = {
     resize: resize,
     getRootDimensions: getRootDimensions
   };
   var dimensionsPrivateApi = {
     getViewportPageSize: getViewportPageSize,
-    updateGridDimensionsRef: updateGridDimensionsRef
+    updateGridDimensionsRef: updateGridDimensionsRef,
+    computeSizeAndPublishResizeEvent: computeSizeAndPublishResizeEvent
   };
   useGridApiMethod(apiRef, dimensionsApi, 'public');
   useGridApiMethod(apiRef, dimensionsPrivateApi, 'private');
-  var debounceResize = React.useMemo(function () {
-    return debounce(resize, 60);
-  }, [resize]);
   var isFirstSizing = React.useRef(true);
   var handleResize = React.useCallback(function (size) {
     rootDimensionsRef.current = size;
@@ -169,18 +212,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(function () {
     return updateGridDimensionsRef();
   }, [updateGridDimensionsRef]);

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

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