@octanejs/aria 0.0.1

package/src/utils/platform.ts

@@ -0,0 +1,74 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/utils/platform.ts).
+// octane adaptation: `navigator.userAgentData` is not in TS's DOM lib, so it is read through a cast.
+
+function testUserAgent(re: RegExp) {
+	if (typeof window === 'undefined' || window.navigator == null) {
+		return false;
+	}
+	let brands = (window.navigator as any)['userAgentData']?.brands;
+	return (
+		(Array.isArray(brands) &&
+			brands.some((brand: { brand: string; version: string }) => re.test(brand.brand))) ||
+		re.test(window.navigator.userAgent)
+	);
+}
+
+function testPlatform(re: RegExp) {
+	return typeof window !== 'undefined' && window.navigator != null
+		? re.test((window.navigator as any)['userAgentData']?.platform || window.navigator.platform)
+		: false;
+}
+
+function cached(fn: () => boolean) {
+	if (process.env.NODE_ENV === 'test') {
+		return fn;
+	}
+
+	let res: boolean | null = null;
+	return () => {
+		if (res == null) {
+			res = fn();
+		}
+		return res;
+	};
+}
+
+export const isMac: () => boolean = cached(function () {
+	return testPlatform(/^Mac/i);
+});
+
+export const isIPhone: () => boolean = cached(function () {
+	return testPlatform(/^iPhone/i);
+});
+
+export const isIPad: () => boolean = cached(function () {
+	return (
+		testPlatform(/^iPad/i) ||
+		// iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+		(isMac() && navigator.maxTouchPoints > 1)
+	);
+});
+
+export const isIOS: () => boolean = cached(function () {
+	return isIPhone() || isIPad();
+});
+
+export const isAppleDevice: () => boolean = cached(function () {
+	return isMac() || isIOS();
+});
+
+export const isWebKit: () => boolean = cached(function () {
+	return testUserAgent(/AppleWebKit/i) && !isChrome();
+});
+
+export const isChrome: () => boolean = cached(function () {
+	return testUserAgent(/Chrome/i);
+});
+
+export const isAndroid: () => boolean = cached(function () {
+	return testUserAgent(/Android/i);
+});
+
+export const isFirefox: () => boolean = cached(function () {
+	return testUserAgent(/Firefox/i);
+});

package/src/utils/runAfterTransition.ts

