diff --git a/packages/web-react/package.json b/packages/web-react/package.json
index 2ad4dfdfcc..553c888925 100644
--- 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
index e96f7bc42c..c08f624f1e 100644
--- a/packages/web-react/src/components/Collapse/__tests__/useResizeHeight.test.tsx
+++ b/packages/web-react/src/components/Collapse/__tests__/useResizeHeight.test.tsx
@@ -1,35 +1,24 @@
-/* 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(() => {
+ return 0;
+});
const TestComponent = () => {
- const ref = React.useRef(null);
+ const ref = useRef(null);
const height = useResizeHeight(ref);
return {height}
;
};
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();
@@ -37,13 +26,9 @@ const resize = (height: number) => {
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', () => {});
diff --git a/packages/web-react/src/components/Collapse/useResizeHeight.ts b/packages/web-react/src/components/Collapse/useResizeHeight.ts
index ca55857d07..de5afaabe2 100644
--- 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): string => {
const [height, setHeight] = useState('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
index 27d5b5d6e1..f11b1e35ef 100644
--- 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"
@@ -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"