@rvx/ui 0.1.6

package/src/components/layer.tsx

@@ -0,0 +1,299 @@
+import { Context, ContextKey, DeriveContext, Expression, extract, get, memo, sig, Signal, teardown, uncapture, untrack, watch, wrapContext } from "rvx";
+
+import { Action, handleActionEvent, keyFor } from "../common/events.js";
+
+interface LayerInstance {
+	/** The root nodes of this layer. */
+	roots: Node[];
+	/** True if this is a modal layer. */
+	modal: boolean;
+	/** A signal representing if this layer is inert due to a modal layer on top. */
+	inert: Signal<boolean>;
+	/** An element to use as auto focus fallback. */
+	autoFocusFallback: Element | undefined;
+}
+
+export const LAYER = Symbol.for("rvx-ui:layer-handle") as ContextKey<LayerHandle>;
+
+const LAYERS = sig<LayerInstance[]>([
+	{
+		roots: [],
+		modal: false,
+		inert: sig(false),
+		autoFocusFallback: undefined,
+	},
+]);
+
+uncapture(() => watch(LAYERS, layers => {
+	const modal = layers.findLastIndex(l => l.modal);
+	for (let i = 0; i < layers.length; i++) {
+		layers[i].inert.value = i < modal;
+	}
+}));
+
+/**
+ * Render content inside the root layer.
+ */
+export function RootLayer(props: {
+	children: (ctx: Context) => unknown;
+}): unknown {
+	const layer = LAYERS.value[0];
+	const root = <div
+		style={{ display: "contents" }}
+		inert={layer.inert}
+	>
+		<DeriveContext>
+			{ctx => {
+				ctx.set(LAYER, new Handle(layer));
+				return props.children(ctx);
+			}}
+		</DeriveContext>
+	</div> as HTMLDivElement;
+	layer.roots.push(root);
+	teardown(() => {
+		const index = layer.roots.indexOf(root);
+		if (index >= 0) {
+			layer.roots.splice(index, 1);
+		}
+	});
+	return root;
+}
+
+/**
+ * An input layer that is inert while there are other modal layers on top of it.
+ *
+ * After creation, the first element with the "autofocus" attribute inside this layer is focused.
+ *
+ * When disposed, focus is moved back to the previously focused element.
+ */
+export function Layer(props: {
+	children: (ctx: Context) => unknown;
+
+	/**
+	 * If true, all layers below this one are marked as inert until the current context is disposed.
+	 */
+	modal?: boolean;
+
+	/**
+	 * If false, the layer doesn't affect other layers but is marked as inert. Default is true.
+	 */
+	enabled?: Expression<boolean | undefined>;
+}): unknown {
+	const layer: LayerInstance = {
+		roots: [],
+		modal: props.modal ?? false,
+		inert: sig(false),
+		autoFocusFallback: undefined,
+	};
+
+	const enabled = memo(() => Boolean(get(props.enabled) ?? true));
+	watch(enabled, enable => {
+		if (!enable) {
+			return;
+		}
+
+		LAYERS.update(layers => {
+			layers.push(layer);
+		});
+
+		const previous = document.activeElement;
+		if (previous && previous !== document.body) {
+			(previous as HTMLElement).blur?.();
+		}
+
+		queueMicrotask(() => {
+			const layers = LAYERS.value;
+			if (layer === layers[layers.length - 1] && root.isConnected) {
+				let active = document.activeElement;
+				if (active && (root === active || root.contains(active))) {
+					return;
+				}
+
+				const autoFocus = root.querySelector("[autofocus]");
+				if (autoFocus) {
+					(autoFocus as HTMLElement).focus?.();
+					active = document.activeElement;
+					if (active === autoFocus) {
+						return;
+					}
+				}
+
+				(layer.autoFocusFallback as HTMLElement | undefined)?.focus?.();
+			}
+		});
+
+		teardown(() => {
+			let next: LayerInstance | undefined = undefined;
+			LAYERS.update(layers => {
+				const index = layers.lastIndexOf(layer);
+				if (index >= 0) {
+					layers.splice(index, 1);
+					next = layers[index - 1];
+				}
+			});
+
+			queueMicrotask(() => {
+				const layers = LAYERS.value;
+				if (next === layers[layers.length - 1] && previous?.isConnected && previous !== document.body) {
+					(previous as HTMLElement).focus?.();
+				}
+			});
+		});
+	});
+
+	const root = <div
+		style={{ display: "contents" }}
+		inert={() => layer.inert.value || !enabled()}
+	>
+		<DeriveContext>
+			{ctx => {
+				ctx.set(LAYER, new Handle(layer));
+				return props.children(ctx);
+			}}
+		</DeriveContext>
+	</div> as HTMLElement;
+	layer.roots.push(root);
+	return root;
+}
+
+export interface LayerHandle {
+	/**
+	 * Reactively check if this layer is inert.
+	 */
+	get inert(): boolean;
+
+	/**
+	 * Reactively check if this is the top layer.
+	 */
+	get top(): boolean;
+
+	/**
+	 * Add a global event listener that is only called when this is the top layer.
+	 *
+	 * The current context is available in the event listener.
+	 *
+	 * The event listener is removed when the current context is disposed.
+	 *
+	 * @param type The event type.
+	 * @param listener The event listener.
+	 * @param options Event listener options. See {@link window.addEventListener}.
+	 */
+	useEvent<K extends keyof WindowEventMap>(type: K, listener: (event: WindowEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+	useEvent(type: string, listener: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
+
+	/**
+	 * Shorthand for adding a global "keydown" event listener using {@link useEvent} and {@link keyFor}.
+	 */
+	useHotkey(key: string, action: Action): void;
+
+	/**
+	 * Check if this layer contains the specified node.
+	 *
+	 * @param node The node to check.
+	 */
+	contains(node: Node): boolean;
+
+	/**
+	 * Check if this layer or any layers in top contain the specified node.
+	 *
+	 * @param node The node to check.
+	 * @param includeModals If false (default), any modal layers on top or layers above that are ignored.
+	 */
+	stackContains(node: Node, includeModals?: boolean): boolean;
+
+	/**
+	 * Try focusing the specified element after the layer is created (in the next microtask), if no element with the `autofocus` attribute has been found or successfully focused.
+	 *
+	 * @param element The element to use as fallback.
+	 */
+	useAutoFocusFallback(element: Element): void;
+}
+
+/**
+ * Reactively check if the layer in the current context (or the root layer if there is none) is inert.
+ */
+export function isInertLayer(): boolean {
+	return extract(LAYER)?.inert ?? untrack(() => LAYERS.value[0]).inert.value;
+}
+
+/**
+ * Reactively check if the layer in the current context (or the root layer if there is none) is the top layer.
+ */
+export function isTopLayer(): boolean {
+	return extract(LAYER)?.top ?? LAYERS.value.length === 1;
+}
+
+function instanceContains(instance: LayerInstance, node: Node): boolean {
+	const roots = instance.roots;
+	for (let i = 0; i < roots.length; i++) {
+		const root = roots[i];
+		if (root === node || root.contains(node)) {
+			return true;
+		}
+	}
+	return false;
+}
+
+class Handle implements LayerHandle {
+	#instance: LayerInstance;
+
+	constructor(instance: LayerInstance) {
+		this.#instance = instance;
+	}
+
+	get inert(): boolean {
+		return this.#instance.inert.value;
+	}
+
+	get top(): boolean {
+		const layers = LAYERS.value;
+		return layers[layers.length - 1] === this.#instance;
+	}
+
+	useEvent<K extends keyof WindowEventMap>(type: K, listener: (event: WindowEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+	useEvent(type: string, listener: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
+	useEvent(type: string, listener: (event: Event) => void, options?: boolean | AddEventListenerOptions): void {
+		const wrapper = wrapContext((event: Event): void => {
+			if (this.top) {
+				listener(event);
+			}
+		});
+		window.addEventListener(type, wrapper, options);
+		teardown(() => {
+			window.removeEventListener(type, wrapper, options);
+		});
+	}
+
+	useHotkey(key: string, action: Action): void {
+		this.useEvent("keydown", event => {
+			if (keyFor(event) === key) {
+				handleActionEvent(event, action);
+			}
+		});
+	}
+
+	contains(node: Node): boolean {
+		return instanceContains(this.#instance, node);
+	}
+
+	stackContains(node: Node, includeModals = false): boolean {
+		const layers = untrack(() => LAYERS.value);
+		let i = layers.indexOf(this.#instance);
+		if (i < 0) {
+			return this.contains(node);
+		}
+		for (;;) {
+			if (instanceContains(layers[i], node)) {
+				return true;
+			}
+			i++;
+			if (i >= layers.length || (!includeModals && layers[i].modal)) {
+				return false;
+			}
+		}
+	}
+
+	useAutoFocusFallback(element: Element | undefined): void {
+		this.#instance.autoFocusFallback = element;
+	}
+}

package/src/components/link.tsx

@@ -0,0 +1,118 @@
+import { ClassValue, Expression, extract, get, map, optionalString, StyleValue } from "rvx";
+import { isPending } from "rvx/async";
+
+import { Action, handleActionEvent, keyFor } from "../common/events.js";
+import { THEME } from "../common/theme.js";
+import { separated } from "../common/types.js";
+
+export type LinkReferrerPolicy = "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url";
+
+/**
+ * Possible values of the `"rel"` attribute that are applicable to `<a>` elements.
+ */
+export type LinkAnchorRel = "alternate" | "author" | "bookmark" | "external" | "help" | "license" | "me" | "next" | "nofollow" | "noopener" | "noreferrer" | "opener" | "prev" | "privacy-policy" | "search" | "tag" | "terms-of-service";
+
+export type LinkAnchorTarget = "_self" | "_blank" | "_parent" | "_top" | "_unfencedTop";
+
+export function Link(props: {
+	/**
+	 * Set when the link is disabled.
+	 *
+	 * The link is automatically disabled when there are any pending tasks.
+	 */
+	disabled?: Expression<boolean | undefined>;
+
+	/**
+	 * The action to run when the link is clicked.
+	 */
+	action?: Action;
+
+	/**
+	 * Causes the browser to treat the linked url as a download when true or a filename.
+	 */
+	download?: Expression<string | boolean | undefined>;
+
+	/**
+	 * The url this link points to.
+	 */
+	href?: Expression<string | undefined>;
+
+	/**
+	 * Hints the human language of the linked url.
+	 */
+	hreflang?: Expression<string | undefined>;
+
+	/**
+	 * The link target.
+	 */
+	target?: Expression<LinkAnchorTarget | string | undefined>;
+
+	/**
+	 * How much of the referrer to send when following the link.
+	 *
+	 * @default "no-referrer"
+	 */
+	referrerpolicy?: Expression<LinkReferrerPolicy | undefined>;
+
+	/**
+	 * The link type.
+	 *
+	 * @default "noreferrer"
+	 */
+	rel?: Expression<LinkAnchorRel | LinkAnchorRel[] | undefined>;
+
+	class?: ClassValue;
+	style?: StyleValue;
+	id?: Expression<string | undefined>;
+	title?: Expression<string | undefined>;
+	autofocus?: Expression<boolean | undefined>;
+	"aria-expanded"?: Expression<boolean | undefined>;
+	"aria-label"?: Expression<string | undefined>;
+	"aria-labelledby"?: Expression<string | undefined>;
+
+	children?: unknown;
+}): unknown {
+	const theme = extract(THEME);
+	const disabled = () => isPending() || get(props.disabled);
+
+	function action(event: Event) {
+		if (disabled() || !props.action) {
+			return;
+		}
+		handleActionEvent(event, props.action);
+	}
+
+	return <a
+		disabled={disabled}
+		class={[
+			theme?.link,
+			props.class,
+		]}
+		style={props.style}
+		id={props.id}
+		aria-expanded={optionalString(props["aria-expanded"])}
+		aria-label={props["aria-label"]}
+		aria-labelledby={props["aria-labelledby"]}
+		title={props.title}
+		autofocus={props.autofocus}
+		role={props.action === undefined ? undefined : "button"}
+		tabindex="0"
+
+		download={props.download}
+		href={props.href}
+		hreflang={props.hreflang}
+		target={props.target}
+		referrerpolicy={map(props.referrerpolicy, v => v ?? "no-referrer")}
+		rel={separated(map(props.rel, v => v ?? "noreferrer"), " ")}
+
+		on:click={action}
+		on:keydown={event => {
+			const key = keyFor(event);
+			if (key === "enter" || key === "space") {
+				action(event);
+			}
+		}}
+	>
+		{props.children}
+	</a>;
+}

package/src/components/page.tsx

@@ -0,0 +1,36 @@
+import { ClassValue, Expression, extract, StyleValue } from "rvx";
+
+import { THEME } from "../common/theme.js";
+import { Column } from "./column.js";
+
+export function Page(props: {
+	inlineSize?: Expression<string | undefined>;
+	role?: Expression<string | undefined>;
+	id?: Expression<string | undefined>;
+	class?: ClassValue;
+	style?: StyleValue;
+	children?: unknown;
+}): unknown {
+	const theme = extract(THEME);
+	return <div
+		role={props.role}
+		id={props.id}
+		class={[
+			props.class,
+			theme?.page,
+		]}
+		style={[
+			props.style,
+			{
+				"--page-inline-size": props.inlineSize,
+			},
+		]}
+	>
+		<div class={theme?.page_scrollbar_comp} />
+		<div class={theme?.page_content_col}>
+			<Column class={theme?.page_content}>
+				{props.children}
+			</Column>
+		</div>
+	</div>;
+}