svelte-ag 0.0.2-dev.72

package/src/lib/bits/internal/use-body-scroll-lock.svelte.ts

@@ -0,0 +1,138 @@
+import { SvelteMap } from "svelte/reactivity";
+import { type Getter, afterSleep, afterTick, box } from "svelte-toolbelt";
+import { untrack } from "svelte";
+import type { Fn } from "./types.js";
+import { isBrowser, isIOS } from "./is.js";
+import { addEventListener } from "./events.js";
+import { useId } from "./use-id.js";
+import { createSharedHook } from "./create-shared-hook.svelte.js";
+
+export type ScrollBodyOption = {
+	padding?: boolean | number;
+	margin?: boolean | number;
+};
+
+const useBodyLockStackCount = createSharedHook(() => {
+	const map = new SvelteMap<string, boolean>();
+
+	const locked = $derived.by(() => {
+		for (const value of map.values()) {
+			if (value) {
+				return true;
+			}
+		}
+		return false;
+	});
+
+	let initialBodyStyle: string | null = $state<string | null>(null);
+
+	let stopTouchMoveListener: Fn | null = null;
+
+	function resetBodyStyle() {
+		if (!isBrowser) return;
+		document.body.setAttribute("style", initialBodyStyle ?? "");
+		document.body.style.removeProperty("--scrollbar-width");
+		isIOS && stopTouchMoveListener?.();
+	}
+
+	$effect(() => {
+		const curr = locked;
+		return untrack(() => {
+			if (!curr) {
+				return;
+			}
+
+			initialBodyStyle = document.body.getAttribute("style");
+			const bodyStyle = getComputedStyle(document.body);
+
+			// TODO: account for RTL direction, etc.
+			const verticalScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+			const paddingRight = Number.parseInt(bodyStyle.paddingRight ?? "0", 10);
+
+			const config = {
+				padding: paddingRight + verticalScrollbarWidth,
+				margin: Number.parseInt(bodyStyle.marginRight ?? "0", 10),
+			};
+
+			if (verticalScrollbarWidth > 0) {
+				document.body.style.paddingRight = `${config.padding}px`;
+				document.body.style.marginRight = `${config.margin}px`;
+				document.body.style.setProperty("--scrollbar-width", `${verticalScrollbarWidth}px`);
+				document.body.style.overflow = "hidden";
+			}
+
+			if (isIOS) {
+				stopTouchMoveListener = addEventListener(
+					document,
+					"touchmove",
+					(e) => {
+						if (e.target !== document.documentElement) return;
+
+						if (e.touches.length > 1) return;
+						e.preventDefault();
+					},
+					{ passive: false }
+				);
+			}
+
+			afterTick(() => {
+				document.body.style.pointerEvents = "none";
+				document.body.style.overflow = "hidden";
+			});
+		});
+	});
+
+	$effect(() => {
+		return () => {
+			stopTouchMoveListener?.();
+		};
+	});
+
+	return {
+		get map() {
+			return map;
+		},
+		resetBodyStyle,
+	};
+});
+
+export function useBodyScrollLock(
+	initialState?: boolean | undefined,
+	restoreScrollDelay: Getter<number | null> = () => null
+) {
+	const id = useId();
+	const countState = useBodyLockStackCount();
+	if (!countState) return;
+	const _restoreScrollDelay = $derived(restoreScrollDelay());
+
+	countState.map.set(id, initialState ?? false);
+
+	const locked = box.with(
+		() => countState.map.get(id) ?? false,
+		(v) => countState.map.set(id, v)
+	);
+
+	$effect(() => {
+		return () => {
+			countState.map.delete(id);
+			// if any locks are still active, we don't reset the body style
+			if (isAnyLocked(countState.map)) return;
+
+			// if no locks are active (meaning this was the last lock), we reset the body style
+			if (_restoreScrollDelay === null) {
+				requestAnimationFrame(() => countState.resetBodyStyle());
+			} else {
+				afterSleep(_restoreScrollDelay, () => countState.resetBodyStyle());
+			}
+		};
+	});
+
+	return locked;
+}
+
+function isAnyLocked(map: Map<string, boolean>) {
+	for (const [_, value] of map) {
+		if (value) return true;
+	}
+	return false;
+}

