diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 10f82fc93a..820edc8ecc 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -2,11 +2,7 @@ import 'core-js/stable'; import { ResizeObserver as Polyfill } from '@juggle/resize-observer'; import { css } from '@linaria/core'; -// @ts-expect-error -if (typeof ResizeObserver === 'undefined') { - // @ts-expect-error - window.ResizeObserver = Polyfill; -} +window.ResizeObserver ??= Polyfill; css` :global() { diff --git a/package.json b/package.json index 93a8c1acab..c93854e8d1 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "react-sortable-hoc": "^1.11.0", "rollup": "^2.39.0", "rollup-plugin-postcss": "^4.0.0", - "typescript": "~4.1.5" + "typescript": "~4.2.2" }, "peerDependencies": { "react": "^16.14 || ^17.0", diff --git a/src/hooks/useGridDimensions.ts b/src/hooks/useGridDimensions.ts index 559c18e921..2df725fd57 100644 --- a/src/hooks/useGridDimensions.ts +++ b/src/hooks/useGridDimensions.ts @@ -1,25 +1,12 @@ import { useRef, useState, useLayoutEffect } from 'react'; -// https://github.com/microsoft/TypeScript/issues/37861 -interface ResizeObserverEntry { - contentRect: { - width: number; - height: number; - }; -} - -type ResizeObserver = new (callback: (entries: readonly ResizeObserverEntry[]) => void) => { - observe: (target: Element) => void; - disconnect: () => void; -}; - export function useGridDimensions(): [ref: React.RefObject, width: number, height: number] { const gridRef = useRef(null); const [gridWidth, setGridWidth] = useState(1); const [gridHeight, setGridHeight] = useState(1); useLayoutEffect(() => { - const { ResizeObserver } = window as typeof window & { ResizeObserver: ResizeObserver }; + const { ResizeObserver } = window; // don't break in jest/jsdom and browsers that don't support ResizeObserver // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition diff --git a/test/setup.ts b/test/setup.ts index e17e632332..6dc68048d6 100644 --- a/test/setup.ts +++ b/test/setup.ts @@ -1,11 +1,18 @@ -// @ts-expect-error -window.ResizeObserver ??= function ResizeObserver(callback: () => void) { - callback(); - - return { - observe() {}, - disconnect() {} - }; +import 'core-js/stable'; + +window.ResizeObserver ??= class { + callback: ResizeObserverCallback; + + constructor(callback: ResizeObserverCallback) { + this.callback = callback; + } + + observe() { + this.callback([], this); + } + + unobserve() {} + disconnect() {} }; // patch clientWidth/clientHeight to pretend we're rendering DataGrid at 1080p