chore: Remove useResizeObserver hack (#2981)

We're past TypeScript 4.2, so we're removing the `useResizeObserver` hacks.

[category:Components]

jest/setupTests.ts

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom/extend-expect';
 import {verifyComponent} from './verifyComponent';
 import {jest} from '@jest/globals';
+import {ResizeObserver} from '@juggle/resize-observer';
 
 import {setUniqueSeed, resetUniqueIdCount} from '@workday/canvas-kit-react/common';
 import {TextEncoder} from 'util';
@@ -16,4 +17,7 @@ import {TextEncoder} from 'util';
 beforeEach(() => {
   setUniqueSeed('a');
   resetUniqueIdCount();
+
+  // jsdom doesn't have a ResizeObserver. Use a polyfill: https://github.com/jsdom/jsdom/issues/3368
+  global.ResizeObserver = ResizeObserver;
 });

modules/react/common/lib/utils/useResizeObserver.ts

@@ -1,29 +1,3 @@
-import React from 'react';
+import useResizeObserver from 'use-resize-observer';
 
-import useResizeObserverOriginal from 'use-resize-observer';
-import ResizeObserver from 'resize-observer-polyfill';
-
-if (typeof window !== 'undefined' && !(window as any).ResizeObserver) {
-  (window as any).ResizeObserver = ResizeObserver;
-}
-
-// `useResizeObserver` contains this fix in 8.0.0:
-// https://github.com/ZeeCoder/use-resize-observer/commit/bd0f3c8597bac0d853b88cf585256aac1bd4f554
-// v8.0.0 requires TS4.2. So we'll manually patch until we're ready for TS4.2+
-export const useResizeObserver: typeof useResizeObserverOriginal = (params = {}) => {
-  const widthRef = React.useRef<number | undefined>();
-  const heightRef = React.useRef<number | undefined>();
-  const onResize = params.onResize
-    ? (data: {width: number | undefined; height: number | undefined}) => {
-        if (widthRef.current !== data.width || heightRef.current !== data.height) {
-          widthRef.current = data.width;
-          heightRef.current = data.height;
-          params.onResize!(data);
-        }
-      }
-    : undefined;
-  return useResizeObserverOriginal({...params, onResize});
-};
-
-// When the dependency is moved up to v8.0.0, remove the above function and export below instead
-// export {useResizeObserver};
+export {useResizeObserver};

modules/react/package.json

@@ -58,10 +58,9 @@
     "csstype": "^3.0.2",
     "react-innertext": "^1.1.5",
     "react-virtual": "^2.10.4",
-    "resize-observer-polyfill": "^1.5.1",
     "rtl-css-js": "^1.14.1",
     "screenfull": "^5.2.0",
-    "use-resize-observer": "~7.0.1"
+    "use-resize-observer": "^9.1.0"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^3.0.0",

yarn.lock

@@ -14488,11 +14488,6 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
-resize-observer-polyfill@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
-  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
-
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -16083,13 +16078,6 @@ use-resize-observer@^9.1.0:
   dependencies:
     "@juggle/resize-observer" "^3.3.1"
 
-use-resize-observer@~7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-7.0.1.tgz#82b13d462e7fb5e3ec953bde48d6e02b9aae660d"
-  integrity sha512-tJESENDoVXfzkv1Cl9dJ13ySgENcKjvEKSU7QwjckjxjXg/MV2zW1CjEUtLpmXY084womIxJROUR3L1SuqlvOw==
-  dependencies:
-    resize-observer-polyfill "^1.5.1"
-
 use-sidecar@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"