[core] Reference ownerDocument

packages/mui-base/src/Dialog/Popup/useDialogPopup.tsx

@@ -24,7 +24,7 @@ export function useDialogPopup(parameters: UseDialogPopupParameters): UseDialogP
     isTopmost,
   } = parameters;
 
-  const { refs, context } = useFloating({
+  const { refs, context, elements } = useFloating({
     open,
     onOpenChange,
   });
@@ -47,7 +47,7 @@ export function useDialogPopup(parameters: UseDialogPopupParameters): UseDialogP
     enabled: animated,
   });
 
-  useScrollLock(modal && mounted);
+  useScrollLock(modal && mounted, elements.floating);
 
   useEnhancedEffect(() => {
     setPopupElementId(id);

packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.tsx

@@ -8,6 +8,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useForkRef } from '../../utils/useForkRef';
 import type { BaseUIComponentProps } from '../../utils/types';
 import type { NumberFieldRoot } from '../Root/NumberFieldRoot';
+import { ownerDocument } from '../../utils/owner';
 
 /**
  * The scrub area cursor element.
@@ -29,7 +30,9 @@ const NumberFieldScrubAreaCursor = React.forwardRef(function NumberFieldScrubAre
   const { isScrubbing, scrubAreaCursorRef, ownerState, getScrubAreaCursorProps } =
     useNumberFieldContext('ScrubAreaCursor');
 
-  const mergedRef = useForkRef(forwardedRef, scrubAreaCursorRef);
+  const [element, setElement] = React.useState<Element | null>(null);
+
+  const mergedRef = useForkRef(forwardedRef, scrubAreaCursorRef, setElement);
 
   const { renderElement } = useComponentRenderer({
     propGetter: getScrubAreaCursorProps,
@@ -44,7 +47,7 @@ const NumberFieldScrubAreaCursor = React.forwardRef(function NumberFieldScrubAre
     return null;
   }
 
-  return ReactDOM.createPortal(renderElement(), document.body);
+  return ReactDOM.createPortal(renderElement(), ownerDocument(element).body);
 });
 
 namespace NumberFieldScrubAreaCursor {

packages/mui-base/src/Slider/Root/useSliderRoot.ts

@@ -1,5 +1,6 @@
 'use client';
 import * as React from 'react';
+import { activeElement } from '@floating-ui/react/utils';
 import { areArraysEqual } from '../../utils/areArraysEqual';
 import { clamp } from '../../utils/clamp';
 import { mergeReactProps } from '../../utils/mergeReactProps';
@@ -376,12 +377,13 @@ function useSliderRoot(parameters: UseSliderParameters): UseSliderReturnValue {
   );
 
   useEnhancedEffect(() => {
-    if (disabled && sliderRef.current!.contains(document.activeElement)) {
+    const activeEl = activeElement(ownerDocument(sliderRef.current));
+    if (disabled && sliderRef.current!.contains(activeEl)) {
       // This is necessary because Firefox and Safari will keep focus
       // on a disabled element:
       // https://codesandbox.io/p/sandbox/mui-pr-22247-forked-h151h?file=/src/App.js
       // @ts-ignore
-      document.activeElement?.blur();
+      activeEl.blur();
     }
   }, [disabled]);
 

packages/mui-base/src/utils/useScrollLock.ts

@@ -1,13 +1,15 @@
 import { isIOS } from './detectBrowser';
+import { ownerDocument } from './owner';
 import { useEnhancedEffect } from './useEnhancedEffect';
 
 let originalHtmlStyles = {};
 let originalBodyStyles = {};
 let preventScrollCount = 0;
 let restore: () => void = () => {};
 
-function preventScrollIOS() {
-  const body = document.body;
+function preventScrollIOS(referenceElement?: Element | null) {
+  const doc = ownerDocument(referenceElement);
+  const body = doc.body;
   const bodyStyle = body.style;
 
   // iOS 12 does not support `visualViewport`.
@@ -39,9 +41,10 @@ function preventScrollIOS() {
   };
 }
 
-function preventScrollStandard() {
-  const html = document.documentElement;
-  const body = document.body;
+function preventScrollStandard(referenceElement?: Element | null) {
+  const doc = ownerDocument(referenceElement);
+  const html = doc.documentElement;
+  const body = doc.body;
   const htmlStyle = html.style;
   const bodyStyle = body.style;
 
@@ -134,15 +137,17 @@ function preventScrollStandard() {
  *
  * @param enabled - Whether to enable the scroll lock.
  */
-export function useScrollLock(enabled: boolean = true) {
+export function useScrollLock(enabled: boolean = true, referenceElement?: Element | null) {
   useEnhancedEffect(() => {
     if (!enabled) {
       return undefined;
     }
 
     preventScrollCount += 1;
     if (preventScrollCount === 1) {
-      restore = isIOS() ? preventScrollIOS() : preventScrollStandard();
+      restore = isIOS()
+        ? preventScrollIOS(referenceElement)
+        : preventScrollStandard(referenceElement);
     }
 
     return () => {
@@ -151,5 +156,5 @@ export function useScrollLock(enabled: boolean = true) {
         restore();
       }
     };
-  }, [enabled]);
+  }, [enabled, referenceElement]);
 }