@mui/x-data-grid 6.2.0 → 6.2.1

package/CHANGELOG.md

@@ -3,9 +3,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.2.1
+
+_Apr 20, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Add virtualization to row detail panels (#7969) @yaredtsy
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.2.1` / `@mui/x-data-grid-pro@v6.2.1` / `@mui/x-data-grid-premium@v6.2.1`
+
+#### Changes
+
+- [DataGrid] Add `getTogglableColumns` to `Hide all` and `Show all` actions (#8496) @MBilalShafi
+- [DataGrid] Add Grid + Joy UI experiment page (#8067) @cherniavskii
+- [DataGrid] Fix print style when rendering inside Shadow DOM (#8656) @Bwatermelon
+- [DataGrid] Replace `GridAutoSizer` with `ResizeObserver` (#8091) @m4theushw
+- [DataGrid] Use stable ID for the placeholder filter item (#8603) @m4theushw
+- [DataGridPro] Virtualize row detail panels (#7969) @yaredtsy
+
+### `@mui/x-date-pickers@v6.2.1` / `@mui/x-date-pickers-pro@v6.2.1`
+
+#### Changes
+
+- [pickers] Do not include the time in date components when going to today (#8657) @flaviendelangle
+- [pickers] Sync internal state with controlled value (#8674) @alexfauquette
+
+### `@mui/x-codemod@v6.0.6`
+
+#### Changes
+
+- [codemod] Avoid filter failures on object prototype properties (#8647) @LukasTy
+
+### Docs
+
+- [docs] Add no-op service worker to fix stale cache issue (#8598) @cherniavskii
+- [docs] Clarify what `AdapterDayjs` is in the Getting Started page (#8219) @flaviendelangle
+- [docs] Fix typo on picker page description (#8611) @maxolasersquad
+- [docs] Improve section title in Getting Started page (#8648) @flaviendelangle
+- [docs] Inform about input format modification (#8458) @alexfauquette
+
+### Core
+
+- [core] Fix release date (#8618) @flaviendelangle
+- [core] Upgrade monorepo (#8668) @MBilalShafi
+- [charts] Support Tooltip (#8356) @alexfauquette
+
 ## 6.2.0
 
-_Apr 13, 2023_
+_Apr 14, 2023_
 
 We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
 

package/components/GridHeader.d.ts

@@ -1,2 +1,2 @@
-import * as React from 'react';
-export declare const GridHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/// <reference types="react" />
+export declare function GridHeader(): JSX.Element;

package/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 const GridHeader = /*#__PURE__*/React.forwardRef(function GridHeader(props, ref) {
+export function GridHeader() {
   var _rootProps$slotProps, _rootProps$slotProps2;
   const 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/components/base/GridBody.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 interface GridBodyProps {
-    children?: React.ReactNode;
     ColumnHeadersProps?: Record<string, any>;
     VirtualScrollerComponent: React.JSXElementConstructor<React.HTMLAttributes<HTMLDivElement> & {
         ref: React.Ref<HTMLDivElement>;

package/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,24 @@ 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 () => {};
+    }
+    const observer = new ResizeObserver(() => {
+      apiRef.current.computeSizeAndPublishResizeEvent();
+    });
+    if (elementToObserve) {
+      observer.observe(elementToObserve);
+    }
+    return () => {
+      if (elementToObserve) {
+        observer.unobserve(elementToObserve);
+      }
+    };
+  }, [apiRef]);
   const disableVirtualization = React.useCallback(() => {
     setIsVirtualizationDisabled(true);
   }, []);
@@ -65,10 +83,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 +103,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 +120,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/components/columnSelection/GridCellCheckboxRenderer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridRenderCellParams } from '../../models/params/gridCellParams';
+import type { GridRenderCellParams } from '../../models/params/gridCellParams';
 declare const GridCellCheckboxForwardRef: React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("../..").GridTreeNodeWithRender> & React.RefAttributes<HTMLInputElement>>;
 export { GridCellCheckboxForwardRef };
 export declare const GridCellCheckboxRenderer: React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("../..").GridTreeNodeWithRender> & React.RefAttributes<HTMLInputElement>>;

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -36,7 +36,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/components/columnSelection/GridHeaderCheckbox.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { GridColumnHeaderParams } from '../../models/params/gridColumnHeaderParams';
+import type { GridColumnHeaderParams } from '../../models/params/gridColumnHeaderParams';
 declare const GridHeaderCheckbox: React.ForwardRefExoticComponent<GridColumnHeaderParams<import("../../models/gridRows").GridValidRowModel, any, any> & React.RefAttributes<HTMLInputElement>>;
 export { GridHeaderCheckbox };

package/components/containers/GridMainContainer.d.ts

@@ -1,2 +1,4 @@
 import * as React from 'react';
-export declare function GridMainContainer(props: React.PropsWithChildren<{}>): JSX.Element;
+export declare const GridMainContainer: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;

package/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/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/components/index.d.ts

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

@@ -95,8 +95,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];
@@ -106,7 +107,7 @@ function GridColumnsPanel(props) {
       }
     });
     return apiRef.current.setColumnVisibilityModel(newModel);
-  }, [apiRef, columns]);
+  }, [apiRef, columns, getTogglableColumns]);
   const handleSearchValueChange = React.useCallback(event => {
     setSearchValue(event.target.value);
   }, []);

package/components/panel/GridPanel.d.ts

@@ -21,10 +21,10 @@ declare const GridPanelRoot: import("@emotion/styled").StyledComponent<Pick<Omit
         Root?: React.ElementType<any> | undefined;
     } | undefined;
     componentsProps?: {
-        root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperUnstyledRootSlotPropsOverrides, import("@mui/base").PopperUnstyledOwnerState> | undefined;
+        root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperUnstyledRootSlotPropsOverrides, import("@mui/base").PopperUnstyledOwnProps> | undefined;
     } | undefined;
     sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-} & React.RefAttributes<HTMLDivElement>, "hidden" | "color" | "content" | "style" | "open" | "translate" | "container" | "transition" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "sx" | "ownerState" | "components" | "placement" | "disablePortal" | "modifiers" | "anchorEl" | "keepMounted" | "popperOptions" | "popperRef" | "slotProps" | "slots" | "componentsProps" | keyof React.RefAttributes<HTMLDivElement>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+} & React.RefAttributes<HTMLDivElement>, "hidden" | "color" | "content" | "style" | "open" | "translate" | "container" | "transition" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "sx" | "components" | "placement" | "disablePortal" | "modifiers" | "anchorEl" | "keepMounted" | "popperOptions" | "popperRef" | "slotProps" | "slots" | "componentsProps" | keyof React.RefAttributes<HTMLDivElement>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     ownerState: OwnerState;
 }, {}, {}>;
 declare const GridPanel: React.ForwardRefExoticComponent<Omit<GridPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/components/panel/GridPanel.js

@@ -116,6 +116,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/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/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;

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.2.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;

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;