@a-type/ui 1.1.19 → 1.1.20

package/dist/esm/hooks/useVisualViewportOffset.js

@@ -1,30 +1,76 @@
 // @unocss-include
-import { useEffect } from 'react';
+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) {
+    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 (!('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;
+        const update = () => {
+            setIsKeyboardOpen(virtualKeyboard.boundingRect.height > 0);
+        };
+        update();
+        virtualKeyboard.addEventListener('geometrychange', update);
+        return () => {
+            virtualKeyboard.removeEventListener('geometrychange', update);
+        };
+    }, []);
+    if (virtualKeyboardBehavior === 'displace') {
+        return isViewportConstrained;
+    }
+    return isKeyboardOpen;
+}
+function useReactToViewportChanges(cb, disable) {
+    const stableCb = useStableCallback(cb);
     useEffect(() => {
         if (disable)
             return;
-        const viewport = typeof window === 'undefined' ? undefined : window.visualViewport;
+        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`);
-            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`);
+            stableCb(viewport);
+        };
+        let prevTimeout;
+        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]);
 }
 //# sourceMappingURL=useVisualViewportOffset.js.map

package/dist/esm/hooks/useVisualViewportOffset.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVisualViewportOffset.js","sourceRoot":"","sources":["../../../src/hooks/useVisualViewportOffset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;GAEG;AACH,MAAM,UAAU,uBAAuB,CAAC,OAAiB;IACxD,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,OAAO;YAAE,OAAO;QAEpB,MAAM,QAAQ,GACb,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC;QAEnE,IAAI,CAAC,QAAQ,EAAE;YACd,OAAO;SACP;QAED,MAAM,MAAM,GAAG,GAAG,EAAE;YACnB,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACzC,0BAA0B,EAC1B,GAAG,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAC3C,CAAC;YACF,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACzC,mBAAmB,EACnB,GAAG,QAAQ,CAAC,MAAM,IAAI,CACtB,CAAC;YACF,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACzC,kBAAkB,EAClB,GAAG,QAAQ,CAAC,KAAK,IAAI,CACrB,CAAC;YACF,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACzC,uBAAuB,EACvB,GAAG,QAAQ,CAAC,SAAS,IAAI,CACzB,CAAC;YACF,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACzC,wBAAwB,EACxB,GAAG,QAAQ,CAAC,UAAU,IAAI,CAC1B,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,EAAE,CAAC;QAET,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC7D,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAE5C,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YAC/C,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAC9C,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;AACf,CAAC"}
+{"version":3,"file":"useVisualViewportOffset.js","sourceRoot":"","sources":["../../../src/hooks/useVisualViewportOffset.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "1.1.19",
+  "version": "1.1.20",
   "type": "module",
   "files": [
     "/dist",

package/src/components/input/Input.tsx

@@ -1,10 +1,11 @@
 import classNames from 'clsx';
 import {
 	ComponentProps,
-	ComponentPropsWithRef,
 	FocusEvent,
 	forwardRef,
 	useCallback,
+	useEffect,
+	useState,
 } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 
@@ -20,10 +21,23 @@ export interface InputProps extends ComponentProps<'input'> {
 	variant?: 'default' | 'primary';
 	autoSelect?: boolean;
 	asChild?: boolean;
+	/** Shuffle between random placeholders */
+	placeholders?: string[];
+	placeholdersIntervalMs?: number;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-	{ className, autoSelect, onFocus, variant: _, asChild, ...props },
+	{
+		className,
+		autoSelect,
+		onFocus,
+		variant: _,
+		asChild,
+		placeholders,
+		placeholder,
+		placeholdersIntervalMs = 5000,
+		...props
+	},
 	ref,
 ) {
 	const handleFocus = useCallback(
@@ -36,6 +50,24 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
 		[onFocus, autoSelect],
 	);
 
+	const [randomPlaceholder, setRandomPlaceholder] = useState<
+		string | undefined
+	>(
+		placeholders
+			? placeholders[Math.floor(Math.random() * placeholders.length)]
+			: undefined,
+	);
+	useEffect(() => {
+		if (placeholders) {
+			const interval = setInterval(() => {
+				setRandomPlaceholder(
+					placeholders[Math.floor(Math.random() * placeholders.length)],
+				);
+			}, placeholdersIntervalMs);
+			return () => clearInterval(interval);
+		}
+	}, [placeholders, placeholdersIntervalMs]);
+
 	const Component = asChild ? Slot : 'input';
 
 	return (
@@ -44,6 +76,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
 			onFocus={handleFocus}
 			className={classNames(inputClassName, className)}
 			ref={ref}
+			placeholder={placeholder ?? randomPlaceholder}
 		/>
 	);
 });

package/src/components/layouts/PageNav.tsx

@@ -3,6 +3,7 @@
 import classNames from 'clsx';
 import { HTMLAttributes, useRef } from 'react';
 import { useBoundsCssVars } from '../../hooks.js';
+import { HideWhileKeyboardOpen } from '../utility/HideWhileKeyboardOpen.js';
 
 export function PageNav({
 	className,
@@ -17,8 +18,9 @@ export function PageNav({
 		height: '--nav-height',
 		ready: '--nav-ready',
 	});
+
 	return (
-		<div
+		<HideWhileKeyboardOpen
 			{...props}
 			className={classNames(
 				'layer-components:([grid-area:nav] relative z-nav pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))])',
@@ -28,6 +30,6 @@ export function PageNav({
 			ref={ref}
 		>
 			{children}
-		</div>
+		</HideWhileKeyboardOpen>
 	);
 }

package/src/components/masonry/masonry.tsx

@@ -1,4 +1,5 @@
 import { debounce } from '@a-type/utils';
+import clsx from 'clsx';
 import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
 
 interface Layout {
@@ -240,7 +241,11 @@ export function Masonry({
 	}, [layout, ref]);
 
 	return (
-		<div ref={ref} style={initialStyle} className={className}>
+		<div
+			ref={ref}
+			style={initialStyle}
+			className={clsx('layer-components:z-1', className)}
+		>
 			{children}
 		</div>
 	);

package/src/components/provider/Provider.tsx

@@ -27,7 +27,9 @@ export function Provider({
 	virtualKeyboardBehavior = 'displace',
 }: ProviderProps) {
 	useVisualViewportOffset(disableViewportOffset);
-	useVirtualKeyboardBehavior(virtualKeyboardBehavior);
+	const supportedVirtualKeyboardBehavior =
+		'virtualKeyboard' in navigator ? virtualKeyboardBehavior : 'displace';
+	useVirtualKeyboardBehavior(supportedVirtualKeyboardBehavior);
 
 	const otherStuff = (
 		<>
@@ -41,7 +43,9 @@ export function Provider({
 
 	if (disableParticles)
 		return (
-			<ConfigContext.Provider value={{ virtualKeyboardBehavior }}>
+			<ConfigContext.Provider
+				value={{ virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }}
+			>
 				<TooltipProvider>
 					{children}
 					{otherStuff}
@@ -50,7 +54,9 @@ export function Provider({
 		);
 
 	return (
-		<ConfigContext.Provider value={{ virtualKeyboardBehavior }}>
+		<ConfigContext.Provider
+			value={{ virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }}
+		>
 			<TooltipProvider>
 				<ParticleLayer>
 					{children}

package/src/components/utility/HideWhileKeyboardOpen.tsx

@@ -0,0 +1,26 @@
+import { Slot } from '@radix-ui/react-slot';
+import { useIsKeyboardOpen } from '../../hooks.js';
+import clsx from 'clsx';
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface HideWhileKeyboardOpenProps
+	extends HTMLAttributes<HTMLDivElement> {
+	asChild?: boolean;
+}
+
+export const HideWhileKeyboardOpen = forwardRef<
+	HTMLDivElement,
+	HideWhileKeyboardOpenProps
+>(function HideWhileKeyboardOpen({ asChild, className, ...rest }, ref) {
+	const isKeyboardOpen = useIsKeyboardOpen();
+
+	const Comp = asChild ? Slot : 'div';
+
+	return (
+		<Comp
+			ref={ref}
+			className={clsx(isKeyboardOpen && 'layer-responsive:hidden', className)}
+			{...rest}
+		/>
+	);
+});

package/src/hooks/useVisualViewportOffset.ts

@@ -1,50 +1,108 @@
-import { useEffect } from 'react';
+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`,
-			);
-			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`,
-			);
+			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]);
 }