@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/_adapters/type-select.d.ts

@@ -0,0 +1,8 @@
+import type { Key, KeyboardDelegate, SelectionManager } from "./collections.js";
+/**
+ * Typeahead keydown (incl. the capture-phase Space-in-search case). Returns true when the key was
+ * consumed (default prevented, propagation stopped).
+ */
+export declare function typeSelectKeyDown(list: object, root: HTMLElement, manager: SelectionManager, delegate: KeyboardDelegate, e: KeyboardEvent, onTypeSelect?: (key: Key) => void): boolean;
+/** Test hook: clear the typeahead buffer of `list`. */
+export declare const _resetTypeSelect: (list: object) => void;

package/_adapters/type-select.js

@@ -0,0 +1,59 @@
+const TYPEAHEAD_DEBOUNCE_WAIT_MS = 1000;
+const searches = new WeakMap();
+function getStringForKey(key) {
+    // Length 1: a character; otherwise a non-ASCII key name is a Unicode character.
+    if (key.length === 1 || !/^[A-Z]/i.test(key))
+        return key;
+    return "";
+}
+/**
+ * Typeahead keydown (incl. the capture-phase Space-in-search case). Returns true when the key was
+ * consumed (default prevented, propagation stopped).
+ */
+export function typeSelectKeyDown(list, root, manager, delegate, e, onTypeSelect) {
+    if (!delegate.getKeyForSearch)
+        return false;
+    let state = searches.get(list);
+    if (!state)
+        searches.set(list, (state = { search: "" }));
+    const reset = () => {
+        clearTimeout(state.timeout);
+        state.timeout = setTimeout(() => (state.search = ""), TYPEAHEAD_DEBOUNCE_WAIT_MS);
+    };
+    // Space continues a search in progress (capture phase in the original).
+    if (state.search.length > 0 && e.key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        state.search += " ";
+        let key = delegate.getKeyForSearch(state.search, manager.focusedKey);
+        if (key == null)
+            key = delegate.getKeyForSearch(state.search);
+        if (key != null) {
+            manager.setFocusedKey(key);
+            onTypeSelect?.(key);
+        }
+        reset();
+        return true;
+    }
+    const character = getStringForKey(e.key);
+    if (!character || e.ctrlKey || e.metaKey || e.altKey || (state.search.length === 0 && character === " "))
+        return false;
+    state.search += character;
+    let key = delegate.getKeyForSearch(state.search, manager.focusedKey);
+    if (key == null)
+        key = delegate.getKeyForSearch(state.search);
+    if (key == null) {
+        state.search = "";
+        clearTimeout(state.timeout);
+        state.timeout = undefined;
+        return false;
+    }
+    manager.setFocusedKey(key);
+    onTypeSelect?.(key);
+    e.preventDefault();
+    e.stopPropagation();
+    reset();
+    return true;
+}
+/** Test hook: clear the typeahead buffer of `list`. */
+export const _resetTypeSelect = (list) => void searches.delete(list);

package/a11y/aria-describer.d.ts

@@ -0,0 +1,46 @@
+/** Add `id` to the space-separated id list in `attr` (no duplicates). */
+export declare function addAriaReferencedId(el: Element, attr: `aria-${string}`, id: string): void;
+/** Remove `id` from the id list in `attr`; removes the attribute when the list becomes empty. */
+export declare function removeAriaReferencedId(el: Element, attr: `aria-${string}`, id: string): void;
+/** The ids in an id-list attribute. */
+export declare function getAriaReferenceIds(el: Element, attr: string): string[];
+export interface RegisteredMessage {
+    /** The element holding the message text. */
+    messageElement: Element;
+    /** Number of elements described by it. */
+    referenceCount: number;
+}
+/** Id prefix of message elements created by the describer. */
+export declare const CDK_DESCRIBEDBY_ID_PREFIX = "cdk-describedby-message";
+/** Attribute marking elements described by a describer (value: the describer id). */
+export declare const CDK_DESCRIBEDBY_HOST_ATTRIBUTE = "cdk-describedby-host";
+/**
+ * Adds `aria-describedby` descriptions to elements, sharing one message element per distinct
+ * message (+ role) and removing it when no element references it any more.
+ */
+export declare class AriaDescriber {
+    private _messageRegistry;
+    private _messagesContainer;
+    private readonly _id;
+    private readonly _document;
+    constructor(appId?: string, doc?: Document);
+    /** Describe `hostElement` with a message string (+ role) or an existing element. */
+    describe(hostElement: Element, message: string, role?: string): void;
+    describe(hostElement: Element, message: HTMLElement): void;
+    /** Remove a description; a created message element is deleted when unreferenced. */
+    removeDescription(hostElement: Element, message: string, role?: string): void;
+    removeDescription(hostElement: Element, message: HTMLElement): void;
+    /** Remove all descriptions and the container (ngOnDestroy). */
+    destroy(): void;
+    private _createMessageElement;
+    private _deleteMessageElement;
+    private _createMessagesContainer;
+    private _removeCdkDescribedByReferenceIds;
+    private _addMessageReference;
+    private _removeMessageReference;
+    private _isElementDescribedByMessage;
+    private _canBeDescribed;
+    private _isElementNode;
+}
+/** The shared AriaDescriber. */
+export declare function getAriaDescriber(): AriaDescriber;

