@a-type/ui 1.1.18 → 1.1.20

package/src/hooks/useVisualViewportOffset.ts

@@ -1,38 +1,108 @@
 import { useEffect, useState } from 'react';
+import { useStableCallback } from './useStableCallback.js';
+import { useConfig } from '../components/provider.js';
 
 /**
  * Applies bottom offset px as a CSS custom property to the document root.
  */
 export function useVisualViewportOffset(disable?: boolean) {
+	useReactToViewportChanges((viewport) => {
+		document.documentElement.style.setProperty(
+			'--viewport-bottom-offset',
+			`${window.innerHeight - viewport.height - viewport.offsetTop}px`,
+		);
+		document.documentElement.style.setProperty(
+			'--viewport-height',
+			`${viewport.height}px`,
+		);
+		document.documentElement.style.setProperty(
+			'--viewport-width',
+			`${viewport.width}px`,
+		);
+		document.documentElement.style.setProperty(
+			'--viewport-top-offset',
+			`${viewport.offsetTop}px`,
+		);
+		document.documentElement.style.setProperty(
+			'--viewport-left-offset',
+			`${viewport.offsetLeft}px`,
+		);
+		document.documentElement.style.setProperty(
+			'--keyboard-open',
+			viewport.height < window.innerHeight ? '1' : '0',
+		);
+	}, disable);
+}
+
+export function useIsKeyboardOpen() {
+	const { virtualKeyboardBehavior } = useConfig();
+
+	const [isViewportConstrained, setIsViewportConstrained] = useState(false);
+	useReactToViewportChanges((viewport) => {
+		setIsViewportConstrained(viewport.height < window.innerHeight);
+	}, virtualKeyboardBehavior !== 'displace');
+
+	const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
 	useEffect(() => {
-		if (disable) return;
+		if (!('virtualKeyboard' in navigator)) {
+			// no support
+			console.warn(
+				`virtual keyboard behavior set to 'overlay', but virtualKeyboard API is not supported in this browser.`,
+			);
+			return;
+		}
+		const virtualKeyboard = navigator.virtualKeyboard as any;
+		const update = () => {
+			setIsKeyboardOpen(virtualKeyboard.boundingRect.height > 0);
+		};
+		update();
+		virtualKeyboard.addEventListener('geometrychange', update);
+		return () => {
+			virtualKeyboard.removeEventListener('geometrychange', update);
+		};
+	}, []);
+
+	if (virtualKeyboardBehavior === 'displace') {
+		return isViewportConstrained;
+	}
+
+	return isKeyboardOpen;
+}
 
-		const viewport =
-			typeof window === 'undefined' ? undefined : window.visualViewport;
+function useReactToViewportChanges(
+	cb: (viewport: VisualViewport) => void,
+	disable?: boolean,
+) {
+	const stableCb = useStableCallback(cb);
+	useEffect(() => {
+		if (disable) return;
 
+		const viewport = window.visualViewport;
 		if (!viewport) {
 			return;
 		}
 
 		const update = () => {
-			document.documentElement.style.setProperty(
-				'--viewport-bottom-offset',
-				`${window.innerHeight - viewport.height}px`,
-			);
-			document.documentElement.style.setProperty(
-				'--viewport-height',
-				`${viewport.height}px`,
-			);
+			stableCb(viewport);
+		};
+		let prevTimeout: number | undefined;
+		const debouncedUpdate = () => {
+			if (prevTimeout) {
+				clearTimeout(prevTimeout);
+			}
+			prevTimeout = window.setTimeout(update, 50);
 		};
 
 		update();
 
 		window.addEventListener('scroll', update, { passive: true });
 		viewport.addEventListener('resize', update);
+		viewport.addEventListener('scroll', debouncedUpdate, { passive: true });
 
 		return () => {
 			viewport.removeEventListener('resize', update);
 			window.removeEventListener('scroll', update);
+			viewport.removeEventListener('scroll', debouncedUpdate);
 		};
-	}, [disable]);
+	}, [stableCb, disable]);
 }