@@ -0,0 +1,114 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/utils/runAfterTransition.ts).
+
+// We store a global list of elements that are currently transitioning,
+// mapped to a set of CSS properties that are transitioning for that element.
+// This is necessary rather than a simple count of transitions because of browser
+// bugs, e.g. Chrome sometimes fires both transitionend and transitioncancel rather
+// than one or the other. So we need to track what's actually transitioning so that
+// we can ignore these duplicate events.
+import { getEventTarget } from './shadowdom/DOMFunctions';
+let transitionsByElement = new Map<EventTarget, Set<string>>();
+
+// A list of callbacks to call once there are no transitioning elements.
+let transitionCallbacks = new Set<() => void>();
+
+function setupGlobalEvents() {
+	if (typeof window === 'undefined') {
+		return;
+	}
+
+	function isTransitionEvent(event: Event): event is TransitionEvent {
+		return 'propertyName' in event;
+	}
+
+	let onTransitionStart = (e: Event) => {
+		let eventTarget = getEventTarget(e);
+		if (!isTransitionEvent(e) || !eventTarget) {
+			return;
+		}
+		// Add the transitioning property to the list for this element.
+		let transitions = transitionsByElement.get(eventTarget);
+		if (!transitions) {
+			transitions = new Set();
+			transitionsByElement.set(eventTarget, transitions);
+
+			// The transitioncancel event must be registered on the element itself, rather than as a global
+			// event. This enables us to handle when the node is deleted from the document while it is transitioning.
+			// In that case, the cancel event would have nowhere to bubble to so we need to handle it directly.
+			eventTarget.addEventListener('transitioncancel', onTransitionEnd, {
+				once: true,
+			});
+		}
+
+		transitions.add(e.propertyName);
+	};
+
+	let onTransitionEnd = (e: Event) => {
+		let eventTarget = getEventTarget(e);
+		if (!isTransitionEvent(e) || !eventTarget) {
+			return;
+		}
+		// Remove property from list of transitioning properties.
+		let properties = transitionsByElement.get(eventTarget);
+		if (!properties) {
+			return;
+		}
+
+		properties.delete(e.propertyName);
+
+		// If empty, remove transitioncancel event, and remove the element from the list of transitioning elements.
+		if (properties.size === 0) {
+			eventTarget.removeEventListener('transitioncancel', onTransitionEnd);
+			transitionsByElement.delete(eventTarget);
+		}
+
+		// If no transitioning elements, call all of the queued callbacks.
+		if (transitionsByElement.size === 0) {
+			for (let cb of transitionCallbacks) {
+				cb();
+			}
+
+			transitionCallbacks.clear();
+		}
+	};
+
+	document.body.addEventListener('transitionrun', onTransitionStart);
+	document.body.addEventListener('transitionend', onTransitionEnd);
+}
+
+if (typeof document !== 'undefined') {
+	if (document.readyState !== 'loading') {
+		setupGlobalEvents();
+	} else {
+		document.addEventListener('DOMContentLoaded', setupGlobalEvents);
+	}
+}
+
+/**
+ * Cleans up any elements that are no longer in the document.
+ * This is necessary because we can't rely on transitionend events to fire
+ * for elements that are removed from the document while transitioning.
+ */
+function cleanupDetachedElements() {
+	for (const [eventTarget] of transitionsByElement) {
+		// Similar to `eventTarget instanceof Element && !eventTarget.isConnected`, but avoids
+		// the explicit instanceof check, since it may be different in different contexts.
+		if ('isConnected' in eventTarget && !eventTarget.isConnected) {
+			transitionsByElement.delete(eventTarget);
+		}
+	}
+}
+
+export function runAfterTransition(fn: () => void): void {
+	// Wait one frame to see if an animation starts, e.g. a transition on mount.
+	requestAnimationFrame(() => {
+		cleanupDetachedElements();
+		// If no transitions are running, call the function immediately.
+		// Otherwise, add it to a list of callbacks to run at the end of the animation.
+		if (transitionsByElement.size === 0) {
+			fn();
+		} else {
+			transitionCallbacks.add(fn);
+		}
+	});
+}

package/src/utils/shadowdom/DOMFunctions.ts

@@ -0,0 +1,100 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/utils/shadowdom/DOMFunctions.ts).
+// octane adaptation: events are native DOM events, so upstream's SyntheticEvent target
+// inference and the `event.nativeEvent.composedPath()` branch collapse away in `getEventTarget`.
+// Source: https://github.com/microsoft/tabster/blob/a89fc5d7e332d48f68d03b1ca6e344489d1c3898/src/Shadowdomize/DOMFunctions.ts#L16
+
+import { getOwnerWindow, isShadowRoot } from '../domHelpers';
+import { shadowDOM } from '../../stately/flags';
+
+/**
+ * ShadowDOM safe version of Node.contains.
+ */
+export function nodeContains(
+	node: Node | Element | null | undefined,
+	otherNode: Node | Element | null | undefined,
+): boolean {
+	if (!shadowDOM()) {
+		return otherNode && node ? node.contains(otherNode) : false;
+	}
+
+	if (!node || !otherNode) {
+		return false;
+	}
+
+	let currentNode: HTMLElement | Node | null | undefined = otherNode;
+
+	while (currentNode !== null) {
+		if (currentNode === node) {
+			return true;
+		}
+
+		if (
+			(currentNode as HTMLSlotElement).tagName === 'SLOT' &&
+			(currentNode as HTMLSlotElement).assignedSlot
+		) {
+			// Element is slotted
+			currentNode = (currentNode as HTMLSlotElement).assignedSlot!.parentNode;
+		} else if (isShadowRoot(currentNode)) {
+			// Element is in shadow root
+			currentNode = currentNode.host;
+		} else {
+			currentNode = currentNode.parentNode;
+		}
+	}
+
+	return false;
+}
+
+/**
+ * ShadowDOM safe version of document.activeElement.
+ */
+export const getActiveElement = (doc: Document = document): Element | null => {
+	if (!shadowDOM()) {
+		return doc.activeElement;
+	}
+	let activeElement: Element | null = doc.activeElement;
+
+	while (
+		activeElement &&
+		'shadowRoot' in activeElement &&
+		activeElement.shadowRoot?.activeElement
+	) {
+		activeElement = activeElement.shadowRoot.activeElement;
+	}
+
+	return activeElement;
+};
+
+/**
+ * ShadowDOM safe version of event.target.
+ */
+export function getEventTarget<T extends Event>(event: T): EventTarget {
+	if (shadowDOM() && event.target instanceof Element && event.target.shadowRoot) {
+		if ('composedPath' in event) {
+			return (event.composedPath()[0] ?? null) as EventTarget;
+		}
+	}
+	return event.target as EventTarget;
+}
+
+/**
+ * ShadowDOM safe fast version of node.contains(document.activeElement).
+ *
+ * @param node
+ * @returns
+ */
+export function isFocusWithin(node: Element | null | undefined): boolean {
+	if (!node) {
+		return false;
+	}
+	// Get the active element within the node's parent shadow root (or the document). Can return null.
+	let root = node.getRootNode();
+	let ownerWindow = getOwnerWindow(node);
+	if (!(root instanceof ownerWindow.Document || root instanceof ownerWindow.ShadowRoot)) {
+		return false;
+	}
+	let activeElement = root.activeElement;
+
+	// Check if the active element is within this node. These nodes are within the same shadow root.
+	return activeElement != null && node.contains(activeElement);
+}

