diff --git a/src/components/control-text/control-text.tsx b/src/components/control-text/control-text.tsx index ddb95d18..18c4ba72 100644 --- 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 { @@ -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 index a5bb1495..d64987e5 100644 --- 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({ ); - const renderCopyHintText = ( - - - {getCopyKeys(getWindow().navigator.userAgent)} - {' '} - to copy - - ); + const renderCopyHintText = () => { + if (typeof window === 'undefined') return + + return ( + + + {getCopyKeys(window.navigator.userAgent)} + {' '} + to copy + + ) + } 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 index 679f252e..a24c186d 100644 --- 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 index 7813508a..403b2234 100644 --- 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 deleted file mode 100644 index 40376cf8..00000000 --- a/src/components/utils/get-window.ts +++ /dev/null @@ -1,9 +0,0 @@ -// For the purposes of correctly mocking the window object in Jest, -// this is a safe way of returning it for tests to work as expected. -export default function getWindow(): typeof window { - if (typeof window !== 'object') { - throw new Error('window not available'); - } - - return window; -}