package/src/lib/bits/internal/use-data-typeahead.svelte.ts

@@ -0,0 +1,44 @@
+import type { Getter } from "svelte-toolbelt";
+import { getNextMatch } from "./arrays.js";
+import { boxAutoReset } from "./box-auto-reset.svelte.js";
+
+export type DataTypeahead = ReturnType<typeof useDataTypeahead>;
+
+type UseDataTypeaheadOpts = {
+	onMatch: (value: string) => void;
+	getCurrentItem: () => string;
+	candidateValues: Getter<string[]>;
+	enabled: boolean;
+};
+
+export function useDataTypeahead(opts: UseDataTypeaheadOpts) {
+	// Reset `search` 1 second after it was last updated
+	const search = boxAutoReset("", 1000);
+	const candidateValues = $derived(opts.candidateValues());
+
+	function handleTypeaheadSearch(key: string) {
+		if (!opts.enabled) return;
+		if (!candidateValues.length) return;
+
+		search.current = search.current + key;
+		const currentItem = opts.getCurrentItem();
+		const currentMatch = candidateValues.find((item) => item === currentItem) ?? "";
+		const values = candidateValues.map((item) => item ?? "");
+		const nextMatch = getNextMatch(values, search.current, currentMatch);
+		const newItem = candidateValues.find((item) => item === nextMatch);
+		if (newItem) {
+			opts.onMatch(newItem);
+		}
+		return newItem;
+	}
+
+	function resetTypeahead() {
+		search.current = "";
+	}
+
+	return {
+		search,
+		handleTypeaheadSearch,
+		resetTypeahead,
+	};
+}

package/src/lib/bits/internal/use-dom-typeahead.svelte.ts

@@ -0,0 +1,44 @@
+import { getNextMatch } from "./arrays.js";
+import { boxAutoReset } from "./box-auto-reset.svelte.js";
+
+export type DOMTypeahead = ReturnType<typeof useDOMTypeahead>;
+
+type UseDOMTypeaheadOpts = {
+	onMatch?: (item: HTMLElement) => void;
+	getCurrentItem?: () => HTMLElement | null;
+};
+
+export function useDOMTypeahead(opts?: UseDOMTypeaheadOpts) {
+	// Reset `search` 1 second after it was last updated
+	const search = boxAutoReset("", 1000);
+
+	const onMatch = opts?.onMatch ?? ((node) => node.focus());
+	const getCurrentItem =
+		opts?.getCurrentItem ?? (() => document.activeElement as HTMLElement | null);
+
+	function handleTypeaheadSearch(key: string, candidates: HTMLElement[]) {
+		if (!candidates.length) return;
+
+		search.current = search.current + key;
+		const currentItem = getCurrentItem();
+
+		const currentMatch = candidates.find((item) => item === currentItem)?.textContent ?? "";
+		const values = candidates.map((item) => item.textContent ?? "");
+		const nextMatch = getNextMatch(values, search.current, currentMatch);
+		const newItem = candidates.find((item) => item.textContent === nextMatch);
+		if (newItem) {
+			onMatch(newItem);
+		}
+		return newItem;
+	}
+
+	function resetTypeahead() {
+		search.current = "";
+	}
+
+	return {
+		search,
+		handleTypeaheadSearch,
+		resetTypeahead,
+	};
+}

package/src/lib/bits/internal/use-form-control.svelte.ts

@@ -0,0 +1,17 @@
+import type { Getter } from "svelte-toolbelt";
+import { isBrowser } from "./is.js";
+
+export function useFormControl(getNode: Getter<HTMLElement | null>) {
+	const isInForm = $derived.by(() => {
+		if (!isBrowser) return false;
+		const node = getNode();
+		if (!node) return false;
+		return Boolean(node.closest("form"));
+	});
+
+	return {
+		get current() {
+			return isInForm;
+		},
+	};
+}