package/src/utils/shadowdom/ShadowTreeWalker.ts

@@ -0,0 +1,303 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/utils/shadowdom/ShadowTreeWalker.ts).
+// https://github.com/microsoft/tabster/blob/a89fc5d7e332d48f68d03b1ca6e344489d1c3898/src/Shadowdomize/ShadowTreeWalker.ts
+
+import { nodeContains } from './DOMFunctions';
+import { shadowDOM } from '../../stately/flags';
+
+export class ShadowTreeWalker implements TreeWalker {
+	public readonly filter: NodeFilter | null;
+	public readonly root: Node;
+	public readonly whatToShow: number;
+
+	private _doc: Document;
+	private _walkerStack: Array<TreeWalker> = [];
+	private _currentNode: Node;
+	private _currentSetFor: Set<TreeWalker> = new Set();
+
+	constructor(doc: Document, root: Node, whatToShow?: number, filter?: NodeFilter | null) {
+		this._doc = doc;
+		this.root = root;
+		this.filter = filter ?? null;
+		this.whatToShow = whatToShow ?? NodeFilter.SHOW_ALL;
+		this._currentNode = root;
+
+		this._walkerStack.unshift(doc.createTreeWalker(root, whatToShow, this._acceptNode));
+
+		const shadowRoot = (root as Element).shadowRoot;
+
+		if (shadowRoot) {
+			const walker = this._doc.createTreeWalker(shadowRoot, this.whatToShow, {
+				acceptNode: this._acceptNode,
+			});
+
+			this._walkerStack.unshift(walker);
+		}
+	}
+
+	private _acceptNode = (node: Node): number => {
+		if (node.nodeType === Node.ELEMENT_NODE) {
+			const shadowRoot = (node as Element).shadowRoot;
+
+			if (shadowRoot) {
+				const walker = this._doc.createTreeWalker(shadowRoot, this.whatToShow, {
+					acceptNode: this._acceptNode,
+				});
+
+				this._walkerStack.unshift(walker);
+
+				return NodeFilter.FILTER_ACCEPT;
+			} else {
+				if (typeof this.filter === 'function') {
+					return this.filter(node);
+				} else if (this.filter?.acceptNode) {
+					return this.filter.acceptNode(node);
+				} else if (this.filter === null) {
+					return NodeFilter.FILTER_ACCEPT;
+				}
+			}
+		}
+
+		return NodeFilter.FILTER_SKIP;
+	};
+
+	public get currentNode(): Node {
+		return this._currentNode;
+	}
+
+	public set currentNode(node: Node) {
+		if (!nodeContains(this.root, node)) {
+			throw new Error('Cannot set currentNode to a node that is not contained by the root node.');
+		}
+
+		const walkers: TreeWalker[] = [];
+		let curNode: Node | null | undefined = node;
+		let currentWalkerCurrentNode = node;
+
+		this._currentNode = node;
+
+		while (curNode && curNode !== this.root) {
+			if (curNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+				const shadowRoot = curNode as ShadowRoot;
+
+				const walker = this._doc.createTreeWalker(shadowRoot, this.whatToShow, {
+					acceptNode: this._acceptNode,
+				});
+
+				walkers.push(walker);
+
+				walker.currentNode = currentWalkerCurrentNode;
+
+				this._currentSetFor.add(walker);
+
+				curNode = currentWalkerCurrentNode = shadowRoot.host;
+			} else {
+				curNode = curNode.parentNode;
+			}
+		}
+
+		const walker = this._doc.createTreeWalker(this.root, this.whatToShow, {
+			acceptNode: this._acceptNode,
+		});
+
+		walkers.push(walker);
+
+		walker.currentNode = currentWalkerCurrentNode;
+
+		this._currentSetFor.add(walker);
+
+		this._walkerStack = walkers;
+	}
+
+	public get doc(): Document {
+		return this._doc;
+	}
+
+	public firstChild(): Node | null {
+		let currentNode = this.currentNode;
+		let newNode = this.nextNode();
+		if (!nodeContains(currentNode, newNode)) {
+			this.currentNode = currentNode;
+			return null;
+		}
+		if (newNode) {
+			this.currentNode = newNode;
+		}
+		return newNode;
+	}
+
+	public lastChild(): Node | null {
+		let walker = this._walkerStack[0];
+		let newNode = walker.lastChild();
+		if (newNode) {
+			this.currentNode = newNode;
+		}
+		return newNode;
+	}
+
+	public nextNode(): Node | null {
+		const nextNode = this._walkerStack[0].nextNode();
+
+		if (nextNode) {
+			const shadowRoot = (nextNode as Element).shadowRoot;
+
+			if (shadowRoot) {
+				let nodeResult: number | undefined;
+
+				if (typeof this.filter === 'function') {
+					nodeResult = this.filter(nextNode);
+				} else if (this.filter?.acceptNode) {
+					nodeResult = this.filter.acceptNode(nextNode);
+				}
+
+				if (nodeResult === NodeFilter.FILTER_ACCEPT) {
+					this.currentNode = nextNode;
+					return nextNode;
+				}
+
+				// _acceptNode should have added new walker for this shadow,
+				// go in recursively.
+				let newNode = this.nextNode();
+				if (newNode) {
+					this.currentNode = newNode;
+				}
+				return newNode;
+			}
+
+			if (nextNode) {
+				this.currentNode = nextNode;
+			}
+			return nextNode;
+		} else {
+			if (this._walkerStack.length > 1) {
+				this._walkerStack.shift();
+
+				let newNode = this.nextNode();
+				if (newNode) {
+					this.currentNode = newNode;
+				}
+				return newNode;
+			} else {
+				return null;
+			}
+		}
+	}
+
+	public previousNode(): Node | null {
+		const currentWalker = this._walkerStack[0];
+
+		if (currentWalker.currentNode === currentWalker.root) {
+			if (this._currentSetFor.has(currentWalker)) {
+				this._currentSetFor.delete(currentWalker);
+
+				if (this._walkerStack.length > 1) {
+					this._walkerStack.shift();
+					let newNode = this.previousNode();
+					if (newNode) {
+						this.currentNode = newNode;
+					}
+					return newNode;
+				} else {
+					return null;
+				}
+			}
+
+			return null;
+		}
+
+		const previousNode = currentWalker.previousNode();
+
+		if (previousNode) {
+			const shadowRoot = (previousNode as Element).shadowRoot;
+
+			if (shadowRoot) {
+				let nodeResult: number | undefined;
+
+				if (typeof this.filter === 'function') {
+					nodeResult = this.filter(previousNode);
+				} else if (this.filter?.acceptNode) {
+					nodeResult = this.filter.acceptNode(previousNode);
+				}
+
+				if (nodeResult === NodeFilter.FILTER_ACCEPT) {
+					if (previousNode) {
+						this.currentNode = previousNode;
+					}
+					return previousNode;
+				}
+
+				// _acceptNode should have added new walker for this shadow,
+				// go in recursively.
+				let newNode = this.lastChild();
+				if (newNode) {
+					this.currentNode = newNode;
+				}
+				return newNode;
+			}
+
+			if (previousNode) {
+				this.currentNode = previousNode;
+			}
+			return previousNode;
+		} else {
+			if (this._walkerStack.length > 1) {
+				this._walkerStack.shift();
+
+				let newNode = this.previousNode();
+				if (newNode) {
+					this.currentNode = newNode;
+				}
+				return newNode;
+			} else {
+				return null;
+			}
+		}
+	}
+
+	/**
+	 * @deprecated
+	 */
+	public nextSibling(): Node | null {
+		// if (__DEV__) {
+		//     throw new Error("Method not implemented.");
+		// }
+
+		return null;
+	}
+
+	/**
+	 * @deprecated
+	 */
+	public previousSibling(): Node | null {
+		// if (__DEV__) {
+		//     throw new Error("Method not implemented.");
+		// }
+
+		return null;
+	}
+
+	/**
+	 * @deprecated
+	 */
+	public parentNode(): Node | null {
+		// if (__DEV__) {
+		//     throw new Error("Method not implemented.");
+		// }
+
+		return null;
+	}
+}
+
+/**
+ * ShadowDOM safe version of document.createTreeWalker.
+ */
+export function createShadowTreeWalker(
+	doc: Document,
+	root: Node,
+	whatToShow?: number,
+	filter?: NodeFilter | null,
+): TreeWalker {
+	if (shadowDOM()) {
+		return new ShadowTreeWalker(doc, root, whatToShow, filter);
+	}
+	return doc.createTreeWalker(root, whatToShow, filter);
+}

