diff --git a/client/package.json b/client/package.json index 1b33c3791..3d033cbcd 100644 --- a/client/package.json +++ b/client/package.json @@ -87,7 +87,7 @@ "react-i18next": "^15.4.0", "react-lazy-load-image-component": "^1.6.0", "react-markdown": "^9.0.1", - "react-resizable-panels": "^2.1.8", + "react-resizable-panels": "^3.0.2", "react-router-dom": "^6.11.2", "react-speech-recognition": "^3.10.0", "react-textarea-autosize": "^8.4.0", diff --git a/client/src/components/SidePanel/SidePanel.tsx b/client/src/components/SidePanel/SidePanel.tsx index 71cddfc8d..d9b125647 100644 --- a/client/src/components/SidePanel/SidePanel.tsx +++ b/client/src/components/SidePanel/SidePanel.tsx @@ -78,7 +78,7 @@ const SidePanel = ({ setFullCollapse(true); localStorage.setItem('fullPanelCollapse', 'true'); panelRef.current?.collapse(); - }, []); + }, [panelRef, setMinSize, setIsCollapsed, setFullCollapse, setCollapsedSize]); const Links = useSideNavLinks({ endpoint, @@ -107,7 +107,17 @@ const SidePanel = ({ } else { panelRef.current?.expand(); } - }, [isCollapsed, newUser, setNewUser, navCollapsedSize]); + }, [ + newUser, + panelRef, + setNewUser, + setMinSize, + isCollapsed, + setIsCollapsed, + setFullCollapse, + setCollapsedSize, + navCollapsedSize, + ]); return ( <> @@ -137,7 +147,7 @@ const SidePanel = ({ normalizeLayout(calculateLayout()), [calculateLayout]); - const throttledSaveLayout = useCallback( - throttle((sizes: number[]) => { - const normalizedSizes = normalizeLayout(sizes); - localStorage.setItem('react-resizable-panels:layout', JSON.stringify(normalizedSizes)); - }, 350), + const throttledSaveLayout = useMemo( + () => + throttle((sizes: number[]) => { + const normalizedSizes = normalizeLayout(sizes); + localStorage.setItem('react-resizable-panels:layout', JSON.stringify(normalizedSizes)); + }, 350), [], ); diff --git a/package-lock.json b/package-lock.json index 8f6c00d05..2bc3d00c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2579,7 +2579,7 @@ "react-i18next": "^15.4.0", "react-lazy-load-image-component": "^1.6.0", "react-markdown": "^9.0.1", - "react-resizable-panels": "^2.1.8", + "react-resizable-panels": "^3.0.2", "react-router-dom": "^6.11.2", "react-speech-recognition": "^3.10.0", "react-textarea-autosize": "^8.4.0", @@ -4623,6 +4623,16 @@ "node": ">=0.10.0" } }, + "client/node_modules/react-resizable-panels": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.2.tgz", + "integrity": "sha512-j4RNII75fnHkLnbsTb5G5YsDvJsSEZrJK2XSF2z0Tc2jIonYlIVir/Yh/5LvcUFCfs1HqrMAoiBFmIrRjC4XnA==", + "license": "MIT", + "peerDependencies": { + "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc", + "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" + } + }, "client/node_modules/ts-jest": { "version": "29.2.5", "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.2.5.tgz", @@ -39588,16 +39598,6 @@ } } }, - "node_modules/react-resizable-panels": { - "version": "2.1.8", - "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.1.8.tgz", - "integrity": "sha512-oDvD0sw34Ecx00cQFLiRJpAE2fCgNLBr8DMrBzkrsaUiLpAycIQoY3eAWfMblDql3pTIMZ60wJ/P89RO1htM2w==", - "license": "MIT", - "peerDependencies": { - "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc", - "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" - } - }, "node_modules/react-router": { "version": "6.22.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.0.tgz",