DOM Utilities

/**
 * Gets owner document of DOM node
 * @param node - DOM node to get document from
 * @returns Owner document or global document
 */
function unstable_ownerDocument(node?: Node | null): Document;

import { unstable_ownerDocument as ownerDocument } from '@mui/utils';

function MyComponent() {
  const ref = React.useRef<HTMLDivElement>(null);
  
  React.useEffect(() => {
    if (ref.current) {
      const doc = ownerDocument(ref.current);
      // Use doc instead of document for better SSR compatibility
      const title = doc.title;
    }
  }, []);

  return <div ref={ref}>Content</div>;
}

/**
 * Gets owner window of DOM node
 * @param node - DOM node to get window from
 * @returns Owner window or global window
 */
function unstable_ownerWindow(node?: Node | null): Window;

import { unstable_ownerWindow as ownerWindow } from '@mui/utils';

function useViewportSize(elementRef: React.RefObject<HTMLElement>) {
  const [size, setSize] = React.useState({ width: 0, height: 0 });
  
  React.useEffect(() => {
    const updateSize = () => {
      if (elementRef.current) {
        const win = ownerWindow(elementRef.current);
        setSize({
          width: win.innerWidth,
          height: win.innerHeight
        });
      }
    };
    
    updateSize();
    const win = ownerWindow(elementRef.current);
    win.addEventListener('resize', updateSize);
    
    return () => win.removeEventListener('resize', updateSize);
  }, []);

  return size;
}

/**
 * Gets scrollbar size in pixels
 * @param doc - Document to measure scrollbar in
 * @returns Scrollbar width in pixels
 */
function unstable_getScrollbarSize(doc?: Document): number;

import { unstable_getScrollbarSize as getScrollbarSize } from '@mui/utils';

function Modal({ children }) {
  React.useEffect(() => {
    // Prevent background scroll when modal is open
    const scrollbarSize = getScrollbarSize();
    document.body.style.paddingRight = `${scrollbarSize}px`;
    document.body.style.overflow = 'hidden';
    
    return () => {
      document.body.style.paddingRight = '';
      document.body.style.overflow = '';
    };
  }, []);

  return <div className="modal">{children}</div>;
}

/**
 * Determines if focus should be visible
 * @param element - Element to check focus visibility for
 * @returns True if focus should be visually indicated
 */
function unstable_isFocusVisible(element: Element): boolean;

import { unstable_isFocusVisible as isFocusVisible } from '@mui/utils';

function CustomButton({ children, ...props }) {
  const [focusVisible, setFocusVisible] = React.useState(false);
  const buttonRef = React.useRef<HTMLButtonElement>(null);
  
  const handleFocus = (event: React.FocusEvent) => {
    if (buttonRef.current) {
      setFocusVisible(isFocusVisible(buttonRef.current));
    }
  };
  
  const handleBlur = () => {
    setFocusVisible(false);
  };

  return (
    <button
      ref={buttonRef}
      onFocus={handleFocus}
      onBlur={handleBlur}
      className={focusVisible ? 'focus-visible' : ''}
      {...props}
    >
      {children}
    </button>
  );
}

/**
 * Cross-environment global object reference
 */
const ponyfillGlobal: typeof globalThis;

import { ponyfillGlobal } from '@mui/utils';

// Safe access to global object across environments
const globalVar = ponyfillGlobal.someGlobalVariable;

// Works in browser (window), Node.js (global), and modern environments (globalThis)