package/src/utils/useDescription.ts

@@ -0,0 +1,62 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/utils/useDescription.ts).
+
+import type { AriaLabelingProps } from '@react-types/shared';
+import { useState } from 'octane';
+
+import { S, splitSlot, subSlot } from '../internal';
+import { useLayoutEffect } from './useLayoutEffect';
+
+let descriptionId = 0;
+const descriptionNodes = new Map<string, { refCount: number; element: Element }>();
+
+export function useDescription(description?: string): AriaLabelingProps;
+// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
+export function useDescription(
+	description: string | undefined,
+	slot: symbol | undefined,
+): AriaLabelingProps;
+export function useDescription(...args: any[]): AriaLabelingProps {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useDescription');
+	const description = user[0] as string | undefined;
+
+	let [id, setId] = useState<string | undefined>(undefined, subSlot(slot, 'id'));
+
+	useLayoutEffect(
+		() => {
+			if (!description) {
+				return;
+			}
+
+			let desc = descriptionNodes.get(description);
+			if (!desc) {
+				let id = `react-aria-description-${descriptionId++}`;
+				setId(id);
+
+				let node = document.createElement('div');
+				node.id = id;
+				node.style.display = 'none';
+				node.textContent = description;
+				document.body.appendChild(node);
+				desc = { refCount: 0, element: node };
+				descriptionNodes.set(description, desc);
+			} else {
+				setId(desc.element.id);
+			}
+
+			desc.refCount++;
+			return () => {
+				if (desc && --desc.refCount === 0) {
+					desc.element.remove();
+					descriptionNodes.delete(description);
+				}
+			};
+		},
+		[description],
+		subSlot(slot, 'register'),
+	);
+
+	return {
+		'aria-describedby': description ? id : undefined,
+	};
+}