package/src/lib/bits/internal/use-grace-area.svelte.ts

@@ -0,0 +1,229 @@
+import { type Getter, executeCallbacks } from "svelte-toolbelt";
+import { on } from "svelte/events";
+import { watch } from "runed";
+import { boxAutoReset } from "./box-auto-reset.svelte.js";
+import { isElement, isHTMLElement } from "./is.js";
+import type { Side } from "$lib/bits/utilities/floating-layer/use-floating-layer.svelte.js";
+interface UseGraceAreaOpts {
+	enabled: Getter<boolean>;
+	triggerNode: Getter<HTMLElement | null>;
+	contentNode: Getter<HTMLElement | null>;
+	onPointerExit: () => void;
+	setIsPointerInTransit?: (value: boolean) => void;
+}
+export function useGraceArea(opts: UseGraceAreaOpts) {
+	const enabled = $derived(opts.enabled());
+
+	const isPointerInTransit = boxAutoReset(false as boolean, 300, (value) => {
+		if (enabled) {
+			opts.setIsPointerInTransit?.(value);
+		}
+	});
+
+	let pointerGraceArea = $state<Polygon | null>(null);
+
+	function handleRemoveGraceArea() {
+		pointerGraceArea = null;
+		isPointerInTransit.current = false;
+	}
+
+	function handleCreateGraceArea(e: PointerEvent, hoverTarget: HTMLElement) {
+		const currentTarget = e.currentTarget;
+		if (!isHTMLElement(currentTarget)) return;
+		const exitPoint = { x: e.clientX, y: e.clientY };
+		const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
+		const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
+		const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
+		const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);
+		pointerGraceArea = graceArea;
+		isPointerInTransit.current = true;
+	}
+
+	watch(
+		[opts.triggerNode, opts.contentNode, opts.enabled],
+		([triggerNode, contentNode, enabled]) => {
+			if (!triggerNode || !contentNode || !enabled) return;
+			const handleTriggerLeave = (e: PointerEvent) => {
+				handleCreateGraceArea(e, contentNode!);
+			};
+
+			const handleContentLeave = (e: PointerEvent) => {
+				handleCreateGraceArea(e, triggerNode!);
+			};
+
+			return executeCallbacks(
+				on(triggerNode, "pointerleave", handleTriggerLeave),
+				on(contentNode, "pointerleave", handleContentLeave)
+			);
+		}
+	);
+
+	watch(
+		() => pointerGraceArea,
+		() => {
+			const handleTrackPointerGrace = (e: PointerEvent) => {
+				if (!pointerGraceArea) return;
+				const target = e.target;
+				if (!isElement(target)) return;
+				const pointerPosition = { x: e.clientX, y: e.clientY };
+				const hasEnteredTarget =
+					opts.triggerNode()?.contains(target) || opts.contentNode()?.contains(target);
+				const isPointerOutsideGraceArea = !isPointInPolygon(
+					pointerPosition,
+					pointerGraceArea
+				);
+
+				if (hasEnteredTarget) {
+					handleRemoveGraceArea();
+				} else if (isPointerOutsideGraceArea) {
+					handleRemoveGraceArea();
+					opts.onPointerExit();
+				}
+			};
+
+			return on(document, "pointermove", handleTrackPointerGrace);
+		}
+	);
+
+	return {
+		isPointerInTransit,
+	};
+}
+
+type Point = { x: number; y: number };
+type Polygon = Point[];
+
+function getExitSideFromRect(point: Point, rect: DOMRect): Side {
+	const top = Math.abs(rect.top - point.y);
+	const bottom = Math.abs(rect.bottom - point.y);
+	const right = Math.abs(rect.right - point.x);
+	const left = Math.abs(rect.left - point.x);
+
+	switch (Math.min(top, bottom, right, left)) {
+		case left:
+			return "left";
+		case right:
+			return "right";
+		case top:
+			return "top";
+		case bottom:
+			return "bottom";
+		default:
+			throw new Error("unreachable");
+	}
+}
+
+function getPaddedExitPoints(exitPoint: Point, exitSide: Side, padding = 5) {
+	// we extend the tip of the exit point to make it easier to navigate without
+	// a minor jitter triggering a pointer exit
+	const tipPadding = padding * 1.5;
+	switch (exitSide) {
+		case "top":
+			return [
+				{ x: exitPoint.x - padding, y: exitPoint.y + padding },
+				{ x: exitPoint.x, y: exitPoint.y - tipPadding },
+				{ x: exitPoint.x + padding, y: exitPoint.y + padding },
+			];
+		case "bottom":
+			return [
+				{ x: exitPoint.x - padding, y: exitPoint.y - padding },
+				{ x: exitPoint.x, y: exitPoint.y + tipPadding },
+				{ x: exitPoint.x + padding, y: exitPoint.y - padding },
+			];
+		case "left":
+			return [
+				{ x: exitPoint.x + padding, y: exitPoint.y - padding },
+				{ x: exitPoint.x - tipPadding, y: exitPoint.y },
+				{ x: exitPoint.x + padding, y: exitPoint.y + padding },
+			];
+		case "right":
+			return [
+				{ x: exitPoint.x - padding, y: exitPoint.y - padding },
+				{ x: exitPoint.x + tipPadding, y: exitPoint.y },
+				{ x: exitPoint.x - padding, y: exitPoint.y + padding },
+			];
+	}
+}
+
+function getPointsFromRect(rect: DOMRect) {
+	const { top, right, bottom, left } = rect;
+	return [
+		{ x: left, y: top },
+		{ x: right, y: top },
+		{ x: right, y: bottom },
+		{ x: left, y: bottom },
+	];
+}
+
+// Determine if a point is inside of a polygon.
+// Based on https://github.com/substack/point-in-polygon
+function isPointInPolygon(point: Point, polygon: Polygon) {
+	const { x, y } = point;
+	let inside = false;
+	for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+		const xi = polygon[i]!.x;
+		const yi = polygon[i]!.y;
+		const xj = polygon[j]!.x;
+		const yj = polygon[j]!.y;
+
+		// prettier-ignore
+		const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi)
+		if (intersect) inside = !inside;
+	}
+
+	return inside;
+}
+
+// Returns a new array of points representing the convex hull of the given set of points.
+// https://www.nayuki.io/page/convex-hull-algorithm
+function getHull<P extends Point>(points: Readonly<Array<P>>): Array<P> {
+	const newPoints: Array<P> = points.slice();
+	newPoints.sort((a: Point, b: Point) => {
+		if (a.x < b.x) return -1;
+		else if (a.x > b.x) return +1;
+		else if (a.y < b.y) return -1;
+		else if (a.y > b.y) return +1;
+		else return 0;
+	});
+	return getHullPresorted(newPoints);
+}
+
+// Returns the convex hull, assuming that each points[i] <= points[i + 1]. Runs in O(n) time.
+function getHullPresorted<P extends Point>(points: Readonly<Array<P>>): Array<P> {
+	if (points.length <= 1) return points.slice();
+
+	const upperHull: Array<P> = [];
+	for (let i = 0; i < points.length; i++) {
+		const p = points[i]!;
+		while (upperHull.length >= 2) {
+			const q = upperHull[upperHull.length - 1]!;
+			const r = upperHull[upperHull.length - 2]!;
+			if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upperHull.pop();
+			else break;
+		}
+		upperHull.push(p);
+	}
+	upperHull.pop();
+
+	const lowerHull: Array<P> = [];
+	for (let i = points.length - 1; i >= 0; i--) {
+		const p = points[i]!;
+		while (lowerHull.length >= 2) {
+			const q = lowerHull[lowerHull.length - 1]!;
+			const r = lowerHull[lowerHull.length - 2]!;
+			if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) lowerHull.pop();
+			else break;
+		}
+		lowerHull.push(p);
+	}
+	lowerHull.pop();
+
+	if (
+		upperHull.length === 1 &&
+		lowerHull.length === 1 &&
+		upperHull[0]!.x === lowerHull[0]!.x &&
+		upperHull[0]!.y === lowerHull[0]!.y
+	)
+		return upperHull;
+	else return upperHull.concat(lowerHull);
+}

