Fix(web-react): Use Resize Observer hook with better handling of wind…

…ow object
lmc-eu · Sep 14, 2024 · 27bec17 · 27bec17
1 parent e5c8a7b
commit 27bec17
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 38 deletions.
diff --git a/packages/web-react/package.json b/packages/web-react/package.json
@@ -21,11 +21,11 @@
   "types": "./index.d.ts",
   "dependencies": {
     "@floating-ui/react": "^0.26.5",
-    "@react-hook/resize-observer": "^2.0.0",
     "classnames": "^2.3.1",
     "html-dom-parser": "5.0.10",
     "html-react-parser": "5.1.15",
-    "react-transition-group": "^4.4.5"
+    "react-transition-group": "^4.4.5",
+    "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
     "@babel/core": "7.25.2",

diff --git a/packages/web-react/src/components/Collapse/__tests__/useResizeHeight.test.tsx b/packages/web-react/src/components/Collapse/__tests__/useResizeHeight.test.tsx
@@ -46,4 +46,8 @@ describe.skip('useResizeHeight', () => {
 */
 
 // eslint-disable-next-line jest/no-disabled-tests, jest/expect-expect, @typescript-eslint/no-empty-function
-it.skip('skip', () => {});
+describe('useResizeHeight()', () => {
+  it('should pass', () => {
+    expect(true).toBe(true);
+  });
+});
diff --git a/packages/web-react/src/components/Collapse/useResizeHeight.ts b/packages/web-react/src/components/Collapse/useResizeHeight.ts
@@ -1,13 +1,19 @@
-import useResizeObserver from '@react-hook/resize-observer';
 import { RefObject, useState } from 'react';
+import { useResizeObserver } from 'usehooks-ts';
+
+type Size = {
+  height: number | undefined;
+};
 
 export const useResizeHeight = (ref: RefObject<HTMLElement>): string => {
   const [height, setHeight] = useState<string>('0px');
 
-  useResizeObserver(ref, (entry: ResizeObserverEntry) => {
-    const currentHeight = entry.contentRect.height;
+  const onResize = (size: Size) => {
+    const currentHeight = size.height;
     setHeight(`${currentHeight}px`);
-  });
+  };
+
+  useResizeObserver({ ref, onResize });
 
   return height;
 };
diff --git a/yarn.lock b/yarn.lock
@@ -3718,7 +3718,6 @@ __metadata:
     "@lmc-eu/spirit-demo": "npm:^0.1.3"
     "@lmc-eu/spirit-design-tokens": "npm:^2.1.0"
     "@lmc-eu/spirit-web": "npm:^2.4.0"
-    "@react-hook/resize-observer": "npm:^2.0.0"
     "@rollup/plugin-node-resolve": "npm:15.2.3"
     "@rollup/plugin-terser": "npm:0.4.4"
     "@testing-library/dom": "npm:10.4.0"
@@ -3762,6 +3761,7 @@ __metadata:
     ts-loader: "npm:9.5.1"
     ts-node: "npm:10.9.2"
     typescript: "npm:5.6.2"
+    usehooks-ts: "npm:^3.1.0"
     webpack: "npm:5.94.0"
     webpack-cli: "npm:5.1.4"
     webpack-merge: "npm:5.10.0"
@@ -5489,36 +5489,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-hook/latest@npm:^1.0.2":
-  version: 1.0.3
-  resolution: "@react-hook/latest@npm:1.0.3"
-  peerDependencies:
-    react: ">=16.8"
-  checksum: 10/62fde95d96a696745b0e2588ecfa8fc8cca580414a0fe0cdff3198c18972c2bcd4d4d24502635b35f856199b29c1b493abb8b4b13a15b679f07edfa3640acfe8
-  languageName: node
-  linkType: hard
-
-"@react-hook/passive-layout-effect@npm:^1.2.0":
-  version: 1.2.1
-  resolution: "@react-hook/passive-layout-effect@npm:1.2.1"
-  peerDependencies:
-    react: ">=16.8"
-  checksum: 10/217cb8aa90fb8e677672319a9a466d7752890cf4357c76df000b207696e9cc717cf2ee88080671cc9dae238a82f92093ab4f61ab2f6032d2a8db958fc7d99b5d
-  languageName: node
-  linkType: hard
-
-"@react-hook/resize-observer@npm:^2.0.0":
-  version: 2.0.2
-  resolution: "@react-hook/resize-observer@npm:2.0.2"
-  dependencies:
-    "@react-hook/latest": "npm:^1.0.2"
-    "@react-hook/passive-layout-effect": "npm:^1.2.0"
-  peerDependencies:
-    react: ">=18"
-  checksum: 10/42c76790b7b79cd7e31aeb64a8e4abc20c0f563bde369a1fc6b8509b51112221d95e707eded30ebf6e366ad17e93e21e6c906de121269954bafd2700ed44e1b0
-  languageName: node
-  linkType: hard
-
 "@rollup/plugin-babel@npm:6.0.4":
   version: 6.0.4
   resolution: "@rollup/plugin-babel@npm:6.0.4"
@@ -29114,6 +29084,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"usehooks-ts@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "usehooks-ts@npm:3.1.0"
+  dependencies:
+    lodash.debounce: "npm:^4.0.8"
+  peerDependencies:
+    react: ^16.8.0  || ^17 || ^18
+  checksum: 10/6aef8affd3c053a3040b7421816dab85eb21601c5203496a705bafc32eb973fb519a2b0ddda527962e361d248f3a1c49df130620efe871c8f89e897451ed1cc7
+  languageName: node
+  linkType: hard
+
 "user-home@npm:^2.0.0":
   version: 2.0.0
   resolution: "user-home@npm:2.0.0"