package/src/utils/useEffectEvent.ts

@@ -0,0 +1,34 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/utils/useEffectEvent.ts).
+// react-aria's own effect-event (ref synced in the earliest effect phase + a stable
+// wrapper) — ported as-is rather than aliased to octane's built-in `useEffectEvent`,
+// so the sync timing matches upstream exactly. octane always has `useInsertionEffect`,
+// so the React-17 layout-effect fallback collapses away.
+import { useCallback, useInsertionEffect, useRef } from 'octane';
+
+import { S, splitSlot, subSlot } from '../internal';
+
+export function useEffectEvent<T extends Function>(fn?: T): T;
+// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
+export function useEffectEvent<T extends Function>(fn: T | undefined, slot: symbol | undefined): T;
+export function useEffectEvent(...args: any[]): any {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useEffectEvent');
+	const fn = user[0] as Function | undefined;
+
+	const ref = useRef<Function | null | undefined>(null, subSlot(slot, 'ref'));
+	useInsertionEffect(
+		() => {
+			ref.current = fn;
+		},
+		[fn],
+		subSlot(slot, 'sync'),
+	);
+	return useCallback(
+		(...callArgs: any[]) => {
+			const f = ref.current;
+			return f?.(...callArgs);
+		},
+		[],
+		subSlot(slot, 'wrapper'),
+	);
+}