build(deps): bump usehooks-ts from 2.12.1 to 3.0.2 (#1565)

* build(deps): bump usehooks-ts from 2.12.1 to 3.0.2

Bumps [usehooks-ts](https://github.com/juliencrn/usehooks-ts) from 2.12.1 to 3.0.2.
- [Release notes](https://github.com/juliencrn/usehooks-ts/releases)
- [Commits](https://github.com/juliencrn/usehooks-ts/compare/[email protected]@3.0.2)

---
updated-dependencies:
- dependency-name: usehooks-ts
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <[email protected]>

* adaptation to the new usehooks version

* fix plots visivility

* fix plots visibility after changing tab

* revert isVisible value to false

* build(deps): bump @types/node from 20.14.2 to 20.14.11 (#1682)

Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.14.2 to 20.14.11.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

---
updated-dependencies:
- dependency-name: "@types/node"
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: NiEkOKsU <[email protected]>
Co-authored-by: Bartłomiej Kozera <[email protected]>

package.json

@@ -41,7 +41,6 @@
 		"react-dnd": "^16.0.1",
 		"react-dom": "^17.0.2",
 		"react-hooks-visible": "^1.1.1",
-		"react-merge-refs": "^2.1.1",
 		"react-scripts": "5.0.1",
 		"set-interval-async": "^3.0.3",
 		"signals": "^1.0.0",
@@ -50,7 +49,7 @@
 		"throttle-debounce": "^5.0.2",
 		"typescript": "^5.2.2",
 		"use-interval": "^1.4.0",
-		"usehooks-ts": "^2.12.1",
+		"usehooks-ts": "^3.0.2",
 		"web-vitals": "^4.2.0"
 	},
 	"overrides": {

src/JsRoot/hook/useJsRootCanvas.tsx

@@ -1,20 +1,20 @@
 import { redraw, resize, settings } from 'jsroot';
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useVisible } from 'react-hooks-visible';
-import { mergeRefs } from 'react-merge-refs';
 import { throttle } from 'throttle-debounce';
-import { useElementSize } from 'usehooks-ts';
+import { useResizeObserver } from 'usehooks-ts';
 
 export const useJsRootCanvas = (redrawParam: string) => {
-	const [resizeRef, { width: resizeWidth, height: resizeHeight }] = useElementSize();
 	// Custom react hook, visible contains the percentage of the containterEl
 	// that is currently visible on screen
 	const [containerEl, visible] = useVisible<HTMLDivElement>();
-
 	const [obj, setObj] = useState<Object | undefined>(undefined);
 	const [drawn, setDrawn] = useState(false);
 	const [isVisible, setIsVisible] = useState(false);
 	const visibleRef = useRef(isVisible);
+	const { width: resizeWidth, height: resizeHeight } = useResizeObserver({
+		ref: containerEl
+	});
 
 	useEffect(() => {
 		// Update isVisible if more than 30% of containerEl is visible
@@ -63,8 +63,6 @@ export const useJsRootCanvas = (redrawParam: string) => {
 			if (!isVisible) return;
 
 			setDrawn(old => {
-				if (old) return true;
-
 				const obj = updateObject();
 
 				if (!obj) return old;
@@ -79,12 +77,15 @@ export const useJsRootCanvas = (redrawParam: string) => {
 	const setObjToDraw = useCallback(
 		(obj: any) => {
 			setObj(obj);
+
 			setDrawn(false);
 		},
 		[setObj, setDrawn]
 	);
 
-	const ref = useMemo(() => mergeRefs([resizeRef, containerEl]), [resizeRef, containerEl]);
+	const ref = useMemo(() => {
+		return containerEl;
+	}, [containerEl]);
 
 	return {
 		isVisible,