replace getWindow() util

mapbox · Sep 18, 2023 · dc641ee · dc641ee
1 parent 6950b90
commit dc641ee
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 33 deletions.
diff --git a/src/components/control-text/control-text.tsx b/src/components/control-text/control-text.tsx
@@ -5,7 +5,6 @@ import ControlLabel from '../control-label';
 import ControlWrapper from '../control-wrapper';
 import Popover from '../popover';
 import Icon from '../icon';
-import getWindow from '../utils/get-window';
 import {InputProps, PopoverProps} from '../typings';
 
 interface Props extends Omit<InputProps, 'onChange'> {
@@ -71,9 +70,11 @@ export default function ControlText({
   };
 
   const isActive = () => {
+    if (typeof window === 'undefined') return false
+
     return (
-      getWindow().document.activeElement === inputElement.current ||
-      getWindow().document.activeElement === errorElement.current
+      window.document.activeElement === inputElement.current ||
+      window.document.activeElement === errorElement.current
     );
   };
 

diff --git a/src/components/copiable/copiable.tsx b/src/components/copiable/copiable.tsx
@@ -5,7 +5,6 @@ import CopyButton from '../copy-button';
 import Popover from '../popover';
 import OSKey from 'os-key';
 import select from 'select';
-import getWindow from '../utils/get-window';
 
 const DISABLE_CLICK_TO_SELECT_THRESHOLD = 640;
 const FEEDBACK_TIME = 2000;
@@ -59,7 +58,8 @@ export default function Copiable({
   }, [copyTooltipActive]);
 
   const handleTextFocus = () => {
-    if (getWindow().innerWidth < DISABLE_CLICK_TO_SELECT_THRESHOLD) return;
+    if (typeof window === 'undefined') return
+    if (window.innerWidth < DISABLE_CLICK_TO_SELECT_THRESHOLD) return;
     select(() => textEl.current);
     setCopyTooltipActive(true);
   };
@@ -80,14 +80,18 @@ export default function Copiable({
     </div>
   );
 
-  const renderCopyHintText = (
-    <span>
-      <span className="txt-kbd">
-        {getCopyKeys(getWindow().navigator.userAgent)}
-      </span>{' '}
-      to copy
-    </span>
-  );
+  const renderCopyHintText = () => {
+    if (typeof window === 'undefined') return
+
+    return (
+      <span>
+        <span className="txt-kbd">
+          {getCopyKeys(window.navigator.userAgent)}
+        </span>{' '}
+        to copy
+      </span>
+    )
+  }
 
   const textClasses = classnames('my3 txt-mono txt-s mr24', {
     'txt-truncate': truncated

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
@@ -1,6 +1,5 @@
 import React, { ReactElement, useRef, useEffect, SVGProps, DetailedHTMLProps } from 'react';
 import PropTypes from 'prop-types';
-import getWindow from '../utils/get-window';
 import * as AccessibleIcon from '@radix-ui/react-accessible-icon';
 
 interface Props {
@@ -28,8 +27,8 @@ export default function Icon({
   const el = useRef(null);
 
   useEffect(() => {
-    if (inline && el.current) {
-      const lineHeight = getWindow().getComputedStyle(el.current)[
+    if (inline && el.current && typeof window !== 'undefined') {
+      const lineHeight = window.getComputedStyle(el.current)[
         'line-height'
       ];
       el.current.style.height = lineHeight;

diff --git a/src/components/utils/README.md b/src/components/utils/README.md
@@ -2,14 +2,6 @@
 
 All utils can be imported from `@mapbox/mr-ui/utils/{name}`.
 
-## getWindow
-
-```js
-import getWindow from '@mapbox/mr-ui/utils/get-window';
-```
-
-Wraps `window` to make it easy to mock aspects of the browser environment while testing.
-
 ## shallowEqualObjects
 
 ```js

diff --git a/src/components/utils/get-window.ts b/src/components/utils/get-window.ts