package/a11y/aria-describer.js

@@ -0,0 +1,169 @@
+// AriaDescriber (shared, reference-counted `aria-describedby` message elements in one visually
+// hidden container) and the aria-reference id-list helpers.
+// Ported from Angular CDK a11y aria-describer / aria-reference (angular/components), MIT, © Google LLC.
+//
+// Rivet: a plain class; APP_ID becomes the optional `appId` constructor argument. Browser only.
+import { hideVisually } from "./index.js";
+const ID_DELIMITER = " ";
+/** Add `id` to the space-separated id list in `attr` (no duplicates). */
+export function addAriaReferencedId(el, attr, id) {
+    const ids = getAriaReferenceIds(el, attr);
+    id = id.trim();
+    if (ids.some((existingId) => existingId.trim() === id))
+        return;
+    ids.push(id);
+    el.setAttribute(attr, ids.join(ID_DELIMITER));
+}
+/** Remove `id` from the id list in `attr`; removes the attribute when the list becomes empty. */
+export function removeAriaReferencedId(el, attr, id) {
+    const ids = getAriaReferenceIds(el, attr);
+    id = id.trim();
+    const filteredIds = ids.filter((val) => val !== id);
+    if (filteredIds.length)
+        el.setAttribute(attr, filteredIds.join(ID_DELIMITER));
+    else
+        el.removeAttribute(attr);
+}
+/** The ids in an id-list attribute. */
+export function getAriaReferenceIds(el, attr) {
+    const attrValue = el.getAttribute(attr);
+    return attrValue?.match(/\S+/g) ?? [];
+}
+/** Id prefix of message elements created by the describer. */
+export const CDK_DESCRIBEDBY_ID_PREFIX = "cdk-describedby-message";
+/** Attribute marking elements described by a describer (value: the describer id). */
+export const CDK_DESCRIBEDBY_HOST_ATTRIBUTE = "cdk-describedby-host";
+const g = { nextId: 0 };
+/**
+ * Adds `aria-describedby` descriptions to elements, sharing one message element per distinct
+ * message (+ role) and removing it when no element references it any more.
+ */
+export class AriaDescriber {
+    _messageRegistry = new Map();
+    _messagesContainer = null;
+    _id;
+    _document;
+    constructor(appId = "rv", doc = document) {
+        this._document = doc;
+        this._id = appId + "-" + g.nextId++;
+    }
+    describe(hostElement, message, role) {
+        if (!this._canBeDescribed(hostElement, message))
+            return;
+        const key = getKey(message, role);
+        if (typeof message !== "string") {
+            setMessageId(message, this._id);
+            this._messageRegistry.set(key, { messageElement: message, referenceCount: 0 });
+        }
+        else if (!this._messageRegistry.has(key))
+            this._createMessageElement(message, role);
+        if (!this._isElementDescribedByMessage(hostElement, key))
+            this._addMessageReference(hostElement, key);
+    }
+    removeDescription(hostElement, message, role) {
+        if (!message || !this._isElementNode(hostElement))
+            return;
+        const key = getKey(message, role);
+        if (this._isElementDescribedByMessage(hostElement, key))
+            this._removeMessageReference(hostElement, key);
+        // Only messages created here are removed; consumer elements stay.
+        if (typeof message === "string") {
+            const registeredMessage = this._messageRegistry.get(key);
+            if (registeredMessage && registeredMessage.referenceCount === 0)
+                this._deleteMessageElement(key);
+        }
+        if (this._messagesContainer?.childNodes.length === 0) {
+            this._messagesContainer.remove();
+            this._messagesContainer = null;
+        }
+    }
+    /** Remove all descriptions and the container (ngOnDestroy). */
+    destroy() {
+        const describedElements = this._document.querySelectorAll(`[${CDK_DESCRIBEDBY_HOST_ATTRIBUTE}="${this._id}"]`);
+        for (let i = 0; i < describedElements.length; i++) {
+            this._removeCdkDescribedByReferenceIds(describedElements[i]);
+            describedElements[i].removeAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE);
+        }
+        this._messagesContainer?.remove();
+        this._messagesContainer = null;
+        this._messageRegistry.clear();
+    }
+    _createMessageElement(message, role) {
+        const messageElement = this._document.createElement("div");
+        setMessageId(messageElement, this._id);
+        messageElement.textContent = message;
+        if (role)
+            messageElement.setAttribute("role", role);
+        this._createMessagesContainer();
+        this._messagesContainer.appendChild(messageElement);
+        this._messageRegistry.set(getKey(message, role), { messageElement, referenceCount: 0 });
+    }
+    _deleteMessageElement(key) {
+        this._messageRegistry.get(key)?.messageElement?.remove();
+        this._messageRegistry.delete(key);
+    }
+    _createMessagesContainer() {
+        if (this._messagesContainer)
+            return;
+        const containerClassName = "cdk-describedby-message-container";
+        // Drop server-rendered containers we hold no reference to.
+        const serverContainers = this._document.querySelectorAll(`.${containerClassName}[platform="server"]`);
+        for (let i = 0; i < serverContainers.length; i++)
+            serverContainers[i].remove();
+        const messagesContainer = this._document.createElement("div");
+        // visibility: hidden keeps the text out of find-in-page; screen readers still read descriptions.
+        messagesContainer.style.visibility = "hidden";
+        messagesContainer.classList.add(containerClassName, "cdk-visually-hidden");
+        hideVisually(messagesContainer);
+        this._document.body.appendChild(messagesContainer);
+        this._messagesContainer = messagesContainer;
+    }
+    _removeCdkDescribedByReferenceIds(element) {
+        const originalReferenceIds = getAriaReferenceIds(element, "aria-describedby").filter((id) => id.indexOf(CDK_DESCRIBEDBY_ID_PREFIX) != 0);
+        element.setAttribute("aria-describedby", originalReferenceIds.join(" "));
+    }
+    _addMessageReference(element, key) {
+        const registeredMessage = this._messageRegistry.get(key);
+        addAriaReferencedId(element, "aria-describedby", registeredMessage.messageElement.id);
+        element.setAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE, this._id);
+        registeredMessage.referenceCount++;
+    }
+    _removeMessageReference(element, key) {
+        const registeredMessage = this._messageRegistry.get(key);
+        registeredMessage.referenceCount--;
+        removeAriaReferencedId(element, "aria-describedby", registeredMessage.messageElement.id);
+        element.removeAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE);
+    }
+    _isElementDescribedByMessage(element, key) {
+        const referenceIds = getAriaReferenceIds(element, "aria-describedby");
+        const registeredMessage = this._messageRegistry.get(key);
+        const messageId = registeredMessage && registeredMessage.messageElement.id;
+        return !!messageId && referenceIds.indexOf(messageId) != -1;
+    }
+    _canBeDescribed(element, message) {
+        if (!this._isElementNode(element))
+            return false;
+        // A consumer-provided element is assumed to be a valid description.
+        if (message && typeof message === "object")
+            return true;
+        const trimmedMessage = message == null ? "" : `${message}`.trim();
+        const ariaLabel = element.getAttribute("aria-label");
+        // A description equal to the aria-label would be read twice.
+        return trimmedMessage ? !ariaLabel || ariaLabel.trim() !== trimmedMessage : false;
+    }
+    _isElementNode(element) {
+        return element.nodeType === this._document.ELEMENT_NODE;
+    }
+}
+function getKey(message, role) {
+    return typeof message === "string" ? `${role || ""}/${message}` : message;
+}
+function setMessageId(element, serviceId) {
+    if (!element.id)
+        element.id = `${CDK_DESCRIBEDBY_ID_PREFIX}-${serviceId}-${g.nextId++}`;
+}
+let shared = null;
+/** The shared AriaDescriber. */
+export function getAriaDescriber() {
+    return (shared ??= new AriaDescriber());
+}