package/src/lib/bits/internal/use-id.ts

@@ -0,0 +1,9 @@
+globalThis.bitsIdCounter ??= { current: 0 };
+
+/**
+ * Generates a unique ID based on a global counter.
+ */
+export function useId(prefix = "bits") {
+	globalThis.bitsIdCounter.current++;
+	return `${prefix}-${globalThis.bitsIdCounter.current}`;
+}

package/src/lib/bits/internal/use-resize-observer.svelte.ts

@@ -0,0 +1,19 @@
+import type { Getter } from "svelte-toolbelt";
+
+export function useResizeObserver(node: Getter<HTMLElement | null>, onResize: () => void) {
+	$effect(() => {
+		let rAF = 0;
+		const _node = node();
+		if (!_node) return;
+		const resizeObserver = new ResizeObserver(() => {
+			cancelAnimationFrame(rAF);
+			rAF = window.requestAnimationFrame(onResize);
+		});
+
+		resizeObserver.observe(_node);
+		return () => {
+			window.cancelAnimationFrame(rAF);
+			resizeObserver.unobserve(_node);
+		};
+	});
+}

package/src/lib/bits/internal/use-roving-focus.svelte.ts

@@ -0,0 +1,141 @@
+import { type ReadableBox, box } from "svelte-toolbelt";
+import { getElemDirection } from "./locale.js";
+import { getDirectionalKeys } from "./get-directional-keys.js";
+import { kbd } from "./kbd.js";
+import { isBrowser } from "./is.js";
+import type { Orientation } from "$lib/shared/index.js";
+
+type UseRovingFocusProps = {
+	/**
+	 * The selector used to find the focusable candidates.
+	 */
+	candidateAttr: string;
+
+	/**
+	 * Custom candidate selector
+	 */
+	candidateSelector?: string;
+
+	/**
+	 * The id of the root node
+	 */
+	rootNodeId: ReadableBox<string>;
+
+	/**
+	 * Whether to loop through the candidates when reaching the end.
+	 */
+	loop: ReadableBox<boolean>;
+
+	/**
+	 * The orientation of the roving focus group. Used
+	 * to determine how keyboard navigation should work.
+	 */
+	orientation: ReadableBox<Orientation>;
+
+	/**
+	 * A callback function called when a candidate is focused.
+	 */
+	onCandidateFocus?: (node: HTMLElement) => void;
+};
+
+export type UseRovingFocusReturn = ReturnType<typeof useRovingFocus>;
+
+export function useRovingFocus(props: UseRovingFocusProps) {
+	const currentTabStopId = box<string | null>(null);
+
+	function getCandidateNodes() {
+		if (!isBrowser) return [];
+		const node = document.getElementById(props.rootNodeId.current);
+		if (!node) return [];
+
+		if (props.candidateSelector) {
+			const candidates = Array.from(
+				node.querySelectorAll<HTMLElement>(props.candidateSelector)
+			);
+			return candidates;
+		} else {
+			const candidates = Array.from(
+				node.querySelectorAll<HTMLElement>(`[${props.candidateAttr}]:not([data-disabled])`)
+			);
+			return candidates;
+		}
+	}
+
+	function focusFirstCandidate() {
+		const items = getCandidateNodes();
+		if (!items.length) return;
+		items[0]?.focus();
+	}
+
+	function handleKeydown(
+		node: HTMLElement | null | undefined,
+		e: KeyboardEvent,
+		both: boolean = false
+	) {
+		const rootNode = document.getElementById(props.rootNodeId.current);
+		if (!rootNode || !node) return;
+
+		const items = getCandidateNodes();
+		if (!items.length) return;
+
+		const currentIndex = items.indexOf(node);
+		const dir = getElemDirection(rootNode);
+		const { nextKey, prevKey } = getDirectionalKeys(dir, props.orientation.current);
+		const loop = props.loop.current;
+
+		const keyToIndex = {
+			[nextKey]: currentIndex + 1,
+			[prevKey]: currentIndex - 1,
+			[kbd.HOME]: 0,
+			[kbd.END]: items.length - 1,
+		};
+
+		if (both) {
+			const altNextKey = nextKey === kbd.ARROW_DOWN ? kbd.ARROW_RIGHT : kbd.ARROW_DOWN;
+			const altPrevKey = prevKey === kbd.ARROW_UP ? kbd.ARROW_LEFT : kbd.ARROW_UP;
+			keyToIndex[altNextKey] = currentIndex + 1;
+			keyToIndex[altPrevKey] = currentIndex - 1;
+		}
+
+		let itemIndex = keyToIndex[e.key];
+		if (itemIndex === undefined) return;
+		e.preventDefault();
+
+		if (itemIndex < 0 && loop) {
+			itemIndex = items.length - 1;
+		} else if (itemIndex === items.length && loop) {
+			itemIndex = 0;
+		}
+
+		const itemToFocus = items[itemIndex];
+		if (!itemToFocus) return;
+		itemToFocus.focus();
+		currentTabStopId.current = itemToFocus.id;
+		props.onCandidateFocus?.(itemToFocus);
+		return itemToFocus;
+	}
+
+	function getTabIndex(node: HTMLElement | null | undefined) {
+		const items = getCandidateNodes();
+		const anyActive = currentTabStopId.current !== null;
+
+		if (node && !anyActive && items[0] === node) {
+			currentTabStopId.current = node.id;
+			return 0;
+		} else if (node?.id === currentTabStopId.current) {
+			return 0;
+		}
+
+		return -1;
+	}
+
+	return {
+		setCurrentTabStopId(id: string) {
+			currentTabStopId.current = id;
+		},
+		getTabIndex,
+		handleKeydown,
+		focusFirstCandidate,
+		currentTabStopId,
+	};
+}

