@a-type/ui 3.0.43 → 3.1.0-beta.4

package/src/hooks/useVisualViewportOffset.ts

@@ -6,32 +6,35 @@ import { useStableCallback } from './useStableCallback.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);
+	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 || typeof window === 'undefined',
+	);
 }
 
 export function useIsKeyboardOpen() {
@@ -49,6 +52,9 @@ export function useIsKeyboardOpen() {
 		boolean | undefined
 	>(undefined);
 	useEffect(() => {
+		if (typeof window === 'undefined') {
+			return;
+		}
 		function handleOpen() {
 			setSimulateKeyboardOpen(true);
 		}
@@ -65,6 +71,9 @@ export function useIsKeyboardOpen() {
 
 	const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
 	useEffect(() => {
+		if (typeof navigator === 'undefined' || typeof window === 'undefined') {
+			return;
+		}
 		if (!('virtualKeyboard' in navigator)) {
 			// no support
 			console.warn(
@@ -111,6 +120,9 @@ function useReactToViewportChanges(
 	const stableCb = useStableCallback(cb);
 	useEffect(() => {
 		if (disable) return;
+		if (typeof window === 'undefined') {
+			return;
+		}
 
 		const viewport = window.visualViewport;
 		if (!viewport) {