0
# DOM Utilities
1

2
Browser and DOM manipulation utilities for cross-platform React applications. These utilities handle common DOM operations and browser compatibility concerns.
3

4
## Capabilities
5

6
### Document and Window Access
7

8
#### ownerDocument
9

10
Gets the owner document of a DOM node, with fallback to global document.
11

12
```typescript { .api }
13
/**
14
 * Gets owner document of DOM node
15
 * @param node - DOM node to get document from
16
 * @returns Owner document or global document
17
 */
18
function unstable_ownerDocument(node?: Node | null): Document;
19
```
20

21
**Usage Example:**
22

23
```typescript
24
import { unstable_ownerDocument as ownerDocument } from '@mui/utils';
25

26
function MyComponent() {
27
  const ref = React.useRef<HTMLDivElement>(null);
28
  
29
  React.useEffect(() => {
30
    if (ref.current) {
31
      const doc = ownerDocument(ref.current);
32
      // Use doc instead of document for better SSR compatibility
33
      const title = doc.title;
34
    }
35
  }, []);
36

37
  return <div ref={ref}>Content</div>;
38
}
39
```
40

41
#### ownerWindow
42

43
Gets the owner window of a DOM node, with fallback to global window.
44

45
```typescript { .api }
46
/**
47
 * Gets owner window of DOM node
48
 * @param node - DOM node to get window from
49
 * @returns Owner window or global window
50
 */
51
function unstable_ownerWindow(node?: Node | null): Window;
52
```
53

54
**Usage Example:**
55

56
```typescript
57
import { unstable_ownerWindow as ownerWindow } from '@mui/utils';
58

59
function useViewportSize(elementRef: React.RefObject<HTMLElement>) {
60
  const [size, setSize] = React.useState({ width: 0, height: 0 });
61
  
62
  React.useEffect(() => {
63
    const updateSize = () => {
64
      if (elementRef.current) {
65
        const win = ownerWindow(elementRef.current);
66
        setSize({
67
          width: win.innerWidth,
68
          height: win.innerHeight
69
        });
70
      }
71
    };
72
    
73
    updateSize();
74
    const win = ownerWindow(elementRef.current);
75
    win.addEventListener('resize', updateSize);
76
    
77
    return () => win.removeEventListener('resize', updateSize);
78
  }, []);
79

80
  return size;
81
}
82
```
83

84
### Scrollbar Management
85

86
#### getScrollbarSize
87

88
Gets the scrollbar size in pixels for the current browser/platform.
89

90
```typescript { .api }
91
/**
92
 * Gets scrollbar size in pixels
93
 * @param doc - Document to measure scrollbar in
94
 * @returns Scrollbar width in pixels
95
 */
96
function unstable_getScrollbarSize(doc?: Document): number;
97
```
98

99
**Usage Example:**
100

101
```typescript
102
import { unstable_getScrollbarSize as getScrollbarSize } from '@mui/utils';
103

104
function Modal({ children }) {
105
  React.useEffect(() => {
106
    // Prevent background scroll when modal is open
107
    const scrollbarSize = getScrollbarSize();
108
    document.body.style.paddingRight = `${scrollbarSize}px`;
109
    document.body.style.overflow = 'hidden';
110
    
111
    return () => {
112
      document.body.style.paddingRight = '';
113
      document.body.style.overflow = '';
114
    };
115
  }, []);
116

117
  return <div className="modal">{children}</div>;
118
}
119
```
120

121
### Focus Management
122

123
#### isFocusVisible
124

125
Determines if focus should be visible based on the current interaction mode (keyboard vs mouse).
126

127
```typescript { .api }
128
/**
129
 * Determines if focus should be visible
130
 * @param element - Element to check focus visibility for
131
 * @returns True if focus should be visually indicated
132
 */
133
function unstable_isFocusVisible(element: Element): boolean;
134
```
135

136
**Usage Example:**
137

138
```typescript
139
import { unstable_isFocusVisible as isFocusVisible } from '@mui/utils';
140

141
function CustomButton({ children, ...props }) {
142
  const [focusVisible, setFocusVisible] = React.useState(false);
143
  const buttonRef = React.useRef<HTMLButtonElement>(null);
144
  
145
  const handleFocus = (event: React.FocusEvent) => {
146
    if (buttonRef.current) {
147
      setFocusVisible(isFocusVisible(buttonRef.current));
148
    }
149
  };
150
  
151
  const handleBlur = () => {
152
    setFocusVisible(false);
153
  };
154

155
  return (
156
    <button
157
      ref={buttonRef}
158
      onFocus={handleFocus}
159
      onBlur={handleBlur}
160
      className={focusVisible ? 'focus-visible' : ''}
161
      {...props}
162
    >
163
      {children}
164
    </button>
165
  );
166
}
167
```
168

169
### Environment Detection
170

171
#### ponyfillGlobal
172

173
Cross-environment global object reference (window/global/globalThis).
174

175
```typescript { .api }
176
/**
177
 * Cross-environment global object reference
178
 */
179
const ponyfillGlobal: typeof globalThis;
180
```
181

182
**Usage Example:**
183

184
```typescript
185
import { ponyfillGlobal } from '@mui/utils';
186

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

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