package/src/lib/bits/internal/use-size.svelte.ts

@@ -0,0 +1,60 @@
+/// <reference types="resize-observer-browser" />
+
+import { untrack } from "svelte";
+import { type WritableBox, afterTick } from "svelte-toolbelt";
+
+export function useSize(node: WritableBox<HTMLElement | null>) {
+	let size = $state<{ width: number; height: number } | undefined>(undefined);
+
+	$effect(() => {
+		const currNode = node.current;
+		if (!currNode) {
+			size = undefined;
+			return;
+		}
+		afterTick(() => {
+			if (!currNode) return;
+			size = {
+				width: currNode.offsetWidth,
+				height: currNode.offsetHeight,
+			};
+		});
+
+		const resizeObserver = new ResizeObserver((entries) => {
+			if (!Array.isArray(entries) || !entries.length) return;
+
+			const entry = entries[0];
+			if (!entry) return;
+
+			let width: number;
+			let height: number;
+
+			if ("borderBoxSize" in entry) {
+				const borderSizeEntry = entry.borderBoxSize;
+				const borderSize = Array.isArray(borderSizeEntry)
+					? borderSizeEntry[0]
+					: borderSizeEntry;
+				width = borderSize.inlineSize;
+				height = borderSize.blockSize;
+			} else {
+				width = currNode.offsetWidth;
+				height = currNode.offsetHeight;
+			}
+
+			untrack(() => (size = { width, height }));
+		});
+
+		resizeObserver.observe(currNode, { box: "border-box" });
+
+		return () => {
+			if (!currNode) return;
+			resizeObserver.unobserve(currNode);
+		};
+	});
+
+	return {
+		get value() {
+			return size;
+		},
+	};
+}