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

package/interactions/press.jsx

@@ -0,0 +1,539 @@
+// pressProps: press interactions across mouse, pen, touch, keyboard (Enter / Space) and virtual clicks
+// (screen readers, element.click()), normalized: pressstart / pressup / pressend / press, press state,
+// pointer leave / re-enter, cancel on drag start / pointercancel, focus prevention, text selection
+// suppression, links opened by Space on role overrides, the macOS Meta-key keyup bug.
+// Ported from @react-aria/interactions usePress (react-spectrum), Apache-2.0, © Adobe; portions from
+// React (react-interactions), MIT, © Meta.
+//
+// Rivet: the returned handlers are resumable symbols (R2: function expressions in the returned
+// object), state is a plain JSON object plus an `isPressed` signal, all browser listeners are added
+// inside handlers. `pressProps` holds only runtime-delegated handlers (keydown / click / pointerdown /
+// mousedown / pointerup: no listener per element); the target's `dragstart` / `pointerenter` /
+// `pointerleave` (RA: element listeners for the element's whole life, acting only while a pointer press is
+// active) bind at pointerdown and unbind when the press ends (`Press.track`). THE press implementation of the package: `button/press.ts` (Button, ToggleButton)
+// drives the exported `press*` handler functions with per-element state (`createPressState`).
+// Deviations: no mouse/touch fallback branch (the original's is test-only, for JSDOM); the
+// double-tap-zoom `touch-action` is set through the CSSOM on the first pointerdown (CSP-safe, no
+// stylesheet) instead of an injected <style>. Resumability (cold handlers run after later events
+// already passed): a keydown whose click was already seen (`lastClick`) starts nothing; on native
+// activatable elements (`<button>`, `<input type=button|submit|…>`) a keyboard press ends at the
+// native `click` the browser fires (Enter keydown / Space keyup), not at keyup, and blur cancels it; after a
+// pointerup, RA's 80 ms "no click → cancel" fallback waits (≤ 10 s) for a click the document saw but this press's
+// own click handler has not (held by the loader behind an earlier cold event, replayed in order).
+import { createContext, signal, useContext } from "@rivetjs/reactivity";
+import { resumableContext } from "@rivetjs/runtime/resume-format";
+import { mergeProps } from "./merge-props.jsx";
+import { disableTextSelection, focusWithoutScrolling, getEventTarget, getOwnerDocument, isMac, isVirtualClick, isVirtualPointerEvent, linkState, nodeContains, nonTextInputTypes, preventFocus, read, restoreTextSelection, } from "./utils.js";
+import { openLink } from "../utils/links.jsx";
+/** `Press.track`: bind `dragstart` while pressed. */
+export const PRESS_TRACK_DRAG = 1;
+/** `Press.track`: bind `pointerenter` / `pointerleave` while pressed. */
+export const PRESS_TRACK_EXIT = 2;
+/** Fresh transient press state (browser-only, never serialized). */
+export function createPressState() {
+    return {
+        isPressed: false,
+        ignoreEmulatedMouseEvents: false,
+        didFirePressStart: false,
+        isTriggeringEvent: false,
+        activePointerId: null,
+        target: null,
+        isOverTarget: false,
+        pointerType: null,
+        metaKeyEvents: null,
+        disposables: [],
+        globals: [],
+        lastClick: -1,
+    };
+}
+/** Context through which a parent (e.g. a trigger wrapper) passes press props to a child's usePress. */
+export const PressResponderContext = resumableContext(createContext(null, { id: "rv-press-responder" }));
+const LINK_CLICKED = "__rvLinkClicked";
+/** Longest wait (ms) for a click the resume loader holds behind earlier cold events before the press is cancelled. */
+const PENDING_CLICK_MAX = 10_000;
+class PressEventImpl {
+    type;
+    pointerType;
+    target;
+    shiftKey;
+    ctrlKey;
+    metaKey;
+    altKey;
+    x = 0;
+    y = 0;
+    key;
+    #shouldStopPropagation = true;
+    constructor(type, pointerType, originalEvent, state) {
+        const currentTarget = state?.target ?? originalEvent.currentTarget;
+        const rect = currentTarget?.getBoundingClientRect?.();
+        if (rect) {
+            if (originalEvent.clientX != null && originalEvent.clientY != null) {
+                this.x = originalEvent.clientX - rect.left;
+                this.y = originalEvent.clientY - rect.top;
+            }
+            else {
+                this.x = rect.width / 2;
+                this.y = rect.height / 2;
+            }
+        }
+        this.type = type;
+        this.pointerType = pointerType;
+        this.target = originalEvent.currentTarget;
+        this.shiftKey = originalEvent.shiftKey;
+        this.metaKey = originalEvent.metaKey;
+        this.ctrlKey = originalEvent.ctrlKey;
+        this.altKey = originalEvent.altKey;
+        this.key = originalEvent.key;
+    }
+    continuePropagation() {
+        this.#shouldStopPropagation = false;
+    }
+    get shouldStopPropagation() {
+        return this.#shouldStopPropagation;
+    }
+}
+const disabled = (press) => !!read(press.props.isDisabled);
+function addGlobal(press, target, type, listener, options) {
+    const fn = listener;
+    target.addEventListener(type, fn, options);
+    press.state.globals.push(() => target.removeEventListener(type, fn, options));
+}
+function removeAllGlobals(press) {
+    for (const remove of press.state.globals.splice(0))
+        remove();
+}
+function triggerPressStart(press, originalEvent, pointerType) {
+    const { state, props } = press;
+    if (disabled(press) || state.didFirePressStart)
+        return false;
+    let shouldStopPropagation = true;
+    state.isTriggeringEvent = true;
+    if (props.onPressStart) {
+        const event = new PressEventImpl("pressstart", pointerType, originalEvent);
+        props.onPressStart(event);
+        shouldStopPropagation = event.shouldStopPropagation;
+    }
+    props.onPressChange?.(true);
+    state.isTriggeringEvent = false;
+    state.didFirePressStart = true;
+    press.pressed.set(true);
+    return shouldStopPropagation;
+}
+function triggerPressEnd(press, originalEvent, pointerType, wasPressed = true) {
+    const { state, props } = press;
+    if (!state.didFirePressStart)
+        return false;
+    state.didFirePressStart = false;
+    state.isTriggeringEvent = true;
+    let shouldStopPropagation = true;
+    if (props.onPressEnd) {
+        const event = new PressEventImpl("pressend", pointerType, originalEvent);
+        props.onPressEnd(event);
+        shouldStopPropagation = event.shouldStopPropagation;
+    }
+    props.onPressChange?.(false);
+    press.pressed.set(false);
+    if (props.onPress && wasPressed && !disabled(press)) {
+        const event = new PressEventImpl("press", pointerType, originalEvent);
+        props.onPress(event);
+        shouldStopPropagation &&= event.shouldStopPropagation;
+    }
+    state.isTriggeringEvent = false;
+    return shouldStopPropagation;
+}
+function triggerPressUp(press, originalEvent, pointerType) {
+    const { state, props } = press;
+    if (disabled(press))
+        return false;
+    if (props.onPressUp) {
+        state.isTriggeringEvent = true;
+        const event = new PressEventImpl("pressup", pointerType, originalEvent);
+        props.onPressUp(event);
+        state.isTriggeringEvent = false;
+        return event.shouldStopPropagation;
+    }
+    return true;
+}
+function cancel(press, e) {
+    const { state, props } = press;
+    if (state.isPressed && state.target) {
+        if (state.didFirePressStart && state.pointerType != null)
+            triggerPressEnd(press, createEvent(state.target, e), state.pointerType, false);
+        state.isPressed = false;
+        state.isOverTarget = false;
+        state.activePointerId = null;
+        state.pointerType = null;
+        removeAllGlobals(press);
+        if (!props.allowTextSelectionOnPress)
+            restoreTextSelection(state.target);
+        for (const dispose of state.disposables.splice(0))
+            dispose();
+    }
+}
+function cancelOnPointerExit(press, e) {
+    if (press.props.shouldCancelOnPointerExit)
+        cancel(press, e);
+}
+function triggerClick(press, e) {
+    if (disabled(press))
+        return;
+    press.props.onClick?.(e);
+}
+function triggerSyntheticClick(press, e, target) {
+    if (disabled(press))
+        return;
+    // Some libraries pass onClick instead of onPress: fire it like the browser's activation behaviour.
+    if (press.props.onClick) {
+        const event = new MouseEvent("click", e);
+        Object.defineProperty(event, "target", { value: target });
+        Object.defineProperty(event, "currentTarget", { value: target });
+        press.props.onClick(event);
+    }
+}
+/**
+ * Release a press if the hook became disabled while pressed (the original's `isDisabled` effect).
+ * Rivet reads `isDisabled` at event time; call this when a controlled disabled signal turns true
+ * during a press.
+ */
+export function cancelPress(press) {
+    const { state } = press;
+    if (state.isPressed)
+        cancel(press, { currentTarget: state.target, shiftKey: false, ctrlKey: false, metaKey: false, altKey: false });
+}
+/** @internal keydown handler of pressProps. */
+export function pressKeyDown(press, e) {
+    const { state } = press;
+    const currentTarget = e.currentTarget;
+    if (isValidKeyboardEvent(e, currentTarget) && nodeContains(currentTarget, getEventTarget(e))) {
+        // A cold (replayed) keydown whose click was already handled: nothing to start.
+        if (state.lastClick >= e.timeStamp)
+            return;
+        const native = isNativeActivatable(currentTarget);
+        // Native buttons keep their default: the native click ends the press (see header).
+        if (!native && shouldPreventDefaultKeyboard(getEventTarget(e), e.key))
+            e.preventDefault();
+        // A repeating key may have started on another element before focus moved here: only the first keydown counts.
+        let shouldStopPropagation = true;
+        if (!state.isPressed && !e.repeat) {
+            state.target = currentTarget;
+            state.isPressed = true;
+            state.pointerType = "keyboard";
+            shouldStopPropagation = triggerPressStart(press, e, "keyboard");
+            // Focus moved away before the key went up (no native click will come): end without a press.
+            if (native)
+                addGlobal(press, currentTarget, "blur", () => cancel(press, createEvent(currentTarget, { currentTarget, shiftKey: false, ctrlKey: false, metaKey: false, altKey: false })));
+        }
+        // Focus may move before keyup: listen on the document, capturing (before a child's stopPropagation).
+        const originalTarget = currentTarget;
+        const pressUp = (event) => {
+            if (isValidKeyboardEvent(event, originalTarget) && !event.repeat && nodeContains(originalTarget, getEventTarget(event)) && state.target)
+                triggerPressUp(press, createEvent(state.target, event), "keyboard");
+        };
+        addGlobal(press, getOwnerDocument(currentTarget), "keyup", (event) => {
+            pressUp(event);
+            onKeyUp(press, event);
+        }, true);
+        if (shouldStopPropagation)
+            e.stopPropagation();
+        // macOS does not fire keyup for keys released while Meta is held: remember them and release them
+        // when Meta goes up.
+        if (e.metaKey && isMac())
+            state.metaKeyEvents?.set(e.key, e);
+    }
+    else if (e.key === "Meta")
+        state.metaKeyEvents = new Map();
+}
+function onKeyUp(press, e) {
+    const { state } = press;
+    if (state.isPressed && state.target && isValidKeyboardEvent(e, state.target)) {
+        const target = getEventTarget(e);
+        // Native activatable elements: the click (Enter keydown / Space keyup) ends the press.
+        if (isNativeActivatable(state.target) && nodeContains(state.target, target))
+            return;
+        if (shouldPreventDefaultKeyboard(target, e.key))
+            e.preventDefault();
+        const wasPressed = nodeContains(state.target, target);
+        triggerPressEnd(press, createEvent(state.target, e), "keyboard", wasPressed);
+        if (wasPressed)
+            triggerSyntheticClick(press, e, state.target);
+        removeAllGlobals(press);
+        // A link triggered by a key other than Enter has a role override: open it ourselves (once per event).
+        const flagged = e;
+        if (e.key !== "Enter" && isHTMLAnchorLink(state.target) && nodeContains(state.target, target) && !flagged[LINK_CLICKED]) {
+            flagged[LINK_CLICKED] = true;
+            openLink(state.target, e, false);
+        }
+        state.isPressed = false;
+        state.metaKeyEvents?.delete(e.key);
+    }
+    else if (e.key === "Meta" && state.metaKeyEvents?.size) {
+        const events = state.metaKeyEvents;
+        state.metaKeyEvents = null;
+        for (const event of events.values())
+            state.target?.dispatchEvent(new KeyboardEvent("keyup", event));
+    }
+}
+/** @internal click handler of pressProps (virtual clicks and the end of pointer presses). */
+export function pressClick(press, e) {
+    const { state } = press;
+    if (e && !nodeContains(e.currentTarget, getEventTarget(e)))
+        return;
+    state.lastClick = e.timeStamp;
+    if (e && e.button === 0 && !state.isTriggeringEvent && !linkState.isOpening) {
+        let shouldStopPropagation = true;
+        if (disabled(press))
+            e.preventDefault();
+        // Screen reader or element.click(): press as if from the keyboard.
+        if (!state.ignoreEmulatedMouseEvents && !state.isPressed && (state.pointerType === "virtual" || isVirtualClick(e))) {
+            const stopPressStart = triggerPressStart(press, e, "virtual");
+            const stopPressUp = triggerPressUp(press, e, "virtual");
+            const stopPressEnd = triggerPressEnd(press, e, "virtual");
+            triggerClick(press, e);
+            shouldStopPropagation = stopPressStart && stopPressUp && stopPressEnd;
+        }
+        else if (state.isPressed && (state.pointerType !== "keyboard" || isNativeActivatable(e.currentTarget))) {
+            const pointerType = state.pointerType || e.pointerType || "virtual";
+            const target = e.currentTarget;
+            // Keyboard press ending at the native click: pressup already fired on keyup.
+            const stopPressUp = pointerType === "keyboard" ? true : triggerPressUp(press, createEvent(target, e), pointerType);
+            const stopPressEnd = triggerPressEnd(press, createEvent(target, e), pointerType, true);
+            shouldStopPropagation = stopPressUp && stopPressEnd;
+            state.isOverTarget = false;
+            triggerClick(press, e);
+            cancel(press, e);
+        }
+        state.ignoreEmulatedMouseEvents = false;
+        if (shouldStopPropagation)
+            e.stopPropagation();
+    }
+}
+/** @internal pointerdown handler of pressProps. */
+export function pressPointerDown(press, e) {
+    const { state, props } = press;
+    // Left button only; ignore events bubbling through portals.
+    if (e.button !== 0 || !nodeContains(e.currentTarget, getEventTarget(e)))
+        return;
+    // react-aria's `[data-react-aria-pressable] { touch-action: pan-x pan-y pinch-zoom }`: no double-tap zoom delay.
+    const current = e.currentTarget;
+    if (current.style && !current.style.touchAction)
+        current.style.touchAction = "pan-x pan-y pinch-zoom";
+    // iOS VoiceOver fires pointer events with wrong coordinates / target: leave it to onClick.
+    if (isVirtualPointerEvent(e)) {
+        state.pointerType = "virtual";
+        return;
+    }
+    state.pointerType = e.pointerType;
+    let shouldStopPropagation = true;
+    if (!state.isPressed) {
+        state.isPressed = true;
+        state.isOverTarget = true;
+        state.activePointerId = e.pointerId;
+        state.target = e.currentTarget;
+        if (!props.allowTextSelectionOnPress)
+            disableTextSelection(state.target);
+        shouldStopPropagation = triggerPressStart(press, e, state.pointerType);
+        // Release implicit pointer capture so touch interactions can leave the target (pointerleave / enter).
+        const target = getEventTarget(e);
+        if (target && "releasePointerCapture" in target && (!("hasPointerCapture" in target) || target.hasPointerCapture(e.pointerId)))
+            target.releasePointerCapture(e.pointerId);
+        const doc = getOwnerDocument(e.currentTarget);
+        addGlobal(press, doc, "pointerup", (event) => onGlobalPointerUp(press, event), false);
+        addGlobal(press, doc, "pointercancel", (event) => cancel(press, event), false);
+        // The target's own drag start / exit / re-entry, only while pressed (no listener per element at render).
+        const track = press.track ?? 0;
+        if (track & PRESS_TRACK_DRAG)
+            addGlobal(press, current, "dragstart", (event) => pressDragStart(press, event));
+        if (track & PRESS_TRACK_EXIT) {
+            addGlobal(press, current, "pointerenter", (event) => pressPointerEnter(press, event));
+            addGlobal(press, current, "pointerleave", (event) => pressPointerLeave(press, event));
+        }
+    }
+    if (shouldStopPropagation)
+        e.stopPropagation();
+}
+/** @internal mousedown handler of pressProps (focus prevention). */
+export function pressMouseDown(press, e) {
+    if (!nodeContains(e.currentTarget, getEventTarget(e)))
+        return;
+    if (e.button === 0) {
+        if (press.props.preventFocusOnPress) {
+            const dispose = preventFocus(e.target);
+            if (dispose)
+                press.state.disposables.push(dispose);
+        }
+        e.stopPropagation();
+    }
+}
+/** @internal pointerup handler on the target of pressProps. */
+export function pressPointerUp(press, e) {
+    const { state } = press;
+    // iOS fires pointerup with zero size: check the pointer type recorded at pointerdown.
+    if (!nodeContains(e.currentTarget, getEventTarget(e)) || state.pointerType === "virtual")
+        return;
+    // Left button; a press that started here waits for onClick.
+    if (e.button === 0 && !state.isPressed)
+        triggerPressUp(press, e, state.pointerType || e.pointerType);
+}
+/** @internal pointerenter handler of a press (bound on the target while pressed: `PRESS_TRACK_EXIT`). */
+export function pressPointerEnter(press, e) {
+    const { state } = press;
+    if (e.target !== e.currentTarget)
+        return; // delegated dispatch of a descendant's (non-bubbling) enter
+    if (e.pointerId === state.activePointerId && state.target && !state.isOverTarget && state.pointerType != null) {
+        state.isOverTarget = true;
+        triggerPressStart(press, createEvent(state.target, e), state.pointerType);
+    }
+}
+/** @internal pointerleave handler of a press (bound on the target while pressed: `PRESS_TRACK_EXIT`). */
+export function pressPointerLeave(press, e) {
+    const { state } = press;
+    if (e.target !== e.currentTarget)
+        return;
+    if (e.pointerId === state.activePointerId && state.target && state.isOverTarget && state.pointerType != null) {
+        state.isOverTarget = false;
+        triggerPressEnd(press, createEvent(state.target, e), state.pointerType, false);
+        cancelOnPointerExit(press, e);
+    }
+}
+function onGlobalPointerUp(press, e) {
+    const { state } = press;
+    if (e.pointerId === state.activePointerId && state.isPressed && e.button === 0 && state.target) {
+        if (nodeContains(state.target, getEventTarget(e)) && state.pointerType != null) {
+            // onPress waits for onClick (DOM mutations between pointerup and click break browsers). iOS and
+            // Android do not click after a long press: click ourselves after 80 ms unless a click came first
+            // (≥ 32 ms: iOS delays clicks on non-form elements for hover emulation).
+            // `timeStamp` of the click that followed (null: none yet).
+            let clicked = null;
+            const settle = (waited) => {
+                const timeout = setTimeout(() => {
+                    if (!state.isPressed || !(state.target instanceof HTMLElement))
+                        return;
+                    if (clicked === null) {
+                        focusWithoutScrolling(state.target);
+                        state.target.click();
+                    }
+                    else if (state.lastClick < clicked && waited < PENDING_CLICK_MAX) {
+                        // Rivet (resumability): the click came, but this press's own click handler has not seen it yet — the
+                        // resume loader holds it behind an earlier cold event whose chunk is still loading (a cold `focusin`
+                        // on an ancestor, say) and replays it in order. Cancelling here would drop the press: wait for it.
+                        settle(waited + 80);
+                    }
+                    else
+                        cancel(press, e);
+                }, 80);
+                state.disposables.push(() => clearTimeout(timeout));
+            };
+            settle(0);
+            // Capturing: stopPropagation elsewhere must not hide the click.
+            addGlobal(press, e.currentTarget, "click", (event) => (clicked = event.timeStamp), true);
+        }
+        else
+            cancel(press, e);
+        // Ignore the pointerleave touch devices fire before onClick.
+        state.isOverTarget = false;
+    }
+}
+/** @internal dragstart handler of a press (bound on the target while pressed: `PRESS_TRACK_DRAG`; Safari fires no pointercancel when a drag starts). */
+export function pressDragStart(press, e) {
+    if (!nodeContains(e.currentTarget, getEventTarget(e)))
+        return;
+    cancel(press, e);
+}
+/**
+ * Handle press interactions across mouse, touch, keyboard and screen readers. Spread `pressProps`
+ * on the target (`<div {...pressProps}>`); `isPressed()` reads the press state. Options are read at
+ * event time, so `isDisabled` / `isPressed` may be signals.
+ */
+export function pressProps(props = {}) {
+    // PressResponder: a parent passes press props to the pressable child through context.
+    const context = useContext(PressResponderContext);
+    if (context) {
+        const { register, ...contextProps } = context;
+        props = mergePressProps(contextProps, props);
+        register?.();
+    }
+    const { onPress: _onPress, onPressChange: _onPressChange, onPressStart: _onPressStart, onPressEnd: _onPressEnd, onPressUp: _onPressUp, onClick: _onClick, isDisabled: _isDisabled, isPressed: _isPressed, preventFocusOnPress: _preventFocusOnPress, shouldCancelOnPointerExit: _shouldCancelOnPointerExit, allowTextSelectionOnPress: _allowTextSelectionOnPress, ref: _ref, ...domProps } = props;
+    const pressed = signal(false);
+    const press = {
+        props,
+        pressed,
+        state: createPressState(),
+        track: PRESS_TRACK_DRAG | PRESS_TRACK_EXIT,
+    };
+    const handlers = {
+        "data-rv-pressable": "",
+        onKeyDown: (e) => pressKeyDown(press, e),
+        onClick: (e) => pressClick(press, e),
+        onPointerDown: (e) => pressPointerDown(press, e),
+        onMouseDown: (e) => pressMouseDown(press, e),
+        onPointerUp: (e) => pressPointerUp(press, e),
+    };
+    return {
+        isPressed: () => !!read(_isPressed) || pressed(),
+        // No pass-through props (the usual case): the handler bag as is (what `mergeProps({}, handlers)` returns).
+        pressProps: hasKeys(domProps) ? mergeProps(domProps, handlers) : handlers,
+    };
+}
+function hasKeys(o) {
+    for (const _ in o)
+        return true;
+    return false;
+}
+/** Merge press props: handlers chain (parent first), other values: later wins. */
+function mergePressProps(a, b) {
+    return mergeProps(a, b);
+}
+function isHTMLAnchorLink(target) {
+    return target.tagName === "A" && target.hasAttribute("href");
+}
+/** Elements the browser clicks itself on Enter / Space (the native click ends a keyboard press). */
+function isNativeActivatable(el) {
+    return el instanceof HTMLButtonElement || (el instanceof HTMLInputElement && /^(button|submit|reset|checkbox|radio|image)$/.test(el.type));
+}
+function isValidKeyboardEvent(event, currentTarget) {
+    const { key, code } = event;
+    const element = currentTarget;
+    const role = element.getAttribute("role");
+    // Enter and Space only ("Spacebar": IE 11); not inside text inputs / textareas / contenteditable;
+    // links only with Enter.
+    return ((key === "Enter" || key === " " || key === "Spacebar" || code === "Space") &&
+        !((element instanceof HTMLInputElement && !isValidInputKey(element, key)) || element instanceof HTMLTextAreaElement || element.isContentEditable) &&
+        !((role === "link" || (!role && isHTMLAnchorLink(element))) && key !== "Enter"));
+}
+function createEvent(target, e) {
+    return {
+        currentTarget: target,
+        shiftKey: e.shiftKey,
+        ctrlKey: e.ctrlKey,
+        metaKey: e.metaKey,
+        altKey: e.altKey,
+        clientX: e.clientX,
+        clientY: e.clientY,
+        key: e.key,
+    };
+}
+function shouldPreventDefaultUp(target) {
+    if (target instanceof HTMLInputElement)
+        return false;
+    if (target instanceof HTMLButtonElement)
+        return target.type !== "submit" && target.type !== "reset";
+    if (isHTMLAnchorLink(target))
+        return false;
+    return true;
+}
+function shouldPreventDefaultKeyboard(target, key) {
+    // Keep the macOS context-menu shortcut.
+    if (isMac() && key === "Enter")
+        return false;
+    if (target instanceof HTMLInputElement) {
+        // Enter on a checkbox / radio submits the form implicitly but does not toggle.
+        if (key === "Enter" && (target.type === "checkbox" || target.type === "radio"))
+            return false;
+        return !isValidInputKey(target, key);
+    }
+    return shouldPreventDefaultUp(target);
+}
+function isValidInputKey(target, key) {
+    // Only Space toggles checkboxes and radios, not Enter.
+    return target.type === "checkbox" || target.type === "radio" ? key === " " : nonTextInputTypes.has(target.type);
+}

package/interactions/pressable.d.ts

@@ -0,0 +1,22 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import { type FocusableOptions } from "../focus/focusable.jsx";
+import { type RefValue } from "../slots/index.jsx";
+import { type PressProps } from "./press.jsx";
+export { PressResponderContext } from "./press.jsx";
+export interface PressResponderProps extends PressProps {
+    children?: Content;
+    ref?: RefValue<Element>;
+}
+/** Passes press props to the nearest pressable child (`pressProps`) through context (RA `PressResponder`). */
+export declare function PressResponder(props: PressResponderProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/** Stops press props of outer `PressResponder`s from reaching the children (RA `ClearPressResponder`). */
+export declare function ClearPressResponder(props: {
+    children?: Content;
+}): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface PressableProps extends PressProps, Omit<FocusableOptions, "isDisabled"> {
+    /** Render function of the pressable element: spread the props (incl. `ref`) on it. */
+    children: (props: Record<string, unknown>) => Content;
+    ref?: RefValue<Element>;
+}
+/** Makes its child pressable and focusable (RA `<Pressable>`); see the header for the render-function child. */
+export declare function Pressable(props: PressableProps): string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined;