diff --git a/package-lock.json b/package-lock.json index 743cbf4a..4292a14c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1505,12 +1505,6 @@ "url": "https://opencollective.com/js-sdsl" } }, - "node_modules/@juggle/resize-observer": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", - "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==", - "license": "Apache-2.0" - }, "node_modules/@lezer/common": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.2.tgz", @@ -1788,51 +1782,6 @@ "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==", "license": "MIT" }, - "node_modules/@react-hook/latest": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@react-hook/latest/-/latest-1.0.3.tgz", - "integrity": "sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg==", - "license": "MIT", - "peerDependencies": { - "react": ">=16.8" - } - }, - "node_modules/@react-hook/passive-layout-effect": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz", - "integrity": "sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==", - "license": "MIT", - "peerDependencies": { - "react": ">=16.8" - } - }, - "node_modules/@react-hook/size": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@react-hook/size/-/size-2.1.2.tgz", - "integrity": "sha512-BmE5asyRDxSuQ9p14FUKJ0iBRgV9cROjqNG9jT/EjCM+xHha1HVqbPoT+14FQg1K7xIydabClCibUY4+1tw/iw==", - "license": "MIT", - "dependencies": { - "@react-hook/passive-layout-effect": "^1.2.0", - "@react-hook/resize-observer": "^1.2.1" - }, - "peerDependencies": { - "react": ">=16.8" - } - }, - "node_modules/@react-hook/size/node_modules/@react-hook/resize-observer": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/@react-hook/resize-observer/-/resize-observer-1.2.6.tgz", - "integrity": "sha512-DlBXtLSW0DqYYTW3Ft1/GQFZlTdKY5VAFIC4+km6IK5NiPPDFchGbEJm1j6pSgMqPRHbUQgHJX7RaR76ic1LWA==", - "license": "MIT", - "dependencies": { - "@juggle/resize-observer": "^3.3.1", - "@react-hook/latest": "^1.0.2", - "@react-hook/passive-layout-effect": "^1.2.0" - }, - "peerDependencies": { - "react": ">=16.8" - } - }, "node_modules/@rollup/plugin-virtual": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@rollup/plugin-virtual/-/plugin-virtual-3.0.2.tgz", @@ -15929,7 +15878,6 @@ "@gilbarbara/deep-equal": "^0.3.1", "@lezer/highlight": "^1.1.3", "@lezer/lr": "^1.3.3", - "@react-hook/size": "^2.1.2", "@tailwindcss/container-queries": "^0.1.1", "@tanstack/react-query": "^5.62.16", "@tanstack/react-router": "^1.95.1", diff --git a/src-web/components/core/SplitLayout.tsx b/src-web/components/core/SplitLayout.tsx index 97515c85..99317a26 100644 --- a/src-web/components/core/SplitLayout.tsx +++ b/src-web/components/core/SplitLayout.tsx @@ -1,9 +1,9 @@ -import useSize from '@react-hook/size'; import classNames from 'classnames'; import type { CSSProperties, MouseEvent as ReactMouseEvent, ReactNode } from 'react'; import React, { useCallback, useMemo, useRef, useState } from 'react'; import { useLocalStorage } from 'react-use'; import { useActiveWorkspace } from '../../hooks/useActiveWorkspace'; +import { useContainerSize } from '../../hooks/useContainerQuery'; import { clamp } from '../../lib/clamp'; import { ResizeHandle } from '../ResizeHandle'; @@ -61,7 +61,8 @@ export function SplitLayout({ minHeightPx = 0; } - const verticalBasedOnSize = useSize(containerRef.current)[0] < STACK_VERTICAL_WIDTH; + const size = useContainerSize(containerRef); + const verticalBasedOnSize = size.width < STACK_VERTICAL_WIDTH; const vertical = layout !== 'horizontal' && (layout === 'vertical' || verticalBasedOnSize); const styles = useMemo(() => { diff --git a/src-web/hooks/useContainerQuery.ts b/src-web/hooks/useContainerQuery.ts new file mode 100644 index 00000000..2d1f518a --- /dev/null +++ b/src-web/hooks/useContainerQuery.ts @@ -0,0 +1,30 @@ +import type { MutableRefObject } from 'react'; +import { useLayoutEffect, useState } from 'react'; + +export function useContainerSize(ref: MutableRefObject) { + const [size, setSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 }); + + useLayoutEffect(() => { + const el = ref.current; + if (el) { + const observer = new ResizeObserver((entries) => { + entries.forEach((entry) => { + if (entry.target === el) { + setSize({ width: entry.contentRect.width, height: entry.contentRect.height }); + } + }); + }); + + observer.observe(el); + + return () => { + observer.unobserve(el); + observer.disconnect(); + }; + } + + return undefined; + }, [ref]); + + return size; +} diff --git a/src-web/package.json b/src-web/package.json index c787a212..c2bf6baf 100644 --- a/src-web/package.json +++ b/src-web/package.json @@ -19,7 +19,6 @@ "@gilbarbara/deep-equal": "^0.3.1", "@lezer/highlight": "^1.1.3", "@lezer/lr": "^1.3.3", - "@react-hook/size": "^2.1.2", "@tailwindcss/container-queries": "^0.1.1", "@tanstack/react-query": "^5.62.16", "@tanstack/react-router": "^1.95.1",