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

…ow object

refs #DS-1465

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",

packages/web-react/src/components/Collapse/__tests__/useResizeHeight.test.tsx

@@ -1,49 +1,34 @@
-/* eslint-disable jest/no-commented-out-tests */
-/**
- * Disabled because we are unable to simulate and subsequently test the correct behavior of the useResizeObserver hook.
- * But we do not want to throw away the know-how about testing that hook in code yet.
- *
- * More information https://jira.lmc.cz/browse/DS-549
- *
- * @todo either we make this test work in https://jira.lmc.cz/browse/DS-549 or replaced it with visual test
- */
-
-/*
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
-import React from 'react';
-import { ResizeObserver } from '@juggle/resize-observer';
+import React, { useRef } from 'react';
 import { useResizeHeight } from '../useResizeHeight';
 
-jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => cb());
-jest.mock('@juggle/resize-observer');
+jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb: FrameRequestCallback) => {
+  return 0;
+});
 
 const TestComponent = () => {
-  const ref = React.useRef(null);
+  const ref = useRef(null);
   const height = useResizeHeight(ref);
 
   return <div ref={ref}>{height}</div>;
 };
 
 const resize = (height: number) => {
-  ResizeObserver.mockImplementation((cb) => {
+  global.ResizeObserver = jest.fn().mockImplementation((cb) => {
     cb([{ contentRect: { height } }]);
 
-    return { observe: jest.fn, disconnect: jest.fn, unobserve: jest.fn };
+    return { observe: jest.fn(), disconnect: jest.fn(), unobserve: jest.fn() };
   });
 
   const { container } = render(<TestComponent />);
 
   return container.textContent;
 };
 
-describe.skip('useResizeHeight', () => {
+describe('useResizeHeight', () => {
   it('should return simulated height', () => {
     expect(resize(100)).toBe('100px');
     expect(resize(200)).toBe('200px');
   });
 });
-*/
-
-// eslint-disable-next-line jest/no-disabled-tests, jest/expect-expect, @typescript-eslint/no-empty-function
-it.skip('skip', () => {});

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;
 };

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"
@@ -29113,6 +29083,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"