package/a11y/focus-monitor.d.ts

@@ -0,0 +1,98 @@
+import { Subject } from "./key-manager.js";
+export type InputModality = "keyboard" | "mouse" | "touch" | null;
+export interface InputModalityDetectorOptions {
+    /** Key codes that do not switch the modality to keyboard. */
+    ignoreKeys?: number[];
+}
+export declare const INPUT_MODALITY_DETECTOR_DEFAULT_OPTIONS: InputModalityDetectorOptions;
+/** Time after a touchstart during which a mousedown counts as touch. */
+export declare const TOUCH_BUFFER_MS = 650;
+/** A screen reader's fake mousedown (Enter / Space on a control): buttons 0 (Firefox) or detail 0 (Chrome). */
+export declare function isFakeMousedownFromScreenReader(event: MouseEvent): boolean;
+/** A screen reader's fake touchstart: identifier -1, radius 1 (NVDA on touch screens). */
+export declare function isFakeTouchstartFromScreenReader(event: TouchEvent): boolean;
+/** Detects the user's input modality (keyboard / mouse / touch). Screen reader navigation does not count. */
+export declare class InputModalityDetector {
+    /** Emits on every detected modality. */
+    readonly modalityDetected: Subject<InputModality>;
+    /** Emits when the modality changes. */
+    readonly modalityChanged: Subject<InputModality>;
+    /** Target of the most recent modality event. */
+    _mostRecentTarget: HTMLElement | null;
+    private _modality;
+    private readonly _options;
+    private _lastTouchMs;
+    private readonly _listenerCleanups;
+    /** The most recently detected modality. */
+    get mostRecentModality(): InputModality;
+    constructor(options?: InputModalityDetectorOptions, doc?: Document | null);
+    private _next;
+    private _onKeydown;
+    private _onMousedown;
+    private _onTouchstart;
+    destroy(): void;
+}
+export type FocusOrigin = "touch" | "mouse" | "keyboard" | "program" | null;
+/** How a focus event's origin is attributed. */
+export declare const FocusMonitorDetectionMode: {
+    /** Only interaction events of the previous / current tick count (default). */
+    readonly IMMEDIATE: 0;
+    /** The last interaction event counts, however long ago. */
+    readonly EVENTUAL: 1;
+};
+export type FocusMonitorDetectionMode = (typeof FocusMonitorDetectionMode)[keyof typeof FocusMonitorDetectionMode];
+export interface FocusMonitorOptions {
+    detectionMode?: FocusMonitorDetectionMode;
+}
+/** Monitors interaction events to determine the origin of focus events. */
+export declare class FocusMonitor {
+    private _origin;
+    private _lastFocusOrigin;
+    private _windowFocused;
+    private _windowFocusTimeoutId;
+    private _originTimeoutId;
+    private _originFromTouchInteraction;
+    private _elementInfo;
+    private _monitoredElementCount;
+    private _rootNodeFocusListenerCount;
+    private readonly _detectionMode;
+    private _modalitySubscription;
+    protected _document: Document;
+    private readonly _inputModalityDetector;
+    constructor(options?: FocusMonitorOptions | null, inputModalityDetector?: InputModalityDetector, doc?: Document);
+    private _windowFocusListener;
+    private _rootNodeFocusAndBlurListener;
+    /**
+     * Monitor focus on `element` (and its children with `checkChildren`) and apply the `cdk-focused`
+     * / `cdk-{origin}-focused` classes. The returned subject emits the origin on focus, `null` on blur.
+     */
+    monitor(element: HTMLElement | {
+        nativeElement: HTMLElement;
+    }, checkChildren?: boolean): Subject<FocusOrigin>;
+    /** Stop monitoring `element` and remove its focus classes. */
+    stopMonitoring(element: HTMLElement | {
+        nativeElement: HTMLElement;
+    }): void;
+    /** Focus `element` with the given origin. */
+    focusVia(element: HTMLElement | {
+        nativeElement: HTMLElement;
+    }, origin: FocusOrigin, options?: FocusOptions): void;
+    destroy(): void;
+    private _getWindow;
+    private _getFocusOrigin;
+    private _shouldBeAttributedToTouch;
+    private _setClasses;
+    private _setOrigin;
+    private _onFocus;
+    _onBlur(event: FocusEvent, element: HTMLElement): void;
+    private _emitOrigin;
+    private _registerGlobalListeners;
+    private _removeGlobalListeners;
+    private _originChanged;
+    private _getClosestElementsInfo;
+    private _isLastInteractionFromInputLabel;
+}
+/** The shared InputModalityDetector (created on first call; browser only). */
+export declare function getInputModalityDetector(): InputModalityDetector;
+/** The shared FocusMonitor (created on first call; browser only). */
+export declare function getFocusMonitor(): FocusMonitor;